/* Emergency presentation layer: one viewport, one screen, no document feed. */
:root {
  --bg: #0c1015;
  --surface: #191d24;
  --surface-raised: #242931;
  --text: #f6f7f8;
  --muted: #b3b8c0;
  --quiet: #959ca7;
  --accent: #f6f7f8;
  --accent-ink: #11151a;
  --line: #2a3039;
  --on-media: #f6f7f8;
  --on-media-muted: #c8cbd0;
  --header-height: 56px;
  --nav-height: 68px;
  --shell-width: 480px;
  --feed-gap: 16px;
  --gutter: 12px;
  --radius-card: 20px;
  --media-gradient: linear-gradient(to bottom, transparent 28%, rgba(9,13,18,.15) 47%, rgba(9,13,18,.90) 70%, #090d12 100%);
  --motion: 180ms;
  --photo-cta: #f6f7f8;
  --photo-cta-ink: #11151a;
  --card-title: clamp(23px, 6.25vw, 30px);
}
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; min-width: 0; overflow: hidden; background: var(--bg); }
body { padding: 0; }
.app { width: 100%; max-width: var(--shell-width); height: 100svh; min-height: 0; margin: 0 auto; border: 0; border-radius: 0; box-shadow: none; isolation: isolate; }
.topbar {
  position: absolute; inset: 0 0 auto; width: 100%; max-width: none; height: calc(var(--header-height) + env(safe-area-inset-top));
  display: flex; align-items: center; gap: var(--space-1); margin: 0; padding: env(safe-area-inset-top) var(--gutter) 0;
  transform: none; border: 0; border-radius: 0; background: var(--bg); backdrop-filter: none;
}
.feed-tabs { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: var(--space-5); margin: 0; height: 44px; }
.feed-tab { min-height: 44px; font-size: 12px; font-weight: 500; color: var(--muted); border: 0; position: relative; }
.feed-tab::after { content: ''; position: absolute; bottom: 4px; left: 0; right: 0; height: 2px; background: transparent; transition: background var(--motion); }
.feed-tab[aria-selected="true"] { font-weight: 700; color: var(--text); border: 0; }
.feed-tab[aria-selected="true"]::after { background: var(--text); }
#open-search { flex: 0 0 44px; width: 44px; height: 44px; background: none; border: 0; border-radius: 12px; }
.icon { width: 22px; height: 22px; }
.feed {
  position: absolute; inset: calc(var(--header-height) + env(safe-area-inset-top)) 0 calc(var(--nav-height) + env(safe-area-inset-bottom));
  height: auto; display: flex; flex-direction: column; gap: var(--feed-gap); padding: 6px var(--gutter) 64px;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; scroll-padding-top: 6px;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent calc(100% - 28px), transparent 100%);
}
.discovery-card {
  position: relative; flex: 0 0 calc((100svh - var(--header-height) - var(--nav-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .88);
  min-height: 0; width: 100%; border: 0; border-radius: var(--radius-card); scroll-snap-align: start; scroll-snap-stop: always; background: var(--surface); overflow: hidden;
}
.discovery-card__media { inset: 0; }
.discovery-card__media img { display: block; opacity: 1; width: 100%; height: 79%; object-fit: cover; object-position: center 40%; }
.discovery-card__media::after, [data-theme="light"] .discovery-card__media::after { background: var(--media-gradient); }
.card-index { position: absolute; top: 12px; right: 12px; border-radius: 12px; background: rgba(9,13,18,.7); padding: 4px 7px; color: var(--on-media); font-size: 10px; }
.discovery-card__content { inset: auto var(--space-3) var(--space-4); display: flex; flex-direction: column; }
.discovery-card h1 { font-size: var(--card-title); line-height: 1.12; letter-spacing: -.035em; max-width: none; margin: 0; overflow-wrap: anywhere; }
.card-title-link { display: block; border: 0; padding: 0; color: inherit; background: none; font: inherit; font-weight: inherit; letter-spacing: inherit; text-align: left; line-height: inherit; }
.discovery-card__description { margin: var(--space-2) 0 0; max-width: none; line-height: 1.4; font-size: 13px; -webkit-line-clamp: 3; color: var(--on-media-muted); }
.chips { margin: var(--space-3) 0 0; gap: 6px; }
.chip { font-weight: 500; font-size: 10px; min-height: 24px; padding: 0 10px; border: 0; background: rgba(99,109,122,.32); }
.card-actions { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; margin-top: var(--space-3); }
.card-action { width: 100%; height: 52px; min-height: 44px; gap: 5px; flex-direction: column; padding: 3px 0; border: 0; border-radius: 8px; background: transparent; color: var(--on-media); transition: background var(--motion), transform var(--motion); }
.card-action span { display: block; font-size: 8px; line-height: 1.2; color: var(--on-media-muted); white-space: nowrap; }
.card-action:hover { background: rgba(255,255,255,.08); }
.card-action[aria-pressed="true"] { color: var(--on-media); }
.try-button { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-height: 46px; margin-top: var(--space-2); background: var(--photo-cta); color: var(--photo-cta-ink); border-radius: 24px; font-size: 12px; font-weight: 700; }
.try-button .icon { width: 16px; height: 16px; }
.try-button[aria-pressed="true"] { background: var(--photo-cta); color: var(--photo-cta-ink); border: 0; }
.bottom-nav { position: absolute; inset: auto 0 0; height: calc(var(--nav-height) + env(safe-area-inset-bottom)); width: 100%; max-width: none; transform: none; margin: 0; padding: 6px 8px calc(10px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; background: var(--bg); backdrop-filter: none; }
.bottom-nav__item, .bottom-nav__create, .bottom-nav__create:hover { height: 44px; min-height: 44px; padding: 0; color: var(--quiet); background: transparent; border-radius: 12px; }
.bottom-nav__item span, .bottom-nav__item[aria-current="page"] span, .bottom-nav__create span { display: none; }
.bottom-nav__item:hover, .bottom-nav__item[aria-current="page"] { background: transparent; color: var(--text); }
.bottom-nav__item[aria-current="page"] .icon { color: var(--text); }
.bottom-nav__item[data-screen="feed"][aria-current="page"] .icon { fill: currentColor; }
.bottom-nav__create .icon { border: 1.5px solid currentColor; border-radius: 5px; padding: 2px; }
.screen { position: absolute; inset: 0 0 calc(var(--nav-height) + env(safe-area-inset-bottom)); height: auto; padding: calc(24px + env(safe-area-inset-top)) var(--space-4) 24px; }
.overlay, .topic-view { position: absolute; inset: 0; height: auto; width: 100%; overflow-y: auto; }
.bottom-sheet { position: absolute; }
.toast { position: absolute; right: var(--space-4); left: var(--space-4); bottom: calc(var(--nav-height) + 12px + env(safe-area-inset-bottom)); }
.screen .saved-topic { width: 100%; color: var(--text); background: transparent; border-top: 0; border-left: 0; border-right: 0; text-align: left; }
.screen .saved-topic .icon { transform: rotate(180deg); }
.editorial-cover { position: absolute; inset: 0; overflow: hidden; background: var(--editorial-bg, #191f28); }
.editorial-cover svg { position: absolute; width: 100%; height: 80%; top: 0; left: 0; }
.editorial-cover--calligraphy { --editorial-bg: #1c1c21; background: radial-gradient(ellipse at 15% 0%, #49443e, transparent 58%), linear-gradient(145deg,#22242a,#12151b); }
.editorial-cover--calligraphy .ink-line { fill: none; stroke: #d6ae78; stroke-width: 6; stroke-linecap: round; }
.editorial-cover--calligraphy .ink-fine { fill: none; stroke: #c19e70; stroke-width: .7; opacity: .5; }
.pen-body { fill: #292524; stroke: #a78b60; stroke-width: 2; }
.pen-tip { fill: #dbb785; }
.pen-slit { stroke: #665139; stroke-width: 1; }
.bottle { fill: #14171b; stroke: #525258; stroke-width: 1; }
.editorial-cover--radio, .editorial-cover--try { --editorial-bg: #172629; }
.editorial-cover .signal-lines { fill: none; stroke: #bfaa79; stroke-width: 1; opacity: .4; }
.radio-box { fill: #232729; stroke: #84999a; }
.radio-screen { fill: #182121; stroke: #708e90; }
.radio-wave { fill: none; stroke: #d6ae78; stroke-width: 2; }
.editorial-cover svg > g { stroke: #a5b3b1; fill: none; stroke-width: 2; }
.editorial-cover--story { --editorial-bg: #272c33; }
.editorial-cover .scene-lines { stroke: #c7c6bd; fill: rgba(130,141,147,.12); stroke-width: 1.2; }
.card-author { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--on-media-muted); font-size: 11px; }
.author-avatar { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #454c53; color: var(--on-media); }
[data-theme="light"] { --bg: #f5f5f3; --surface: #ffffff; --surface-raised: #e9eaec; --text: #10141a; --muted: #555e69; --quiet: #69717c; --line: #d4d8de; --accent: #121820; --accent-ink: #ffffff; }
[data-theme="light"] body, [data-theme="light"] .topbar, [data-theme="light"] .bottom-nav { background: var(--bg); }
@media (min-width: 600px) { body { padding: 0; } .app { max-width: var(--shell-width); margin-inline: auto; border: 0; border-radius: 0; box-shadow: none; } .topbar, .bottom-nav { left: 0; right: 0; transform: none; } }
/* Topic hub follows the light, structured second reference phone. */
:root { --topic-bg: #ffffff; --topic-text: #12151b; --topic-muted: #626a76; --topic-tile: #f3f4f6; --topic-line: #e8eaee; }
.topic-view { background: var(--topic-bg); color: var(--topic-text); padding: calc(12px + env(safe-area-inset-top)) 12px 20px; }
.topic-hero { min-height: 0; height: 216px; border-radius: 16px; overflow: hidden; background: var(--surface); }
.topic-hero img { display: block; height: 100%; opacity: 1; }
.topic-hero::after { display: none; }
.topic-hero__top { top: 4px; left: 0; right: 0; padding: 0 4px; }
.topic-hero__top > div { display: flex; }
.topic-hero__top .icon-button { width: 44px; height: 44px; background: rgba(9,13,18,.3); color: var(--on-media); border: 0; border-radius: 10px; }
.topic-summary { padding: 14px 2px 0; }
.topic-summary h1 { margin: 0; font-size: 27px; line-height: 1.12; letter-spacing: -.035em; overflow-wrap: anywhere; }
.topic-summary .chips { margin-top: 10px; }
.topic-summary .chip { color: var(--topic-muted); background: var(--topic-tile); }
.topic-description { display: none; }
.topic-metrics { gap: 10px; margin: 14px 0; color: var(--topic-muted); font-size: 9px; }
.topic-metrics > span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.topic-metrics .icon { width: 15px; height: 15px; color: var(--topic-text); }
.topic-metrics strong { color: var(--topic-text); }
.topic-cta-row { margin-bottom: 16px; }
.topic-cta-row button { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; min-height: 44px; font-size: 11px; border-radius: 12px; }
.topic-interest { background: var(--topic-tile); color: var(--topic-text); border: 0; }
.topic-interest .icon { width: 16px; height: 16px; }
.topic-try { background: var(--topic-text); color: var(--topic-bg); }
.topic-body { padding: 0 2px; }
.topic-section-list { gap: 6px; }
.hub-row { margin-bottom: 6px; background: var(--topic-tile); border: 1px solid var(--topic-line); border-radius: 12px; overflow: hidden; }
.hub-row summary { display: grid; grid-template-columns: 58px minmax(0,1fr) 16px; align-items: center; gap: 10px; min-height: 58px; padding: 4px 8px 4px 4px; list-style: none; cursor: pointer; }
.hub-row summary::-webkit-details-marker { display: none; }
.hub-row summary strong { display: block; font-size: 12px; }
.hub-row summary small { display: block; margin-top: 3px; font-size: 10px; color: var(--topic-muted); }
.hub-row summary > .icon { width: 16px; height: 16px; color: var(--topic-muted); }
.hub-row[open] summary > .icon { transform: rotate(90deg); }
.hub-icon { display: grid; place-items: center; min-height: 50px; border-radius: 9px; background: #e6eaf0; color: #515c6d; }
.hub-icon--1 { background: #f2e7d7; color: #755635; }
.hub-icon--2 { background: #e7e4ee; color: #5f547b; }
.hub-icon--3 { background: #e2ece4; color: #3e6550; }
.hub-content { padding: 12px; font-size: 13px; line-height: 1.5; color: var(--topic-muted); }
.hub-content .related-card { color: var(--topic-text); background: var(--topic-bg); border-color: var(--topic-line); }
.media-credit { color: var(--topic-muted); font-size: 10px; }
.media-credit a { color: inherit; }
.search-panel { padding: calc(14px + env(safe-area-inset-top)) 12px 20px; display: flex; flex-direction: column; overflow: hidden; }
.search-panel__top { gap: 6px; flex-shrink: 0; }
.search-input-wrap { min-width: 0; min-height: 44px; padding: 0 12px; border: 0; border-radius: 20px; }
.search-input-wrap input { min-width: 0; font-size: 12px; }
.search-input-wrap .icon { width: 16px; height: 16px; flex-shrink: 0; }
.search-close { min-height: 44px; font-size: 10px; padding: 0 4px; }
.search-filters { display: flex; gap: 3px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.search-filters button { flex: 0 0 auto; min-height: 44px; padding: 0 8px; border: 0; border-radius: 14px; color: var(--muted); background: none; font-size: 10px; }
.search-filters button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); }
.search-results { margin-top: 10px; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
#search-result-title { color: var(--muted); font-size: 11px; font-weight: 500; }
.result-section { margin-bottom: 18px; }
.result-section header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.result-section h3 { margin: 0; font-size: 12px; }
.result-section header span { font-size: 9px; color: var(--muted); }
.search-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.result-tile { min-width: 0; overflow: hidden; text-align: left; background: var(--surface); color: var(--text); border: 0; border-radius: 12px; padding: 0 0 8px; }
.result-cover { position: relative; height: 86px; overflow: hidden; }
.result-cover img { width: 100%; height: 100%; object-fit: cover; }
.result-cover .editorial-cover svg { height: 120%; }
.result-tile strong { display: block; padding: 6px 6px 0; font-size: 9px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-tile small { display: block; padding: 3px 6px 0; font-size: 8px; color: var(--muted); }
.search-discovery { flex-shrink: 0; margin-top: 8px; padding: 14px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.search-discovery strong { font-size: 12px; }
.search-discovery p { margin: 4px 0; color: var(--muted); font-size: 10px; }
.search-suggestions { margin-top: 10px; gap: 6px; }
.suggestion { min-height: 44px; font-size: 10px; padding: 0 10px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }