/* Once Upon Earth — dark/night aesthetic
   ---------------------------------------
   Palette inspired by planetarium twilight:
     bg          #06070d   nearly black with a hint of indigo
     surface     #11131c   panels
     surface-2   #1a1d2a   raised
     ink         #e9e7e0   parchment text
     ink-muted   #8b8b9a
     accent      #f4c45c   warm lamp gold
     accent-dim  #c89a3a
     read        #6fb4ff   "this story has been read"
*/

:root {
  --bg: #06070d;
  --surface: #11131c;
  --surface-2: #1a1d2a;
  --ink: #e9e7e0;
  --ink-muted: #8b8b9a;
  --accent: #f4c45c;
  --accent-dim: #c89a3a;
  --read: #6fb4ff;
  --hairline: rgba(255,255,255,0.12);
  --shadow-lg: 0 24px 48px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.4);
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

/* The `hidden` HTML attribute must always hide, even when our class rules set
   an explicit display value (e.g. .help { display: flex }). The user-agent
   `[hidden] { display: none }` rule has only attribute-specificity (0,0,1,0),
   which ties with our class rules and loses on declaration order. Escalate it. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Clamp the single column to the viewport so wide content (timebar slider + country
     chips) can't stretch the layout — otherwise the globe centres in an over-wide track
     and appears pushed off-screen. Overflowing chips scroll horizontally instead. */
  grid-template-columns: minmax(0, 1fr);
}

/* --- Topbar --- */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 24px;
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
  z-index: 10;
  position: relative;
}
.topbar-center { justify-self: center; }
.topbar-right { justify-self: end; display: flex; gap: 8px; }
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.brand-mark {
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}
.brand-name {
  color: var(--ink);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
}
.surprise-btn {
  background: linear-gradient(135deg, var(--accent) 0%, #ffd47a 100%);
  color: #1a1300;
  border: none;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.01em;
  box-shadow: 0 0 24px rgba(244,196,92,0.18), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform 150ms, box-shadow 150ms;
}
.surprise-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(244,196,92,0.28), inset 0 1px 0 rgba(255,255,255,0.3);
}
.surprise-btn .sparkle { font-size: 14px; }

.iconbtn {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-muted);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: color 150ms, border-color 150ms, background 150ms;
}
.iconbtn:hover {
  color: var(--ink);
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.03);
}
/* "Reading" — a top feature, so it gets a distinct, inviting treatment using the same
   blue that marks read stories (not the gold reserved for the primary "Surprise" CTA). */
.iconbtn.reading-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--read);
  border-color: rgba(111,180,255,0.40);
  background: rgba(111,180,255,0.09);
  font-weight: 500;
}
.iconbtn.reading-btn:hover {
  color: #a7d2ff;
  border-color: rgba(111,180,255,0.70);
  background: rgba(111,180,255,0.17);
}
.reading-ico { font-size: 14px; line-height: 1; }
.iconbtn.primary,
button.primary {
  background: var(--accent);
  color: #1a1300;
  border-color: var(--accent);
  font-weight: 600;
}
.iconbtn.primary:hover,
button.primary:hover {
  background: var(--accent-dim);
}
/* ── Auth UI ─────────────────────────────────────────────────────── */
.auth-wrap {
  position: relative;
}
/* Sign-in state: subtle ghost button */
.iconbtn.auth-signin {
  color: var(--ink-muted);
  font-size: 12px;
  letter-spacing: 0.03em;
}
/* Signed-in state: gold avatar circle with user initial */
.iconbtn.auth-avatar {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: rgba(244, 196, 92, 0.12);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.iconbtn.auth-avatar:hover {
  background: rgba(244, 196, 92, 0.22);
}
/* Dropdown panel */
.auth-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 200;
  animation: fadeIn 120ms ease-out;
}
.auth-email {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 0 0 12px;
  word-break: break-all;
  line-height: 1.4;
}
.auth-signout-btn {
  width: 100%;
  background: none;
  border: 1px solid var(--hairline);
  color: var(--ink-muted);
  padding: 7px 0;
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
}
.auth-signout-btn:hover {
  color: var(--ink);
  border-color: rgba(255,255,255,0.22);
}
/* Mobile: auth button stays small */
@media (max-width: 640px) {
  .iconbtn.auth-avatar { width: 28px; height: 28px; font-size: 12px; }
  .auth-dropdown { right: -8px; min-width: 180px; }
}

/* Active filter count badge on the filters button */
.filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #1a1300;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  padding: 0 5px;
  min-width: 16px;
  height: 16px;
  line-height: 1;
  margin-left: 2px;
  vertical-align: middle;
}
button.ghost {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-muted);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font-ui);
}
button.ghost:hover {
  color: var(--ink);
  border-color: rgba(255,255,255,0.2);
}

/* --- Globe area --- */
#globeWrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#globeViz {
  width: 100%;
  height: 100%;
}
.overlay-stats {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(6,7,13,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hairline);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 12px;
  color: var(--ink-muted);
  pointer-events: none;
  z-index: 5;
}
.overlay-stats span { color: var(--ink); font-weight: 500; }

.empty-state {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--ink-muted);
  font-family: var(--font-serif);
  font-size: 18px;
  pointer-events: none;
}
.empty-state .empty-sub {
  margin-top: 8px;
  font-size: 14px;
  font-family: var(--font-ui);
  opacity: 0.7;
}

/* --- Timebar (footer) --- */
.timebar {
  background: rgba(6,7,13,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--hairline);
  padding: 12px 24px 18px;
  z-index: 10;
  user-select: none;
}
.era-labels {
  position: relative;
  height: 14px;
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.era-labels span {
  position: absolute;
  left: var(--era-x);
  transform: translateX(-50%);
}
.slider-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.slider-bound {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink-muted);
  min-width: 56px;
  text-align: center;
}
#timeSlider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: linear-gradient(to right, rgba(255,255,255,0.05), rgba(255,255,255,0.15));
  border-radius: 2px;
  outline: none;
}
#timeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 12px rgba(244,196,92,0.4);
  border: 2px solid var(--bg);
}
#timeSlider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg);
  box-shadow: 0 0 12px rgba(244,196,92,0.4);
}

.slider-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-muted);
}
.spacer { flex: 1; }
.window-label { padding: 0 8px; }

