/* Afterwatch prototype. Butter design system, mobile subset (px used as pt). */
:root {
  /* Type */
  --font: "Geist", -apple-system, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;

  /* Spacing: geometric x2 */
  --sp-xxs: 2px; --sp-xs: 4px; --sp-s: 8px; --sp-m: 16px; --sp-l: 32px; --sp-xl: 64px; --sp-xxl: 128px;

  /* Radius */
  --r-xxs: 2px; --r-xs: 4px; --r-s: 8px; --r-m: 16px; --r-l: 32px; --r-xl: 9999px;

  /* Butter Yellow (primary). Placeholder scale until the official one is defined. */
  --butter-10: #FFFBEA; --butter-20: #FFF3C2; --butter-30: #FFE98F; --butter-40: #FFDD55;
  --butter-50: #FFD12E; --butter-60: #E9B800; --butter-80: #8A6A00; --butter-100: #3D2F00;
  /* Indigo (secondary accent) */
  --indigo-10: #EFEFFF; --indigo-20: #CFCEFB; --indigo-40: #7C7AF6; --indigo-60: #3B39E8;
  --indigo-70: #2A28C9; --indigo-100: #0A0966;
  /* Azure (complementary) */
  --azure-10: #ECF7FD; --azure-20: #C9E8F7; --azure-40: #79C0E6; --azure-60: #3E9BD1; --azure-100: #163F5C;

  /* Neutrals and semantic (not yet in Butter, provisional) */
  --ink: #141414; --ink-2: #3B3B3B; --muted: #6E6C67; --line: #E9E6DF;
  --bg: #F7F5F0; --tint: #EFECE5; --surface: #FFFFFF;
  --success: #1E8E4E; --danger: #C93434;

  /* Motion (durations from Butter; curves provisional) */
  --d-25: 25ms; --d-50: 50ms; --d-75: 75ms; --d-150: 150ms; --d-250: 250ms; --d-500: 500ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--font); color: var(--ink); background: #1C1C1C;
  line-height: 1.25; letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased; display: grid; place-items: center; overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
input { font: inherit; letter-spacing: inherit; }

/* Type tokens */
.h1 { font-size: 42px; font-weight: 700; } .h2 { font-size: 36px; font-weight: 600; }
.h3 { font-size: 28px; font-weight: 600; } .h4 { font-size: 24px; font-weight: 600; }
.h5 { font-size: 20px; font-weight: 600; } .h6 { font-size: 16px; font-weight: 500; }
.b1 { font-size: 16px; font-weight: 400; } .b2 { font-size: 14px; font-weight: 400; } .b3 { font-size: 12px; font-weight: 500; }
.btn1 { font-size: 16px; font-weight: 500; } .btn2 { font-size: 14px; font-weight: 500; }
.n1, .n2, .n3, .n4, .n5, .n6 { font-family: var(--mono); font-weight: 500; }
.n1 { font-size: 36px; } .n2 { font-size: 28px; } .n3 { font-size: 24px; } .n4 { font-size: 20px; } .n5 { font-size: 16px; } .n6 { font-size: 14px; }
.muted { color: var(--muted); }
.label { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }

/* Device frame: a phone on desktop, full screen on a phone */
.device {
  position: relative; width: 390px; height: 844px; background: var(--bg);
  border-radius: 48px; overflow: hidden; box-shadow: 0 0 0 10px #0B0B0B, 0 32px 64px rgba(0,0,0,.5);
}
@media (min-width: 501px) {
  .device { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
}
@media (max-width: 500px) {
  body { display: block; background: var(--bg); }
  .device { width: 100%; height: 100dvh; border-radius: 0; box-shadow: none; }
  .statusbar { display: none; }
}
.statusbar {
  position: absolute; inset: 0 0 auto 0; height: 48px; z-index: 50; display: flex; align-items: center;
  justify-content: space-between; padding: 0 var(--sp-l); font-weight: 600; font-size: 15px; pointer-events: none;
}
.statusbar .icons { display: flex; gap: var(--sp-xs); align-items: center; }
.statusbar { background: var(--bg); }
.device:has(.welcome) .statusbar { background: var(--butter-50); }
.statusbar.on-dark { color: #fff; }

.screen {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding-top: 48px;
  scrollbar-width: none; overscroll-behavior: contain;
}
.screen::-webkit-scrollbar { display: none; }
.screen.enter { animation: screenIn var(--d-250) var(--ease-out) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } }

.pad { padding: 0 var(--sp-m); }
.stack-s > * + * { margin-top: var(--sp-s); }
.stack-m > * + * { margin-top: var(--sp-m); }
.stack-l > * + * { margin-top: var(--sp-l); }
.row { display: flex; align-items: center; gap: var(--sp-s); }
.spacer { flex: 1; }

/* Buttons: one dominant pill per screen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-s);
  min-height: 48px; padding: 0 var(--sp-m); border-radius: var(--r-xl); white-space: nowrap;
  font-size: 16px; font-weight: 500; transition: transform var(--d-150) var(--ease-out), background-color var(--d-150) ease, opacity var(--d-150) ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--butter-50); color: var(--butter-100); width: 100%; }
.btn-primary:disabled { background: var(--tint); color: var(--muted); cursor: default; transform: none; }
.btn-dark { background: var(--ink); color: #fff; width: 100%; }
.btn-ghost { background: var(--tint); color: var(--ink); }
.btn-text { min-height: 44px; padding: 0 var(--sp-s); color: var(--indigo-60); font-weight: 500; font-size: 14px; }
.btn .count { font-family: var(--mono); opacity: .7; }
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-xl);
  transition: transform var(--d-150) var(--ease-out), background-color var(--d-150) ease;
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn.soft { background: var(--surface); }
svg.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.s { width: 16px; height: 16px; }
svg.i.l { width: 24px; height: 24px; }

/* Sticky bottom action area */
.dock {
  position: sticky; bottom: 0; z-index: 10; padding: var(--sp-m) var(--sp-m) var(--sp-l);
  background: linear-gradient(to bottom, rgba(247,245,240,0), var(--bg) 32%);
}

/* Generated posters (no copyrighted art) */
.poster {
  position: relative; aspect-ratio: 2 / 3; border-radius: var(--r-s); overflow: hidden; color: #fff;
  background: radial-gradient(120% 80% at 80% 0%, var(--b) 0%, transparent 60%), linear-gradient(160deg, var(--a), var(--a) 40%, color-mix(in srgb, var(--b) 40%, var(--a)));
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-s);
}
.poster::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 8px);
}
.poster .pt { font-weight: 700; font-size: 13px; line-height: 1.1; text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; position: relative; z-index: 1; }
.poster .pk { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; opacity: .75; position: relative; z-index: 1; margin-bottom: var(--sp-xxs); }
.poster.lg .pt { font-size: 22px; }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; opacity: 0; transition: opacity var(--d-250) ease; }
.poster img.ok { opacity: 1; }

/* Welcome */
.welcome { background: var(--butter-50); color: var(--butter-100); display: flex; flex-direction: column; overflow: hidden; }
.collage-wrap { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.collage-wrap::after { content: ""; position: absolute; inset: auto 0 0 0; height: 96px; background: linear-gradient(to bottom, rgba(255,209,46,0), var(--butter-50)); }
.collage { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-s); padding: var(--sp-m); transform: rotate(-6deg) scale(1.15); margin-top: var(--sp-s); }
.collage .poster { box-shadow: 0 8px 16px rgba(61,47,0,.18); }
.collage .poster:nth-child(even) { transform: translateY(var(--sp-l)); }
.welcome-copy { padding: 0 var(--sp-m); position: relative; z-index: 1; }
.welcome .btn-dark { margin-top: var(--sp-l); }
.welcome .fine { margin-top: var(--sp-m); text-align: center; color: var(--butter-80); }

/* Progress */
.progress { height: 4px; background: var(--tint); border-radius: var(--r-xl); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--ink); border-radius: inherit; transform-origin: left; transition: transform var(--d-250) var(--ease-out); }
.topbar { display: flex; align-items: center; gap: var(--sp-s); padding: var(--sp-s) var(--sp-s) var(--sp-s) var(--sp-s); }
.topbar .progress { flex: 1; margin-right: var(--sp-m); }

/* Search */
.search {
  display: flex; align-items: center; gap: var(--sp-s); height: 48px; padding: 0 var(--sp-m);
  background: var(--surface); border-radius: var(--r-xl); color: var(--muted);
}
.search input { border: 0; outline: 0; background: none; flex: 1; font-size: 16px; color: var(--ink); min-width: 0; }

/* Pick grid */
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-s); }
.pick { position: relative; transition: transform var(--d-150) var(--ease-out); }
.pick:active { transform: scale(0.97); }
.pick .poster { transition: opacity var(--d-150) ease; }
.pick .check {
  position: absolute; top: var(--sp-s); right: var(--sp-s); width: 24px; height: 24px; border-radius: var(--r-xl);
  background: rgba(0,0,0,.35); border: 1.5px solid rgba(255,255,255,.85); display: grid; place-items: center; z-index: 6;
  transition: background-color var(--d-150) ease, border-color var(--d-150) ease, transform var(--d-250) var(--ease-out);
}
.pick .check .n6 { font-size: 12px; color: var(--butter-100); }
/* Selected: a thick butter ring drawn above the poster image, a numbered badge, a slight lift */
.pick::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-s); z-index: 5; pointer-events: none;
  box-shadow: inset 0 0 0 0 var(--butter-50); transition: box-shadow var(--d-150) ease; }
