/* Final Claude Design visual layer. App behaviour and audio catalogue stay in app.js. */
:root {
  --bg: #ffffff;
  --bg-alt: #f7faf7;
  --bg-deep: #edf5ef;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-soft: #f7faf7;
  --line: #e2e8e3;
  --ink: #142219;
  --ink-soft: #506055;
  --muted: #68756c;
  --faint: #8d998f;
  --accent: #1c7a45;
  --accent-strong: #126337;
  --accent-soft: #edf8f0;
  --sand: #dce9df;
  --shadow: 0 18px 48px rgba(20, 50, 28, .07);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --font-display: "Geist", system-ui, -apple-system, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, sans-serif;
}

body {
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
}

body::before { display: none; }

.app-shell { width: min(1180px, calc(100% - 40px)); padding: 14px 0 76px; }

.topbar {
  position: sticky;
  top: 0;
  margin: 0 0 24px;
  padding: 14px 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.brand-block { gap: 12px; }
.brand-mark { font-family: var(--font-body); font-size: 1rem; font-weight: 750; letter-spacing: -.035em; color: var(--accent); }
.brand-copy { display: none; }
.back-link { min-height: 36px; border: 0; padding: 0 4px; color: var(--muted); font-size: .82rem; }
.back-link:hover { color: var(--accent); background: transparent; }
.language-toggle { padding: 3px; border-color: var(--line); background: #fff; box-shadow: 0 2px 8px rgba(20,50,28,.04); }
.language-button { min-width: 38px; min-height: 31px; font-family: var(--font-body); font-size: .68rem; }
.language-button.is-active { background: var(--accent); color: #fff; }

.player-layout { gap: 28px; margin-top: 0; }
.hero-panel, .route-panel, .briefing-panel, .player-shell {
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: none;
}
.hero-panel {
  padding: clamp(30px, 6vw, 68px);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #f7fcf8 0%, #fff 54%, #f3faf5 100%);
}
.hero-main { max-width: 760px; }
.hero-kicker, .section-kicker { color: var(--accent); font-family: var(--font-body); font-weight: 750; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.hero-panel h1 { max-width: 720px; margin: 12px 0 18px; font-family: var(--font-body); font-size: clamp(2.15rem, 5vw, 4.45rem); line-height: 1.03; letter-spacing: -.065em; font-weight: 750; }
.hero-copy { max-width: 650px; color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.13rem); line-height: 1.7; }
.hero-pills { gap: 9px; margin-top: 28px; }
.hero-pill {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid #d8e8db;
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  color: var(--ink);
  box-shadow: 0 3px 10px rgba(20,50,28,.03);
  font-family: var(--font-body);
  font-weight: 650;
}
.hero-pill:hover, .hero-pill:focus-visible { border-color: var(--accent); color: var(--accent); background: #fff; }

.route-panel, .briefing-panel { border-radius: var(--radius-xl); padding: clamp(22px, 4vw, 42px); }
.route-panel-head, .briefing-head { gap: 24px; }
.route-panel h2, .briefing-panel h2, .library-panel h2 { font-family: var(--font-body); letter-spacing: -.045em; font-size: clamp(1.65rem, 3.3vw, 2.55rem); line-height: 1.12; }
.route-copy, .briefing-copy { color: var(--ink-soft); line-height: 1.65; }
.start-route-button, .route-secondary-button, .inline-map-link, .inline-source-link {
  border-radius: 14px;
  font-family: var(--font-body);
  font-weight: 700;
}
.start-route-button { background: var(--accent); color: #fff; box-shadow: 0 8px 16px rgba(28,122,69,.17); }
.start-route-button:hover { background: var(--accent-strong); }
.route-secondary-button { border-color: #cfe2d3; background: #fff; color: var(--accent); }
.route-map-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.route-map-toolbar { background: #fff; border-color: var(--line); }
.route-map-toolbar-layers { padding-top: 0; }
.map-layer-chip { border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.map-layer-button { border-radius: 14px; border-color: var(--line); background: #fff; color: var(--muted); }
.map-layer-button.is-active { border-color: #b8ddc1; background: var(--accent-soft); color: var(--accent); }
.map-layer-button.is-locked,
.map-layer-button:disabled { cursor: default; opacity: 1; }
.route-fallback-link { color: var(--muted); }

.briefing-panel { background: #fbfdfb; }
.prepare-switcher, .catalog-voice-switcher { padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.prepare-chip, .catalog-voice-button { border-radius: 10px; font-family: var(--font-body); font-weight: 650; }
.prepare-chip.is-active, .catalog-voice-button.is-active { background: var(--accent); color: #fff; }
.prepare-card, .prepare-group-card, .prepare-fact-card, .prepare-time-card {
  border-color: var(--line); background: #fff; border-radius: var(--radius-lg); box-shadow: none;
}
.prepare-copy-button { border-radius: 999px; border-color: #cfe2d3; color: var(--accent); }
.prepare-time { color: var(--accent); }
.prepare-checklist li::before { background: var(--accent); }

.player-shell { grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr); overflow: hidden; border-radius: var(--radius-xl); }
.player-panel { padding: clamp(28px, 4vw, 48px); background: linear-gradient(145deg, #f1f9f3, #fff); }
.library-panel { border-left-color: var(--line); background: #fff; }
.transport-panel { gap: 30px; }
.transport-label { color: var(--accent); font-family: var(--font-body); font-weight: 750; letter-spacing: .1em; }
.transport-meta strong { font-family: var(--font-body); font-size: clamp(1.45rem, 3vw, 2.25rem); letter-spacing: -.045em; }
.duration-pill { border-radius: 999px; background: #fff; border-color: var(--line); color: var(--muted); }
.progress-slider { accent-color: var(--accent); }
.transport-button { border-radius: 14px; font-family: var(--font-body); font-weight: 700; }
.transport-primary { background: var(--accent); color: #fff; box-shadow: 0 9px 18px rgba(28,122,69,.2); }
.transport-secondary { border-color: #cfe2d3; color: var(--accent); background: #fff; }
.library-panel { padding: 30px; }
.route-map-embed { min-height: 460px; background: #f7f7f5; }
.route-map-marker { width: 30px; height: 30px; border-radius: 999px; background: #1c7a45; color: #fff; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); font: 700 13px "Plus Jakarta Sans", sans-serif; }
.route-map-marker-optional { background: #1c7a45; }
.route-map-marker-cafe { width: 26px; height: 26px; background: #fff; color: #125e33; border: 2.5px solid #1c7a45; font-size: 13px; }
.route-map-marker-secret { width: 26px; height: 26px; background: #fff; color: #23211e; border: 2.5px solid #23211e; font-size: 11px; }
.route-map-stop-label { padding: 5px 8px; border: 1px solid #bfd9c9; border-radius: 8px; background: #fff; color: #125e33; box-shadow: 0 2px 8px rgba(20,50,28,.12); font: 700 11px var(--font-body); }
.route-map-stop-label-cafe { border-color: #1c7a45; color: #125e33; }
.route-map-stop-label-secret { border-color: #2f2e2b; color: #2f2e2b; }
.chapter-card { border-color: var(--line); border-radius: 16px; background: #fff; }
.chapter-card.is-open { border-color: #c6e2cb; box-shadow: 0 8px 20px rgba(28,122,69,.06); }
.chapter-card-head { padding: 18px; }
.chapter-card-head strong { font-family: var(--font-body); }
.chapter-toggle-indicator { color: var(--accent); }
.catalog-track-row { border-color: var(--line); background: #fff; }
.catalog-track-row.is-playable:hover, .catalog-track-row.is-active { border-color: #b8ddc1; background: var(--accent-soft); }
.catalog-track-order { color: var(--accent); }
.catalog-track-state.is-live { color: var(--accent); background: #e9f7ed; }
.catalog-track-state.is-current { color: #fff; background: var(--accent); }

.discover-grid { gap: 20px; }
.discover-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.discover-card-head { padding: 26px 26px 8px; }
.cafe-card { border-color: var(--line); border-radius: 16px; background: #fff; box-shadow: none; }
.cafe-card:hover { border-color: #b8ddc1; box-shadow: 0 12px 30px rgba(20,50,28,.08); }
.cafe-card-media { border-radius: 14px 14px 0 0; }
.cafe-card-chip { border-radius: 999px; backdrop-filter: blur(8px); }
.cafe-category { color: var(--accent); }
.cafe-note { border-left-color: var(--accent); background: var(--accent-soft); }
.inline-map-link { background: var(--accent); color: #fff; }
.inline-source-link { border-color: #cfe2d3; color: var(--accent); }

@media (max-width: 860px) {
  .app-shell { width: min(100% - 24px, 680px); }
  .topbar { margin-bottom: 14px; }
  .back-link { font-size: 0; min-width: 24px; }
  .back-link::before { content: "←"; font-size: 1.1rem; }
  .player-shell { grid-template-columns: 1fr; }
  .library-panel { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .app-shell { width: min(100% - 20px, 680px); padding-bottom: 36px; }
  .topbar-left { gap: 6px; }
  .hero-panel, .route-panel, .briefing-panel { border-radius: 20px; }
  .hero-panel { padding: 28px 22px; }
  .hero-panel h1 { font-size: 2.3rem; }
  .route-panel, .briefing-panel { padding: 22px; }
  .route-panel-actions { align-items: stretch; }
  .start-route-button, .route-secondary-button { justify-content: center; }
  .player-panel, .library-panel { padding: 24px 20px; }
}

/* Exact layout proportions from the final Claude Design composition.
   Only the typeface intentionally stays local (Geist). */
body { background: #fff; }
.app-shell { width: 100%; max-width: none; padding: 0 0 104px; }
.topbar { position: static; display: block; margin: 0; padding: 0; border: 0; background: #fff; backdrop-filter: none; }
.topbar > div { max-width: 1160px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.topbar { border-bottom: 1px solid #e7e5e1; }
.topbar-left { gap: 16px; }
.back-link { min-height: 48px; padding: 0 18px; border: 1.5px solid #bfd9c9; border-radius: 14px; color: #23211e; background: #fff; font-size: 14px; font-weight: 700; }
.back-link:hover { color: #125e33; border-color: #1c7a45; }
.brand-mark { display: none; }
.brand-copy { display: flex; gap: 2px; }
.brand-copy strong { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: #23211e; }
.brand-copy span { font-size: 12px; color: #8a8680; }
.language-toggle { gap: 4px; padding: 4px; border: 1.5px solid #bfd9c9; border-radius: 14px; box-shadow: none; }
.language-button { min-width: 44px; min-height: 38px; border-radius: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.language-button.is-active { color: #125e33; background: #eaf5ee; }

.player-layout { display: block; margin: 0; }
.hero-panel, .route-panel, .briefing-panel { max-width: 1160px; margin: 0 auto; padding: 0 24px 56px; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.hero-panel { padding-top: 56px; padding-bottom: 40px; background: #fff; }
.hero-main { max-width: none; }
.hero-kicker, .section-kicker { margin: 0 0 16px; color: #125e33; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.hero-panel h1 { max-width: 15ch; margin: 0 0 20px; font-family: var(--font-body); font-size: clamp(36px, 5.2vw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.hero-copy { max-width: 60ch; margin: 0 0 32px; color: #6b6862; font-size: 18px; line-height: 1.6; }
.hero-pills { gap: 10px; margin: 0; }
.hero-pill { gap: 8px; min-height: 48px; padding: 0 16px 0 18px; border: 1.5px solid #bfd9c9; border-radius: 14px; box-shadow: none; color: #23211e; font-size: 14px; }
.hero-pill::after { content: "›"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: #eaf5ee; color: #125e33; font-size: 12px; line-height: 1; }

.route-panel-head, .briefing-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 24px; }
.route-panel-head > div:first-child, .briefing-head > div:first-child { max-width: 670px; }
.route-panel h2, .briefing-panel h2, .library-panel h2 { margin: 0 0 12px; color: #23211e; font-family: var(--font-body); font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.route-copy, .briefing-copy { max-width: 60ch; margin: 0; color: #6b6862; font-size: 16px; line-height: 1.6; }
.route-panel-actions { gap: 10px; flex-wrap: wrap; }
.start-route-button, .route-secondary-button { min-height: 56px; padding: 0 24px; border: 1.5px solid #bfd9c9; border-radius: 14px; background: #fff; color: #23211e; box-shadow: none; font-size: 15px; }
.start-route-button { background: #1c7a45; border-color: #1c7a45; color: #fff; }
.route-map-card { border: 1.5px solid #e7e5e1; border-radius: 18px; background: #fff; }
.route-map-toolbar { padding: 16px 18px; border-color: #e7e5e1; }
.map-layer-chip { background: #eaf5ee; color: #125e33; font-size: 12px; }
.map-layer-caption { color: #8a8680; font-size: 13px; }
.map-layer-button { min-height: 48px; padding: 0 18px; border: 1.5px solid #bfd9c9; border-radius: 14px; background: #fff; color: #23211e; font-weight: 700; }
.map-layer-button.is-active { background: #eaf5ee; border-color: #1c7a45; color: #125e33; }
.briefing-panel { background: #fff; }
.prepare-switcher { gap: 10px; margin: 0 0 20px; padding: 0; border: 0; background: transparent; }
.prepare-chip { min-height: 48px; padding: 0 18px; border: 1.5px solid #bfd9c9; border-radius: 14px; background: #fff; color: #23211e; font-size: 14px; font-weight: 700; }
.prepare-chip.is-active { border-color: #1c7a45; background: #eaf5ee; color: #125e33; }
.prepare-card, .prepare-group-card, .prepare-fact-card, .prepare-time-card { border: 1.5px solid #e7e5e1; border-radius: 18px; background: #fff; }
.prepare-timeline .prepare-time-card { border: 0; border-radius: 0; background: transparent; }
.prepare-timeline .prepare-time-card + .prepare-time-card { border-top: 1px solid #e7e5e1; }
.prepare-group-card .prepare-fact-card { border: 0; border-radius: 0; background: transparent; }
.prepare-group-card .prepare-fact-card + .prepare-fact-card { border-top: 1px solid #e7e5e1; }
.prepare-group-stack .prepare-group-card { border: 0; border-radius: 0; background: transparent; }
.prepare-group-stack .prepare-group-card + .prepare-group-card { margin-top: 24px; padding-top: 28px; border-top: 1px solid #e7e5e1; }

/* Claude puts player and library in one narrow centered column. */
.player-shell { display: contents; border: 0; background: transparent; }
.player-panel { width: min(680px, calc(100% - 40px)); margin: 0 auto; padding: 0; background: transparent; }
.transport-panel { gap: 16px; padding: 22px; border: 1.5px solid #e7e5e1; border-radius: 18px; background: #f7f7f5; }
.transport-meta { align-items: flex-start; }
.transport-label { color: #125e33; font-size: 13px; letter-spacing: .08em; }
.transport-meta strong { color: #23211e; font-size: 18px; letter-spacing: -.01em; }
.duration-pill { border: 0; border-radius: 999px; background: transparent; color: #8a8680; }
.progress-panel { gap: 12px; }
.player-controls { justify-content: center; gap: 10px; }
.transport-button { min-width: 48px; min-height: 48px; padding: 0 18px; border: 1.5px solid #bfd9c9; border-radius: 14px; background: #fff; color: #23211e; box-shadow: none; }
.transport-primary { border-color: #1c7a45; background: #1c7a45; color: #fff; }
.library-panel { width: min(680px, calc(100% - 40px)); margin: 0 auto; padding: 20px 0 48px; border: 0; background: transparent; }
.library-head { margin-bottom: 16px; }
.library-tabs { display: flex; gap: 10px; margin-bottom: 16px; }
.library-tab { flex: 1; min-height: 48px; padding: 0 14px; border: 1.5px solid #bfd9c9; border-radius: 14px; background: #fff; color: #23211e; font: 700 14px var(--font-body); cursor: pointer; }
.library-tab.is-active { border-color: #1c7a45; background: #eaf5ee; color: #125e33; }
.catalog-voice-switcher { display: flex; gap: 10px; margin-bottom: 16px; padding: 0; border: 0; background: transparent; }
.catalog-voice-button { flex: 1; min-height: 48px; border: 1.5px solid #bfd9c9; border-radius: 14px; background: #fff; color: #23211e; font-size: 14px; }
.catalog-voice-button.is-active { border-color: #1c7a45; background: #eaf5ee; color: #125e33; }
.chapter-list { gap: 12px; }
.chapter-card { border: 1.5px solid #e7e5e1; border-radius: 16px; box-shadow: none; }
.chapter-card-head { padding: 18px; }

.discover-grid { grid-template-columns: 1fr; gap: 28px; }
.discover-card { padding: 0; border: 0; border-radius: 0; background: transparent; }
.discover-card-head { max-width: 670px; margin-bottom: 18px; }
.discover-card-head h3 { margin: 0 0 8px; font-size: 28px; letter-spacing: -.02em; }
.cafe-card-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.secret-card-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.cafe-card { border: 1.5px solid #e7e5e1; border-radius: 18px; }
.cafe-card-media { border-radius: 16px 16px 0 0; }
.cafe-card-content { padding: 18px; }
.cafe-card-chip { white-space: nowrap; }
.inline-map-link, .inline-source-link { min-height: 44px; border: 1.5px solid #bfd9c9; border-radius: 14px; background: #fff; color: #23211e; }
.inline-map-link { border-color: #1c7a45; background: #1c7a45; color: #fff; }

@media (max-width: 800px) {
  .route-panel-head, .briefing-head { display: grid; align-items: start; }
  .cafe-card-grid, .secret-card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .topbar > div, .hero-panel, .route-panel, .briefing-panel { padding-left: 20px; padding-right: 20px; }
  .hero-panel { padding-top: 40px; }
  .hero-panel h1 { font-size: 38px; }
  .hero-copy { font-size: 16px; }
  .cafe-card-grid, .secret-card-grid { grid-template-columns: 1fr; }
}