/* Museum visitor player: palette, type, read-along style D, offline save, controls, the two screens, and the desktop frame. */
@font-face { font-family: 'Schibsted Grotesk'; src: url('/assets/fonts/schibsted-grotesk-latin.woff2?v=e3b56e90510a84ac') format('woff2'); font-weight: 400 900; font-display: swap; }

:root {
  color-scheme: light;
  --bg: #ece9e2;
  --card: #fbfaf6;
  --ink: #1d1d1b;
  --muted: #5f5b53;
  --rule: #d3cdc0;
  --accent: #214b40;
  --accent-soft: #dfe8e3;
  --sentence: #f3ecd8;
  --word: #f6e6b4;
  --danger: #8a3b2e;
  --sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.45 var(--sans); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Read-along, approved style D: quiet sentence tint, soft word mark, fade in 0.25 s, out 0.6 s. */
.read { font-family: var(--serif); }
.read p { margin: 0 0 0.8em; }
.read .s { border-radius: 3px; cursor: pointer; transition: background-color 0.8s ease-out; }
.read .s.on { background-color: var(--sentence); transition: background-color 0.5s ease-in-out; }
.read .w { border-radius: 3px; transition: background-color 0.6s ease-out; }
.read .w.on { background-color: var(--word); transition: background-color 0.25s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .read .s, .read .w { transition: none; } }

/* Offline save: a progress bar while saving, one quiet line once ready. */
.offline-save { margin: 0; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); font-size: 14px; }
.offline-save[hidden] { display: none; }
.offline-save p { margin: 0 0 8px; }
.offline-save progress { display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; overflow: hidden; background: var(--accent-soft); appearance: none; }
.offline-save progress::-webkit-progress-bar { background: var(--accent-soft); }
.offline-save progress::-webkit-progress-value { background: var(--accent); border-radius: 4px; transition: width 0.2s; }
.offline-save progress::-moz-progress-bar { background: var(--accent); }
.offline-save[data-state='ready'] { padding: 6px 0; border: 0; background: none; color: var(--muted); font-size: 13px; }
.offline-save[data-state='ready'] p { margin: 0; }
.offline-save[data-state='ready'] p::before { content: '\2713'; margin-right: 6px; color: var(--accent); font-weight: 700; }
.offline-save[data-state='ready'] progress { display: none; }
.offline-save[data-state='failed'] { border-color: var(--danger); }
.offline-save progress[hidden] { display: none; }
.offline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.offline-actions button { margin-top: 8px; padding: 6px 14px; border: 1px solid var(--accent); border-radius: 999px; background: none; color: var(--accent); font: inherit; font-weight: 600; }
.offline-actions button.offline-start { background: var(--accent); color: #fff; }
.offline-actions button[hidden] { display: none; }

/* Play icon drawn in CSS so every layout shares one shape. */
.icon-play, .icon-pause { display: inline-block; width: 0.9em; height: 1em; }
.icon-play { clip-path: polygon(10% 0, 100% 50%, 10% 100%); background: currentColor; }
.icon-pause { background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66%); }
/* Loading: a turning ring, faded in after a beat so a quick start shows no flicker. */
.icon-loading { display: inline-block; width: 1em; height: 1em; border: 0.14em solid currentColor; border-right-color: transparent; border-radius: 50%; opacity: 0; animation: icon-spin 0.9s linear infinite, icon-appear 0.2s ease-in 0.25s forwards; }
@keyframes icon-spin { to { transform: rotate(1turn); } }
@keyframes icon-appear { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .icon-loading { animation: icon-appear 0.2s ease-in 0.25s forwards; border-right-color: currentColor; border-style: dotted; } }
/* While loading, a ring around the button's edge fills clockwise with the share of the stop already downloaded. */
@property --loaded { syntax: '<number>'; inherits: true; initial-value: 0; }
[data-icon='loading'] { position: relative; transition: --loaded 0.3s linear; }
[data-icon='loading']::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--ring, var(--accent)) calc(var(--loaded) * 1turn), var(--ring-track, var(--accent-soft)) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); }
.bar-play { --ring: #9fd0bd; --ring-track: rgba(255, 255, 255, 0.18); }
.engine-note { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--card); font-size: 14px; }
.engine-note:empty { display: none; }

