/* ============================================================
   Grail — one notebook, dark always.
   Paper grammar: pocket notebook 90 × 140 mm, night paper, bone
   ink, one orange (the tabs). Everything physical derives from
   --mm so the book is the same object at any viewport, and so a
   page paginates the same way on the phone and on the desk.
   Flip engine + block/edge/gutter CSS adapted from ~/sites/notebook.
   ============================================================ */

/* ---------- 1. Tokens ---------- */

:root{
  --paper:       #1C1915;
  --paper-2:     #221E19;            /* pastedown */
  --paper-edge:  #2A2620;
  --ink:         #E8DEC6;            /* 12.6:1 on paper */
  --ink-2:       #B8AE95;            /*  7.6:1 */
  --ink-3:       #8C8470;            /*  4.6:1 — smallest text that must be read */
  --ink-4:       #5A5446;            /*  non-text */
  --rule:        rgba(232,222,198,.10);
  --rule-2:      rgba(232,222,198,.24);

  --orange:      #F28C38;            /* the tabs; also the caret */
  --orange-ink:  #1A1208;            /* text printed on a tab */

  --leather:     #14110E;
  --leather-2:   #211B16;
  --leather-3:   #0A0806;
  --band:        #09080A;
  --brass:       #B8965A;

  --desk:        #0E0D0B;
  --desk-2:      #040404;

  --vw: 100vw;
  --vh: 100svh;
  --ratio: .642857;                  /* 90 / 140 */
  --page-w: 360px;
  --page-h: calc(var(--page-w) / var(--ratio));
  --mm: calc(var(--page-w) / 90);
  --pad-out: calc(7 * var(--mm));
  --pad-in:  calc(9 * var(--mm));
  --pad-top: calc(8 * var(--mm));

  --total: 1; --flipped: 0; --unflipped: 1;
  --block-t: calc(11 * var(--mm));
  --edge-l: 0px; --edge-r: 0px;

  --flip-ms: 560ms;
  --flip-ease: cubic-bezier(.42,.04,.22,1);
  --pan-ms: 420ms;
  --ease-out: cubic-bezier(.16,1,.3,1);

  --hand: "Kalam", "Segoe Print", "Bradley Hand", cursive;
  --fell: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --ui:   system-ui, -apple-system, "Segoe UI", sans-serif;

  /* fixed pagination sizes, in mm */
  --ink-size: calc(3.7 * var(--mm));
  --ink-lead: calc(5.2 * var(--mm));
}

@property --turn { syntax: "<number>"; inherits: true; initial-value: 0; }

.app{
  --page-w: min(calc((var(--vw) - 104px) / 2), calc((var(--vh) - 176px) * var(--ratio)), 400px);
  --page-h: calc(var(--page-w) / var(--ratio));
  --mm: calc(var(--page-w) / 90);
  --pad-out: calc(7 * var(--mm));
  --pad-in:  calc(9 * var(--mm));
  --pad-top: calc(8 * var(--mm));
  --block-t: calc(11 * var(--mm));
  --ink-size: calc(3.7 * var(--mm));
  --ink-lead: calc(5.2 * var(--mm));
}
.app.is-single{
  --page-w: min(calc(var(--vw) - 28px), calc((var(--vh) - 150px) * var(--ratio)), 430px);
}

/* ---------- 2. Ground ---------- */

*,*::before,*::after{ box-sizing:border-box }
/* one screen, never a scrolling document: a turning page projects taller than the
   book in 3D, and a focused pen would otherwise scroll the desk out from under it */
