/* ============================================================
   Ops-Board — Variety Vault Design System 3 skin
   ------------------------------------------------------------
   Tokens, fonts, and palette come from brand/vv-tokens.css (the
   single source of truth — do not redefine hex here). This file
   only maps the existing ops-board markup onto VV tokens.

   Brand rules honored:
   - Two type families: Bebas Neue (display/headings/stats, ALL CAPS,
     tracked) + Murecho (body/UI). JetBrains Mono for technical
     readouts (order ids, dispatch ids, tracking, counts).
   - One accent: Vault Purple, used sparingly (active status, the
     progress fill, focus). Status colors are dashboard-only earth
     tones (moss/ochre/terracotta), which the brand permits here.
   - Pearl surface, white cards, hairline borders, square radii,
     flat shadows. No gradients. No emoji.

   Skin applied by gogh (design lane) 2026-06-28. Markup/classes
   from the ops-board templates are kept intact.
   ============================================================ */

@import url("brand/vv-tokens.css");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--vv-surface);
  color: var(--vv-ink);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.shell {
  width: min(1680px, 100%);
  margin: 0 auto;
  padding: var(--space-3);
}

.masthead,
.board-header,
.tiles,
.order-row,
.source-exceptions {
  display: grid;
  gap: var(--space-4);
}

/* --- Masthead: deep aubergine wash + white knockout logo (a hero
       wash, not a flat purple fill) --- */
.masthead {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  background: var(--vv-night);
  color: var(--fg-on-dark);
  border: 1px solid var(--vv-night);
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-1);
}

.masthead-logo-link {
  display: inline-flex;
  align-items: center;
}

.masthead-logo {
  height: 92px;
  width: auto;
  display: block;
}

.masthead .eyebrow {
  color: var(--vv-ink-4);
}

.masthead h1 {
  color: var(--fg-on-dark);
  margin: 0;
  font-size: clamp(2rem, 5vw, var(--h1-size));
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-track);
}

/* --- Eyebrows + UI labels: uppercase Murecho 600, tracked --- */
.eyebrow,
.tile-label {
  margin: 0;
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: var(--eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--eyebrow-track);
  color: var(--vv-ink-3);
}

small {
  color: var(--vv-ink-3);
}

/* --- Headings: Bebas Neue, uppercase, tracked --- */
h1,
h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--vv-ink);
}

h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-track);
}

h2 {
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-track);
}

/* --- Source status pill --- */
.source-pill {
  position: relative;
  overflow: hidden;
  background: var(--vv-card);
  border: var(--border-hair);
  border-radius: var(--r-sm);
  padding: var(--space-2) var(--space-3);
  text-align: right;
}

.source-pill span {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--body-sm-size);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vv-spec);
}

.source-pill small {
  font-family: var(--font-mono);
  font-size: var(--caption-size);
}

.source-pill::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  opacity: 0.85;
  transform-origin: left;
}

.source-pill-dot-ok::after {
  background: var(--vv-spec);
  animation: sourceHeartbeat 2200ms var(--ease-out) infinite;
}

.source-pill-dot-warn {
  border-color: var(--vv-warn);
}

.source-pill-dot-warn span {
  color: var(--vv-warn);
}

.source-pill-dot-warn::after {
  background: var(--vv-warn);
}

.source-pill-dot-fail {
  border-color: var(--vv-fail);
}

.source-pill-dot-fail span {
  color: var(--vv-fail);
}

.source-pill-dot-fail::after {
  background: var(--vv-fail);
}

.source-pill-dot-ok .status-dot {
  animation: sourceDotPulse 2200ms var(--ease-out) infinite;
}

.source-pill-new-data {
  border-color: var(--vv-purple);
  box-shadow: inset 0 -2px 0 var(--vv-purple);
}

@keyframes sourceHeartbeat {
  0%, 100% {
    opacity: 0.35;
    transform: scaleX(0.24);
  }
  45% {
    opacity: 0.95;
    transform: scaleX(1);
  }
}

@keyframes sourceDotPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(95, 112, 72, 0.28);
  }
  45% {
    box-shadow: 0 0 0 6px rgba(95, 112, 72, 0);
  }
}

/* --- Summary tiles --- */
.tiles {
  /* auto-fit so the row works whether internal (4 tiles) or partner (5) */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: var(--space-5) 0;
}

.tile {
  background: var(--vv-card);
  border: var(--border-hair);
  border-radius: var(--r-md);
  min-height: 112px;
  padding: var(--space-4);
}

.tile strong {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: 3rem;
  line-height: 1;
  color: var(--vv-ink);
  font-variant-numeric: tabular-nums;
}

.tile small {
  display: block;
  margin-top: var(--space-1);
}

/* Dead-zone / attention tile: ochre warn accent + left rule */
.tile-alert {
  border-color: var(--vv-warn);
  border-left: 3px solid var(--vv-warn);
}

.tile-alert strong {
  color: var(--vv-warn);
}

/* ============================================================
   Readiness status cards
   ============================================================ */
