/* Finishing a book (assets/js/shell/finish.js): the short celebration. The book lifts from the Reading now shelf to the Finished shelf with
   a soft shine, and a few paper corners fly out where it lands. About 1.5 seconds, no sound. People who ask their device for less motion,
   readers who switch it off, and the owner's switch all show the book already on the Finished shelf, with none of the movement. */
.fin-scene{position:relative;height:124px;border-radius:14px;overflow:hidden;background:rgba(var(--fg),.04);border:1px solid var(--edge)}
.fin-shelf{position:absolute;bottom:14px;width:34%;height:7px;border-radius:4px;background:rgba(var(--fg),.16)}
.fin-shelf.from{left:8%}.fin-shelf.to{right:8%}
.fin-shelf span{position:absolute;left:0;top:12px;font-size:.75rem;color:var(--mute);white-space:nowrap}
.fin-book{position:absolute;bottom:21px;left:14%;border-radius:4px;box-shadow:0 6px 14px rgba(0,0,0,.35);overflow:hidden;animation:fin-lift 1.5s cubic-bezier(.3,.7,.2,1) both}
.fin-book>*{display:block}
.fin-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.6) 50%,transparent 68%);transform:translateX(-130%);animation:fin-shine .8s 1.0s ease-out both}
.fin-conf{position:absolute;left:73%;bottom:30px;width:9px;height:9px;opacity:0;clip-path:polygon(0 0,100% 0,0 100%);animation:fin-conf 1s ease-out both}
.fin-conf.c0{background:var(--gold)}.fin-conf.c1{background:var(--gold2)}.fin-conf.c2{background:rgba(var(--fg),.7)}
@keyframes fin-lift{
  0%{left:14%;transform:translateY(0) rotate(0) scale(1)}
  35%{left:24%;transform:translateY(-38px) rotate(-4deg) scale(1.12)}
  72%{left:62%;transform:translateY(-30px) rotate(3deg) scale(1.1)}
  100%{left:66%;transform:translateY(0) rotate(0) scale(1)}
}
@keyframes fin-shine{to{transform:translateX(130%)}}
@keyframes fin-conf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
.fin-scene.still .fin-book{animation:none;left:66%}
.fin-scene.still .fin-shine,.fin-scene.still .fin-conf{display:none}
@media (prefers-reduced-motion:reduce){
  .fin-book{animation:none;left:66%}
  .fin-shine,.fin-conf{display:none}
}

/* The story of a finished book (assets/js/shell/story.js). Tiles, two small charts drawn as inline SVG (each with a text list under
   "Show the numbers"), and plain sentences. Nothing moves, so there is nothing to switch off for people who ask for less motion. */
