/* ═══ Quiet Stanza — the writing desk design system ═══
   Ported from App.xaml. Light theme only: the product is a lit desk. */

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Italic.ttf") format("truetype");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Playwrite NZ";
  src: url("../fonts/PlaywriteNZ.ttf") format("truetype");
  font-weight: 100 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Font Awesome 6 Free";
  src: url("../fonts/fa-solid-900.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

:root {
  /* the writing desk palette */
  --paper: #F3EEE3;
  --sheet: #FBF8EF;
  --sheet-edge: #E2D9C3;
  --ink: #1F2833;
  --ink-soft: #2D3B4C;
  --text-primary: #2B2A24;
  --text-secondary: #6E685A;
  --rule-line: #D9CDB3;
  --margin-red: #C06A50;
  --wax: #A03A26;
  --wax-hover: #86301F;
  --wax-pressed: #6E2818;
  --laurel: #4C7A5B;
  --gold: #A8842C;
  --rail-text: #9AA5B1;
  --chip: #EAE3D0;
  --eco-yellow: #F0BB0C;
  --eco-yellow-type: #8A6A06;
  --eco-yellow-border: #D8A70E;

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  /* the bundled hand; choosing another in Settings overrides these at runtime (qsFont.use) */
  --hand: "Playwrite NZ", "EB Garamond", cursive;
  /* Overridden to "Playwrite NZ Guides" once the server has fetched the tracing face */
  --hand-guides: "Playwrite NZ Guides", "Playwrite NZ", "EB Garamond", cursive;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --rail-width: 118px;
  --radius-card: 6px;
  --radius-sheet: 12px;

  /* ISO 216 A5 notebook twin — physical millimetres (CSS `mm` unit). */
  --a5-w: 148mm;
  --a5-h: 210mm;
  --journal-gutter: 1.5mm;
  --journal-band: 4mm;
  --journal-leaf-top: 2.5mm;
  --journal-margin-x: 11mm;
  --journal-margin-top: 8mm;
  --journal-margin-bottom: 6mm;
  --journal-pagenum-band: 8mm;
  --journal-book-w: calc(var(--a5-w) * 2 + var(--journal-gutter));
  --journal-book-h: calc(var(--journal-band) + var(--a5-h));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--paper);
  color: var(--text-primary);
  font-family: var(--ui);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ═══ type ═══ */
.eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
.page-title {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.1;
}
.section-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.body-text { font-size: 14px; color: var(--text-primary); }
.small { font-size: 12px; color: var(--text-secondary); }
.qs-field {
  width: 100%;
  max-width: 22rem;
  padding: 8px 10px;
  border: 1px solid var(--sheet-edge);
  border-radius: 6px;
  background: var(--sheet);
  color: var(--text-primary);
  font: inherit;
}
.remind-time {
  width: 9.5rem;
  font-variant-numeric: tabular-nums;
}
.serif { font-family: var(--serif); }
.italic { font-style: italic; }

/* ═══ surfaces ═══ */
.note-card {
  background: var(--sheet);
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-card);
  padding: 18px 20px;
}
/* ═══ A5 notebook paper (the sheet itself — fiber + ruling) ═══
   Journal pages, compare digital faces, setup samples, and notebook preview
   all paint with these. --paper-pitch is millimetres × 3 css-px/mm. */
.sheet-ruled,
.paper-dots,
.paper-lines,
.paper-grid {
  --ruling: rgba(120, 105, 75, 0.28);
  --paper-pitch: 5mm;
  --paper-fiber: repeating-linear-gradient(
    102deg,
    transparent 0 3px,
    rgba(140, 120, 80, 0.018) 3px 4px
  );
  background-color: var(--sheet);
  background-repeat: repeat;
}

.paper-dots,
.sheet-ruled.paper-dots {
  background-image:
    var(--paper-fiber),
    radial-gradient(circle, var(--ruling) 1px, transparent 1.15px);
  background-size: auto, var(--paper-pitch) var(--paper-pitch);
  background-position: 0 0, 0 0;
}

.paper-lines,
.sheet-ruled.paper-lines {
  background-image:
    var(--paper-fiber),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--paper-pitch) - 1px),
      var(--ruling) calc(var(--paper-pitch) - 1px),
      var(--ruling) var(--paper-pitch)
    );
  background-size: auto, 100% var(--paper-pitch);
  background-position: 0 0, 0 0;
}

.paper-grid,
.sheet-ruled.paper-grid {
  background-image:
    var(--paper-fiber),
    linear-gradient(to right, var(--ruling) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ruling) 1px, transparent 1px);
  background-size: auto, var(--paper-pitch) var(--paper-pitch), var(--paper-pitch) var(--paper-pitch);
  background-position: 0 0, 0 0, 0 0;
}

.paper-margin,
.sheet-ruled.paper-margin {
  --paper-margin-x: 18mm;
  background-image:
    var(--paper-fiber),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--paper-pitch) - 1px),
      var(--ruling) calc(var(--paper-pitch) - 1px),
      var(--ruling) var(--paper-pitch)
    ),
    linear-gradient(
      to right,
      transparent 0,
      transparent calc(var(--paper-margin-x) - 1px),
      var(--ruling) calc(var(--paper-margin-x) - 1px),
      var(--ruling) var(--paper-margin-x),
      transparent var(--paper-margin-x)
    );
  background-size: auto, 100% var(--paper-pitch), 100% 100%;
  background-position: 0 0, 0 0, 0 0;
}

/* Legacy utility — same as paper-dots at the default pitch. */
.dot-grid {
  --ruling: rgba(120, 105, 75, 0.28);
  --paper-pitch: 5mm;
  background-image:
    radial-gradient(circle, var(--ruling) 1px, transparent 1.15px);
  background-size: var(--paper-pitch) var(--paper-pitch);
  background-repeat: repeat;
  background-position: top left;
}