.pick.on::after { box-shadow: inset 0 0 0 4px var(--butter-50); }
.pick.on .check { background: var(--butter-50); border-color: var(--butter-50); transform: scale(1.1); }
.pick.on .poster { box-shadow: 0 8px 16px rgba(61,47,0,.25); }
/* Cap reached: everything not picked steps back */
.pick-grid.full .pick:not(.on) { opacity: .35; filter: grayscale(.6); transition: opacity var(--d-250) ease, filter var(--d-250) ease; }
.pick-grid.full .pick:not(.on):active { transform: none; }
.empty-search { padding: var(--sp-l) 0; text-align: center; }

/* Rate stack */
.rate-stage { position: relative; height: 420px; margin: var(--sp-m) auto 0; width: 260px; }
.rate-card { position: absolute; inset: 0; transition: transform var(--d-250) var(--ease-out), opacity var(--d-250) ease; will-change: transform; }
.rate-card .poster { height: 100%; border-radius: var(--r-m); box-shadow: 0 16px 32px rgba(20,20,20,.18); }
.rate-card.back { transform: translateY(16px) scale(.94); opacity: .6; }
.rate-card.out-love, .rate-card.out-like { transform: translateX(140%) rotate(12deg); opacity: 0; }
.rate-card.out-nope { transform: translateX(-140%) rotate(-12deg); opacity: 0; }
.rate-card.out-skip { transform: translateY(-40px) scale(.9); opacity: 0; }
.rate-actions { display: flex; justify-content: center; gap: var(--sp-l); margin-top: var(--sp-l); }
.rate-btn { display: flex; flex-direction: column; align-items: center; gap: var(--sp-s); color: var(--ink); transition: transform var(--d-150) var(--ease-out); }
.rate-btn:active { transform: scale(0.94); }
.rate-btn .ico { width: 64px; height: 64px; border-radius: var(--r-xl); display: grid; place-items: center; background: var(--surface);
  box-shadow: 0 4px 16px rgba(20,20,20,.08); transition: background-color var(--d-150) ease; }