html,body{ height:100%; overflow:hidden }
body{
  margin:0;
  background:var(--desk-2);
  color:var(--ink);
  font-family:var(--ui);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
.desk{
  height:100svh; overflow:hidden;
  display:grid; place-items:center; grid-template-columns:minmax(0, 100%);
  padding:18px 14px calc(14px + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 80% at 50% 30%, #151311 0%, var(--desk) 46%, var(--desk-2) 100%);
}
.app{ display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; min-width:0; max-width:100% }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; border:0 }
[hidden]{ display:none !important }

/* ---------- 3. Stage and book ---------- */

.stage{
  perspective:2000px; perspective-origin:50% 42%;
  width:calc(var(--page-w) * 2 + var(--block-t) * 2);
  height:var(--page-h);
  position:relative;
  user-select:none;
  max-width:100%;
}
/* centred by hand: a grid/flex "center" gives up once the book is wider than the stage */
.book{
  position:absolute; top:0; left:50%;
  margin-left:calc(var(--page-w) * -1);
  width:calc(var(--page-w) * 2); height:var(--page-h);
  transform:translateX(calc(var(--page-w) * -0.5));
  transition:transform var(--pan-ms) var(--ease-out);
  outline:none; touch-action:pan-y;
}
.app.is-open .book{ transform:translateX(0) }
.app.is-end  .book{ transform:translateX(calc(var(--page-w) * 0.5)) }
.app.is-single .book{ transform:translateX(calc(var(--page-w) * -0.5)) }
.app.is-single.side-left .book{ transform:translateX(calc(var(--page-w) * 0.5)) }
.book:focus-visible{ outline:2px solid var(--brass); outline-offset:14px }

.app.is-entering .book{ animation:settle 520ms var(--ease-out) both }
@keyframes settle{
  from{ opacity:0; transform:translateX(calc(var(--page-w) * -0.5)) translateY(14px) scale(.965) }
  to  { opacity:1 }
}

.book__shadow{
  position:absolute; z-index:0; left:50%; width:var(--page-w); top:1%; height:98%;
  box-shadow:0 2px 3px rgba(0,0,0,.5), 0 14px 26px rgba(0,0,0,.4), 0 40px 64px rgba(0,0,0,.35);
  transition:left var(--pan-ms) var(--ease-out), width var(--pan-ms) var(--ease-out);
}
.app.is-open .book__shadow{ left:0; width:100% }
.app.is-end  .book__shadow{ left:0; width:var(--page-w) }

/* the page block seen edge on */
.book__edge{
  position:absolute; top:1.1%; height:97.8%; z-index:6; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.44), rgba(0,0,0,0) 6%, rgba(0,0,0,0) 94%, rgba(0,0,0,.44)),
    repeating-linear-gradient(90deg, var(--paper-edge) 0 1.5px, rgba(232,222,198,.16) 1.5px 3px);
  transition:width 220ms var(--ease-out);
}
.book__edge--left { left:calc(var(--edge-l) * -1); width:var(--edge-l); border-radius:2px 0 0 2px;
  box-shadow:inset -1px 0 0 rgba(0,0,0,.24), -1px 0 3px rgba(0,0,0,.36), inset 14px 0 18px -12px rgba(0,0,0,.55) }
.book__edge--right{ left:100%; width:var(--edge-r); border-radius:0 2px 2px 0;
  box-shadow:inset 1px 0 0 rgba(0,0,0,.24), 1px 0 3px rgba(0,0,0,.36), inset -14px 0 18px -12px rgba(0,0,0,.55) }

/* ---------- 4. Sheets ---------- */

.book__block{ position:absolute; inset:0; z-index:10 }
.sheet{
  position:absolute; top:0; left:50%; width:50%; height:100%;
  transform-style:preserve-3d; transform-origin:left center;
  transform:rotateY(calc(var(--turn) * -180deg));
  transition:--turn var(--flip-ms) var(--flip-ease);
}
.sheet.is-turning{ will-change:transform }
.sheet.is-flipped{ --turn:1 }
.sheet.is-dragging{ transition:none }
.sheet[hidden]{ display:none }

.face{
  position:absolute; inset:0; backface-visibility:hidden; overflow:hidden;
  background-color:var(--paper);
  background-image:
    radial-gradient(140% 100% at 14% -6%, rgba(255,255,255,.045), rgba(255,255,255,0) 58%),
    repeating-linear-gradient(97deg, rgba(232,222,198,.018) 0 2px, rgba(0,0,0,0) 2px 4px),
    radial-gradient(60% 40% at 90% 100%, rgba(120,90,40,.06), rgba(0,0,0,0) 70%);
  color:var(--ink);
}
.face--back{ transform:rotateY(180deg) }
.face__paper{ position:absolute; inset:0; z-index:1 }

.book__block.is-riffling{ animation:riffle 300ms var(--ease-out) }
.book__block.is-riffling .sheet{ transition:none }
@keyframes riffle{ 0%{opacity:1} 26%{opacity:.42} 100%{opacity:1} }

