/* v2/components.css: styles for the v2 components (issue 389). Needs tokens.css first.
 * ONLY --v2-* variables (no raw colour, font or size that is not a token or a plain px that a Figma component fixes).
 * Card rule: white, radius 20, shadow, no border; Dark swaps the shadow for the 1px line (that is inside --v2-shadow-card).
 * A PARALLEL surface: nothing in the live app loads this file. */

.v2-page {
  margin: 0;
  min-height: 100vh;
  background: var(--v2-gradient-page) var(--v2-page); /* focus top-left comes from the token (issue 387) */
  color: var(--v2-label);
  font: var(--v2-type-default);
  -webkit-font-smoothing: antialiased;
}
.v2-page *, .v2-page *::before, .v2-page *::after { box-sizing: border-box; }
.v2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* One focus ring: label colour on the gradient, card ink on a card. */
.v2-chip:focus-visible, .v2-pill:focus-visible, .v2-iconbtn:focus-visible, .v2-accordion:focus-visible,
.v2-avatar:focus-visible, .v2-appheader-mark:focus-visible, .v2-listrow:focus-visible, .v2-field-input:focus-visible,
.v2-composer-input:focus-visible, .v2-composer-balance:focus-visible, .v2-followup-input:focus-visible, .v2-linkbtn:focus-visible, .v2-badgebtn:focus-visible, .v2-step-x:focus-visible,
.v2-rowlink:focus-visible {
  outline: 2px solid var(--v2-focus, var(--v2-label));
  outline-offset: 2px;
}
.v2-card { --v2-focus: var(--v2-cardink); }
/* Programmatic focus on a Sheet container (opened by script, tabindex -1) shows no ring; keyboard focus on controls inside keeps the brand ring above. */
.v2-sheet:focus, .v2-sheet:focus-visible, .v2-empty:focus, .v2-empty:focus-visible { outline: none; }

/* ---------------------------------------------------------------- Icon, BrandMark */
.v2-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.v2-brandmark { display: inline-flex; color: var(--v2-label); line-height: 0; }
.v2-brandmark svg { display: block; height: 100%; width: auto; }
.v2-brandmark-30 { height: 30px; }
.v2-brandmark-20 { height: 20px; }
.v2-brandmark-14 { height: 14px; }
.v2-mark-inline { display: inline-flex; width: 17px; height: 14px; flex: none; color: currentColor; }
.v2-mark-inline svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------------- TagChip, ChipRow, ModeToggle */
.v2-chiprow { display: flex; gap: var(--v2-space-10); flex-wrap: nowrap; align-items: center; }
.v2-chiprow.is-wrap { flex-wrap: wrap; }
.v2-chip {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 var(--v2-space-20);
  border: 1px solid var(--v2-chipline); border-radius: var(--v2-radius-pill);
  background: var(--v2-chip); color: var(--v2-chipink);
  font: var(--v2-type-control-off); text-decoration: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; white-space: nowrap;
}
.v2-chip::before { content: ""; position: absolute; inset: -3px 0; } /* 44px target */
.v2-chip.is-on, .v2-chip[aria-pressed="true"] {
  background: var(--v2-chipon); color: var(--v2-chiponink);
  border-color: var(--v2-accent); font: var(--v2-type-control);
  box-shadow: var(--v2-shadow-selected);
}

/* In a card a chip is the draft's segment pill: hairline outline, ink label; selected = black with a white label (Light has no ring, Dark keeps the orange one). */
.v2-card .v2-chip { background: transparent; border-color: var(--v2-hairline); color: var(--v2-cardink); }
.v2-card .v2-chip.is-on, .v2-card .v2-chip[aria-pressed="true"] { background: var(--v2-chipon); color: var(--v2-chiponink); border-color: var(--v2-chipon); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v2-card .v2-chip.is-on, :root:not([data-theme="light"]) .v2-card .v2-chip[aria-pressed="true"] { border-color: var(--v2-accent); } }
:root[data-theme="dark"] .v2-card .v2-chip.is-on, :root[data-theme="dark"] .v2-card .v2-chip[aria-pressed="true"] { border-color: var(--v2-accent); }
/* ModeToggle exactly as drawn: three 36px pills in a faint darker track. Unselected = translucent fill, NO outline; selected = black pill, white label, 1px orange ring.
   The track runs the full column width, left-aligned pills, 6px wider than the column on each side (measured on the draft). */
.v2-modetoggle { display: inline-flex; gap: var(--v2-space-8); width: auto; max-width: 100%; margin: 0 0 0 calc(-1 * var(--v2-space-6)); padding: var(--v2-space-10) var(--v2-space-6); border-radius: var(--v2-radius-pill); background: var(--v2-pilltrack); }
.v2-modetoggle .v2-chip { height: 36px; padding: 0 var(--v2-space-18); border: 0; background: var(--v2-pill); color: var(--v2-chipink); font: var(--v2-type-strong); box-shadow: none; }
.v2-modetoggle .v2-chip::before { inset: -4px 0; }
.v2-modetoggle .v2-chip.is-on, .v2-modetoggle .v2-chip[aria-pressed="true"] { background: var(--v2-chipon); color: var(--v2-chiponink); box-shadow: 0 0 0 1px var(--v2-accent); font: var(--v2-type-strong); }

