/* ============================================================================
   style.css — page-specific styles for Hero Tales.

   The shared design language lives in shell.css and is loaded first: tokens,
   app bar, "For today" feed, row tiles, chips, modal. This file carries the
   tradition palette and the three things that are peculiar to this app —
   the story reader, campfire mode, and the shelf-keeper.
   ========================================================================= */

:root {
  /* Local aliases onto the shared tokens in shell.css, kept so the older
     markup keeps working. Do not introduce new colours here. */
  --cream: var(--paper);
  --cream-2: var(--paper-warm);
  --muted: var(--ink-mute);
  --amber: var(--sun-deep);
  --amber-2: var(--sun-hot);
  --gold-warm: var(--gold);

  /* Tradition accents (paired: deep / glow) */
  --t-greek-1: #1E3A8A;   --t-greek-2: #2563EB;
  --t-roman-1: #991B1B;   --t-roman-2: #DC2626;
  --t-english-1: #14532D; --t-english-2: #16A34A;
  --t-scottish-1: #5B21B6;--t-scottish-2: #8B5CF6;
  --t-norse-1: #075985;   --t-norse-2: #0EA5E9;
  --t-frankish-1: #831843;--t-frankish-2: #DB2777;
  --t-french-1: #1E40AF;  --t-french-2: #3B82F6;
  --t-italian-1: #9A3412; --t-italian-2: #EA580C;
  --t-swiss-1: #B91C1C;   --t-swiss-2: #EF4444;
  --t-arabian-1: #065F46; --t-arabian-2: #10B981;
  --t-asian-1: #115E59;   --t-asian-2: #14B8A6;
  --t-american-1: #1E3A8A;--t-american-2: #60A5FA;
  --t-european-1: #44403C;--t-european-2: #78716C;
  --t-mixed-1: #57534E;   --t-mixed-2: #A8A29E;
  --t-fable-1: #65A30D;   --t-fable-2: #84CC16;
  --t-celtic-1: #047857;  --t-celtic-2: #059669;
  --t-medieval-1: #7C2D12;--t-medieval-2: #C2410C;
}

body { min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); }
a { color: var(--sun-hot); text-decoration: none; }
a:hover { color: var(--pink); text-decoration: underline; }

/* ============================================================ Shelf switch */

.shelf-switch { display: flex; gap: .5em; margin: 0 0 22px; flex-wrap: wrap; }
.shelf-btn {
  flex: 1 1 auto;
  cursor: pointer;
  font: 800 .88em var(--sans);
  color: var(--ink-soft);
  background: var(--paper-card);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: .62em 1.1em;
  box-shadow: 0 2px 4px rgba(60, 45, 20, .06);
  transition: transform .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.shelf-btn:hover { border-color: var(--gold); }
.shelf-btn:active { transform: scale(.97); }
.shelf-btn.active {
  color: #fff;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

/* A standing note at the head of the ledger shelf — the one place in the app
   where the reader is told how to read what follows. */
.ledger-warning {
  margin: 0 0 22px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--paper-card);
  border: 1.5px solid var(--rule);
  border-left: 5px solid var(--shelf-ledger-c);
  font-size: .93em;
  line-height: 1.55;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.ledger-warning b { color: var(--ink); }

/* ============================================================== Story list */

.list-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: .7em;
}
.list-header .tile-section-title { margin: 0; }
.sort-select {
  font: 700 .82em var(--sans);
  color: var(--ink-soft);
  background: var(--paper-card);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: .5em .8em;
  cursor: pointer;
}

.story-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5em; }
.story-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--paper-card);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .15s ease;
}
.story-item::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 14px;
  padding: 1.5px;
  background: linear-gradient(120deg, var(--c1, var(--rule)), var(--c2, var(--rule)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .55;
}
.story-thumb {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--c1, var(--rule)), var(--c2, var(--rule)));
}
.story-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-item a { flex: 1; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; }
.story-item:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(60, 45, 20, .13); }
.story-time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.story-trad-pill {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: linear-gradient(120deg, var(--c1), var(--c2));
  color: #fff; white-space: nowrap;
}

/* ========================================================== Story toolbar */