.engine-error { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--danger); background: var(--card); font-size: 14px; }
.engine-error:empty { display: none; }

/* Player controls shared by both layouts: previous stop, back 10 s, play, forward 10 s, next stop. */
.ico { display: block; width: 1em; height: 1em; }
.controls { display: grid; grid-template-columns: 60px 56px 76px 56px 60px; justify-content: space-between; align-items: center; }
.ctl { display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); }
.ctl:active { background: var(--accent-soft); }
.ctl.step { font-size: 34px; }
.ctl.skip { font-size: 42px; }
.ctl.play { background: var(--accent); color: #fff; font-size: 28px; }
.ctl.play:active { background: var(--accent); filter: brightness(1.15); }
.ctl:disabled { opacity: 0.3; cursor: default; background: none; }

/* Type the number on the sign, then Go. */
.number-form { margin: 0 0 16px; }
.number-form label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 15px; }
.number-row { display: flex; gap: 8px; }
.number-row input { flex: 1; min-width: 0; height: 56px; padding: 0 16px; border: 2px solid var(--rule); border-radius: 14px; background: var(--card); font: 700 26px/1 var(--sans); letter-spacing: 0.1em; }
.number-row input:focus { border-color: var(--accent); outline: none; }
.number-row button { width: 84px; border: 0; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 700; font-size: 18px; }
.number-error { margin: 6px 0 0; color: var(--danger); font-size: 14px; }
.number-error:empty { display: none; }

