/* ============================================================
   Grapevine prototype — visual system
   Warm, editorial, a little playful. Serif for voice, sans for UI.
   ============================================================ */

:root {
  --bg:          #FAF5EF;
  --bg-tint:     #F3EAE0;
  --surface:     #FFFFFF;
  --surface-2:   #FBF7F2;
  --ink:         #241A22;
  --ink-2:       #4A3C45;
  --muted:       #776A72;
  --line:        #E8DDD1;
  --line-2:      #D8C9BA;

  --grape:       #6B2C52;
  --grape-hi:    #8A3A6A;
  --grape-soft:  #F5E7EF;
  --vine:        #2F6E4E;
  --vine-soft:   #E2F0E8;
  --amber:       #9C6A0F;
  --amber-soft:  #FBF0D9;
  --coral:       #B8402F;
  --coral-soft:  #FBE6E1;
  --sky:         #2C5C86;
  --sky-soft:    #E4EEF7;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --sh-1: 0 1px 2px rgba(36,26,34,.05), 0 2px 8px rgba(36,26,34,.04);
  --sh-2: 0 2px 4px rgba(36,26,34,.06), 0 10px 28px rgba(36,26,34,.08);
  --sh-3: 0 8px 20px rgba(36,26,34,.10), 0 28px 60px rgba(36,26,34,.14);

  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;

  --ease: cubic-bezier(.2,.7,.3,1);
  --maxw: 1120px;

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23776A72' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
  --bg:          #17121A;
  --bg-tint:     #1F1822;
  --surface:     #221A26;
  --surface-2:   #2A2130;
  --ink:         #F4ECF2;
  --ink-2:       #D9CBD5;
  --muted:       #A395A0;
  --line:        #362B3D;
  --line-2:      #493B50;

  --grape:       #E6A6CB;
  --grape-hi:    #F0BEDA;
  --grape-soft:  #3A2437;
  --vine:        #7FCBA2;
  --vine-soft:   #1E3329;
  --amber:       #E7B75C;
  --amber-soft:  #3A2E18;
  --coral:       #F09082;
  --coral-soft:  #3D211D;
  --sky:         #8FBEE6;
  --sky-soft:    #1C2A38;

  --sh-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.2);
  --sh-2: 0 2px 4px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.32);
  --sh-3: 0 8px 20px rgba(0,0,0,.4), 0 28px 60px rgba(0,0,0,.5);

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A395A0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  /* soft vineyard wash behind everything */
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(58rem 34rem at 12% -8%, color-mix(in srgb, var(--grape) 12%, transparent), transparent 65%),
    radial-gradient(46rem 30rem at 96% 4%, color-mix(in srgb, var(--vine) 10%, transparent), transparent 62%);
}

#app { position: relative; z-index: 1; outline: none; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); font-variation-settings: 'SOFT' 40, 'WONK' 1; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
h3 { font-size: 1.18rem; }
p  { margin: 0 0 .9em; }
a  { color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--grape); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2.5px solid var(--grape);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- top bar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.1rem;
  padding: .6rem clamp(.9rem, 3vw, 1.6rem);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--grape); }
.brand-mark { display: grid; place-items: center; transition: transform .4s var(--ease); }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.08); }
.brand-word { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }

.tabs { display: flex; gap: .2rem; margin-left: auto; }
.tabs a {
  display: flex; align-items: center; gap: .4rem;
  padding: .42rem .85rem; border-radius: 999px;
  text-decoration: none; color: var(--muted); font-weight: 550; font-size: .92rem;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.tabs a:hover { background: var(--bg-tint); color: var(--ink); }
.tabs a[aria-current="page"] { background: var(--grape); color: #fff; }
[data-theme="dark"] .tabs a[aria-current="page"] { color: #2A1522; }

.tab-count {
  min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--vine); color: #fff; font-size: .72rem; font-weight: 700; font-family: var(--sans);
}
[data-theme="dark"] .tab-count { color: #12261B; }
.tabs a[aria-current="page"] .tab-count { background: rgba(255,255,255,.28); color: inherit; }

.topbar-right { display: flex; align-items: center; gap: .5rem; }

.pill-demo {
  background: var(--amber-soft); color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 26%, transparent);
  font-size: .72rem; font-weight: 650; letter-spacing: .02em; text-transform: uppercase;
  padding: .24rem .6rem; border-radius: 999px; cursor: help; white-space: nowrap;
}

.icon-btn {
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.icon-btn:hover { background: var(--bg-tint); transform: translateY(-1px); border-color: var(--line-2); }
.ico-moon { display: none; }
[data-theme="dark"] .ico-sun { display: none; }
[data-theme="dark"] .ico-moon { display: block; }

/* ---------- layout ---------- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(1.2rem, 3vw, 2.2rem) clamp(.9rem, 3vw, 1.6rem) 5rem; }
.wrap-narrow { max-width: 760px; }

.stack { display: grid; gap: 1rem; }
.row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--grape); margin-bottom: .5rem;
}
.lede { font-size: 1.08rem; color: var(--ink-2); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.tiny { font-size: .78rem; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-size: .94rem; font-weight: 600;
  padding: .68rem 1.25rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .16s var(--ease), box-shadow .2s var(--ease), background .18s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--grape); color: #fff; box-shadow: var(--sh-1); }
[data-theme="dark"] .btn-primary { color: #2A1522; }
.btn-primary:hover { background: var(--grape-hi); box-shadow: var(--sh-2); transform: translateY(-1px); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--bg-tint); transform: translateY(-1px); }
.btn-quiet { background: transparent; color: var(--muted); padding: .5rem .8rem; }
.btn-quiet:hover { background: var(--bg-tint); color: var(--ink); }
.btn-sm { font-size: .86rem; padding: .46rem .9rem; }
.btn-lg { font-size: 1.02rem; padding: .85rem 1.7rem; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- chips & labels ---------- */

.chip {
  display: inline-flex; align-items: center; gap: .34rem;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 550; line-height: 1.5;
  background: var(--bg-tint); color: var(--ink-2);
  border: 1px solid transparent; white-space: nowrap;
}
.chip-grape { background: var(--grape-soft); color: var(--grape); }
.chip-vine  { background: var(--vine-soft);  color: var(--vine); }
.chip-amber { background: var(--amber-soft); color: var(--amber); }
.chip-coral { background: var(--coral-soft); color: var(--coral); }
.chip-sky   { background: var(--sky-soft);   color: var(--sky); }
.chip-outline { background: transparent; border-color: var(--line-2); color: var(--muted); }

.conf {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 650; letter-spacing: .02em;
  padding: .12rem .5rem; border-radius: 999px; cursor: help;
  text-transform: uppercase;
}
.conf-verified { background: var(--vine-soft); color: var(--vine); }
.conf-inferred { background: var(--amber-soft); color: var(--amber); }
.conf-advisory { background: var(--coral-soft); color: var(--coral); }
.conf-range    { background: var(--sky-soft); color: var(--sky); }

/* ---------- cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.card-pad { padding: clamp(1.1rem, 2.4vw, 1.6rem); }

/* ============================================================
   Welcome
   ============================================================ */

.hero { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1.2rem; position: relative; z-index: 1; }
.hero-inner { max-width: 700px; text-align: center; animation: rise .7s var(--ease) both; }
.hero-mark {
  width: 84px; height: 84px; margin: 0 auto 1.4rem;
  display: grid; place-items: center; border-radius: 26px;
  background: var(--grape); color: #fff; box-shadow: var(--sh-3);
  animation: bob 4.5s ease-in-out infinite;
}
[data-theme="dark"] .hero-mark { color: #2A1522; }
.hero h1 { margin-bottom: .7rem; }
.hero h1 em { font-style: italic; color: var(--grape); }
.hero h1 .hero-brand { color: var(--grape); }
.hero-sub { font-size: 1.12rem; color: var(--ink-2); max-width: 34rem; margin: 0 auto 1.8rem; }
.hero-cta { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 2.4rem; font-size: .84rem; color: var(--muted); }


@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bob  { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(3deg); } }

/* ============================================================
   Onboarding
   ============================================================ */

.onb { max-width: 700px; margin: 0 auto; padding: clamp(1.4rem,4vw,3rem) 1.1rem 4rem; }
.onb-progress { display: flex; align-items: center; gap: .5rem; margin-bottom: 2rem; }
.onb-dot {
  height: 6px; flex: 1; border-radius: 999px; background: var(--line);
  transition: background .4s var(--ease);
}
.onb-dot.done { background: var(--vine); }
.onb-dot.active { background: var(--grape); }
.onb-step { font-size: .8rem; color: var(--muted); font-weight: 600; white-space: nowrap; }

.onb-panel { animation: rise .45s var(--ease) both; }
.onb-q { margin-bottom: .5rem; }
.onb-help { color: var(--muted); margin-bottom: 1.6rem; }
.onb-actions { display: flex; gap: .7rem; align-items: center; margin-top: 2rem; }

.field { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.field label { font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: .8rem; color: var(--muted); }
input[type="text"], input[type="search"], input[type="number"], input[type="password"], select, textarea {
  font-family: var(--sans); font-size: .95rem; color: var(--ink);
  padding: .68rem .9rem; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
select {
  /* The native dropdown arrow carries its own built-in spacing that differs by browser/OS,
     which can make a <select> render taller than a same-padding <input>. Replacing it with
     our own chevron image means the box's visible size is governed by our padding alone. */
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: var(--chevron); background-repeat: no-repeat; background-position: right .95rem center; background-size: 11px;
  padding-right: 2.6rem;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--grape);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--grape) 16%, transparent);
}
/* access-code gate: one centred card, sized like the onboarding panels */
.gate { min-height: calc(100dvh - 2rem); display: grid; place-items: center; box-sizing: border-box; padding: 2rem 1.1rem 4rem; }
.gate-card { box-sizing: border-box; width: 100%; max-width: 480px; text-align: center; padding: clamp(1.8rem, 5vw, 2.8rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.gate-icon { width: 60px; height: 60px; margin: 0 auto 1.2rem; display: grid; place-items: center; border-radius: 18px; background: var(--grape-soft); color: var(--grape); }
.gate-card h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin: 0 0 .5rem; }
.gate-help { color: var(--muted); margin: 0 0 1.6rem; }
.gate-form { display: grid; gap: .7rem; }
.gate-form input { font-size: 1.05rem; padding: .9rem 1.1rem; text-align: center; letter-spacing: .08em; }
.gate-form .btn { width: 100%; justify-content: center; padding-block: .85rem; }
.gate-msg { min-height: 1.3em; margin: .7rem 0 0; color: var(--ink-2); }
.gate-or { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0 1rem; color: var(--muted); font-size: .82rem; }
.gate-or::before, .gate-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.gate-alt { width: 100%; justify-content: center; }
.input-row { display: flex; gap: .6rem; align-items: stretch; }
.input-row .btn { flex-shrink: 0; }

.combo { position: relative; }
.combo-list {
  position: absolute; top: calc(100% + .3rem); left: 0; right: 0; z-index: 20;
  margin: 0; padding: .35rem; list-style: none; max-height: 14rem; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--sh-2);
}
.combo-opt { padding: .55rem .7rem; border-radius: calc(var(--r) - 4px); font-size: .9rem; color: var(--ink-2); cursor: pointer; }
.combo-opt:hover, .combo-opt.active { background: var(--bg-tint); color: var(--ink); }

.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.opt {
  display: flex; flex-direction: column; gap: .15rem; align-items: flex-start; text-align: left;
  padding: .85rem 1rem; border-radius: var(--r); cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface);
  font-family: var(--sans); font-size: .92rem; color: var(--ink);
  transition: all .18s var(--ease);
}
.opt:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--sh-1); }
.opt[aria-pressed="true"] {
  border-color: var(--grape); background: var(--grape-soft); color: var(--grape); font-weight: 600;
}
.opt .opt-sub { font-size: .78rem; color: var(--muted); font-weight: 400; }
.opt[aria-pressed="true"] .opt-sub { color: color-mix(in srgb, var(--grape) 72%, var(--muted)); }

.topic-list { display: grid; gap: .55rem; }
.topic-row {
  display: grid; grid-template-columns: 1fr 120px auto; align-items: center; gap: .8rem;
  padding: .6rem .85rem; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface);
  animation: rise .4s var(--ease) both;
}
.topic-row .t-name { font-weight: 550; font-size: .92rem; }
.topic-row input[type="range"] { width: 100%; accent-color: var(--grape); }
.topic-row .t-del {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: .2rem .35rem; border-radius: 6px;
}
.topic-row .t-del:hover { background: var(--coral-soft); color: var(--coral); }

.months { display: flex; flex-wrap: wrap; gap: .4rem; }
.month {
  padding: .38rem .75rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface);
  font-family: var(--sans); font-size: .85rem; color: var(--ink-2);
  transition: all .16s var(--ease);
}
.month[aria-pressed="true"] { border-color: var(--vine); background: var(--vine-soft); color: var(--vine); font-weight: 600; }

.orcid-result {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .9rem 1rem; border-radius: var(--r);
  background: var(--vine-soft); color: var(--vine); font-size: .88rem;
  animation: rise .4s var(--ease) both;
}

/* ============================================================
   Agent pipeline animation
   ============================================================ */

.pipe-screen { min-height: 74vh; display: grid; place-items: center; padding: 2rem 1.2rem; }
.pipe { width: 100%; max-width: 520px; }
.pipe h2 { text-align: center; margin-bottom: .4rem; }
.pipe-sub { text-align: center; color: var(--muted); margin-bottom: 2.2rem; font-size: .9rem; }
.pipe-steps { display: grid; gap: .1rem; }
.pipe-step {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: .85rem;
  padding: .7rem .3rem; opacity: .35; transition: opacity .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.pipe-step.active, .pipe-step.done { opacity: 1; }
.pipe-bullet {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line-2); display: grid; place-items: center;
  transition: all .35s var(--ease); color: transparent; font-size: .7rem;
}
.pipe-step.active .pipe-bullet {
  border-color: var(--grape);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--grape) 45%, transparent);
  animation: ping 1.4s ease-out infinite;
}
.pipe-step.done .pipe-bullet { border-color: var(--vine); background: var(--vine); color: #fff; }
[data-theme="dark"] .pipe-step.done .pipe-bullet { color: #12261B; }
.pipe-label { font-weight: 600; font-size: .95rem; }
.pipe-detail { font-size: .8rem; color: var(--muted); }
.pipe-tick { font-size: .78rem; color: var(--vine); font-weight: 600; }
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--grape) 45%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.pipe-bar { height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 1.8rem; }
.pipe-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--grape), var(--vine)); transition: width .5s var(--ease); }
.pipe-skip { display: block; margin: 1.2rem auto 0; }