.readiness-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.readiness-card {
  display: grid;
  gap: var(--space-2);
  min-height: 132px;
  background: var(--vv-card);
  border: var(--border-hair);
  border-radius: var(--r-md);
  padding: var(--space-4);
}

.readiness-card-dot-ok {
  border-top: 3px solid var(--vv-spec);
}

.readiness-card-dot-warn {
  border-top: 3px solid var(--vv-warn);
}

.readiness-card-dot-fail {
  border-top: 3px solid var(--vv-fail);
}

.readiness-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--vv-ink-3);
  font-size: var(--caption-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-track);
}

.readiness-card strong {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: var(--h3-track);
  text-transform: uppercase;
}

.readiness-card small {
  line-height: 1.35;
}

/* ============================================================
   Command center: internal-only action/phase/approval/archive controls
   ============================================================ */
.command-center {
  margin: 0 0 var(--space-5);
  background: var(--vv-card);
  border: var(--border-hair);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: inset 0 3px 0 var(--vv-purple);
}

.command-center-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-hair);
  background: var(--vv-surface-2);
}

.command-center-header h2 {
  font-size: var(--h3-size);
  letter-spacing: var(--h3-track);
}

.command-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.35fr 1fr 0.95fr;
  gap: 0;
}

.command-group {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border-right: var(--border-hair);
}

.command-group:last-child {
  border-right: none;
}

.command-group h3 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--caption-size);
  font-weight: 700;
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--vv-ink-3);
}

.command-button,
.command-reset,
.command-link,
.command-note {
  min-height: 36px;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--body-sm-size);
  font-weight: 700;
}

.command-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  border: var(--border-hair);
  background: var(--vv-surface);
  color: var(--vv-ink);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.command-button span {
  display: block;
  min-width: 0;
}

.command-button strong,
.archive-readouts strong {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--vv-night);
  color: var(--fg-on-dark);
  font-family: var(--font-mono);
  font-size: var(--caption-size);
  font-variant-numeric: tabular-nums;
}

.command-button:hover,
.command-button:focus-visible,
.command-button.is-active {
  border-color: var(--vv-purple);
  background: rgba(88, 41, 96, 0.08);
  color: var(--vv-purple-dark);
}

.command-button.is-active {
  box-shadow: inset 3px 0 0 var(--vv-purple);
}

.command-button:focus-visible,
.command-reset:focus-visible,
.command-link:focus-visible {
  outline: 2px solid var(--vv-purple);
  outline-offset: 2px;
}

.command-reset {
  flex: none;
  border: 1px solid var(--vv-purple);
  background: transparent;
  color: var(--vv-purple-dark);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

.archive-readouts {
  display: grid;
  gap: var(--space-2);
}

.archive-readouts span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--vv-ink-3);
  font-size: var(--body-sm-size);
  font-weight: 600;
}

.command-link,
.command-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  text-align: center;
}

.command-link {
  border: 1px solid var(--vv-purple);
  background: var(--vv-purple);
  color: var(--fg-on-purple);
  text-decoration: none;
}

.command-link:hover {
  background: var(--vv-purple-dark);
  border-color: var(--vv-purple-dark);
}

.command-note {
  border: var(--border-hair);
  background: var(--vv-surface-2);
  color: var(--vv-ink-3);
}

.order-row.is-command-hidden {
  display: none;
}

.order-row.row-command-focus {
  animation: rowCommandFocus 1200ms var(--ease-out) both;
}

@keyframes rowCommandFocus {
  0% {
    background: rgba(88, 41, 96, 0.16);
    box-shadow: inset 4px 0 0 var(--vv-purple);
  }
  100% {
    background: transparent;
    box-shadow: inset 0 0 0 transparent;
  }
}

/* --- Board container --- */
.board,
.source-exceptions {
  background: var(--vv-card);
  border: var(--border-hair);
  border-radius: var(--r-md);
}

.board {
  overflow: hidden;
}

/* --- Unmatched source facts (collapsed diagnostics) --- */
.source-exceptions {
  grid-template-columns: minmax(220px, 0.6fr) 1fr;
  align-items: start;
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-color: var(--vv-warn);
  border-left: 3px solid var(--vv-warn);
  box-shadow: inset 0 1px 0 rgba(176, 122, 42, 0.08);
}

.source-exceptions p,
.source-exceptions ul {
  margin: 0;
}

.source-exceptions ul {
  padding-left: var(--space-5);
}

.source-exceptions li + li {
  margin-top: var(--space-1);
}

/* --- Board header --- */
.board-header {
  grid-template-columns: 1fr auto;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-hair);
}

.board-header p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--body-sm-size);
  color: var(--vv-ink-3);
}

/* --- Order table --- */
.order-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.order-row {
  position: relative;
  align-items: start;
  gap: var(--space-2);
  min-height: 86px;
  padding: var(--space-3);
  border-bottom: var(--border-hair);
}

/* Grid cells default to min-width:auto, which lets long content (e.g. a part name in
   the per-line ship breakout) push past its track and overflow into the next column.
   min-width:0 makes each cell respect its track width so inner ellipsis truncation works. */
.order-row > * {
  min-width: 0;
}

