/* Shared card, type, spacing and map rules. Colors come from styles.css. */
:root{
  --space-xs:8px;
  --space-sm:12px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --card-radius:7px;
  --card-padding:24px;
  --card-padding-compact:20px;
  --type-page:clamp(2rem,6vw,3.125rem);
  --type-section:1.625rem;
  --type-card:1.375rem;
  --type-compact-title:1.25rem;
  --type-subtitle:1.125rem;
  --type-meta:.9375rem;
  --type-small:.8125rem;
  --font-help:400 13px/1.45 system-ui,sans-serif;
  --type-label:.75rem;
  --map-opacity-light:.09;
  --map-opacity-dark:.10;
}

/* Full cards share their frame; compact grids keep proportionate padding. */
.app .entry,.app .background,.app .reading-note,
.app .about-card,.app .timeline-card,.app .calendar-month,
.app .reading-progress,.app .calendar-export,
.app .stat-metric,.app .stat-pie-card,.app .stats-streak,
.app .stats-pages,.app .stats-word-calendar,
.app .chapter-card,.app .character-track,.app .day-row,
.app .story-locked,.app .story-no-columns,.app .story-scroll{
  border-radius:var(--card-radius);
}
.app .entry,.app .background,.app .reading-note,
.app .about-card,.app .stats-streak,.app .stats-pages,
.app .stats-word-calendar,.app .story-locked,.app .story-no-columns,.app .calendar-export{
  padding:var(--card-padding);
}
.app .calendar-month,.app .stat-metric,.app .stat-pie-card,
.app .chapter-card,.app .day-row,.app .reading-progress{
  padding:var(--card-padding-compact);
}
.app .character-track>summary,.app .character-track .chapter-dates{
  padding:var(--card-padding-compact);
}
html .app .background,html .app .reading-note{background:var(--surface-secondary)}

/* Serif headings and metadata; italic introductions; quiet sans-serif labels. */
.app>header h1:not(.site-logo-heading){font-size:var(--type-page);font-weight:500;line-height:1.2;margin:var(--space-xs) 0}
.app>header>p{
  max-width:42rem;margin:var(--space-sm) auto 0;
  color:var(--muted);font-size:var(--type-subtitle);font-style:italic;line-height:1.5;
}
.app .about-copy h2,.app .about-intro h2,.app .acknowledgements-card h2,
.app .about-disclaimer h2,.app .edition-card h2,.app .soundscape-panel>h2,
.app.stats-page section>h2,.app .chapter-volume>h2{
  font-size:var(--type-section);font-weight:500;line-height:1.3;
  margin-bottom:var(--space-md);
}
.app .reading-card .party,.app .background-party h3,
.app .elsewhere-event h3,.app .character-track h2{
  font-size:var(--type-card);font-weight:400;line-height:1.3;
}
.app .reading-card .party{margin-bottom:var(--space-xs)}
.app .reading-card .meta{font-size:var(--type-meta);line-height:1.5}
.app .calendar-month h2,.app .calendar-export h2,.app .chapter-book>h3,
.app .chapter-card .chapter-title{
  font-size:var(--type-compact-title);font-weight:500;line-height:1.35;
}
.app .stat-metric-heading h3,.app .stat-pie-card h3{
  font-size:var(--type-subtitle);font-weight:500;line-height:1.35;
}
.app .reading-location{font-weight:600;line-height:1.5}
.app .character-count,.app .chapter-number,.app .index-count,
.app .story-party,.app .streak-numbers span{
  font-size:var(--type-label);font-weight:600;line-height:1.45;
}
.app .chapters-method{font-size:var(--type-small);line-height:1.5}