/* Timebar — country chips strip */
.slider-chips {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-height: 22px;
}
.slider-chips::-webkit-scrollbar { display: none; }
.slider-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  color: rgba(233,231,224,0.65);
  font-size: 11px;
  font-family: var(--ui-font);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.slider-chip:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(244,196,92,0.40);
  color: var(--ink);
}
.slider-chip--read {
  border-color: rgba(244,196,92,0.38);
  color: var(--accent);
}
.chip-n {
  font-size: 10px;
  opacity: 0.50;
  font-weight: 700;
  margin-left: 2px;
}
.chip-more {
  font-size: 11px;
  color: var(--ink-muted);
  padding: 2px 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Preview card --- */
.preview {
  position: absolute;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-lg);
  max-width: 320px;
  z-index: 20;
  pointer-events: auto;
  font-size: 13px;
}
.preview h3 {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.preview-meta {
  margin: 0 0 8px;
  color: var(--ink-muted);
  font-size: 12px;
}
.preview-hook {
  margin: 0 0 10px;
  line-height: 1.5;
  color: var(--ink);
}
.preview-tags {
  margin: 0 0 12px;
  font-size: 11px;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.preview-tags .tag {
  background: rgba(255,255,255,0.04);
  padding: 2px 8px;
  border-radius: 10px;
}
.preview-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.preview-actions .primary { padding: 6px 12px; font-size: 12px; }
.preview-actions .ghost { padding: 6px 10px; font-size: 12px; }
.preview-actions .ghost:last-child { margin-left: auto; }

/* --- V7-1 focus bar (the "you are here" card while a country is focused) ---
   V7-6: now a two-row card — context on top, one-tap actions below. --- */
.focus-bar {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: max-content;
  max-width: min(92vw, 460px);
  padding: 11px 12px;
  background: rgba(17,19,28,0.86);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 15;
  animation: focusBarIn 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.focus-bar[hidden] { display: none; }   /* display:flex above would otherwise defeat [hidden] */
@keyframes focusBarIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.focus-bar-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.focus-bar .focus-bar-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.focus-bar-name {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.focus-bar-meta {
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.focus-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.focus-back {
  flex: none;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
}
.focus-back:hover { background: rgba(255,255,255,0.12); }
/* Action buttons (Surprise / Tell me a story / Details) */
.focus-action {
  flex: 1 1 auto;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, transform 80ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.focus-action[hidden] { display: none; }
.focus-action:hover { background: rgba(255,255,255,0.12); }
.focus-action:active { transform: scale(0.97); }
.focus-action--primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-dim));
  color: #1a1408;
  border-color: transparent;
  font-weight: 700;
}
.focus-action--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(244,196,92,0.25);
}
.focus-details {
  flex: none;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  background: none;
  border: none;
  border-radius: 999px;
  padding: 9px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 140ms ease;
}
.focus-details:hover { color: var(--accent); }
@media (max-width: 640px) {
  .focus-bar {
    top: auto;
    bottom: calc(var(--timebar-h, 92px) + 12px);
    left: 8px; right: 8px;
    transform: none;
    width: auto;
    max-width: none;
  }
  @keyframes focusBarIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .focus-bar-meta { white-space: normal; }
  /* Surprise + Tell share the row; Details sits compact at the end */
  .focus-action { flex: 1 1 40%; }
}

/* --- V7.2.4 context-aware pin colour legend --- */
.pin-legend {
  position: fixed;
  top: 64px;
  left: 14px;
  z-index: 14;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 210px;
  padding: 11px 13px;
  background: rgba(13,14,22,0.72);
  border: 1px solid var(--hairline);
  border-radius: 13px;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  box-shadow: var(--shadow-lg);
  animation: focusBarIn 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pin-legend[hidden] { display: none; }
.legend-title {
  font-family: var(--font-ui);
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 2px;
}
.legend-item { display: flex; align-items: center; gap: 9px; }
.legend-canvas { width: 19px; height: 19px; flex: none; }
.legend-label { font-family: var(--font-ui); font-size: 11.5px; color: var(--ink); line-height: 1.2; }
@media (max-width: 640px) {
  .pin-legend {
    top: 58px; left: 8px;
    max-width: 44vw;
    padding: 8px 10px; gap: 5px;
    background: rgba(13,14,22,0.8);
  }
  .legend-title { display: none; }                 /* save room on phones */
  .legend-canvas { width: 16px; height: 16px; }
  .legend-label { font-size: 10.5px; }
}

/* --- Immersive reader --- */
.reader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 50;
  display: flex;
  flex-direction: column;
  animation: fadeIn 200ms ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Exit animations (all panels animate out before hidden) --- */
@keyframes slideOut     { to { transform: translateX(105%); } }
@keyframes slideOutLeft { to { transform: translateX(-105%); } }
@keyframes fadeOut      { to { opacity: 0; } }
@keyframes slideOutDown { to { transform: translateY(105%); } }

.reader.is-leaving         { animation: fadeOut 150ms ease-in forwards; }
.preview.is-leaving        { animation: fadeOut 120ms ease-in forwards; }
.country-panel.is-leaving  { animation: fadeOut 200ms ease-in forwards; }
.stats-panel.is-leaving    { animation: slideOutLeft 180ms ease-in forwards; }
.help.is-leaving           { animation: fadeOut 150ms ease-in forwards; }

@media (max-width: 640px) {
  .country-panel.is-leaving,
  .stats-panel.is-leaving { animation: slideOutDown 200ms ease-in forwards; }
}
.reader-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-bottom: 1px solid var(--hairline);
}

/* Thin chapter progress bar at bottom of reader header */
.reader-progress-bar {
  position: absolute;
  bottom: -1px; left: 0;
  height: 2px;
  width: 0%;
  background: var(--accent);
  transition: width 300ms ease-out;
  box-shadow: 0 0 8px rgba(244,196,92,0.4);
  z-index: 1;
  border-radius: 0 1px 1px 0;
}
.reader-meta {
  color: var(--ink-muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.reader-meta .dot { opacity: 0.4; }

.reader-scroll {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.reader-body {
  padding: 60px 24px 40px;
  display: flex;
  justify-content: center;
}
.reader-body > div {
  max-width: 680px;
  width: 100%;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.9;
  color: var(--ink);
}
.reader-body h1, .reader-body h2, .reader-body h3 {
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
}
.reader-body h1 {
  font-size: 27px;
  font-weight: 400;
  margin-bottom: 12px;
}
.reader-body h2 {
  font-size: 24px;
  margin-top: 48px;
  margin-bottom: 16px;
  border-top: 1px solid var(--hairline);
  padding-top: 32px;
}
/* Chapter title is the first element after image — no border or top gap needed */
.reader-body > div > h2:first-child {
  margin-top: 20px;
  border-top: none;
  padding-top: 0;
}
.reader-body h3 {
  font-size: 19px;
  margin-top: 36px;
  margin-bottom: 12px;
  color: var(--accent);
  font-style: italic;
}
.reader-body p {
  margin: 16px 0;
}
.reader-body em {
  color: var(--accent);
  font-style: italic;
}
.reader-body strong {
  color: var(--ink);
  font-weight: 600;
}
.reader-body ul, .reader-body ol {
  padding-left: 24px;
}
.reader-body li {
  margin: 8px 0;
}
.reader-body code {
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 14px;
  font-family: 'SF Mono', Menlo, monospace;
}
.reader-body pre {
  background: var(--surface);
  padding: 16px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 13px;
}
.reader-body pre code {
  background: none;
  padding: 0;
}
.reader-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 18px;
  margin: 24px 0;
  color: var(--ink-muted);
  font-style: italic;
}

.reader-footer {
  padding: 24px 32px;
  border-top: 1px solid var(--hairline);
  background: var(--surface);
}
.reader-causal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 800px;
  margin: 0 auto;
}
.causal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.causal-label {
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
  margin-right: 4px;
  flex-shrink: 0;
}
.causal-chip {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink);
  font-style: italic;
  opacity: 0.75;
  transition: opacity 0.15s, background 0.15s;
}
.causal-chip:hover {
  opacity: 1;
  background: rgba(244, 196, 92, 0.08);
}

/* --- Sources block (verified, clickable) --- */
.reader-sources {
  max-width: 800px;
  margin: 18px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.src-warn {
  max-width: 800px;
  margin: 0 auto 14px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--accent);
  background: rgba(244, 196, 92, 0.08);
  border: 1px solid rgba(244, 196, 92, 0.25);
  border-radius: 8px;
}
.src-h {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 8px;
}
.src-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.src-list li { color: var(--ink-muted); line-height: 1.5; }
.src-list a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 196, 92, 0.25);
}
.src-list a:hover { border-bottom-color: var(--accent); }