.order-row.row-just-updated {
  animation: rowUpdateFlash 1450ms var(--ease-out) both;
}

.order-row.row-action-confirmed {
  animation: rowActionConfirmed 1200ms var(--ease-out) both;
}

.order-row.is-committing {
  overflow: hidden;
}

.order-row.is-committing::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--vv-purple);
  animation: actionSweep 900ms var(--ease-out) infinite;
}

@keyframes rowUpdateFlash {
  0% {
    background: rgba(88, 41, 96, 0.13);
    box-shadow: inset 4px 0 0 var(--vv-purple);
  }
  100% {
    background: transparent;
    box-shadow: inset 0 0 0 transparent;
  }
}

@keyframes rowActionConfirmed {
  0% {
    background: rgba(95, 112, 72, 0.16);
    box-shadow: inset 4px 0 0 var(--vv-spec);
  }
  100% {
    background: transparent;
    box-shadow: inset 0 0 0 transparent;
  }
}

@keyframes actionSweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.order-row-partner {
  /* Customer | Parts (widest) | Status | Ship-remaining | Billed | Ship | Production */
  grid-template-columns: minmax(180px, 1fr) minmax(240px, 1.7fr) minmax(120px, 0.65fr) minmax(160px, 0.85fr) minmax(140px, 0.7fr) minmax(150px, 0.75fr) minmax(150px, 0.75fr);
  min-width: 0;
}

.order-row-internal {
  /* Customer | Parts | Status | Ship-remaining | Made count | Billed | Ship | PrintHUB */
  grid-template-columns: minmax(145px, 0.9fr) minmax(174px, 1.12fr) minmax(152px, 0.86fr) minmax(155px, 0.82fr) minmax(170px, 0.95fr) minmax(108px, 0.6fr) minmax(120px, 0.66fr) minmax(120px, 0.66fr);
  min-width: 0;
}

.order-row:last-child {
  border-bottom: none;
}

.order-row-head {
  min-height: 44px;
  background: var(--vv-surface-2);
  color: var(--vv-ink-3);
  font-family: var(--font-sans);
  font-size: var(--caption-size);
  font-weight: 600;
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
}

/* Dead-zone row: ochre left rule + faint tint (no gradient) */
.needs-attention {
  background: var(--vv-surface-2);
  box-shadow: inset 3px 0 0 var(--vv-warn);
}

.order-main strong,
.order-row span,
.order-row small {
  display: block;
}

/* Customer cell lead line.
   Internal view: a CUSTOMER NAME → Murecho (a name in monospace reads wrong).
   Partner view: the lead <strong> is an estimate ref (a technical readout), so
   keep that one mono — scoped via .shell-partner below. */
.order-main strong {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--body-size);
  letter-spacing: 0;
  color: var(--vv-ink);
}

.shell-partner .order-main strong {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--body-sm-size);
}

/* Order id / PO / estimate / dispatch / tracking sub-labels = technical readouts → mono */
.order-main small {
  font-family: var(--font-mono);
  font-size: var(--caption-size);
  color: var(--vv-ink-3);
}

/* Status cell — flex column with one consistent gap so the stage pill, sample
   marker, operator controls, diagnostics, and request text get uniform vertical
   rhythm (was ad-hoc per-element margins → cramped, uneven stacking). */
.status-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

/* Children that were block + ad-hoc margins now lay out purely on the cell gap. */
.status-cell > .cell-controls,
.status-cell > .cell-diag,
.status-cell > .sample-req-text,
.status-cell > .sample-fulfill-form {
  margin-top: 0;
}

.status {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--vv-ink);
}

.status-muted {
  color: var(--vv-ink-4);
  font-weight: 600;
}

.alert-text {
  color: var(--vv-fail);
  font-weight: 700;
}

.is-hidden {
  display: none !important;
}

/* --- Status pills (DS component — preview/components-pills.html) ---
   Used in the Status / Billed / Ship / Production columns. A pill is a status
   READOUT, not an action; the DS pill (filled chip + dot + tracked caps) is the
   component for exactly this. .status.pill keeps the existing .status hook while
   adopting the pill chrome. Variant chosen by the status_pill_class Jinja filter.

   SOLID FILL: background = the authoritative DS status token (--vv-spec / --vv-warn
   / --vv-fail / --vv-purple), text = pearl. Single source of truth — change a
   status token and every pill follows. Pill text is bold + uppercase + tracked,
   so pearl clears the bold/large-text contrast bar on all four fills (ochre is the
   tightest at ~3.4, fine for bold). The dot (::before) is currentColor = pearl. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  line-height: 1.2;
  background: var(--vv-ink-3);   /* default/neutral fill, overridden per variant */
  color: var(--vv-pearl);
}

.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: currentColor;
  flex: none;
  opacity: 0.85;
}

.pill-spec { background: var(--vv-spec); }    /* pass — moss */
.pill-warn { background: var(--vv-warn); }    /* attention — ochre */
.pill-fail { background: var(--vv-fail); }    /* problem — terracotta */
.pill-info { background: var(--vv-purple); }  /* active — Vault Purple */