/* All three start neutral; only the tapped one fills with its colour */
.rate-btn.pressed[data-r=nope] .ico, .rate-btn[data-r=nope]:active .ico { background: var(--ink); color: #fff; }
.rate-btn.pressed[data-r=like] .ico, .rate-btn[data-r=like]:active .ico { background: var(--azure-60); color: #fff; }
.rate-btn.pressed[data-r=love] .ico, .rate-btn[data-r=love]:active .ico { background: var(--butter-50); color: var(--butter-100); }
.rate-btn.pressed .ico .i, .rate-btn:active .ico .i { fill: currentColor; }
.rate-btn[data-r=nope].pressed .ico .i, .rate-btn[data-r=nope]:active .ico .i { fill: none; }
.rate-btn.pressed { transform: scale(0.94); }
.rate-skip { display: block; margin: var(--sp-m) auto 0; color: var(--muted); }
.rate-hint { text-align: center; margin-top: var(--sp-m); min-height: 16px; transition: opacity var(--d-150) ease; }

/* Building */
.building { display: flex; flex-direction: column; justify-content: center; min-height: 100%; padding: var(--sp-l) var(--sp-m); }
.chip-cloud { display: flex; flex-wrap: wrap; gap: var(--sp-s); }
.taste-chip {
  display: inline-flex; align-items: center; gap: var(--sp-xs); min-height: 32px; padding: 0 var(--sp-m);
  border-radius: var(--r-xl); background: var(--surface); font-size: 14px; font-weight: 500;
}
.taste-chip.w3 { background: var(--butter-40); color: var(--butter-100); font-size: 16px; min-height: 40px; }
.taste-chip.w2 { background: var(--butter-20); color: var(--butter-100); }
.taste-chip.avoid { background: var(--tint); color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(110,108,103,.5); }
.chip-cloud.reveal .taste-chip { animation: chipIn var(--d-250) var(--ease-out) both; }
@keyframes chipIn { from { opacity: 0; transform: translateY(8px) scale(.96); } }

/* App shell */
.app-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-s) var(--sp-m) var(--sp-m); }
.avatar { width: 32px; height: 32px; border-radius: var(--r-xl); background: var(--indigo-60); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr);
  padding: var(--sp-s) var(--sp-s) var(--sp-l); background: rgba(247,245,240,.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.tab { display: flex; flex-direction: column; align-items: center; gap: var(--sp-xs); min-height: 44px; justify-content: center; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0; transition: color var(--d-150) ease; }
.tab.on { color: var(--ink); }
.tab-pane { padding-bottom: 112px; }

/* Mode chips (horizontal) */
.hscroll { display: flex; gap: var(--sp-s); overflow-x: auto; padding: 0 var(--sp-m); scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sp-m); }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; flex: none; }
.mode {
  display: inline-flex; align-items: center; gap: var(--sp-xs); min-height: 40px; padding: 0 var(--sp-m);
  border-radius: var(--r-xl); background: var(--surface); font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: background-color var(--d-150) ease, color var(--d-150) ease, transform var(--d-150) var(--ease-out);
}
.mode:active { transform: scale(0.97); }
.mode.on { background: var(--ink); color: #fff; }

/* Recommendation card (feature card, radius M) */
.rec { background: var(--surface); border-radius: var(--r-m); padding: var(--sp-m); }
.rec-top { display: grid; grid-template-columns: 112px 1fr; gap: var(--sp-m); }
.rec-meta { display: flex; flex-direction: column; min-width: 0; }
.rec-meta .sub { margin-top: var(--sp-xs); }
.match { display: inline-flex; align-items: baseline; gap: var(--sp-xs); margin-top: var(--sp-s); }
.match .n5 { color: var(--indigo-60); }
.because { margin-top: var(--sp-m); padding: var(--sp-s) var(--sp-m) var(--sp-s) var(--sp-s); border-radius: var(--r-s); background: var(--butter-10); display: flex; gap: var(--sp-s); align-items: flex-start; }
.because .i { color: var(--butter-80); margin-top: 1px; }
.because b { font-weight: 600; }
.where { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-top: auto; padding-top: var(--sp-s); }
.svc { display: inline-flex; align-items: center; gap: var(--sp-xs); height: 24px; padding: 0 var(--sp-s); border-radius: var(--r-xs); background: var(--azure-10); color: var(--azure-100); font-size: 12px; font-weight: 500; white-space: nowrap; }
.svc.rent { background: var(--tint); color: var(--ink-2); }
.svc.warn { background: var(--tint); color: var(--muted); }
.rec-actions { display: flex; align-items: center; gap: var(--sp-xs); margin-top: var(--sp-m); border-top: 1px solid var(--line); padding-top: var(--sp-s); }
.act {
  display: inline-flex; align-items: center; gap: var(--sp-xs); min-height: 40px; padding: 0 var(--sp-s);
  border-radius: var(--r-xl); font-size: 14px; font-weight: 500; color: var(--ink-2);
  transition: transform var(--d-150) var(--ease-out), background-color var(--d-150) ease, color var(--d-150) ease;
}
.act:active { transform: scale(0.95); }
.act.on[data-a=love] { background: var(--butter-30); color: var(--butter-100); }
.act.on[data-a=like] { background: var(--azure-20); color: var(--azure-100); }
.act.on[data-a=save] { background: var(--indigo-10); color: var(--indigo-70); }
.act.on[data-a=love] .i { fill: currentColor; }
.act.on[data-a=save] .i { fill: currentColor; }
.why-link { margin-left: auto; color: var(--indigo-60); }
.rec-list > .rec { animation: chipIn var(--d-250) var(--ease-out) both; }
.rec.leaving { transition: opacity var(--d-150) ease, transform var(--d-150) var(--ease-out); opacity: 0; transform: scale(.98); }

/* Section header */
.sec { display: flex; align-items: baseline; justify-content: space-between; padding: 0 var(--sp-m); margin: var(--sp-l) 0 var(--sp-s); }

/* Mini posters row */
.mini { width: 112px; }
.mini .poster { margin-bottom: var(--sp-s); }
.mini .n6 { color: var(--indigo-60); }

/* Locked / low confidence */
.locked { background: var(--surface); border-radius: var(--r-m); padding: var(--sp-m); display: flex; gap: var(--sp-m); align-items: center; }
.locked .lk { width: 40px; height: 40px; border-radius: var(--r-xl); background: var(--tint); display: grid; place-items: center; flex: none; }
.locked .progress { margin-top: var(--sp-s); }

/* People like you */
.person { background: var(--surface); border-radius: var(--r-m); padding: var(--sp-m); width: 248px; }
.person .face { width: 40px; height: 40px; border-radius: var(--r-xl); display: grid; place-items: center; font-weight: 600; color: var(--ink); }
.person .posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xs); margin-top: var(--sp-m); }
.person .poster { padding: var(--sp-xs); }
.person .poster .pt { font-size: 10px; }
.person .poster .pk { display: none; }