/* ---------------------------------------------------------------- PillButton */
.v2-pill {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--v2-space-8);
  min-height: 44px; padding: 0 var(--v2-space-24);
  border: 1px solid transparent; border-radius: var(--v2-radius-pill);
  font: var(--v2-type-control); text-decoration: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; white-space: nowrap;
  transition: transform .15s ease-out, opacity .15s ease-out;
}
.v2-pill-solid { background: var(--v2-chipon); color: var(--v2-chiponink); border-color: var(--v2-chipon); }
.v2-pill-ghost { background: var(--v2-card); color: var(--v2-cardink); border-color: var(--v2-hairline); }
/* A black pill on the navy Dark card has no edge of its own: it gets the 1px orange ring the selected chip has (Light cards are white, black reads). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v2-card .v2-pill-solid { border-color: var(--v2-accent); } }
:root[data-theme="dark"] .v2-card .v2-pill-solid { border-color: var(--v2-accent); }
.v2-pill:hover { transform: translateY(-1px); }
.v2-pill:active { transform: none; }
.v2-pill.is-disabled, .v2-pill:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.v2-pill-small { min-height: 34px; padding: 0 var(--v2-space-16); font: var(--v2-type-default); }
.v2-pill-small::before { content: ""; position: absolute; inset: -5px 0; } /* 44px target around the drawn 34px pill */

/* ---------------------------------------------------------------- IconButton */
.v2-iconbtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid currentColor; border-radius: var(--v2-radius-pill);
  background: transparent; color: var(--v2-chipink); cursor: pointer; text-decoration: none;
  -webkit-appearance: none; appearance: none;
}
.v2-iconbtn-45 { width: 45px; height: 45px; }
.v2-iconbtn-40::before { content: ""; position: absolute; inset: -2px; }
.v2-card .v2-iconbtn { color: var(--v2-cardink); }
.v2-iconbtn.is-filled, .v2-card .v2-iconbtn.is-filled { background: var(--v2-chipon); border-color: var(--v2-chipon); color: var(--v2-chiponink); }
.v2-iconbtn:hover { transform: translateX(1px); }
.v2-iconbtn { transition: transform .15s ease-out; }

/* ---------------------------------------------------------------- ActionRow, Divider */
.v2-actionrow { display: flex; align-items: center; gap: var(--v2-space-8); flex-wrap: wrap; color: var(--v2-cardink); }
.v2-pill .v2-mark-inline { margin: 0; }
.v2-iconbtn .v2-mark-inline { margin: 0; }
.v2-divider { border: 0; height: 1px; margin: 0; }
.v2-divider.is-page { background: var(--v2-hairline); }
.v2-divider.is-card { background: var(--v2-cardline); }

/* ---------------------------------------------------------------- Card base */
.v2-card {
  background: var(--v2-card); color: var(--v2-cardink);
  border: 0; border-radius: var(--v2-radius-20);
  box-shadow: var(--v2-shadow-card);
}
.v2-tag { color: var(--v2-tag); font-weight: 500; }

/* ---------------------------------------------------------------- ToneIcon, SourceAvatars, Badge, CreditPrice */
/* ToneIcon: exactly the draft's two treatments, both orange. outline = white circle + hairline + orange line icon; solid = orange rounded square + white icon
   (graphics need 3:1: white on icon orange is 3.6:1, Dark uses an ink glyph on soft orange); square = the white rounded square of an Explore subject card. */
.v2-toneicon { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--v2-icon); background: var(--v2-card); border: 1px solid var(--v2-hairline); }
.v2-toneicon.is-outline { width: 36px; height: 36px; border-radius: var(--v2-radius-pill); }
.v2-toneicon.is-square { width: 38px; height: 38px; border-radius: var(--v2-radius-10); }
.v2-toneicon.is-solid { width: 40px; height: 40px; border-radius: var(--v2-radius-10); background: var(--v2-icon); border-color: var(--v2-icon); color: var(--v2-iconink); }

/* SourceAvatars: the real brand logos (assets/logos), 22px, no background circle. */
.v2-sources { display: inline-flex; align-items: center; gap: var(--v2-space-6); }
.v2-source { display: block; width: 22px; height: 22px; flex: none; }
.v2-source.is-pixel { display: inline-flex; align-items: center; justify-content: center; color: var(--v2-cardink); }