/* ═══ chips ═══ */
.chip {
  display: inline-block;
  background: var(--chip);
  border-radius: 11px;
  padding: 4px 11px;
  margin: 0 8px 8px 0;
  font-size: 12px;
  color: var(--text-primary);
}
/* a chip that walks somewhere (used by the stacks and the library's wiki strip) */
.chip-link {
  border: none;
  cursor: pointer;
  font-family: var(--ui);
  line-height: 1.4;
}
.chip-link:hover { filter: brightness(0.96); box-shadow: inset 0 0 0 1px rgba(43, 42, 36, .12); }

/* Today meta pills — kind tints from the desk palette */
.chip-time { background: #EFE3C0; color: #5C4A1A; }
.chip-size { background: #E5DDCA; color: #4A4538; }
.chip-day { background: #EBD4C8; color: #6A3A2A; }
.chip-difficulty { background: #D7E4D4; color: #2F4A38; }
.chip-page { background: #DDE3E8; color: #3A4550; }
.chip-era { background: #E6D5B8; color: #5A4324; }
.chip-form { background: #D5E2DF; color: #2F4844; }   /* style / form */
.chip-theme { background: #D8E8D2; color: #2E4A32; }
.chip-mood { background: #EBD8D2; color: #6A3A32; }
.chip-link.chip-theme:hover,
.chip-link.chip-form:hover,
.chip-link.chip-mood:hover,
.chip-link.chip-era:hover { color: var(--wax); }

/* ═══ buttons ═══ */
.btn {
  font-family: var(--ui);
  font-size: 14px;
  border-radius: var(--radius-card);
  padding: 8px 16px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.btn:disabled { opacity: .55; cursor: default; }
.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-with-icon .fa { font-size: 13px; }

.wax-button {
  background: var(--wax);
  color: var(--sheet);
  border-color: transparent;
}
.wax-button:hover:not(:disabled) { background: var(--wax-hover); }
.wax-button:active:not(:disabled) { background: var(--wax-pressed); }

.ghost-button {
  background: transparent;
  border: 1px solid var(--sheet-edge);
  color: var(--text-primary);
}
.ghost-button:hover:not(:disabled) { border-color: var(--text-secondary); }

.link-button {
  background: none;
  border: none;
  color: var(--wax);
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.link-button:hover { color: var(--wax-hover); text-decoration: underline; }

/* ═══ icons (Font Awesome) ═══ */
.fa {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  display: inline-block;
}

/* ═══ inputs ═══ */
.field {
  font-family: var(--ui);
  font-size: 14px;
  background: var(--sheet);
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-card);
  padding: 9px 12px;
  color: var(--text-primary);
  width: 100%;
}
.field:focus { outline: none; border-color: var(--text-secondary); }

/* focus visibility for keyboard users */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ═══ brand mark (handwritten QS) ═══
   One-colour silhouette via mask so ink / sheet / wax fields can tint it.
   Playwrite and other hand fonts remain the *writer's* hand — not brand chrome. */
.qs-mark {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: url("../img/brand/quiet-stanza-mark-black.png") center / contain no-repeat;
  mask: url("../img/brand/quiet-stanza-mark-black.png") center / contain no-repeat;
  vertical-align: middle;
  flex-shrink: 0;
}
.qs-mark-sm {
  -webkit-mask-image: url("../img/brand/quiet-stanza-mark-black.png");
  mask-image: url("../img/brand/quiet-stanza-mark-black.png");
}

.qs-lockup-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: inherit;
}
.qs-lockup-stacked .qs-mark {
  width: 2.4em;
  height: 2.4em;
  margin-bottom: 4px;
}
.qs-lockup-stacked .qs-word {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  line-height: 1.05;
  text-transform: uppercase;
}

/* ═══ boot / authorizing splash ═══ */
.app-boot {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--paper);
  color: var(--text-secondary);
}
.app-boot-mark {
  width: 56px;
  height: 56px;
  color: var(--ink);
}
.app-boot-text {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--wax);
  color: var(--sheet);
  padding: 10px 16px;
  z-index: 1000;
}
#blazor-error-ui .reload { color: var(--sheet); text-decoration: underline; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ═══ page scaffolding ═══ */
.page-wrap { max-width: 900px; margin: 0 auto; padding: 40px 40px 80px; }
.settings-page { max-width: 1080px; }
.library-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.library-head .page-title { max-width: 36rem; }
.section-stub { color: var(--text-secondary); margin-top: 16px; }

/* ═══ shell + nav rail (global: NavLink anchors aren't reached by scoped CSS) ═══ */
.shell { display: grid; grid-template-columns: var(--rail-width) 1fr; height: 100vh; overflow: hidden; }
.rail {
  background: var(--ink);
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: 14px 0 12px;
  overflow-x: hidden; overflow-y: auto;
}
.rail-top, .rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rail-btn {
  width: 108px; min-height: 54px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: color-mix(in srgb, var(--paper) 70%, var(--rail-text));
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
  flex-shrink: 0;
  /* sign-out is a <button>; shed its native chrome so it matches the NavLink anchors */
  background: none; border: none; cursor: pointer; padding: 6px 2px 5px; font-family: inherit;
}
.rail-btn:link, .rail-btn:visited { color: color-mix(in srgb, var(--paper) 70%, var(--rail-text)); }
.rail-btn:hover { color: var(--paper); background: color-mix(in srgb, var(--ink-soft) 65%, transparent); }
.rail-btn.active { background: var(--ink-soft); color: var(--paper); }
.rail-ico {
  width: 22px; height: 22px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.rail-btn .fa { font-size: 16px; line-height: 1; }
.rail-label {
  font-family: var(--ui); font-size: 10px; font-weight: 600; line-height: 1.15;
  letter-spacing: 0.01em; color: inherit; text-align: center;
}
.content { overflow-y: auto; height: 100vh; }
.desk-corner {
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 14px;
}
html.journal-immersive .desk-corner { display: none; }
.desk-streak {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: var(--gold);
  text-decoration: none;
}
.user-mark { position: relative; }
.user-mark-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--wax-pressed) 70%, var(--ink));
  background:
    radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--wax) 55%, white), var(--wax) 58%, var(--wax-pressed));
  color: var(--sheet);
  font-family: var(--serif);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(31, 40, 51, 0.22);
}
.user-mark-btn:hover {
  background:
    radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--wax) 70%, white), var(--wax-hover) 62%, var(--wax-pressed));
}
.user-mark-btn:focus-visible,
.user-mark-out:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.user-mark-btn[aria-expanded="true"] {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--wax);
}
.user-mark-initials {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
}
.user-mark-initials.is-single { font-size: 16px; letter-spacing: 0; }
.user-mark-scrim {
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--rail-width);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}
.user-mark-card {
  position: absolute;
  z-index: 2;
  top: calc(100% + 8px);
  right: 0;
  width: min(260px, calc(100vw - var(--rail-width) - 28px));
  padding: 14px 16px 12px;
  background: var(--sheet);
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 28px rgba(31, 40, 51, 0.14);
}
.user-mark-btn { position: relative; z-index: 2; }
.user-mark-name {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-primary);
}
.user-mark-email {
  margin: 4px 0 12px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.user-mark-email.is-only {
  margin-top: 0;
  font-size: 14px;
  color: var(--text-primary);
}
.user-mark-out { width: 100%; }
.desk-streak:hover { color: color-mix(in srgb, var(--gold) 75%, var(--ink)); }
.desk-streak-count {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
}
.desk-nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 16px;
  padding: 16px 96px 0 28px;
  color: var(--text-primary);
}
.desk-nudge-line {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
}
.desk-nudge-go {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--wax);
  text-decoration: none;
}
.desk-nudge-go:hover { text-decoration: underline; }
.desk-nudge-aside {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--ui);
  font-size: 12px;
  color: var(--text-secondary);
}
.desk-nudge-aside:hover { color: var(--text-primary); }
.desk-nudge-go:focus-visible,
.desk-nudge-aside:focus-visible {
  outline: 2px solid var(--wax);
  outline-offset: 2px;
}
@media (max-width: 560px) {
  .desk-nudge { padding: 12px 16px 0; }
}
.desk-streak-unit {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ═══ tabs ═══ */
.tabs {
  display: flex; flex-wrap: wrap; column-gap: 2px;
  border-bottom: 1px solid var(--sheet-edge); margin: 20px 0 24px;
}
.tab {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: var(--ui); font-size: 13px; color: var(--text-secondary);
  padding: 10px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
}
.tab-ico {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.tab:hover { color: var(--text-primary); }
.tab:focus-visible { outline: 2px solid var(--wax); outline-offset: 2px; }
.tab-active { color: var(--text-primary); border-bottom-color: var(--wax); font-weight: 600; }

/* ═══ settings ═══ */
.settings-section { margin-bottom: 32px; max-width: 620px; }
.settings-section .section-title { margin-bottom: 4px; }
.setting-label {
  display: block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-secondary); margin: 18px 0 8px; font-weight: 600;
}
.option-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.option {
  background: var(--sheet); border: 1px solid var(--sheet-edge); border-radius: var(--radius-card);
  padding: 8px 14px; cursor: pointer; font-family: var(--ui); font-size: 13px; color: var(--text-primary);
}
.option:hover { border-color: var(--text-secondary); }
.option-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hand-journal { max-width: 620px; }
.hand-lead { max-width: 40rem; }
.hand-paper-title { margin-top: 36px; }
.hand-preview {
  font-size: 26px; line-height: 1.7; color: var(--ink);
  background: var(--sheet); border: 1px solid var(--sheet-edge); border-radius: var(--radius-card);
  padding: 14px 18px; margin: 12px 0 4px; max-width: 620px;
}
.hand-preview-plain {
  font-family: Arial, sans-serif; font-size: 11px; line-height: 1.4;
  color: var(--text-secondary); margin: 0 0 4px; max-width: 620px; padding: 0 2px;
}
.hand-grid { max-height: 280px; overflow-y: auto; align-items: flex-start; }
.hand-fetch { color: var(--text-secondary); font-size: 11px; margin-left: 4px; }
.hand-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 7.5em; text-align: left;
}
.hand-option-name { font-size: 13px; }
.hand-option-meta {
  font-size: 11px; color: var(--text-secondary); font-weight: 400; line-height: 1.3;
}
.option-on .hand-option-meta { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.ink-picker { width: 100%; }
.ink-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--sheet-edge); cursor: pointer; padding: 0; }
.ink-swatch:disabled { cursor: default; opacity: .72; }
.ink-on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--gold); }
.slider { width: 100%; max-width: 420px; accent-color: var(--wax); }

