/* Kami landing-page tokens and editorial rhythm, adapted for a local reading shelf. */
:root {
  --parchment:#f5f4ed; --ivory:#faf9f5; --inline-code-bg:#f0eee6; --warm-sand:#e8e6dc;
  --brand:#1b365d; --bookmark:#35624a; --near-black:#141413; --dark-warm:#3d3d3a; --olive:#504e49;
  --stone:#6b6a64; --border:#e8e6dc; --border-soft:#e5e3d8;
  --serif:"LXGW WenKai Screen","Source Han Serif SC","Noto Serif CJK SC","Songti SC","STSong",Georgia,serif;
  --latin:Charter,Georgia,serif; --ui:"PingFang SC",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--parchment);scroll-behavior:smooth}
body{margin:0;color:var(--near-black);font-family:var(--serif);font-synthesis:none;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
button,a,input,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.65}
a{color:inherit;text-decoration:none}
button{background:none;border:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--brand);outline-offset:5px}
::selection{background:var(--warm-sand);color:var(--brand)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-100px;background:var(--ivory);padding:12px;z-index:10}.skip-link:focus{top:12px}
.page{max-width:1224px;margin:0 auto;padding:0 52px}
.masthead{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.wordmark{display:flex;gap:18px;align-items:baseline;font-size:32px;font-weight:500;letter-spacing:2px;color:var(--brand)}
.wordmark span{font-family:var(--latin);font-size:12px;letter-spacing:3px;font-weight:400}
.masthead-note{font-size:14px;color:var(--stone);letter-spacing:2px}
.masthead-actions{display:flex;align-items:center;gap:20px}.logout-button{font-family:var(--ui);font-size:13px;color:var(--stone);padding:8px 0}.logout-button:hover{color:var(--brand)}
.guest-only{display:none}body[data-access=guest] .owner-only{display:none}body[data-access=guest] .guest-only{display:inline-flex}
.capture{padding-top:40px}
.capture-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;gap:16px}
h1{font-size:24px;font-weight:400;line-height:1.3;margin:0;letter-spacing:1px}
.capture-note{font-size:14px;color:var(--stone)}
.composer{--mode-accent:var(--brand);--mode-ring:#1b365d1c;--mode-soft:#e9edf3;background:var(--ivory);border:1px solid var(--mode-accent);border-radius:8px;padding:18px 24px 18px;transition:border-color .15s}
.composer[data-mode=bookmark]{--mode-accent:var(--bookmark);--mode-ring:#35624a20;--mode-soft:#e8efe9}
.composer :focus-visible{outline-color:var(--mode-accent)}
.composer:focus-within{border-color:var(--mode-accent);box-shadow:0 0 0 4px var(--mode-ring)}
.composer-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.mode-switch{display:flex;gap:6px;background:var(--inline-code-bg);padding:4px;border-radius:6px}
.mode{font-family:var(--ui);font-size:14px;min-width:64px;padding:5px 14px;border-radius:4px;color:var(--stone)}
.mode.active{background:var(--ivory);color:var(--mode-accent);font-weight:500}
textarea{display:block;width:100%;min-height:100px;max-height:320px;resize:vertical;background:none;border:0;outline:none;padding:20px 0 12px;font-size:20px;line-height:1.55;letter-spacing:.3px;overflow-wrap:anywhere}
textarea::placeholder{color:var(--stone)}
textarea:focus-visible{outline:none}
textarea:disabled{color:var(--olive);opacity:1;cursor:not-allowed}body[data-access=guest] .composer{background:#f8f7f1}body[data-access=guest] .composer:focus-within{box-shadow:none}body[data-access=guest] .submit-button:disabled{cursor:not-allowed;opacity:.72}body[data-access=guest] .bookmark-name input:disabled{color:var(--stone);opacity:1}
.composer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px}
.input-hint{font-size:12px;font-family:var(--ui);color:var(--stone)}
.submit-button{display:flex;align-items:center;justify-content:center;gap:20px;background:var(--mode-accent);color:var(--ivory);padding:11px 18px;border-radius:5px;font-family:var(--ui);font-size:14px;white-space:nowrap;min-height:44px;transition:filter .15s}
.submit-button:hover{filter:brightness(1.15)}.submit-button:active{transform:translateY(1px)}
.submit-button span:last-child{font-size:20px;font-family:var(--latin);line-height:1}
.form-message{font-family:var(--ui);font-size:14px;min-height:22px;margin:10px 2px 0;color:var(--brand)}
.form-message.error{color:var(--dark-warm)}
.bookmark-name{display:flex;align-items:center;gap:16px;margin:4px 0 20px;font-family:var(--ui);font-size:14px}
.bookmark-name label{white-space:nowrap}.bookmark-name label span{color:var(--stone);font-size:12px;margin-left:6px}
.bookmark-name input{width:100%;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--mode-accent);padding:6px 0;outline-offset:2px}
.library{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:48px;margin-top:26px;align-items:start;min-height:360px}
.reading-column,.bookmarks-column{min-width:0}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:24px}
.reading-heading-copy{min-width:0}.reading-title-line{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.reading-title-line p{margin:0;color:var(--stone);font-family:var(--ui);font-size:12px;line-height:1.55;font-weight:400}
.overline{font-family:var(--latin);font-size:12px;letter-spacing:1.5px;color:var(--stone)}
h2{font-size:28px;font-weight:500;line-height:1.2;margin:8px 0 0;letter-spacing:1px}
.section-count{font-family:var(--ui);font-size:12px;color:var(--stone);white-space:nowrap;padding-bottom:3px}
.reading-list{display:flex;flex-direction:column;gap:14px}
.article-card{display:block;background:var(--ivory);border-radius:8px;padding:24px 28px 22px;position:relative;transition:background .15s;overflow-wrap:anywhere}
.article-card-link{display:block}.article-card:hover{background:var(--inline-code-bg)}
.card-meta{display:flex;align-items:center;gap:12px;color:var(--stone);font-size:12px;font-family:var(--ui);margin-bottom:14px;flex-wrap:wrap}
.article-card:not(.pending) .card-meta{padding-right:46px}
.card-meta time{margin-left:auto;white-space:nowrap}
.article-card h3{font-size:24px;line-height:1.35;font-weight:500;letter-spacing:.3px;margin:0 0 10px;max-width:95%}
.article-card p{font-size:16px;line-height:1.55;margin:0;color:var(--olive);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:12px}
.language-tag{font-size:12px;color:var(--stone);font-family:var(--ui)}
.card-action{color:var(--brand);font-size:14px;display:flex;align-items:center;gap:12px;margin-left:auto}
.card-action span{font-family:var(--latin);font-size:20px;line-height:1}
.article-card.pending{background:var(--warm-sand)}
.pending h3{color:var(--olive);font-size:20px;font-weight:400}
.pending p{font-size:14px;color:var(--stone)}
.pending-label{font-family:var(--ui);font-size:12px;color:var(--olive);display:flex;align-items:center;gap:7px}
.pending-label::before{content:"";width:6px;height:6px;border:1px solid var(--stone);border-radius:50%}
.pending .card-bottom{margin-top:18px}.pending .card-meta{margin-bottom:12px}
.pending-note{font-size:12px;font-family:var(--ui);color:var(--stone)}
.article-delete{position:absolute;right:18px;top:13px;z-index:2;padding:8px 10px;color:#865249;font-family:var(--ui);font-size:12px;opacity:0;transform:translateX(5px);transition:opacity 180ms,transform 220ms,color 180ms}.article-card:hover>.article-delete,.article-card:focus-within>.article-delete{opacity:1;transform:translateX(0)}.article-delete:hover{color:#6d2f27}.article-delete-confirm{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;gap:14px;font-family:var(--ui);font-size:12px;color:var(--stone)}.article-delete-confirm.opening{animation:shelf-arrive 220ms cubic-bezier(.22,1,.36,1) both}.article-delete-confirm button{font-family:var(--ui);font-size:12px;padding:7px 9px;border-radius:4px}.article-delete-no{color:var(--stone)}.article-delete-yes{color:#6d2f27;background:#f1e7e3}.article-delete-error{margin:10px 0 0;text-align:right;color:#865249;font-family:var(--ui);font-size:12px}
.aside-intro{font-size:14px;color:var(--stone);margin:-6px 0 20px}
.bookmark-entry{display:block;position:relative;border-bottom:1px solid var(--border);padding:18px 0;overflow-wrap:anywhere}
.bookmark-entry:first-child{padding-top:4px}
.bookmark-link{display:block;padding-right:48px}
.bookmark-title-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.bookmark-entry h3{font-size:18px;font-weight:500;margin:0;line-height:1.4}
.bookmark-arrow{font-family:var(--latin);color:var(--stone);font-size:18px}
.bookmark-entry:hover h3,.bookmark-entry:hover .bookmark-arrow{color:var(--brand)}
.bookmark-domain{display:block;font-size:12px;color:var(--stone);font-family:var(--ui);margin-top:6px}
.bookmark-note{font-size:14px;color:var(--olive);margin:8px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bookmark-delete{position:absolute;right:0;top:14px;min-width:40px;min-height:36px;padding:6px 0;font-family:var(--ui);font-size:12px;color:#865249;opacity:0;transform:translateX(5px);transition:opacity 180ms,transform 220ms,color 180ms}.bookmark-entry:first-child .bookmark-delete{top:0}.bookmark-entry:hover .bookmark-delete,.bookmark-entry:focus-within .bookmark-delete{opacity:1;transform:translateX(0)}.bookmark-delete:hover{color:#6d2f27}.bookmark-delete-error{margin:8px 48px 0 0;color:#865249;font-family:var(--ui);font-size:12px}
.aside-footnote{color:var(--stone);font-size:12px;margin-top:28px}
.empty-reading{padding:30px 28px 40px;background:var(--ivory);border-radius:8px}
.empty-number{font-family:var(--latin);font-size:32px;color:var(--stone)}
.empty-reading h3{font-size:22px;font-weight:400;margin:14px 0 10px}.empty-reading p{font-size:16px;color:var(--stone);margin:0}
.empty-bookmarks{padding:16px 0 20px;border-bottom:1px solid var(--border)}
.empty-bookmarks p{font-size:18px;margin:0 0 10px}.empty-bookmarks span{font-size:14px;color:var(--stone)}
.end-note{color:var(--stone);text-align:center;font-size:12px;margin:26px 0}
.load-more{display:block;width:100%;padding:18px;margin-top:16px;color:var(--brand);font-size:14px;border-bottom:1px solid var(--border)}
.text-button{color:var(--brand);font-size:14px;padding:8px 0;min-height:44px}.bookmark-more{margin-top:12px}
.list-error{background:var(--warm-sand);padding:18px 24px;border-radius:6px;color:var(--olive);font-size:14px}.list-error p{margin:0}
footer{margin-top:64px;padding:24px 0 32px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:20px;color:var(--stone);font-size:12px}.footer-left,.footer-links{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.footer-links{justify-content:flex-end}.site-footer a,.login-footer a{color:var(--brand)}.site-footer a:hover,.login-footer a:hover{text-decoration:underline}
footer span[lang]{font-family:var(--latin);letter-spacing:1px}
.mobile-tabs{display:none}
@media(min-width:881px){.bookmarks-column{position:sticky;top:28px}}
@media(max-width:880px){
  .page{padding:0 32px}.masthead{height:92px}.capture{padding-top:30px}.capture-note{display:none}
  .library{display:block;margin-top:24px}.mobile-tabs{display:flex;gap:28px;margin-top:24px;border-bottom:1px solid var(--border)}
  .mobile-tabs button{padding:12px 0;font-size:18px;color:var(--stone);border-bottom:2px solid transparent}
  .mobile-tabs button[aria-pressed="true"]{color:var(--brand);border-bottom-color:var(--brand)}
  .mobile-tabs span{font-size:12px;margin-left:8px;font-family:var(--ui)}
  .library[data-view="reading"] .bookmarks-column,.library[data-view="bookmarks"] .reading-column{display:none}
  .overline{display:none}.section-heading{margin-bottom:20px}.section-heading h2{font-size:22px;margin:0}.reading-title-line{gap:6px 10px}.reading-title-line p{flex-basis:100%;font-size:11px}
  .aside-intro{margin-top:0}.bookmarks-column{max-width:none}.aside-footnote{margin-top:24px}
}
@media(max-width:480px){
  .page{padding:0 20px}.masthead{height:84px}.wordmark{font-size:28px;gap:12px}.wordmark span{font-size:12px;letter-spacing:2px}.masthead-note{font-size:12px;letter-spacing:0}
  .capture{padding-top:28px}.capture-heading{margin-bottom:16px}h1{font-size:22px;letter-spacing:.3px}
  .composer{padding:14px 16px}.mode{min-width:52px;padding:5px 10px}
  textarea{font-size:18px;min-height:120px;padding-top:20px}.input-hint{font-size:12px;max-width:118px;line-height:1.6}
  .submit-button{gap:12px;padding:10px 12px}.composer-bottom{gap:8px}
  .form-message{font-size:12px}.library{margin-top:24px}.article-card{padding:20px}.article-card h3{font-size:22px;max-width:100%}
  .article-card p{font-size:16px}.card-bottom{margin-top:20px}.card-meta{gap:8px}.pending h3{font-size:18px}
  .section-count{font-size:12px}.empty-reading{padding:24px 20px}.empty-reading h3{font-size:20px}
  footer{margin-top:44px;padding-bottom:28px;flex-direction:column;gap:12px}.footer-left,.footer-links{justify-content:flex-start;gap:8px 16px}.pending-note{font-size:12px}
}
@media(max-width:360px){.section-heading{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Equal geometry in both modes; the optional name lives in the same toolbar row. */
.composer{display:grid;grid-template-rows:40px 128px 44px;gap:8px;transition:border-color 220ms,box-shadow 220ms}
.composer-top{min-width:0;gap:16px}
.composer textarea{height:128px;min-height:128px;max-height:128px;resize:none;overflow-y:auto}
.composer .bookmark-name{display:block;min-width:0;width:240px;max-width:45%;margin:0;opacity:0;visibility:hidden;transform:translateX(8px);transition:opacity 200ms,transform 260ms,visibility 200ms}
.composer[data-mode=bookmark] .bookmark-name{opacity:1;visibility:visible;transform:translateX(0)}
.bookmark-name input{font-size:14px}
.mode-switch{position:relative;flex-shrink:0;isolation:isolate}
.mode-switch::before{content:"";position:absolute;z-index:-1;left:4px;top:4px;bottom:4px;width:calc((100% - 14px)/2);border:1px solid var(--mode-accent);border-radius:4px;background:var(--mode-soft);box-shadow:0 1px 3px #1414130a;transition:transform 300ms cubic-bezier(.22,1,.36,1),background 220ms,border-color 220ms}
.composer[data-mode=bookmark] .mode-switch::before{transform:translateX(calc(100% + 6px))}
.mode,.mode.active{background:transparent;transition:color 180ms}
.submit-button{min-width:132px;transition:transform 200ms,background 200ms,box-shadow 200ms}
.submit-button span:last-child,.card-action span,.bookmark-arrow{transition:transform 240ms cubic-bezier(.22,1,.36,1)}
.article-card{transition:transform 260ms cubic-bezier(.22,1,.36,1),background 220ms,box-shadow 260ms}
.bookmark-entry{transition:transform 240ms,background 240ms}
.text-button,.load-more,.wordmark,.mobile-tabs button{transition:color 180ms,transform 220ms,border-color 220ms}
@media(hover:hover){
  .article-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #14141309;background:var(--ivory)}
  .article-card.pending:hover{transform:translateY(-2px)}
  .article-card:hover .card-action span,.bookmark-entry:hover .bookmark-arrow{transform:translate(3px,-3px)}
  .submit-button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 5px 12px var(--mode-ring);filter:brightness(1.12)}
  .submit-button:hover span:last-child{transform:translate(2px,-2px)}
  .bookmark-entry:hover{transform:translateX(4px)}
  .text-button:hover,.load-more:hover{transform:translateY(-2px)}
  .mode:hover{color:var(--mode-accent)}
}
.submit-button:not(:disabled):active,.article-card:active{transform:translateY(0) scale(.99);box-shadow:none}
@keyframes shelf-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.arriving{animation:shelf-arrive 360ms cubic-bezier(.22,1,.36,1) both}
@media(max-width:480px){
  .composer-top{gap:12px}.composer .bookmark-name{max-width:none;width:100%;font-size:12px}
  .bookmark-name input{font-size:12px}.submit-button{min-width:112px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
}

@media(hover:none){.bookmark-delete{opacity:1;transform:none}}
@media(hover:none){.article-delete{opacity:1;transform:none}}

/* Password screen shares the shelf's quiet paper surface. */
.login-page{min-height:100vh}.login-shell{width:min(100% - 40px,560px);margin:0 auto;padding:clamp(40px,10vh,104px) 0}.login-wordmark{display:inline-flex;margin-bottom:64px}.login-card{background:var(--ivory);border:1px solid var(--border);border-radius:10px;padding:clamp(28px,6vw,48px);box-shadow:0 16px 50px #14141308}.login-card h1{font-size:32px;margin:8px 0 14px}.login-card>p:not(.overline):not(.form-message){color:var(--olive);margin:0 0 34px}.login-card form{display:grid;gap:12px}.login-card label{font-family:var(--ui);font-size:13px;color:var(--stone)}.login-card input{width:100%;height:50px;border:1px solid var(--border);border-radius:6px;background:var(--parchment);padding:0 14px;outline:none}.login-card input:focus{border-color:var(--brand);box-shadow:0 0 0 4px #1b365d18}.login-submit{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin-top:8px;padding:0 16px;border-radius:6px;background:var(--brand);color:var(--ivory);font-family:var(--ui)}.login-submit:hover{filter:brightness(1.12)}.guest-entry{display:flex;align-items:center;justify-content:space-between;margin-top:14px;min-height:46px;padding:0 15px;border:1px solid var(--border);border-radius:6px;color:var(--olive);font-family:var(--ui);font-size:14px;transition:border-color 180ms,color 180ms,transform 220ms}.guest-entry:hover{border-color:#c8c5b9;color:var(--brand);transform:translateY(-1px)}.login-footer{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 18px;line-height:1.7}