/* ── AK.VIZ — Assad Khan Portfolio ── */



*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ═══ CINEMATIC INTRO ═══ */
#intro-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: #050507;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease;
}
#intro-overlay.done { opacity: 0; pointer-events: none; }

.intro-content {
  text-align: center; z-index: 2; position: relative;
}
.intro-logo {
  font-family: var(--ff); font-size: 48px; font-weight: 700;
  letter-spacing: .08em; color: #fff;
}
.intro-logo em { color: var(--cyan); font-style: normal; }
.intro-tagline {
  font-family: var(--fm); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
  margin-top: 12px;
}
.intro-enter {
  margin-top: 48px; display: inline-flex; flex-direction: column;
  align-items: center; gap: 8px; background: none; border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px; padding: 14px 48px; cursor: pointer;
  transition: border-color 0.3s, transform 0.3s;
}
.intro-enter:hover { border-color: var(--cyan); transform: translateY(-2px); }
.intro-enter-text {
  font-family: var(--fm); font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
}
.intro-progress {
  width: 120px; height: 2px; background: rgba(255,255,255,0.1);
  border-radius: 1px; overflow: hidden;
}
.intro-progress-fill {
  width: 0%; height: 100%; background: var(--cyan);
  border-radius: 1px; transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.intro-enter.clicked { border-color: var(--cyan); pointer-events: none; }
.intro-enter.clicked .intro-progress-fill { width: 100%; }

/* Curtain split */
.intro-curtain {
  position: absolute; top: 0; width: 50%; height: 100%;
  background: #050507; z-index: 1;
  transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
}
.intro-curtain-left { left: 0; }
.intro-curtain-right { right: 0; }
#intro-overlay.splitting .intro-content { opacity: 0; transition: opacity 0.3s; }
#intro-overlay.splitting .intro-curtain-left { transform: translateX(-100%); }
#intro-overlay.splitting .intro-curtain-right { transform: translateX(100%); }

/* ═══ JOURNEY MODE — body locked during intro ═══ */
body.intro-active { overflow: hidden; }

/* ═══ SECTION REVEAL STATES ═══ */
.section-hidden { opacity: 0; transform: translateY(40px); filter: blur(8px); }
.viz-card.card-hidden { opacity: 0; transform: translateY(30px) scale(0.95); filter: blur(6px); }

:root {
  --bg: #09090b;
  --surface: #18181b;
  --surface2: #27272a;
  --line: rgba(255,255,255,0.06);
  --cyan: #00e5ff;
  --cyan-dim: rgba(0,229,255,0.06);
  --glow-cyan: rgba(0,229,255,0.12);
  --red: #ef4444;
  --amber: #f59e0b;
  --white: #fafafa;
  --muted: #71717a;
  --foot-link: #c3ccd6;   /* 12.25:1 — interactive tier */
  --foot-dim:  #7d8797;   /*  5.48:1 — static notes, clearly quieter */
  --muted2: #a1a1aa;
  --ff: 'Inter', system-ui, -apple-system, sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, monospace;
  --transition-fast: 0.15s;
  --transition-med: 0.3s;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html { background: var(--bg); }

body {
  background: transparent;
  color: var(--white);
  font-family: var(--ff);
  min-height: 100vh;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

/* ── SKIP NAV ── */
.skip-nav {
  position: fixed; top: -100%; left: 50%; transform: translateX(-50%);
  background: var(--cyan); color: var(--bg); padding: 8px 20px;
  font-family: var(--fm); font-size: 12px; font-weight: 700;
  border-radius: 0 0 6px 6px; z-index: 999; text-decoration: none;
  transition: top 0.2s;
}
.skip-nav:focus { top: 0; }

/* ── FOCUS VISIBLE ── */
*:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.view { display: none; content-visibility: auto; }
.view.active { display: block; }

/* ── NAV ── */
/* #main-nav, not a bare `nav`. As an element selector this also matched
   <nav class="footer-nav"> in the footer, handing it a 0.92-opaque background,
   a 16px backdrop blur, a bottom border, a fixed 56px height and
   position:sticky / z-index:200 — which is the lighter box that appeared around
   the footer links, sitting on the footer's own glass panel. JS already keys
   off this id, so nothing else moves. */
#main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  border-bottom: 1px solid var(--line);
  background: rgba(9,9,11,0.92);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 200;
  transition: border-color var(--transition-med), box-shadow var(--transition-med);
}
#main-nav.scrolled {
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: 0 1px 12px rgba(0,0,0,0.4);
}
.nav-logo {
  font-family: var(--ff); font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--white);
}
.nav-logo em {
  color: var(--cyan); font-style: normal;
}
.nav-right { display: flex; align-items: center; gap: 3px; }
.nav-btn {
  font-family: var(--ff); font-size: 12px; font-weight: 500; padding: 6px 12px;
  border-radius: 4px; border: 1px solid transparent;
  cursor: pointer; background: transparent; color: var(--muted2); letter-spacing: .01em;
  transition: background .15s, color .15s;
}
.nav-btn:hover { background: var(--surface); color: var(--white); }
.nav-btn.active {
  color: var(--white); border-color: rgba(255,255,255,0.1);
  background: var(--surface);
}
.nav-btn .pip {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--amber); display: inline-block;
  margin-left: 4px; vertical-align: middle;
}
.new-btn {
  font-family: var(--ff); font-size: 12px; padding: 7px 16px;
  border-radius: 6px; border: none;
  background: var(--white);
  color: var(--bg); cursor: pointer; letter-spacing: .01em; font-weight: 600;
  margin-left: 8px; transition: all .25s var(--ease-out-expo);
}
.new-btn:hover {
  background: #e4e4e7;
  transform: translateY(-1px);
}

/* ── NAV INDICATOR ── */
.nav-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition: left var(--transition-med) var(--ease-out-expo), width var(--transition-med) var(--ease-out-expo);
}

/* ── NAV TRANSITIONS ── */
.nav-btn { transition: background var(--transition-fast), color var(--transition-fast); }