/* ═══ master-detail (library) ═══ */
.md-layout { display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: start; }
.md-list { display: flex; flex-direction: column; gap: 2px; max-height: 70vh; overflow-y: auto; }
.md-row {
  text-align: left; background: none; border: none; cursor: pointer; padding: 10px 12px;
  border-radius: var(--radius-card); font-family: var(--ui);
}
.md-row:hover { background: var(--sheet); }
.md-row-on { background: var(--sheet); box-shadow: inset 3px 0 0 var(--wax); }
.md-row-title { font-family: var(--serif); font-size: 16px; color: var(--text-primary); }
.md-row-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.search-bar { display: flex; gap: 10px; align-items: center; margin: 8px 0 4px; flex-wrap: wrap; }
.search-meta { font-size: 12px; color: var(--text-secondary); margin: 6px 0 16px; }

/* ═══ practice ═══ */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 340px; }
.cal-cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; color: var(--text-secondary); }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 3px; background: transparent; }
.cal-dot-on { background: var(--laurel); }
.cal-dot-quote { background: var(--wax, #c4a35a); }
.cal-dot-both {
  background: linear-gradient(135deg, var(--laurel) 50%, var(--wax, #c4a35a) 50%);
}
.ledger-mark { font-size: 8px; margin-right: 6px; vertical-align: middle; }
.ledger-mark-poem { color: var(--laurel); }
.ledger-mark-quote { color: var(--wax, #c4a35a); }
.today-quote-card { margin: 8px 0 4px; padding: 0; }
.cal-today { outline: 1.5px solid var(--ink); border-radius: 6px; }
.cal-future { opacity: .4; }
.cal-head { font-size: 11px; color: var(--text-secondary); text-align: center; }
.ledger-item { padding: 12px 0; border-bottom: 1px solid var(--sheet-edge); }
.gift-find { margin-bottom: 28px; }
.gift-find-lead { margin: 6px 0 10px; max-width: 42rem; }
.gift-find-field { flex: 1; min-width: 12rem; max-width: none; }
.gift-find-stay {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
}
.gift-find-why {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  margin: 6px 0 0;
  max-width: 40rem;
}
.gift-find-means { margin-top: 8px; }
.gift-find-means .chip { margin: 0 6px 0 0; }
.gift-find .option-row { margin-top: 8px; }
.gift-given { margin-bottom: 28px; }
.gift-given-name { font-size: 16px; }
.stars { color: var(--gold); letter-spacing: 2px; }
/* Progress look-back head */
.progress-head { padding: 8px 0 28px; margin-bottom: 28px; border-bottom: 1px solid var(--sheet-edge); }
.progress-head .page-title { margin-top: 10px; }
.sitting-line {
  font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.45;
  color: var(--text-primary); margin: 14px 0 0; max-width: 36rem;
}
.progress-facts { font-size: 12.5px; color: var(--text-secondary); margin: 12px 0 0; letter-spacing: .01em; }

/* Practice desk: retrieve the book (or pad) before Select */
.desk-threshold {
  display: flex; align-items: center; gap: 32px;
  padding: 28px 32px;
}
.desk-threshold-text { min-width: 0; }
.desk-threshold .page-title { margin-top: 10px; font-size: 32px; }
.desk-threshold-ask { font-size: 14px; line-height: 1.5; color: var(--text-primary); margin: 6px 0 0; max-width: 36rem; }
.desk-threshold-book {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  width: 106px; height: 150px; padding: 0 10px; box-sizing: border-box;
  border-radius: 2px 7px 7px 2px;
  background: var(--cover, var(--eco-yellow));
  color: var(--cover-type, var(--eco-yellow-type));
  border: 1px solid var(--cover-border, var(--eco-yellow-border));
  box-shadow: 4px 6px 14px rgba(43, 42, 36, .14);
  text-decoration: none;
  transition: transform .15s ease;
}
.desk-threshold-book:hover, .desk-threshold-book:focus-visible { transform: translateY(-2px); }
.desk-threshold-book-mark { width: 30px; height: 30px; }
.desk-threshold-book-id { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.desk-threshold-book-title {
  font-family: var(--serif); font-weight: 600; font-size: 10.5px; line-height: 1.2; letter-spacing: .04em;
  overflow-wrap: anywhere;
}
.desk-threshold-book-vol { font-family: var(--serif); font-size: 12px; letter-spacing: .08em; }
.desk-threshold-book-ribbon {
  position: absolute; top: -4px; right: 12px; width: 11px; height: 22px;
  background: var(--wax);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  filter: drop-shadow(1px 1px 1px rgba(43, 42, 36, .25));
}
.desk-threshold-pad {
  position: relative; flex: 0 0 auto;
  display: block; width: 106px; height: 150px; text-decoration: none; color: inherit;
  transition: transform .15s ease;
}
.desk-threshold-pad:hover, .desk-threshold-pad:focus-visible { transform: translateY(-2px); }
.desk-threshold-pad-board {
  position: absolute; top: 26px; right: 4px; bottom: 6px; left: 24px;
  border-radius: 2px 5px 5px 2px;
  background: var(--pad-cover, #FF6A00);
  border: 1px solid color-mix(in srgb, var(--pad-board, #C24F00) 70%, #111);
  box-shadow: 4px 6px 12px rgba(43, 42, 36, .14);
}
.desk-threshold-pad-leaf {
  position: absolute; top: 8px; left: 6px; width: 84px; height: 126px;
  display: flex; flex-direction: column;
  background: var(--sheet, #f6f1e6);
  border: 1px solid var(--sheet-edge);
  border-radius: 1px;
  box-shadow: 2px 4px 10px rgba(43, 42, 36, .16);
  transform: rotate(-2deg);
  color: var(--ink);
}
.desk-threshold-pad-stub {
  height: 18px; flex: 0 0 18px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 0 4px;
  background: var(--pad-cover, #FF6A00);
  border-bottom: 1px solid color-mix(in srgb, var(--pad-board, #C24F00) 70%, #111);
  color: #fff;
}
.desk-threshold-pad-stub-mark { width: 10px; height: 10px; }
.desk-threshold-pad-stub-word {
  font-family: var(--serif); font-size: 8px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.desk-threshold-pad-id {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 0 6px 8px; text-align: center;
}
.desk-threshold-pad-no { font-family: var(--ui); font-size: 10px; font-weight: 600; letter-spacing: .12em; }
.desk-threshold-pad-vol { font-family: var(--serif); font-size: 11px; letter-spacing: .06em; }
@media (max-width: 560px) {
  .desk-threshold { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px; }
}
.two-col { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; gap: 28px; }
  .cal-grid { max-width: none; }
}

/* ═══ 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;
}

.journal-wrap { margin-top: 32px; transition: margin .35s ease, 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;
}

/* Immersive journal: same instance, fixed over the shell (rail included). */
.journal-wrap.is-fullscreen {
  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 .journal-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.journal-wrap.is-fullscreen .journal-stage {
  flex: 0 1 auto;
  width: min(calc(100vw - 56px), calc((100vh - 120px) * 892 / 644));
  max-width: none;
  aspect-ratio: 892 / 644;
  height: auto;
  max-height: calc(100vh - 120px);
}
.journal-wrap.is-fullscreen.journal-live .journal-stage {
  width: min(calc(100vw - 56px), calc((100vh - 200px) * 892 / 644));
  max-height: calc(100vh - 200px);
}
.journal-wrap.is-fullscreen .journal-writing-panel {
  position: fixed;
  right: 20px;
  bottom: 16px;
  z-index: 62;
}
.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; }
/* Finish / Abort / reader — bottom-right of the handwriting section while writing. */
.journal-writing-panel {
  position: absolute;
  right: 0;
  bottom: 10px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: min(440px, calc(100% - 16px));
  padding: 10px 12px 12px;
  background: #F2F6F1E6;
  border: 1px solid var(--sheet-edge);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(43, 42, 36, .08);
  backdrop-filter: blur(6px);
}
.journal-writing-panel .journal-writing-actions {
  margin: 0;
  justify-content: flex-end;
}
.journal-writing-panel .reader {
  width: 100%;
}
.journal-writing-panel .reader-controls {
  justify-content: flex-end;
}
.journal-writing-panel .reader-status,
.journal-writing-panel .reader-error {
  text-align: right;
  margin-top: 6px;
}
.journal-writing-panel .reader-preparing {
  max-width: none;
}
@media (prefers-reduced-motion: reduce) {
  .journal-wrap { transition: none; }
}
.session-pen { margin: 12px 0 2px; }
.session-pen .setting-label:first-child { margin-top: 0; }
.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; }

/* ═══ admin ═══ */
.admin-form { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.admin-link { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.progress-rail { height: 6px; border-radius: 3px; background: var(--sheet-edge); overflow: hidden; margin-top: 8px; max-width: 420px; }
.progress-fill { height: 100%; background: var(--laurel); transition: width .4s ease; }
.admin-link .field { font-family: ui-monospace, monospace; font-size: 12px; }
@media (max-width: 700px) { .admin-form { grid-template-columns: 1fr; } }

/* ═══ today ═══
   The poem title is the hero. Page chrome ("Poem of the day" / "Today's poem") stays out.
   Once Begin is pressed, the desk shifts weight to the journal. */
/* One wide desk: card and journal share the content column (not a 700px orphan). */
.page-wrap.today-desk {
  max-width: min(1200px, calc(100vw - var(--rail-width) - 64px));
  padding-left: 32px;
  padding-right: 32px;
}
/* While writing, let the cue + journal use the full content column. */
.page-wrap.today-desk.is-writing {
  max-width: calc(100vw - var(--rail-width) - 48px);
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
}
.today-card { max-width: none; width: 100%; }
.today-desk.is-writing .today-card {
  padding: 14px 22px 12px;
  max-width: none;
  width: 100%;
}
.today-desk.is-writing .cue {
  width: 100%;
  max-width: none;
}
.today-desk.is-writing .cue-line {
  width: 100%;
  max-width: none;
}
.today-desk .journal-stage { max-width: none; }
.today-desk.is-writing .journal-stage {
  /* Viewport window: full width, shorter than the scaled book so translateY can keep the ruler in view. */
  max-width: none;
  width: 100%;
  aspect-ratio: auto;
  /* Fallback width ≈ content column; cqw matches the journal wrap when container queries apply. */
  height: min(68vh, calc((100vw - var(--rail-width) - 96px) * 644 / 892));
  height: min(68vh, calc(100cqw * 644 / 892));
  overflow: hidden;
}
/* Free drag/scale: honour the user's stage size instead of the writing crop. */
.today-desk.is-writing .journal-root.is-framed .journal-stage {
  width: auto;
  max-width: none;
  aspect-ratio: 892 / 644;
  height: auto;
}
.journal-wrap.is-fullscreen .journal-root.is-framed .journal-stage {
  width: auto;
  max-width: none;
  max-height: none;
  height: auto;
  aspect-ratio: 892 / 644;
  flex: 0 0 auto;
}
.rule { border: none; border-top: 1px solid var(--sheet-edge); margin: 18px 0; }

.today-streak { margin: 0; }
.today-eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 10px;
}
.today-pick-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.today-pick-main { min-width: 0; flex: 1; }
.poem-title {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 52px);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.poem-title-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.poem-title-link:hover {
  color: var(--wax);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.today-pick-meta {
  flex: 0 0 auto;
  text-align: right;
  max-width: 42%;
  padding-top: 8px;
}
.today-author {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--text-primary);
  margin: 0;
}
.today-author-link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: inherit;
}
.today-author-link:hover {
  color: var(--wax);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.today-author-inline {
  display: inline;
  width: auto;
  font-size: inherit;
}
.today-writing-id {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0 0 12px;
  line-height: 1.35;
}
.today-writing-id .poem-title-link {
  color: var(--text-primary);
  font-weight: 600;
}
.today-writing-by { color: var(--text-secondary); }
.today-year {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 2px 0 0;
  letter-spacing: 0.04em;
}
.today-card > .today-pick-head {
  margin-bottom: 18px;
}
.today-about {
  font-size: 17px;
  line-height: 1.55;
  margin: 16px 0 0;
  max-width: 54em;
}
.today-desk .option-row .wax-button { min-width: 12em; }

/* Select step: Poem/Quote switch + ask pill */
.sitting-select-tools { margin: 14px 0 0; }
.kind-switch {
  display: inline-flex;
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--sheet);
}
.kind-switch-opt {
  border: none;
  background: transparent;
  padding: 8px 14px;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  line-height: 1.2;
}
.kind-switch-opt + .kind-switch-opt { border-left: 1px solid var(--sheet-edge); }
.kind-switch-opt:hover:not(:disabled):not(.kind-switch-on) { background: color-mix(in srgb, var(--ink) 6%, var(--sheet)); }
.kind-switch-opt:disabled { opacity: .55; cursor: default; }
.kind-switch-on {
  background: var(--ink);
  color: var(--paper);
}
.kind-switch-opt:focus-visible {
  outline: 2px solid var(--laurel);
  outline-offset: -2px;
  z-index: 1;
}
.kind-switch-compact {
  border-radius: 999px;
  flex-shrink: 0;
}
.kind-switch-compact .kind-switch-opt {
  padding: 5px 12px;
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* ── sitting process: Select → Listen → Write (one step open at a time) ── */
.sitting-steps {
  list-style: none;
  margin: 14px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sitting-step {
  position: relative;
  padding: 0 0 10px;
}
.sitting-step:last-child { padding-bottom: 0; }
.sitting-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 34px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--rule-line), transparent 92%);
}
.sitting-step-head {
  display: grid;
  grid-template-columns: 34px minmax(0, auto) minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  border-radius: 6px;
}
.sitting-step-head:hover .sitting-step-title { color: var(--ink-soft); }
.sitting-step-head:focus-visible {
  outline: 2px solid var(--laurel);
  outline-offset: 3px;
}
.sitting-step-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--sheet-edge);
  background: var(--sheet);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.sitting-step-mark > span {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-secondary);
  transition: color .2s ease;
}
.sitting-step.is-ready .sitting-step-mark {
  border-color: var(--laurel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--laurel) 14%, transparent);
}
.sitting-step.is-ready .sitting-step-mark > span { color: var(--laurel); }
.sitting-step.is-active .sitting-step-mark {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent);
}
.sitting-step.is-active .sitting-step-mark > span { color: var(--paper); }
.sitting-step.is-done .sitting-step-mark {
  border-color: color-mix(in srgb, var(--laurel) 55%, var(--sheet-edge));
  background: color-mix(in srgb, var(--laurel) 10%, var(--sheet));
}
.sitting-step.is-done .sitting-step-mark > span { color: var(--laurel); }
.sitting-step-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.sitting-step.is-collapsed .sitting-step-title {
  font-size: 17px;
  color: var(--text-secondary);
  font-weight: 500;
}
.sitting-step-summary {
  justify-self: end;
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sitting-step-detail {
  grid-column: 1 / -1;
  padding: 8px 0 8px 48px;
  overflow: hidden;
}
.sitting-step.is-collapsed .sitting-step-detail {
  display: none;
}
.sitting-step.is-open { padding-bottom: 16px; }
.first-page-lines {
  margin: 4px 0 16px;
  font-family: var(--hand);
  font-size: 1.05rem;
  font-weight: 380;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--ink);
}
.sitting-step-hint {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.sitting-step-actions { margin: 10px 0 0; }
.sitting-autopause { margin: 0; }
.sitting-select-chips {
  margin: 16px 0 0;
  padding-top: 14px;
}
.sitting-step .reader { margin-top: 8px; }
.sitting-step .reader-controls { flex-wrap: nowrap; gap: 8px; }
.sitting-step .reader-controls .btn { white-space: nowrap; }
.sitting-step.is-open .sitting-step-hint { color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .sitting-step-mark,
  .sitting-step-mark > span { transition: none; }
}
.today-picking {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 0 8px;
  min-height: 7em;
}
.today-picking .small {
  margin: 0;
  font-style: italic;
  color: var(--text-secondary);
}
.today-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--sheet-edge);
  border-top-color: var(--laurel);
  border-radius: 50%;
  animation: today-spin 0.85s linear infinite;
}
@keyframes today-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .today-spinner { animation: none; opacity: .55; border-top-color: var(--sheet-edge); }
}
.today-chips-foot {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--sheet-edge);
}
@media (max-width: 560px) {
  .today-pick-head { flex-direction: column; gap: 8px; }
  .today-pick-meta { max-width: none; text-align: left; padding-top: 0; }
  .poem-title { font-size: 34px; }
}

/* nib choices — ink-coloured circles sized by tip */
.nib-row { gap: 10px; }
.nib-swatch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sheet);
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-card);
  padding: 7px 12px 7px 10px;
  cursor: pointer;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--text-primary);
}
.nib-swatch:hover:not(:disabled) { border-color: var(--text-secondary); }
.nib-swatch:disabled { cursor: default; }
.nib-on {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--gold);
}
.nib-dot {
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.nib-dot-0 { width: 8px; height: 8px; }
.nib-dot-1 { width: 11px; height: 11px; }
.nib-dot-2 { width: 14px; height: 14px; }
.nib-dot-3 { width: 18px; height: 18px; }
.nib-label { white-space: nowrap; }
.ink-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}