/* The list of stops and the playing bar that keeps the current stop in reach while browsing. */
.stops { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 10px 14px 10px 10px; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); text-align: left; }
.row[aria-current='true'] { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.tile { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; background: var(--ink); color: #fff; font: 700 24px/1 var(--sans); font-variant-numeric: tabular-nums; }
.row-title { font: 400 19px/1.2 var(--serif); }
.row-state { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-state.heard::before { content: '\2713  '; color: var(--accent); font-weight: 700; }
.row-state.playing { color: var(--accent); font-weight: 600; }

.bar { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 10; display: grid; grid-template-columns: 1fr 60px; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-radius: 18px; background: var(--ink); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); overflow: hidden; }
.bar-progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255, 255, 255, 0.15); }
.bar-progress span { position: absolute; left: 0; top: 0; display: block; height: 100%; width: 0; background: #9fd0bd; }
.bar-progress #bar-buffer { background: rgba(255, 255, 255, 0.4); }
.bar-now { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.bar-num { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: rgba(255, 255, 255, 0.12); font-weight: 700; font-variant-numeric: tabular-nums; }
.bar-text { display: grid; min-width: 0; }
.bar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bar-time { color: rgba(255, 255, 255, 0.7); font-size: 13px; font-variant-numeric: tabular-nums; }
.bar-play { display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: #fff; color: var(--ink); font-size: 22px; }

/* Visit header shared by the list pages. */
.eyebrow { margin: 0; color: var(--muted); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.intro h1 { margin: 6px 0 4px; font: 400 26px/1.15 var(--serif); }
.meta { margin: 0; color: var(--muted); font-size: 14px; }
.foot { margin: 24px 4px 0; color: var(--muted); font-size: 12px; }
body[data-view='listen'] .stops-only, body[data-view='stops'] .listen-only { display: none !important; }
body[data-view='listen'] .screen { padding-bottom: 190px; }
body[data-view='stops'] .screen { padding-bottom: 110px; }

.top { position: sticky; top: 0; z-index: 5; padding: 10px 12px; background: var(--bg); border-bottom: 1px solid var(--rule); }
.stop-chip { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 8px 6px 6px; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); text-align: left; }
.chip-num { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.chip-text { display: grid; flex: 1; min-width: 0; }
.chip-count { color: var(--muted); font-size: 13px; }
.chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 20px/1.2 var(--serif); }
.chip-more { flex: none; display: grid; justify-items: center; gap: 2px; padding: 4px 8px; border-left: 1px solid var(--rule); color: var(--accent); font-size: 12px; font-weight: 700; }
.chip-more .ico { font-size: 22px; }

.intro { padding: 28px 20px 4px; }
.page { padding: 14px 20px 0; }
.offline-save { margin-bottom: 14px; }
.or { margin: 0 0 8px; color: var(--muted); font-size: 14px; }

.tap-hint { margin: 4px 0 10px; color: var(--muted); font-size: 14px; }
.tap-hint[hidden] { display: none; }
.text { font-size: 24px; line-height: 1.55; }
.text p { margin: 0 0 0.7em; }
.up-next { margin: 8px 0 16px; scroll-margin-bottom: 200px; }
.up-next[hidden] { display: none; }
.up-label { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.up-next button { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 8px 12px 8px 8px; border: 2px solid var(--accent); border-radius: 16px; background: var(--card); text-align: left; }
.big-num { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 12px; background: var(--ink); color: #fff; font: 700 28px/1 var(--sans); }
.up-title { font: 400 20px/1.2 var(--serif); }
.go { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; }

.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--rule); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06); }
/* Progress bar: played in the accent, downloaded but not yet played in a paler tone, the rest still to come. */
#scrub { --played: 0%; --buffered: 0%; display: block; width: 100%; height: 28px; margin: 0; background: none; -webkit-appearance: none; appearance: none; }
#scrub::-webkit-slider-runnable-track { height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent) 0 var(--played), #9db5ab var(--played) var(--buffered), var(--rule) var(--buffered)); }
#scrub::-moz-range-track { height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent) 0 var(--played), #9db5ab var(--played) var(--buffered), var(--rule) var(--buffered)); }
#scrub::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -8px; border: 3px solid var(--card); border-radius: 50%; background: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -webkit-appearance: none; appearance: none; }
#scrub::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid var(--card); border-radius: 50%; background: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.times { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 4px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
#remaining { justify-self: end; }

/* More options: three dots between the times, a speed in their place once changed, and the menu above the dock. */
.more-btn { display: grid; place-items: center; min-width: 52px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 14px; font-weight: 700; font-variant-numeric: normal; }
.more-btn .ico { font-size: 24px; }
.more-btn:active, .more-btn[aria-expanded='true'] { background: var(--accent-soft); }
.more-btn[data-changed] { background: var(--accent-soft); color: var(--accent); }
.more-btn[data-changed] .ico, .more-btn:not([data-changed]) #more-speed { display: none; }
.more-menu { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 8px); padding: 12px; border: 1px solid var(--rule); border-radius: 16px; background: var(--card); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.more-menu[hidden] { display: none; }
.menu-label { margin: 0 0 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.speeds { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.speeds button { height: 44px; padding: 0; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); font-size: 15px; font-weight: 700; }
.speeds button[aria-pressed='true'] { border-color: var(--accent); background: var(--accent); color: #fff; }

/* Downloads, the historical source and the way back to the offer, below the text and the list. */
.more { margin: 16px 0 0; font-size: 14px; }
.more summary { color: var(--accent); font-weight: 600; cursor: pointer; }
.more p { margin: 8px 0 0; color: var(--muted); }
.more ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.more a, .foot a { color: var(--accent); }

/* A desktop screen shows the player at phone size, as a visitor would hold it.
   The frame is transformed, so the fixed dock and playing bar stay inside it,
   and its .screen scrolls instead of the window. Phones and tablets get the full screen. */
@media (min-width: 700px) and (min-height: 600px) and (hover: hover) and (pointer: fine) {
  html { min-height: 100%; background: #d9d4c9; }
  body { position: relative; width: 410px; height: min(864px, calc(100vh - 48px)); margin: 24px auto; overflow: hidden; transform: translateZ(0);
    border: 10px solid #1d1d1b; border-radius: 46px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25); }
  .screen { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .dock { border-radius: 0 0 36px 36px; }
}