/* Sheets */
.scrim { position: absolute; inset: 0; z-index: 60; background: rgba(20,20,20,.4); opacity: 0; transition: opacity var(--d-250) ease; }
.scrim.open { opacity: 1; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 88%; display: flex; flex-direction: column;
  background: var(--bg); border-radius: var(--r-l) var(--r-l) 0 0; transform: translateY(100%);
  transition: transform var(--d-500) var(--ease-drawer); touch-action: none;
}
.sheet.open { transform: translateY(0); }
.sheet.closing { transition-duration: var(--d-250); }
.sheet .grab { padding: var(--sp-s) 0 var(--sp-xs); display: grid; place-items: center; cursor: grab; }
.sheet .grab i { width: 40px; height: 4px; border-radius: var(--r-xl); background: var(--line); }
.sheet-body { overflow-y: auto; padding: 0 var(--sp-m) var(--sp-l); touch-action: pan-y; scrollbar-width: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-xs) var(--sp-m) var(--sp-m); }

/* Why sheet */
.gauge { display: flex; align-items: center; gap: var(--sp-m); background: var(--surface); border-radius: var(--r-m); padding: var(--sp-m); }
.ring { --p: 90; width: 72px; height: 72px; border-radius: var(--r-xl); flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--indigo-60) calc(var(--p) * 1%), var(--indigo-10) 0); }
.ring > span { width: 56px; height: 56px; border-radius: var(--r-xl); background: var(--surface); display: grid; place-items: center; }
.reason { display: grid; grid-template-columns: 40px 1fr; gap: var(--sp-m); align-items: center; padding: var(--sp-s) 0; }
.reason .poster { padding: 0; border-radius: var(--r-xs); }
.reason .poster .pt, .reason .poster .pk { display: none; }
.card { background: var(--surface); border-radius: var(--r-m); padding: var(--sp-m); }
.deal { background: var(--butter-10); border-radius: var(--r-m); padding: var(--sp-m); display: flex; gap: var(--sp-s); }
.deal .i { color: var(--butter-80); }
.opt-list { display: grid; gap: var(--sp-s); }
.opt {
  display: flex; align-items: center; gap: var(--sp-m); width: 100%; text-align: left; padding: var(--sp-m);
  background: var(--surface); border-radius: var(--r-m); border: 1.5px solid transparent;
  transition: border-color var(--d-150) ease, background-color var(--d-150) ease, transform var(--d-150) var(--ease-out);
}
.opt:active { transform: scale(0.98); }
.opt .oi { width: 40px; height: 40px; border-radius: var(--r-xl); background: var(--tint); display: grid; place-items: center; flex: none; }
.opt.on { border-color: var(--ink); }

/* Tonight sheet */
.chooser { display: flex; flex-wrap: wrap; gap: var(--sp-s); }
.pill {
  min-height: 40px; padding: 0 var(--sp-m); border-radius: var(--r-xl); background: var(--surface); font-size: 14px; font-weight: 500;
  border: 1.5px solid transparent; transition: background-color var(--d-150) ease, border-color var(--d-150) ease, transform var(--d-150) var(--ease-out);
}
.pill:active { transform: scale(0.97); }
.pill.on { background: var(--butter-20); border-color: var(--butter-60); color: var(--butter-100); }
.pill.mono { font-family: var(--mono); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--tint); border-radius: var(--r-xl); padding: var(--sp-xs); position: relative; }
.seg button { position: relative; z-index: 1; min-height: 40px; font-size: 14px; font-weight: 500; border-radius: var(--r-xl); transition: color var(--d-150) ease; }
.seg .thumb { position: absolute; top: var(--sp-xs); bottom: var(--sp-xs); left: var(--sp-xs); width: calc((100% - 8px) / 3); background: var(--surface); border-radius: var(--r-xl); transition: transform var(--d-250) var(--ease-out); }
.seg-help { margin-top: var(--sp-s); }

/* Toast */
.toast {
  position: absolute; left: var(--sp-m); right: var(--sp-m); bottom: 104px; z-index: 70; display: flex; align-items: center; gap: var(--sp-s);
  padding: var(--sp-s) var(--sp-s) var(--sp-s) var(--sp-m); min-height: 48px; border-radius: var(--r-m); background: var(--ink); color: #fff;
  transform: translateY(16px); opacity: 0; transition: transform var(--d-250) var(--ease-out), opacity var(--d-250) ease; pointer-events: none;
}
.toast.show { transform: none; opacity: 1; pointer-events: auto; }
.toast .btn-text { color: var(--butter-40); margin-left: auto; }