/* floating corner pills — margins left, weather right — as on the desktop */
.footer-scrim { position: fixed; inset: 0; z-index: 40; }
.footer-anchor {
  position: fixed; bottom: 14px; z-index: 41;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  /* half the content width, so the two corners never collide */
  width: min(420px, calc((100vw - var(--rail-width) - 48px) / 2));
}
.footer-left { left: calc(var(--rail-width) + 16px); }
.footer-right { right: 16px; align-items: flex-end; }
.footer-pill {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: #F2F6F1E6; border: 1px solid var(--sheet-edge); border-radius: 10px;
  padding: 9px 16px 9px 14px; cursor: pointer;
  font-family: var(--ui); text-align: left; color: var(--text-primary);
  box-shadow: 0 4px 18px rgba(43, 42, 36, .08);
  backdrop-filter: blur(6px);
}
.footer-pill:hover { border-color: var(--text-secondary); }
.footer-icon { font-size: 24px; color: var(--text-secondary); flex-shrink: 0; }
.footer-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.footer-main {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.footer-sub {
  font-size: 10.5px; color: var(--text-secondary); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.footer-chev { font-size: 10px; color: var(--text-secondary); margin-left: 2px; flex-shrink: 0; }
.footer-flyout {
  background: var(--sheet); border: 1px solid var(--sheet-edge); border-radius: 10px;
  padding: 14px 16px; width: 100%; min-width: 0;
  box-shadow: 0 12px 32px rgba(43, 42, 36, .18);
  max-height: min(50vh, 360px); overflow-y: auto;
}
.footer-flyout .eyebrow { margin: 0 0 10px; }
.footer-rule { border: none; border-top: 1px solid var(--sheet-edge); margin: 10px 0; }
.wx-row { display: flex; gap: 14px; align-items: flex-start; }
.wx-row .footer-icon { font-size: 26px; margin-top: 2px; }
.wx-row .footer-main, .wx-row .footer-sub { white-space: normal; }
.margin-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.margin-fact { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: start; }
.margin-year {
  font-family: var(--serif); font-size: 13px; color: var(--gold);
  margin-top: 1px;
}
.margin-body { font-size: 12.5px; color: var(--text-primary); line-height: 1.4; }
.margin-body .link-button { font-size: 12.5px; text-align: left; }
.margin-lib { color: var(--text-secondary); }
@media (max-width: 640px) {
  .footer-left { left: 10px; }
  .footer-right { right: 10px; }
  .footer-icon { font-size: 20px; }
  .footer-main { font-size: 11px; }
  .footer-sub { font-size: 10px; }
}

/* the feedback sheet */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(43, 42, 36, .35);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.sheet {
  background: var(--sheet);
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-sheet);
  box-shadow: 0 18px 48px rgba(43, 42, 36, .25);
  padding: 26px 28px;
  width: min(560px, 100%);
  max-height: 86vh;
  overflow-y: auto;
}

/* ═══ writing setup (Let's get setup) ═══ */
.setup-sheet { width: min(480px, 100%); }
.setup-sample {
  --setup-sz: 24.9px;
  --setup-pitch: 42.9px;
  position: relative;
  margin: 16px 0 4px;
  padding: 14px 16px 26px;
  background: var(--sheet);
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-card);
  color: var(--setup-ink, var(--ink));
  min-height: 7.5rem;
}
/* Notebook paper under the sample (same ruling as the journal). Guides hide the grid. */
.setup-sample.sheet-ruled {
  /* Align a rule/dot row under the first baseline, like the A5 content inset. */
  background-position:
    0 0,
    0 calc((var(--setup-pitch) - var(--setup-sz)) / 2 + var(--setup-sz) * 0.8);
}
.setup-sample.sheet-ruled.paper-grid {
  background-position:
    0 0,
    0 calc((var(--setup-pitch) - var(--setup-sz)) / 2 + var(--setup-sz) * 0.8),
    0 calc((var(--setup-pitch) - var(--setup-sz)) / 2 + var(--setup-sz) * 0.8);
}
.setup-sample.cue-guides {
  background-image: none;
  background-color: var(--sheet);
}
.setup-sample-text {
  margin: 0;
  font-size: var(--setup-sz);
  line-height: var(--setup-pitch);
  font-weight: 300;
  white-space: pre-wrap;
}
.setup-sample.cue-guides .setup-sample-text { font-family: var(--hand-guides); }
.setup-sample:not(.cue-guides) .setup-sample-text { font-family: var(--hand); }
/* Settings → Your hands: preview a catalogue face without swapping the journal --hand. */
.setup-sample.learning-sample .setup-sample-text {
  font-family: var(--learning-hand, var(--hand));
}
.learning-hand-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: start;
  max-width: 920px;
  margin-top: 28px;
}
.learning-hand-preview { position: sticky; top: 16px; }
.learning-hand-preview .setup-sample { margin-top: 8px; max-width: none; }
.learning-hand-meta { margin: 8px 0 0; }
.learning-hand-desc {
  margin: 6px 0 0;
  max-width: 28rem;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.45;
}
.learning-chip-row {
  margin-top: 8px;
  max-height: min(52vh, 420px);
}
.learning-list-block {
  margin-top: 22px;
  max-width: 920px;
  padding: 14px 16px 16px;
  background: var(--sheet);
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-card);
}
.learning-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.learning-list-chips { margin-top: 4px; }
.learning-empty {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 36em;
}
.learn-plus-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  height: 1.35em;
  padding: 0 0.2em;
  border-radius: 4px;
  border: 1px solid var(--sheet-edge);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  vertical-align: -0.1em;
}
.learn-plus-hint.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.learn-chip {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
}
.learn-chip-body {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  min-width: 7em;
}
.learn-chip-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1em;
  padding: 0 0.55em;
  margin: 0;
  border: 1px solid var(--sheet-edge);
  border-left: none;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.learn-chip-toggle:hover:not(:disabled) {
  background: color-mix(in srgb, var(--wax) 18%, var(--paper));
  border-color: var(--text-secondary);
}
.learn-chip-toggle:disabled { opacity: .55; cursor: default; }
.learn-chip-toggle.is-on,
.learn-chip.is-learning .learn-chip-toggle {
  background: var(--wax);
  border-color: var(--wax);
  color: var(--paper);
}
.learn-chip.is-learning .learn-chip-toggle:hover:not(:disabled) {
  background: var(--wax-hover, var(--wax));
  border-color: var(--wax-hover, var(--wax));
}
.learn-chip.is-preview:not(.is-learning) .learn-chip-toggle {
  border-color: var(--ink);
}
.learn-chip .learn-chip-body.option-on {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* Skill-level cards (Settings → Your hands, and Your hand page). */
.mastery-board { max-width: 960px; margin-top: 32px; }
.mastery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.mastery-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; padding: 16px 16px 14px;
  background: var(--sheet); border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-card); cursor: pointer;
  font-family: var(--ui); color: var(--text-primary);
  transition: border-color .12s ease, background .12s ease;
}
.mastery-card:hover { border-color: var(--text-secondary); }
.mastery-card.is-on {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.mastery-hand { font-family: var(--serif); font-size: 18px; line-height: 1.25; }
.mastery-role {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-secondary);
}
.mastery-card.is-on .mastery-role {
  color: color-mix(in srgb, var(--paper) 70%, transparent);
}
.mastery-level { margin-top: 6px; font-size: 14px; font-weight: 600; }
.mastery-pips { display: flex; gap: 5px; margin: 4px 0 2px; }
.mastery-pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
}
.mastery-pip.is-lit { background: var(--gold); }
.mastery-card.is-on .mastery-pip {
  background: color-mix(in srgb, var(--paper) 28%, transparent);
}
.mastery-card.is-on .mastery-pip.is-lit { background: var(--eco-yellow, var(--gold)); }
.mastery-stats { font-size: 12px; color: var(--text-secondary); line-height: 1.35; }
.mastery-card.is-on .mastery-stats {
  color: color-mix(in srgb, var(--paper) 72%, transparent);
}
@media (max-width: 780px) {
  .learning-hand-layout { grid-template-columns: 1fr; }
  .learning-hand-preview { position: static; }
}
.setup-sample-note {
  position: absolute;
  right: 10px;
  bottom: 6px;
  font-family: var(--ui);
  font-size: 10px;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  pointer-events: none;
  user-select: none;
}
.setup-hand { width: 100%; max-width: none; margin-bottom: 4px; }
.setup-hand-desc {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.45;
}
.setup-status { margin: 4px 0 0; }
.setup-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 12px 0 4px;
}
.setup-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}
.setup-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--wax);
  cursor: pointer;
}
.setup-actions { margin-top: 14px; }
.star-button {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  font-size: 26px; line-height: 1; color: var(--sheet-edge);
}
.star-button.star-on { color: var(--gold); }
.reflect-question {
  margin: 4px 0 0;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--ink);
}
.reflect-question.reflect-loading {
  font-family: inherit;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-secondary);
}
.reflect-field {
  width: 100%;
  resize: vertical;
  min-height: 4.5em;
  font-family: inherit;
}
.reflect-hint { margin: 8px 0 0; }