/* Close relationships use 8–16px; cards and major sections use 24–32px. */
.app>header{margin-bottom:var(--space-lg)}
.app>header.ornament-header{margin-bottom:0}
.app>.control{margin:var(--space-lg) auto}
.app .entry,.app .background,.app .reading-note{margin-bottom:var(--space-lg)}
.app .about-card{margin:var(--space-lg) auto}
.app .timeline-card{margin-top:var(--space-lg)}
.app .about-copy p,.app .about-disclaimer p{margin-bottom:var(--space-md)}
.app .edition-card p{margin-bottom:var(--space-lg)}
.app .calendar-months{gap:var(--space-lg);margin-bottom:var(--space-xl)}
.app .calendar-month h2{margin-bottom:var(--space-md)}
.app.stats-page section:not(.control){margin-top:var(--space-xl);margin-bottom:var(--space-xl)}
.app .stats-metrics,.app .stats-pies,.app .chapter-grid,.app .day-list{gap:var(--space-md)}
.app .stats-method{margin:var(--space-md) 0 var(--space-lg)}
.app .chapter-volume{margin:var(--space-xl) 0}
.app .chapter-book{margin:var(--space-lg) 0}
.app .character-track{margin:var(--space-md) 0}
.app .chapter-card h4{margin-bottom:var(--space-sm)}
.app .index-switch{margin:var(--space-lg) 0 var(--space-md)}
.app .chapters-edition,.app .index-tools{margin:var(--space-lg) 0}
.app .story-controls .story-date-control{margin:var(--space-lg) 0 var(--space-md)}
.app .story-note{margin:var(--space-md) 0}
.app .journey-timeline{margin-top:var(--space-lg);padding-top:var(--space-md)}
.app .background-party .journey-timeline{margin-top:var(--space-md)}
.app #content>.day{margin-top:var(--space-lg);margin-bottom:var(--space-lg)}
.app .nav{margin:var(--space-xl) auto}
.app>.page-ornament-divider{margin:var(--space-lg) 0}
.app>.page-ornament-divider+*{margin-top:0}

/* Retain the approved map tones, crop/position behavior and print exclusion. */
html::before{opacity:var(--map-opacity-light)}
html[data-theme="dark"]::before{opacity:var(--map-opacity-dark)}

@media(max-width:650px){
  :root{--card-padding:20px;--card-padding-compact:16px;--type-section:1.5rem;--type-label:.6875rem}
  .app .stats-metrics,.app .stats-pies,.app .chapter-grid,.app .day-list{gap:var(--space-sm)}
  .app .calendar-months{gap:var(--space-md)}
  .app .character-track h2{font-size:var(--type-compact-title)}
}

/* Preserve the established view-switch colors and green statistics emphasis. */
html .app.chapters-page .index-switch button:not(.active){background:var(--panel);border-color:var(--line);color:var(--muted)}
html .app.chapters-page .index-switch button:not(.active):hover,html .app.chapters-page .index-switch button:not(.active):focus{background:var(--button-dim);color:var(--ink)}
html .app.chapters-page .index-switch button.active,html .app.chapters-page .index-switch button.active:hover,html .app.chapters-page .index-switch button.active:focus{background:var(--ink);border-color:var(--ink);color:var(--paper)}
html .app.stats-page .stat-metric-heading strong,html .app.stats-page .stat-pie-card strong{color:var(--accent)}

@media(max-width:650px){.app.journey-page .journey-bottom-nav{margin-left:18px;margin-right:18px}}


/* Instructional text shares typography; each context retains its layout. */
html :is(.app,.site-footer) .page-help{font:var(--font-help);text-wrap:balance}
html :is(.app,.site-footer) .page-help p{text-wrap:balance}
.app .stats-method,.app .story-note,
.edition-selection-status,.edition-cover-caption,
.elsewhere-chronology-note,.print-summary-explanation,
.qr-help,.journey-swipe-hint,.app .calendar-export>p{
  font:var(--font-help);color:var(--muted);text-wrap:balance;
}
.word-date-tooltip{font:400 var(--type-label)/1.5 system-ui,sans-serif;border-radius:var(--card-radius)}
.word-date-tooltip strong{font-weight:600}

/* Top and bottom date controls share their horizontal frame. */
.app:has(#content) > .nav{padding-inline:13px}
.app.journey-page .journey-bottom-nav{padding-inline:15px}
@media(max-width:650px){.app.journey-page .journey-bottom-nav{padding-inline:13px}}
/* A pause is a background update, with the shared surface and card typography. */
.app .tolkien-hiatus{background:var(--surface-secondary);text-align:center}
.app .tolkien-hiatus h3{font-size:var(--type-card);font-weight:500;margin:6px 0 16px}
.app .tolkien-hiatus .mode-eyebrow{font:600 var(--type-label)/1.45 system-ui,sans-serif;margin:0 0 6px}
/* Native ranges otherwise change their accent tint on hover and focus. */
.text-size-row input[type="range"]{appearance:none;background:transparent;height:20px;padding:0;border:0;box-shadow:none;outline:none}
.text-size-row input[type="range"]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) 0 var(--range-progress,22%),var(--line) var(--range-progress,22%) 100%)}
.text-size-row input[type="range"]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:var(--accent);box-shadow:none}
.text-size-row input[type="range"]::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) 0 var(--range-progress,22%),var(--line) var(--range-progress,22%) 100%)}
.text-size-row input[type="range"]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--accent);box-shadow:none}

.elsewhere-source{font:var(--font-help);text-wrap:balance}
.on-date-reading-link{display:inline-block;margin-top:16px}