.no-prop .sheet{ transition:transform var(--flip-ms) var(--flip-ease) }
.no-prop .face__shade, .no-prop .face__gloss{ display:none }

.face__shade{ position:absolute; inset:0; z-index:9; pointer-events:none }
.face--front .face__shade{ background:linear-gradient(to left, rgba(0,0,0,.5), rgba(0,0,0,0) 58%); opacity:calc(var(--turn) * 1.15) }
.face--back  .face__shade{ background:linear-gradient(to right, rgba(0,0,0,.52), rgba(0,0,0,0) 58%); opacity:calc((1 - var(--turn)) * 1.15) }
.face__gloss{
  position:absolute; inset:0; z-index:10; pointer-events:none; opacity:0;
  background:
    linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.32) 52%, rgba(255,255,255,0) 74%),
    radial-gradient(124% 148% at 50% 50%, rgba(24,20,12,0) 54%, rgba(24,20,12,.30) 100%);
}
@supports (width: calc(sin(45deg) * 1px)){
  .sheet{ --peak: calc(sin(var(--turn) * 180deg)) }
  .face__gloss{ opacity:calc(var(--peak) * .5) }
}

.book__gutter{
  position:absolute; top:0; bottom:0; left:50%; width:calc(16 * var(--mm));
  transform:translateX(-50%); z-index:500; pointer-events:none;
  opacity:0; transition:opacity 260ms var(--ease-out);
  background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.16) 34%, rgba(0,0,0,.30) 49%, rgba(0,0,0,.38) 50%, rgba(0,0,0,.30) 51%, rgba(0,0,0,.16) 66%, rgba(0,0,0,0) 100%);
}
.app.is-open .book__gutter{ opacity:1 }

/* ---------- 5. The cover: black, an elastic band, a blind emboss ---------- */

.cover{
  position:absolute; inset:calc(-1.4 * var(--mm)) calc(-1.4 * var(--mm)) calc(-1.4 * var(--mm)) 0;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.05), rgba(255,255,255,0) 55%),
    repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,.012) 0 1px, rgba(0,0,0,.03) 1px 3px),
    linear-gradient(160deg, var(--leather-2), var(--leather) 46%, var(--leather-3));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.6);
  border-radius:0 calc(2.2 * var(--mm)) calc(2.2 * var(--mm)) 0;
}
.cover--back{ inset:calc(-1.4 * var(--mm)) 0 calc(-1.4 * var(--mm)) calc(-1.4 * var(--mm)); border-radius:calc(2.2 * var(--mm)) 0 0 calc(2.2 * var(--mm)) }
.cover::before{ /* spine roll */
  content:""; position:absolute; top:0; bottom:0; left:0; width:calc(6 * var(--mm));
  background:linear-gradient(90deg, rgba(0,0,0,.6), rgba(255,255,255,.05) 60%, rgba(0,0,0,.25));
}
.cover--back::before{ left:auto; right:0; background:linear-gradient(270deg, rgba(0,0,0,.6), rgba(255,255,255,.05) 60%, rgba(0,0,0,.25)) }
.cover__band{
  position:absolute; top:calc(-1.4 * var(--mm)); bottom:calc(-1.4 * var(--mm));
  right:calc(12 * var(--mm)); width:calc(4.2 * var(--mm));
  background:linear-gradient(90deg, #06060A, #15141A 45%, #08080C);
  box-shadow:0 0 0 .5px rgba(255,255,255,.05), 2px 0 5px rgba(0,0,0,.6), -2px 0 4px rgba(0,0,0,.4);
}
.cover--back .cover__band{ right:auto; left:calc(12 * var(--mm)) }
.cover__emboss{
  position:absolute; left:calc(12 * var(--mm)); bottom:calc(10 * var(--mm));
  font-family:var(--fell); font-size:calc(4.2 * var(--mm)); letter-spacing:.08em;
  color:rgba(0,0,0,.55);
  text-shadow:0 1px 0 rgba(255,255,255,.07);
}
.cover__emboss small{ display:block; font-size:calc(2.4 * var(--mm)); letter-spacing:.22em; text-transform:uppercase; margin-top:calc(1.2 * var(--mm)) }
.cover--back .cover__emboss{ left:auto; right:calc(12 * var(--mm)); text-align:right; bottom:calc(8 * var(--mm)); font-size:calc(2.4 * var(--mm)); letter-spacing:.22em; text-transform:uppercase }

/* the ends of the block, glued to the boards */
.pastedown{
  position:absolute; inset:0; background:var(--paper-2);
  background-image:repeating-linear-gradient(45deg, rgba(232,222,198,.025) 0 3px, rgba(0,0,0,0) 3px 7px);
  padding:var(--pad-top) var(--pad-out) var(--pad-top) var(--pad-in);
  display:flex; flex-direction:column; gap:calc(2 * var(--mm));
  font-family:var(--fell);
}
.page--recto .pastedown{ padding-left:var(--pad-in); padding-right:var(--pad-out) }
.page--verso .pastedown{ padding-left:var(--pad-out); padding-right:var(--pad-in) }
.pastedown h2{
  margin:0; font-weight:400; font-size:calc(4.6 * var(--mm)); line-height:1.1; letter-spacing:.02em;
}
.pastedown .kicker{ font-size:calc(2.5 * var(--mm)); letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); margin:0 }
.pastedown p{ margin:0; font-size:calc(2.9 * var(--mm)); line-height:calc(4.4 * var(--mm)); color:var(--ink-2) }
.pastedown p.i{ font-style:italic }
.pastedown .rules{ margin:0; padding:0; list-style:none; display:grid; gap:calc(1.2 * var(--mm)) }
.pastedown .rules li{ font-size:calc(2.9 * var(--mm)); line-height:calc(4.2 * var(--mm)); color:var(--ink-2); padding-left:calc(3.2 * var(--mm)); position:relative }
.pastedown .rules li::before{ content:"·"; position:absolute; left:0; color:var(--orange) }
.pastedown .rules li.one{ color:var(--ink) }

