/* craft.css
   Craft and polish foundation (first slice of the craft pass). Built engine/token
   level once so all four packs inherit it. Everything here is gated by body.craft
   (added on boot; set localStorage ths-craft=off to disable) so the whole layer can
   be turned off per build. Purely presentational: it changes size, rhythm, depth and
   press feedback, never colours or contrast, so WCAG AA is untouched. Every motion is
   neutralised by the global reduced-motion rules (and explicitly below).

   Covers: 11 (modular type scale + vertical rhythm), 13 (max reading measure),
   20 (elevation tokens + hierarchy), 27 (primary/secondary/tertiary action
   vocabulary), 31 (livelier button press feedback). Later slices layer on top. */

:root {
  /* 20: an elevation scale so surfaces can express hierarchy consistently. */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.20), 0 2px 8px rgba(0, 0, 0, 0.16);
  --elev-2: 0 1px 2px rgba(0, 0, 0, 0.24), 0 10px 26px rgba(0, 0, 0, 0.30);
  --elev-3: 0 2px 6px rgba(0, 0, 0, 0.28), 0 18px 44px rgba(0, 0, 0, 0.42);
  /* 13: a comfortable maximum line length for running prose. */
  --measure: 64ch;
  --lh-tight: 1.15;
  --lh-body: 1.55;
}

/* 11: apply the modular scale (--fs-* from main.css) to the shared headings with a
   tight display rhythm, so every screen shares one vertical rhythm instead of the
   browser defaults. Class-level rules (e.g. .saga-scene-title) still win, so bespoke
   titles are unaffected. */
body.craft h1 { font-size: var(--fs-2xl); line-height: var(--lh-tight); }
body.craft h2 { font-size: var(--fs-xl); line-height: var(--lh-tight); }
body.craft h3 { font-size: var(--fs-lg); line-height: 1.25; }
body.craft p { line-height: var(--lh-body); }

/* 13: cap the width of running narration/tutorial prose so lines stay comfortable on
   large phones and tablets. Left aligned (not centred), so short panels are unchanged;
   only very wide blocks are reined in. */
body.craft .narration-text,
body.craft .tut-text { max-width: var(--measure); }
/* A reusable measure utility for any prose block a screen wants to constrain. */
.measure { max-width: var(--measure); }

/* 31: livelier, more tactile press feedback on the shared action buttons. The base
   rules already dip the button on :active; craft adds a small scale so a tap feels
   physical. Reduced motion removes the scale (below + the global motion-safety rules). */
body.craft .btn-amber,
body.craft .btn-complete,
body.craft .btn-primary,
body.craft .btn-secondary {
  transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, filter var(--motion-fast) ease;
}
body.craft .btn-amber:active,
body.craft .btn-complete:active,
body.craft .btn-primary:active,
body.craft .btn-secondary:active { transform: translateY(1px) scale(0.985); }

/* 27: one consistent action vocabulary. Primary = the single loud call to action;
   secondary = a supporting outline; tertiary = a quiet text action. Screens that are
   button-heavy (e.g. the GPS gate) adopt these with progressive disclosure so only
   one primary shows at a time. Colour roles come from the themed tokens, so these
   restyle per pack automatically. */