/* Library */
.tabs { display: flex; gap: var(--sp-l); padding: 0 var(--sp-m); border-bottom: 1px solid var(--line); }
.tabs button { min-height: 44px; font-size: 16px; font-weight: 500; color: var(--muted); position: relative; transition: color var(--d-150) ease; }
.tabs button.on { color: var(--ink); }
.tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); border-radius: var(--r-xxs); }
.lib-row { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--sp-m); align-items: center; background: var(--surface); border-radius: var(--r-m); padding: var(--sp-s) var(--sp-m) var(--sp-s) var(--sp-s); }
.lib-row .poster { padding: 0; }
.lib-row .poster .pt, .lib-row .poster .pk { display: none; }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--sp-s); border-radius: var(--r-xs); font-size: 11px; font-weight: 600; letter-spacing: 0; }
.badge.leaving { background: var(--butter-30); color: var(--butter-100); }
.filters { display: flex; gap: var(--sp-s); padding: var(--sp-m) var(--sp-m) var(--sp-s); }
.filters .pill { min-height: 32px; font-size: 12px; }
.empty { text-align: center; padding: var(--sp-xl) var(--sp-l); }
.empty .ei { width: 64px; height: 64px; border-radius: var(--r-xl); background: var(--surface); display: grid; place-items: center; margin: 0 auto var(--sp-m); }

/* Taste */
.taste-hero { background: var(--butter-50); color: var(--butter-100); border-radius: var(--r-m); padding: var(--sp-m); }
.taste-hero .chip-cloud { margin-top: var(--sp-m); }
.taste-hero .taste-chip { background: rgba(255,255,255,.55); }
.taste-hero .taste-chip.w3 { background: var(--butter-100); color: var(--butter-40); }
.taste-hero .taste-chip.w2 { background: rgba(255,255,255,.85); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-s); }
.stat { background: var(--surface); border-radius: var(--r-m); padding: var(--sp-m); }
.stat .n3 { display: block; margin-bottom: var(--sp-xs); }
.stat-ic { width: 32px; height: 32px; border-radius: var(--r-xl); display: grid; place-items: center; margin-bottom: var(--sp-s); }
.taste-chip .i { opacity: .8; }
.taste-chip.w3 .i { opacity: 1; }
.cluster { background: var(--surface); border-radius: var(--r-m); padding: var(--sp-m); display: flex; gap: var(--sp-m); align-items: center; }
.cluster .stackp { display: flex; flex: none; }
.cluster .stackp .poster { width: 32px; padding: 0; border-radius: var(--r-xs); box-shadow: 0 0 0 2px var(--surface); }
.cluster .stackp .poster + .poster { margin-left: -12px; }
.cluster .stackp .poster .pt, .cluster .stackp .poster .pk { display: none; }
.cluster.lock { opacity: .7; }

/* Explore */
.theme { width: 280px; border-radius: var(--r-m); padding: var(--sp-m); color: #fff; min-height: 168px; display: flex; flex-direction: column; justify-content: space-between; }

/* Profile */
.list { background: var(--surface); border-radius: var(--r-m); overflow: hidden; }
.list-row { display: flex; align-items: center; gap: var(--sp-m); min-height: 56px; padding: 0 var(--sp-m); width: 100%; text-align: left; }
.list-row + .list-row { border-top: 1px solid var(--line); }
.list-row.tall { padding-top: var(--sp-m); padding-bottom: var(--sp-m); align-items: center; }
.list-row .sub { display: block; margin-top: var(--sp-xxs); }
.toggle { width: 48px; height: 28px; border-radius: var(--r-xl); background: var(--line); position: relative; transition: background-color var(--d-150) ease; flex: none; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: var(--r-xl); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform var(--d-250) var(--ease-out); }
.toggle.on { background: var(--ink); }
.toggle.on::after { transform: translateX(20px); }

/* Touch devices: no hover effects; reduced motion: fades only */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-property: opacity, background-color, color, border-color !important; }
  .sheet { transform: none; opacity: 0; transition: opacity var(--d-250) ease !important; }
  .sheet.open { opacity: 1; }
}

/* ---------- Title page (pushes in from the right) ---------- */
.page { position: absolute; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column; padding-top: 48px;
  transform: translateX(100%); transition: transform var(--d-500) var(--ease-drawer); box-shadow: -16px 0 32px rgba(20,20,20,.08); }