/* AI-generated story disclaimer — always shown on generated (not curated) stories. */
.gen-disclaimer {
  max-width: 800px;
  margin: 0 auto 14px;
  padding: 9px 13px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 8px;
}
.gen-disclaimer strong { color: var(--ink); font-weight: 600; }

/* Privacy/Terms links (sign-in screen + help overlay). */
.signin-legal, .help-legal { margin-top: 14px; text-align: center; font-size: 12px; }
.signin-legal a, .help-legal a { color: var(--ink-muted); text-decoration: none; }
.signin-legal a:hover, .help-legal a:hover { color: var(--ink); text-decoration: underline; }

/* Visible keyboard focus for the now-focusable story rows + cards. */
.cp-explore-item:focus-visible,
.rtl-node:focus-visible,
.whats-next-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- Chapter image banner --- */
.reader-chapter-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
}
.rci-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  /* contain = the WHOLE image always shows, never cropped, for any aspect ratio
     (portraits, panoramas, paintings, coins). The blurred .rci-bg fills the frame
     behind it so there are no empty bars. */
  object-fit: contain;
  object-position: center;
  display: block;
  animation: rciFadeIn 400ms ease-out;
}
/* Blurred, scaled copy of the same image fills the 16:9 frame behind the contained
   image — classy fill instead of letterbox bars, and never hides any real detail. */
.rci-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(24px) brightness(0.55) saturate(1.15);
  transform: scale(1.2);   /* hide the blur's soft edges past the frame */
  pointer-events: none;
}
@keyframes rciFadeIn {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1);    }
}
/* Bottom gradient so chapter h2 is readable over any image */
.reader-chapter-img::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom, transparent 40%, rgba(6,7,13,0.85) 100%);
  pointer-events: none;
}
/* Shimmer loading placeholder */
.rci-shimmer {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    rgba(244,196,92,0.06) 40%,
    var(--surface) 100%
  );
  background-size: 200% 100%;
  animation: rciShimmer 1.6s ease-in-out infinite;
}
@keyframes rciShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Chapter name overlay on image */
.rci-label {
  position: absolute;
  bottom: 16px;
  left: 24px;
  right: 24px;
  color: rgba(233,231,224,0.8);
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  z-index: 3;
  pointer-events: none;
}
/* Image credit (real Wikimedia images) — bottom-right, doesn't clash with the bottom-left label */
.rci-credit {
  position: absolute;
  bottom: 10px;
  right: 16px;
  max-width: 58%;
  text-align: right;
  color: rgba(233,231,224,0.62);
  font-size: 10.5px;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
  z-index: 4;
}
.rci-credit a { color: inherit; text-decoration: underline; }

/* --- Chapter progress (header) — just a centred chapter counter --- */
.reader-chapter-progress {
  display: flex;
  align-items: center;
}
.rcp-label {
  font-size: 12px;
  color: var(--ink-muted);
  min-width: 36px;
  text-align: center;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* --- Chapter bottom nav — lives OUTSIDE the scroll area as a persistent footer --- */
.reader-chapter-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px calc(14px + env(safe-area-inset-bottom, 0px));
  gap: 16px;
  flex-shrink: 0;
  border-top: 1px solid var(--hairline);
  background: var(--bg);
}
.rcn-btn {
  background: none;
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.rcn-btn:hover:not(:disabled) {
  background: var(--surface);
  border-color: var(--accent);
}
.rcn-btn:disabled { opacity: 0.2; cursor: default; }
.rcn-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.rcn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hairline);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.rcn-dot.active {
  background: var(--accent);
  transform: scale(1.35);
}
.rcn-dot:hover:not(.active) { background: var(--ink-muted); }
.rcn-counter {
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  user-select: none;
}

/* --- Filters panel --- */
.filters-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--hairline);
  z-index: 40;
  box-shadow: -20px 0 40px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  animation: slideIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hairline);
}
.filters-header h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
}
.filters-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
}
.filters-section h4 {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-muted);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: all 150ms;
}
.chip:hover {
  color: var(--ink);
  border-color: rgba(255,255,255,0.2);
}
.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1300;
  font-weight: 500;
  transform: scale(1.04);
}
.filters-footer {
  margin-top: auto;
  padding: 16px 20px;
}

/* --- Help overlay --- */
.help {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 200ms ease-out;
}
.help-card {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 32px;
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.help-card h2 {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
}
.help-card ul {
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}
.help-card li { margin: 6px 0; }
.help-card .help-sub {
  margin-top: 20px;
  color: var(--ink-muted);
  font-size: 13px;
  font-style: italic;
}
.help-card button {
  margin-top: 16px;
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
}

/* --- Global button press micro-interaction --- */
button:active:not(:disabled) { transform: scale(0.96); }

/* --- Scrollbars --- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* ═════════════════════════════════════════════════════════════════
   V0.2 additions
   ═════════════════════════════════════════════════════════════════ */

/* --- New tonight banner --- */
.new-banner {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(244, 196, 92, 0.12);
  border: 1px solid rgba(244, 196, 92, 0.3);
  color: var(--accent);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  z-index: 6;
  backdrop-filter: blur(8px);
  animation: gentleGlow 3s ease-in-out infinite;
}
.new-banner a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
@keyframes gentleGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(244, 196, 92, 0.15); }
  50% { box-shadow: 0 0 24px rgba(244, 196, 92, 0.3); }
}

/* --- What's next carousel (inside reader) --- */
.whats-next {
  max-width: 880px;
  margin: 24px auto 0;
  padding: 0 24px;
}
.whats-next-heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  margin: 0 0 20px;
  font-weight: 400;
}
.whats-next-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.whats-next-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-ui);
  color: var(--ink);
  transition: border-color 150ms, transform 150ms, background 150ms;
}
.whats-next-card:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-2px);
}
.wn-why {
  display: inline-block;
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
  background: rgba(244,196,92,0.1);
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 600;
}
.wn-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
  line-height: 1.3;
}
.wn-hook {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0 0 8px;
}
.wn-meta {
  font-size: 11px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.whats-next-or {
  text-align: center;
  margin: 18px 0 0;
  font-size: 13px;
}
.whats-next-or a {
  color: var(--accent);
  text-decoration: none;
  font-style: italic;
}
.whats-next-or a:hover { text-decoration: underline; }

/* --- Country biography side panel (V0.4: the reading hub) --- */
/* Dim, tappable backdrop behind mobile bottom-sheet panels — tap to return to globe */
.panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 38;
  animation: fadeIn 200ms ease;
}
@media (min-width: 641px) { .panel-backdrop { display: none !important; } }
.country-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 500px;
  max-width: 92vw;
  height: 100%;
  /* Glass, not a card: a translucent veil over space (globe shows faintly through),
     left edge ramps from near-transparent so it dissolves into the scene rather than
     seaming against it. No hard border, no heavy card shadow. */
  background: linear-gradient(90deg, rgba(8,10,17,0.52) 0%, rgba(9,11,19,0.86) 30%, rgba(9,11,19,0.93) 100%);
  backdrop-filter: blur(16px) saturate(112%);
  -webkit-backdrop-filter: blur(16px) saturate(112%);
  z-index: 40;
  box-shadow: -40px 0 80px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
  animation: panelEmerge 320ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