.st{display:flex;flex-direction:column;gap:14px;min-width:0}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.st-tile{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:var(--r-ctl);background:rgba(var(--fg),.045);border:1px solid var(--edge);min-width:0}
.st-l{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.st-v{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.75rem;line-height:1.08;color:var(--gold2);overflow-wrap:anywhere}
.st-u{font-family:inherit;font-size:.9375rem;color:var(--ink2);font-weight:400}
.st-c{font-size:.8125rem;line-height:1.4;color:var(--mute)}
.st-p{font-size:.9375rem;line-height:1.5;color:var(--ink2);margin:0}
.st-h{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.375rem;line-height:1.15;margin:0}
.st-h2{font-size:.875rem;font-weight:600}
.st-sec{display:flex;flex-direction:column;gap:8px;min-width:0}
.st-list{margin:0;padding-left:1.2em;font-size:.875rem;line-height:1.5;color:var(--ink2)}
.st-list.plain{list-style:none;padding-left:0;display:flex;flex-direction:column;gap:6px}
.st-ctx li{padding:8px 0;border-top:1px solid var(--edge)}
.st-ctx li:first-child{border-top:0;padding-top:0}
.st-svg{display:block;width:100%;height:auto;max-height:230px;overflow:visible}
.st-svg .gl{stroke:rgba(var(--fg),.13);stroke-width:1}
.st-svg .tx{fill:var(--mute);font-size:9.5px;font-family:inherit}
.st-svg .ln{fill:none;stroke:var(--gold2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.st-svg .dt{fill:var(--gold2)}
.st-svg .ar{fill:var(--gold2);opacity:.14;stroke:none}
.st-svg .avg{stroke:rgba(var(--fg),.45);stroke-width:1;stroke-dasharray:4 4}
.st-det,.st-more{font-size:.875rem}
.st-det>summary,.st-more>summary{cursor:pointer;color:var(--gold2);padding:6px 0;min-height:32px;list-style-position:inside}
.st-more>summary{font-weight:500;border-top:1px solid var(--edge);padding-top:12px}
.st-det .st-list{max-height:220px;overflow:auto;padding-right:6px}
.st-bars{display:flex;flex-direction:column;gap:7px}
.st-bar{display:grid;grid-template-columns:minmax(84px,34%) 1fr;grid-template-areas:"l t" "n n";column-gap:10px;row-gap:1px;align-items:center;font-size:.8125rem}
.st-bl{grid-area:l;color:var(--ink2)}
.st-bt{grid-area:t;height:8px;border-radius:4px;background:rgba(var(--fg),.1);overflow:hidden}
.st-bt i{display:block;height:100%;border-radius:4px;background:var(--gold2)}
.st-bn{grid-area:n;color:var(--mute);padding-left:0}
.st-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end}
.st-day{display:flex;flex-direction:column;align-items:center;gap:4px}
.st-dc{display:flex;align-items:flex-end;width:100%;height:46px;border-radius:6px;background:rgba(var(--fg),.07);overflow:hidden}
.st-dc i{display:block;width:100%;background:var(--gold2);border-radius:5px 5px 0 0}
.st-dl{font-size:.6875rem;color:var(--mute)}
.st-stale{padding:10px 12px;border-radius:var(--r-ctl);border:1px solid var(--gold);background:rgba(var(--gd),.1);font-size:.8125rem;color:var(--ink2)}
.st-foot{padding-top:10px;border-top:1px solid var(--edge)}
.st-book{padding:2px 0}
@media (max-width:420px){.st-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.st-v{font-size:1.5rem}}
.st-sticky{position:sticky;bottom:-1px;z-index:2;margin:0 -2px;padding:10px 2px 6px;background:rgba(var(--pn),.985);border-top:1px solid var(--edge)}

/* The card a shared finish carries on a wall post (assets/js/shell/finish-card.js) and the "Share this finish" step (finish-share.js). */
.fcd{margin:10px 0 6px;padding:12px 14px;border-radius:var(--r-ctl);background:rgba(var(--fg),.045);border:1px solid var(--edge);display:flex;flex-direction:column;gap:10px;min-width:0}
.fcd-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.fcd-eye{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
.fcd-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.25rem;line-height:1.15;overflow-wrap:anywhere}
.fcd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px 14px}
.fcd-stat{display:flex;flex-direction:column;min-width:0}
.fcd-v{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.5rem;line-height:1.1;color:var(--gold2);overflow-wrap:anywhere}
.fcd-l{font-size:.75rem;color:var(--ink2)}
.fcd-n{font-size:.6875rem;color:var(--mute)}
.fsh{display:flex;flex-direction:column;gap:14px;min-width:0}
.fsh-chips{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.fsh-chips legend{font-size:.875rem;font-weight:600;padding:0;margin-bottom:6px}
.fsh-row{display:flex;flex-wrap:wrap;gap:8px}
.fsh-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;min-height:40px;border-radius:999px;border:1px solid var(--edge);background:rgba(var(--fg),.04);font-size:.875rem;cursor:pointer}
.fsh-chip:has(input:checked){border-color:var(--gold);background:rgba(var(--gd),.14)}
.fsh-chip:has(input:focus-visible){outline:2px solid var(--gold2);outline-offset:2px}
.fsh-chip input{width:18px;height:18px;accent-color:var(--gold2)}
.fsh-chip .mute{font-size:.75rem}