.tabindex{ list-style:none; margin:0; padding:0; display:grid; gap:calc(.9 * var(--mm)); overflow:hidden }
.tabindex li{ display:flex; align-items:center; gap:calc(2 * var(--mm)) }
.tabindex button{
  appearance:none; border:0; background:none; padding:0; cursor:pointer; color:inherit; font:inherit;
  display:flex; align-items:center; gap:calc(2 * var(--mm)); width:100%; text-align:left;
  font-size:calc(3.1 * var(--mm)); line-height:calc(4.6 * var(--mm));
}
.tabindex .swatch{ flex:none; width:calc(3.2 * var(--mm)); height:calc(4.6 * var(--mm)); background:var(--orange) }
.tabindex .label{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--hand) }
.tabindex .pg{ color:var(--ink-3); font-size:calc(2.6 * var(--mm)); font-variant-numeric:tabular-nums }
.tabindex button:hover .label, .tabindex button:focus-visible .label{ color:var(--orange) }
.tabindex button:focus-visible{ outline:2px solid var(--orange); outline-offset:2px }
.pastedown .none{ color:var(--ink-3); font-style:italic }

/* ---------- 6. A leaf ---------- */

.page{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:var(--pad-top) var(--pad-out) calc(6 * var(--mm)) var(--pad-in);
}
.page--recto{ padding-left:var(--pad-in); padding-right:var(--pad-out) }
.page--verso{ padding-left:var(--pad-out); padding-right:var(--pad-in) }
.page__body{ flex:1 1 auto; min-height:0; overflow:hidden; position:relative }
.page__foot{
  flex:none; display:flex; justify-content:space-between; align-items:baseline;
  padding-top:calc(1.4 * var(--mm));
  font-family:var(--fell); font-size:calc(2.5 * var(--mm)); color:var(--ink-3);
  letter-spacing:.1em; font-variant-numeric:tabular-nums;
}
.page--verso .page__foot{ flex-direction:row-reverse }
.page__foot .blank{ font-style:italic; letter-spacing:.02em; opacity:.8 }

/* the pencil line that marks the next blank space, only while you are on it */
.page.is-writing .page__foot{ color:var(--ink-2) }