@keyframes panelEmerge {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}
.country-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 22px 28px 10px;
  gap: 12px;
}
.country-panel-header h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 26px;
  margin: 0;
  line-height: 1.15;
}
.country-subtitle {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.country-panel-body {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* Hero section — V7-4: just a quiet "what this place is about" line. */
.country-hero {
  padding: 16px 28px 0;
}
.country-hero:empty { display: none; }   /* no themes → no thin empty strip */
.cp-summary {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}
.cp-summary-dim {
  color: var(--ink-muted);
  font-size: 13px;
  font-family: var(--font-ui);
}
.cp-themes {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.cp-themes-label {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0.7;
  margin-right: 3px;
}
.cp-theme-tag {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 11px;
  letter-spacing: 0.02em;
}
/* V7-5: primary "Surprise me" action (full-width gold pill — instant, pre-seeded) */
.cp-surprise-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 13px 20px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dim));
  color: #1a1408;
  border: none;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: transform 120ms, box-shadow 120ms;
}
.cp-surprise-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(244,196,92,0.25);
}
.cp-surprise-btn:active { transform: scale(0.99); }

/* Sections inside country panel body */
.cp-section {
  padding: 18px 28px;
  border-bottom: 1px solid var(--hairline);
}
.cp-section:last-child { border-bottom: none; }
.cp-section-h {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
/* V7-4: a section header that toggles its content (Untold events) */
.cp-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  transition: color 140ms ease;
}
.cp-section-toggle:hover,
.cp-section-toggle[aria-expanded="true"] { color: var(--accent); }
.cp-section-toggle .cp-section-h { margin: 0; }
.cp-section-toggle .cp-disclosure-chevron {
  font-size: 10px;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cp-section-toggle[aria-expanded="true"] .cp-disclosure-chevron { transform: rotate(180deg); }
#cpGhostInner { margin-top: 14px; }
#cpGhostInner[hidden] { display: none; }
.cp-h-count {
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* "Your reading" list */
.cp-read-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cp-read-item {
  display: grid;
  grid-template-columns: 18px 1fr 20px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms;
}
.cp-read-item:hover {
  background: rgba(111, 180, 255, 0.06);
}
.cp-read-bullet {
  color: var(--read);
  font-size: 10px;
  text-align: center;
}
.cp-read-title {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.3;
}
.cp-read-meta {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 3px;
}
.cp-reopen {
  font-size: 14px;
  color: var(--ink-muted);
  opacity: 0;
  transition: opacity 150ms;
}
.cp-read-item:hover .cp-reopen { opacity: 0.7; }

/* Explore section: timeline bar + theme chips + time slider + unread list */
/* Request section: always below the explore list — chips compose a request, not a filter */
.cp-request-section {
  /* V7-4: promoted to a top-level .cp-section (primary action), so no extra
     top margin/border — the .cp-section padding + dividers handle spacing. */
}
.cp-request-section-heading {
  display: block;
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--font-ui);
}
#cpRequestCTA {
  margin-top: 0;   /* V7.3: CTA is the primary action, directly under the heading */
}
/* V7-7: time/custom cue under the generate button — sets it apart from instant "Surprise me" */
.cp-request-note {
  margin: 8px 0 0;
  font-size: 11px;
  font-style: italic;
  color: var(--ink-muted);
}
#cpRequestCTA .cp-request-btn {
  width: 100%;
  display: block;
  text-align: center;
  padding: 12px 20px;
  font-size: 14px;
}
/* V7-5: when "Surprise me" is the primary action, the generator is demoted to a
   secondary outline button (still one tap, but clearly the slower, deliberate choice). */