/* ── HERO ── */
.hero {
  padding: 100px 56px 72px;
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
  min-height: 420px;
}
.hero-eyebrow {
  font-family: var(--fm); font-size: 11px; font-weight: 500; letter-spacing: .18em; color: var(--muted);
  text-transform: uppercase; margin-bottom: 28px; position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 14px;
}
.hero-eyebrow::before {
  content: ''; display: block; width: 32px; height: 1px;
  background: var(--cyan);
}
.hero-title {
  font-size: clamp(24px, 3.2vw, 40px); font-weight: 600; line-height: 1.1;
  max-width: 800px; position: relative; z-index: 2;
  color: var(--white); letter-spacing: -0.035em;
}
.hero-accent {
  background: linear-gradient(135deg, var(--cyan) 0%, #67e8f9 50%, #38bdf8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-word { display: inline-block; }
.hero-sub {
  margin-top: 24px; font-size: 16px; color: var(--muted2);
  max-width: 520px; line-height: 1.75; position: relative; z-index: 2;
  font-weight: 400;
}
.hero-stats {
  display: flex; gap: 56px; margin-top: 48px; position: relative; z-index: 2;
  padding-top: 28px; border-top: 1px solid var(--line);
}
.hero-stats > div { position: relative; }
.hero-stats > div:not(:last-child)::after {
  content: ''; position: absolute; right: -28px; top: 4px;
  width: 1px; height: 36px; background: var(--line);
}
.stat-n {
  font-family: var(--fm); font-size: 32px; font-weight: 700;
  color: var(--white); display: block;
}
.stat-l {
  font-family: var(--ff); font-size: 11px; font-weight: 500; letter-spacing: .06em;
  color: var(--muted); text-transform: uppercase; display: block; margin-top: 6px;
}

/* Hero glow — soft bloom behind title */
.hero-glow {
  display: block;
  position: absolute; top: -40%; left: -10%; width: 70%; height: 140%;
  background: radial-gradient(ellipse at 40% 50%, rgba(0,229,255,0.12) 0%, transparent 60%);
  z-index: 0; pointer-events: none; filter: blur(60px);
}
/* Hero floating orbs */
.hero-orb {
  position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; filter: blur(80px);
}
.hero-orb-1 {
  width: 400px; height: 400px; top: -80px; right: 10%;
  background: radial-gradient(circle, rgba(124,58,237,0.2) 0%, transparent 70%);
}
.hero-orb-2 {
  width: 300px; height: 300px; bottom: -60px; left: 30%;
  background: radial-gradient(circle, rgba(0,229,255,0.10) 0%, transparent 70%);
}

/* ── FILTER BAR ── */
.filter-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 28px; border-bottom: 1px solid var(--line);
  background: rgba(9,9,11,0.85); backdrop-filter: blur(12px); overflow-x: auto;
}
.filter-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill {
  font-family: var(--ff); font-size: 12px; font-weight: 500;
  padding: 6px 16px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1); background: transparent; color: var(--muted2);
  cursor: pointer; white-space: nowrap; transition: all .2s;
}
.pill:hover { border-color: rgba(255,255,255,0.2); color: var(--white); background: var(--surface); }
.active-pill {
  background: var(--white) !important;
  color: var(--bg) !important; border-color: var(--white) !important;
}
.pill-search {
  font-family: var(--ff); font-size: 12px;
  padding: 6px 14px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1); background: transparent; color: var(--white);
  outline: none; width: 160px; margin-left: auto;
  transition: all .2s;
}
.pill-search::placeholder { color: var(--muted); }
.pill-search:focus { border-color: rgba(255,255,255,0.25); }