/* ============================================================
   Feed
   ============================================================ */

.feed-head { margin-bottom: 1.6rem; }
.feed-head h1 { margin-bottom: .35rem; }

.paste-box {
  display: flex; gap: .6rem; align-items: stretch; flex-wrap: wrap;
  padding: .75rem; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--grape-soft) 60%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--grape) 32%, transparent);
  margin-bottom: 1.4rem;
}
.paste-box input { flex: 1; min-width: 220px; border-color: transparent; }
.paste-label { font-size: .84rem; color: var(--grape); font-weight: 600; padding: .1rem .2rem .4rem; width: 100%; }

.filters { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.3rem; }
.filter {
  padding: .34rem .8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface);
  font-family: var(--sans); font-size: .84rem; color: var(--ink-2);
  transition: all .16s var(--ease);
}
.filter:hover { background: var(--bg-tint); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600; }

.feed-list { display: grid; gap: .9rem; }

.opp {
  position: relative;
  display: grid; grid-template-columns: 72px 1fr; gap: 1.1rem;
  padding: 1.15rem 1.3rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
  animation: rise .45s var(--ease) both;
}
.opp:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.opp.is-explore { border-color: color-mix(in srgb, var(--sky) 38%, transparent); background: color-mix(in srgb, var(--sky-soft) 30%, var(--surface)); }
.opp.is-flagged { border-color: color-mix(in srgb, var(--coral) 38%, transparent); background: color-mix(in srgb, var(--coral-soft) 26%, var(--surface)); }
.opp.leaving { animation: leave .4s var(--ease) forwards; }
@keyframes leave { to { opacity: 0; transform: translateX(-24px) scale(.97); } }

.opp-title { font-family: var(--serif); font-size: 1.16rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .12rem; }
.opp-title a { text-decoration: none; background-image: linear-gradient(var(--grape), var(--grape)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s var(--ease); }
.opp:hover .opp-title a { background-size: 100% 2px; }
.opp-host { font-size: .85rem; color: var(--muted); margin-bottom: .5rem; }
.opp-tag { font-size: .92rem; color: var(--ink-2); margin: 0 0 .6rem; font-style: italic; }
.opp-chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .7rem; }
.opp-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

.banner-explore, .banner-flag {
  display: flex; gap: .55rem; align-items: flex-start;
  font-size: .83rem; padding: .55rem .75rem; border-radius: var(--r-sm);
  margin-bottom: .7rem; line-height: 1.5;
}
.banner-explore { background: var(--sky-soft); color: var(--sky); }
.banner-flag { background: var(--coral-soft); color: var(--coral); font-weight: 500; }

/* fit ring */
.ring { position: relative; width: 66px; height: 66px; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring-track { stroke: var(--line); }
.ring-val { stroke: var(--grape); stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); }
.ring.lo .ring-val { stroke: var(--muted); }
.ring.mid .ring-val { stroke: var(--amber); }
.ring-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em;
}
.ring-cap { text-align: center; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; font-weight: 700; }

.empty {
  text-align: center; padding: 3.5rem 1.5rem; color: var(--muted);
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
}
.empty .big { font-size: 2.4rem; display: block; margin-bottom: .6rem; }

.section-rule {
  display: flex; align-items: center; gap: .8rem; margin: 1.9rem 0 1.1rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.section-rule::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ============================================================
   Brief
   ============================================================ */

.brief-top { margin-bottom: 1.6rem; }
.back-link {
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
  color: var(--muted); font-size: .88rem; font-weight: 550; margin-bottom: 1rem;
}
.back-link:hover { color: var(--grape); }

.brief-grid { display: grid; grid-template-columns: 1fr 330px; gap: 1.4rem; align-items: start; }
@media (max-width: 900px) { .brief-grid { grid-template-columns: 1fr; } }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.1rem,2.3vw,1.5rem); box-shadow: var(--sh-1); }
.panel + .panel { margin-top: 1rem; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .9rem; flex-wrap: wrap; }
.panel-h h3 { display: flex; align-items: center; gap: .5rem; }
.panel-h .ico { font-size: 1.05rem; }

.side { position: sticky; top: 68px; display: grid; gap: 1rem; }
@media (max-width: 900px) { .side { position: static; } }

.fitline { display: flex; gap: 1.1rem; align-items: center; margin-bottom: 1rem; }
.evidence { display: grid; gap: .4rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--line); }
.evidence li { list-style: none; font-size: .86rem; color: var(--ink-2); display: flex; gap: .5rem; }
.evidence li::before { content: '↳'; color: var(--vine); flex-shrink: 0; }
.evidence ul { margin: 0; padding: 0; display: grid; gap: .4rem; }

/* timeline */
.timeline { display: grid; gap: 0; position: relative; }
.tl {
  display: grid; grid-template-columns: 92px 22px 1fr; gap: .9rem; align-items: start;
  padding: .1rem 0 1.05rem;
}
.tl:last-child { padding-bottom: 0; }
.tl-date { text-align: right; }
.tl-d { font-weight: 650; font-size: .88rem; }
.tl-in { font-size: .76rem; color: var(--muted); }
.tl-rail { position: relative; display: grid; justify-items: center; height: 100%; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--grape); margin-top: .34rem; flex-shrink: 0; z-index: 1; }
.tl-dot.dep { background: var(--surface); border: 2.5px solid var(--amber); }
.tl-dot.soon { box-shadow: 0 0 0 5px color-mix(in srgb, var(--coral) 20%, transparent); background: var(--coral); }
.tl-line { position: absolute; top: .9rem; bottom: -.3rem; width: 2px; background: var(--line); }
.tl:last-child .tl-line { display: none; }
.tl-body .tl-label { font-weight: 600; font-size: .93rem; margin-bottom: .12rem; }
.tl-why { font-size: .85rem; color: var(--ink-2); }
.tl-dep {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem;
  font-size: .76rem; color: var(--amber); background: var(--amber-soft);
  padding: .12rem .5rem; border-radius: 999px;
}