.cp-request-section.is-secondary .cp-request-section-heading { color: var(--ink-muted); }
.cp-request-section.is-secondary #cpRequestCTA .cp-request-btn {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(244,196,92,0.5);
}
.cp-request-section.is-secondary #cpRequestCTA .cp-request-btn:hover {
  background: rgba(244,196,92,0.10);
  border-color: rgba(244,196,92,0.7);
  box-shadow: none;
}
.cp-request-section.is-secondary #cpRequestCTA .cp-request-btn em { color: var(--accent); }
.cp-freetext-block {
  position: relative;
}
.cp-freetext-block::before {
  content: '— or just describe it —';
  display: none; /* label in HTML is enough */
}
.cp-controls {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cp-control-block {
  display: block;
}
.cp-control-label {
  display: block;
  margin-bottom: 7px;
  font-size: 9px;
  letter-spacing: 0.13em;
  color: rgba(233,231,224,0.35);
  font-weight: 600;
  text-transform: uppercase;
}
/* Soft, editorial cue (replaces the shouty uppercase labels) */
.cp-control-cue {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}
/* Free-text revealed behind a quiet link */
.cp-freetext-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 2px 0;
  margin-top: -4px;
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
  transition: color 150ms;
}
.cp-freetext-toggle:hover { color: var(--read); }
.cp-freetext-toggle[aria-expanded="true"] { color: var(--ink); }
.cp-freetext-block[hidden] { display: none; }
/* ── Emoji theme chips ────────────────────────────────────────────── */
#countryGenreChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
  transition: opacity 180ms;
}
#countryGenreChips.is-dimmed {
  opacity: 0.22;
  pointer-events: none;
  user-select: none;
}
.cp-theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px 4px 8px;
  border-radius: 100px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms, transform 80ms, box-shadow 120ms;
  white-space: nowrap;
}
.cp-theme-chip:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  color: var(--ink);
}
.cp-theme-chip.active {
  background: rgba(244,196,92,0.13);
  border-color: rgba(244,196,92,0.55);
  color: var(--accent);
  box-shadow: 0 0 10px rgba(244,196,92,0.12);
}
.cp-theme-chip.active:hover {
  background: rgba(244,196,92,0.20);
}
.cp-theme-chip:active { transform: scale(0.94); }
.ct-emoji {
  font-size: 14px;
  line-height: 1;
}
.ct-label {
  font-size: 12px;
  line-height: 1;
}
/* ── Free-text story prompt ───────────────────────────────────────── */
.cp-freetext {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 2px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.55;
  padding: 9px 11px;
  resize: none;
  transition: border-color 150ms, background 150ms;
  vertical-align: top;
}
.cp-freetext::placeholder {
  color: rgba(233,231,224,0.30);
  font-style: italic;
}
.cp-freetext:focus {
  outline: none;
  border-color: rgba(244,196,92,0.55);
  background: rgba(255,255,255,0.07);
}
.cp-freetext-note {
  margin: 4px 0 0;
  font-size: 10px;
  color: var(--ink-muted);
  font-style: italic;
}
/* ── V7.3 "Be more specific" disclosure ─────────────────────────────── */
.cp-disclosure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 11px 0 0;
  padding: 4px 2px;
  background: none;
  border: none;
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 140ms ease;
}
.cp-disclosure:hover,
.cp-disclosure[aria-expanded="true"] { color: var(--accent); }
.cp-disclosure-chevron {
  font-size: 9px;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cp-disclosure[aria-expanded="true"] .cp-disclosure-chevron { transform: rotate(180deg); }
.cp-controls[hidden] { display: none; }       /* override .cp-controls display:flex when hidden */

/* ── V7.3 era slider (replaces the six era boxes) ───────────────────── */
.cp-era-slider { padding: 2px 0 0; }
.cp-era-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.06), rgba(255,255,255,0.16));
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.cp-era-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg);
  box-shadow: 0 0 12px rgba(244,196,92,0.4);
}
.cp-era-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg);
  box-shadow: 0 0 12px rgba(244,196,92,0.4);
}
.cp-era-ticks {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 7px;
  margin-top: 7px;
  padding: 0 7px;          /* inset so the end dots sit roughly under the thumb extremes */
}
.cp-era-tick {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: background 140ms ease, transform 140ms ease;
}
.cp-era-tick.on {
  background: var(--accent);
  transform: scale(1.3);
}
.cp-era-readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 9px;
}
.cp-era-readout-name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.cp-era-readout-range {
  font-size: 11px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.chips.compact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chips.compact .chip {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 999px;
}
.chip-count {
  margin-left: 4px;
  padding: 0 5px;
  font-size: 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  color: var(--ink-muted);
}
.chip.active .chip-count {
  background: rgba(0,0,0,0.2);
  color: rgba(0,0,0,0.7);
}

/* Explore list (unread stories) */
.cp-explore-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 8px;
}
.cp-explore-list.flash {
  animation: cpFlash 500ms ease-out;
}
@keyframes cpFlash {
  0%   { background: rgba(244, 196, 92, 0.0); }
  30%  { background: rgba(244, 196, 92, 0.10); }
  100% { background: rgba(244, 196, 92, 0.0); }
}
.cp-explore-item {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  padding-left: 14px;
  margin: 0 -12px;
  border-radius: 8px;
  cursor: pointer;
  border-left: 2px solid transparent;
  background: rgba(255,255,255,0.02);
  transition: background 150ms, border-color 150ms, padding-left 150ms;
}
.cp-explore-item:hover {
  background: rgba(244, 196, 92, 0.06);
  border-left-color: var(--accent);
  padding-left: 16px;
}
.cp-explore-item:hover .cp-explore-cta {
  color: var(--accent);
  transform: translateX(2px);
}
.cp-year {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink-muted);
  text-align: right;
  letter-spacing: 0.02em;
}
.cp-year.ghost {
  opacity: 0.55;
  font-style: italic;
}
.cp-explore-title {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.3;
}
.cp-explore-meta {
  margin-top: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: var(--ink-muted);
}
.cp-explore-genre {
  padding: 1px 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
}
.cp-explore-tone {
  padding: 1px 6px;
  border-radius: 4px;
  font-style: italic;
  opacity: 0.85;
}
.tone-tragic   { color: #d97777; background: rgba(217,119,119,0.08); }
.tone-triumphant { color: #88c97a; background: rgba(136,201,122,0.08); }
.tone-sinister { color: #b27dcb; background: rgba(178,125,203,0.08); }
.tone-ironic   { color: #f4c45c; background: rgba(244,196,92,0.08); }
.tone-mixed    { color: var(--ink-muted); background: rgba(255,255,255,0.04); }
.tone-cautionary { color: #d9a677; background: rgba(217,166,119,0.08); }
.tone-bizarre  { color: #7dc9c4; background: rgba(125,201,196,0.08); }

.cp-explore-cta {
  font-size: 12px;
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-weight: 500;
  transition: color 150ms, transform 150ms;
}
.cp-explore-empty {
  padding: 28px 20px;
  text-align: center;
  background: rgba(244, 196, 92, 0.04);
  border-radius: 10px;
  list-style: none;
  border: 1px dashed rgba(244, 196, 92, 0.2);
}
.cp-empty-headline {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
  font-style: normal;
}
.cp-empty-sub {
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
}
.cp-request-btn {
  display: inline-block;
  padding: 10px 18px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dim));
  color: #1a1408;
  border: none;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms;
  letter-spacing: 0.01em;
}
.cp-request-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(244,196,92,0.25);
}
.cp-clear-link {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 11px;
  font-family: var(--font-ui);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  opacity: 0.7;
}
.cp-clear-link:hover { opacity: 1; color: var(--ink); }

/* Story generation loading state */
.cp-generating {
  padding: 16px 0 4px;
  text-align: left;
}
.cp-gen-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.cp-gen-mark {
  display: inline-block;
  font-size: 18px;
  color: var(--accent);
  animation: cpGenSpin 2.4s linear infinite;
}
@keyframes cpGenSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.cp-gen-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.cp-gen-bar {
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.cp-gen-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.6s ease-out;
  box-shadow: 0 0 8px rgba(244,196,92,0.5);
}
.cp-gen-progress {
  font-size: 11px;
  color: var(--ink-muted);
  margin-bottom: 12px;
  font-family: var(--font-ui);
}
.cp-gen-cancel {
  font-size: 11px;
  color: var(--ink-muted);
  padding: 4px 10px;
}
.cp-gen-success {
  padding: 12px 0;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  font-family: var(--font-ui);
}
.cp-gen-error {
  padding: 8px 0;
}
.cp-gen-err-msg {
  font-size: 12px;
  color: #e07070;
  margin: 0 0 12px;
  line-height: 1.5;
}
.cp-gen-err-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Ghost section */
.cp-ghost-intro {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
}
.cp-ghost-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cp-ghost-item {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 12px;
  margin: 0 -12px 4px;
  border-radius: 8px;
  background: rgba(255,255,255,0.015);
  border-left: 2px solid rgba(255,255,255,0.06);
  transition: background 150ms, border-color 150ms;
}
.cp-ghost-item.requested {
  background: rgba(244,196,92,0.04);
  border-left-color: var(--accent);
}
.cp-ghost-title {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  opacity: 0.85;
  line-height: 1.3;
}
.cp-ghost-meta {
  margin-top: 3px;
  font-size: 11px;
  color: var(--ink-muted);
  font-style: italic;
}
.cp-write-btn {
  padding: 5px 11px;
  background: transparent;
  border: 1px solid rgba(244,196,92,0.3);
  color: var(--accent);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  white-space: nowrap;
  transition: all 150ms;
  align-self: center;
  opacity: 0.75;
}
.cp-write-btn:hover {
  border-color: var(--accent);
  opacity: 1;
  background: rgba(244,196,92,0.06);
}
.cp-ghost-item.requested .cp-write-btn {
  border-color: var(--accent);
  color: var(--accent);
}

@keyframes cpExpand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Empty state */
.cp-empty-state {
  padding: 24px 16px;
  text-align: center;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
}
.cp-empty-state p { margin: 0 0 12px; color: var(--ink-muted); font-style: italic; }
.cp-clear-btn {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12px;
}
.cp-clear-btn:hover {
  background: rgba(244,196,92,0.08);
}
.cp-empty { margin: 0; color: var(--ink-muted); font-family: var(--font-serif); font-style: italic; }
.cp-empty-sub { margin: 8px 0 0; font-size: 12px; color: var(--ink-muted); opacity: 0.75; }

/* Quieted state for global slider + filter button when country panel is open */
.timebar.quieted, .quieted {
  opacity: 0.18;
  pointer-events: none;
  transition: opacity 300ms;
}

.tl-story, .tl-ghost {
  display: grid;
  grid-template-columns: 64px 36px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
  align-items: start;
}
.tl-year {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink-muted);
  padding-top: 4px;
}
.tl-bullet {
  font-size: 14px;
  text-align: center;
  padding-top: 2px;
}
.tl-content { min-width: 0; }
.tl-title {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.tl-meta {
  margin: 0;
  font-size: 11px;
  color: var(--ink-muted);
}

.tl-story {
  cursor: pointer;
  transition: background 150ms;
  border-radius: 4px;
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
}
.tl-story:hover {
  background: rgba(244, 196, 92, 0.06);
}
.tl-read .tl-bullet { color: var(--read); }
.tl-read .tl-title { color: var(--ink); }
.tl-unread .tl-bullet { color: var(--accent-dim); }
.tl-unread .tl-title { color: var(--ink); }
.tl-ghost {
  cursor: default;
  opacity: 0.45;
}
.tl-ghost .tl-bullet { color: var(--ink-muted); }
.tl-ghost .tl-title { font-weight: 400; }
.tl-ghost .tl-meta { font-style: italic; }

/* --- Reading So Far panel (left side) --- */
.stats-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 360px;
  height: 100%;
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  z-index: 40;
  box-shadow: 20px 0 40px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  animation: slideInLeft 220ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.stats-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--hairline);
}
.stats-panel-header h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
}
.stats-section {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px 24px;
}
.stat-empty {
  color: var(--ink-muted);
  font-style: italic;
  font-family: var(--font-serif);
  text-align: center;
  margin-top: 40px;
}
.stat-banner {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  padding: 14px 16px;
  background: rgba(244, 196, 92, 0.05);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  margin-bottom: 18px;
}
.stat-banner b {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* ── Reading timeline (stat panel) ─────────────────────────────── */
/*
  3-column grid: [year 52px] [spine 14px] [content 1fr]
  The track draws one continuous line via ::before; each node places
  its own dot over it. Gap markers show temporal distance between stories.
*/
.rtl-track {
  position: relative;
  padding: 4px 0 32px;
}
/* The single continuous vertical line */
.rtl-track::before {
  content: '';
  position: absolute;
  /* left = year-col(52) + gap(10) + half-spine(7) = 69px */
  left: 69px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--hairline) 6%,
    var(--hairline) 94%,
    transparent
  );
  pointer-events: none;
}

