/* Quiet, readable controls around the original room. */
:root {
  --paper: #f6eddb;
  --paper-ink: #38291e;
  --paper-muted: #766551;
  --brass: #ebc989;
  --ui-font: "Segoe UI", system-ui, -apple-system, sans-serif;
}
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--brass); outline-offset: 5px; }
button { touch-action: manipulation; }
.scene-shell::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(180deg, rgba(16,10,7,.66), transparent 24%, transparent 64%, rgba(16,10,7,.95));
}
.brand { top: max(32px, env(safe-area-inset-top)); left: 40px; }
.brand h1 { font-size: clamp(32px, 3.4vw, 52px); letter-spacing: -.045em; }
.brand p { margin-top: 10px; font-size: 14px; color: #e3cfaa; }
.room-nav {
  position: fixed; z-index: 12; right: 40px; top: max(32px, env(safe-area-inset-top));
  display: flex; align-items: center; gap: 8px; font-family: var(--ui-font);
}
.nav-button, .icon-button, .transport-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; border: 1px solid transparent; color: #f3e6cb;
  background: transparent; cursor: pointer; border-radius: 99px; font: 500 14px var(--ui-font);
  transition: background .18s, border-color .18s, transform .18s;
}
.nav-button { padding: 10px 16px; background: rgba(29,20,14,.5); border-color: #eee0c326; backdrop-filter: blur(12px); }
.nav-button:hover, .icon-button:hover, .transport-button:hover { background: #f2ddb81c; border-color: #ecd09a55; }
.nav-button.primary { color: #2c1c10; background: #ead5ad; border-color: #f6e1b9; }
.nav-button.primary:hover { background: #f9e7c2; }
.nav-count { border-left: 1px solid #725b3a40; padding-left: 10px; font-size: 12px; }
.ui-icon { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.room-meta { position: fixed; top: 88px; right: 45px; z-index: 10; display: flex; gap: 16px; align-items: center; }
.room-meta .time-chip, .room-meta .presence-chip {
  position: static; border: 0; background: none; backdrop-filter: none; box-shadow: none;
  padding: 0; font: 12px var(--ui-font); color: #deceaf; width: auto;
}
.room-meta .presence-dot { width: 6px; height: 6px; box-shadow: none; }
.room-meta .time-chip { order: 2; padding-left: 16px; border-left: 1px solid #deceaf40; }
.listening-bar {
  position: fixed; bottom: max(23px, env(safe-area-inset-bottom)); left: 40px; right: 40px;
  z-index: 12; display: grid; grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);
  align-items: center; gap: 28px; font-family: var(--ui-font);
}
.listening-info { min-width: 0; }
.listening-label { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; color: #cdbf9f; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.listening-title { color: #fff0d4; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font: 25px Georgia, serif; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listening-title:hover { color: #f5c980; }
.listening-info p { margin: 5px 0 0; font-size: 12px; color: #c7b797; }
.signal-bars { display: flex; align-items: center; gap: 2px; height: 12px; width: 16px; }
.signal-bars i { width: 2px; height: 3px; background: #bea077; border-radius: 1px; }
body[data-playback="playing"] .signal-bars i { background: #e3bc73; animation: signal-breathe 1.1s ease-in-out infinite alternate; }
.signal-bars i:nth-child(2) { animation-delay: -.4s !important; }
.signal-bars i:nth-child(3) { animation-delay: -.8s !important; }
.signal-bars i:nth-child(4) { animation-delay: -.2s !important; }
@keyframes signal-breathe { to { height: 12px; } }
.transport { display: flex; align-items: center; gap: 12px; }
.transport-button { width: 44px; height: 44px; }
.listen-toggle { min-width: 124px; height: 56px; padding: 0 24px; background: #ebc989; border-color: #f3dba9; color: #302012; box-shadow: 0 5px 28px #0003; font-size: 15px; }
.listen-toggle:hover { background: #f4dba9; color: #302012; }
.listen-toggle .ui-icon { width: 18px; height: 18px; }
.listening-tools { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.icon-button { width: 42px; height: 42px; flex: none; }
.icon-button[aria-pressed="true"] { color: #edbd72; }
.icon-button[aria-pressed="true"] .heart-icon { fill: #edbd7230; }
.rail-volume { display: flex; align-items: center; gap: 4px; }
.rail-volume input { width: 85px; height: 28px; accent-color: #e2be80; cursor: pointer; }
.radio-picker-dock { position: static; transform: none; display: block; width: auto; min-width: 0; }
.model-trigger { min-width: 0; border-color: #ecd09a33; background: #25190fa6; padding: 9px 13px; min-height: 42px; font: 12px var(--ui-font); }
.model-options { min-width: 330px; left: auto; right: 0; transform: none; bottom: calc(100% + 16px); padding: 12px; background: #24180ff5; border-radius: 14px; }
.model-options { visibility: hidden; }
.model-picker.open .model-options { visibility: visible; transform: none; }
.volume-panel { visibility: hidden; }
.volume-panel.open, .volume-panel:focus-within { visibility: visible; }
.model-option { min-width: 54px; min-height: 65px; }
.model-option span:last-child { font-size: 11px; }
.room-drawer-toggle { display: none; }
.hint { bottom: 116px; z-index: 18; font-size: 13px; padding: 12px 18px; max-width: min(90vw, 540px); }
.hint.show { pointer-events: auto; }
.knob:focus-visible { outline: 2px solid #ffe4a9; }
.immersive-toggle { position: fixed; right: 24px; top: 50%; z-index: 13; background: #1b120daa; border-color: #efd9ae40; backdrop-filter: blur(10px); }
body.immersive .brand, body.immersive .room-nav, body.immersive .room-meta, body.immersive .listening-bar { opacity: 0; visibility: hidden; pointer-events: none; }
body.immersive .scene-shell::after { opacity: 0; }
body.immersive .immersive-toggle { opacity: .65; }
.brand, .room-nav, .room-meta, .listening-bar, .scene-shell::after { transition: opacity .3s, visibility .3s; }

/* The station collection is a paper catalogue, separate from the photograph. */
.station-library {
  padding: 0; width: min(810px, calc(100vw - 48px)); max-height: min(780px, calc(100dvh - 64px));
  border: 1px solid #b8a280; border-radius: 18px; background: var(--paper); color: var(--paper-ink);
  box-shadow: 0 30px 100px #0008; overflow: hidden; font-family: var(--ui-font);
}
.station-library[open] { display: flex; flex-direction: column; }
.station-library::backdrop, .living-drawer::backdrop { background: #130d09a8; backdrop-filter: blur(8px); }
.station-library :focus-visible, .living-drawer :focus-visible { outline-color: #885e2e; }
.library-header { display: flex; justify-content: space-between; align-items: start; padding: 30px 32px 22px; }
.paper-eyebrow { color: #8a6540; font: 600 10px var(--ui-font); letter-spacing: .17em; text-transform: uppercase; }
.library-header h2 { margin: 9px 0 5px; font: 36px/1.1 Georgia, serif; letter-spacing: -.035em; }
.library-header p { margin: 0; color: var(--paper-muted); font-size: 14px; }
.paper-close { color: #6f5c43; border-color: #c8b89c; }
.paper-close:hover { background: #d7c5a955; border-color: #a3855f; }
.library-search { position: relative; display: flex; align-items: center; gap: 11px; margin: 0 32px; padding: 0 15px; border: 1px solid #cbb99a; border-radius: 10px; background: #fffaf1; color: #8d795a; }
.library-search input { min-width: 0; width: 100%; height: 48px; padding: 0; border: 0; background: none; color: #36291d; font: 15px var(--ui-font); outline: none; }
.library-search:focus-within { outline: 2px solid #9b713e; outline-offset: 2px; }
.library-filters { display: flex; gap: 6px; overflow-x: auto; padding: 17px 32px; flex: none; scrollbar-width: thin; }
.filter-chip { flex: none; min-height: 34px; padding: 6px 12px; border: 1px solid #cdbb9e; border-radius: 99px; background: none; color: #6b5942; font: 12px var(--ui-font); cursor: pointer; }
.filter-chip[aria-pressed="true"] { background: #453222; border-color: #453222; color: #fff0d6; }
.library-results { overflow-y: auto; overscroll-behavior: contain; padding: 0 32px 24px; min-height: 100px; }
.library-count { margin: 0 0 10px; color: #7a6850; font-size: 11px; }
.station-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.station-card { position: relative; display: flex; align-items: center; border: 1px solid #d9c8ad; border-radius: 10px; background: #fcf7ed; overflow: hidden; }
.station-card.is-selected { border-color: #9a7039; background: #eaddc4; }
.station-card:hover { border-color: #ac8b5d; }
.station-choice { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; color: inherit; padding: 17px 10px 17px 15px; cursor: pointer; }
.station-index { display: grid; place-items: center; width: 33px; height: 38px; flex: none; border-right: 1px solid #d8c5a7; color: #94764d; font: 16px Georgia, serif; padding-right: 11px; }
.station-details { min-width: 0; }
.station-details strong { display: block; font: 17px/1.2 Georgia, serif; color: #3b2918; }
.station-details small { display: block; margin-top: 6px; font: 11px/1.4 var(--ui-font); color: #7a674d; }
.station-star { color: #997748; width: 38px; margin-right: 5px; }
.station-star[aria-pressed="true"] { color: #845119; }
.station-star[aria-pressed="true"] .heart-icon { fill: #a16c322b; }
.library-empty { padding: 30px 10px; text-align: center; color: #76634a; font-size: 14px; line-height: 1.6; }
.library-foot { display: flex; justify-content: space-between; gap: 16px; padding: 15px 32px; border-top: 1px solid #d8c7ab; font-size: 11px; color: #7a6850; }
.library-foot a { color: inherit; }

/* Existing guides, room sounds and memories get the same readable paper treatment. */
.living-drawer { margin: 0 0 0 auto; inset: 16px 16px 16px auto; width: min(440px, calc(100vw - 32px)); height: calc(100dvh - 32px); max-height: none; max-width: none; transform: none; padding: 0; border-radius: 16px; background: var(--paper); color: var(--paper-ink); border-color: #cbb691; box-shadow: 0 24px 90px #0008; }
.living-drawer:not([open]) { display: none; }
.living-drawer[open] { display: grid; }
.drawer-backdrop { display: none !important; }
.drawer-head { padding: 24px 25px 18px; border-color: #d5c3a5; }
.drawer-head strong { font-size: 27px; letter-spacing: -.025em; }
.drawer-head span { color: #826b4b; font-size: 10px; letter-spacing: .1em; margin-top: 6px; }
.drawer-close { color: #5d452c; width: 42px; height: 42px; border-color: #c7b395; background: transparent; font-size: 23px; }
.drawer-tabs { gap: 0; padding: 0 24px; border-color: #d5c3a5; }
.drawer-tab { min-height: 48px; border-radius: 0; font-size: 13px; letter-spacing: 0; color: #7c684c; }
.drawer-tab[aria-selected="true"] { border-color: transparent; border-bottom: 2px solid #8d612d; color: #422d19; background: transparent; }
.drawer-body { padding: 24px; }
.drawer-section { margin-bottom: 24px; padding: 0; border: 0; background: none; border-radius: 0; }
.drawer-section h3 { font-size: 20px; color: #48311c; margin-bottom: 10px; }
.drawer-section p { font-size: 14px; line-height: 1.6; color: #786449; }
.drawer-section small { font-size: 12px; color: #7b694f; }
.on-air-card { background: #e8d8b9; box-shadow: none; padding: 20px; border: 1px solid #d0b78e; transform: none; margin-bottom: 26px; }
.on-air-card .eyebrow { font-size: 10px; letter-spacing: .14em; color: #816341; }
.on-air-card h3 { font-size: 27px; margin: 9px 0; }
.on-air-card p { font: 15px/1.5 var(--ui-font); }
.on-air-card time { font: 12px/1.5 var(--ui-font); color: #655039; opacity: 1; }
.programme-source-card { margin: 14px 0; border-color: #d4c2a5; background: #fffaf04d; color: #6d573d; padding: 12px; }
.programme-source-status, .programme-source-status.live, .programme-source-card strong, .programme-source-card a { color: #73522d; font-size: 12px; }
.programme-badge { border-color: #cab492; background: #e9dcc6; color: #725635; font-size: 11px; }
.programme-row, .programme-row.official { font-size: 13px; line-height: 1.5; grid-template-columns: 48px 1fr; padding: 13px 0; border-color: #d4c2a5; color: #59432c; }
.programme-row time { color: #8a6434; }
.programme-row.official > span > strong { color: #49321d; font-size: 16px; line-height: 1.4; }
.programme-row.current { color: #382611; background: #e9d6b54d; border-radius: 6px; }
.programme-row-meta span { color: #7e694c; border-color: #d2bd9b; font-size: 11px; }
.vintage-button, .preset-button, .ambient-button { background: #fff8ec; border-color: #cdb898; color: #654a2c; min-height: 42px; font-size: 13px; padding: 10px 13px; }
.preset-button.active, .ambient-button[aria-pressed="true"], .vintage-button.active { background: #55402a; border-color: #55402a; color: #fff1d6; }
.preset-button strong { font-size: 15px; }
.sleep-row, .preset-row, .ambient-grid { margin: 12px 0; gap: 8px; }
.memory-card { min-height: 230px; padding: 25px; background: #eee0c5; box-shadow: 0 4px 18px #4f361114; border: 1px solid #d1b994; transform: rotate(-.5deg); }
.memory-card blockquote { font-size: 23px; line-height: 1.45; margin: 18px 0; }
.memory-card footer, .memory-card small { font: 12px/1.5 var(--ui-font); color: #826848; }
.community-memory-section { padding: 20px 0; border: 0; border-top: 1px solid #d5c3a5; border-radius: 0; margin-top: 24px; }
.community-memory-head h3 { color: #48311c; font-size: 20px; }
.community-count { color: #786044; font-size: 11px; }
.community-memory-intro, .memory-privacy-note { color: #786044; font-size: 13px; line-height: 1.6; }
.memory-form-footer { color: #786044; font: 11px/1.5 var(--ui-font); flex-wrap: wrap; }
.memory-share-box { border-color: #cdb898; padding-top: 18px; }
.memory-form label, .memory-form small, .community-postcard, .memory-form-status, .community-empty { color: #725b40; font-size: 13px; line-height: 1.5; }
.memory-form input, .memory-form select, .memory-form textarea { background: #fffaf0; border-color: #cdb999; color: #47311d; font-size: 16px; min-height: 44px; }
.community-postcard { background: #fff8e9; border-color: #d8c3a3; padding: 16px; }
.community-postcard small, .community-postcard footer { font-size: 11px; }
.community-postcard blockquote { font-size: 18px; line-height: 1.5; }
.memory-consent input { min-height: 18px; width: 18px; height: 18px; }
.memory-consent { grid-template-columns: 20px 1fr !important; gap: 10px !important; }
.memory-form-status.success { color: #286139; }
.memory-form-status.error { color: #a33622; }
.memory-form-section > p, .community-memories > p { color: #7b6447; }
.memory-dots i { background: #b59b7460; }
.memory-dots i.active { background: #875c2d; }

@media (max-width: 1000px) {
  .brand { left: 25px; }
  .room-nav { right: 25px; }
  .room-meta { right: 30px; }
  .listening-bar { left: 25px; right: 25px; gap: 14px; grid-template-columns: minmax(160px,1fr) auto auto; }
  .rail-volume input { width: 60px; }
  .listening-tools { gap: 3px; }
}
@media (max-width: 700px) {
  .brand { top: max(24px, calc(env(safe-area-inset-top) + 14px)); left: 22px; width: auto; transform: none; text-align: left; }
  .brand h1 { font-size: 36px; }
  .brand p { font-size: 12px; margin-top: 8px; }
  .room-nav { top: auto; bottom: max(20px, env(safe-area-inset-bottom)); left: 20px; right: 20px; justify-content: center; gap: 8px; }
  .nav-button { min-height: 40px; padding: 8px 15px; font-size: 12px; }
  .nav-count { display: none; }
  .room-meta { top: 112px; left: 24px; right: auto; gap: 10px; }
  .room-meta .time-chip, .room-meta .presence-chip { font-size: 10px; }
  .room-meta .time-chip { padding-left: 10px; }
  .listening-bar { bottom: max(76px, calc(env(safe-area-inset-bottom) + 56px)); left: 22px; right: 22px; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .listening-title { font-size: 23px; }
  .listening-info p { font-size: 11px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .listening-label { font-size: 9px; letter-spacing: .1em; }
  .transport { gap: 3px; }
  .transport-button { width: 34px; height: 44px; }
  .listen-toggle { min-width: 49px; width: 49px; height: 49px; padding: 0; }
  .listen-toggle span { display: none; }
  .transport .previous-station { display: none; }
  .listening-tools { position: fixed; top: max(28px, calc(env(safe-area-inset-top) + 18px)); right: 17px; }
  .listening-tools .rail-volume, .listening-tools > .icon-button { display: none; }
  .model-trigger { font-size: 11px; padding: 7px 10px; max-width: 104px; min-height: 36px; }
  .model-options { min-width: 310px; max-width: calc(100vw - 32px); bottom: auto; top: calc(100% + 12px); right: 0; left: auto; transform: none; }
  .immersive-toggle { top: 50%; right: 10px; width: 34px; height: 34px; min-height: 34px; }
  .hint { bottom: 152px; font-size: 12px; border-radius: 14px; }
  .station-library { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); border-radius: 15px; }
  .library-header { padding: 24px 20px 18px; }
  .library-header h2 { font-size: 30px; }
  .library-header p { font-size: 13px; }
  .library-search { margin: 0 20px; }
  .library-filters { padding: 15px 20px; }
  .library-results { padding: 0 20px 20px; }
  .station-grid { grid-template-columns: 1fr; gap: 8px; }
  .station-choice { padding: 15px; }
  .station-details strong { font-size: 19px; }
  .station-details small { font-size: 12px; }
  .library-foot { padding: 14px 20px; font-size: 10px; }
  .library-foot span { max-width: 65%; }
  .living-drawer { inset: auto 0 0; width: 100%; height: min(86dvh, 820px); margin: 0; border-radius: 20px 20px 0 0; max-height: none; transform: none; }
  .living-drawer.open { transform: none; }
  .drawer-head { padding: 22px; }
  .drawer-body { padding: 22px 22px max(24px, env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .brand h1 { font-size: 30px; }
  .brand p { font-size: 11px; }
  .nav-button { padding: 8px 11px; gap: 6px; }
  .listening-title { font-size: 20px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .station-library { max-height: calc(100dvh - 20px); }
  .library-header { padding: 16px 24px 10px; }
  .library-header h2 { font-size: 25px; margin-top: 4px; }
  .library-header p { display: none; }
  .library-search input { height: 40px; }
  .library-filters { padding-top: 10px; padding-bottom: 10px; }
  .library-results { min-height: 0; }
  .library-foot { padding-top: 10px; padding-bottom: 10px; }
  .brand { top: 17px; }
  .brand h1 { font-size: 30px; }
  .room-nav { top: 16px; bottom: auto; left: auto; right: 20px; }
  .room-meta { top: 70px; }
  .listening-bar { bottom: 14px; }
  .listening-title { font-size: 20px; }
  .rail-volume { display: none; }
  .living-drawer { top: 10px; bottom: 10px; height: calc(100dvh - 20px); }
}
@media (max-width: 700px) and (max-height: 560px) and (orientation: landscape) {
  .brand h1 { font-size: 28px; }
  .brand p { font-size: 11px; }
  .room-meta { display: none; }
  .listening-tools { top: auto; bottom: 18px; right: 20px; }
  .listening-bar { right: 150px; }
  .nav-button { padding: 8px 11px; }
  .model-options { top: auto; bottom: calc(100% + 12px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}