/* Finish: reflection is for the physical journal — tuck the digital twin away. */
.journal-wrap.journal-aside {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ═══ done writing — cue gives way to Finish ═══ */
.cue-finish {
  margin: 28px 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.cue-finish-note {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--text-secondary);
}
.cue-finish-btn {
  min-width: 10em;
  font-size: 16px;
  padding: 12px 28px;
}

/* ═══ the writing cue ═══ */
.cue {
  --cue-sz: 72px;
  margin: 18px 0 6px;
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.cue-body { flex: 1; min-width: 0; }
.cue-line {
  /* the cue is what you copy from, so it may carry the tracing guides.
     Size is interactive via the far-right slider (--cue-sz). */
  font-family: var(--hand);
  font-size: var(--cue-sz);
  line-height: 1.55;
  color: var(--ink);
  text-align: center;
  min-height: 1.55em;
  padding: 0 8px;
  white-space: pre-wrap;
}
.cue-guides .cue-line { font-family: var(--hand-guides); }
.cue-word { transition: opacity .2s ease, color .12s ease; }
.cue-said { opacity: 1; }
.cue-coming { opacity: .28; }
.cue-word.lit { color: var(--wax); }
/* yellow wash behind capitals — catches the eye for proper nouns and openings */
.cue-cap {
  background: color-mix(in srgb, var(--eco-yellow) 55%, transparent);
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.04em;
}
/* Vertical cue-size control — big A / slider / small A. The range is a
   horizontal input rotated in a fixed track box (more reliable than writing-mode). */
.cue-size-rail {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 28px;
  min-height: 8.5rem;
  margin: 2px 0 2px 2px;
  color: var(--text-secondary);
}
.cue-size-mark {
  font-family: var(--hand), var(--serif);
  font-weight: 500;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.cue-size-lg { font-size: 16px; opacity: .72; }
.cue-size-sm { font-size: 10px; opacity: .55; }
.cue-size-track {
  flex: 1 1 auto;
  position: relative;
  width: 22px;
  min-height: 5.5rem;
  container-type: size;
}
.cue-size {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Track height becomes the slider length after the -90° rotate. */
  width: max(5.5rem, 100cqh);
  height: 22px;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
  appearance: none;
  background: transparent;
  cursor: pointer;
  accent-color: var(--ink);
}
.cue-size::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--sheet-edge) 80%, var(--ink));
}
.cue-size::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border-radius: 50%;
  border: 1px solid var(--sheet-edge);
  background: var(--sheet);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 16%, transparent);
}
.cue-size::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--sheet-edge) 80%, var(--ink));
}
.cue-size::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 1px solid var(--sheet-edge);
  border-radius: 50%;
  background: var(--sheet);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 16%, transparent);
}
.cue-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.cue-speaker {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--sheet-edge); background: var(--sheet);
  color: var(--text-primary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cue-speaker:hover { border-color: var(--text-secondary); }
.cue-speaker.cue-muted { color: var(--text-secondary); opacity: .6; }
.cue-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}
.cue-nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: transparent; cursor: pointer;
  color: var(--text-secondary); font: inherit; font-size: 12px;
  padding: 4px 6px; border-radius: 4px;
}
.cue-nav-btn:hover:not(:disabled) { color: var(--text-primary); background: color-mix(in srgb, var(--sheet-edge) 45%, transparent); }
.cue-nav-btn:disabled { opacity: .35; cursor: default; }
.cue-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6em; height: 1.55em; padding: 0 0.45em;
  border: 1px solid var(--sheet-edge);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--sheet);
  color: var(--text-primary);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}