.story-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 16px 10px; /* body already clears the status-bar strip */
  max-width: 760px; margin: 0 auto;
}
.tb-link {
  font: 800 13px var(--sans);
  color: var(--ink-soft);
  background: var(--paper-card);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: .5em 1em;
  text-decoration: none;
}
.tb-link:hover { text-decoration: none; border-color: var(--gold); }
.tb-actions { display: flex; gap: 8px; }
.voice-toggle, .campfire-btn {
  font: 700 12.5px var(--sans);
  color: var(--ink-soft);
  background: var(--paper-card);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: .5em .95em;
  cursor: pointer;
}
.voice-toggle:hover, .campfire-btn:hover { border-color: var(--gold); color: var(--gold-deep); }
.voice-toggle.echo { border-color: var(--gold); color: var(--gold-deep); }
.campfire-btn[aria-pressed="true"] {
  background: var(--grad-sun);
  color: #fff; border-color: transparent;
}
.voice-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  font: 700 13.5px var(--sans); color: #fff;
  background: rgba(42, 37, 32, .93);
  padding: .6em 1.1em; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
}

/* =========================================================== Story reader */

.story-main { max-width: 680px; margin: 0 auto; padding: 20px 24px 120px; }

.story-tradition {
  display: inline-block;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: linear-gradient(120deg, var(--c1, var(--gold)), var(--c2, var(--gold-deep)));
  color: #fff;
  margin-bottom: 14px;
}
.story-title {
  font-size: clamp(30px, 5.5vw, 44px);
  font-weight: 900; letter-spacing: -.025em; line-height: 1.1;
  margin: 0 0 10px; color: var(--ink);
}
.story-meta { font-size: 14px; color: var(--muted); margin-bottom: 28px; }
.story-body { font-size: 18px; line-height: 1.7; color: var(--ink); }
.story-body p { margin: 0 0 1em; }
.story-body p:first-of-type::first-letter {
  font-size: 3.2em; font-weight: 800; float: left; line-height: .85;
  padding: 4px 8px 0 0; color: var(--amber);
}
.story-source {
  margin-top: 36px; padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--muted); font-style: italic;
}