.page.open { transform: none; }
.page.closing { transition-duration: var(--d-250); }
.page-bar { display: flex; align-items: center; gap: var(--sp-s); padding: var(--sp-xs) var(--sp-s); }
.page-title { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-body { flex: 1; overflow-y: auto; padding-bottom: var(--sp-xl); scrollbar-width: none; }
.page-body::-webkit-scrollbar { display: none; }
.hero { position: relative; padding: var(--sp-m) var(--sp-m) var(--sp-m); overflow: hidden; }
.hero-bg { position: absolute; inset: -32px; width: calc(100% + 64px); height: 70%; object-fit: cover; filter: blur(32px) saturate(1.2); opacity: .45;
  mask-image: linear-gradient(to bottom, #000 40%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); }
.hero-poster { position: relative; width: 160px; margin: 0 auto var(--sp-m); }
.hero-poster .poster { border-radius: var(--r-m); box-shadow: 0 16px 32px rgba(20,20,20,.25); }
.hero > :not(.hero-bg) { position: relative; }
.match-pill { display: inline-flex; align-items: baseline; gap: var(--sp-xs); height: 24px; padding: 0 var(--sp-s); border-radius: var(--r-xs);
  background: var(--indigo-10); color: var(--indigo-70); font-size: 12px; font-weight: 500; align-items: center; white-space: nowrap; }
.match-pill.sm { height: 24px; }
.page-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 44px; gap: var(--sp-s); }
.page-actions .act { justify-content: center; background: var(--surface); min-height: 44px; padding: 0 var(--sp-xs); white-space: nowrap; }
.page-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: var(--sp-m); padding: 0 var(--sp-m); margin-top: var(--sp-m); background: var(--bg);
  border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.page-tabs button { min-height: 44px; font-size: 14px; font-weight: 500; color: var(--muted); position: relative; white-space: nowrap; transition: color var(--d-150) ease; }
.page-tabs button.on { color: var(--ink); }
.page-tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.page-pane { padding-top: var(--sp-m); animation: screenIn var(--d-250) var(--ease-out) both; }

/* AI labelling */
.ai-label { display: flex; align-items: center; gap: var(--sp-xs); font-size: 12px; font-weight: 500; color: var(--indigo-60); }
.themes { display: grid; gap: var(--sp-s); margin-top: var(--sp-m); }
.theme-row { display: grid; grid-template-columns: 112px 1fr 40px; gap: var(--sp-s); align-items: center; }
.theme-row .n6 { text-align: right; font-size: 12px; }
.bar { height: 8px; border-radius: var(--r-xl); background: var(--tint); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--indigo-40); border-radius: inherit; transform-origin: left; }

/* Reviews and comments: real profiles */
.av { display: inline-grid; place-items: center; border-radius: var(--r-xl); font-weight: 600; color: var(--ink); flex: none; }
.seg-mini { display: inline-flex; background: var(--tint); border-radius: var(--r-xl); padding: var(--sp-xxs); }
.seg-mini button { min-height: 36px; padding: 0 var(--sp-m); border-radius: var(--r-xl); font-size: 12px; font-weight: 500; color: var(--muted); transition: background-color var(--d-150) ease, color var(--d-150) ease; }
.seg-mini button.on { background: var(--surface); color: var(--ink); }
.review { background: var(--surface); border-radius: var(--r-m); padding: var(--sp-m); }
.rated { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs); margin-top: var(--sp-s); color: var(--ink-2); }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--sp-s); border-radius: var(--r-xs); background: var(--tint); color: var(--ink-2); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.txt { margin-top: var(--sp-s); }
.review .txt { line-height: 1.4; }
.rev-actions { margin-top: var(--sp-s); gap: var(--sp-xs); margin-left: calc(var(--sp-s) * -1); }
.rev-actions .act { min-height: 36px; font-size: 12px; }
.spoil { position: relative; display: block; width: 100%; text-align: left; margin-top: var(--sp-s); border-radius: var(--r-s); overflow: hidden; }
.spoil-text { display: block; filter: blur(6px); opacity: .6; padding: var(--sp-s); font-size: 14px; user-select: none; }
.spoil-cover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--sp-xs); background: rgba(239,236,229,.7);
  font-size: 12px; font-weight: 500; color: var(--ink); }