/* Story node */
.rtl-node {
  display: grid;
  grid-template-columns: 52px 14px 1fr;
  gap: 0 10px;
  padding: 10px 8px 10px 0;
  cursor: pointer;
  border-radius: 6px;
  align-items: flex-start;
  transition: background 150ms;
  position: relative;
}
.rtl-node:hover {
  background: rgba(244, 196, 92, 0.05);
}
.rtl-node:hover .rtl-dot {
  box-shadow: 0 0 0 3px rgba(244, 196, 92, 0.2),
              0 0 8px  rgba(244, 196, 92, 0.35);
  transform: scale(1.15);
}

/* Year label — right-aligned, tabular, muted */
.rtl-year {
  text-align: right;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1;
  padding-top: 5px;
  letter-spacing: 0.02em;
}

/* Spine column — just the dot; line comes from .rtl-track::before */
.rtl-spine {
  display: flex;
  justify-content: center;
  padding-top: 3px;
}
.rtl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1.5px var(--accent),
              0 0 6px rgba(244, 196, 92, 0.3);
  flex-shrink: 0;
  transition: box-shadow 150ms, transform 150ms;
}

/* Content */
.rtl-content { min-width: 0; }
.rtl-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin: 0 0 3px;
  /* allow wrapping — no ellipsis; titles are short enough */
}
.rtl-meta {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.3;
}

/* Gap marker — same grid alignment as nodes */
.rtl-gap {
  display: grid;
  grid-template-columns: 52px 14px 1fr;
  gap: 0 10px;
  align-items: center;
  padding: 2px 0;
}
/* Dashed continuation of the spine line through the gap (2nd child = spine col) */
.rtl-gap-line {
  height: 28px;
  width: 1px;
  justify-self: center;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.18) 0px,
    rgba(255,255,255,0.18) 3px,
    transparent 3px,
    transparent 7px
  );
}
.rtl-gap-label {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--ink-muted);
  opacity: 0.5;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
}

/* ═════════════════════════════════════════════════════════════════
   V5 — Reading time badge
   ═════════════════════════════════════════════════════════════════ */

.read-time {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.read-time::before {
  content: "◷";
  font-size: 10px;
  opacity: 0.65;
}

/* ═════════════════════════════════════════════════════════════════
   V5 — First-run onboarding overlay
   ═════════════════════════════════════════════════════════════════ */

.onboarding {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 400ms ease-out;
  overflow-y: auto;
  padding: 24px;
}
.onboarding-inner {
  max-width: 560px;
  width: 100%;
  text-align: center;
}
.ob-brand { margin-bottom: 44px; }
.ob-mark {
  display: block;
  font-size: 42px;
  color: var(--accent);
  margin-bottom: 10px;
  line-height: 1;
}
.ob-title {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
  font-style: italic;
}
.ob-sub {
  color: var(--ink-muted);
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}
.ob-prompt {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 22px;
  font-style: italic;
}
.ob-regions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.ob-region-btn {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 18px 12px 14px;
  cursor: pointer;
  font-family: var(--font-ui);
  color: var(--ink);
  text-align: center;
  transition: border-color 150ms, background 150ms, transform 120ms;
  touch-action: manipulation;
}
.ob-region-btn:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(244,196,92,0.1);
}
.ob-region-icon {
  display: block;
  font-size: 26px;
  margin-bottom: 8px;
  line-height: 1;
}
.ob-region-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.ob-region-sub {
  display: block;
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 4px;
  line-height: 1.4;
}
.ob-skip {
  margin: 0;
  font-size: 13px;
}
.ob-skip a {
  color: var(--ink-muted);
  text-decoration: none;
  font-style: italic;
}
.ob-skip a:hover { color: var(--ink); }