/* idle / unknown — quiet neutral fill (no status hue), still pearl text */
.pill-neutral { background: var(--vv-ink-4); color: var(--vv-pearl); }

/* status-muted keeps the muted neutral fill regardless of variant ordering */
.status-muted.pill { background: var(--vv-ink-4); color: var(--vv-pearl); }

/* ============================================================
   Order-lifecycle pill system (Jon-approved 2026-06-28)
   ------------------------------------------------------------
   TRACK A — lifecycle gates (where the order IS). One pill per row.
   TRACK B — attention tags (what's WRONG): rendered as a SECOND pill
   beside the gate. Exception (needs-scheduling = ochre) + aging
   (gold → orange → terracotta). All solid fills + pearl text, on the
   new --vv-status-* tokens. Variant picked by status_pill_class. */

/* Track A — gates */
.pill-blue       { background: var(--vv-status-blue); }        /* Intake / Estimate */
.pill-umber      { background: var(--vv-status-umber); }       /* Sent */
.pill-purple     { background: var(--vv-purple); }             /* PO Received */
.pill-purpledark { background: var(--vv-purple-dark); }        /* In Production */
.pill-verdigris  { background: var(--vv-status-verdigris); }   /* Shipped */

/* Closed — outlined, de-emphasized so finished orders recede */
.pill-closed {
  background: transparent;
  color: var(--vv-spec);
  border: 1.5px solid var(--vv-spec);
  padding: 2.5px 9px;   /* offset the 1.5px border so height matches filled pills */
}
.pill-closed::before { background: var(--vv-spec); opacity: 1; }

/* Terminal / paused — off the progression, quiet so they don't compete */
.pill-hold { background: var(--vv-ink-3); }   /* on_hold — muted graphite */
.pill-cancelled {
  background: transparent;
  color: var(--vv-ink-4);
  border: 1px solid var(--vv-ink-4);
  padding: 3px 9px;
  text-decoration: line-through;
}
.pill-cancelled::before { background: var(--vv-ink-4); opacity: 1; }

/* Track B — attention tags (second pill in the cell) */
.pill-ochre  { background: var(--vv-warn); }          /* Needs scheduling (exception) */
.pill-gold   { background: var(--vv-status-gold); }   /* Waiting (aging 1) */
.pill-orange { background: var(--vv-status-orange); } /* Re-touch base (aging 2) */
.pill-terra  { background: var(--vv-fail); }          /* Review for archive (aging 3) */

/* When a gate pill and an attention tag share a cell, space them */
.pill + .pill { margin-left: 6px; }

/* Sample marker (Jon 2026-06-29) — a COMPACT ✓ badge, deliberately NOT a .pill:
   same Vault Purple so it reads as "sample," but tiny + mixed-case + no tracking
   so it never competes with the stage gate pill (the old full pill wrapped to
   two lines and dominated the cell). */
.sample-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  flex: none;               /* don't let the flex-column cell shrink the badge */
  white-space: nowrap;      /* keep "✓ Sample" on ONE line — never break the glyph off */
  background: var(--vv-purple);
  color: var(--vv-pearl);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 2px 7px 2px 6px;
  border-radius: var(--r-pill);
  line-height: 1.3;
}

.sample-mark-gl {
  font-size: 10px;
  line-height: 1;
  flex: none;               /* glyph stays put beside the word */
}

/* Pending variant — partner has REQUESTED a sample, VV hasn't handled it yet.
   Ochre/attention "! Sample" (Jon: shows "!", flips to "✓" on operator click). */
.sample-mark-pending {
  background: var(--vv-warn);
  color: var(--vv-pearl);
}

/* When the marker IS the click target (internal operator fulfill toggle), make the
   button render exactly like the marker span. */
.sample-fulfill-form {
  display: inline;
  margin: 0;
}

.sample-mark-btn {
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}

.sample-mark-btn:hover {
  filter: brightness(1.08);
}

.sample-mark-btn:focus-visible {
  outline: 2px solid var(--vv-ink);
  outline-offset: 2px;
}

/* --- Progress bar: Vault Purple fill, hairline track, square --- */
.bar {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border: var(--border-hair);
  border-radius: var(--r-pill);
  background: var(--vv-surface-2);
}

.bar span {
  display: block;
  height: 100%;
  background: var(--vv-purple);
}

/* ============================================================
   Count-entry: internal-only operator confirmation UI
   ============================================================ */
.count-cell {
  display: grid;
  gap: var(--space-1);
}

.count-cell span {
  display: inline;
}

.count-entry {
  margin-top: var(--space-2);
  border-top: var(--border-hair);
  padding-top: var(--space-2);
}

.count-entry > summary {
  cursor: pointer;
  color: var(--vv-purple);
  font-weight: 700;
  font-size: var(--body-sm-size);
}

.count-entry-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.count-entry-form label {
  display: grid;
  gap: 3px;
  color: var(--vv-ink-3);
  font-size: var(--caption-size);
  font-weight: 600;
}