.v2-badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--v2-space-10);
  border-radius: var(--v2-radius-pill); font: var(--v2-type-small); white-space: nowrap;
  background: var(--v2-cardline); color: var(--v2-cardink);
}
.v2-badge.kind-accent { background: var(--v2-watchwash); color: var(--v2-cardink); }
.v2-badge.kind-good { background: var(--v2-goodwash); color: var(--v2-good); }
.v2-badge.kind-bad { background: var(--v2-badwash); color: var(--v2-bad); }
.v2-creditprice { display: inline-flex; align-items: center; gap: var(--v2-space-8); }
.v2-creditprice-usd { font: var(--v2-type-small); color: var(--v2-label); }
.v2-card .v2-creditprice-usd { color: var(--v2-cardink); }

/* ---------------------------------------------------------------- FindingCard */
.v2-finding { padding: var(--v2-space-16); display: block; position: relative; }
.v2-finding-hit { display: inline; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
.v2-finding-hit::after { content: ""; position: absolute; inset: 0; border-radius: var(--v2-radius-20); }
.v2-finding-hit:focus-visible { outline: none; }
.v2-finding:has(.v2-finding-hit:focus-visible) { outline: 2px solid var(--v2-focus); outline-offset: 2px; }
.v2-finding-detail, .v2-finding .v2-actionrow { position: relative; z-index: 1; }
.v2-finding-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--v2-space-12); min-height: 40px; }
.v2-finding-main { display: flex; align-items: flex-start; gap: var(--v2-space-16); }
.v2-finding-text { flex: 1; min-width: 0; }
.v2-finding-title { margin: 0 0 var(--v2-space-4); font: var(--v2-type-title); color: var(--v2-cardink); }
.v2-finding-body { margin: 0; font: var(--v2-type-default); color: var(--v2-body); }
.v2-finding .v2-divider { margin: var(--v2-space-16) 0; }
.v2-finding-detail { font: var(--v2-type-default); color: var(--v2-body); }
.v2-spark { display: none; flex: none; width: 96px; height: 32px; margin-top: var(--v2-space-4); color: var(--v2-icon); }

/* ---------------------------------------------------------------- AskComposer */
.v2-composer { display: block; }
.v2-composer-card { padding: var(--v2-space-16); }
.v2-composer-prompt { display: flex; align-items: center; gap: var(--v2-space-10); font: var(--v2-type-title); color: var(--v2-cardink); margin-bottom: var(--v2-space-12); }
.v2-composer-input {
  display: block; width: 100%; min-height: 120px; resize: none; padding: 0; border: 0; background: transparent;
  color: var(--v2-cardink); font: var(--v2-type-body);
}
.v2-composer-input::placeholder { color: var(--v2-body); opacity: 1; }
/* The grey footer of the draft's card: the quiet balance and price on the left, "Use tags by typing #" on the right. Never a badge on the gradient. */
.v2-composer-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--v2-space-4) var(--v2-space-12); margin-top: var(--v2-space-8); }
.v2-composer-quiet { order: 2; flex: 1 1 100%; }
.v2-composer-hint { order: 1; }
.v2-composer-foot p { margin: 0; font: var(--v2-type-small); color: var(--v2-body); }
.v2-composer-quiet:empty { display: none; }
.v2-composer-balance { appearance: none; -webkit-appearance: none; position: relative; display: inline-flex; align-items: center; min-height: 44px; margin: -14px 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.v2-composer-balance:focus-visible { outline: 2px solid var(--v2-focus, var(--v2-cardink)); outline-offset: 2px; border-radius: var(--v2-space-4); }
.v2-composer-hint { margin-left: auto !important; text-align: right; }
.v2-composer-send { display: flex; align-items: center; justify-content: flex-end; margin-top: var(--v2-space-16); }

/* ---------------------------------------------------------------- QuickRunCard, SubjectCard */
.v2-quickrun, .v2-subject { display: flex; align-items: center; gap: var(--v2-space-12); padding: var(--v2-space-16) var(--v2-space-16) var(--v2-space-16) var(--v2-space-20); }
.v2-quickrun-text, .v2-subject-text { flex: 1; min-width: 0; }
.v2-quickrun p, .v2-subject p { margin: 0; }
.v2-quickrun-lead, .v2-quickrun-name { font: var(--v2-type-strong); }
.v2-quickrun-name { font: var(--v2-type-subtitle); }
.v2-quickrun-desc, .v2-quickrun.is-saved .v2-quickrun-tags { font: var(--v2-type-small); color: var(--v2-body); }
.v2-quickrun-lead { font: var(--v2-type-subtitle); color: var(--v2-cardink); } /* the draft: the full tag string in ink, 15px/600 (not violet) */
.v2-quickrun-desc { margin-top: var(--v2-space-4); }
.v2-subject { padding-left: var(--v2-space-16); }
.v2-subject-title { font: var(--v2-type-subtitle); color: var(--v2-cardink); }
.v2-subject-sub { font: var(--v2-type-small); color: var(--v2-body); margin-top: 2px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- SectionHeader, DetailHeader, AppHeader */
.v2-sectionheader { display: flex; align-items: center; justify-content: flex-start; gap: var(--v2-space-10); margin: 0; font: var(--v2-type-title); color: var(--v2-label); }
.v2-sectionheader .v2-icon { width: 22px; height: 22px; }
/* DetailHeader as drawn: back circle, title, kebab circle, between two page hairlines. */
.v2-detailheader { display: flex; align-items: center; gap: var(--v2-space-16); padding: var(--v2-space-12) 0; border-top: 1px solid var(--v2-hairline); border-bottom: 1px solid var(--v2-hairline); color: var(--v2-label); }
.v2-detailheader-title { flex: 1; margin: 0; font: var(--v2-type-subtitle); color: var(--v2-label); }
.v2-appheader { display: flex; align-items: center; justify-content: space-between; min-height: 48px; background: transparent; }
.v2-appheader-mark { display: inline-flex; align-items: center; min-height: 44px; color: var(--v2-label); text-decoration: none; }
.v2-appheader-mark .v2-brandmark { height: 22px; }
.v2-appheader-right { display: flex; align-items: center; gap: var(--v2-space-8); }
/* The avatar is an empty 32px ring until a real avatar exists (draft); its button is a 44px box. */
.v2-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--v2-radius-pill); background: transparent; color: var(--v2-chipink);
  font: var(--v2-type-control); cursor: pointer; position: relative;
}
.v2-avatar-ring { display: block; width: 32px; height: 32px; border: 2px solid currentColor; border-radius: var(--v2-radius-pill); }
.v2-appheader .v2-iconbtn { border-color: transparent; }
.v2-appheader .v2-iconbtn .v2-icon { width: 24px; height: 24px; stroke-width: 2.6; }

