/* ZenPens Reader styles. The library, shelves, progress, stars, reading record and manage sheet are copied from the prototype
   (website/css/components.css) so they look the same. The sign-in page and the account box are new. */

/* Save buttons stay hidden until the script is running */
.zpr-save[hidden]{display:none!important}
.card .card-actions{margin-top:auto}
.icon-btn.zpr-acct.is-in{border-color:var(--accent-text);color:var(--accent-text)}
.zpr-library .sr-only,.zpr-sign .sr-only,.sheet .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Continue reading ---------- */
.continue{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.resume{display:grid;grid-template-columns:72px 1fr;gap:var(--s-4);padding:var(--s-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:inherit;align-items:center;box-shadow:var(--shadow)}
.resume:hover{text-decoration:none;border-color:var(--accent-text)}
.resume .cover{padding:.5rem;border-radius:3px 6px 6px 3px}.resume .cover .c-title{font-size:.7rem}.resume .cover .c-meta{display:none}
.resume h3{font-size:var(--fs-2);margin:0 0 2px}
.progress{height:6px;border-radius:var(--r-pill);background:var(--line);overflow:hidden;margin-top:var(--s-3)}
.progress i{display:block;height:100%;background:var(--accent);border-radius:inherit}
.resume small{color:var(--muted);font-size:var(--fs-0)}

/* ---------- Shelves on the home page ---------- */
.tabs{display:inline-flex;background:var(--surface-2);padding:4px;border-radius:var(--r-pill);gap:2px;margin-bottom:var(--s-6);max-width:100%;overflow-x:auto}
.tabs button{border:0;background:transparent;color:var(--muted);font:600 var(--fs-0)/1 var(--font-ui);padding:.7rem 1.1rem;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.tabs .count{opacity:.6;margin-left:.3rem}
.empty{padding:var(--s-7) var(--s-5);text-align:center;border:1.5px dashed var(--line);border-radius:var(--r-lg);color:var(--muted)}
.empty-h{margin:0 0 .5rem;font-family:var(--font-display);font-size:var(--fs-3);color:var(--text)}
.shelf-item{display:flex;flex-direction:column;gap:var(--s-3);max-width:200px}
.shelf-item .cover{max-width:180px}
.shelf-item h3{font-size:var(--fs-2);margin:0}
.zpr-rate-ask{margin:0 0 .3rem;text-align:center;font:600 var(--fs-1) var(--font-ui);color:var(--muted)}
.star-input{display:inline-flex;gap:2px}
.star-input button{border:0;background:none;padding:2px;cursor:pointer;color:var(--accent-text)}
.star-input svg{width:1.1rem;height:1.1rem}
.star-input .off{opacity:.28}
.star-input button:hover svg{opacity:1}
.lib-card>a,.shelf-item>a,.resume{text-decoration:none}.lib-card>a{display:block}
.pill{align-self:flex-start;font:600 .75rem/1 var(--font-ui);padding:.4rem .7rem;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--muted);background:var(--surface)}
.pill[data-st="reading"]{color:var(--accent-text);border-color:var(--accent-text)}
.pill[data-st="read"]{background:var(--surface-2);color:var(--text)}

/* ---------- Stars and the private note at the end of a piece ---------- */
.rd-fin .star-input svg{width:1.6rem;height:1.6rem}
.zpr-rate{display:block}
.rd-notebox{margin:var(--s-5) auto;max-width:520px;text-align:center}
.rd-notebox label{display:block;font:600 var(--fs-0) var(--font-ui);margin-bottom:var(--s-2);text-align:left}
.rd-notebox textarea{width:100%;font:500 var(--fs-1)/1.5 var(--font-read);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:.75rem .9rem;resize:vertical;text-align:left}
.rd-notebox .hint{text-align:left}
.rd-notebox:empty{display:none}

/* ---------- The Library page ---------- */
.lib{padding-block:var(--s-7) var(--s-8)}
.lib-head h1{font-size:var(--fs-6);margin:var(--s-2) 0 var(--s-3)}
.lib-head p.muted{max-width:56ch;font-family:var(--font-read);font-size:var(--fs-2)}
.lib-head p.muted a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.lib-reset{margin:var(--s-4) 0 0}
.lib-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0;margin:var(--s-6) 0 var(--s-7);border-block:1px solid var(--line)}
.lib-stats>div{padding:var(--s-4) var(--s-4) var(--s-4) 0;min-width:0}
.lib-stats dt{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.lib-stats dd{margin:0;font:600 var(--fs-4)/1.1 var(--font-display);overflow-wrap:anywhere}
.lib-tools{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-bottom:var(--s-4);align-items:center}
.lib-search{flex:1 1 220px;min-width:0}
.lib input[type="search"],.lib select,.lib textarea{font:500 var(--fs-1)/1.3 var(--font-ui);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:.7rem .9rem;min-height:44px;width:100%}
.lib select{width:auto;cursor:pointer}
.lib textarea{font-family:var(--font-read);font-size:var(--fs-1);resize:vertical;line-height:1.5}
.lib input:focus-visible,.lib select:focus-visible,.lib textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;color:var(--muted);font:600 var(--fs-0)/1 var(--font-ui);padding:.75rem 1.1rem;cursor:pointer;min-height:44px}
.seg button[aria-pressed="true"]{background:var(--surface-2);color:var(--text)}
#lib-genre{margin-bottom:var(--s-5)}
#lib-list{min-height:200px}
.lib-row{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:var(--s-5);padding:var(--s-5) 0;border-bottom:1px solid var(--line);align-items:start}
.lib-cover{display:block;text-decoration:none}
.lib-cover .cover{padding:.6rem;border-radius:3px 6px 6px 3px}.lib-cover .cover .c-title{font-size:.78rem}.lib-cover .cover .c-meta{display:none}
.lib-main h3{font-size:var(--fs-3);margin:0 0 4px}
.lib-main .by{margin:0 0 var(--s-3);color:var(--muted);font-size:var(--fs-0)}
.lib-main .progress{max-width:320px;margin-top:var(--s-2)}
.lib-note{margin-top:var(--s-3);max-width:520px}
.lib-side{display:grid;gap:var(--s-3);justify-items:end}
.lib-acts{display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:flex-end}
.star-input.sm button{padding:3px;min-width:28px;min-height:28px}
.star-input.sm svg{width:1.05rem;height:1.05rem}
.lib-card{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.lib-card h3{font-size:var(--fs-2);margin:var(--s-2) 0 0}.lib-card .by{margin:0;color:var(--muted);font-size:var(--fs-0)}
.lib-manage{align-self:flex-start;margin-top:var(--s-2)}
.lib-more{margin-top:var(--s-8)}
@media (max-width:640px){
  .lib-row{grid-template-columns:64px minmax(0,1fr);gap:var(--s-4)}
  .lib-side{grid-column:1/-1;justify-items:start;grid-template-columns:auto auto;align-items:center;gap:var(--s-3)}
  .lib-acts{grid-column:1/-1;justify-content:flex-start}
  .lib-head h1{font-size:var(--fs-5)}
}

/* ---------- Reading record ---------- */
.rr{margin:0 0 var(--s-7)}
.rr-total{font-size:var(--fs-2);margin:0 0 var(--s-4)}
.rr-total b{font-family:var(--font-display)}
.rr-bars{display:grid;gap:var(--s-3);margin:var(--s-5) 0}
.rr-row{display:grid;grid-template-columns:minmax(90px,150px) 1fr auto;gap:var(--s-3);align-items:center;font-size:var(--fs-0)}
.rr-l{font-weight:600;min-width:0;overflow-wrap:anywhere}
.rr-bar{display:block;height:12px;border-radius:var(--r-pill);background:var(--surface-2)}
.rr-bar i{display:block;height:100%;border-radius:inherit;background:var(--accent-text)}
.rr-v{text-align:right;white-space:nowrap}
.rr-v small{display:block;color:var(--muted)}
.rr-more summary{list-style:none;display:inline-flex;align-items:center;gap:.6rem;cursor:pointer}
.rr-more summary::-webkit-details-marker{display:none}
.rr-more .rr-shut{display:none}
.rr-more[open] .rr-shut{display:inline}
.rr-more[open] .rr-open{display:none}
.rr-chev{width:18px;height:18px;transition:transform .2s}
.rr-more[open] .rr-chev{transform:rotate(180deg)}
.rr-more[open] summary{margin-bottom:var(--s-3)}
@media (prefers-reduced-motion:reduce){.rr-chev{transition:none}}
.rr-ul{list-style:none;margin:0;padding:0}
.rr-ul li{display:grid;gap:2px;padding:var(--s-3) 0;border-top:1px solid var(--line);font-size:var(--fs-0);color:var(--muted)}
.rr-ul a{font:600 var(--fs-1)/1.3 var(--font-display);color:var(--text)}
@media (max-width:560px){.rr-row{grid-template-columns:1fr auto}.rr-bar{grid-column:1/-1;order:3}}

/* ---------- Manage sheet ---------- */
.sh-sec{margin-top:var(--s-5)}.sh-l{display:block;font:600 var(--fs-0) var(--font-ui);margin:0 0 var(--s-2)}
.sheet textarea{width:100%;font:500 var(--fs-1)/1.5 var(--font-read);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:.75rem .9rem;resize:vertical}
.sheet textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sh-acts{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;margin-top:var(--s-6)}
.sheet .seg{display:flex;flex-wrap:wrap}

/* ---------- Your account (new) ---------- */
.lib-account{margin-top:var(--s-8);padding:var(--s-6);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.lib-account .section-head{margin-bottom:var(--s-3)}
.lib-account .hero-actions{margin:var(--s-4) 0}

/* ---------- Sign-in page (new) ---------- */
.zpr-sign{max-width:560px;padding-block:var(--s-7) var(--s-8)}
.zpr-sign .sf-head h1{font-size:var(--fs-6);margin:var(--s-2) 0 var(--s-3)}
.zpr-sign .sf-head p.muted{font-family:var(--font-read);font-size:var(--fs-2)}
.zpr-sign .fld{margin-top:var(--s-5)}
.zpr-sign .fld label{display:block;font-weight:600;font-size:var(--fs-0);margin-bottom:var(--s-2)}
.zpr-sign input[type="email"],.zpr-sign input[type="text"]{width:100%;font:500 var(--fs-1)/1.3 var(--font-ui);color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:.85rem 1rem;min-height:48px}
.zpr-sign input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.zpr-sign .sf-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;margin-top:var(--s-5)}
.zpr-sign .hint{margin:var(--s-4) 0 0;font-size:var(--fs-0);color:var(--muted)}
.zpr-sign .hint a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.zpr-sign .err{margin:var(--s-4) 0 0;font-size:var(--fs-1);font-weight:600;color:#B3261E}
:root[data-theme="dark"] .zpr-sign .err{color:#FF8A80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .zpr-sign .err{color:#FF8A80}}
.zpr-sign .zpr-guest-note{margin-top:var(--s-6);font-size:var(--fs-0)}
.zpr-sign .zpr-tip{margin-top:var(--s-6)}
.zpr-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Most read never breaks mid-word (Entry 115). Long words shrink instead. */
.lib-stats dd{overflow-wrap:normal;word-break:normal;hyphens:none;white-space:nowrap}
.lib-stats dd.long{font-size:clamp(.95rem,4.4vw,1.25rem)}
.lib-stats dd{overflow:hidden;text-overflow:ellipsis}
.zpr-acct-forms{display:grid;gap:16px;margin:12px 0 16px;max-width:520px}
.zpr-acct-form label{display:block;font-weight:600;margin-bottom:6px}
.zpr-row{display:flex;gap:8px;flex-wrap:wrap}
.zpr-row input{flex:1 1 200px;min-width:0;padding:10px 12px;border:1px solid var(--line,#d9d3c4);border-radius:10px;font:inherit;background:#fff}
.zpr-acct-form .hint{margin:6px 0 0}

/* ---------- Bookmarks (0.5.0), copied from the prototype's components.css ---------- */
mark.hl{background:color-mix(in srgb,var(--hl,var(--accent)) var(--hl-a,30%),transparent);color:inherit;border-radius:2px;padding:0;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone}
mark.hl.flash{animation:zprhlflash 1.6s ease}
@keyframes zprhlflash{0%,60%{background:color-mix(in srgb,var(--hl,var(--accent)) var(--hl-f,65%),transparent)}100%{background:color-mix(in srgb,var(--hl,var(--accent)) var(--hl-a,30%),transparent)}}
/* The highlight takes the piece's colour (0.5.1, Entry 156). Forest keeps the original green. Set by the script on main.reader. */
main.reader[data-zpr-tone="cv-indigo"]{--hl:var(--cv-indigo);--hl-a:38%;--hl-f:66%}
main.reader[data-zpr-tone="cv-plum"]{--hl:var(--cv-plum);--hl-a:38%;--hl-f:66%}
main.reader[data-zpr-tone="cv-teal"]{--hl:var(--cv-teal);--hl-a:38%;--hl-f:66%}
main.reader[data-zpr-tone="cv-sand"]{--hl:var(--cv-sand);--hl-a:90%;--hl-f:100%}
:root[data-theme="dark"] main.reader[data-zpr-tone="cv-indigo"]{--hl:color-mix(in srgb,var(--cv-indigo) 70%,#fff);--hl-a:58%;--hl-f:85%}
:root[data-theme="dark"] main.reader[data-zpr-tone="cv-plum"]{--hl:color-mix(in srgb,var(--cv-plum) 70%,#fff);--hl-a:58%;--hl-f:85%}
:root[data-theme="dark"] main.reader[data-zpr-tone="cv-teal"]{--hl:color-mix(in srgb,var(--cv-teal) 70%,#fff);--hl-a:58%;--hl-f:85%}
:root[data-theme="dark"] main.reader[data-zpr-tone="cv-sand"]{--hl:var(--cv-sand);--hl-a:30%;--hl-f:55%}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) main.reader[data-zpr-tone="cv-indigo"]{--hl:color-mix(in srgb,var(--cv-indigo) 70%,#fff);--hl-a:58%;--hl-f:85%}
:root:not([data-theme="light"]) main.reader[data-zpr-tone="cv-plum"]{--hl:color-mix(in srgb,var(--cv-plum) 70%,#fff);--hl-a:58%;--hl-f:85%}
:root:not([data-theme="light"]) main.reader[data-zpr-tone="cv-teal"]{--hl:color-mix(in srgb,var(--cv-teal) 70%,#fff);--hl-a:58%;--hl-f:85%}
:root:not([data-theme="light"]) main.reader[data-zpr-tone="cv-sand"]{--hl:var(--cv-sand);--hl-a:30%;--hl-f:55%}
}
.mark-pop{position:fixed;z-index:70;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom,0px));filter:drop-shadow(0 6px 18px rgba(0,0,0,.3))}
.mark-pop[hidden]{display:none}
@media (min-width:900px){.mark-pop{bottom:32px}}
.zpr-marks{position:relative}
.zpr-marks[hidden]{display:none!important}
.zpr-badge{position:absolute;top:-4px;right:-4px;min-width:1.15rem;height:1.15rem;padding:0 .3rem;border-radius:999px;background:var(--accent-text);color:#fff;font:700 .68rem/1.15rem var(--font-ui);text-align:center}
.zpr-badge[hidden]{display:none}
.mk-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.mk-list li{display:flex;gap:var(--s-3);align-items:flex-start;justify-content:space-between;padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.mk-acts{display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:flex-end}
.mk-q{flex:1;text-align:left;background:none;border:0;padding:0;font:italic 500 var(--fs-1)/1.5 var(--font-read);color:var(--text);cursor:pointer;text-decoration:none}
.mk-q:hover{text-decoration:underline;text-underline-offset:3px}
.mk-group{margin-bottom:var(--s-6)}.mk-group h3{margin:0;font-size:var(--fs-3)}.mk-group .by{margin:0 0 var(--s-2);color:var(--muted);font-size:var(--fs-0)}
@media (max-width:520px){.mk-list li{flex-direction:column}.mk-acts{justify-content:flex-start}}

/* ---------- 0.8.0 The new Library: rooms, Reading now, Up next, compact shelves, the goal ring, the dock ---------- */
.lib-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin:var(--s-5) 0 var(--s-3)}
.lib-top h1{margin:0;font-size:var(--fs-5)}
.lib-top-tools{display:flex;align-items:center;gap:var(--s-2)}
.goal-ring{position:relative;display:inline-grid;place-items:center;width:68px;height:68px;padding:0;border:0;background:transparent;color:var(--text);cursor:pointer;font:700 .9375rem/1 var(--font-ui)}
.goal-ring svg{position:absolute;inset:0}
.goal-ring span{position:relative}
.goal-ring.none{width:auto;height:52px;padding:0 1.2rem;border:1.5px dashed var(--line);border-radius:var(--r-pill);font:600 .9375rem/1 var(--font-ui);color:var(--muted)}
.lib-note-guest{margin:0 0 var(--s-3);color:var(--muted);font-size:var(--fs-0)}
.lib-note-guest a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.rooms{display:flex;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--surface-2);margin:0 0 var(--s-4);max-width:420px}
.rooms button{flex:1;min-height:44px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--muted);font:500 var(--fs-0)/1 var(--font-ui);cursor:pointer}
.rooms button[aria-selected="true"]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow)}
.lib-sec{margin:var(--s-4) 0 0}
.lib-sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s-2)}
.lib-sec-head h2{margin:0;font:600 var(--fs-1)/1.2 var(--font-ui)}
.lib-sec-head .muted{font-size:var(--fs-0)}
.link-btn{border:0;background:transparent;padding:.5rem 0;min-height:44px;color:var(--accent-text);font:600 var(--fs-0)/1 var(--font-ui);cursor:pointer}
.reading-row{display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:var(--s-2);scrollbar-width:none;margin-inline:calc(var(--s-4) * -1);padding-inline:var(--s-4);scroll-padding-inline:var(--s-4)}
.reading-row::-webkit-scrollbar{display:none}
.reading-card{position:relative;flex:none;scroll-snap-align:start;width:min(310px,82vw);box-sizing:border-box;display:flex;gap:var(--s-3);padding:var(--s-3);background:var(--surface);border:1px solid var(--line);border-radius:16px}
.rc-cover{flex:none;width:64px;text-decoration:none}
.rc-cover .cover{padding:.45rem .4rem .45rem .6rem;border-radius:3px 6px 6px 3px}.rc-cover .cover .c-title{font-size:.62rem}.rc-cover .cover .c-meta{display:none}
.rc-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-2)}
.rc-body h3{margin:0 1.6rem 0 0;font:600 var(--fs-1)/1.2 var(--font-display)}
.rc-body h3 a{color:inherit;text-decoration:none}
.rc-body .by{margin:2px 0 0;font-size:var(--fs-0);color:var(--muted)}
.rc-body .progress{margin-top:0;height:4px}
.rc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:.75rem}
.rc-go{color:var(--accent-text);font-weight:600;text-decoration:none;min-height:24px}
.rc-more,.sr-more{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:50%}
.rc-more{position:absolute;top:0;right:0}
.rc-more .ic,.sr-more .ic{width:1.2rem;height:1.2rem}
.next-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.next-item{position:relative;width:62px}
.next-item a{display:block;text-decoration:none}
.next-item .cover{padding:.4rem .35rem .4rem .5rem;border-radius:3px 6px 6px 3px;min-height:90px;aspect-ratio:auto}.next-item .cover .c-title{font-size:.55rem}.next-item .cover .c-meta{display:none}
.next-x,.next-l{position:absolute;top:-8px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);font:700 1rem/1 var(--font-ui);cursor:pointer;display:grid;place-items:center;padding:0}
.next-x{right:-8px}.next-l{left:-8px}
.next-add{flex:1;min-width:130px;max-width:320px;min-height:90px;border:1.5px dashed var(--line);border-radius:8px;background:transparent;color:var(--muted);font:500 var(--fs-0)/1.3 var(--font-ui);cursor:pointer;padding:var(--s-2)}
.shelf-tabs{display:flex;margin:var(--s-4) 0 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.shelf-tabs::-webkit-scrollbar{display:none}
.shelf-tabs button{flex:none;min-height:44px;padding:0 var(--s-2);margin-right:var(--s-4);border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font:500 var(--fs-0)/1 var(--font-ui);cursor:pointer;white-space:nowrap}
.shelf-tabs button[aria-selected="true"]{color:var(--text);font-weight:600;border-bottom-color:var(--accent)}
.shelf-tabs .count{margin-left:.35rem;opacity:.65}
#lib-genre{margin:var(--s-3) 0 0}
.lib-tools{margin:var(--s-3) 0 0}
#lib-list{min-height:120px}
.shelf-row{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:var(--s-3);align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.sr-cover{display:block;text-decoration:none}
.sr-cover .cover{padding:.3rem .25rem .3rem .4rem;border-radius:3px 6px 6px 3px;aspect-ratio:40/58}.sr-cover .cover .c-title{font-size:.45rem}.sr-cover .cover .c-meta{display:none}
.sr-main h3{margin:0;font:600 var(--fs-1)/1.25 var(--font-display)}
.sr-main h3 a{color:inherit;text-decoration:none}
.sr-main .by{margin:2px 0 0;font-size:var(--fs-0);color:var(--muted)}
.sr-main .star-input.sm{margin-top:4px}
.pin-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.pin-pick{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:var(--s-3);align-items:center;width:100%;padding:var(--s-2);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--text);text-align:left;font:inherit;cursor:pointer;min-height:64px}
.pin-pick .cover{padding:.3rem .25rem .3rem .4rem;aspect-ratio:40/58}.pin-pick .cover .c-title{font-size:.45rem}.pin-pick .cover .c-meta{display:none}
.pin-pick b{display:block;font-family:var(--font-display)}.pin-pick small{color:var(--muted)}
.pin-do{color:var(--accent-text);font-weight:600}
.tour{margin:0 0 var(--s-5);padding-left:1.2rem;display:grid;gap:var(--s-3)}
#goal-n{width:100%;min-height:48px;padding:.6rem .9rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--text);font:inherit}
.zpr-dock{position:fixed;left:12px;right:12px;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px);z-index:58;display:flex;align-items:center;border-radius:16px;background:#0F4D33;color:#FBF9F4;box-shadow:0 6px 20px rgba(17,26,21,.28)}
.zpr-dock[hidden]{display:none}
.dock-a{flex:1;min-width:0;display:grid;gap:2px;padding:10px 4px 10px 16px;color:inherit;text-decoration:none}
.dock-l{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.dock-t{font:600 var(--fs-1)/1.2 var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-p{display:block;height:3px;border-radius:2px;background:rgba(251,249,244,.25);margin-top:4px}
.dock-p i{display:block;height:100%;border-radius:2px;background:#2FD47C}
.dock-x{flex:none;width:44px;height:44px;border:0;background:transparent;color:inherit;font-size:1.4rem;cursor:pointer}
.dock-n{flex:1;min-width:0;margin:0;padding:12px 4px 12px 16px;font-size:var(--fs-0)}
.dock-off{flex:none;min-height:44px;padding:0 8px;border:0;background:transparent;color:#E8DCC3;font:inherit;font-size:var(--fs-0);text-decoration:underline;cursor:pointer}
.dock-off:focus-visible,.dock-x:focus-visible{outline:2px solid #FBF9F4;outline-offset:-2px;border-radius:12px}
#lib-dock-wrap[hidden]{display:none}
.has-dock .toast{bottom:calc(var(--tabbar-h) + 5.5rem + env(safe-area-inset-bottom))}
@media (min-width:861px){
  .zpr-dock{left:auto;right:24px;bottom:24px;width:360px}
  .has-dock .toast{bottom:6.5rem}
  .reading-row{margin-inline:0;padding-inline:0;scroll-padding-inline:0}
  .rooms{margin-bottom:var(--s-5)}
}

/* ---------- 0.9.0 The Year room ---------- */
.year-pick{display:flex;align-items:center;gap:var(--s-2);justify-content:flex-end;margin:0 0 var(--s-3)}
.year-pick[hidden]{display:none}
.year-pick label{font-size:var(--fs-0);color:var(--muted)}
.year-pick select{min-height:44px;padding:0 1rem;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--text);font:600 var(--fs-0) var(--font-ui)}
.goal-card{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:150px;box-sizing:border-box;padding:var(--s-4) var(--s-5);border-radius:20px;background:var(--cv-forest,#0F4D33);color:#FBF9F4}
.gc-n{font:600 4.5rem/1 var(--font-display)}
.gc-l{font-size:var(--fs-1);margin-top:4px}
.gc-s{font-size:var(--fs-0);opacity:.85;margin-top:6px}
.gc-set{margin-top:var(--s-3);min-height:44px;padding:0 1.1rem;border:1.5px solid rgba(251,249,244,.6);border-radius:var(--r-pill);background:transparent;color:inherit;font:600 var(--fs-0) var(--font-ui);cursor:pointer}
.gc-ring{position:relative;flex:none;width:92px;height:92px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;display:grid;place-items:center}
.gc-ring svg{position:absolute;inset:0}
.gc-ring span{position:relative;display:grid;text-align:center;font-size:.6875rem;opacity:.95}.gc-ring b{font:600 1.25rem/1.1 var(--font-display)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 0}
.tile{box-sizing:border-box;min-height:92px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;justify-content:space-between;gap:4px;min-width:0}
.tile .k{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tile .v{font:600 1.375rem/1.1 var(--font-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .s{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-chart{margin-top:12px;padding:12px 14px 8px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.mo-t{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mo-cols{display:flex;margin-top:6px}
.mo-col{flex:1;min-width:0;min-height:44px;padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;border-radius:8px}
.mo-bar{display:flex;align-items:flex-end;justify-content:center;height:64px}
.mo-bar i{display:block;width:calc(100% - 8px);border-radius:3px;background:var(--line)}
.mo-bar i.has{background:#4E9A70}
.mo-col.on .mo-bar i.has{background:var(--accent)}
.mo-col.on{background:var(--surface-2);color:var(--text);font-weight:700}
.mo-l{font-size:.6875rem;text-align:center;padding:4px 0}
.mo-col:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mo-panel{margin-top:12px;padding:var(--s-3);background:var(--surface-2);border-radius:16px}
.mo-head{display:flex;align-items:center;justify-content:space-between}
.mo-head h3{margin:0;font:600 var(--fs-2)/1.2 var(--font-display)}
.mo-arrow{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--text);font:600 1.3rem/1 var(--font-ui);cursor:pointer}
.mo-arrow:disabled{opacity:.35;cursor:default}
.mo-panel .tiles{margin-top:var(--s-3)}
.mo-list{margin-top:var(--s-3)}
.year-acts{display:grid;gap:var(--s-2);margin:var(--s-4) 0 var(--s-6)}
@media (min-width:600px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.year-acts{grid-template-columns:1fr 1fr;max-width:520px}}
#lib-record{margin-top:var(--s-5)}
/* the story cards */
.yc{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;color:#FBF9F4;background:var(--cv-forest,#0F4D33)}
.yc[hidden]{display:none}
.yc.t-forest{background:var(--cv-forest,#0F4D33)}.yc.t-indigo{background:var(--cv-indigo,#27365F)}.yc.t-plum{background:var(--cv-plum,#5A2747)}.yc.t-teal{background:var(--cv-teal,#0E5C5A)}.yc.t-sand{background:var(--cv-sand,#E8DCC3);color:#111A15}
.yc-top{position:relative;z-index:3;padding:18px 20px 0;display:flex;flex-direction:column}
.yc-bars{display:flex;gap:6px}.yc-bars i{flex:1;height:4px;border-radius:2px;background:currentColor;opacity:.3}.yc-bars i.on{opacity:1}
.yc-x{align-self:flex-end;width:44px;height:44px;margin-right:-10px;border:0;background:transparent;color:inherit;font-size:1.8rem;cursor:pointer}
.yc-tap{position:absolute;top:70px;bottom:130px;z-index:1;border:0;background:transparent;cursor:pointer;padding:0}
.yc-prev{left:0;width:30%}.yc-next{right:0;width:70%}
.yc-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 28px;position:relative;z-index:2;pointer-events:none;min-height:0;overflow:hidden}
.yc-k{margin:0 0 6px;font-size:1rem;opacity:.9;letter-spacing:.02em}
.yc-big{font:600 clamp(6rem,38vw,9.5rem)/.95 var(--font-display);color:#E8DCC3;overflow-wrap:anywhere}
.t-sand .yc-big{color:#111A15}
.yc-big.sm{font-size:clamp(2.6rem,13vw,4.5rem);line-height:1.05}
.yc-label{margin:0 0 20px;font:600 clamp(2rem,10vw,2.75rem)/1.05 var(--font-display)}
.yc-line{margin:0 0 6px;font-size:1.125rem;opacity:.9}
.yc-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.yc-chips span{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;border:1.5px solid currentColor;font-size:.9375rem;font-weight:500;opacity:.9}
.yc-note{margin:18px 0 0;font-size:.8125rem;opacity:.75}
.yc-foot{position:relative;z-index:3;padding:0 20px calc(24px + env(safe-area-inset-bottom))}
.yc-hint{margin:0 0 12px;text-align:center;font-size:.8125rem;opacity:.75;min-height:1.2em}
.yc-btns{display:flex;gap:10px}
.yc-share{flex:1;min-height:52px;border-radius:999px;background:#FBF9F4;color:#0F4D33;font-weight:600}
.t-sand .yc-share{background:#111A15;color:#FBF9F4}
.yc-nextbtn{min-height:52px;padding:0 22px;border-radius:999px;border:1.5px solid currentColor;background:transparent;color:inherit;font-weight:600}

/* 0.9.1: the share sheet opens above the year cards, and the owner's test tool */
.sheet.over-cards{z-index:210}
.test-tool{margin:var(--s-7) 0 var(--s-6);padding:var(--s-4);border:1px dashed var(--line);border-radius:var(--r-lg)}
.test-tool h3{margin:0 0 var(--s-2);font-size:var(--fs-2)}
.test-tool .year-acts{margin-bottom:0}

/* ---------------------------------------------------------------- 0.10.0: hearts, the Wall, back up and restore, and the end-of-piece extras */
.heart-ic{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;flex:none}
.heart-ic.on{fill:currentColor}
.heart-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.heart-btn[aria-pressed="true"],.heart-toggle[aria-pressed="true"] .heart-ic{color:#C0392B}
.heart-btn[aria-pressed="true"]{color:#C0392B}
.heart-btn:hover{background:var(--surface-2)}
.heart-toggle{display:inline-flex;align-items:center;gap:.5rem}
.heart-toggle[aria-pressed="true"]{border-color:#C0392B;color:var(--text)}
:root[data-theme="dark"] .heart-btn[aria-pressed="true"],:root[data-theme="dark"] .heart-toggle[aria-pressed="true"] .heart-ic{color:#FF7A6B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .heart-btn[aria-pressed="true"],:root:not([data-theme="light"]) .heart-toggle[aria-pressed="true"] .heart-ic{color:#FF7A6B}}
.sr-rate{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.sr-rate .star-input.sm{margin-top:0}
.lib-card .heart-btn{align-self:flex-start;margin-left:-8px}

.wall-filters{display:grid;gap:var(--s-3);margin:0 0 var(--s-4)}
.wall-sel{display:flex;gap:var(--s-2);flex-wrap:wrap}
.wall-sel select{min-height:44px;padding:0 1rem;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--text);font:600 var(--fs-0)/1 var(--font-ui)}
.wall-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3) var(--s-3)}
.wall-tile{min-width:0}
.wall-tile>a,.wall-open{display:block;text-decoration:none}
.wall-open{width:100%;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer;border-radius:6px}
.wall-open:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wall-tile .cover{padding:.55rem .45rem .55rem .65rem;border-radius:3px 6px 6px 3px}
.wall-tile .cover .c-title{font-size:.7rem}.wall-tile .cover .c-meta{font-size:.5rem}
/* The writer's name and the strip on a picture cover (0.16.0, Entry 226). Hidden by default, shown only where the cover is big enough to read them. */
.cover .c-by,.cover .c-strip{display:none}
.wall-tile .cover,.ws-cover .cover,.shelf-row .sr-cover .cover,.pin-pick .cover{--pz:.55} /* finer pattern on small covers (theme 0.1.37) */
.wall-tile .cover .c-by,.ws-cover .cover .c-by,.lib-card .cover .c-by,.shelf-item .cover .c-by{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.wall-tile .cover .c-strip,.ws-cover .cover .c-strip,.lib-card .cover .c-strip,.shelf-item .cover .c-strip{display:block}
.wall-tile .cover .c-by,.ws-cover .cover .c-by{font-size:.52rem;margin-top:.3em}
.wall-tile .cover .c-strip,.ws-cover .cover .c-strip{padding:1.1rem .45rem .45rem .6rem}
.wall-tile .cover .c-strip .c-title,.ws-cover .cover .c-strip .c-title{font-size:.62rem}
.wall-meta{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.wall-r{font:600 var(--fs-0)/1 var(--font-ui);color:var(--muted);padding-left:2px}
.wall-p{display:block;font:500 var(--fs-0)/1.2 var(--font-ui);color:var(--muted);padding-left:2px}
.wall-r:has(.wall-p){display:flex;flex-direction:column;gap:2px}
.wall-foot{display:flex;justify-content:center;margin:var(--s-5) 0 0}
@media (min-width:560px){.wall-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:860px){.wall-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-4)}}

.lib-backup{margin-top:var(--s-8);padding:var(--s-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.lib-backup .section-head{margin-bottom:var(--s-2)}
.lib-backup .hero-actions{margin:var(--s-3) 0 0}

.zpr-capture{max-width:520px;text-align:left}
.cap-row{display:flex;gap:var(--s-3);flex-wrap:wrap;justify-content:center}
.cap-fields{margin-top:var(--s-4)}
.cap-fields label{display:block;font:600 var(--fs-0) var(--font-ui);margin:var(--s-3) 0 var(--s-2)}
.cap-fields input,.sheet input[type="text"]{width:100%;box-sizing:border-box;min-height:44px;padding:.6rem .9rem;font:500 var(--fs-1)/1.4 var(--font-read);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md,10px)}
.cap-fields input:focus,.sheet input[type="text"]:focus{outline:2px solid var(--accent-text);outline-offset:1px}

.from-reading{padding-top:var(--s-4)}
.fr-card{--tone:var(--cv-forest);margin:0;padding:var(--s-5);background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--tone);border-radius:var(--r-lg)}
.fr-card.t-indigo{--tone:var(--cv-indigo)}.fr-card.t-plum{--tone:var(--cv-plum)}.fr-card.t-teal{--tone:var(--cv-teal)}.fr-card.t-sand{--tone:var(--cv-sand)}
.fr-k{font:600 .75rem/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s-3)}
.fr-card blockquote{margin:0 0 var(--s-3);font:italic 500 var(--fs-3)/1.45 var(--font-read)}
.fr-card blockquote a{color:inherit;text-decoration:none}
.fr-card blockquote a:hover{text-decoration:underline;text-underline-offset:4px}
.fr-from{margin:0;color:var(--muted);font-size:var(--fs-0)}
.fr-card .link-btn{margin-top:var(--s-2)}

/* 0.11.1 */
.lib-help{white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;gap:.4rem}
.lib-help .ic{width:18px;height:18px}
@media (max-width:480px){.lib-help{width:44px;padding:0;justify-content:center}.lib-help-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* 0.11.0 */
.lib-find{display:inline-flex;align-items:center;gap:.4rem;min-height:44px}
.lib-find[hidden]{display:none}
.lib-find .ic{width:18px;height:18px}
@media (max-width:359px){.lib-find-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.lib-tour{margin:var(--s-5) 0 0;text-align:center}
.lib-tour[hidden]{display:none}
.ws-top{display:grid;grid-template-columns:96px 1fr;gap:var(--s-4);align-items:start}
.ws-cover .cover{padding:.55rem .45rem .55rem .65rem;border-radius:3px 6px 6px 3px}
.ws-cover .cover .c-title{font-size:.72rem}.ws-cover .cover .c-meta{font-size:.5rem}
.ws-info{display:grid;gap:var(--s-3);justify-items:start}
.ws-info .by{margin:0;color:var(--muted)}
.ws-stars{display:inline-flex;gap:2px;color:var(--accent)}
.ws-stars svg{width:20px;height:20px}
.ws-stars svg.off{opacity:.25}
.ws-cap{margin-top:var(--s-5)}
.ws-t{margin:0;font-family:var(--font-read);font-size:var(--fs-2);line-height:1.5;overflow-wrap:anywhere}
.ws-none{margin:0}
.acct-backup{margin:var(--s-3) 0 0}
.lib-top{flex-wrap:wrap}
.lib-top-tools{flex-wrap:wrap;margin-left:auto}
.lib-top-tools .goal-ring,.lib-find{white-space:nowrap}

/* ---------- Notices: the bell in the top bar and its list (0.13.0, Entry 200) ---------- */
.icon-btn.zpr-bell{position:relative}
.icon-btn.zpr-bell[hidden],.zpr-bell-n[hidden]{display:none}
.icon-btn.zpr-acct{position:relative}
.zpr-acct-n{display:none}
/* With the bell showing, the top bar needs a little less air on phones so four round buttons and the logo fit (360 pixels is a common width). */
@media (max-width:400px){body.zpr-has-bell .topbar .wrap{gap:var(--s-2)}body.zpr-has-bell .topbar-actions{gap:4px}}
/* Under 340 pixels there is no room even then, so the bell steps aside and its number sits on the account icon. */
@media (max-width:339px){body.zpr-has-bell .icon-btn.zpr-bell{display:none}body.zpr-has-bell .zpr-acct-n:not([hidden]){display:block}}
.icon-btn.zpr-bell.has-new{border-color:var(--accent-text);color:var(--accent-text)}
.zpr-bell-n{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-pill);background:var(--btn-bg);color:var(--btn-fg);font:700 .7rem/19px var(--font-ui);text-align:center;box-shadow:0 0 0 2px var(--bg)}
.zpr-notes .sr-only,.dash-notes .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.zpr-notes{position:absolute;top:calc(100% + 8px);right:12px;z-index:70;width:min(400px,calc(100vw - 24px));max-height:min(70dvh,560px);overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:var(--s-4)}
.zpr-notes[hidden]{display:none}
.zpr-notes:focus{outline:none}
.zpr-notes-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin-bottom:var(--s-2)}
.zpr-notes-head h2{margin:0;font-size:var(--fs-3)}
.zpr-notes-close{border:0;background:none;color:var(--muted);font-size:1.6rem;line-height:1;width:44px;height:44px;border-radius:50%;cursor:pointer}
.zpr-notes-close:hover{color:var(--text)}
.zpr-note,.dash-note{padding:var(--s-3) 0;border-top:1px solid var(--line)}
.zpr-note h3,.dash-note h3{margin:0 0 .25rem;font:600 var(--fs-1)/1.35 var(--font-ui);display:flex;align-items:baseline;gap:.5rem}
.zpr-note p,.dash-note p{margin:.25rem 0;font-size:var(--fs-0);color:var(--text)}
.zpr-note-re,.dash-note-re{background:var(--surface-2);border-radius:var(--r-md);padding:.6rem .8rem}
.zpr-note-re strong,.dash-note-re strong{display:block;font:600 .75rem/1.2 var(--font-ui);color:var(--muted);margin-bottom:.2rem}
.zpr-note-dot,.dash-note-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--accent);transform:translateY(-1px)}
.zpr-note-row,.dash-note-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);color:var(--muted);font-size:.8125rem}
.zpr-note-x,.dash-note-x{border:0;background:none;color:var(--accent-text);font:600 .8125rem var(--font-ui);padding:.65rem .4rem;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.zpr-notes-empty{margin:var(--s-3) 0;color:var(--muted)}
.zpr-notes-foot{border-top:1px solid var(--line);padding-top:var(--s-2);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-2);color:var(--muted);font-size:.8125rem}
.zpr-notes-foot p{margin:0}
.zpr-notes-foot a{color:var(--accent-text);font-weight:600}
@media (max-width:560px){.zpr-notes{left:12px;right:12px;width:auto}}
@media (prefers-reduced-motion:no-preference){.zpr-notes{animation:zpr-notes-in .16s var(--ease)}@keyframes zpr-notes-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}}

/* 0.15.1 (Entry 214): when the Up next box is empty it is the only thing in the row, so it fills the row and its words sit in the middle. Once something is pinned it keeps its usual size beside the covers. */
.next-row>.next-add:only-child{max-width:none;flex-basis:100%;display:grid;place-items:center;text-align:center}