:root { color-scheme:light; --paper:#f2efe7; --ink:#171714; --line:rgba(23,23,20,.2); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; height:100%; background:var(--paper); color:var(--ink); }
body { height:100svh; display:flex; flex-direction:column; }
.app-banner { flex-shrink:0; display:flex; align-items:center; gap:12px; padding:10px 24px; background:#20221e; color:#f2efe7; }
.app-banner img { flex-shrink:0; border-radius:9px; width:40px; height:40px; }
.app-banner div { flex:1; min-width:0; }
.app-banner strong { display:block; font-size:13px; font-weight:600; letter-spacing:-.015em; }
.app-banner div>span { display:block; margin-top:3px; font-size:11px; color:#c4c6bb; }
.app-banner a { flex-shrink:0; display:flex; align-items:center; gap:12px; min-height:44px; color:inherit; text-decoration:underline; text-underline-offset:5px; text-decoration-color:#f2efe760; font-size:12px; font-weight:500; }
.app-banner a:hover { text-decoration-color:currentColor; }
@media(max-width:600px) { .app-banner { padding:6px 12px; gap:10px; } .app-banner img { width:36px; height:36px; } .app-banner strong { font-size:12px; } .app-banner div>span { font-size:0; } .app-availability { font-size:10px; } .app-banner a { gap:6px; font-size:11px; } }
button,input,select,a { font:inherit; }
button,select { cursor:pointer; color:inherit; }
button:disabled { opacity:.5; cursor:wait; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid currentColor; outline-offset:4px; }
a { color:inherit; }
.topbar { flex-shrink:0; min-height:64px; display:flex; align-items:center; gap:12px; padding:12px 24px; border-bottom:1px solid var(--line); }
.brand { color:inherit; text-decoration:none; font-weight:900; letter-spacing:-.05em; font-size:19px; margin-right:auto; }
.brand span { color:#bb3524; }
nav { display:flex; gap:4px; }
.nav-button { border:0; background:transparent; padding:10px; font-weight:650; color:#55554c; }
.nav-button.active { color:var(--ink); box-shadow:inset 0 -2px currentColor; }
#saved-count { font-size:14px; }
main { flex:1; min-height:0; display:flex; flex-direction:column; }
#discovery-controls { flex-shrink:0; padding:0 24px; display:flex; gap:12px; align-items:flex-start; border-bottom:1px solid var(--line); }
#feed-status { font-size:11px; color:#55554c; white-space:nowrap; line-height:44px; }
.filter-disclosure { min-width:0; flex:1; }
.filter-disclosure summary { display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; list-style:none; font-size:12px; font-weight:650; }
.filter-disclosure summary::-webkit-details-marker { display:none; }
.filter-summary { color:#55554c; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.filter-chevron { margin-left:auto; }
.filter-disclosure[open] .filter-chevron { transform:rotate(180deg); }
.filter-disclosure .filter-row { padding:4px 0 12px; }
.filter-disclosure summary:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }
#search-view>.filter-disclosure { margin-bottom:16px; border-bottom:1px solid var(--line); }
.filter-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.filter-row label { display:flex; gap:8px; align-items:center; font-size:14px; font-weight:600; }
select { border:1px solid var(--line); border-radius:12px; background:var(--paper); padding:10px; max-width:100%; }
.free-filter { min-height:44px; }
.free-filter input { width:20px; height:20px; accent-color:var(--ink); }
.feed { flex:1; min-height:0; overflow-y:auto; scroll-snap-type:y mandatory; scrollbar-width:none; }
.feed::-webkit-scrollbar,.saved-view::-webkit-scrollbar { display:none; }
.tone-0 { --card-bg:#cc3b29; --card-ink:var(--paper); }
.tone-1 { --card-bg:#304a8c; --card-ink:var(--paper); }
.tone-2 { --card-bg:#1f5740; --card-ink:var(--paper); }
.tone-3 { --card-bg:var(--paper); --card-ink:var(--ink); }
.card { min-height:100%; scroll-snap-align:start; padding:clamp(24px,4vw,56px); display:flex; position:relative; background:var(--card-bg); color:var(--card-ink); }
.card-content { width:100%; max-width:920px; display:flex; flex-direction:column; align-items:flex-start; margin:auto; }
.eyebrow { font-size:14px; font-weight:750; letter-spacing:.09em; margin:0 0 14px; text-transform:uppercase; }
.card h2 { margin:0; max-width:20ch; font-size:clamp(34px,5.8vw,76px); line-height:1.04; letter-spacing:-.05em; overflow-wrap:anywhere; }
.what { margin:20px 0 0; font-size:20px; font-weight:650; }
.hook { max-width:60ch; margin:12px 0 0; font-size:18px; line-height:1.5; }
.facts { display:flex; flex-direction:column; gap:8px; line-height:1.45; font-size:16px; margin:24px 0 0; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; align-items:center; }
.action { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid currentColor; border-radius:24px; background:transparent; padding:10px 18px; font-weight:650; cursor:pointer; text-decoration:none; }
.save-button[aria-pressed=true] { background:var(--card-ink); color:var(--card-bg); border-color:var(--card-ink); }
.heart-feedback { position:absolute; left:50%; top:45%; transform:translate(-50%,-50%) scale(.5); font-size:100px; opacity:0; pointer-events:none; }
.show-heart .heart-feedback { animation:heart .8s ease both; }
@keyframes heart { 20%,65% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.15); } }
.saved-view { flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; padding:32px max(20px,6vw) 80px; }
.saved-view>header h1 { margin:0 0 24px; font-size:clamp(32px,5vw,56px); letter-spacing:-.05em; }
.saved-list { max-width:960px; }
.saved-group { margin-bottom:32px; }
.saved-group>h2 { font-size:24px; margin:24px 0 14px; }
.saved-row { padding:24px; margin:12px 0; border-radius:22px; background:var(--card-bg); color:var(--card-ink); border:1px solid var(--line); }
.row-detail { border:0; background:none; padding:0; color:inherit; text-align:left; width:100%; }
.row-detail h3 { margin:0; font-size:28px; letter-spacing:-.035em; }
.row-detail .facts { margin-top:12px; }
.empty { padding:40px 24px; max-width:760px; }
#search-input { display:block; width:100%; margin:12px 0 24px; padding:16px; border:1px solid var(--line); border-radius:14px; background:transparent; color:inherit; }
#search-view>.filter-row { margin-bottom:24px; }
.search-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:16px; }
.search-result { text-align:left; border:1px solid var(--line); border-radius:22px; background:var(--card-bg); color:var(--card-ink); padding:24px; }
.search-result h2 { font-size:28px; letter-spacing:-.035em; }
dialog { width:100vw; max-width:none; height:100svh; max-height:none; margin:0; border:0; padding:0; background:var(--card-bg); color:var(--card-ink); }
.dialog-close { display:block; position:sticky; z-index:2; top:16px; margin:16px 20px 0 auto; width:48px; height:48px; border-radius:50%; border:1px solid currentColor; background:var(--card-bg); color:inherit; font-size:28px; }
.detail { max-width:920px; margin:auto; padding:20px clamp(24px,5vw,64px) 64px; }
.detail h1 { margin:12px 0 24px; font-size:clamp(36px,6vw,76px); line-height:1.05; letter-spacing:-.045em; overflow-wrap:anywhere; }
.detail p { line-height:1.5; }
.detail .lede { font-size:22px; font-weight:600; }
.secondary { font-size:14px; opacity:.8; margin-top:24px; }
.notice { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:20; border-radius:12px; padding:12px 18px; background:var(--ink); color:var(--paper); max-width:90%; box-shadow:0 2px 16px #0003; }
.retry { width:44px; min-height:44px; border:0; background:transparent; font-size:24px; }
@media(max-width:600px) {
  .topbar { gap:2px; padding:8px 12px; }
  .brand { font-size:16px; }
  .brand span { display:block; }
  .nav-button { padding:10px 8px; }
  #discovery-controls { padding:0 12px; gap:8px; }
  #feed-status { max-width:35%; overflow:hidden; text-overflow:ellipsis; }
  .filter-disclosure[open] .filter-row { display:grid; grid-template-columns:1fr; }
  .filter-disclosure .filter-row label { justify-content:space-between; }
  .filter-row { gap:6px; }
  .filter-row label { gap:4px; }
  select { padding:10px 5px; }
  .card { padding:24px; }
  .card h2 { font-size:36px; }
}
@media(prefers-reduced-motion:reduce) { .show-heart .heart-feedback { animation:none; } }


/* Saved: a list of plans, in the same poster language as the feed. */
.saved-heading { font-size: clamp(1.6rem, 5vw, 2.3rem); letter-spacing: -.02em; margin: 4px 0 18px; }
.saved-group { margin-bottom: 26px; }
.saved-group > .eyebrow { margin: 0 0 10px; opacity: .6; }
.saved-group.earlier { opacity: .55; }
.saved-row .facts-line { margin: 6px 0 0; font-size: .92rem; opacity: .85; }
.saved-row .chip { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 999px; margin-bottom: 8px;
  background: rgba(255,255,255,.22); }
.tone-3 .saved-row .chip, .saved-row.tone-3 .chip { background: rgba(17,17,15,.12); }

/* About panel: same restraint as the rest, plus the language choice. */
#about-view h2 { font-size: 1rem; letter-spacing: .02em; margin: 22px 0 6px; opacity: .6;
  text-transform: uppercase; }
#about-view p { max-width: 56ch; margin: 0 0 4px; }
#about-view .lede { font-size: 1.1rem; }
.language-choice select { font: inherit; padding: 10px 14px; border-radius: 12px;
  border: 1px solid rgba(17,17,15,.18); background: rgba(255,255,255,.5); }

/* First-run "this scrolls" nudge, matching the native feed's motion.
   Every card shifts together, so the stack stays flush and the lift uncovers a
   band of the *next* poster rather than opening a gap between them.
   44px clears the eyebrow and leaves the headline whole — more slides the title
   under the filter bar and chops it, which reads as breakage. Smooth curves, no
   spring: a spring here looks like a toy rather than a thumb. */
.feed.nudge .card { animation: poster-nudge 2.3s 0.9s 3 both; }
@keyframes poster-nudge {
  0%        { transform: translateY(0);     animation-timing-function: cubic-bezier(.33, 0, .2, 1); }
  21%       { transform: translateY(-44px); }
  32%       { transform: translateY(-44px); animation-timing-function: cubic-bezier(.33, 0, .3, 1); }
  56%, 100% { transform: translateY(0); }
}
.swipe-hint {
  position: absolute; left: 50%; bottom: 26px; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: -4px;
  padding: 9px 15px; border-radius: 999px; pointer-events: none; z-index: 3;
  background: rgba(242,239,231,.92); color: #11110f;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
  animation: hint-breathe 1.6s ease-in-out infinite alternate,
             hint-ride 2.3s 0.9s 3 both;
}
.swipe-hint span { display: block; line-height: .62; font-size: 15px; font-weight: 700; }
.swipe-hint span:last-child { opacity: .3; }
@keyframes hint-breathe {
  from { translate: -50% 0; }
  to   { translate: -50% -5px; }
}
/* Leads the poster and thins out as it rises, so the two read as one gesture. */
@keyframes hint-ride {
  0%        { transform: translateY(0);     opacity: 1;   animation-timing-function: cubic-bezier(.33, 0, .2, 1); }
  21%, 32%  { transform: translateY(-24px); opacity: .45; }
  56%, 100% { transform: translateY(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .feed.nudge .card { animation: none; }
  .swipe-hint { animation: none; }
}