/* ---------------------------------------------------------------- TableRow, MiniTable, DataCard */
/* Rows as drawn: ONE line, ~38px, fully rounded zebra ends. A long slug is cut with an ellipsis, never wrapped. */
.v2-tablerow { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--v2-space-12); align-items: center; padding: 0 var(--v2-space-14); min-height: 38px; border-radius: var(--v2-radius-pill); font: var(--v2-type-default); color: var(--v2-cardink); }
.v2-tablerow > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-tablerow.has-link { padding-top: var(--v2-space-4); padding-bottom: var(--v2-space-4); }
.v2-tablerow.is-header { font: var(--v2-type-strong); }
.v2-tablerow.is-alt { background: var(--v2-zebra); }
/* A link row: the whole row is the link. A change under a value takes the server's tone. */
.v2-tablerow.has-link { position: relative; }
.v2-rowlink { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.v2-rowlink::after { content: ""; position: absolute; inset: 0; border-radius: var(--v2-radius-pill); }
.v2-rowlink:focus-visible { outline: none; }
.v2-tablerow.has-link:has(.v2-rowlink:focus-visible) { outline: 2px solid var(--v2-focus, var(--v2-cardink)); outline-offset: -2px; }
.v2-celldelta { display: block; font: var(--v2-type-small); color: var(--v2-body); }
.v2-celldelta.tone-good { color: var(--v2-good); }
.v2-celldelta.tone-bad { color: var(--v2-bad); }
.v2-datacard { padding: var(--v2-space-16); display: flex; flex-direction: column; gap: var(--v2-space-16); }
.v2-datacard-title { margin: 0; font: var(--v2-type-subtitle); }
.v2-datacard .v2-chiprow { gap: var(--v2-space-8); }
.v2-datacard .v2-chip { padding: 0 var(--v2-space-16); font: var(--v2-type-default); height: 36px; }
.v2-datacard .v2-chip.is-on { font: var(--v2-type-strong); }
.v2-datacard .v2-table, .v2-minitable { display: flex; flex-direction: column; gap: 2px; }
/* Three columns on a 314px card: a narrower first column so a header like "Conversions" stays whole. */
.v2-datacard .v2-tablerow { grid-template-columns: minmax(0, 1.45fr) minmax(0, .9fr) minmax(0, 1.05fr); gap: var(--v2-space-8); }
.v2-statcard { display: flex; align-items: flex-start; gap: var(--v2-space-16); padding: var(--v2-space-16); }
.v2-statcard .v2-stat { flex: 1 1 0; }
.v2-statcard .v2-stat-delta { overflow-wrap: anywhere; }
.v2-minitable { margin-top: var(--v2-space-12); }

/* ---------------------------------------------------------------- AccordionHeader, ChoiceField */
.v2-accordion {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 0;
  border: 0; background: transparent; color: var(--v2-label); font: var(--v2-type-subtitle); text-align: left; cursor: pointer;
}
.v2-accordion .v2-iconbtn { pointer-events: none; color: var(--v2-chipink); }
.v2-accordion .v2-iconbtn.is-filled { color: var(--v2-chiponink); }
.v2-choicefield { display: flex; flex-direction: column; gap: var(--v2-space-10); }
.v2-choicefield-label { margin: 0; font: var(--v2-type-default); color: var(--v2-label); }
.v2-card .v2-choicefield-label { color: var(--v2-cardink); }

/* ---------------------------------------------------------------- ActionBar */
.v2-actionbar {
  position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--v2-space-12);
  padding: var(--v2-space-12) var(--v2-space-24); background: var(--v2-card); box-shadow: var(--v2-shadow-card);
}