.count-entry-form input,
.count-entry-form textarea {
  width: 100%;
  border: var(--border-hair);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  background: var(--vv-card);
  color: var(--vv-ink);
  font-family: var(--font-sans);
  font-size: var(--body-sm-size);
}

.count-entry-form input:focus,
.count-entry-form textarea:focus {
  outline: 2px solid var(--vv-purple);
  outline-offset: 1px;
}

.count-entry-notes,
.count-entry-form button,
.count-entry-message {
  grid-column: 1 / -1;
}

.count-entry-form button {
  border: 1px solid var(--vv-purple);
  border-radius: var(--r-sm);
  background: var(--vv-purple);
  color: var(--fg-on-purple);
  padding: 7px 10px;
  font-weight: 700;
  cursor: pointer;
}

.count-entry-form button:disabled {
  opacity: 0.65;
  cursor: wait;
}

/* ============================================================
   Status cell — Track A "stage-only at rest" layout (Jon 2026-06-29)
   ------------------------------------------------------------
   The cell shows just the stage pill at rest. Operator controls
   (.cell-controls) and diagnostics (.cell-diag) recede until the
   row is hovered or focused. opacity/visibility — NOT display:none —
   so an in-flight submit stays put (no layout jump), and :has()
   keeps a committing form revealed even if the pointer leaves.
   ============================================================ */
.cell-controls,
.cell-diag {
  display: block;
  margin-top: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}

/* Reveal on row hover or keyboard focus anywhere in the row. */
.order-row-internal:hover .cell-controls,
.order-row-internal:hover .cell-diag,
.order-row-internal:focus-within .cell-controls,
.order-row-internal:focus-within .cell-diag,
/* Keep visible while a sample-tag submit is in flight / just confirmed,
   regardless of pointer position. The row gets .is-committing on submit;
   the form gets .action-confirmed on success (board-polish.js). */
.order-row-internal.is-committing .cell-controls,
.cell-controls:has(.is-committing),
.cell-controls:has(.action-confirmed) {
  opacity: 1;
  visibility: visible;
}

/* The action itself: a quiet text-link, not a filled button — so it
   reads as an ACTION beside the stage, never as a status label. */
.sample-tag-link {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--caption-size);
  font-weight: 600;
  color: var(--vv-purple);
  cursor: pointer;
}

.sample-tag-link:hover {
  text-decoration: underline;
}

.sample-tag-link:focus-visible {
  outline: 2px solid var(--vv-purple);
  outline-offset: 2px;
}

.cell-diag {
  color: var(--vv-ink-4);
  font-size: var(--caption-size);
}

.sample-tag-form.is-committing .sample-tag-btn,
.sample-request form.is-committing .sample-tag-btn,
.review-flag form.is-committing .sample-tag-btn,
.review-resolve.is-committing .sample-tag-btn,
.count-entry-form.is-committing button {
  opacity: 0.7;
  transform: translateY(1px);
}

.action-confirmed [data-count-message],
.action-confirmed .sample-tag-btn,
.action-confirmed button[type="submit"] {
  box-shadow: 0 0 0 2px rgba(95, 112, 72, 0.2);
}

.action-failed [data-count-message],
.action-failed button[type="submit"] {
  box-shadow: 0 0 0 2px rgba(155, 58, 43, 0.24);
}

/* Unknown / uncaptured shipment state — honest hatch, not a "0" bar */
.bar-unknown {
  background: repeating-linear-gradient(
    45deg,
    var(--vv-line),
    var(--vv-line) 4px,
    transparent 4px,
    transparent 8px
  );
  opacity: 0.7;
}

/* numbers in data cells read as readouts → tabular figures */
.order-row [role="cell"] small {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1240px) {
  .order-row,
  .order-row-partner,
  .order-row-internal {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .order-row-head {
    display: none;
  }
}

@media (max-width: 820px) {
  .shell {
    padding: var(--space-3);
  }

  .masthead {
    grid-template-columns: auto 1fr;
    row-gap: var(--space-3);
  }

  .masthead-aside {
    grid-column: 1 / -1;
    justify-items: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .board-header,
  .tiles,
  .order-row,
  .source-exceptions {
    grid-template-columns: 1fr;
  }

  .source-pill,
  .board-header {
    text-align: left;
  }

  .source-pill {
    width: 100%;
    max-width: 100%;
  }

  .source-pill small {
    overflow-wrap: anywhere;
  }

  .session-bar {
    width: 100%;
    flex-wrap: wrap;
  }

  .session-user {
    flex: 1 1 100%;
  }

  .tiles {
    gap: var(--space-2);
  }

  .command-center-header,
  .command-grid {
    grid-template-columns: 1fr;
  }

  .readiness-summary {
    grid-template-columns: 1fr;
  }

  .command-center-header {
    display: grid;
  }

  .command-reset {
    width: 100%;
  }

  .command-group {
    border-right: none;
    border-bottom: var(--border-hair);
  }

  .command-group:last-child {
    border-bottom: none;
  }

  .order-row-head {
    display: none;
  }

  .order-row {
    gap: var(--space-2);
    min-width: 0;
  }
}

/* ============================================================
   Auth: login page + session bar
   ============================================================ */
.login-shell {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: var(--vv-surface);
}

.login-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(88, 41, 96, 0.035) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(63, 107, 94, 0.032) 0 1px, transparent 1px 34px);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  pointer-events: none;
}