/* cost */
.cost-total { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; }
.cost-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: .9rem 0 .7rem; background: var(--line); }
.cost-seg { height: 100%; transition: filter .18s var(--ease); }
.cost-seg:hover { filter: brightness(1.12); }
.cost-key { display: grid; gap: .35rem; }
.cost-k { display: grid; grid-template-columns: 10px 1fr auto; gap: .55rem; align-items: baseline; font-size: .86rem; }
.cost-sw { width: 10px; height: 10px; border-radius: 3px; margin-top: .35rem; }
.cost-note { font-size: .78rem; color: var(--muted); }
.assumptions { margin: .9rem 0 0; padding: .8rem .95rem; background: var(--surface-2); border-radius: var(--r); font-size: .82rem; color: var(--ink-2); }
.assumptions ul { margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
.net-note {
  margin-top: .9rem; padding: .75rem .95rem; border-radius: var(--r);
  background: var(--vine-soft); color: var(--vine); font-size: .87rem; font-weight: 500;
}

.callout {
  display: grid; gap: .5rem; padding: 1rem 1.1rem; border-radius: var(--r-lg);
  border-left: 4px solid var(--amber); background: var(--amber-soft);
}
.callout.danger { border-left-color: var(--coral); background: var(--coral-soft); }
.callout h4 { font-family: var(--sans); font-size: .93rem; font-weight: 700; margin: 0; display: flex; gap: .45rem; align-items: center; }
.callout p { margin: 0; font-size: .88rem; color: var(--ink-2); }
.callout a { font-weight: 600; }

.fund { display: grid; gap: .7rem; }
.fund-item { padding: .8rem .95rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.fund-name { font-weight: 650; font-size: .93rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.fund-meta { font-size: .82rem; color: var(--muted); margin-top: .15rem; }
.fund-note { font-size: .85rem; color: var(--ink-2); margin-top: .4rem; }

.past { display: grid; gap: .8rem; }
.past-ed { padding-left: .9rem; border-left: 2px solid var(--line); }
.past-y { font-weight: 700; font-size: .82rem; color: var(--grape); letter-spacing: .04em; }
.past-t { font-family: var(--serif); font-size: 1rem; font-style: italic; margin-bottom: .3rem; }
.past ul { margin: 0; padding-left: 1.05rem; display: grid; gap: .2rem; font-size: .85rem; color: var(--ink-2); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; font-size: .88rem; align-items: baseline; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 550; }

.quote-src {
  font-size: .8rem; color: var(--muted); font-style: italic;
  border-left: 2px solid var(--line-2); padding-left: .6rem; margin-top: .3rem;
}

/* ============================================================
   Tracker
   ============================================================ */

.track-group { margin-bottom: 1.8rem; }
.track-item {
  display: grid; grid-template-columns: 86px 1fr auto; gap: 1rem; align-items: center;
  padding: .9rem 1.1rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: .55rem;
  transition: transform .18s var(--ease), box-shadow .2s var(--ease);
}
.track-item:hover { transform: translateX(3px); box-shadow: var(--sh-1); }
.track-item.urgent { border-left: 4px solid var(--coral); }
.track-when { text-align: center; }
.track-day { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; line-height: 1; }
.track-mon { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.track-what { font-weight: 600; font-size: .95rem; }
.track-sub { font-size: .83rem; color: var(--muted); }

/* ============================================================
   Profile
   ============================================================ */

.prof-head { display: flex; gap: 1.1rem; align-items: center; margin-bottom: 1.6rem; flex-wrap: wrap; }
.avatar {
  width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center;
  background: var(--grape); color: #fff; font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
  box-shadow: var(--sh-2); flex-shrink: 0;
}
[data-theme="dark"] .avatar { color: #2A1522; }

.weight-row { display: grid; grid-template-columns: 1fr 140px 44px; gap: .9rem; align-items: center; padding: .45rem 0; }
.weight-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.weight-bar > i { display: block; height: 100%; background: var(--grape); transition: width .6s var(--ease); }
.weight-bar > i.down { background: var(--coral); }
.weight-num { font-size: .82rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.weight-row.changed .t-name::after { content: ' updated'; font-size: .68rem; color: var(--vine); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.log { display: grid; gap: .5rem; }
.log-item { display: grid; grid-template-columns: auto 1fr; gap: .6rem; font-size: .85rem; padding: .5rem .7rem; background: var(--surface-2); border-radius: var(--r-sm); }
.log-sig { font-weight: 700; }

/* ============================================================
   Modal & toast
   ============================================================ */

.modal-back {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1.2rem;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  backdrop-filter: blur(4px); animation: fade .2s var(--ease);
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: min(520px, 100%); max-height: 88vh; overflow: auto;
  background: var(--surface); border-radius: var(--r-xl); padding: 1.6rem;
  box-shadow: var(--sh-3); animation: pop .28s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.modal h3 { margin-bottom: .3rem; }
.modal-sub { color: var(--muted); font-size: .89rem; margin-bottom: 1.2rem; }
.reason-grid { display: grid; gap: .5rem; margin-bottom: 1.2rem; }
.reason {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: center; text-align: left;
  padding: .75rem .9rem; border-radius: var(--r); cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface); font-family: var(--sans); color: var(--ink);
  transition: all .16s var(--ease);
}
.reason:hover { border-color: var(--grape); background: var(--grape-soft); transform: translateX(3px); }
.reason .r-emoji { font-size: 1.25rem; }
.reason .r-label { font-weight: 600; font-size: .93rem; }
.reason .r-effect { font-size: .79rem; color: var(--muted); }
.reason:hover .r-effect { color: color-mix(in srgb, var(--grape) 70%, var(--muted)); }

.toast-root {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  z-index: 80; display: grid; gap: .5rem; width: min(460px, calc(100vw - 2rem));
}
.toast {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
  padding: .85rem 1.05rem; border-radius: var(--r-lg);
  background: var(--ink); color: var(--bg); box-shadow: var(--sh-3);
  animation: toastin .35s var(--ease);
  font-size: .89rem;
}
.toast.out { animation: toastout .3s var(--ease) forwards; }
@keyframes toastin  { from { opacity: 0; transform: translateY(18px) scale(.95); } }
@keyframes toastout { to   { opacity: 0; transform: translateY(10px) scale(.97); } }
.toast .t-emoji { font-size: 1.2rem; line-height: 1.2; }
.toast .t-title { font-weight: 650; }
.toast .t-body { opacity: .82; font-size: .84rem; margin-top: .1rem; }

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .opp { grid-template-columns: 1fr; gap: .7rem; }
  .ring-wrap { display: flex; align-items: center; gap: .7rem; }
  .ring-cap { margin: 0; }
  .tl { grid-template-columns: 74px 22px 1fr; gap: .6rem; }
  .track-item { grid-template-columns: 64px 1fr; }
  .track-item > :last-child { grid-column: 1 / -1; }
  .tabs a { padding: .4rem .65rem; font-size: .87rem; }
  .brand-word { display: none; }
  .pill-demo { display: none; }
  .weight-row { grid-template-columns: 1fr 90px 40px; }
}

@media (max-width: 420px) {
  .topbar { gap: .6rem; padding: .6rem .8rem; }
  .tabs { gap: 0; }
  .tabs a { padding: .35rem .5rem; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================
   Phase 1A additions — onboarding split, worth-it panel, funding, source toggles
   ============================================================ */

.onb.onb-wide { max-width: 960px; }
.onb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.onb-col {
  display: flex; flex-direction: column; gap: .45rem;
  padding: 1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.onb-col > label { font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.onb-col textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.vocab { max-height: 16rem; overflow-y: auto; display: grid; gap: .7rem; padding-right: .2rem; }
.vocab-f { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.vocab .chip { cursor: pointer; font-family: var(--sans); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; align-items: start; }
@media (max-width: 760px) { .onb-split, .grid3 { grid-template-columns: 1fr; } }

.opp-why { margin: .35rem 0 0; font-size: .88rem; color: var(--ink-2); }

.worth .worth-tag { font-family: var(--serif, inherit); font-size: 1.08rem; }
.subs { display: grid; gap: .85rem; margin-top: .4rem; }
.sub-h { display: flex; justify-content: space-between; gap: .6rem; font-size: .9rem; font-weight: 600; }
.sub-n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sub-bar { height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; margin: .3rem 0 .35rem; }
.sub-bar i { display: block; height: 100%; border-radius: inherit; background: var(--vine); }
.sub-bar i.mid { background: var(--amber); }
.sub-bar i.lo { background: var(--coral); }
.sub-r { margin: 0; font-size: .85rem; color: var(--ink-2); line-height: 1.45; }
.sub.na { opacity: .6; }
.gowatch { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1.1rem; }
.gowatch h4 { margin: 0 0 .35rem; font-size: .9rem; }
.gowatch ul { margin: 0; padding-left: 1.1rem; font-size: .87rem; color: var(--ink-2); display: grid; gap: .25rem; }
.go { padding: .8rem .9rem; border-radius: var(--r); background: var(--vine-soft); }
.watch { padding: .8rem .9rem; border-radius: var(--r); background: var(--amber-soft); }
@media (max-width: 640px) { .gowatch { grid-template-columns: 1fr; } }

.fund-h { margin: 1rem 0 .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fund-h:first-of-type { margin-top: 0; }

details.src { margin-top: .3rem; }
details.src > summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: .74rem; color: var(--muted); text-decoration: underline dotted; text-underline-offset: 3px;
}
details.src > summary::-webkit-details-marker { display: none; }
details.src[open] > summary { color: var(--grape); }
details.assumptions > summary { cursor: pointer; }
.tl.is-past { opacity: .5; }

/* ============================================================
   Round 2 — simpler landing, top picks + compact grid, tabbed brief
   ============================================================ */

.steps3 { list-style: none; padding: 0; margin: 1.6rem auto 2rem; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.steps3 li {
  display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); font-size: .9rem; color: var(--ink-2); font-weight: 550;
  animation: rise .6s var(--ease) both;
}
.steps3 li:nth-child(2) { animation-delay: .1s; }
.steps3 li:nth-child(3) { animation-delay: .2s; }
.s3-ico { font-size: 1rem; }
.hero-note { margin-top: 1.8rem; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-top: 1.1rem; max-width: 640px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .75rem .9rem; display: grid; }
.stat b { font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--grape); }
.stat span { font-size: .8rem; color: var(--muted); margin-top: .25rem; }
.stat-warm b { color: var(--coral); }
.stat-green b { color: var(--vine); }
.feed-note { font-size: .85rem; color: var(--muted); margin: .2rem 0 1rem; }

.badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  padding: .15rem .5rem; border-radius: 999px; margin-right: .35rem; }
.badge-amber { background: var(--amber-soft); color: var(--amber); }
.badge-sky { background: var(--sky-soft); color: var(--sky); }
.badge-coral { background: var(--coral-soft); color: var(--coral); }
.opp-titleline:empty { display: none; }
.opp-titleline { margin-bottom: .3rem; }
.chip-dim { opacity: .7; }

.opp.top { position: relative; border-width: 1.5px; }
.opp.top.rank-1 { border-color: var(--grape); background: linear-gradient(135deg, var(--grape-soft), var(--surface) 55%); }
.opp.top.rank-2, .opp.top.rank-3 { border-color: color-mix(in srgb, var(--grape) 35%, var(--line)); }
.ring-wrap { display: grid; justify-items: center; gap: .4rem; align-content: start; }
.top-rank { font-family: var(--serif); font-weight: 700; font-size: .95rem; color: var(--grape); }

.drivers { display: flex; flex-wrap: wrap; gap: .45rem; margin: .7rem 0 .2rem; }
.drv { display: inline-flex; align-items: center; gap: .45rem; font-size: .76rem; padding: .28rem .6rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); }
.drv-l { font-weight: 650; }
.drv-up .drv-l { color: var(--vine); }
.drv-down .drv-l { color: var(--coral); }
.drv-bar { width: 44px; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.drv-bar i { display: block; height: 100%; background: var(--vine); }
.drv-down .drv-bar i { background: var(--coral); }
.drv-n { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }

.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 760px) { .mini-grid { grid-template-columns: 1fr; } }
.mini { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .9rem 1rem;
  display: grid; gap: .6rem; align-content: start; animation: rise .45s var(--ease) both; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.mini:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.mini.is-stale { opacity: .8; }
.mini-top { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: start; }
.mini-score { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 1rem;
  font-family: var(--serif); background: var(--vine-soft); color: var(--vine); }
.mini-score.mid { background: var(--amber-soft); color: var(--amber); }
.mini-score.lo { background: var(--coral-soft); color: var(--coral); }
.mini-head { min-width: 0; }
.mini-title { font-family: var(--serif); font-weight: 600; font-size: 1rem; line-height: 1.25; text-decoration: none; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-title:hover { color: var(--grape); }
.mini-head .opp-host { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-actions { display: flex; gap: .25rem; }
.icon-act { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-2); cursor: pointer; font-size: .9rem; }
.icon-act:hover { background: var(--bg-tint); }
.mini .opp-chips { margin: 0; }
.mini .chip { font-size: .74rem; }

/* brief */
.wrap-mid { max-width: 880px; }
.brief-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin-top: .2rem; }
.brief-sub { color: var(--muted); margin: .35rem 0 .7rem; }
.verdict { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 1.2rem 1.3rem; margin: 1.2rem 0; box-shadow: var(--sh-1); }
.verdict-main { display: flex; gap: 1.1rem; align-items: center; }
.verdict-label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grape); }
.verdict-tag { font-family: var(--serif); font-size: 1.2rem; margin: .2rem 0 0; line-height: 1.35; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-top: 1.1rem; }
@media (max-width: 720px) { .facts { grid-template-columns: 1fr 1fr; } }
.fact { display: grid; gap: .1rem; padding: .7rem .8rem; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.fact-k { font-size: .74rem; color: var(--muted); font-weight: 600; }
.fact-v { font-weight: 700; font-size: 1rem; }
.fact-s { font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verdict-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

.tabs-inline { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-top: .4rem; overflow-x: auto; }
.tab-i { border: none; background: none; font-family: var(--sans); font-size: .92rem; font-weight: 600; color: var(--muted);
  padding: .65rem .9rem; cursor: pointer; border-bottom: 2.5px solid transparent; white-space: nowrap; }
.tab-i[aria-selected="true"] { color: var(--grape); border-bottom-color: var(--grape); }
.tab-panel { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0; }

.sub-row { border-bottom: 1px solid var(--line); }
.sub-row:last-child { border-bottom: none; }
.sub-row > summary, .sub-row.na { display: grid; grid-template-columns: 1fr 140px 34px 40px; gap: .8rem; align-items: center;
  padding: .7rem 0; cursor: pointer; list-style: none; }
.sub-row.na { grid-template-columns: 1fr auto; cursor: default; opacity: .6; }
.sub-row > summary::-webkit-details-marker { display: none; }
.sub-l { font-weight: 650; font-size: .93rem; display: grid; }
.sub-q { font-weight: 400; font-size: .76rem; color: var(--muted); }
.sub-row .sub-bar { margin: 0; }
.sub-why { font-size: .74rem; color: var(--muted); text-decoration: underline dotted; text-underline-offset: 3px; }
.sub-row[open] .sub-why { color: var(--grape); }
.sub-row .sub-r { margin: 0 0 .8rem; }
.sub-n { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .sub-row > summary { grid-template-columns: 1fr 80px 30px; } .sub-why { display: none; } }

details.more { margin-top: .9rem; }
details.more > summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--ink-2); }
details.more[open] > summary { margin-bottom: .6rem; }
.money-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.fund-row { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); margin-bottom: .5rem; }
.fund-row > summary { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .7rem .9rem; cursor: pointer; list-style: none; }
.fund-row > summary::-webkit-details-marker { display: none; }
.fund-row .fund-meta { flex-basis: 100%; margin: 0; }
.fund-body { padding: 0 .9rem .8rem; font-size: .86rem; }
.fund-body p { margin: 0 0 .4rem; }
.go-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 700px) { .go-grid { grid-template-columns: 1fr; } }
.go-card h4 { margin: 0 0 .5rem; font-size: 1rem; display: flex; gap: .5rem; align-items: center; }
.visa-verdict { font-weight: 700; margin: 0 0 .4rem; }
.v-yes { color: var(--coral); }
.v-no { color: var(--vine); }
.v-maybe { color: var(--amber); }

.mini-score.stale { background: var(--line); color: var(--muted); }
.hero-inner:has(.steps3) { max-width: 900px; }
.steps3 { flex-wrap: nowrap; }
@media (max-width: 820px) { .steps3 { flex-direction: column; align-items: center; } }
.steps3 li { white-space: nowrap; }
@media (max-width: 820px) { .steps3 li { white-space: normal; } }

/* ============================================================
   Round 3 — ledger shortlist, streaming pipeline, FAQ
   ============================================================ */

.wrap-feed { max-width: 1040px; }
.feed-summary { margin: .45rem 0 0; font-size: .95rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
.feed-summary b { color: var(--ink); font-weight: 650; }
.feed-summary b.warm { color: var(--coral); }
.feed-summary b.green { color: var(--vine); }
.feed-summary .dot, .facts-line .dot { color: var(--line-2); }

.feed-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1.3rem 0 .4rem; }
.feed-bar .filters { margin: 0; }
.feed-bar .feed-note { margin: 0; }
.feed-note a { color: var(--grape); }

.list-h { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.35rem; margin: 2.2rem 0 .4rem;
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.list-h span { font-family: var(--sans); font-style: normal; font-size: .8rem; color: var(--muted); }

/* shortlist row: verdict | title, host, kicker, facts | icon actions */
.ledger-list { border-top: 1px solid var(--line-2); }
.lr { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: 1.6rem; align-items: start;
  padding: 1.35rem .6rem; border-bottom: 1px solid var(--line); cursor: pointer;
  animation: rise .45s var(--ease) both; transition: background .2s var(--ease); }
.lr:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.lr:hover .lr-title a { color: var(--grape); }
.lr-top { padding-top: 1.6rem; padding-bottom: 1.6rem; }

.lr-score { display: grid; gap: .45rem; padding-top: .3rem; }
.verdict-w { font-size: .92rem; font-weight: 650; line-height: 1.2; }
.verdict-w.hi { color: var(--vine); } .verdict-w.mid { color: var(--amber); } .verdict-w.lo { color: var(--coral); }
.meter { display: flex; align-items: center; gap: .5rem; }
.meter i { display: block; flex: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.meter b { display: block; height: 100%; border-radius: 2px; background: var(--vine); }
.meter b.mid { background: var(--amber); } .meter b.lo { background: var(--coral); }
.meter span { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter small { font-size: .92em; opacity: .7; }
.meter em { font-style: normal; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; margin-right: .3rem; }

.kicker { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.kicker .dot { color: var(--line-2); }
.kicker .badge { text-transform: none; letter-spacing: 0; margin: 0 0 0 .3rem; }
.lr .kicker { font-size: .82rem; font-weight: 500; letter-spacing: 0; text-transform: none; margin-top: .35rem; }
.lr-title { font-family: var(--serif); font-size: 1.22rem; line-height: 1.25; margin: 0 0 .15rem; }
.lr:not(.lr-top) .lr-title { font-size: 1.08rem; }
.lr-title a { text-decoration: none; color: var(--ink); }
.lr-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lr-host { font-size: .85rem; color: var(--muted); }
.lr-tag { font-family: var(--serif); font-style: italic; margin: .6rem 0 0; color: var(--ink-2); max-width: 46rem; }
.facts-line { margin: .6rem 0 0; font-size: .86rem; font-weight: 600; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: .15rem .5rem; }
.t-ok { color: var(--vine); } .t-warn, .t-near { color: var(--amber); } .t-soon { color: var(--coral); }
.t-far { color: var(--ink); } .t-mute { color: var(--muted); font-weight: 500 !important; } .t-closed { color: var(--muted); }

.lr-act { display: flex; align-items: center; gap: .2rem; }
.icon-btn { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: none; background: transparent; border-radius: 50%;
  color: var(--muted); font-size: 1.05rem; line-height: 1; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.icon-btn:hover { background: var(--bg-tint); color: var(--ink); }
.icon-btn:focus-visible { outline: 2px solid var(--grape); outline-offset: 2px; }
.icon-btn.on { color: var(--amber); }
.lr-check { font-size: .85rem; font-weight: 600; color: var(--grape); white-space: nowrap; margin-right: .4rem; text-decoration: none; }
.lr-check:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .lr { grid-template-columns: minmax(0, 1fr) auto; gap: .55rem 1rem; padding: 1.1rem .2rem; }
  .lr-score { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: .8rem; padding-top: 0; min-width: 0; }
  .lr-score .meter { flex: 1; min-width: 5rem; max-width: 10rem; }
  .lr-act { grid-column: 2; grid-row: 1; }
  .lr-main { grid-column: 1 / -1; }
}

/* brief header */
.brief-head .kicker { margin-bottom: .2rem; }
.src-btn { margin: .2rem .6rem .2rem 0; }

/* pipeline */
.pipe2 { width: min(760px, 100%); }
.pipe2-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.pipe2-grid { display: grid; grid-template-columns: 17rem 1fr; gap: 1.6rem; margin-top: 1.4rem; }
@media (max-width: 680px) { .pipe2-grid { grid-template-columns: 1fr; } }
.pipe2-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.pipe2-steps li { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 10px; font-size: .9rem; color: var(--muted); transition: all .3s var(--ease); }
.p2-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-2); flex-shrink: 0; transition: all .3s var(--ease); }
.pipe2-steps li.active { background: var(--surface); color: var(--ink); font-weight: 650; box-shadow: var(--sh-1); }
.pipe2-steps li.active .p2-dot { border-color: var(--grape); background: var(--grape); animation: pulse 1s ease-in-out infinite; }
.pipe2-steps li.done { color: var(--ink-2); }
.pipe2-steps li.done .p2-dot { border-color: var(--vine); background: var(--vine); }
@keyframes pulse { 50% { transform: scale(1.35); } }
.p2-sub { display: flex; gap: .35rem; margin-left: auto; }
.p2-chip { padding: .2rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line-2); }
.p2-chip.active { color: var(--grape); border-color: var(--grape); }
.p2-chip.done { color: var(--vine); border-color: var(--vine); }
.p2-chip.warn { color: #a66a00; border-color: #e0b358; background: #fdf3e1; }
.pipe2-live { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.3rem 1.4rem; min-height: 15rem; }
.p2-title { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.p2-detail { color: var(--muted); font-size: .88rem; margin: .2rem 0 1rem; }
.p2-stream { display: flex; flex-wrap: wrap; gap: .45rem; }
.p2-item { padding: .35rem .7rem; border-radius: 999px; background: var(--grape-soft); color: var(--grape); font-size: .84rem; font-weight: 550;
  animation: pop .35s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }

/* FAQ */
.faq h1 { font-size: clamp(1.8rem, 3.8vw, 2.5rem); }
.qa { border-bottom: 1px solid var(--line-2); }
.qa > summary { cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; font-weight: 650; font-size: 1.02rem; position: relative; }
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::after { content: '+'; position: absolute; right: .3rem; top: .85rem; font-size: 1.3rem; color: var(--grape); transition: transform .2s var(--ease); }
.qa[open] > summary::after { transform: rotate(45deg); }
.qa-a { padding: 0 0 1.1rem; color: var(--ink-2); max-width: 44rem; }
.qa-a ul { margin: .3rem 0 .6rem; padding-left: 1.2rem; }
.faq-t { border-collapse: collapse; margin: .6rem 0; min-width: 16rem; }
.faq-t th, .faq-t td { text-align: left; padding: .35rem .9rem .35rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.faq-t th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* live search */
.lr-why { margin: .55rem 0 0; font-size: .88rem; color: var(--muted); max-width: 46rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pipe-bar i.indeterminate { width: 35% !important; animation: indet 1.4s ease-in-out infinite; }
@keyframes indet { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.verdict .pipe2-steps li { background: none; box-shadow: none; }

/* live search progress */
.s-log { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.s-log li { display: flex; justify-content: space-between; gap: .8rem; font-size: .86rem; padding: .45rem .6rem; border-radius: 8px; background: var(--surface-2); animation: pop .3s var(--ease) both; }
.s-log li.running { box-shadow: inset 3px 0 0 var(--grape); }
.s-log li.done .s-n { color: var(--vine); }
.s-q { min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-n { flex-shrink: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.s-found-h { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 .4rem; }
.s-fields { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.s-fields .s-found-h { width: 100%; margin-top: 1.2rem; }
.s-field { font-size: .78rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); }
.s-log li.warn .s-n { color: var(--amber); }
.s-log li.dead { opacity: .55; }
.s-log li.dead .s-q { text-decoration: line-through; }
.s-log li.dead .s-n { color: var(--coral); }
/* the search panel is redrawn on every search event, so nothing inside it animates;
   the pulsing dot in the step list beside it is the only movement */
#s-panel, #s-panel * { animation: none !important; }
.s-lanes { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; }
.s-lane { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; padding: .5rem .7rem;
  border-radius: var(--r-sm); background: var(--surface-2); font-size: .88rem; }
.s-lane-l { min-width: 0; font-weight: 600; }
.s-lane-s { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-lane.done .s-lane-s { color: var(--vine); }
.s-lane.failed .s-lane-s { color: var(--amber); }
.s-lane-dot { width: 1.05rem; height: 1.05rem; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: .65rem;
  border: 2px solid var(--grape); color: var(--surface); }
.s-lane.done .s-lane-dot { background: var(--vine); border-color: var(--vine); }
.s-lane.failed .s-lane-dot { background: var(--amber); border-color: var(--amber); }
.s-rot { font-size: .92rem; padding: .7rem .8rem; border-radius: var(--r-sm); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--grape); }
@media (max-width: 640px) { .s-lanes { grid-template-columns: minmax(0, 1fr); } }
.pipe-bar i { transition: width .6s var(--ease); }

.next-exp { margin-top: .35rem; font-size: .82rem; font-weight: 600; color: var(--sky); }

/* in-page redraws: no entrance animations */
#app.no-anim *, #app.no-anim *::before, #app.no-anim *::after { animation: none !important; }

/* onboarding in-step repaints: no slide-in */
.onb-panel.still, .onb-panel.still * { animation: none !important; }

/* ============================================================
   About — the story as comic slides
   ============================================================ */

.hero-about { margin: 1.2rem 0 0; font-size: .92rem; }
.hero-about a { color: var(--muted); }
.hero-about a:hover { color: var(--grape); }

.about h1 { font-size: clamp(1.8rem, 3.8vw, 2.5rem); margin-bottom: .4rem; }
.about-tabs { margin-bottom: 1.4rem; }
.about-tabs .tab-i { text-decoration: none; }

.deck { position: relative; }
.deck-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.deck-stage { min-height: 26rem; }
.slide { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.6rem); align-items: center;
  animation: slideIn .4s var(--ease) both; }
@keyframes slideIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.slide-art { border: 2.5px solid var(--ink); border-radius: 6px; background: var(--surface); box-shadow: 7px 7px 0 var(--grape-soft);
  padding: .6rem; }
.slide-text h2 { font-family: var(--serif); font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.15; margin: 0 0 .8rem; }
.slide-text p { color: var(--ink-2); line-height: 1.6; margin: 0 0 .8rem; max-width: 34rem; }
.slide-go { margin: 1.1rem 0 .4rem; }
.slide-refs { list-style: none; margin: .9rem 0 0; padding: .7rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .25rem; }
.slide-refs a { font-size: .76rem; color: var(--muted); text-decoration: none; }
.slide-refs a:hover { color: var(--grape); text-decoration: underline; }
.slide-refs-all { margin-top: 1rem; }
.slide-refs-all summary { cursor: pointer; font-size: .82rem; color: var(--muted); }
.gv-ref { color: var(--grape); font-weight: 700; font-size: .68em; margin-left: .1em; }

.deck-nav { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 1.4rem; }
.deck-arrow { font-size: 1.1rem; border: 1.5px solid var(--line-2); }
.deck-arrow:disabled { opacity: .35; cursor: default; }
.deck-dots { display: flex; align-items: center; gap: .32rem; flex-wrap: wrap; justify-content: center; }
.deck-dot { width: .55rem; height: .55rem; padding: 0; border-radius: 999px; border: none; background: var(--line-2); cursor: pointer;
  transition: width .25s var(--ease), background .25s; }
.deck-dot.gap { margin-left: .7rem; }
.deck-dot[aria-current] { width: 1.5rem; background: var(--grape); }
.deck-hint { text-align: center; margin: .6rem 0 0; }

.deck:fullscreen, .deck.deck-fs { background: var(--bg); padding: 3vh 4vw; display: flex; flex-direction: column; justify-content: center; overflow: auto; }
.deck.deck-fs { position: fixed; inset: 0; z-index: 100; }
.deck:fullscreen .deck-stage, .deck.deck-fs .deck-stage { flex: 1; display: flex; align-items: center; }
.deck:fullscreen .slide, .deck.deck-fs .slide { width: 100%; max-width: 1500px; margin: 0 auto; }
.deck:fullscreen .slide-text p { font-size: 1.22rem; max-width: 40rem; }
.deck:fullscreen .slide-text h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.deck:fullscreen .gv-svg { max-height: 74vh; }
.deck:fullscreen .deck-hint { display: none; }

@media (max-width: 820px) {
  .slide { grid-template-columns: 1fr; }
  .deck-stage { min-height: 0; }
}

/* comic drawing */
.gv-svg { width: 100%; height: auto; display: block; font-family: 'Patrick Hand', var(--sans); overflow: visible; }
.gv-svg * { vector-effect: non-scaling-stroke; }
.gv-fig { color: var(--ink); }
.gv-fig.gv-bot { color: var(--grape); }
.gv-fig path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gv-fig .gv-head { fill: var(--surface); stroke: currentColor; stroke-width: 2.4; }
.gv-fig .gv-bot-head { fill: var(--grape-soft); stroke: currentColor; stroke-width: 2.4; }
.gv-fig .gv-fill { fill: currentColor; stroke: none; }
.gv-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gv-w3 { stroke-width: 3; }
.gv-faint { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-linecap: round; }
.gv-floor { stroke: var(--line-2); stroke-width: 2; stroke-linecap: round; }
.gv-box { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.gv-paper { fill: var(--surface-2); stroke: var(--ink); stroke-width: 2; }
.gv-soft { fill: var(--grape-soft); stroke: var(--grape); stroke-width: 2; }
.gv-soft-line { stroke: var(--grape); stroke-width: 5; stroke-linecap: round; opacity: .55; }
.gv-recipe { fill: var(--amber-soft); stroke: var(--ink); stroke-width: 2; }
.gv-tag { fill: var(--amber-soft); stroke: var(--amber); stroke-width: 2; }
.gv-cork { fill: var(--amber-soft); stroke: var(--ink); stroke-width: 2; }
.gv-note { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; }
.gv-pin { fill: var(--coral); }
.gv-key { fill: var(--bg-tint); stroke: var(--line-2); }
.gv-chat { fill: var(--vine-soft); stroke: var(--vine); stroke-width: 1.5; }
.gv-win { fill: var(--surface); stroke: var(--ink); stroke-width: 1.8; }
.gv-dashbox { fill: none; stroke: var(--grape); stroke-width: 2.4; stroke-dasharray: 6 6; }
.gv-q { font-family: var(--serif); font-size: 56px; fill: var(--grape); }
.gv-arrow { fill: none; stroke: var(--grape); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gv-dash { stroke-dasharray: 5 6; }
.gv-bub { fill: var(--surface); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.gv-bub-cover { stroke: var(--surface); stroke-width: 3.4; }
.gv-drop { fill: var(--sky-soft); stroke: var(--sky); stroke-width: 1.5; }
.gv-shield { fill: var(--vine-soft); stroke: var(--vine); stroke-width: 2.4; }
.gv-tick { fill: none; stroke: var(--vine); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gv-noline { stroke: var(--coral); stroke-width: 3; stroke-linecap: round; }
.gv-pen { stroke: var(--coral); stroke-width: 3.5; stroke-linecap: round; }
.gv-fill-ink { fill: var(--ink); }
.gv-grape { color: var(--grape); }
.gv-grape circle { fill: currentColor; }
.gv-grape path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.gv-c1 { fill: var(--grape); }
.gv-c2 { fill: var(--amber); }
.gv-c3 { fill: var(--vine); }
.gv-t { font-size: 15px; fill: var(--ink); }
.gv-ts { font-size: 12.5px; fill: var(--ink-2); }
.gv-b { fill: var(--grape); }
.gv-muted { fill: var(--muted); }
.gv-ok { fill: var(--vine); font-size: 18px; }
.gv-no { fill: var(--coral); font-size: 18px; }
.gv-score { fill: var(--coral); font-size: 17px; }
.gv-sneaky { fill: var(--coral); font-size: 10.5px; font-style: italic; }

.gv-svg .pop, .gv-html .pop { animation: gvPop .45s var(--ease) both; animation-delay: calc(.25s + var(--d, 0) * .32s);
  transform-box: fill-box; transform-origin: center; }
@keyframes gvPop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.gv-svg .draw { stroke-dasharray: 420; animation: gvDraw .7s ease both; animation-delay: calc(.25s + var(--d, 0) * .32s); }
@keyframes gvDraw { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .slide, .gv-svg .pop, .gv-svg .draw, .gv-html .pop { animation: none; }
}

/* panels drawn in HTML: Ananya's real card and the course modules */
.gv-html { padding: clamp(.6rem, 2vw, 1.2rem); min-height: 15rem; display: grid; align-content: center; }
.gv-card h3 { font-family: var(--serif); font-size: 1.4rem; margin: .2rem 0 .8rem; }
.gv-facts { margin: 0; display: grid; gap: .55rem; }
.gv-facts div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .6rem; padding-bottom: .5rem; border-bottom: 1px dashed var(--line-2); }
.gv-facts dt { font-size: .78rem; color: var(--muted); font-weight: 600; }
.gv-facts dd { margin: 0; font-size: .9rem; font-weight: 600; }
.gv-quote { margin: .9rem 0 0; font-family: 'Patrick Hand', var(--sans); font-size: 1rem; color: var(--ink-2); background: var(--vine-soft);
  border-radius: 8px; padding: .6rem .8rem; }
.gv-quote span { display: block; margin-top: .3rem; font-family: var(--sans); font-size: .74rem; font-weight: 700; color: var(--vine); }
@media (max-width: 480px) { .gv-facts div { grid-template-columns: 1fr; gap: .1rem; } }

.gv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.gv-tile { text-align: left; border: 2px solid var(--ink); border-radius: 10px; background: var(--surface-2); padding: .65rem .75rem;
  display: grid; gap: .15rem; cursor: pointer; font-family: var(--sans); color: var(--ink); transition: transform .15s var(--ease), box-shadow .15s; }
.gv-tile:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--grape-soft); }
.gv-tile span { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grape); }
.gv-tile strong { font-size: 1rem; }
.gv-tile em { font-style: normal; font-family: 'Patrick Hand', var(--sans); font-size: .98rem; color: var(--ink-2); }

.slide-status { display: grid; gap: .55rem; margin: .4rem 0 .6rem; max-width: 34rem; }
.slide-status > div { border-left: 3px solid var(--grape); background: var(--grape-soft); border-radius: 0 8px 8px 0; padding: .55rem .85rem; }
.slide-status > .st-warn { border-left-color: var(--amber); background: var(--amber-soft); }
.slide-status strong { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grape); }
.slide-status .st-warn strong { color: var(--amber); }
.slide-status p { margin: .2rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
.deck:fullscreen .slide-status p { font-size: 1rem; }
.slide-pts { margin: 0 0 .8rem; padding-left: 1.1rem; max-width: 34rem; color: var(--ink-2); line-height: 1.5; display: grid; gap: .25rem; }
.slide-pts li::marker { color: var(--grape); }
.slide-status .slide-pts { margin: .25rem 0 0; font-size: .86rem; gap: .15rem; }
.deck:fullscreen .slide-pts { font-size: 1.15rem; }
.deck:fullscreen .slide-status .slide-pts { font-size: 1rem; }
.gv-tx { font-size: 11px; fill: var(--ink-2); }
.gv-log { fill: var(--ink); }
.gv-mono { font-family: ui-monospace, Consolas, monospace; font-size: 11px; fill: var(--bg); }
.gv-mono-warn { fill: var(--amber-soft); font-style: italic; }
.gv-stamp { fill: var(--coral-soft); stroke: var(--coral); stroke-width: 1.5; }
.gv-stampt { fill: var(--coral); }

.field label .req { margin-left: .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grape); }