/* ---------------------------------------------------------------- Skeleton */
.v2-skeleton { padding: var(--v2-space-16); display: flex; flex-direction: column; gap: var(--v2-space-12); }
.v2-sk { display: block; border-radius: var(--v2-radius-14); background: var(--v2-cardline); animation: v2-pulse 1.4s ease-in-out infinite; }
.v2-sk-row { display: flex; align-items: center; gap: var(--v2-space-12); }
.v2-sk-tile { flex: none; width: 40px; height: 40px; }
.v2-sk-title { flex: 0 1 56%; height: 12px; }
.v2-sk-line { height: 12px; }
.v2-sk-line.is-short { width: 70%; }
.v2-skeleton.is-table .v2-sk-line { height: 28px; }
@keyframes v2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------------------------------------------------------------- Sheet, CreditSheet */
.v2-sheet { padding: var(--v2-space-20) var(--v2-space-20) var(--v2-space-24); }
.v2-sheet-grabber { display: none; width: 36px; height: 4px; margin-bottom: var(--v2-space-16); border-radius: var(--v2-radius-pill); background: var(--v2-cardline); }
.v2-scrim .v2-sheet-grabber { display: block; }
.v2-sheet-title { margin: 0 0 var(--v2-space-8); font: var(--v2-type-title); }
.v2-sheet-body { font: var(--v2-type-default); color: var(--v2-body); }
.v2-sheet-copy { margin: 0 0 var(--v2-space-16); }
.v2-sheet-actions { display: flex; justify-content: flex-end; gap: var(--v2-space-12); margin-top: var(--v2-space-20); }
/* The pack list inside a Sheet is hairlines, not a boxed card (Figma). */
.v2-sheet .v2-listcard { box-shadow: none; border: 0; border-top: 1px solid var(--v2-cardline); border-bottom: 1px solid var(--v2-cardline); border-radius: 0; padding: 0 var(--v2-space-16); }
.v2-scrim { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: var(--v2-color-black-40); }
.v2-scrim[hidden] { display: none; }
.v2-scrim .v2-sheet { width: 100%; max-width: 480px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (min-width: 768px) { .v2-scrim { align-items: center; } .v2-scrim .v2-sheet { border-radius: var(--v2-radius-20); } }

/* ---------------------------------------------------------------- NumberStat */
.v2-stat { min-width: 0; }
.v2-stat p { margin: 0; }
.v2-stat-label { font: var(--v2-type-small); color: var(--v2-body); }
.v2-stat-value { margin: 2px 0 !important; font: var(--v2-type-stat); color: var(--v2-cardink); }
.v2-stat-delta { font: var(--v2-type-small); color: var(--v2-body); }
.v2-stat.trend-up .v2-stat-delta { color: var(--v2-good); }
.v2-stat.trend-down .v2-stat-delta { color: var(--v2-bad); }

/* ---------------------------------------------------------------- TextField */
.v2-field { display: flex; flex-direction: column; gap: var(--v2-space-8); }
.v2-field-label { font: var(--v2-type-default); color: var(--v2-cardink); }
.v2-field-input {
  width: 100%; height: 48px; padding: 0 var(--v2-space-14);
  border: 1px solid var(--v2-body); border-radius: var(--v2-radius-14);
  background: var(--v2-card); color: var(--v2-cardink); font: var(--v2-type-body);
}
.v2-field-input::placeholder { color: var(--v2-body); opacity: 1; }
.v2-field.state-focus .v2-field-input, .v2-field-input:focus { border-color: var(--v2-accent); box-shadow: 0 0 0 1px var(--v2-accent); outline: none; }
.v2-field.state-error .v2-field-input { border-color: var(--v2-bad); box-shadow: 0 0 0 1px var(--v2-bad); }
.v2-field-input:focus-visible { outline: none; }
.v2-field-hint { margin: 0; font: var(--v2-type-small); color: var(--v2-bad); }

/* ---------------------------------------------------------------- CodeBlock */
.v2-codeblock {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--v2-space-12); padding: var(--v2-space-16);
  border: 1px solid var(--v2-hairline); border-radius: var(--v2-radius-20); background: var(--v2-chip); color: var(--v2-label);
}
.v2-codeblock-code { display: block; font: var(--v2-type-default); overflow-wrap: anywhere; color: var(--v2-label); }