.login-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--vv-surface);
  opacity: 0;
  pointer-events: none;
  transform: translateY(18vh) scaleY(0.26);
  transform-origin: bottom center;
  transition: opacity 420ms var(--ease-out), transform 460ms var(--ease-out);
}

.login-vanta-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.88;
  transform-origin: center 18%;
  transition: opacity 520ms var(--ease-out), transform 560ms var(--ease-out);
}

.login-card {
  position: relative;
  z-index: 1;
  background: var(--vv-card);
  border: var(--border-hair);
  border-radius: var(--r-md);
  padding: var(--space-6);
  width: min(400px, 100%);
  display: grid;
  gap: var(--space-3);
  box-shadow: var(--shadow-2);
  transition: opacity 340ms var(--ease-out), transform 420ms var(--ease-out), filter 420ms var(--ease-out);
}

@supports (backdrop-filter: blur(10px)) {
  .login-card {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
  }
}

.login-shell.is-exiting::after {
  opacity: 0.58;
  transform: translateY(-26vh) scaleY(0.7);
}

.login-shell.is-exiting .login-vanta-field {
  opacity: 0.34;
  transform: translateY(-18vh) scale(0.72);
}

.login-shell.is-exiting .login-card {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(42px) scale(0.94);
}

@keyframes shellLoginEnter {
  0% {
    opacity: 0.82;
    filter: blur(2px);
    transform: translateY(18px) scale(0.992);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes shellSectionEnter {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(22px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.shell.shell-login-enter {
  animation: shellLoginEnter 580ms var(--ease-out) both;
}

.shell.shell-login-enter .masthead,
.shell.shell-login-enter .tiles,
.shell.shell-login-enter .command-center,
.shell.shell-login-enter .source-exceptions,
.shell.shell-login-enter .board {
  animation: shellSectionEnter 560ms var(--ease-out) both;
}

.shell.shell-login-enter .masthead {
  animation-delay: 40ms;
}

.shell.shell-login-enter .tiles {
  animation-delay: 100ms;
}

.shell.shell-login-enter .command-center,
.shell.shell-login-enter .source-exceptions {
  animation-delay: 160ms;
}

.shell.shell-login-enter .board {
  animation-delay: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  .login-shell::after,
  .login-vanta-field,
  .login-card {
    transition: none;
  }

  .shell.shell-login-enter {
    animation: none;
  }

  .shell.shell-login-enter .masthead,
  .shell.shell-login-enter .tiles,
  .shell.shell-login-enter .command-center,
  .shell.shell-login-enter .source-exceptions,
  .shell.shell-login-enter .board {
    animation: none;
  }
}

/* Co-brand lockup: full VV logo (mark + wordmark) | hairline | Pioneer wordmark.
   Weight-matched side-by-side (B3) — Pioneer scaled so the two read equal. */
.login-cobrand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-3);
  min-height: 64px;
}

.login-cobrand-vv {
  height: 64px;
  width: auto;
  display: block;
  flex: none;
}

.login-cobrand-rule {
  width: 1px;
  align-self: stretch;
  margin: 6px 0;
  background: var(--vv-line);
  flex: none;
}

.login-cobrand-pioneer {
  width: 172px;
  max-width: 46%;
  height: auto;
  display: block;
  flex: none;
}

/* Narrow cards: stack the two marks so neither shrinks awkwardly. */
@media (max-width: 420px) {
  .login-cobrand {
    flex-direction: column;
    gap: var(--space-3);
  }
  .login-cobrand-rule {
    width: 64%;
    height: 1px;
    align-self: center;
    margin: 0;
  }
  .login-cobrand-pioneer {
    width: 62%;
    max-width: 62%;
  }
}

.login-card .eyebrow {
  color: var(--vv-ink-3);
}

.login-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--h2-track);
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  color: var(--vv-ink);
  margin: 0;
}

.login-sub {
  margin: 0 0 var(--space-1);
  color: var(--vv-ink-3);
}

.login-error {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--vv-fail);
  background: var(--vv-card);
  color: var(--vv-fail);
  font-size: var(--body-sm-size);
}

.login-success {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--vv-spec);
  background: var(--vv-card);
  color: var(--vv-spec);
  font-size: var(--body-sm-size);
}

.login-link {
  justify-self: center;
  color: var(--vv-purple);
  font-size: var(--body-sm-size);
  font-weight: 700;
  text-decoration: none;
}

.login-link:hover,
.login-link:focus-visible {
  color: var(--vv-purple-dark);
  text-decoration: underline;
}

.login-field {
  display: grid;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--body-sm-size);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--vv-ink-3);
}

.login-field input {
  padding: var(--space-2) var(--space-3);
  border: var(--border-hair);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: 400;
  color: var(--vv-ink);
  background: var(--vv-surface);
}

.login-field input:focus {
  outline: 2px solid var(--vv-purple);
  outline-offset: 1px;
  background: var(--vv-card);
}