/* the orange tabs on the fore-edge */
.tabs{ position:absolute; top:0; bottom:0; width:0; z-index:4; pointer-events:none }
.page--recto .tabs{ right:0 } .page--verso .tabs{ left:0 }
.tab{
  position:absolute; pointer-events:auto;
  top:calc((12 + var(--i) * 17) * var(--mm));
  width:calc(6.2 * var(--mm)); height:calc(15 * var(--mm));
  background:var(--orange); color:var(--orange-ink);
  border:0; padding:0; cursor:pointer;
  font-family:var(--fell); font-size:calc(2.35 * var(--mm)); letter-spacing:.06em; line-height:1;
  writing-mode:vertical-rl; text-orientation:mixed;
  display:grid; place-items:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  box-shadow:0 1px 2px rgba(0,0,0,.5), inset 0 0 0 .5px rgba(0,0,0,.2);
  transition:transform 120ms var(--ease-out);
}
.page--recto .tab{ right:0; border-radius:calc(.8 * var(--mm)) 0 0 calc(.8 * var(--mm)) }
.page--verso .tab{ left:0;  border-radius:0 calc(.8 * var(--mm)) calc(.8 * var(--mm)) 0; transform:rotate(180deg) }
.tab::before{ content:""; position:absolute; inset:-6px }
.tab:hover, .tab:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--ink) }
/* a tab is torn paper: ragged inner edge */
.page--recto .tab::after, .page--verso .tab::after{
  content:""; position:absolute; top:0; bottom:0; width:calc(.9 * var(--mm)); left:0;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.10) 0 2px, rgba(0,0,0,0) 2px 5px);
}

/* ---------- 7. What is written: jots ---------- */

.jot{ position:relative; margin:0 0 calc(2.2 * var(--mm)) }
.jot:last-child{ margin-bottom:0 }
.jot__stamp{
  display:block; font-family:var(--fell); font-size:calc(2.45 * var(--mm)); line-height:calc(3.4 * var(--mm));
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 calc(.5 * var(--mm));
}
.jot__stamp .by{ color:var(--orange); letter-spacing:.06em; text-transform:none; font-style:italic; margin-left:calc(1.2 * var(--mm)) }
.jot__ink{
  font-family:var(--hand); font-size:var(--ink-size); line-height:var(--ink-lead);
  color:var(--ink); white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
  outline:none; caret-color:var(--orange); cursor:text; min-height:var(--ink-lead);
}
.jot--foreman .jot__ink{ color:var(--ink-2) }
.jot__ink.is-empty::before{ content:attr(data-ph); color:var(--ink-4); pointer-events:none; font-style:italic }
.jot__ink[contenteditable="false"]{ cursor:default }

/* a loose photograph, tucked in with a strip of tape */
.jot--photo{ margin:calc(3.6 * var(--mm)) auto calc(3.2 * var(--mm)); width:max-content; max-width:100%; transform:rotate(var(--tilt, -1.2deg)) }
.jot--photo img{
  display:block; background:#000;
  box-shadow:0 1px 2px rgba(0,0,0,.6), 0 6px 14px rgba(0,0,0,.5);
  filter:sepia(.12) contrast(.96) brightness(.88);
  border:calc(.8 * var(--mm)) solid #EEE6D2;
}
.jot--photo .tape{
  position:absolute; top:calc(-2.2 * var(--mm)); left:50%; width:calc(16 * var(--mm)); height:calc(4.6 * var(--mm));
  transform:translateX(-50%) rotate(-3deg);
  background:rgba(232,222,198,.20); box-shadow:0 0 0 .5px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.25);
  backdrop-filter:blur(.5px);
}
.jot--photo .jot__stamp{ position:absolute; left:0; bottom:calc(-3.4 * var(--mm)); margin:0; white-space:nowrap }

/* a sketch, drawn in the same ink */
.jot--sketch img{ display:block; max-width:100% }
.jot--sketch .jot__stamp{ margin-bottom:calc(.8 * var(--mm)) }

/* selection & tap-to-edit affordance */
.jot.is-active .jot__ink{ box-shadow:-1px 0 0 0 var(--rule-2) }

/* ---------- 8. Rail ---------- */

.hint{ margin:0; height:1.2em; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:rgba(232,222,198,.5); transition:opacity 240ms var(--ease-out) }
.hint.is-gone{ opacity:0 }
kbd{ font:inherit; font-size:11px; border:1px solid rgba(232,222,198,.24); padding:1px 5px; color:rgba(232,222,198,.6) }