/* Onboarding mobile */
@media (max-width: 640px) {
  .onboarding { align-items: flex-start; padding-top: 48px; }
  .ob-regions { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ob-title { font-size: 24px; }
  .ob-prompt { font-size: 16px; }
  .ob-brand { margin-bottom: 32px; }
  .ob-region-btn { padding: 14px 10px 12px; }
  .ob-region-icon { font-size: 22px; }
}

/* ─── Country picker (replaces region tiles in onboarding) ─────────── */
.ob-country-picker {
  display: block; /* override the 3-col grid */
  text-align: left;
  margin-bottom: 24px;
}
.ob-search-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 11px 16px;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  outline: none;
  margin-bottom: 8px;
  transition: border-color 150ms;
}
.ob-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(244,196,92,0.15); }
.ob-search-input::placeholder { color: var(--ink-muted); }
.ob-country-list {
  list-style: none;
  margin: 0;
  padding: 2px 0;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
}
.ob-country-list li { margin: 0; padding: 0; }
.ob-country-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  color: var(--ink);
  text-align: left;
  font-size: 14px;
  transition: background 110ms;
}
.ob-country-item:hover,
.ob-country-item:focus-visible { background: var(--surface-2); outline: none; }
.ob-country-flag { font-size: 18px; line-height: 1; flex-shrink: 0; }
.ob-country-name { flex: 1; }
@media (max-width: 640px) {
  .ob-country-list { max-height: 240px; }
  .ob-search-input { font-size: 16px; } /* prevents iOS zoom on focus */
}

/* ═════════════════════════════════════════════════════════════════
   V6 — Sign-in screen
   ═════════════════════════════════════════════════════════════════ */

.signin-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 72; /* above onboarding */
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 400ms ease-out;
  padding: 24px;
}
.signin-inner {
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.signin-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.signin-prompt {
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  color: var(--ink-muted);
  margin: 0 0 8px;
  line-height: 1.5;
}
.signin-google-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #3c4043;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: box-shadow 150ms, transform 100ms;
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
  touch-action: manipulation;
  min-width: 220px;
  justify-content: center;
}
.signin-google-btn:hover {
  box-shadow: 0 3px 14px rgba(0,0,0,0.5);
  transform: translateY(-1px);
}
.signin-google-btn:active { transform: scale(0.97); }
.signin-skip {
  margin: 0;
  font-size: 13px;
}
.signin-skip a {
  color: var(--ink-muted);
  text-decoration: none;
  font-style: italic;
}
.signin-skip a:hover { color: var(--ink); }