/* ---------------------------------------------------------------- Toast */
.v2-toast {
  display: flex; align-items: center; gap: var(--v2-space-12); padding: var(--v2-space-14) var(--v2-space-16);
  border-radius: var(--v2-radius-14); background: var(--v2-chipon); color: var(--v2-chiponink); font: var(--v2-type-default);
}

/* ---------------------------------------------------------------- EmptyState */
.v2-empty { display: flex; flex-direction: column; align-items: center; gap: var(--v2-space-8); padding: var(--v2-space-24) var(--v2-space-20); text-align: center; }
.v2-empty-title { margin: var(--v2-space-4) 0 0; font: var(--v2-type-subtitle); }
.v2-empty-body { margin: 0 0 var(--v2-space-8); max-width: 34ch; font: var(--v2-type-default); color: var(--v2-body); }

/* ---------------------------------------------------------------- ListRow, StepRow */
.v2-listcard { display: flex; flex-direction: column; padding: 0 var(--v2-space-20); }
.v2-listrow { display: flex; align-items: center; gap: var(--v2-space-12); min-height: 56px; padding: var(--v2-space-12) 0; color: var(--v2-cardink); text-decoration: none; }
.v2-listrow-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v2-listrow-title { font: var(--v2-type-strong); }
.v2-listrow-sub { font: var(--v2-type-small); color: var(--v2-body); }
.v2-listrow-tail { display: inline-flex; align-items: center; color: var(--v2-cardink); }
.v2-listrow-value { font: var(--v2-type-strong); }
.v2-step { display: flex; align-items: flex-start; gap: var(--v2-space-14); color: var(--v2-cardink); }
.v2-step-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px;
  border: 1px solid var(--v2-body); border-radius: var(--v2-radius-pill); font: var(--v2-type-strong); color: var(--v2-body);
}
.v2-step-num .v2-icon { width: 16px; height: 16px; }
/* Figma: done = orange-wash disc with a dark check; now = black disc, white number, orange ring. */
.v2-step.state-done .v2-step-num { background: var(--v2-watchwash); border-color: transparent; color: var(--v2-cardink); }
.v2-step.state-now .v2-step-num { background: var(--v2-chipon); border-color: var(--v2-accent); box-shadow: 0 0 0 1px var(--v2-accent); color: var(--v2-chiponink); }
.v2-stepscard { display: flex; flex-direction: column; gap: var(--v2-space-20); padding: var(--v2-space-20); }
.v2-step-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; color: var(--v2-watch); }
.v2-step-icon .v2-icon { width: 28px; height: 28px; }
.v2-step.has-remove .v2-step-text { flex: 1; }
.v2-step-x {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: -6px -10px -6px 0; padding: 0;
  border: 0; background: transparent; color: var(--v2-cardink); cursor: pointer;
}
.v2-step-x:focus-visible { outline-offset: 0; border-radius: var(--v2-radius-pill); }
.v2-step-text { display: flex; flex-direction: column; gap: 2px; padding-top: 5px; min-width: 0; }
.v2-step-title { font: var(--v2-type-strong); }
.v2-step-sub { font: var(--v2-type-small); color: var(--v2-body); }
.v2-step.state-next .v2-step-title { color: var(--v2-body); }

/* ---------------------------------------------------------------- AnswerCard, FollowUpBar, PropertyPicker */
.v2-answer { padding: var(--v2-space-20); }
.v2-answer p { margin: 0; }
.v2-answer .v2-divider { margin: var(--v2-space-12) 0; }
.v2-answer-q { font: var(--v2-type-small); color: var(--v2-body); } /* Figma: the question is a small body line, its tags violet */
.v2-answer-q + .v2-answer-a, .v2-answer-q + .v2-minitable { margin-top: var(--v2-space-12); }
.v2-answerbody { display: flex; flex-direction: column; gap: var(--v2-space-12); }
.v2-answerbody .v2-minitable { margin-top: 0; }
.v2-answerbody .v2-ab-h { font: var(--v2-type-subtitle); }
.v2-answerbody .v2-ab-list { margin: 0; padding-left: var(--v2-space-20); }
.v2-answerbody .v2-ab-list li + li { margin-top: var(--v2-space-4); }
.v2-answerbody code { font: var(--v2-type-default); }
.v2-tablewrap { overflow-x: auto; }
.v2-tablewrap:focus-visible { outline: 2px solid var(--v2-focus, var(--v2-cardink)); outline-offset: 2px; border-radius: var(--v2-radius-14); }
.v2-answertable { width: 100%; border-collapse: collapse; font: var(--v2-type-default); color: var(--v2-cardink); }
.v2-answertable th, .v2-answertable td { padding: var(--v2-space-8) var(--v2-space-12); text-align: left; vertical-align: top; }
.v2-answertable th { font: var(--v2-type-strong); white-space: nowrap; }
.v2-answertable tr.is-alt td { background: var(--v2-zebra); }
.v2-answertable tr.is-alt td:first-child { border-radius: var(--v2-radius-14) 0 0 var(--v2-radius-14); }
.v2-answertable tr.is-alt td:last-child { border-radius: 0 var(--v2-radius-14) var(--v2-radius-14) 0; }
.v2-answer-a { font: var(--v2-type-answer); color: var(--v2-cardink); }
.v2-answer-meta { margin-top: var(--v2-space-12) !important; font: var(--v2-type-small); color: var(--v2-body); }
.v2-followup { display: flex; align-items: center; gap: var(--v2-space-12); padding: var(--v2-space-8) var(--v2-space-8) var(--v2-space-8) var(--v2-space-20); border-radius: var(--v2-radius-pill); }
.v2-followup-input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--v2-cardink); font: var(--v2-type-body); }
.v2-followup-input::placeholder { color: var(--v2-body); opacity: 1; }
.v2-followup { gap: var(--v2-space-8); }
.v2-picker { padding: var(--v2-space-20); display: flex; flex-direction: column; gap: var(--v2-space-20); }
.v2-picker-title { margin: 0; font: var(--v2-type-subtitle); }
.v2-picker-actions { display: flex; justify-content: flex-end; gap: var(--v2-space-12); }