.rail{ display:flex; align-items:center; gap:8px; width:100%; max-width:calc(var(--page-w) * 2 + 96px) }
.rail__center{ flex:1 1 auto; min-width:0; display:grid; gap:6px; justify-items:center }
.rail__tools{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap }
.folio{ margin:0; font-family:var(--fell); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(232,222,198,.55); font-variant-numeric:tabular-nums }

.btn{
  appearance:none; height:44px; min-width:44px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:rgba(232,222,198,.05); border:1px solid rgba(232,222,198,.14); color:rgba(232,222,198,.8);
  font:inherit; font-size:12px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  transition:background 140ms var(--ease-out), color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none }
.btn:hover:not(:disabled){ background:rgba(232,222,198,.10); color:var(--ink); border-color:rgba(232,222,198,.28) }
.btn:active:not(:disabled){ transform:scale(.97) }
.btn:disabled{ opacity:.26; cursor:default }
.btn:focus-visible{ outline:2px solid var(--orange); outline-offset:2px }
.btn--icon{ width:44px; padding:0 }
.btn--pen{ color:var(--orange); border-color:rgba(242,140,56,.4) }
.btn--pen:hover:not(:disabled){ color:var(--orange); background:rgba(242,140,56,.12); border-color:var(--orange) }
.btn--foreman .dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 8px var(--orange) }
.btn .txt{ display:none }
@media (min-width: 761px){ .btn .txt{ display:inline } .btn--icon .txt{ display:none } }

.menu{ position:relative }
.menu summary{ list-style:none }
.menu summary::-webkit-details-marker{ display:none }
.menu__panel{
  position:absolute; right:0; bottom:calc(100% + 8px); min-width:236px; z-index:900;
  background:#1B1815; border:1px solid rgba(232,222,198,.16);
  box-shadow:0 2px 4px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.5); display:grid;
}
.menu__item{ appearance:none; background:none; border:0; text-align:left; padding:11px 14px; min-height:44px; color:rgba(232,222,198,.85); font:inherit; font-size:13px; cursor:pointer }
.menu__item:hover{ background:rgba(232,222,198,.08); color:var(--ink) }
.menu__item--warn:hover{ background:rgba(242,140,56,.25); color:#fff }
.menu__sep{ height:1px; background:rgba(232,222,198,.12); margin:4px 0 }

.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  background:#1B1815; border:1px solid rgba(232,222,198,.18); color:var(--ink);
  padding:11px 16px; font-size:13px; z-index:1200; max-width:min(92vw, 420px); text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.5); animation:toast-in 200ms var(--ease-out) both;
}
@keyframes toast-in{ from{ opacity:0; transform:translate(-50%, 8px) } }

/* ---------- 9. Sheets that slide up: Foreman, the box, a tab, about ---------- */

.veil{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1000; animation:veil-in 200ms var(--ease-out) both }
@keyframes veil-in{ from{ opacity:0 } }
.panel{
  position:fixed; left:50%; bottom:0; transform:translateX(-50%);
  width:min(100vw, 560px); max-height:min(86svh, 720px);
  background:#17140F; color:var(--ink);
  border:1px solid rgba(232,222,198,.14); border-bottom:0;
  box-shadow:0 -20px 60px rgba(0,0,0,.6);
  z-index:1001; display:flex; flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
  animation:panel-in 260ms var(--ease-out) both;
}
@keyframes panel-in{ from{ transform:translate(-50%, 24px); opacity:0 } }
.panel__head{ display:flex; align-items:center; gap:10px; padding:12px 14px 10px; border-bottom:1px solid rgba(232,222,198,.1) }
.panel__title{ margin:0; font-family:var(--fell); font-size:18px; font-weight:400; letter-spacing:.03em; flex:1 1 auto }
.panel__title small{ display:block; font-family:var(--ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:2px }
.panel__body{ flex:1 1 auto; min-height:0; overflow:auto; padding:12px 14px; overscroll-behavior:contain }
.panel__foot{ flex:none; padding:10px 14px 12px; border-top:1px solid rgba(232,222,198,.1); display:flex; gap:8px; align-items:center }
.panel p{ margin:0 0 10px; font-size:14px; line-height:1.55; color:var(--ink-2) }
.panel p.i{ font-style:italic }

.field{ display:grid; gap:6px; margin-bottom:12px }
.field label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3) }
.input{
  appearance:none; width:100%; min-height:44px; padding:10px 12px;
  background:rgba(232,222,198,.05); border:1px solid rgba(232,222,198,.18); color:var(--ink);
  font:inherit; font-size:15px; outline:none;
}
.input:focus{ border-color:var(--orange) }
.input--hand{ font-family:var(--hand); font-size:17px }