.login-button {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--vv-purple);
  border-radius: var(--r-sm);
  background: var(--vv-purple);
  color: var(--fg-on-purple);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.login-button:hover {
  background: var(--vv-purple-dark);
  border-color: var(--vv-purple-dark);
}

/* --- Session bar (in masthead, on dark) --- */
.masthead-aside {
  display: grid;
  gap: var(--space-2);
  justify-items: end;
}

.session-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.session-user {
  font-family: var(--font-mono);
  font-size: var(--caption-size);
  color: var(--vv-ink-4);
}

.session-logout {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--vv-ink-4);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-on-dark);
  font-family: var(--font-sans);
  font-size: var(--caption-size);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.session-logout:hover {
  border-color: var(--vv-purple-bright);
  color: var(--vv-purple-bright);
}

/* ============================================================
   Honest empty / unknown states
   ============================================================ */
.order-row-empty {
  position: relative;
  text-align: center;
  padding: var(--space-6);
  color: var(--vv-ink-3);
  background:
    repeating-linear-gradient(135deg, rgba(221, 217, 209, 0.34) 0 1px, transparent 1px 12px),
    var(--vv-card);
}

.order-row-empty::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--vv-spec);
}

.order-row-empty-error::before {
  background: var(--vv-fail);
}

.order-row-empty-error {
  border-color: var(--vv-fail);
}

.order-row-empty-clear::before {
  background: var(--vv-spec);
}

.order-row-empty strong {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--h4-track);
  font-size: var(--h4-size);
  color: var(--vv-ink);
}

/* ============================================================
   Per-part line items
   ============================================================ */
.line-items {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.line-items li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--body-sm-size);
  border-top: var(--border-hair);
  padding-top: var(--space-1);
}

.li-name {
  color: var(--vv-ink-2);
}