.story-controls {
  display: flex; gap: 10px; margin-top: 36px;
  flex-wrap: wrap; justify-content: center;
  position: sticky;
  bottom: max(16px, env(safe-area-inset-bottom));
  padding-top: 12px;
}
.ctrl-btn {
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  font: 700 15px var(--sans);
  cursor: pointer; border: none;
  background: var(--paper-card); color: var(--ink);
  box-shadow: 0 4px 12px rgba(122, 86, 36, .14);
  text-decoration: none;
  display: inline-flex; align-items: center; text-align: center;
}
.ctrl-btn.primary { background: var(--grad-sky-app); color: #fff; box-shadow: 0 4px 13px rgba(46, 132, 189, .32); }
.ctrl-btn.ghost { background: var(--paper-card); border: 1.5px solid var(--rule); box-shadow: none; }
.ctrl-btn.speaking { background: var(--grad-sun); color: #fff; }

/* ================================================== Chronicle-only pieces */

/* The chronicles carry two blocks a story never does. They are set apart on
   purpose: the cost is not an appendix to be skimmed past, and the reckoning
   is the only editorialising the app allows itself. */

.chronicle-kicker {
  font-size: 1.06em; font-weight: 700; line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.chronicle-cost, .chronicle-reckoning {
  margin-top: 26px;
  padding: 15px 17px;
  border-radius: var(--radius-md);
  background: var(--paper-card);
  box-shadow: var(--shadow-sm);
  border-left: 5px solid var(--c2, var(--gold-deep));
  font-size: .96em; line-height: 1.6;
}
.chronicle-cost { border-left-color: #8C2F39; }
.chronicle-reckoning { border-left-color: var(--gold-deep); background: var(--paper-warm); }
.chronicle-cost p, .chronicle-reckoning p { margin: 0; color: var(--ink-soft); }
.cr-label {
  font: 800 .68rem var(--sans);
  letter-spacing: .11em; text-transform: uppercase;
  margin-bottom: .45em;
  color: var(--ink-mute);
}
.chronicle-cost .cr-label { color: #8C2F39; }
.chronicle-reckoning .cr-label { color: var(--gold-dark); }

/* ========================================================= Campfire mode */

body.campfire {
  background:
    radial-gradient(ellipse at top, rgba(232, 138, 60, .22), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(255, 196, 122, .18), transparent 60%),
    #FFF6E4;
}
body.campfire .appbar { display: none; }
body.campfire .story-toolbar { background: transparent; border-bottom: none; }
body.campfire .story-main { padding: 24px 28px 140px; }
body.campfire .story-title { font-size: clamp(38px, 7vw, 56px); text-align: center; }
body.campfire .story-tradition,
body.campfire .story-meta,
body.campfire .story-source {
  text-align: center; display: block; margin-left: auto; margin-right: auto;
}
body.campfire .story-body { font-size: 22px; line-height: 1.75; max-width: 640px; margin: 0 auto; }
body.campfire .story-body p:first-of-type::first-letter { font-size: 4em; }

/* ========================================================= Shelf-keeper */

.keeper-bar { display: flex; gap: .5em; margin: 0 0 20px; }
.keeper-tab {
  flex: 1;
  cursor: pointer;
  font: 800 .86em var(--sans);
  color: var(--ink-soft);
  background: var(--paper-card);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: .62em 1em;
  box-shadow: 0 2px 4px rgba(60, 45, 20, .06);
}
.keeper-tab.active { color: #fff; background: var(--grad-app); border-color: transparent; }
.keeper-tab span { opacity: .75; margin-left: .3em; }

.keeper-search {
  width: 100%;
  font: 500 15px var(--sans);
  color: var(--ink);
  background: var(--paper-card);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: .7em 1.1em;
  margin: 0 0 16px;
}
.keeper-search:focus { outline: none; border-color: var(--gold); }

.keeper-row {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  background: var(--paper-card);
  border-radius: 14px;
  padding: 10px 12px 10px 0;
  margin-bottom: .5em;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.keeper-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--c), var(--cd));
}
.keeper-open {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding-left: 15px;
  text-decoration: none;
}
.keeper-open:hover { text-decoration: none; }
.keeper-glyph { font-size: 1.25em; flex: none; }
.keeper-text { min-width: 0; display: flex; flex-direction: column; }
.keeper-title {
  font-weight: 700; font-size: .98em; color: var(--ink); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.keeper-sub {
  font-size: .78em; color: var(--ink-mute); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.keeper-toggle {
  flex: none; cursor: pointer;
  font: 800 .76em var(--sans);
  color: var(--ink-soft);
  background: var(--paper-card);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: .55em .9em;
}
.keeper-toggle:hover { border-color: #8C2F39; color: #8C2F39; }
.keeper-toggle.back { border-color: #16A34A; color: #15803D; }

.keeper-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 22px 0 8px; }
.keeper-orphans {
  margin-top: 16px; padding: 13px 15px;
  border-radius: var(--radius-md);
  background: var(--paper-warm);
  border: 1.5px dashed var(--rule-strong);
  font-size: .82em; line-height: 1.6; color: var(--ink-mute);
  word-break: break-all;
}

@media (max-width: 480px) {
  .story-body { font-size: 17px; }
  body.campfire .story-body { font-size: 20px; }
  .keeper-bar { flex-direction: column; }
}

/* ===== Curate mode ===== */
.curate-progress {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cream-2);
}
.curate-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 36px;
  position: sticky;
  bottom: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
}
.curate-controls .ctrl-btn {
  width: 100%;
  justify-content: center;
  padding: 16px 12px;
  font-size: 14px;
}
.ctrl-btn.approve {
  background: linear-gradient(120deg, #16A34A, #22C55E);
  color: white;
}
.ctrl-btn.disapprove {
  background: linear-gradient(120deg, #B91C1C, #EF4444);
  color: white;
}
.curate-hint {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

/* Done view */
.done-view {
  text-align: center;
  padding: 40px 16px;
}
.done-view h1 {
  font-size: clamp(28px, 5vw, 38px);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.done-summary {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 18px 0;
}
.tally-pill {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: white;
}
.tally-pill.approve { background: linear-gradient(120deg, #16A34A, #22C55E); }
.tally-pill.disapprove { background: linear-gradient(120deg, #B91C1C, #EF4444); }
.done-lede {
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 520px;
  margin: 24px auto;
  line-height: 1.55;
}
.done-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 28px 0 20px;
}
.done-detail {
  margin-top: 36px;
  text-align: left;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.done-detail summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 0;
}
.verdict-list {
  list-style: none;
  margin: 12px 0;
  padding: 0;
}
.verdict-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.verdict-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}
.verdict-mark.approve { background: #DCFCE7; color: #15803D; }
.verdict-mark.disapprove { background: #FEE2E2; color: #B91C1C; }
.verdict-title { flex: 1; }
.verdict-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Per-story verdict block (shown on story.html for seed stories) */
.story-verdict {
  margin-top: 28px;
  padding: 20px;
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(200, 101, 27, 0.04), rgba(232, 196, 122, 0.08));
  text-align: center;
  position: relative;
  isolation: isolate;
}
.story-verdict::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1.5px;
  background: linear-gradient(120deg, var(--amber), var(--gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
}
.story-verdict-label {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}
.story-verdict-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.story-verdict.given {
  background: linear-gradient(120deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.04));
}
.story-verdict.given.disapproved {
  background: linear-gradient(120deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.04));
}

/* =====================================================================
   TODAY, the Conscious Parenting way (v18).
   Date + Today → a tale to tell tonight, new every visit (the eye line)
   → this week's corner of the library → "Also today" swipe row.
   ===================================================================== */
.daily-feed { margin-top: 2px; }
.td-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .6em; margin: 4px 0 12px; }
.td-date { font: 800 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.td-title { margin: .15em 0 0; font-weight: 800; font-size: 2.1rem; line-height: 1; letter-spacing: -.03em; color: var(--ink); }

/* The tale card */
.td-tale { margin: 0 0 14px; }
.td-tale-top { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px; }
.td-ribbon {
  display: inline-flex; align-items: center; gap: .4em;
  font: 800 .72rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: #7A4E00; background: linear-gradient(135deg, #FFE57A, #FFCE3D);
  padding: .55em .85em; border-radius: 999px; box-shadow: 0 2px 8px rgba(201, 125, 42, .25);
}
.td-another {
  cursor: pointer; font: 800 .8rem var(--sans); color: var(--tcd);
  background: var(--paper-card); border: 1.5px solid var(--rule); border-radius: 999px; padding: .45em .9em;
  transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.td-another:active { transform: scale(.93); }
.td-hero, .td-card {
  position: relative; display: flex; flex-direction: column; text-align: left;
  border: 0; padding: 0; cursor: pointer; background: var(--paper-card); border-radius: 22px; overflow: hidden;
  font: inherit; color: var(--ink); text-decoration: none;
  box-shadow: 0 2px 6px rgba(60, 45, 20, .08), 0 12px 28px color-mix(in srgb, var(--tc) 22%, transparent);
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.td-hero::before, .td-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2.5px; z-index: 3; pointer-events: none;
  background: linear-gradient(135deg, var(--tc), var(--gold, #E7A83C), var(--tcd));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.td-hero:active, .td-card:active { transform: scale(.97); }
.td-pic { position: relative; display: block; width: 100%; aspect-ratio: 16/10; background: linear-gradient(150deg, var(--tc), var(--tcd)); overflow: hidden; }
.td-card .td-pic { aspect-ratio: 1/1; }
.td-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.td-hero .td-pic::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 55%, rgba(30, 18, 8, .35)); }
.td-glyph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; color: #fff; }
.td-kick {
  position: absolute; top: 10px; left: 10px; z-index: 2; padding: .45em .75em; border-radius: 999px;
  font: 800 .66rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tcd); background: rgba(255, 255, 255, .94); box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.td-new {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: .45em .75em; border-radius: 999px;
  font: 800 .68rem/1 var(--sans); letter-spacing: .04em; color: #fff;
  background: linear-gradient(135deg, #FF5E8E, #FF9F3D); box-shadow: 0 3px 10px rgba(255, 94, 142, .4);
}
.td-new.td-again { background: rgba(255, 255, 255, .9); color: var(--ink-mute); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.td-body { display: flex; flex-direction: column; gap: .35em; padding: .85em 1em 1em; }
.td-card .td-body { flex: 1; }
.td-name { font-weight: 800; font-size: 1.05em; line-height: 1.15; letter-spacing: -.015em; }
.td-hero .td-name { font-size: 1.6em; letter-spacing: -.025em; }
.td-card .td-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.td-open { font-size: 1em; line-height: 1.45; color: var(--ink-soft); font-style: italic; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.td-from { font: 700 .78rem/1.3 var(--sans); color: var(--ink-mute); }
.td-teaser { font-size: .86em; line-height: 1.4; color: var(--ink-mute); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.td-read { margin-top: auto; padding-top: .35em; font: 800 .78rem/1 var(--sans); color: var(--tcd); }
.td-go {
  align-self: flex-start; margin-top: .45em; padding: .65em 1.2em; border-radius: 999px;
  font: 800 .92rem/1 var(--sans); color: #fff; background: linear-gradient(135deg, var(--tc), var(--tcd));
  box-shadow: 0 4px 13px color-mix(in srgb, var(--tc) 35%, transparent);
}
.td-pop .td-hero { animation: tdIn .45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* This week */
.td-week {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 0 .8em; align-items: center;
  margin: 0 0 22px; padding: .6em .9em .6em .6em; border-radius: 16px; text-decoration: none; color: var(--ink);
  background: var(--paper-card); box-shadow: 0 2px 4px rgba(60, 45, 20, .07), 0 10px 24px rgba(60, 45, 20, .08);
}
.td-week::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: linear-gradient(135deg, var(--wc), var(--gold, #E7A83C));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.td-wk-img { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; display: block; background: linear-gradient(150deg, var(--wc), var(--gold, #E7A83C)); }
.td-wk-txt { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.td-wk-k { font: 800 .66rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--wc); }
.td-wk-l { font-size: .9em; line-height: 1.35; color: var(--ink-soft); font-weight: 600; }
.td-wk-n { font: 700 .74rem/1.2 var(--sans); color: var(--ink-mute); }
.td-wk-go { font-weight: 800; color: var(--wc); font-size: 1.2em; }

/* Also today */
.td-row-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 8px; font-weight: 800; font-size: 1.05em; color: var(--ink); }
.td-swipe { font: 700 .78rem var(--sans); color: var(--ink-mute); }
.td-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 64%; gap: .8em; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin: 0 -16px 26px; padding: .2em 16px 1em; scrollbar-width: none;
}
@media (min-width: 640px) { .td-row { grid-auto-columns: 34%; } }
.td-row::-webkit-scrollbar { display: none; }
.td-card { scroll-snap-align: start; }
#todayGrid.td-in .td-card { animation: tdIn .45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
#todayGrid.td-in .td-card:nth-child(2) { animation-delay: .05s; }
#todayGrid.td-in .td-card:nth-child(3) { animation-delay: .1s; }
@keyframes tdIn { from { transform: translateY(8px) scale(.98); opacity: .3; } to { transform: none; opacity: 1; } }

/* Modal extras: a picture on top, the who-said-it quiz */
.ht-mimg { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 14px; margin: 0 0 14px; }
.ht-opts { display: flex; flex-direction: column; gap: .5em; margin: .2em 0 .2em; }
.ht-opt {
  cursor: pointer; text-align: left; font: 700 15px var(--sans); color: var(--ink);
  background: var(--paper-card); border: 1.6px solid #E6DECF; border-radius: 12px; padding: .75em .95em;
  transition: transform .15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ht-opt:active { transform: scale(.98); }
.ht-opt.right { border-color: #2F9E77; background: #E6F6EF; color: #1F6B52; }
.ht-opt.wrong { border-color: #D9534F; background: #FBEAEA; color: #8E2B28; }
.ht-explain { margin-top: .8em !important; padding: .8em .9em; border-radius: 12px; background: #FBF6EA; font-size: .95em; }

/* Week view on the tales page */
.week-note { margin: 0 0 14px; padding: .75em .95em; border-radius: 14px; background: #FFF6E2; border: 1.5px solid #F0DCA8; font-size: .92em; color: var(--ink-soft); }
.week-note a { font-weight: 800; color: var(--gold-deep, #A9690F); }

/* =====================================================================
   HOME SHELVES (v19): each shelf is a swipe row of picture cards with a
   new pick each day. Chronicle cards show their own colour + icon until a
   painting lands in images/chron/<id>.jpg.
   ===================================================================== */
.hs { margin: 8px 0 6px; }
.hs-h { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; }
.hs-h h2 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; color: var(--ink); }
.hs-h a { font: 800 .82rem var(--sans); color: var(--gold-deep); text-decoration: none; border: 0; white-space: nowrap; }
.hs-sub { margin: .25em 0 .8em; font-size: .95rem; color: var(--ink-mute); line-height: 1.4; }
a.td-card { text-decoration: none; }
.td-card .td-pic .td-icon svg { width: 46%; height: 46%; color: rgba(255, 255, 255, .92); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .18)); }
.td-card .td-pic:has(.td-icon) { background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .28), transparent 55%), linear-gradient(150deg, var(--tc), var(--tcd)); }
.td-card .td-new { font-size: .62rem; }

.hs-fables {
  position: relative; display: flex; flex-direction: column; margin: 0 0 26px; background: var(--paper-card); border-radius: 22px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(60, 45, 20, .08), 0 12px 28px color-mix(in srgb, var(--tc) 22%, transparent);
}
.hs-fables::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2.5px; z-index: 3; pointer-events: none;
  background: linear-gradient(135deg, var(--tc), var(--gold, #E7A83C), var(--tcd));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.hs-fb-pic { position: relative; display: block; height: 150px; background: linear-gradient(150deg, var(--tc), var(--tcd)); }
.hs-fb-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-fb {
  display: grid; grid-template-columns: 1fr auto; gap: .15em .8em; align-items: center;
  padding: .8em 1em; text-decoration: none; color: var(--ink); border-top: 1px solid var(--rule-soft);
}
.hs-fb:first-of-type { border-top: 0; }
.hs-fb:active { background: #F7FBEF; }
.hs-fb-t { font-weight: 800; font-size: 1.02em; letter-spacing: -.01em; }
.hs-fb-l { grid-column: 1; font-size: .86em; line-height: 1.4; color: var(--ink-mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hs-fb-go { grid-column: 2; grid-row: 1 / span 2; font-weight: 800; color: var(--tcd); font-size: 1.15em; }

/* =====================================================================
   SHELF PAGES (v19): slim title + About fold, the shelf switch, then the
   "try this one next" card at the eye line, then the list with ticks.
   ===================================================================== */
.pg-head { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin: 2px 0 12px; }
.pg-head h1 { margin: 0; font-weight: 800; font-size: clamp(26px, 7vw, 34px); letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
.pg-about-btn {
  list-style: none; cursor: pointer; font: 800 .8rem var(--sans); color: var(--gold-dark);
  background: var(--paper-card); border: 1.5px solid var(--rule); border-radius: 999px; padding: .5em .9em; white-space: nowrap;
}
.pg-about-body {
  margin: -4px 0 16px; padding: 12px 15px; border-radius: 14px; background: var(--paper-card); border: 1.5px solid var(--rule);
  font-size: .95em; line-height: 1.55; color: var(--ink-soft); box-shadow: var(--shadow-sm);
}
.browse .shelf-switch { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 2px 16px 4px; }
.browse .shelf-switch::-webkit-scrollbar { display: none; }
.browse .shelf-switch .shelf-btn { flex: 0 0 auto; }
.td-pic.td-pic-icon .td-icon svg, .rtile-photo .td-icon svg { width: 34%; height: 34%; color: rgba(255, 255, 255, .92); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .18)); }
.td-pic.td-pic-icon { background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .28), transparent 55%), linear-gradient(150deg, var(--tc), var(--tcd)); }
.chip-row.one-line { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 2px 16px 6px; }
.chip-row.one-line::-webkit-scrollbar { display: none; }
.chip-row.one-line .chip { flex: 0 0 auto; }
.story-item.is-read a { color: var(--ink-mute); }
.story-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 var(--sans); color: #fff; background: linear-gradient(135deg, #4CCB9F, #2F9E77); }
.rtile-tick { position: absolute; top: 8px; right: 10px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 var(--sans); color: #fff; background: linear-gradient(135deg, #4CCB9F, #2F9E77); }

/* =====================================================================
   STORY + CHRONICLE PAGES (v20): painting on top, "We told this one",
   then the next tale / chronicle as a fresh card.
   ===================================================================== */
.story-pic { margin: 0 0 18px; border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; background: linear-gradient(150deg, var(--c1, #E7A83C), var(--c2, #8A5A0F)); box-shadow: var(--shadow-md); }
.story-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.campfire .story-pic { max-width: 640px; margin: 0 auto 22px; }
.story-told { display: flex; align-items: center; gap: .8em; flex-wrap: wrap; margin: 26px 0 8px; }
.told-btn {
  cursor: pointer; font: 800 1rem var(--sans); color: #fff; border: 0; border-radius: 999px; padding: .8em 1.4em;
  background: linear-gradient(135deg, #FF9F3D, #FF5E8E); box-shadow: 0 4px 14px rgba(255, 94, 142, .35);
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.told-btn:active { transform: scale(.94); }
.told-btn.done { background: linear-gradient(135deg, #4CCB9F, #2F9E77); box-shadow: 0 4px 14px rgba(47, 158, 119, .3); }
.told-note { font: 700 .88rem/1.4 var(--sans); color: var(--ink-mute); }
.story-next { margin: 22px 0 6px; }
/* The reading pages style their links; the cards are not links in that sense. */
a.td-hero, a.td-hero:hover, a.td-card, a.td-card:hover, .hs-fb, .hs-fb:hover { color: var(--ink); text-decoration: none; border-bottom: 0; }
a.td-hero *, a.td-card * { text-decoration: none; }
a.td-hero .td-go, a.td-hero:hover .td-go { color: #fff; }

/* =====================================================================
   PREMIUM TOP (v24): no banner, no pill row. Date + Today with two quiet
   round buttons; the card carries its own label; Another sits on the picture.
   ===================================================================== */
.td-head { margin: 10px 0 16px; }
.td-tools { display: flex; gap: 10px; }
.td-round {
  position: relative; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font: 800 18px/1 var(--sans); color: var(--gold-dark);
  background: var(--paper-card); border: 1.5px solid var(--rule); box-shadow: 0 2px 8px rgba(60, 45, 20, .08);
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.td-round:active { transform: scale(.9) rotate(-20deg); }
.td-dot { position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: #FF5E8E; border: 2px solid var(--paper-card); }
.td-tale { position: relative; }
.td-tale .td-pic { aspect-ratio: 4/3; }
.td-eyebrow { font: 800 .72rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.td-another-r {
  position: absolute; top: 12px; right: 12px; z-index: 4; width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font: 800 18px/1 var(--sans); color: #fff; border: 1.5px solid rgba(255, 255, 255, .55);
  background: rgba(30, 20, 10, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.td-another-r:active { transform: scale(.88) rotate(-30deg); }
.ht-mbody .welcome-p, .ht-mbody p { color: var(--ink-soft); }
/* A painted tile needs no icon on top — the icon is only the no-picture fallback. */
.rtile-photo.has-img .rtile-ic { display: none; }

/* =========================================================================
   DARK MODE (v29) — "night library", Classical Mind's palette.
   Opt-in only: <html data-theme="dark">, set by the moon/sun on the home
   page's top bar and kept in localStorage (assets/theme.js). Light mode is
   untouched — every white surface now reads var(--paper-card), which is
   #FFFFFF in light. The neutrals flip; the gold accents lift so they read on
   the dark ground; the paintings dim a touch.
   ========================================================================= */
[data-theme="dark"] {
  --ink: #EFEAF7; --ink-soft: #C4BAD4; --ink-mute: #A69BBA;
  --paper: #17141F; --paper-warm: #2B2317; --paper-card: #221E2D; --paper-surface: #272231;
  --rule: #383043; --rule-soft: #2D2739; --rule-strong: #4C4260;
  --sun: #FFDD7A; --sun-hot: #FFB463; --pink: #FF7FA8; --sky: #6FBEEC; --sky-soft: #8ED0F2; --mint: #5FDCB4;
  --sky-deep: #8ED0F2; --sun-deep: #F2BC63; --leaf: #5FDCB4; --rose: #FF7FA8;
  --leaf-soft: #15352B; --rose-soft: #3B1D2A; --sky-soft-bg: #152C3E; --sun-soft: #322815;
  --gold: #F2C35E; --gold-deep: #F0BE6A; --gold-dark: #F2C35E;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .40);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .40), 0 10px 28px rgba(0, 0, 0, .48);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, .45), 0 24px 60px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
[data-theme="dark"],
[data-theme="dark"] body {
  background:
    radial-gradient(900px 500px at -10% -20%, rgba(255, 214, 74, .07), transparent 60%),
    radial-gradient(900px 500px at 110% -10%, rgba(255, 94, 142, .06), transparent 60%),
    var(--paper);
  background-attachment: fixed;
}
/* Top bar at night: dark glass, gold icons */
[data-theme="dark"] body { --bar-glass: #17141F; --bar-line: rgba(255, 255, 255, .08); --bar-btn: #F2C35E; }
[data-theme="dark"] .ab-btn, [data-theme="dark"] .ab-search, [data-theme="dark"] .srch-field { background: #221E2D; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
[data-theme="dark"] .srch-go, [data-theme="dark"] .srch-hit { background: #221E2D; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
[data-theme="dark"] .srch-more { background: #2E2638; }

/* Accent colours used as TEXT (--tcd, --cd, --mcd are inline per card) lift
   towards white so they read on a dark card. */
[data-theme="dark"] .td-read,
[data-theme="dark"] .td-another,
[data-theme="dark"] .hs-fb-go,
[data-theme="dark"] .today-bar .tb-kicker { color: color-mix(in srgb, var(--tcd) 42%, #FFFFFF); }
[data-theme="dark"] .rtile-count { color: color-mix(in srgb, var(--cd) 45%, #FFFFFF); }
[data-theme="dark"] .td-wk-k,
[data-theme="dark"] .td-wk-go { color: color-mix(in srgb, var(--wc) 60%, #FFFFFF); }
[data-theme="dark"] .ht-source,
[data-theme="dark"] .ht-word-line b,
[data-theme="dark"] .ht-read { color: color-mix(in srgb, var(--mc, #C6811A) 58%, #FFFFFF); }
[data-theme="dark"] .chronicle-cost { border-left-color: #C25562; }
[data-theme="dark"] .chronicle-cost .cr-label { color: #F08A96; }

/* Light tints that would glare */
[data-theme="dark"] .welcome { background: linear-gradient(135deg, #2C2417, #221C13); border-color: #443722; }
[data-theme="dark"] .welcome[open] { background: var(--paper-card); border-color: var(--rule); }
[data-theme="dark"] .welcome-sum { color: #F0C97A; }
[data-theme="dark"] .week-note { background: #2C2417; border-color: #443722; }
[data-theme="dark"] .ht-explain { background: var(--paper-surface); }
[data-theme="dark"] .ht-opt { border-color: var(--rule-strong); }
[data-theme="dark"] .ht-opt.right { border-color: #3FBE86; background: #14352A; color: #7FE0B4; }
[data-theme="dark"] .ht-opt.wrong { border-color: #E0706C; background: #38191B; color: #F0A19D; }
[data-theme="dark"] .hs-fb:active { background: var(--paper-surface); }
[data-theme="dark"] .verdict-mark.approve { background: #14352A; color: #7FE0B4; }
[data-theme="dark"] .verdict-mark.disapprove { background: #38191B; color: #F0A19D; }
[data-theme="dark"] .td-new.td-again { background: rgba(34, 30, 45, .9); }
[data-theme="dark"] .td-kick { background: rgba(34, 30, 45, .92); color: color-mix(in srgb, var(--tcd) 42%, #FFFFFF); }

/* Campfire at night: the same warm glow, on the dark ground. */
[data-theme="dark"] body.campfire {
  background:
    radial-gradient(ellipse at top, rgba(232, 138, 60, .16), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(255, 196, 122, .08), transparent 60%),
    #1C1613;
}

/* Paintings are made for daylight; take a little light off them at night. */
[data-theme="dark"] .td-pic img,
[data-theme="dark"] .rtile-photo img,
[data-theme="dark"] .tb-photo img,
[data-theme="dark"] .story-pic img,
[data-theme="dark"] .story-thumb img,
[data-theme="dark"] .hs-fb-pic img,
[data-theme="dark"] .td-wk-img,
[data-theme="dark"] .ht-mimg { filter: brightness(.86) saturate(.94); }


/* =========================================================================
   THE STATUS-BAR STRIP (v31) — copied from his-own-words/assets/style.css.
   With apple-mobile-web-app-status-bar-style: black-translucent (on every
   page) the web view runs UNDER the iPhone clock, so the PAGE paints that band
   from --chrome: cream in light, night in dark — it flips the instant the
   moon is tapped. Off a notched phone in standalone the inset is 0px and none
   of this shows. Known trade-off (his call, as in His Own Words): the clock is
   drawn white, so on the cream strip it can be faint.
   ========================================================================= */
:root               { --chrome: #FAF6EC; }
[data-theme="dark"] { --chrome: #17141F; }
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--chrome);
  z-index: 100;
  pointer-events: none;
}
body { padding-top: env(safe-area-inset-top, 0px); }