/* foreman */
.chat{ display:grid; gap:10px }
.msg{ max-width:88%; padding:9px 12px; font-size:14px; line-height:1.5; white-space:pre-wrap; word-break:break-word }
.msg--me{ justify-self:end; background:rgba(232,222,198,.10); color:var(--ink) }
.msg--f{ justify-self:start; background:rgba(242,140,56,.10); border-left:2px solid var(--orange); color:var(--ink) }
.msg--act{ justify-self:start; font-size:12px; color:var(--ink-3); font-style:italic; padding:0 2px }
.msg--err{ justify-self:start; font-size:12px; color:#F0A98A; padding:0 2px }
.msg--wait{ justify-self:start; font-size:12px; color:var(--ink-3); padding:0 2px }
.msg--wait::after{ content:"…"; animation:dots 1.2s steps(3) infinite }
@keyframes dots{ to{ content:"" } }
.chat .f-name{ display:block; font-family:var(--fell); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); margin-bottom:3px }

/* the box */
.shelf{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.shelf button{
  appearance:none; width:100%; text-align:left; cursor:pointer; color:var(--ink); font:inherit;
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  padding:10px 12px; background:rgba(232,222,198,.04); border:1px solid rgba(232,222,198,.12);
}
.shelf button:hover, .shelf button:focus-visible{ border-color:var(--orange); outline:none }
.shelf .spine{ width:14px; height:44px; background:linear-gradient(160deg, var(--leather-2), var(--leather-3)); box-shadow:inset 1px 0 0 rgba(255,255,255,.06) }
.shelf .spine.is-current{ box-shadow:inset 0 0 0 1px var(--orange) }
.shelf .name{ font-family:var(--fell); font-size:16px }
.shelf .meta{ font-size:12px; color:var(--ink-3); margin-top:2px }
.shelf .count{ font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; text-align:right }

.banner{
  position:fixed; top:calc(10px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  z-index:950; display:flex; align-items:center; gap:10px;
  background:#1B1815; border:1px solid rgba(242,140,56,.5); color:var(--ink);
  padding:8px 8px 8px 14px; font-size:13px; max-width:92vw;
}
.banner .btn{ height:34px; font-size:11px }

/* ---------- 10. Sketch pad ---------- */

.pad{ position:fixed; inset:0; z-index:1100; background:var(--paper); display:flex; flex-direction:column; touch-action:none }
.pad__bar{ flex:none; display:flex; align-items:center; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid rgba(232,222,198,.12); background:#17140F; order:2 }
.pad__bar .spacer{ flex:1 1 auto }
.pad__canvas{ flex:1 1 auto; min-height:0; display:block; width:100%; height:100%; cursor:crosshair; order:1 }
.pad__hint{ position:absolute; top:calc(12px + env(safe-area-inset-top)); left:0; right:0; text-align:center; font-family:var(--fell); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); pointer-events:none }

/* ---------- 11. Measuring page (offscreen, same size as a real one) ---------- */

.measure{ position:fixed; left:-200vw; top:0; width:var(--page-w); height:var(--page-h); visibility:hidden; pointer-events:none; contain:strict }
.measure .page{ position:absolute }

/* ---------- 12. Narrow ---------- */

@media (max-width: 760px){
  .desk{ padding:10px 6px calc(10px + env(safe-area-inset-bottom)) }
  .app{ gap:10px }
  .stage{ width:100% }
  .rail{ gap:6px }
  .rail__arrow{ display:none }
  .rail__center{ gap:4px }
  .panel{ width:100vw; border-left:0; border-right:0 }
}

/* ---------- 13. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce){
  :root{ --flip-ms:1ms; --pan-ms:1ms }
  .book, .book__shadow, .book__edge, .book__gutter{ transition:none }
  .app.is-entering .book{ animation:none }
  .book__block.is-riffling{ animation:none }
  .toast, .panel, .veil{ animation:none }
  .face__gloss{ display:none }
}