/* ═══ the reader ═══ */
.reader-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.reader-status { margin: 10px 0 0; min-height: 1.2em; }
.reader-error { color: var(--wax); margin: 6px 0 0; }
.reader-eyes-free { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sheet-edge); }
.reader-preparing { width: 100%; max-width: 420px; }
.reader-preparing .reader-progress { margin-top: 8px; max-width: none; }
.reader-transport {
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--sheet-edge); background: var(--sheet);
  color: var(--text-primary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.reader-transport:hover { border-color: var(--text-secondary); }
.reader-transport.is-paused { border-color: var(--wax); color: var(--wax); }
@media (prefers-reduced-motion: reduce) {
  .reader-progress .progress-fill { transition: none; }
}
.voice-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.voice-status { margin: 8px 0 0; min-height: 1.2em; }
.voice-heard { font-family: var(--serif); font-style: italic; color: var(--wax); }
.voice-training { margin-top: 12px; max-width: 620px; }
.voice-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.voice-count { color: var(--text-secondary); font-size: 12px; margin-left: 6px; }

/* ProceduralInk overlay: canvas on the leaf; webfont stays for layout, a11y, karaoke gold. */
canvas.j-ink,
canvas.cj-ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.page.has-ink .j-date,
.page.has-ink .j-title,
.page.has-ink .j-author,
.page.has-ink .j-line,
.page.has-ink .cj-h-date,
.page.has-ink .cj-h-title,
.page.has-ink .cj-h-author,
.page.has-ink .cj-line {
  color: transparent;
  position: relative;
  z-index: 2;
}
.page.has-ink .j-word { color: transparent; }
.page.has-ink .j-word.lit { color: var(--wax); }