/* ---------------------------------------------------------------- LinkButton, BadgeButton, PageNote, Notice, SectionBlock, PackPick, TextField on the page */
.v2-linkbtn { /* a real 44px box; the negative margin keeps the line where a bare link would sit (lint:mobile measures the box) */
  appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px;
}
.v2-linkbtn:focus-visible { border-radius: var(--v2-space-4); }
.v2-card .v2-linkbtn, .v2-sheet .v2-linkbtn { color: var(--v2-body); }
.v2-badgebtn { display: inline-flex; align-items: center; flex: none; min-height: 44px; margin: -10px 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; } /* 44px box around the 24px chip, margin keeps the row height */
.v2-badgebtn:focus-visible { outline: none; }
.v2-badgebtn:focus-visible .v2-badge { outline: 2px solid var(--v2-focus, var(--v2-label)); outline-offset: 2px; }
.v2-pagenote { margin: 0; font: var(--v2-type-default); color: var(--v2-label); }
.v2-pagenote.is-gap { margin-top: var(--v2-space-8); }
.v2-notice { display: block; }
.v2-stack { display: flex; flex-direction: column; gap: var(--v2-space-16); }
.v2-sectionblock { display: flex; flex-direction: column; gap: var(--v2-space-16); }
.v2-sectionblock.is-tight { gap: var(--v2-space-12); }
.v2-sectionblock.is-after { margin-top: var(--v2-space-8); }
.v2-sectionblock .v2-sectionheader { justify-content: flex-start; }
/* The chosen pack (or Pro) is shaded, so choosing is visible without a second colour. */
.v2-pickcard a.v2-listrow { margin: 0 calc(-1 * var(--v2-space-12)); padding-left: var(--v2-space-12); padding-right: var(--v2-space-12); border-radius: var(--v2-radius-14); }
.v2-pickcard a.v2-listrow[aria-current="true"] { background: var(--v2-zebra); }
.v2-pickcard a.v2-listrow[aria-current="true"] .v2-listrow-title { font-weight: 600; }
.v2-field.on-page .v2-field-label { color: var(--v2-label); }
.v2-field.on-page .v2-field-hint { color: var(--v2-label); font: var(--v2-type-default); }
.v2-field.on-page.state-error .v2-field-hint::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--v2-space-8); border-radius: var(--v2-radius-pill); background: var(--v2-bad); vertical-align: 1px; }
/* ActionBar fixed:true is the form footer: full width, pinned, the column's right edge aligned to the 720px content. */
.v2-actionbar.is-fixed {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; justify-content: flex-end;
  padding: var(--v2-space-12) max(var(--v2-space-24), calc((100vw - 720px) / 2)); border-radius: 0;
}

/* Touch targets (lint:mobile measures the BOX): the draft's controls are 34 to 40px tall. On a phone every one is a real 44px box and the drawn shape (fill, outline,
   ring) is a ::before layer inset to the draft's size, so the eye sees the draft and the finger gets 44. Colours come from the --vbg / --vbd / --vsh variables
   set per variant below, mirroring the desktop rules above. */