/* ── GRID ── */
.viz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 28px;
  background: transparent;
}
.viz-card {
  background: var(--surface); cursor: pointer; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform var(--transition-med) var(--ease-out-expo), box-shadow var(--transition-med), border-color var(--transition-med);
}
.viz-card::before { display: none; }
.viz-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.12);
}
.viz-card:hover .card-arrow { opacity: 1; transform: translate(2px, -2px); }
.viz-card:hover .card-thumb img { transform: scale(1.03); }
.card-thumb::after { display: none; }
.card-thumb {
  height: 180px; background: var(--surface2); position: relative; overflow: hidden;
  border-radius: 10px 10px 0 0;
}
.card-thumb img { transition: transform 0.5s var(--ease-out-expo); }
.card-thumb svg { width: 100%; height: 100%; }
.card-body {
  padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.card-type { font-family: var(--ff); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.card-title { font-size: 15px; font-weight: 600; color: var(--white); line-height: 1.35; }
.card-desc { font-size: 13px; color: var(--muted2); line-height: 1.6; flex: 1; }
.card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.card-tag {
  font-family: var(--ff); font-size: 10px; font-weight: 500; padding: 3px 10px; border-radius: 4px;
  background: var(--surface2); color: var(--muted2);
  border: none; letter-spacing: .02em; text-transform: uppercase;
}
.card-year { font-family: var(--ff); font-size: 10px; color: var(--muted); margin-left: 6px; }
.card-arrow { font-size: 14px; color: var(--muted2); opacity: 0; transition: all .25s var(--ease-out-expo); }
.card-status {
  position: absolute; top: 12px; right: 12px; font-family: var(--ff); font-size: 10px; font-weight: 600;
  padding: 4px 10px; border-radius: 4px; letter-spacing: .02em; text-transform: uppercase;
  backdrop-filter: blur(8px);
}
/* Animated is the rarer state — 6 of 30 — and the one worth advertising, so it
   keeps the accent. Interactive is the norm and reads quietly; a badge that
   shouts on every card is exactly the noise we just removed. */
.status-animated { background: rgba(0,229,255,.10); color: var(--cyan); border: 1px solid rgba(0,229,255,.2); }
.status-interactive { background: rgba(255,255,255,.06); color: var(--muted2); border: 1px solid rgba(255,255,255,.14); }
.status-pending { background: rgba(245,158,11,.12); color: var(--amber); border: 1px solid rgba(245,158,11,.2); }

/* ── DETAIL ── */
.detail-wrap { display: grid; grid-template-columns: 1fr 320px; min-height: 600px; }
/* min-width:0 — a grid item defaults to min-width:auto, so the min-content
   width of a wide nowrap table propagates up and stretches the whole column
   instead of scrolling inside its own container. */
.detail-main { padding: 36px 32px; border-right: 1px solid var(--line); min-width: 0; }
.detail-back {
  font-family: var(--fm); font-size: 11px; color: var(--muted2); cursor: pointer;
  margin-bottom: 28px; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 6px;
  transition: color .2s, gap .2s;
}
.detail-back:hover { color: var(--white); gap: 8px; }
.detail-type {
  font-family: var(--ff); font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 10px;
}
.detail-title { font-size: 28px; font-weight: 600; margin-bottom: 10px; color: var(--white); line-height: 1.2; }
.detail-desc { font-size: 14px; color: var(--muted2); line-height: 1.7; margin-bottom: 24px; }
.chart-frame {
  background: var(--surface2); border: 1px solid var(--line); border-radius: 8px;
  height: 260px; margin-bottom: 16px; overflow: hidden;
}
.chart-frame svg { width: 100%; height: 100%; }
.chart-cta {
  display: block; margin-top: 14px; padding: 12px; border-radius: 4px;
  border: 2px solid var(--cyan); color: var(--cyan); background: transparent;
  font-family: var(--fm); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-align: center; text-decoration: none; transition: background .2s, color .2s;
}
.chart-cta:hover { background: var(--cyan); color: #08090d; }
.chart-cta[hidden] { display: none; }
.chart-cta-soon {
  border: 1px solid rgba(245,158,11,.25); background: rgba(245,158,11,.06);
  color: var(--amber); font-weight: 400; font-size: 12px; letter-spacing: .04em;
}
.chart-cta-soon:hover { background: rgba(245,158,11,.06); color: var(--amber); }
/* Sample-of-the-data panel. Wide tables scroll inside .sample-scroll — the
   page itself must never scroll sideways.
   The greys are panel-local, not --muted: this panel sits on #080a0f, several
   stops darker than the page, and --muted (#71717a) only reaches 4.10:1 there.
   #929eac clears 7:1 AAA and still reads as secondary against the values. */
.sample-block { background: #080a0f; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; --sample-dim: #929eac; }
.sample-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.sample-label { font-family: var(--fm); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted2); }
.sample-src { font-size: 12px; color: var(--sample-dim); text-align: right; line-height: 1.4; }
.sample-scroll { overflow-x: auto; max-width: 100%; min-width: 0; }
.sample-table { border-collapse: collapse; font-family: var(--fm); font-size: 12px; white-space: nowrap; min-width: 100%; }
.sample-table th, .sample-table td { padding: 7px 14px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.05); }
.sample-table th { font-weight: 500; color: var(--sample-dim); letter-spacing: .04em; background: rgba(255,255,255,.02); }
.sample-table td { color: #9fb0c0; font-variant-numeric: tabular-nums; }
.sample-table th.num, .sample-table td.num { text-align: right; }
.sample-table tr:last-child td { border-bottom: none; }
.sample-note { padding: 10px 14px; font-size: 12px; color: var(--sample-dim); border-top: 1px solid var(--line); }
.detail-sidebar { padding: 24px 20px; display: flex; flex-direction: column; gap: 18px; }
.sidebar-section { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.sidebar-section:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-label { font-family: var(--fm); font-size: 10px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; margin-bottom: 10px; }
/* A long value — "Eurostat (earn_nt_net, prc_hicp_aind), CC BY 4.0" — had
   nothing holding it off the label: space-between with no gap puts the two
   flush against each other the moment the value fills the row, and the label
   was free to shrink and wrap into it. The label now holds its width and the
   value wraps within what is left. */
.meta-item { display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.meta-item:last-child { border-bottom: none; }
.meta-k { font-family: var(--fm); font-size: 10px; color: var(--muted);
  flex: 0 0 auto; white-space: nowrap; }
.meta-v { font-family: var(--fm); font-size: 10px; color: var(--white);
  flex: 1 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.insight-body { font-size: 12px; line-height: 1.75; color: var(--muted2); }
.insight-body p { margin-bottom: 8px; }
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.share-btn { font-family: var(--fm); font-size: 10px; padding: 7px; border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; background: transparent; color: var(--white); cursor: pointer; text-align: center; letter-spacing: .04em; transition: all .15s; }
.share-btn:hover { border-color: rgba(255,255,255,0.4); color: var(--white); }
.share-btn.linkedin { grid-column: span 2; border-color: rgba(0,229,255,.3); color: var(--cyan); }

/* ── AGENT ── */
.agent-wrap { padding: 32px; max-width: 720px; }
.agent-header { margin-bottom: 28px; }
.agent-header h2 { font-size: 22px; font-weight: 500; margin-bottom: 6px; }
.agent-header p { font-size: 13px; color: var(--muted2); line-height: 1.6; }
.agent-step { display: none; }
.agent-step.active { display: block; }

.drop-zone {
  border: 2px dashed rgba(255,255,255,0.25); border-radius: 8px;
  padding: 48px 32px; text-align: center; cursor: pointer;
  transition: all .2s; margin-bottom: 24px; background: var(--surface);
}
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--cyan); background: var(--cyan-dim); }
.drop-zone input[type=file] { display: none; }
.dz-icon { font-size: 28px; margin-bottom: 10px; color: var(--muted); }
.dz-text { font-family: var(--fm); font-size: 12px; color: var(--muted2); letter-spacing: .04em; }
.dz-sub { font-family: var(--fm); font-size: 10px; color: var(--muted); margin-top: 5px; }
/* A rejected file used to fail in silence — the handler returned and the drop
   zone sat there looking ready. 13px, not the 10px the notes around it use:
   this is the one line in the zone a person actually has to read. */
.dz-error { font-family: var(--fm); font-size: 13px; line-height: 1.45; margin-top: 10px;
  color: #ffb4c0; background: rgba(255,92,122,.10); border: 1px solid rgba(255,92,122,.38);
  border-radius: 6px; padding: 8px 12px; text-align: left; }
.dz-legal { font-family: var(--fm); font-size: 10px; color: var(--muted); margin-top: 10px; opacity: .85; }
.dz-legal a { color: var(--muted2); text-decoration: underline; }
.dz-legal a:hover { color: var(--cyan); }

/* Admin-only nav items — hidden for customers, shown when the owner token is present */
.admin-only { display: none; }
body.is-admin .admin-only { display: inline-block; }

.data-preview { background: var(--surface); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 16px; margin-bottom: 20px; overflow-x: auto; }
.dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dp-title { font-family: var(--fm); font-size: 11px; color: var(--cyan); letter-spacing: .08em; text-transform: uppercase; }
.dp-meta { font-family: var(--fm); font-size: 10px; color: var(--muted); }
.data-table { width: 100%; border-collapse: collapse; font-family: var(--fm); font-size: 10px; }
.data-table th { text-align: left; padding: 5px 10px; background: rgba(255,255,255,0.05); color: var(--muted2); letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.08); }
.data-table td { padding: 5px 10px; color: var(--white); border-bottom: 1px solid rgba(255,255,255,0.04); }
.data-table tr:last-child td { border-bottom: none; }
.col-type { font-size: 9px; color: var(--muted); margin-left: 4px; }

.analyse-btn { width: 100%; padding: 12px; background: var(--cyan); border: none; border-radius: 6px; color: var(--bg); font-family: var(--fm); font-size: 12px; font-weight: 700; cursor: pointer; letter-spacing: .1em; margin-bottom: 28px; transition: opacity .2s; }
.analyse-btn:hover { opacity: .85; }
.analyse-btn:disabled { opacity: .4; cursor: not-allowed; }

.thinking-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: rgba(0,229,255,0.05); border: 1px solid rgba(0,229,255,0.15); border-radius: 6px; margin-bottom: 24px; }
.thinking-spinner { width: 14px; height: 14px; border: 2px solid rgba(0,229,255,0.2); border-top-color: var(--cyan); border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.thinking-text { font-family: var(--fm); font-size: 11px; color: var(--cyan); letter-spacing: .04em; }

.proposals-label { font-family: var(--fm); font-size: 10px; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; margin-bottom: 16px; }
.proposal-card { border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; overflow: hidden; margin-bottom: 14px; cursor: pointer; transition: border-color .2s; background: var(--surface); }
.proposal-card:hover { border-color: rgba(0,229,255,0.3); }
.proposal-card.selected { border-color: var(--cyan); background: var(--cyan-dim); }
.proposal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 18px 12px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.proposal-num { font-family: var(--fm); font-size: 10px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.proposal-type { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 4px; }
.proposal-trend { font-family: var(--fm); font-size: 10px; color: var(--cyan); letter-spacing: .04em; }
.proposal-select-btn { font-family: var(--fm); font-size: 10px; padding: 5px 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.25); background: transparent; color: var(--white); cursor: pointer; white-space: nowrap; letter-spacing: .05em; flex-shrink: 0; transition: all .15s; }
.proposal-card.selected .proposal-select-btn { background: var(--cyan); border-color: var(--cyan); color: var(--bg); }
.proposal-body { padding: 14px 18px; }
.proposal-story { font-size: 13px; color: var(--muted2); line-height: 1.6; margin-bottom: 10px; }
.proposal-insight { font-family: var(--fm); font-size: 11px; color: var(--amber); line-height: 1.5; padding: 8px 12px; background: rgba(245,166,35,0.06); border-left: 2px solid var(--amber); border-radius: 0 4px 4px 0; }
.proposal-meta { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.proposal-badge { font-family: var(--fm); font-size: 9px; padding: 2px 8px; border-radius: 2px; letter-spacing: .06em; text-transform: uppercase; }
.badge-format { background: rgba(255,255,255,.05); color: var(--muted2); border: 1px solid rgba(255,255,255,0.15); }
.badge-conf { background: rgba(0,229,255,.08); color: var(--cyan); border: 1px solid rgba(0,229,255,.2); }
.preview-frame { background: var(--surface2); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; height: 200px; margin-top: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.preview-frame svg { width: 100%; height: 100%; }
.preview-cap { font-family: var(--fm); font-size: 9px; letter-spacing: .04em; color: var(--muted); margin-top: 6px; text-align: center; }

.refine-section { border: 1px solid rgba(0,229,255,0.2); border-radius: 8px; padding: 20px; background: rgba(0,229,255,0.03); margin-bottom: 16px; }
.refine-title { font-family: var(--fm); font-size: 11px; letter-spacing: .1em; color: var(--cyan); text-transform: uppercase; margin-bottom: 16px; }
.refine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.refine-field { display: flex; flex-direction: column; gap: 4px; }
.refine-field.wide { grid-column: span 2; }
.refine-field label { font-family: var(--fm); font-size: 10px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.refine-field select, .refine-field input { background: var(--surface); border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 7px 10px; color: var(--white); font-family: var(--fm); font-size: 11px; outline: none; }
.refine-field select option { background: var(--surface); }

.generate-btn { width: 100%; padding: 13px; background: transparent; border: 2px solid var(--cyan); border-radius: 6px; color: var(--cyan); font-family: var(--fm); font-size: 12px; font-weight: 700; cursor: pointer; letter-spacing: .1em; transition: all .2s; }
.generate-btn:hover { background: var(--cyan); color: var(--bg); }
.generate-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Template instantiation — "start from a proven template" path */
.path-divider { display: flex; align-items: center; text-align: center; gap: 14px; margin: 8px 0 22px; }
.path-divider::before, .path-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
.path-divider span { font-family: var(--fm); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.template-section-label { font-family: var(--fm); font-size: 10px; line-height: 1.5; letter-spacing: .04em; color: var(--muted2); margin-bottom: 16px; }
.template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.template-card { display: flex; gap: 12px; padding: 12px; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: var(--surface); cursor: pointer; transition: border-color .2s, transform .15s; }
.template-card:hover { border-color: var(--cyan); transform: translateY(-2px); }
.template-prev { width: 84px; height: 64px; flex-shrink: 0; background: var(--surface2); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.template-prev svg { width: 100%; height: 100%; }
.template-body { min-width: 0; }
.template-name { font-size: 13px; font-weight: 600; color: var(--white); margin-bottom: 3px; line-height: 1.25; }
.template-type { font-family: var(--fm); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; }
.template-desc { font-size: 11px; color: var(--muted2); line-height: 1.45; margin-bottom: 6px; }
.template-inputs { font-family: var(--fm); font-size: 9px; color: var(--muted); letter-spacing: .03em; }

/* Eleven templates predate the current standard: no SVG export, no editorial
   column, no KPI block. Until they are lifted the card says so, and is dimmed
   slightly so the full-standard ones read first. Deliberately not hidden or
   disabled — they still make a good chart, just not the whole deliverable, and
   a buyer is entitled to pick one knowingly. */
.tpl-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  border: 1px solid rgba(0,229,255,.35); color: var(--cyan); font-size: 8.5px; letter-spacing: .05em; }
.tpl-limit { font-family: var(--fm); font-size: 9.5px; letter-spacing: .02em; color: #f0a35e;
  border-left: 2px solid rgba(240,163,94,.5); padding-left: 7px; margin-bottom: 6px; line-height: 1.4; }
.template-card.template-limited { opacity: .82; }
.template-card.template-limited:hover { opacity: 1; }
@media (max-width: 720px) { .template-grid { grid-template-columns: 1fr; } }

/* ── Commerce: credit bar + paywall ── */
.credit-bar { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.credit-badge { font-family: var(--fm); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); border: 1px solid rgba(0,229,255,0.35); background: rgba(0,229,255,0.06); border-radius: 4px; padding: 6px 12px; }
.credit-badge.credit-zero { color: var(--amber); border-color: rgba(245,166,35,0.4); background: rgba(245,166,35,0.07); }
.credit-buy-btn { font-family: var(--fm); font-size: 11px; letter-spacing: .06em; padding: 6px 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.25); background: transparent; color: var(--white); cursor: pointer; transition: all .15s; }
.credit-buy-btn:hover { border-color: var(--cyan); color: var(--cyan); }

.paywall-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(4,5,8,0.8); backdrop-filter: blur(8px); padding: 20px; }
.paywall-box { position: relative; width: min(860px, 100%); max-height: 90vh; overflow-y: auto; background: #0d0f14; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 36px; }
.paywall-close { position: absolute; top: 14px; right: 14px; background: transparent; border: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.paywall-close:hover { color: var(--white); }
.paywall-title { font-size: 26px; font-weight: 600; color: var(--white); margin-bottom: 8px; }
.paywall-sub { font-size: 13px; color: var(--muted2); line-height: 1.6; margin-bottom: 26px; max-width: 560px; }
.paywall-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 720px) { .paywall-packs { grid-template-columns: 1fr; } }
.pack-card { position: relative; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 22px 18px 18px; background: var(--surface); display: flex; flex-direction: column; }
.pack-featured { border-color: var(--cyan); background: rgba(0,229,255,0.04); }
.pack-flag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-family: var(--fm); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; background: var(--cyan); color: var(--bg); border-radius: 3px; padding: 2px 8px; white-space: nowrap; }
.pack-name { font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 8px; }
.pack-price { font-family: var(--fm); font-size: 30px; font-weight: 700; color: var(--cyan); margin-bottom: 2px; }
.pack-credits { font-family: var(--fm); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.pack-blurb { font-size: 12px; color: var(--muted2); line-height: 1.55; margin-bottom: 16px; flex-grow: 1; }
.pack-buy { width: 100%; padding: 10px; border-radius: 6px; border: 1px solid var(--cyan); background: transparent; color: var(--cyan); font-family: var(--fm); font-size: 11px; font-weight: 700; letter-spacing: .06em; cursor: pointer; transition: all .2s; }
.pack-buy:hover:not(:disabled) { background: var(--cyan); color: var(--bg); }
.pack-buy:disabled { opacity: .6; cursor: wait; }
.pack-featured .pack-buy { background: var(--cyan); color: var(--bg); }
.pack-featured .pack-buy:hover:not(:disabled) { opacity: .85; }
.paywall-note { font-family: var(--fm); font-size: 10px; letter-spacing: .04em; color: var(--muted); text-align: center; }
.paywall-legal { font-family: var(--fm); font-size: 10px; color: var(--muted); text-align: center; margin-top: 10px; opacity: .8; }
.paywall-legal a { color: var(--muted2); text-decoration: underline; }
.paywall-legal a:hover { color: var(--cyan); }
.btn-cost { font-size: 9px; opacity: .75; border: 1px solid currentColor; border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }

/* Scope intake — detected summary + story + data-driven questions */
.scope-panel { margin: 6px 0 20px; padding: 16px 18px; border: 1px solid rgba(0,229,255,0.16); border-radius: 8px; background: rgba(0,229,255,0.025); }
.scope-detected { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.scope-tag { font-family: var(--fm); font-size: 10px; letter-spacing: .03em; color: var(--muted2); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 4px 11px; }
.scope-tag b { color: var(--cyan); font-weight: 700; }
.scope-tag-fix { color: #34d399; border-color: rgba(52,211,153,0.35); }
.scope-story-label { display: block; font-family: var(--fm); font-size: 11px; color: var(--white); letter-spacing: .04em; margin-bottom: 6px; }
.scope-story-label span { color: var(--muted); font-size: 10px; text-transform: none; letter-spacing: 0; }
.scope-story { width: 100%; background: var(--surface); border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; padding: 10px 12px; color: var(--white); font-family: var(--ff); font-size: 13px; outline: none; }
.scope-story:focus { border-color: var(--cyan); }
.scope-questions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.scope-q { font-family: var(--fm); font-size: 11px; color: var(--muted2); }
.scope-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; padding: 7px 11px; }
.scope-toggle b { color: var(--white); font-weight: 600; }
.scope-toggle input { accent-color: var(--cyan); }
.scope-rec { color: #34d399; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.scope-inline { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; padding: 6px 11px; }
.scope-inline select { background: var(--surface); border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; color: var(--white); font-family: var(--fm); font-size: 11px; padding: 4px 6px; outline: none; }
.scope-dim { border-color: rgba(0,229,255,0.4) !important; background: rgba(0,229,255,0.05); }
.scope-dim b { color: var(--cyan); }

/* Sample dataset shortcut */
.sample-btn { display: block; margin: 12px auto 0; background: transparent; border: none; color: var(--muted); font-family: var(--fm); font-size: 11px; letter-spacing: .05em; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 4px; }
.sample-btn:hover { color: var(--cyan); }

/* One-click refinement chips */
.refine-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.rchip { font-family: var(--fm); font-size: 10px; letter-spacing: .04em; padding: 6px 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.18); background: transparent; color: var(--muted2); cursor: pointer; transition: all .15s; }
.rchip:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0,229,255,0.05); }

/* "Use your chart" delivery panel */
.use-chart { margin-top: 22px; border: 1px solid rgba(0,229,255,0.18); border-radius: 10px; padding: 20px; background: rgba(0,229,255,0.025); }
.use-title { font-family: var(--fm); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; }
.use-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.use-card { text-align: left; padding: 14px; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: var(--surface); cursor: pointer; transition: border-color .15s, transform .12s; display: flex; flex-direction: column; gap: 6px; }
.use-card:hover { border-color: var(--cyan); transform: translateY(-1px); }
.use-card b { color: var(--white); font-size: 13px; font-weight: 600; }
.use-card span { color: var(--muted2); font-size: 11px; line-height: 1.5; }
.use-note { font-family: var(--fm); font-size: 10px; color: var(--muted); margin-top: 12px; line-height: 1.6; min-height: 14px; }
.embed-panel { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.embed-opt { border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 12px; background: var(--surface); }
.embed-label { display: flex; justify-content: space-between; align-items: center; font-family: var(--fm); font-size: 11px; color: var(--white); letter-spacing: .05em; margin-bottom: 6px; }
.embed-copy { font-family: var(--fm); font-size: 10px; padding: 4px 12px; border-radius: 4px; border: 1px solid var(--cyan); background: transparent; color: var(--cyan); cursor: pointer; }
.embed-copy:hover { background: var(--cyan); color: var(--bg); }
.embed-help { font-size: 11px; color: var(--muted2); line-height: 1.5; margin-bottom: 8px; }
.embed-code { width: 100%; background: #0a0c10; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: #9fb2c8; font-family: var(--fm); font-size: 10px; padding: 8px; resize: vertical; }
/* why the sandbox attribute is there and must stay */
.embed-note { margin-top: 10px; padding: 10px 12px; border-left: 2px solid var(--accent); border-radius: 0 6px 6px 0;
  background: rgba(0,229,255,0.06); font-size: 11.5px; line-height: 1.55; color: var(--muted2); }
.embed-note b { color: var(--text); font-weight: 600; }
.embed-note code { font-family: var(--fm); font-size: 10.5px; color: var(--accent); background: rgba(0,0,0,.3); padding: 1px 4px; border-radius: 3px; }

/* Deliverable audit badge — the agent auditing its own work, visibly */
.audit-badge { font-family: var(--fm); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; border-radius: 3px; padding: 3px 8px; margin-left: 10px; vertical-align: middle; }
.audit-busy { color: var(--muted); border: 1px solid rgba(255,255,255,0.2); }
.audit-pass { color: #34d399; border: 1px solid rgba(52,211,153,0.4); background: rgba(52,211,153,0.07); }
.audit-fail { color: var(--amber); border: 1px solid rgba(245,166,35,0.45); background: rgba(245,166,35,0.07); }

/* Data-storm canvas layering — storm sits behind copy, above the glow/orbs */
.hero { position: relative; }
.hero > *:not(.storm-canvas):not(.hero-glow):not(.hero-orb) { position: relative; z-index: 1; }
/* Readability scrim: gently darkens the copy zone whatever the storm does */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 24% 42%, rgba(5,6,10,0.55), transparent 70%);
}
/* Storm must paint above the solid curtain panels (z:1) but below the copy */
#intro-overlay .storm-canvas { z-index: 2 !important; }
#intro-overlay .intro-content { position: relative; z-index: 3; }
#intro-overlay.splitting .storm-canvas { opacity: 0 !important; transition: opacity .5s; }

.generated-label { font-family: var(--fm); font-size: 10px; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; margin-bottom: 14px; }
.generated-code { background: #080a0f; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 16px; font-family: var(--fm); font-size: 11px; color: #7a8a9a; line-height: 1.75; white-space: pre-wrap; max-height: 240px; overflow-y: auto; margin-bottom: 14px; }
.generated-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.btn-edit-code { font-family: var(--fm); font-size: 10px; padding: 6px 16px; background: transparent; border: 1px solid rgba(0,229,255,0.4); border-radius: 3px; color: var(--cyan); cursor: pointer; font-weight: 700; letter-spacing: .08em; transition: all .15s; }
.btn-edit-code:hover { background: var(--cyan); color: var(--bg); }

/* ── PREVIEW PANEL ── */
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
.preview-tabs { display: flex; gap: 1px; }
.preview-tab { font-family: var(--fm); font-size: 10px; padding: 6px 14px; border: none; background: var(--surface); color: var(--muted2); cursor: pointer; letter-spacing: .06em; transition: all .15s; }
.preview-tab:first-child { border-radius: 4px 0 0 4px; }
.preview-tab:last-child { border-radius: 0 4px 4px 0; }
.preview-tab.active { background: var(--surface2); color: var(--cyan); }
.preview-toolbar-actions { display: flex; gap: 8px; align-items: center; }
.btn-rerender { font-family: var(--fm); font-size: 10px; padding: 6px 14px; background: var(--cyan); border: none; border-radius: 3px; color: var(--bg); cursor: pointer; font-weight: 700; letter-spacing: .06em; transition: opacity .15s; }
.btn-rerender:hover { opacity: .8; }
/* Studio credit toggle. The tier picks its default — Pro ships clean, everyone
   else ships credited — but the control is live for every buyer, because the
   credit is a default rather than a permission. */
.credit-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  font-family: var(--fm); font-size: 10px; letter-spacing: .06em; color: var(--muted2);
  padding: 5px 10px; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px;
  background: var(--surface); transition: color .15s, border-color .15s; }
.credit-toggle:hover { color: var(--white); border-color: rgba(255,255,255,0.34); }
.credit-toggle input { appearance: none; -webkit-appearance: none; margin: 0; width: 26px; height: 14px;
  border-radius: 8px; background: rgba(255,255,255,0.17); position: relative; cursor: pointer;
  transition: background .15s; flex: none; }
.credit-toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--white); transition: transform .15s; }
.credit-toggle input:checked { background: var(--cyan); }
.credit-toggle input:checked::after { transform: translateX(12px); background: var(--bg); }
.credit-toggle input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .credit-toggle, .credit-toggle input, .credit-toggle input::after { transition: none; } }
.preview-size-select { font-family: var(--fm); font-size: 10px; background: var(--surface); border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 5px 8px; color: var(--muted2); outline: none; }
.preview-size-select option { background: var(--surface); }
.preview-panel { background: #0b0c10; border: 1px solid rgba(0,229,255,0.15); border-radius: 6px; overflow: hidden; margin-bottom: 14px; position: relative; padding: 8px; }
.preview-iframe { border: none; background: #0b0c10; border-radius: 4px; transform-origin: top left; display: block; }
.code-panel { margin-bottom: 14px; }
.generated-code-editor { width: 100%; min-height: 320px; background: #080a0f; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; padding: 16px; color: #7a8a9a; font-family: var(--fm); font-size: 11px; line-height: 1.75; resize: vertical; outline: none; white-space: pre; overflow-x: auto; tab-size: 2; }
.generated-code-editor:focus { border-color: var(--cyan); color: var(--white); }
/* ── REFINEMENT CHAT ── */
.refine-chat { border-top: 1px solid var(--line); padding-top: 16px; margin: 16px 0; }
.refine-label { font-size: 11px; font-weight: 600; color: var(--muted2); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.refine-history { max-height: 200px; overflow-y: auto; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.refine-history:empty { display: none; }
.chat-msg { padding: 8px 12px; border-radius: 6px; font-size: 12px; line-height: 1.5; font-family: var(--fm); max-width: 85%; word-wrap: break-word; }
.chat-user { background: rgba(0,229,255,0.12); color: var(--cyan); align-self: flex-end; border: 1px solid rgba(0,229,255,0.2); }
.chat-assistant { background: var(--surface); color: var(--muted2); align-self: flex-start; border: 1px solid var(--line); }
.chat-thinking { background: transparent; color: var(--muted); align-self: flex-start; font-style: italic; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
.refine-row { display: flex; gap: 8px; }
.refine-input { flex: 1; background: var(--surface); border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; padding: 10px 12px; color: var(--white); font-family: var(--fm); font-size: 12px; outline: none; }
.refine-input:focus { border-color: var(--cyan); }
.refine-input::placeholder { color: var(--muted); }
.refine-input:disabled { opacity: .5; }
.refine-btn { background: var(--cyan); color: var(--bg); border: none; border-radius: 4px; padding: 10px 16px; font-family: var(--fm); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: opacity .2s; }
.refine-btn:hover { opacity: .85; }
.refine-btn:disabled { opacity: .4; cursor: default; }

.send-queue-btn { width: 100%; padding: 12px; background: var(--cyan); border: none; border-radius: 6px; color: var(--bg); font-family: var(--fm); font-size: 12px; font-weight: 700; cursor: pointer; letter-spacing: .1em; transition: opacity .2s; }
.send-queue-btn:hover { opacity: .85; }
.reset-btn { font-family: var(--fm); font-size: 10px; background: transparent; border: none; color: var(--muted); cursor: pointer; letter-spacing: .06em; }

/* ── FORMS ── */
.inner-wrap { max-width: 580px; margin: 0 auto; padding: 36px 32px; }
.page-title { font-size: 20px; font-weight: 500; color: var(--white); margin-bottom: 4px; }
.page-sub { font-size: 13px; color: var(--muted2); margin-bottom: 28px; line-height: 1.6; }
.section-heading { font-family: var(--fm); font-size: 10px; letter-spacing: .14em; color: var(--white); text-transform: uppercase; margin-bottom: 18px; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-family: var(--fm); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.form-field input, .form-field textarea, .form-field select { width: 100%; background: var(--surface); border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; padding: 8px 11px; color: var(--white); font-family: var(--ff); font-size: 13px; outline: none; transition: border-color .15s; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--cyan); }
.form-field textarea { resize: vertical; min-height: 72px; font-family: var(--fm); font-size: 11px; line-height: 1.6; }
.form-field select option { background: var(--surface); color: var(--white); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-actions { display: flex; gap: 10px; margin-top: 24px; }
.btn-primary { flex: 1; padding: 10px; background: var(--cyan); border: none; border-radius: 4px; color: var(--bg); font-family: var(--fm); font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: .08em; transition: opacity .15s; }
.btn-primary:hover { opacity: .85; }
.btn-secondary { padding: 10px 18px; background: transparent; border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; color: var(--white); font-family: var(--fm); font-size: 11px; cursor: pointer; letter-spacing: .06em; transition: all .15s; }
.btn-secondary:hover { border-color: var(--white); }

/* ── APPROVE ── */
.approve-item { display: flex; gap: 14px; padding: 18px; border: 1px solid rgba(245,166,35,.2); border-radius: 4px; background: rgba(245,166,35,.03); margin-bottom: 10px; }
.approve-thumb { width: 88px; height: 60px; background: var(--surface2); border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.approve-thumb svg { width: 100%; height: 100%; }
.approve-title { font-size: 14px; font-weight: 500; color: var(--white); margin-bottom: 2px; }
.approve-meta { font-family: var(--fm); font-size: 10px; color: var(--muted); margin-bottom: 10px; }
.approve-btns { display: flex; gap: 7px; }
.btn-approve { font-family: var(--fm); font-size: 10px; padding: 5px 14px; background: var(--cyan); border: none; border-radius: 3px; color: var(--bg); cursor: pointer; font-weight: 700; transition: opacity .15s; }
.btn-approve:hover { opacity: .8; }
.btn-reject { font-family: var(--fm); font-size: 10px; padding: 5px 12px; background: transparent; border: 1px solid rgba(255,59,92,.35); border-radius: 3px; color: var(--red); cursor: pointer; transition: all .15s; }
.btn-reject:hover { background: rgba(255,59,92,.08); }
.empty-state { padding: 50px 32px; text-align: center; font-family: var(--fm); font-size: 11px; color: var(--muted); }
.approve-item-wrapper { margin-bottom: 10px; }
.approve-item-wrapper .approve-item { margin-bottom: 0; }
.btn-toggle-editor { font-family: var(--fm); font-size: 10px; padding: 5px 12px; background: transparent; border: 1px solid rgba(255,255,255,0.25); border-radius: 3px; color: var(--muted2); cursor: pointer; transition: all .15s; }
.btn-toggle-editor:hover { border-color: var(--cyan); color: var(--cyan); }
.approve-editor { background: #080a0f; border: 1px solid rgba(245,166,35,.2); border-top: none; border-radius: 0 0 4px 4px; padding: 14px; }
.approve-code-textarea { width: 100%; min-height: 180px; background: var(--surface); border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; padding: 12px; color: #7a8a9a; font-family: var(--fm); font-size: 11px; line-height: 1.75; resize: vertical; outline: none; }
.approve-code-textarea:focus { border-color: var(--cyan); color: var(--white); }
.btn-save-code { margin-top: 10px; font-family: var(--fm); font-size: 10px; padding: 6px 16px; background: var(--cyan); border: none; border-radius: 3px; color: var(--bg); cursor: pointer; font-weight: 700; letter-spacing: .08em; transition: opacity .15s; }
.btn-save-code:hover { opacity: .8; }

/* ── COMMIT REMINDER ── */
.commit-reminder { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; background: rgba(0,229,255,0.05); border: 1px solid rgba(0,229,255,0.25); border-radius: 6px; margin-bottom: 18px; }
.reminder-icon { font-size: 16px; color: var(--cyan); flex-shrink: 0; margin-top: 2px; }
.reminder-body { flex: 1; }
.reminder-title { font-family: var(--fm); font-size: 11px; color: var(--cyan); letter-spacing: .04em; margin-bottom: 8px; }
.reminder-files { display: flex; flex-direction: column; gap: 4px; }
.reminder-files code { font-family: var(--fm); font-size: 10px; color: var(--muted2); background: rgba(255,255,255,0.05); padding: 3px 8px; border-radius: 2px; }
.reminder-close { background: transparent; border: none; color: var(--muted); font-size: 14px; cursor: pointer; padding: 0 4px; flex-shrink: 0; }
.reminder-close:hover { color: var(--white); }

/* ── PIN ── */
.pin-wrap { display: flex; flex-direction: column; align-items: center; padding: 60px 32px; gap: 18px; }
.pin-icon { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(0,229,255,.3); display: flex; align-items: center; justify-content: center; }
.pin-lock { width: 9px; height: 13px; border: 2px solid var(--cyan); border-radius: 2px; position: relative; }
.pin-lock::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border: 2px solid var(--cyan); border-bottom: none; border-radius: 3px 3px 0 0; }
.pin-h { font-size: 18px; font-weight: 500; color: var(--white); }
.pin-p { font-family: var(--fm); font-size: 11px; color: var(--muted2); text-align: center; max-width: 220px; line-height: 1.6; }
.pin-dots { display: flex; gap: 10px; margin: 4px 0; }
.pdot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 1px solid rgba(255,255,255,0.4); transition: all .15s; }
.pdot.on { background: var(--cyan); border-color: var(--cyan); }
.pdot.err { background: var(--red); border-color: var(--red); }
.pin-err { font-family: var(--fm); font-size: 10px; color: var(--red); min-height: 14px; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 186px; }
.kkey { font-family: var(--fm); font-size: 16px; font-weight: 700; padding: 13px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.25); background: var(--surface); color: var(--white); cursor: pointer; text-align: center; user-select: none; transition: all .12s; }
.kkey:hover { border-color: var(--cyan); color: var(--cyan); }
.kkey:active { transform: scale(.95); }
.kkey.wide { grid-column: span 3; font-size: 10px; letter-spacing: .1em; padding: 10px; color: var(--muted2); }

/* ── SKILL DOC ── */
.skill-wrap { min-height: 600px; }
.skill-view-tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.skill-view-tab { font-family: var(--fm); font-size: 11px; letter-spacing: .06em; padding: 10px 20px; border: none; background: transparent; color: var(--muted2); cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; }
.skill-view-tab:hover { color: var(--white); }
.skill-view-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }
.skill-full-view { padding: 0 28px 28px; }
.skill-markdown { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 24px; color: var(--muted2); font-family: var(--fm); font-size: 12px; line-height: 1.8; white-space: pre-wrap; word-wrap: break-word; max-height: 700px; overflow-y: auto; }
.skill-edit-view { display: grid; grid-template-columns: 190px 1fr; }
.skill-nav-col { border-right: 1px solid var(--line); padding: 20px 0; }
.skill-nav-item { display: block; width: 100%; font-family: var(--fm); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 22px; border: none; background: transparent; color: var(--muted2); cursor: pointer; text-align: left; border-left: 2px solid transparent; transition: all .15s; }
.skill-nav-item:hover { color: var(--white); background: var(--surface); }
.skill-nav-item.active { color: var(--cyan); border-left-color: var(--cyan); background: rgba(0,229,255,0.05); }
.skill-body { padding: 28px; overflow-y: auto; max-height: 700px; }
.skill-section { display: none; }
.skill-section.active { display: block; }
.skill-st { font-family: var(--fm); font-size: 10px; letter-spacing: .16em; color: var(--cyan); text-transform: uppercase; margin-bottom: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sf { margin-bottom: 14px; }
.sf label { display: block; font-family: var(--fm); font-size: 10px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
.sf input, .sf textarea { width: 100%; background: var(--surface); border: 1px solid rgba(255,255,255,0.25); border-radius: 3px; padding: 7px 10px; color: var(--white); font-family: var(--fm); font-size: 11px; outline: none; resize: vertical; transition: border-color .15s; }
.sf input:focus, .sf textarea:focus { border-color: var(--cyan); }
.sf textarea { min-height: 68px; line-height: 1.65; }
.color-pair { display: flex; align-items: center; gap: 8px; }
.cswatch { width: 22px; height: 22px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.25); flex-shrink: 0; cursor: pointer; }
.skill-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; border-top: 1px solid var(--line); }
.save-flash { color: var(--cyan); opacity: 0; transition: opacity .25s; font-family: var(--fm); font-size: 10px; }
.save-flash.show { opacity: 1; }
.btn-save { font-family: var(--fm); font-size: 10px; padding: 6px 16px; background: var(--cyan); border: none; border-radius: 3px; color: var(--bg); cursor: pointer; font-weight: 700; letter-spacing: .08em; transition: opacity .15s; }
.btn-save:hover { opacity: .8; }

/* ── ATMOSPHERIC LAYERS — aurora gradient ── */
.atmo-grid {
  display: block;
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 0% 0%, #1e3a5f 0%, transparent 50%),
    radial-gradient(ellipse 60% 60% at 100% 0%, #2d1b69 0%, transparent 50%),
    radial-gradient(ellipse 70% 40% at 50% 100%, #0c2341 0%, transparent 50%);
}
.atmo-vignette {
  display: none;
}

/* ── MICRO-INTERACTIONS ── */
button:active, .nav-btn:active, .pill:active, .new-btn:active,
.btn-primary:active, .btn-secondary:active, .share-btn:active,
.kkey:active { transform: scale(0.97); }

.form-field input:focus, .form-field textarea:focus,
.pill-search:focus, .refine-input:focus, .sf input:focus, .sf textarea:focus {
  box-shadow: 0 0 0 3px rgba(0,229,255,0.1);
}

/* ── SITE FOOTER ── */
/* ── Site footer ───────────────────────────────────────────────────────────
   Two contrast levels, because the previous pass gave links and static notes
   the same colour and you could no longer tell which was which. Links sit at
   12.25:1 and the notes at 5.48:1 on this ground — a 2.2x separation you read
   before you read the words. Both clear AA; the link tier clears AAA.

   Inter throughout, not the mono face: "monospace on non-code UI elements" is
   on this project's own list of AI tells, and a copyright line is not code.
   A hairline splits navigation from legal so the two jobs are not one soup. */
.site-footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line);
  padding: 44px 40px 34px;
  background: var(--bg);
}
.footer-inner { max-width: 1200px; margin: 0 auto; }

.footer-nav { display: flex; flex-wrap: wrap; gap: 12px 30px; padding-bottom: 26px; }
.footer-nav a {
  font-family: var(--ff); font-size: 14px; font-weight: 450;
  color: var(--foot-link); text-decoration: none;
  text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition: color var(--transition-fast);
}
/* Underline on hover, not at rest: eight underlined items in a row reads as a
   list of warnings. The colour lift plus the rule is the affordance. */
.footer-nav a:hover { color: var(--white); text-decoration: underline; }
.footer-nav a:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 2px; color: var(--white);
}

.footer-base {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px 28px;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.footer-left  { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.footer-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-logo {
  font-family: var(--ff); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; color: var(--foot-link);
}
.footer-logo em { color: var(--cyan); font-style: normal; }
.site-footer .footer-copy,
.site-footer .footer-note {
  font-family: var(--ff); font-size: 12.5px; line-height: 1.5; color: var(--foot-dim);
}
.footer-link-main {
  font-family: var(--ff); font-size: 12.5px; font-weight: 500;
  color: var(--foot-link); text-decoration: none;
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 14px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.footer-link-main:hover { color: var(--white); border-color: rgba(255,255,255,0.24); }
.footer-link-main:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

@media (max-width: 720px) {
  .site-footer { padding: 34px 22px 28px; }
  .footer-nav  { gap: 12px 22px; }
  .footer-base { flex-direction: column; align-items: flex-start; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-glow, .hero-orb, .atmo-grid, .atmo-vignette { display: none; }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .detail-wrap { grid-template-columns: 1fr; }
  .skill-edit-view { grid-template-columns: 1fr; }
  .refine-grid { grid-template-columns: 1fr; }
  .refine-field.wide { grid-column: span 1; }
  .form-row { grid-template-columns: 1fr; }
  .hero { padding: 56px 24px 40px; }
  .hero-title { font-size: 36px; }
  .hero-stats { gap: 24px; flex-wrap: wrap; }
  .hero-stats > div:not(:last-child)::after { display: none; }
  .stat-n { font-size: 22px; }
  .viz-grid { padding: 16px; gap: 14px; grid-template-columns: 1fr; }
  .filter-bar { padding: 12px 16px; }
  nav { padding: 0 16px; gap: 10px; }
  .nav-logo { flex-shrink: 0; }
  /* No wrapping — nav items scroll horizontally in one clean row */
  .nav-right { gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav-right::-webkit-scrollbar { display: none; }
  .nav-btn { padding: 5px 8px; font-size: 10px; white-space: nowrap; flex-shrink: 0; }
  .new-btn { white-space: nowrap; flex-shrink: 0; }
}

/* ── Version bar ───────────────────────────────────────────────────────────
   Refinements are capped per generation (4–7), so an overhaul the customer
   dislikes must be recoverable. Stepping back runs no model call and spends
   no refinement — the label says so, because a control that looks like it
   might cost something is a control people avoid using.
   The instruction rides on the chip rather than in a title tooltip: at seven
   versions a row of bare numbers gives the reader nothing to choose between. */
.version-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.version-bar:empty{display:none}
.vb-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  width:100%;margin-bottom:2px}
.vb-chip{display:inline-flex;align-items:center;gap:7px;max-width:230px;
  font-size:11.5px;line-height:1;padding:5px 10px 5px 6px;border-radius:5px;
  background:transparent;border:1px solid var(--line);color:var(--muted);cursor:pointer;
  transition:border-color var(--transition-fast),color var(--transition-fast)}
.vb-chip:hover{border-color:rgba(255,255,255,.22);color:var(--white)}
.vb-chip.on{border-color:#3b82f6;color:var(--white);background:rgba(59,130,246,.12)}
.vb-chip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}
.vb-n{flex:0 0 auto;font-family:var(--fm);font-size:10px;line-height:1;padding:3px 5px;
  border-radius:3px;background:rgba(255,255,255,.07);color:var(--muted)}
.vb-chip.on .vb-n{background:rgba(59,130,246,.3);color:#fff}
.vb-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── What the chart already does ───────────────────────────────────────────
   Shown BEFORE the refinement box. A customer with four refinements should
   never spend one on a light background or hiding the prose: both are
   switches already sitting on their chart. The "Light background version"
   quick-refine used to charge a full model call for exactly that. */
.built-in{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 12px;padding:12px 14px;
  border:1px solid rgba(59,130,246,.25);background:rgba(59,130,246,.06);border-radius:7px;
  font-size:12px;color:var(--muted);line-height:1.5}
.built-in b{width:100%;color:#cfe0ff;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase}
.built-in span{display:inline-flex;gap:5px}
.built-in i{font-style:normal;color:var(--white);font-weight:500}
.built-in .bi-tail{width:100%;color:var(--muted);border-top:1px solid rgba(59,130,246,.18);
  padding-top:8px;margin-top:2px}

/* Refinements remaining. Neutral until it matters, amber at the last one,
   red when spent — the number is only useful if it changes appearance before
   the customer runs out, not after. */
.refine-counter{float:right;font-size:11px;font-weight:500;letter-spacing:.02em;
  color:var(--muted);text-transform:none}
.refine-counter.low{color:var(--amber)}
.refine-counter.out{color:var(--red)}

/* ── Shaping step ──────────────────────────────────────────────────────────
   Offered only when the file is a record rather than a table. The cards are
   buttons because they are choices, and each one states what it will do to the
   data before it does it — a reduction the reader cannot see is a reduction
   they cannot check. */
.shape-panel{margin:18px 0;padding:18px 20px;border:1px solid rgba(59,130,246,.28);
  background:rgba(59,130,246,.05);border-radius:9px}
.shape-head{flex:1 1 auto;font-size:13px;color:var(--muted);line-height:1.6}
.shape-head b{color:var(--white);font-weight:600}
.shape-loading{display:flex;gap:6px;padding:6px 0}
.shape-dot{width:6px;height:6px;border-radius:50%;background:#3b82f6;opacity:.35;
  animation:shapePulse 1.1s ease-in-out infinite}
.shape-dot:nth-child(2){animation-delay:.15s}
.shape-dot:nth-child(3){animation-delay:.3s}
@keyframes shapePulse{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.shape-dot{animation:none;opacity:.6}}

/* Three across, equal height. minmax() was fitting two per row at panel width,
   which dropped the third card to its own line and left a dead quarter. The
   internals are pinned so the three read as one set: the question reserves two
   lines whether it needs them or not, and the "Suits" line is pushed to the
   bottom, so recipe chips and row counts line up across all three. */
.angle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}
@media (max-width:820px){.angle-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.angle-grid{grid-template-columns:1fr}}
.angle-card{display:flex;flex-direction:column;gap:9px;text-align:left;
  height:100%;padding:15px;border-radius:8px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);font-family:var(--ff);
  transition:border-color var(--transition-fast),background var(--transition-fast)}
.angle-card:hover{border-color:rgba(59,130,246,.5)}
.angle-q{font-size:13.5px;font-weight:600;color:var(--white);line-height:1.35;
  min-height:2.7em}
.angle-recipe{font-family:var(--fm);font-size:10.5px;color:var(--muted);line-height:1.45;
  background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:5px;padding:7px 9px}
.angle-shrink{font-family:var(--fm);font-size:11.5px;color:var(--muted)}
.angle-shrink s{opacity:.55}
.angle-shrink b{color:#4ade80;font-weight:700}
.angle-forms{margin-top:auto;font-size:11px;color:var(--muted);line-height:1.45;
  border-top:1px solid var(--line);padding-top:8px}

/* Top-N is adjustable before committing, because the right N is a property of
   the distribution and nobody — model included — knows it without looking. */
.angle-tune{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
.angle-tune select{background:rgba(0,0,0,.35);color:var(--white);font-family:var(--fm);
  font-size:11.5px;border:1px solid var(--line);border-radius:5px;padding:4px 6px;cursor:pointer}
.angle-tune select:hover{border-color:rgba(255,255,255,.24)}
.angle-tune select:focus-visible{outline:2px solid #3b82f6;outline-offset:1px}

/* The folded share is the honesty signal, so it is stated on the card and not
   only in the notes. Amber once "Others" outweighs everything named — that is a
   ranking chart whose biggest bar is the part it did not rank. */
.angle-others{font-size:11px;line-height:1.45;color:var(--muted)}
.angle-others.heavy{color:var(--amber)}

.angle-use{margin-top:9px;width:100%;font-family:var(--ff);font-size:12.5px;font-weight:600;
  padding:8px 10px;border-radius:6px;cursor:pointer;
  background:rgba(59,130,246,.13);border:1px solid rgba(59,130,246,.45);color:#cfe0ff;
  transition:background var(--transition-fast),border-color var(--transition-fast)}
.angle-use:hover{background:rgba(59,130,246,.24);border-color:#3b82f6;color:#fff}
.angle-use:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}

/* Header and escape hatch share the top row; the hatch stacks under on narrow. */
.shape-top{display:flex;gap:20px;align-items:flex-start;margin-bottom:14px}
@media (max-width:700px){.shape-top{flex-direction:column;gap:12px}}
.shape-out{flex:0 0 auto;max-width:250px}
@media (max-width:700px){.shape-out{max-width:none}}
.shape-skip{width:100%;background:transparent;border:1px solid var(--line);
  color:var(--muted);font-family:var(--ff);font-size:12px;font-weight:500;
  padding:8px 12px;border-radius:6px;cursor:pointer;text-align:left;line-height:1.35}
.shape-skip:hover{border-color:rgba(255,255,255,.24);color:var(--white)}
.shape-skip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}
.shape-skip-note{margin-top:6px;font-size:11px;color:var(--muted);line-height:1.5}
.shape-done{font-size:13px;color:var(--muted);line-height:1.6}
.shape-done b{color:#4ade80;font-weight:600}
.shape-undo{margin-left:6px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--muted);font-family:var(--ff);font-size:12.5px;text-decoration:underline}
.shape-undo:hover{color:var(--white)}