.li-qty {
  color: var(--vv-ink-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Per-line ORDERED breakout in the ship cell (Jon): each part's ordered qty, aligned
   with the Parts column, instead of one rolled-up "N ordered" total. Mirrors .line-items. */
.ordered-by-line {
  list-style: none;
  margin: var(--space-2) 0 var(--space-1);
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.ordered-by-line li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: baseline;
  column-gap: var(--space-2);
  font-size: var(--body-sm-size);
  min-width: 0;
}

/* SKU/code anchor — short leading token (e.g. "501770"), never overflows. Full name
   on hover (title) + in the Parts column. */
.ordered-by-line .li-sku {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  color: var(--vv-ink-2);
  cursor: default;
}

.ordered-by-line .li-ordered {
  justify-self: end;
  color: var(--vv-ink-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Per-line slice/material detail tucked behind a click — keeps the part row clean
   while the operator can still drill into materials/slice notes/paths. */
.li-detail {
  width: 100%;
}

.li-detail > summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  list-style: revert;
}

.li-detail > summary .li-name,
.li-detail > summary .li-qty {
  display: inline;
}

.li-notes {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-2);
  color: var(--vv-ink-3);
  font-size: var(--caption-size);
  word-break: break-word;
}

/* ============================================================
   Collapsed unmatched-facts panel
   ============================================================ */
details.source-exceptions > summary {
  cursor: pointer;
  list-style: revert;
  padding: var(--space-1) 0;
}

details.source-exceptions > summary h2 {
  display: inline;
  font-size: var(--h4-size);
  letter-spacing: var(--h4-track);
}

details.source-exceptions > summary p {
  margin: var(--space-1) 0 0;
}

details.source-exceptions[open] {
  padding-bottom: var(--space-3);
}

/* Orphan/pending lane facts — ochre warn (preserved from prior app.css) */
.orphan-pending {
  color: var(--vv-warn);
  font-weight: 600;
}

/* --- Source-status dot (live=moss / stale=ochre / error=terracotta) --- */
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: var(--space-2);
  vertical-align: baseline;
  background: var(--vv-ink-4);
}

.status-dot.dot-ok {
  background: var(--vv-spec);
}

.status-dot.dot-warn {
  background: var(--vv-warn);
}

.status-dot.dot-fail {
  background: var(--vv-fail);
}

@keyframes modeSettle {
  0% {
    opacity: 0.58;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes redactSettle {
  0% {
    filter: blur(2px);
    opacity: 0.42;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}

.shell-mode-transition .tile,
.shell-mode-transition .source-exceptions,
.shell-mode-transition .board {
  animation: modeSettle 520ms var(--ease-out) both;
}

.shell-mode-transition .order-row:not(.order-row-head) {
  animation: modeSettle 620ms var(--ease-out) both;
}

.shell-redacting .order-main,
.shell-redacting .board-header {
  animation: redactSettle 560ms var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .source-pill-dot-ok::after,
  .source-pill-dot-ok .status-dot,
  .order-row.row-just-updated,
  .order-row.row-action-confirmed,
  .order-row.is-committing::after,
  .shell-mode-transition .tile,
  .shell-mode-transition .source-exceptions,
  .shell-mode-transition .board,
  .shell-mode-transition .order-row:not(.order-row-head),
  .shell-redacting .order-main,
  .shell-redacting .board-header,
  .order-row.row-command-focus {
    animation: none;
  }
}

/* --- Audit log: operator-readable activity trail --- */
.audit-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.audit-action {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: var(--border-hair);
  border-radius: var(--r-sm);
  padding: var(--space-2) var(--space-3);
  background: var(--vv-card);
  color: var(--vv-ink);
  font-size: var(--body-sm-size);
  font-weight: 700;
  text-decoration: none;
}

.audit-action:hover,
.audit-action:focus-visible {
  border-color: var(--vv-purple);
  color: var(--vv-purple-dark);
}

.audit-action-primary {
  background: var(--vv-purple);
  border-color: var(--vv-purple);
  color: var(--vv-pearl);
}

.audit-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.audit-summary span {
  display: block;
  background: var(--vv-card);
  border: var(--border-hair);
  border-radius: var(--r-sm);
  padding: var(--space-3);
  color: var(--vv-ink-3);
  font-size: var(--body-sm-size);
}

.audit-summary strong {
  color: var(--vv-ink);
  font-variant-numeric: tabular-nums;
}

.audit-security-notice {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) 1fr;
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-4);
  background: var(--vv-card);
  border: 1px solid var(--vv-fail);
  border-left: 4px solid var(--vv-fail);
  border-radius: var(--r-md);
  padding: var(--space-4);
}

.audit-security-notice h2 {
  color: var(--vv-fail);
}

.audit-security-notice ul {
  margin: 0;
  padding-left: var(--space-4);
}

.audit-security-notice li {
  margin: 0 0 var(--space-1);
}

.audit-row {
  grid-template-columns:
    minmax(145px, 0.85fr)
    minmax(110px, 0.75fr)
    minmax(130px, 0.75fr)
    minmax(120px, 0.8fr)
    minmax(160px, 1.1fr)
    minmax(105px, 0.65fr)
    minmax(80px, 0.55fr)
    minmax(190px, 1.2fr);
  min-height: 44px;
  align-items: center;
}

.audit-row span {
  font-size: var(--body-sm-size);
  word-break: break-word;
}

.audit-row-head span {
  color: var(--vv-ink-3);
}

.audit-row-head small {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--caption-size);
  letter-spacing: 0;
  text-transform: none;
}

.audit-actor,
.audit-target {
  display: grid;
  gap: 2px;
}

.audit-actor a {
  font-weight: 700;
}

.audit-actor small,
.audit-target small {
  color: var(--vv-ink-3);
}

.audit-target strong {
  font-family: var(--font-mono);
  font-size: var(--caption-size);
  color: var(--vv-ink);
}

.audit-cell-muted {
  color: var(--vv-ink-3);
}

.audit-browser {
  font-family: var(--font-mono);
  font-size: var(--caption-size);
}

@media (max-width: 820px) {
  .audit-toolbar,
  .audit-summary,
  .audit-security-notice,
  .audit-row {
    grid-template-columns: 1fr;
  }

  .audit-toolbar {
    justify-content: flex-start;
  }

  .audit-action {
    width: 100%;
    justify-content: center;
  }

  .audit-row:not(.order-row-head) {
    gap: var(--space-2);
  }
}

/* ============================================================
   First-visit guided tour
   ============================================================ */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(39, 28, 55, 0.34);
  pointer-events: none;
}

.tour-focus {
  position: relative;
  z-index: 91;
  border-radius: var(--r-sm);
  outline: 3px solid color-mix(in srgb, var(--vv-warn) 78%, white);
  outline-offset: 4px;
  box-shadow: 0 0 0 9999px rgba(39, 28, 55, 0.10), 0 14px 44px rgba(39, 28, 55, 0.22);
}

.tour-popover {
  position: fixed;
  z-index: 92;
  width: min(360px, calc(100vw - 32px));
  padding: var(--space-4);
  background: var(--vv-surface);
  color: var(--vv-ink);
  border: var(--border-hair);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}

.tour-popover h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--h3-size);
  letter-spacing: 0;
}

.tour-popover p {
  margin: 0;
  color: var(--vv-ink-2);
  line-height: 1.45;
}

.tour-kicker {
  margin-bottom: var(--space-2) !important;
  color: var(--vv-ink-3) !important;
  font-family: var(--font-mono);
  font-size: var(--body-xs-size);
  text-transform: uppercase;
}

.tour-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.tour-actions span {
  display: flex;
  gap: var(--space-2);
}

.tour-actions button {
  border: 1px solid var(--vv-line);
  border-radius: var(--r-sm);
  background: var(--vv-surface-2);
  color: var(--vv-ink);
  padding: 8px 11px;
  font: inherit;
  cursor: pointer;
}

.tour-actions button[data-tour-next] {
  background: var(--vv-purple);
  border-color: var(--vv-purple);
  color: white;
}

.tour-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tour-actions button:focus-visible {
  outline: 2px solid var(--vv-warn);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .tour-popover {
    left: 16px !important;
    right: 16px;
    width: auto;
  }
}