@media (max-width: 768px) {
  .v2-chip, .v2-pill-small, .v2-iconbtn-40 { isolation: isolate; background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
  .v2-chip::before, .v2-pill-small::before, .v2-iconbtn-40::before { content: ""; position: absolute; z-index: -1; inset: var(--vy, 0) 0; border-radius: var(--v2-radius-pill); pointer-events: none; background: var(--vbg, transparent); border: 1px solid var(--vbd, transparent); box-shadow: var(--vsh, none); }
  .v2-chip { height: 44px; --vy: 3px; --vbg: var(--v2-chip); --vbd: var(--v2-chipline); --vsh: none; }
  .v2-chip.is-on, .v2-chip[aria-pressed="true"] { --vbg: var(--v2-chipon); --vbd: var(--v2-accent); --vsh: var(--v2-shadow-selected); }
  .v2-card .v2-chip { --vbg: transparent; --vbd: var(--v2-hairline); --vsh: none; }
  .v2-card .v2-chip.is-on, .v2-card .v2-chip[aria-pressed="true"] { --vbg: var(--v2-chipon); --vbd: var(--v2-chipon); --vsh: none; }
  .v2-datacard .v2-chip { height: 44px; --vy: 4px; }
  .v2-modetoggle { padding-block: 0; } /* the track is exactly the 44px tap box; the drawn pills are 34px inside it (issue 381, owner: the track was too tall) */
  .v2-modetoggle .v2-chip::before { inset: var(--vy) 0; } /* the desktop rule above (-4px, a tap-area inset) made the DRAWN pill 52px tall on a phone */
  .v2-modetoggle .v2-chip { height: 44px; --vy: 5px; --vbg: var(--v2-pill); --vbd: transparent; --vsh: none; }
  .v2-modetoggle .v2-chip.is-on, .v2-modetoggle .v2-chip[aria-pressed="true"] { --vbg: var(--v2-chipon); --vbd: transparent; --vsh: 0 0 0 1px var(--v2-accent); }
  .v2-pill-small { min-height: 44px; --vy: 5px; }
  .v2-pill-ghost { --vbg: var(--v2-card); --vbd: var(--v2-hairline); }
  .v2-pill-solid { --vbg: var(--v2-chipon); --vbd: var(--v2-chipon); }
  .v2-iconbtn-40 { width: 44px; height: 44px; --vbd: currentColor; }
  .v2-iconbtn-40::before { inset: 2px; }
  .v2-iconbtn-40.is-filled, .v2-card .v2-iconbtn-40.is-filled { --vbg: var(--v2-chipon); --vbd: var(--v2-chipon); }
  .v2-appheader .v2-iconbtn-40 { --vbd: transparent; }
}
@media (max-width: 768px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .v2-card .v2-chip.is-on, :root:not([data-theme="light"]) .v2-card .v2-chip[aria-pressed="true"], :root:not([data-theme="light"]) .v2-card .v2-pill-solid { --vbd: var(--v2-accent); }
}
@media (max-width: 768px) {
  :root[data-theme="dark"] .v2-card .v2-chip.is-on, :root[data-theme="dark"] .v2-card .v2-chip[aria-pressed="true"], :root[data-theme="dark"] .v2-card .v2-pill-solid { --vbd: var(--v2-accent); }
}

/* ---------------------------------------------------------------- KpiTile (the desktop rail) */
.v2-kpi { position: relative; padding: var(--v2-space-16) var(--v2-space-16) var(--v2-space-14); }
.v2-kpi p { margin: 0; }
.v2-kpi-label { font: var(--v2-type-default); color: var(--v2-body); }
.v2-kpi-value { margin: var(--v2-space-4) 0 !important; font: var(--v2-type-stat); color: var(--v2-cardink); }
.v2-kpi-note { font: var(--v2-type-small); color: var(--v2-body); }
.v2-kpi-note.trend-up { color: var(--v2-good); }
.v2-kpi-note.trend-down { color: var(--v2-bad); }
.v2-kpi .v2-spark { position: absolute; right: var(--v2-space-16); top: var(--v2-space-16); display: block; width: 64px; height: 22px; margin: 0; }

/* ---------------------------------------------------------------- Desktop type scale (>= 1100px): only titles, section headers, body and the KPI number step up.
   Pills, chips, labels and table text keep the phone sizes (draft-fidelity.md section 3.7): width is filled with more cards, not bigger components. */
@media (min-width: 1100px) {
  .v2-finding-title { font: var(--v2-type-desk-title); }
  .v2-finding-body, .v2-finding-detail { font: var(--v2-type-desk-default); }
  .v2-finding .v2-spark { display: block; }
  .v2-sectionheader { font: var(--v2-type-desk-subtitle); }
  .v2-composer-prompt { font: var(--v2-type-desk-subtitle); }
  .v2-quickrun-lead, .v2-subject-title { font: var(--v2-type-desk-subtitle); }
  .v2-quickrun-desc, .v2-subject-sub { font: var(--v2-type-desk-small); }
  .v2-kpi-value { font: var(--v2-type-desk-stat); }
  .v2-kpi-label { font: var(--v2-type-desk-default); }
  .v2-kpi-note { font: var(--v2-type-desk-small); }
  .v2-datacard-title, .v2-detailheader-title { font: var(--v2-type-desk-subtitle); }
}

@media (prefers-reduced-motion: reduce) {
  .v2-sk { animation: none; }
  .v2-pill, .v2-iconbtn { transition: none; }
  .v2-pill:hover, .v2-iconbtn:hover { transform: none; }
}