/* Quiet Stanza — the book on the desk.
   The stacks' poem slip, the journal's wrapper, the book's own controls (shared by the
   journal, the pad and the photo journal), one leaf at a time, full screen, and the pen's
   caption line. The page itself is page.css. */

/* ═══ poem slip (handwriting on dot-grid) ═══ */
.poem-slip {
  background: var(--sheet);
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-card);
  padding: 22px 26px;
  margin-top: 12px;
  max-height: 60vh;
  overflow-y: auto;
}
.poem-line {
  font-family: var(--hand);
  font-size: 18px;
  line-height: 1.9;
  color: var(--ink);
  white-space: pre-wrap;
}

/* Only opacity is eased: a margin transition re-lays out the column on every frame. */
.journal-wrap { margin-top: 32px; transition: opacity .35s ease; }
.journal-quiet { margin-top: 40px; opacity: .86; }
.journal-live {
  position: relative;
  margin-top: 20px;
  margin-bottom: 4px;
  opacity: 1;
  /* Stage height uses cqw so the writing viewport is sized to the journal column, not the viewport. */
  container-type: inline-size;
  container-name: journal;
}

/* ── the book's own controls (journal, pad and photo journal share them) ── */
/* above the book, so the desk's fixed pills never sit over it */
.journal-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0 4px;
}
.journal-nav-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border: 1px solid var(--sheet-edge);
  border-radius: 8px;
  background: var(--sheet);
  color: var(--text-primary);
  font-family: var(--ui);
  font-size: 13px;
  cursor: pointer;
}
.journal-nav-btn:hover { color: var(--wax); }
.journal-nav-btn:disabled { opacity: .4; cursor: default; color: var(--text-primary); }
.journal-nav-btn:focus-visible { outline: 2px solid var(--laurel); outline-offset: 2px; }
.journal-nav-group { display: inline-flex; gap: 0; }
.journal-nav-group .journal-nav-opt:first-child { border-radius: 8px 0 0 8px; }
.journal-nav-group .journal-nav-opt:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.journal-nav-opt[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.journal-nav-status {
  margin: 0 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* one leaf at a time on the desk: the stage takes the leaf's own upright shape. Full screen
   and the writing window size the stage themselves. */
.journal-wrap:not(.is-fullscreen):not(.journal-live):not(.journey-main) .journal-root[data-fit="page"]:not(.is-closed) .journal-stage,
.journal-wrap:not(.is-fullscreen):not(.journal-live):not(.journey-main) .journal-root:is(.is-closed, .is-rear-cover):not(.is-closing-cover):not(.is-opening-cover):not([data-cover-wide]) .journal-stage {
  aspect-ratio: 446 / 644;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Immersive journal: same instance, fixed over the shell (rail included). The paper and
   the way out are all that is drawn: no drag strip, grip, band or controls. */
.journal-wrap.is-fullscreen:not(.journey-main) :is(.journal-drag, .journal-scale, .band, .journal-nav, .cj-toolbar) { display: none; }
.journal-wrap.is-fullscreen .journal-fs-leave { backdrop-filter: none; }
.journal-wrap.is-fullscreen:not(.journey-main) {
  position: fixed;
  inset: 0;
  z-index: 60;
  margin: 0;
  opacity: 1;
  padding: 56px 28px 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 85% 70% at 50% 42%, #E9E3D6 0%, transparent 68%),
    linear-gradient(165deg, #D8D2C4 0%, #C6C0B2 48%, #B7B1A3 100%);
  container-type: size;
  container-name: journal;
}
.journal-wrap.is-fullscreen:not(.journey-main) .journal-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.journal-wrap.is-fullscreen:not(.journey-main) .journal-root:not(.gift-pad-root, .card-pack-root) .journal-stage {
  flex: 0 1 auto;
  width: min(calc(100vw - 56px), calc((100vh - 72px) * 892 / 644));
  max-width: none;
  aspect-ratio: 892 / 644;
  height: auto;
  max-height: calc(100vh - 72px);
}
/* one leaf of the journal, upright */
.journal-wrap.is-fullscreen:not(.journey-main) .journal-root[data-fit="page"]:not(.gift-pad-root, .card-pack-root) .journal-stage,
.journal-wrap.is-fullscreen:not(.journey-main) .journal-root:is(.is-closed, .is-rear-cover):not(.gift-pad-root, .card-pack-root, .is-closing-cover, .is-opening-cover, [data-cover-wide]) .journal-stage {
  width: min(calc(100vw - 56px), calc((100vh - 72px) * 446 / 644));
  aspect-ratio: 446 / 644;
}
/* a pad is one portrait sheet, in its own proportions */
.journal-wrap.is-fullscreen:not(.journey-main) :is(.gift-pad-root, .card-pack-root) .journal-stage {
  flex: 0 1 auto;
  width: min(calc(100vw - 56px), calc((100vh - 72px) * var(--pad-ratio, 0.7)));
  max-width: none;
  aspect-ratio: var(--pad-ratio, 0.7);
  height: auto;
  max-height: calc(100vh - 72px);
}
.journal-wrap.is-fullscreen .journal-fs-top {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 70; /* above a scaled stage / writing panel */
}
html.journal-immersive .content { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .journal-wrap { transition: none; }
}
.pen-locked { opacity: .5; }

/* the pen, discreetly: the desktop's caption line, opening to the controls */
.pen-line > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--text-secondary);
}
.pen-line > summary::-webkit-details-marker { display: none; }
.pen-line > summary::after { content: "  ▾"; font-size: 10px; }
.pen-line[open] > summary::after { content: "  ▴"; }
.pen-line > summary:hover { color: var(--text-primary); }
.pen-line .pen-controls {
  margin-top: 8px; background: var(--sheet); border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-card); padding: 12px 16px 14px;
}
.pen-line .pen-controls .setting-label:first-child { margin-top: 0; }

/* Each control carries its icon; on a phone the icons alone, so the row stays one line and the
   book gets the room (the names stay as titles and for screen readers). */
.journal-nav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.journal-nav-jump {
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 13px;
  letter-spacing: -0.04em;
  min-width: 2.5rem;
}
.journal-nav-ico { font-size: 14px; line-height: 1; }
@media (max-width: 600px) {
  .journal-nav-label { display: none; }
  .journal-nav-btn { padding: 0 12px; }
  .journal-nav-ico { font-size: 16px; }
}

/* ═══ cover boards: style and details ═══
   A journal's cover style and details are classes beside its colour vars
   (NotepadCatalog.CoverClasses). They only set custom properties; every drawing of the board
   (.qs-cover-board) reads them, so the shelf, the threshold, the setup sheet and the open
   journal all show the same book. Six layers, always in this order: elastic, sheen, two
   textures, the spine tape, and the dye. The textures lie over the tape, so it reads as
   part of the same board. */
/* Soft paper: a toothy board with fibres caught in it, worn at the corners. */
.cover-style-paper {
  --cover-tex-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E %3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E %3Crect width='180' height='180' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E");
  --cover-tex-a-size: 180px 180px;
  --cover-tex-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cpath d='M57,131 q-5,-3 -2,1' stroke='%23000' stroke-opacity='0.07' stroke-width='0.6' fill='none'/%3E%3Cpath d='M56,239 q1,-1 -0,4' stroke='%23fff' stroke-opacity='0.12' stroke-width='0.9' fill='none'/%3E%3Cpath d='M126,178 q2,-4 3,-5' stroke='%23000' stroke-opacity='0.03' stroke-width='0.9' fill='none'/%3E%3Cpath d='M113,173 q2,4 6,3' stroke='%23000' stroke-opacity='0.05' stroke-width='1.0' fill='none'/%3E%3Cpath d='M211,23 q-3,-1 -6,-3' stroke='%23000' stroke-opacity='0.05' stroke-width='0.8' fill='none'/%3E%3Cpath d='M93,84 q2,4 1,1' stroke='%23000' stroke-opacity='0.07' stroke-width='1.0' fill='none'/%3E%3Cpath d='M161,39 q3,4 6,6' stroke='%23000' stroke-opacity='0.04' stroke-width='0.9' fill='none'/%3E%3Cpath d='M138,68 q-7,5 -7,4' stroke='%23000' stroke-opacity='0.05' stroke-width='0.6' fill='none'/%3E%3Cpath d='M71,185 q-1,-1 6,-5' stroke='%23000' stroke-opacity='0.05' stroke-width='0.9' fill='none'/%3E%3Cpath d='M235,121 q5,-5 8,-2' stroke='%23fff' stroke-opacity='0.08' stroke-width='0.7' fill='none'/%3E%3Cpath d='M147,37 q0,5 -7,4' stroke='%23fff' stroke-opacity='0.09' stroke-width='0.7' fill='none'/%3E%3Cpath d='M125,155 q4,0 2,1' stroke='%23000' stroke-opacity='0.05' stroke-width='0.9' fill='none'/%3E%3Cpath d='M57,72 q-0,-1 8,0' stroke='%23fff' stroke-opacity='0.11' stroke-width='0.5' fill='none'/%3E%3Cpath d='M148,152 q-2,-0 -7,2' stroke='%23fff' stroke-opacity='0.12' stroke-width='0.9' fill='none'/%3E%3Cpath d='M5,15 q1,4 3,6' stroke='%23fff' stroke-opacity='0.09' stroke-width='0.7' fill='none'/%3E%3Cpath d='M75,89 q3,-5 2,-2' stroke='%23fff' stroke-opacity='0.11' stroke-width='0.9' fill='none'/%3E%3Cpath d='M74,53 q2,0 5,-3' stroke='%23fff' stroke-opacity='0.07' stroke-width='0.7' fill='none'/%3E%3Cpath d='M80,200 q-2,3 -1,4' stroke='%23fff' stroke-opacity='0.14' stroke-width='0.7' fill='none'/%3E%3Cpath d='M54,29 q3,-4 0,-4' stroke='%23000' stroke-opacity='0.04' stroke-width='0.9' fill='none'/%3E%3Cpath d='M154,194 q1,-4 -2,-4' stroke='%23fff' stroke-opacity='0.09' stroke-width='0.7' fill='none'/%3E%3Cpath d='M101,98 q7,1 7,-4' stroke='%23fff' stroke-opacity='0.15' stroke-width='0.7' fill='none'/%3E%3Cpath d='M228,223 q-1,2 -4,3' stroke='%23000' stroke-opacity='0.04' stroke-width='0.7' fill='none'/%3E%3Cpath d='M55,16 q-3,2 1,-3' stroke='%23000' stroke-opacity='0.06' stroke-width='1.0' fill='none'/%3E%3Cpath d='M215,216 q-2,-5 1,-6' stroke='%23000' stroke-opacity='0.06' stroke-width='0.8' fill='none'/%3E%3Cpath d='M99,225 q4,-1 2,-2' stroke='%23fff' stroke-opacity='0.13' stroke-width='0.7' fill='none'/%3E%3Cpath d='M47,128 q6,0 5,-4' stroke='%23000' stroke-opacity='0.07' stroke-width='0.5' fill='none'/%3E%3Cpath d='M151,207 q-3,-2 -7,-3' stroke='%23fff' stroke-opacity='0.10' stroke-width='0.9' fill='none'/%3E%3Cpath d='M0,13 q1,1 -6,-5' stroke='%23fff' stroke-opacity='0.07' stroke-width='0.8' fill='none'/%3E%3Cpath d='M76,75 q-2,-2 -2,2' stroke='%23000' stroke-opacity='0.05' stroke-width='0.6' fill='none'/%3E%3Cpath d='M133,172 q-2,-2 -2,-5' stroke='%23fff' stroke-opacity='0.13' stroke-width='0.7' fill='none'/%3E%3Cpath d='M192,150 q1,-1 -1,-2' stroke='%23fff' stroke-opacity='0.12' stroke-width='0.7' fill='none'/%3E%3Cpath d='M59,129 q1,0 3,-5' stroke='%23fff' stroke-opacity='0.14' stroke-width='0.7' fill='none'/%3E%3Cpath d='M215,190 q1,1 -4,-0' stroke='%23fff' stroke-opacity='0.14' stroke-width='0.9' fill='none'/%3E%3Cpath d='M160,176 q-3,-5 1,-5' stroke='%23000' stroke-opacity='0.07' stroke-width='0.5' fill='none'/%3E%3Cpath d='M22,24 q6,-5 6,-4' stroke='%23fff' stroke-opacity='0.14' stroke-width='0.8' fill='none'/%3E%3Cpath d='M201,229 q3,2 1,4' stroke='%23fff' stroke-opacity='0.12' stroke-width='0.6' fill='none'/%3E%3Cpath d='M180,224 q-1,-3 -7,-2' stroke='%23000' stroke-opacity='0.04' stroke-width='0.6' fill='none'/%3E%3Cpath d='M148,181 q-2,-1 -2,-2' stroke='%23fff' stroke-opacity='0.07' stroke-width='0.8' fill='none'/%3E%3Cpath d='M234,99 q4,-1 4,-4' stroke='%23000' stroke-opacity='0.06' stroke-width='0.7' fill='none'/%3E%3Cpath d='M154,215 q1,-2 -6,-5' stroke='%23000' stroke-opacity='0.05' stroke-width='0.9' fill='none'/%3E%3Cpath d='M45,64 q-5,2 -5,1' stroke='%23fff' stroke-opacity='0.15' stroke-width='0.6' fill='none'/%3E%3Cpath d='M169,99 q1,-3 6,1' stroke='%23fff' stroke-opacity='0.10' stroke-width='0.7' fill='none'/%3E%3Cpath d='M41,87 q3,1 -3,3' stroke='%23fff' stroke-opacity='0.11' stroke-width='0.7' fill='none'/%3E%3Cpath d='M200,197 q3,-1 1,-0' stroke='%23000' stroke-opacity='0.07' stroke-width='1.0' fill='none'/%3E%3Cpath d='M112,55 q2,4 -4,3' stroke='%23000' stroke-opacity='0.04' stroke-width='0.6' fill='none'/%3E%3Cpath d='M62,45 q-0,5 3,4' stroke='%23000' stroke-opacity='0.05' stroke-width='0.7' fill='none'/%3E%3C/svg%3E");
  --cover-tex-b-size: 240px 240px;
  --cover-wear: 1;
}
/* Classic cloth: a fine weave, felt more than seen, with a slub where a thread runs thick. */
.cover-style-cloth {
  --cover-tex-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E %3Crect width='2' height='1' fill='%23000' fill-opacity='.05'/%3E%3Crect width='1' height='2' fill='%23fff' fill-opacity='.04'/%3E%3C/svg%3E");
  --cover-tex-a-size: 2px 2px;
  --cover-tex-a-blend: normal;
  --cover-tex-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E %3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01 0.35' numOctaves='2' seed='8' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.4 0 0 0 -1.25'/%3E%3C/filter%3E %3Crect width='200' height='200' filter='url(%23s)' opacity='.09'/%3E%3C/svg%3E");
  --cover-tex-b-size: 200px 200px;
  --cover-sheen: linear-gradient(168deg, rgba(255, 255, 255, .05), transparent 40%);
  --cover-wear: .7;
}
/* Bound leather: tileable height + lighting (see wwwroot/textures/cover-leather-*.svg).
   Like a game material: dual-scale height, warp, diffuse + spec on a fixed key light; the
   cover dye is the albedo, multiplied / overlaid with the lit grain. Sheen sits under grain. */
.cover-style-leather {
  --cover-tex-a: url("../textures/cover-leather-grain.svg");
  --cover-tex-a-size: 320px 320px;
  --cover-tex-a-blend: overlay;
  --cover-tex-b: url("../textures/cover-leather-micro.svg");
  --cover-tex-b-size: 160px 160px;
  --cover-tex-b-blend: multiply;
  --cover-sheen: linear-gradient(145deg, rgba(255, 255, 255, .07) 0%, transparent 40%, transparent 72%, rgba(0, 0, 0, .04) 100%);
  --cover-sheen-blend: soft-light;
  --cover-wear: .52;
}
/* Modern matte: smooth and even — no grain, no gradient across the board, only the soft
   depth of a soft-touch coating at its edges. */
.cover-style-matte {
  --cover-dye-hi: var(--cover-mid);
  --cover-dye-lo: var(--cover-mid);
  --cover-sheen: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 62%, rgba(0, 0, 0, .14) 100%);
  --cover-sheen-blend: normal;
  --cover-wear: .15;
}
/* Bright card: coated, smooth and bright, catching the light in a clear diagonal gloss. */
.cover-style-card {
  --cover-dye-hi: color-mix(in srgb, var(--cover-hi) 78%, #fff);
  --cover-sheen: linear-gradient(118deg, transparent 26%, rgba(255, 255, 255, .36) 42%, rgba(255, 255, 255, .1) 50%, transparent 60%);
  --cover-wear: .2;
}
/* Spine tape: a cloth strip bound over the spine, covering the board's spine edge. */
.tape-linen { --cover-tape: #D9CFB8; --cover-tape-type: #3B342A; }
.tape-black { --cover-tape: #24211E; --cover-tape-type: #E9E2D2; }
.tape-matching {
  --cover-tape: color-mix(in srgb, var(--cover-shade, #3a2a10) 35%, var(--cover, #E8B400));
  --cover-tape-type: var(--cover-type);
}
.has-tape {
  --cover-tape-layer: linear-gradient(to right,
    var(--cover-tape) 0 11%,
    rgba(0, 0, 0, .22) 11% 11.35%, rgba(255, 255, 255, .14) 11.35% 11.7%,
    transparent 11.7%);
}
/* The elastic runs top to bottom near the fore-edge, in a darker cut of the board. */
.has-elastic {
  --cover-band: color-mix(in srgb, var(--cover-shade, #3a2a10) 72%, #111);
  --cover-elastic: linear-gradient(to right,
    transparent 85.5%, rgba(0, 0, 0, .2) 85.5% 86%,
    var(--cover-band) 86% 89.5%,
    rgba(0, 0, 0, .16) 89.5% 90%, transparent 90%);
}
/* Square corners keep a hair of rounding: a board is cut, not stamped. */
.cover-square { --cover-round: .2; }

.qs-cover-board {
  background-color: var(--cover, var(--eco-yellow));
  background-image:
    var(--cover-elastic, none),
    var(--cover-sheen, none),
    var(--cover-tex-a, none),
    var(--cover-tex-b, none),
    var(--cover-tape-layer, none),
    linear-gradient(168deg,
      var(--cover-dye-hi, var(--cover-hi, #F4C62E)) 0%,
      var(--cover-mid, var(--eco-yellow)) 36%,
      var(--cover-mid, var(--eco-yellow)) 68%,
      var(--cover-dye-lo, var(--cover-lo, #D9A40A)) 100%);
  background-size: auto, auto, var(--cover-tex-a-size, auto), var(--cover-tex-b-size, auto), auto, auto;
  background-blend-mode: normal, var(--cover-sheen-blend, soft-light), var(--cover-tex-a-blend, multiply),
    var(--cover-tex-b-blend, normal), normal, normal;
}

/* Leather: paint pebble grain above the sheen (default order buries it). A second relief pass
   on the surface reads at book scale and on the shelf thumbnails. */
.cover-style-leather.qs-cover-board,
.cover-style-leather .qs-cover-board {
  position: relative;
  background-image:
    var(--cover-elastic, none),
    var(--cover-tex-a, none),
    var(--cover-tex-b, none),
    var(--cover-sheen, none),
    var(--cover-tape-layer, none),
    linear-gradient(168deg,
      var(--cover-dye-hi, var(--cover-hi, #F4C62E)) 0%,
      var(--cover-mid, var(--eco-yellow)) 36%,
      var(--cover-mid, var(--eco-yellow)) 68%,
      var(--cover-dye-lo, var(--cover-lo, #D9A40A)) 100%);
  background-size: auto, var(--cover-tex-a-size, auto), var(--cover-tex-b-size, auto), auto, auto, auto;
  background-blend-mode:
    normal,
    var(--cover-tex-a-blend, multiply),
    var(--cover-tex-b-blend, multiply),
    var(--cover-sheen-blend, soft-light),
    normal,
    normal;
}

/* The ribbon marker hangs from the foot of the board. Its parent is positioned. */
.qs-cover-ribbon {
  position: absolute;
  top: calc(100% - 1px);
  left: 64%;
  width: clamp(4px, 5%, 9mm);
  height: clamp(10px, 11%, 24mm);
  background: var(--wax);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  pointer-events: none;
}