.btn-primary,
.btn-secondary,
.btn-tertiary {
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: var(--radius-md, 12px);
  cursor: pointer;
  min-height: var(--tap);
  padding: 14px 18px;
  font-size: var(--fs-md, 16px);
  transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, filter var(--motion-fast) ease, background var(--motion-fast) ease;
}
.btn-primary {
  border: none;
  color: #2a1a00;
  background: linear-gradient(180deg, var(--gold-bright), var(--amber));
  box-shadow: var(--elev-2);
}
.btn-primary:hover { filter: brightness(1.04); }
.btn-secondary {
  color: var(--on-surface, var(--cream));
  background: transparent;
  border: 2px solid var(--primary, var(--gold));
}
.btn-secondary:hover { background: rgba(201, 168, 76, 0.12); }
.btn-tertiary {
  border: none;
  background: transparent;
  color: var(--on-surface, var(--cream));
  min-height: 44px;
  font-weight: 600;
  opacity: 0.85;
}
.btn-tertiary:hover { opacity: 1; text-decoration: underline; }
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-tertiary:focus-visible { outline: 3px solid var(--gold, #c9a84c); outline-offset: 2px; }

/* 28: a gentle page transition on each screen mount (a short fade + slight rise), so
   navigating between screens feels continuous instead of popping. One-shot, retriggered
   per navigation from showScreen(). Reduced motion shows the screen with no movement. */
body.craft #screen.screen-enter { animation: screen-enter var(--motion-base) ease both; }
@keyframes screen-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
body.reduce-motion #screen.screen-enter { animation: none; }
@media (prefers-reduced-motion: reduce) { #screen.screen-enter { animation: none; } }

/* Motion safety: hold the press scale still for reduced motion (OS preference or the
   in-app Calm/Easy toggle), on top of the global duration clamp. */
body.reduce-motion .btn-amber:active,
body.reduce-motion .btn-complete:active,
body.reduce-motion .btn-primary:active,
body.reduce-motion .btn-secondary:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .btn-primary:active, .btn-secondary:active { transform: none; }
}

/* Accessibility statement (backlog #48). Read-only informational panel. */
.a11y-statement { max-width: 680px; margin: 0 auto; padding: 4px 2px 40px; }
.a11y-statement-title { font-family: var(--font-head); color: var(--gold-bright, #ffe08a); margin: 8px 0 6px; }
.a11y-statement-sub { font-family: var(--font-head); color: var(--gold, #c9a84c); margin: 20px 0 6px; }
.a11y-statement-lead, .a11y-statement-body { color: var(--on-surface, var(--cream)); line-height: 1.55; margin: 0 0 12px; }
.a11y-commit { padding: 10px 0; border-top: 1px solid rgba(201, 168, 76, 0.2); }
.a11y-commit:first-child { border-top: none; }
.a11y-commit-head { font-weight: 700; color: var(--gold-bright, #ffe08a); margin-bottom: 2px; }
.a11y-commit-body { color: var(--muted, #cdd6ef); line-height: 1.5; }

/* Storage and downloads utility (offline-depth #100). */
.storage-info { max-width: 640px; margin: 0 auto; padding: 4px 2px 40px; }
.storage-title { font-family: var(--font-head); color: var(--gold-bright, #ffe08a); margin: 8px 0 4px; }
.storage-note { color: var(--muted, #cdd6ef); font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.storage-figure { font-size: 22px; font-weight: 700; color: var(--on-surface, var(--cream)); }
.storage-bar { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin: 8px 0; }
.storage-bar-fill { height: 100%; background: linear-gradient(90deg, var(--sky, #4a90d9), var(--gold, #c9a84c)); border-radius: 999px; transition: width var(--motion-base, 0.3s) ease; }
.storage-sub { color: var(--muted, #cdd6ef); font-size: 13px; margin: 2px 0; }
.storage-clear { margin-top: 16px; }

/* GM day-script cheat sheet (Game Master pass #48). Read-only reference; high contrast
   and large text for field use. Not craft-flag gated. */
.gm-script { max-width: 760px; margin: 0 auto; padding: 4px 2px 40px; }
.gm-script-title { font-family: var(--font-head); color: var(--gold-bright, #ffe08a); margin: 8px 0 4px; }
.gm-script-note { color: var(--muted, #cdd6ef); font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.gm-script-empty { color: var(--muted, #cdd6ef); }
.gm-day { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(201, 168, 76, 0.4); border-left: 6px solid var(--gold, #c9a84c); border-radius: var(--radius-md, 12px); padding: 12px 14px; margin: 0 0 14px; }
.gm-day-head { font-family: var(--font-head); color: var(--gold, #c9a84c); margin: 0 0 6px; font-size: 18px; }
.gm-hook { color: var(--on-surface, var(--cream)); font-style: italic; margin: 0 0 10px; line-height: 1.5; }
.gm-beat { padding: 7px 0; border-top: 1px solid rgba(201, 168, 76, 0.18); }
.gm-beat:first-of-type { border-top: none; }
.gm-beat-type { display: inline-block; min-width: 78px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #2a1a00; background: var(--gold, #c9a84c); border-radius: 999px; padding: 2px 8px; margin-right: 8px; }
.gm-beat-type.type-choice { background: var(--sky, #4a90d9); color: #fff; }
.gm-beat-type.type-lookaround { background: var(--forest, #2d7a2d); color: #fff; }
.gm-beat-title { color: var(--on-surface, var(--cream)); font-weight: 700; }
.gm-beat-prompt { color: var(--on-surface, var(--cream)); margin: 6px 0 4px; line-height: 1.5; }
.gm-opts { margin: 4px 0 2px; padding-left: 20px; color: var(--muted, #cdd6ef); }
.gm-opts li { margin: 2px 0; }
.gm-question { margin-top: 10px; padding: 10px 12px; background: rgba(74, 144, 217, 0.12); border: 1px solid rgba(74, 144, 217, 0.4); border-radius: var(--radius-sm, 8px); }
.gm-q-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sky, #4a90d9); font-weight: 700; }
.gm-q-prompt { color: var(--on-surface, var(--cream)); margin: 3px 0; line-height: 1.5; }
.gm-q-answer { color: var(--gold-bright, #ffe08a); font-weight: 700; margin-top: 4px; }

/* 127: print styles (not craft-flag gated - printing should always be clean). When a
   family prints a keepsake or certificate (Ctrl/Cmd+P), drop the app chrome and dark
   backgrounds so only the content prints, on white. Conservative: it hides the frame
   and overlays but never the screen content (canvas, images, text), so it cannot blank
   the very thing being printed. Use .no-print / .print-only for finer control. */
.print-only { display: none; }
@media print {
  .app-header, .narration-layer, #toast, .narration-sound, .a2hs-card,
  .update-banner, .sync-indicator, .volume-popover, .ptr-indicator,
  .sparkle-shower, .atmos-field, .no-print { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  #screen { padding: 0 !important; }
  #screen canvas, #screen img { max-width: 100% !important; height: auto !important; }
  .print-only { display: revert !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none !important; }
}