/* book/book.css — the reading/dive overlay. Tokens match style.css's :root (same palette as every other
   town surface); .mh-seal is reused as-is from missions/dossier.css, already linked by any page using books. */
.book-overlay,.book-overlay *{box-sizing:border-box}
.book-overlay{position:fixed;inset:0;z-index:11;pointer-events:none;font:15px/1.5 var(--sans,system-ui)}
.book-overlay>*{pointer-events:auto}

.book-reader{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 32px));
  background:var(--paper,#fbf8f2);border:1px solid var(--line,#d9d4c9);border-radius:14px;
  box-shadow:0 24px 60px rgba(30,25,15,.28);padding:28px 30px 22px;perspective:1400px}
.book-close{position:absolute;top:12px;right:12px;min-height:32px;padding:4px 10px;border-radius:6px;
  border:0;background:none;color:var(--muted,#5d6570);font:500 13px var(--sans,system-ui);cursor:pointer}
.book-close:hover{background:#efe8da;color:var(--ink,#1f2328)}
.book-pages{min-height:180px;transform-style:preserve-3d}
.book-pages .kicker{margin:0 0 8px;font:500 11px var(--mono,monospace);letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#5d6570)}
.book-pages h2{margin:0 0 10px;font:600 22px/1.25 var(--sans,system-ui);color:var(--ink,#1f2328)}
.book-body{margin:0;font-size:16px;line-height:1.6;color:var(--ink,#1f2328)}
.book-nav{display:flex;align-items:center;justify-content:space-between;margin-top:20px;gap:10px}
.book-nav button{min-height:40px;padding:0 16px;border-radius:8px;border:1px solid var(--ink,#1f2328);
  background:transparent;color:var(--ink,#1f2328);font:500 14px var(--sans,system-ui);cursor:pointer}
.book-nav button:disabled{opacity:.35;cursor:default}
.book-next{background:var(--ink,#1f2328);color:#fff;border-color:var(--ink,#1f2328)}
.book-page-count{font:500 12px var(--mono,monospace);color:var(--muted,#5d6570)}

.book-swirl{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,var(--accent,#b8643a) 0%,transparent 70%);
  opacity:0;transform:scale(.3)}

.book-seal{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%)}

/* a dimension's HUD: the goal top-left, its live gauge and controls top-right, what just happened above the thumbs */
.dim-hud{position:absolute;inset:0;pointer-events:none !important}
.dim-hud>*{position:absolute;pointer-events:auto;margin:0;background:rgba(251,248,242,.95);border:1px solid var(--line,#d9d4c9);
  border-radius:12px;box-shadow:0 10px 28px rgba(30,25,15,.18)}
.dim-goal{left:calc(var(--sal,0px) + 14px);top:calc(var(--sat,0px) + 14px);max-width:min(420px,calc(100% - 172px));padding:10px 14px}
.dim-goal b{display:block;font:600 15px/1.3 var(--sans,system-ui);color:var(--ink,#1f2328)}
.dim-goal span{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--muted,#5d6570)}
.dim-gauge{right:calc(var(--sar,0px) + 14px);top:calc(var(--sat,0px) + 14px);width:132px;padding:6px 10px 6px;text-align:center}
.dim-gauge span{font:600 10px var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#5d6570)}
.dim-gauge svg{display:block;width:100%;margin-top:2px}
.dim-needle{transform-box:view-box;transform-origin:60px 62px;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
/* a word verdict in place of a dial (the Composing Stone's "reads as"), with the two numbers behind it */
.dim-verdict{display:block;margin-top:2px;font:600 17px/1.2 var(--sans,system-ui);text-transform:capitalize;color:var(--ink,#1f2328)}
.dim-verdict[data-v=arbitrary]{color:#a3382c}.dim-verdict[data-v=uneasy]{color:#8a5a14}.dim-verdict[data-v=intentional]{color:#3f6e3a}
.dim-metrics{display:block;margin-top:2px;font:500 10.5px/1.35 var(--mono,monospace);color:var(--muted,#5d6570)}
/* names pinned to things in the scene; they never take a tap from the thing they name */
.dim-hud>.dim-tags{inset:0;pointer-events:none !important;background:none;border:0;border-radius:0;box-shadow:none}
.dim-tags span{position:absolute;left:0;top:0;margin:5px 0 0 5px;padding:1px 6px;border-radius:4px;background:rgba(251,248,242,.9);
  font:600 10px/1.5 var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--ink,#1f2328);white-space:nowrap}
.dim-tags span.on{background:#ffc861}
/* how sure a sourced sentence is, printed beside it */
.dim-grade{display:inline-block;margin-left:4px;padding:0 6px;border:1px solid currentColor;border-radius:999px;font:600 10px/1.6 var(--mono,monospace);
  letter-spacing:.1em;text-transform:uppercase;vertical-align:1px}
.dim-grade[data-grade=verified]{color:#3f6e3a}.dim-grade[data-grade=secondary]{color:#6b6f76}
.dim-actions{right:calc(var(--sar,0px) + 14px);top:calc(var(--sat,0px) + 118px);display:flex;gap:6px;padding:0;background:none;border:0;box-shadow:none}
.dim-actions button{min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--ink,#1f2328);background:var(--paper,#fbf8f2);
  color:var(--ink,#1f2328);font:500 13.5px var(--sans,system-ui);cursor:pointer;touch-action:manipulation}
.dim-actions .dim-leave{background:var(--ink,#1f2328);color:#fff}
.dim-actions .dim-nudge{min-width:44px;padding:0;font-size:17px}
.dim-actions .dim-bold{font-weight:700}
.dim-actions .dim-bold[aria-pressed=true]{background:#ffc861;border-color:#8a5a14}
.dim-actions button:disabled{opacity:.4;cursor:default}
/* two lines tall from the start: the scene is framed above it once, so a longer message must not grow into the bench */
.dim-say{left:50%;bottom:calc(var(--sab,0px) + 16px);transform:translateX(-50%);width:min(580px,calc(100% - 24px));padding:12px 16px;
  min-height:calc(2.9em + 24px);font-size:15px;line-height:1.45;color:var(--ink,#1f2328);text-align:center}
.dim-say b{font-weight:600}
.dim-say.dim-warn{background:#fbefe6;border-color:#d9a184}
.dim-say em{font-style:normal;font-weight:600;color:#a3382c}
@media (prefers-reduced-motion:reduce){.dim-needle{transition:none}}
@media (max-width:640px){.dim-goal{max-width:calc(100% - 164px)}.dim-goal span{font-size:12.5px}.dim-gauge{width:120px}.dim-say{font-size:14px}}
/* short landscape phones: every panel tight to an edge, the actions beside the gauge, so the bench keeps the middle */
@media (max-height:520px){
  .dim-goal{top:calc(var(--sat,0px) + 8px);left:calc(var(--sal,0px) + 10px);padding:6px 10px;max-width:min(360px,calc(100% - 330px))}
  .dim-goal b{font-size:13.5px}.dim-goal span{font-size:12px;line-height:1.3}
  .dim-gauge{top:calc(var(--sat,0px) + 8px);right:calc(var(--sar,0px) + 10px);width:96px;padding:3px 8px}
  .dim-gauge span{font-size:9px}
  .dim-verdict{font-size:13px}.dim-metrics{font-size:8.5px;white-space:nowrap}
  .dim-actions{top:calc(var(--sat,0px) + 8px);right:calc(var(--sar,0px) + 114px)}
  .dim-actions button{min-height:40px;padding:0 12px}
  .dim-say{bottom:calc(var(--sab,0px) + 8px);padding:6px 12px;min-height:calc(2.7em + 12px);font-size:13px;line-height:1.35}
}

@media (max-width:640px){
  .book-reader{width:calc(100% - 24px);padding:20px 20px 16px}
}