.replies { margin-top: var(--sp-s); padding-left: var(--sp-m); border-left: 2px solid var(--line); display: grid; gap: var(--sp-s); }
.reply { display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-s); }
.view-replies { padding: 0; min-height: 32px; font-size: 12px; display: inline-flex; align-items: center; gap: var(--sp-xxs); }
.inline-compose, .composer { display: flex; align-items: center; gap: var(--sp-s); background: var(--surface); border-radius: var(--r-xl); padding: var(--sp-xs) var(--sp-xs) var(--sp-xs) var(--sp-s); }
.inline-compose { margin-top: var(--sp-s); }
.inline-compose { background: var(--bg); }
.inline-compose input, .composer input[name=text] { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 14px; min-height: 36px; }
.spoil-tog { display: inline-flex; align-items: center; gap: var(--sp-xs); font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.spoil-tog input { accent-color: var(--ink); }

/* Episode talk */
.step { width: 40px; height: 40px; background: var(--tint); }
.ep-chips { display: flex; gap: var(--sp-s); overflow-x: auto; scrollbar-width: none; margin-left: calc(var(--sp-m) * -1); margin-right: calc(var(--sp-m) * -1); padding: 0 var(--sp-m); }
.ep { display: inline-flex; align-items: center; gap: var(--sp-xs); flex: none; min-height: 36px; padding: 0 var(--sp-m); border-radius: var(--r-xl); background: var(--surface); font-size: 14px; font-weight: 500;
  transition: background-color var(--d-150) ease, color var(--d-150) ease; }
.ep.locked { color: var(--muted); background: var(--tint); }
.ep.on { background: var(--ink); color: #fff; }
.comment { display: flex; gap: var(--sp-s); padding: var(--sp-s) 0; }
.comment + .comment { border-top: 1px solid var(--line); padding-top: var(--sp-m); }
.ts { display: inline-flex; align-items: center; height: 18px; padding: 0 var(--sp-xs); border-radius: var(--r-xxs); background: var(--azure-10); color: var(--azure-100); font-size: 11px; }

/* Ask AI */
.thread { display: grid; gap: var(--sp-s); }
.bubble.me { justify-self: end; max-width: 80%; background: var(--ink); color: #fff; padding: var(--sp-s) var(--sp-m); border-radius: var(--r-m) var(--r-m) var(--r-xs) var(--r-m); }
.answer { max-width: 92%; border-radius: var(--r-m) var(--r-m) var(--r-m) var(--r-xs); animation: chipIn var(--d-250) var(--ease-out) both; }
.answer .b1 { line-height: 1.4; }
.cites { display: flex; align-items: center; gap: var(--sp-xs); margin-top: var(--sp-s); }
.cites .av + .av { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); }
.dots { display: inline-flex; gap: var(--sp-xs); padding: var(--sp-xs) 0; }
.dots i { width: 6px; height: 6px; border-radius: var(--r-xl); background: var(--muted); animation: dot 900ms ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 150ms; } .dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.ask-box { position: sticky; bottom: var(--sp-m); box-shadow: 0 8px 24px rgba(20,20,20,.1); color: var(--indigo-60); padding-left: var(--sp-m); }
.field { width: 100%; border: 0; outline: 0; resize: none; background: var(--surface); border-radius: var(--r-m); padding: var(--sp-m); font: inherit; font-size: 16px; letter-spacing: inherit; line-height: 1.4; }
.field:focus, .search:focus-within { box-shadow: 0 0 0 2px var(--indigo-40); }

/* AI search */
.search.ai { color: var(--indigo-60); }
.read-chip { display: inline-flex; align-items: center; gap: var(--sp-xxs); padding-right: var(--sp-xs); }
.read-chip button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-xl); }
.result { display: flex; gap: var(--sp-m); width: 100%; text-align: left; background: var(--surface); border-radius: var(--r-m); padding: var(--sp-s) var(--sp-m) var(--sp-s) var(--sp-s);
  transition: transform var(--d-150) var(--ease-out); animation: chipIn var(--d-250) var(--ease-out) both; }
.result:active { transform: scale(0.98); }
.result > .poster { width: 64px; flex: none; padding: 0; }
.result > .poster .pt, .result > .poster .pk, .mini .poster .pt { display: none; }

/* Theme cards: real stills, text on a dark scrim */
.theme-card { position: relative; width: 264px; height: 168px; border-radius: var(--r-m); overflow: hidden; text-align: left; color: #fff;
  background: var(--ink); transition: transform var(--d-150) var(--ease-out); }
.theme-card:active { transform: scale(0.97); }
.theme-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--d-250) ease; }
.theme-card img.ok { opacity: 1; }
.theme-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.85) 0%, rgba(10,10,10,.35) 55%, rgba(10,10,10,0) 100%); }
.theme-copy { position: absolute; left: var(--sp-m); right: var(--sp-m); bottom: var(--sp-m); z-index: 1; display: flex; flex-direction: column; gap: var(--sp-xxs); }
.theme-kicker { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--butter-100);
  background: var(--butter-50); border-radius: var(--r-xs); padding: var(--sp-xxs) var(--sp-s); margin-bottom: var(--sp-xs); }
.theme-eg { color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Screenshot mode: show the status bar and skip entrance animations */
.shot .statusbar { display: flex !important; }
.shot .device { transform: none !important; }
.shot *, .shot *::before, .shot *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; }
.shot .poster img, .shot .theme-card img { opacity: 1 !important; }
.shot body { display: block; background: var(--bg); }
.shot .device { position: fixed !important; left: 0; top: 0; width: 390px !important; height: 844px !important; border-radius: 0; box-shadow: none; }