.signin-error {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #e9a14c;
  background: rgba(233, 161, 76, 0.08);
  border: 1px solid rgba(233, 161, 76, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
}

@media (max-width: 640px) {
  .signin-screen { align-items: flex-start; padding-top: 60px; }
  .signin-prompt { font-size: 15px; }
}

/* ═════════════════════════════════════════════════════════════════
   V6 — Global generation widget (floating, always visible during gen)
   ═════════════════════════════════════════════════════════════════ */

.gen-widget {
  position: fixed;
  /* Always sit above the timebar — height is measured at runtime into --timebar-h
     (era labels + slider + controls + country chips), so the widget never overlaps. */
  bottom: calc(var(--timebar-h, 120px) + 16px);
  right: 20px;
  width: 260px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  z-index: 60;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: fadeIn 200ms ease-out;
  overflow: hidden;
}
.gen-widget-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 8px;
}
.gen-widget-mark {
  font-size: 18px;
  color: var(--accent);
  animation: spin 2s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.gen-widget-text {
  flex: 1;
  min-width: 0;
}
.gen-widget-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.03em;
}
.gen-widget-words {
  display: block;
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 1px;
}
.gen-widget-cancel {
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 4px;
  border-radius: 4px;
  transition: color 100ms;
  flex-shrink: 0;
}
.gen-widget-cancel:hover { color: var(--ink); }
.gen-widget-bar {
  height: 3px;
  background: var(--surface);
}
.gen-widget-fill {
  height: 100%;
  background: var(--accent);
  transition: width 300ms ease-out;
}
/* Error state */
.gen-widget--error { border-color: rgba(255,100,80,0.4); }
.gen-widget--error .gen-widget-mark { color: #ff6450; animation: none; }
.gen-widget--error .gen-widget-label { color: #ff8070; }
.gen-widget--error .gen-widget-fill { background: #ff6450; }
/* Done state */
.gen-widget--done { border-color: rgba(244,196,92,0.45); cursor: pointer; }
.gen-widget--done .gen-widget-mark { animation: none; color: var(--accent); }
.gen-widget--done .gen-widget-label {
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gen-widget--done .gen-widget-fill { background: var(--accent); }
.gen-widget-cta {
  display: block;
  width: calc(100% - 28px);
  margin: 0 14px 10px;
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 0;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: opacity 120ms;
}
.gen-widget-cta:hover { opacity: 0.85; }

@media (max-width: 640px) {
  .gen-widget {
    bottom: calc(var(--timebar-h, 130px) + 12px);
    right: 12px;
    left: 12px;
    width: auto;
  }
}

/* ═════════════════════════════════════════════════════════════════
   V5 — Mobile-first responsive layout
   Breakpoints: phone ≤ 640px | tablet 641–1024px
   Philosophy: globe is primary on tablet+; card-list feel on phone.
   Panels become bottom sheets on phone so thumb reach is natural.
   ═════════════════════════════════════════════════════════════════ */

/* Shared slide-up animation used by all bottom sheets */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0.85; }
  to   { transform: translateY(0);    opacity: 1;    }
}

/* ── Tablet (641–1024px): modest adjustments ─────────────────── */
@media (max-width: 1024px) and (min-width: 641px) {
  .country-panel { width: 420px; }
  .stats-panel   { width: 340px; }
  .reader-body > div { font-size: 17px; }
}

/* ── Phone (≤ 640px): full mobile redesign ───────────────────── */
@media (max-width: 640px) {

  /* ── Topbar: keep Surprise Me, collapse brand text ── */
  .topbar {
    grid-template-columns: auto 1fr auto;
    padding: 10px 14px;
    gap: 6px;
  }
  .brand-name   { display: none; }          /* keep ◐ mark, hide word */
  .brand-mark   { font-size: 20px; }
  .topbar-center { justify-self: center; }
  .surprise-btn { padding: 7px 14px; font-size: 12px; gap: 5px; }
  .surprise-btn .sparkle { font-size: 12px; }
  .topbar-right { gap: 4px; }
  .iconbtn      { padding: 6px 8px; font-size: 11px; }
  /* WCAG 2.5.5/2.5.8 tap targets — 44px min hit height on phone controls (round avatar excluded) */
  .surprise-btn, .iconbtn:not(.auth-avatar) { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* ── Timebar: compact, larger touch targets ── */
  .timebar { padding: 8px 12px 12px; }
  .era-labels { display: none; }            /* too crowded at 390px */
  .slider-row { gap: 8px; }
  .slider-bound { font-size: 11px; min-width: 42px; }
  #timeSlider::-webkit-slider-thumb { width: 22px; height: 22px; }
  .slider-controls { gap: 6px; margin-top: 4px; font-size: 11px; }
  .window-label { padding: 0 4px; }
  .iconbtn[id="zoomIn"], .iconbtn[id="zoomOut"] {
    padding: 7px 11px;
    font-size: 13px;
  }

  /* ── Overlay stats pill ── */
  .overlay-stats { font-size: 11px; padding: 5px 10px; }

  /* ── Reader: comfortable mobile reading ── */
  .reader-header {
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
    gap: 6px;
  }
  /* Back button must never shrink — it's the primary escape on mobile */
  #readerBack { flex-shrink: 0; }
  /* Reader meta (location · dates) truncates rather than squishing the back button */
  .reader-meta {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    gap: 4px;
  }
  .reader-body {
    padding: 24px 20px 40px;
  }
  .reader-body > div {
    font-size: 17px;
    line-height: 1.9;
  }
  .reader-body h1 {
    font-size: 20px;
    line-height: 1.25;
    margin-bottom: 10px;
  }
  .reader-body h2 {
    font-size: 19px;
    margin-top: 36px;
    padding-top: 24px;
  }
  .reader-body h3 {
    font-size: 17px;
    margin-top: 28px;
    margin-bottom: 8px;
  }
  .reader-body p  { margin: 10px 0; }
  .reader-footer  { padding: 16px 20px; }
  .reader-causal  { max-width: 100%; }
  .causal-chip    { font-size: 11px; padding: 3px 8px; }

  /* ── Chapter image label on phone ── */
  .rci-label { font-size: 12px; bottom: 12px; left: 16px; right: 16px; }

  /* ── Chapter header progress ── */
  .rcp-arrow { width: 26px; height: 26px; font-size: 13px; }
  .rcp-label { font-size: 11px; min-width: 28px; }

  /* ── Chapter bottom nav (now a persistent footer outside scroll) ── */
  .reader-chapter-nav { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .rcn-btn { font-size: 13px; padding: 10px 16px; min-width: 70px; }
  .rcn-dot { width: 7px; height: 7px; }

  /* ── What's next: horizontal swipe carousel ── */
  .whats-next          { padding: 0 16px; margin-top: 16px; }
  .whats-next-heading  { font-size: 14px; margin-bottom: 14px; }
  .whats-next-cards {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    /* hide scrollbar — swiping is the gesture */
    scrollbar-width: none;
  }
  .whats-next-cards::-webkit-scrollbar { display: none; }
  .whats-next-card {
    min-width: 230px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .wn-title { font-size: 15px; }
  .wn-hook  { font-size: 12px; }

  /* ── Preview card: full-width bottom sheet ── */
  .preview {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0;
    border: none;
    border-top: 1px solid var(--hairline);
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    animation: slideUp 200ms ease-out;
    z-index: 30;
  }
  .preview h3 { font-size: 18px; }
  .preview-actions { gap: 6px; }
  .preview-actions .primary { flex: 1; text-align: center; }

  /* ── Country panel: bottom sheet ── */
  .country-panel {
    top: auto; bottom: 0;
    left: 0; right: 0;
    width: 100%; max-width: 100%;
    height: 88vh;
    height: 88dvh;   /* dynamic viewport: 88vh is computed against the LARGER (toolbar-hidden)
                        viewport, which pushed the header + ✕ above the fold on mobile. dvh tracks
                        the actually-visible area, so the close button is always on-screen. */
    border-left: none;
    border-top: 1px solid var(--hairline);
    border-radius: 20px 20px 0 0;
    /* Same glass language as desktop, oriented for a bottom sheet: top edge slightly
       translucent so it melts into the globe above it. */
    background: linear-gradient(180deg, rgba(9,11,19,0.80) 0%, rgba(9,11,19,0.94) 18%);
    backdrop-filter: blur(18px) saturate(112%);
    -webkit-backdrop-filter: blur(18px) saturate(112%);
    box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.42);
    animation: slideUp 280ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  /* Drag handle */
  .country-panel-header { padding: 24px 20px 14px; position: relative; }
  /* Unmistakable close target on bottom sheets: solid, high-contrast circular button (44px tap). */
  #countryClose, #statsClose {
    min-width: 44px; min-height: 44px; padding: 8px 12px; font-size: 19px; line-height: 1;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: var(--ink);
  }
  .country-panel-header::before {
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 2px;
  }
  .country-panel-header h2 { font-size: 20px; }
  .cp-section { padding: 14px 20px; }
  .cp-explore-item { min-height: 48px; padding: 8px 0; }
  .cp-read-item    { min-height: 44px; }
  .cp-controls     { gap: 12px; }

  /* ── Stats panel: bottom sheet ── */
  .stats-panel {
    position: fixed;
    top: auto; bottom: 0;
    left: 0; right: 0;
    width: 100%;
    height: 72vh;
    height: 72dvh;   /* dynamic viewport — keep the header + close button on-screen on mobile */
    border-left: none;
    border-top: 1px solid var(--hairline);
    border-radius: 20px 20px 0 0;
    animation: slideUp 280ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .stats-panel-header {
    padding: 20px 20px 14px;
    position: relative;
  }
  .stats-panel-header::before {
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 2px;
  }

  /* ── Filters panel: bottom sheet ── */
  .filters-panel {
    top: auto; bottom: 0;
    left: 0; right: 0;
    width: 100%;
    height: 80vh;
    border-left: none;
    border-top: 1px solid var(--hairline);
    border-radius: 20px 20px 0 0;
    animation: slideUp 280ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .filters-header {
    padding: 20px 20px 14px;
    position: relative;
  }
  .filters-header::before {
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 2px;
  }
  .chip { padding: 5px 11px; touch-action: manipulation; }

  /* ── Ghost items: bigger tap targets on mobile ── */
  .cp-ghost-item { padding: 12px 0; gap: 8px; }
  .cp-write-btn {
    font-size: 13px;
    padding: 8px 14px;
    min-height: 38px;
    touch-action: manipulation;
  }
  .cp-ghost-title { font-size: 14px; }

  /* ── Generate form: readable on mobile ── */
  .cp-gen-label    { font-size: 15px; }
  .cp-gen-progress { font-size: 12px; }
  .cp-gen-cancel   { font-size: 12px; padding: 7px 14px; min-height: 36px; touch-action: manipulation; }
  .cp-gen-err-msg  { font-size: 13px; }
  .cp-request-btn  { min-height: 44px; font-size: 14px; }

  /* ── Country panel THEME tokens + era slider: bigger touch targets ── */
  .cp-theme-chip {
    min-height: 40px;
    font-size: 13px;
    touch-action: manipulation;
  }
  .cp-era-range { height: 6px; touch-action: manipulation; }
  .cp-era-range::-webkit-slider-thumb { width: 24px; height: 24px; }
  .cp-era-range::-moz-range-thumb { width: 20px; height: 20px; }

  /* ── Help card ── */
  .help-card {
    padding: 24px 20px;
    width: 96%;
    max-height: 88vh;
  }
  .help-card h2 { font-size: 20px; }
  .help-card ul  { font-size: 13px; }
}

/* Honor the OS "reduce motion" setting — neutralize non-essential animation + transition.
   (Globe auto-rotate is also gated in JS via matchMedia.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}