/* GENERATED — do not edit by hand.
   Source of truth: design/rebrand-handoff/assets/components.css
   Regenerate: python3 design/rebrand-handoff/assets/sync_tokens.py */
/* Stark Suite — shared component recipes (HANDOFF.md §7). v4 · 1 Sep 2026.
   Source of truth: design/rebrand-handoff/assets/components.css
   Synced into every app by sync_tokens.py — apps import their local copy AFTER tokens.css.
   Rule: an app never re-types a recipe from this file. It adds the class in JSX
   (or, for generated dashboards, the generator carries the same rules).

   CHROME PRINCIPLE (Brian, 1 Sep 2026) — GOLD PLATES, RED SEALS.
   Gold is the metal: frames, lines, active state, focus, money.
   Red marks a POINT that means something: the reactor's seal ring, ACT / alert.
   Red never means "current" and is never decoration. design/CHROME-PRINCIPLES.md.

   CARDS (Brian, 1 Sep — "backplate, plain plate", design/backplate-options.html):
   Every card is a rounded quiet frame (--r-card = 10px, one value suite-wide).
   The top KPI strip of a screen is the HERO: the same card sitting on a solid
   gold BACKPLATE — a 3px lip visible along the bottom and right, like paper on
   metal — with a stronger gold frame. NO red on any card: red appears on a card
   only as a live ACT / alert chip, so it keeps its one meaning.
   The plate is a box-shadow, so it follows the corner radius exactly at any
   radius and needs no overlays, no stacking tricks, no overflow rules.
   Retired: the 2px top plate line and the weld tick (30–31 Aug) — a flat line
   over a curved frame never sat right, and a decorative red dot read as a warning. */

/* ── Card — quiet frame (the default for every card) ─────────────────────── */
.mk-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  position: relative;
  padding: 13px 16px;
  transition: background .5s ease, border-color .5s ease, box-shadow .5s ease;
}

/* ── Card — hero (top KPI strip of a screen) — sits on a gold backplate ──── */
.mk-card--hero {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: var(--card-shadow), 3px 3px 0 0 var(--gold-lo);
}
.mk-hero { padding: 20px 18px 16px; }         /* hero tile spacing (use with --hero) */

/* ── Card — table (quiet + clipped so row hover/selection stays inside) ──── */
.mk-tcard { padding: 4px 0 0; overflow: hidden; }
/* .mk-card--quiet kept as a no-op alias: quiet is the default */

/* ── linked / hoverable card — gold answers, never red ───────────────────── */
.mk-card.is-link { cursor: pointer; }
.mk-card.is-link:hover { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.mk-card--hero.is-link:hover { border-color: var(--gold); }

/* ── Sidebar / nav item — ONE grammar for the suite ──────────────────────────
   Dot = arc (the reactor light, information). Active = --t-hi text, gold-tinted
   row, gold flick 28×2 under the label. Hover = a 16px flick. Nothing red. */
.mk-navitem {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  color: var(--t-mid);
  transition: color .15s, background .5s ease;
}
.mk-navitem::before {
  content: "";
  position: absolute; left: 9px; bottom: 1px;
  width: 0; height: 2px; border-radius: 2px;
  background: var(--flick);
  transition: width .18s ease;
}
.mk-navitem:hover { color: var(--t-hi); }
.mk-navitem:hover::before { width: 16px; }
.mk-navitem.active, .mk-navitem[aria-current="page"] {
  color: var(--t-hi);
  background: var(--item-active-bg);
}
.mk-navitem.active::before, .mk-navitem[aria-current="page"]::before { width: 28px; }
.mk-navdot { width: 6px; height: 6px; border-radius: 50%; background: var(--arc); flex-shrink: 0; }

/* ── Section label (§7) — gold text in both rooms, gold hairline ─────────── */
.mk-seclab {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-lab); font-size: .62rem; font-weight: var(--w-lab);
  letter-spacing: .22em; text-transform: uppercase; color: var(--seclab);
}
.mk-seclab::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* section flick line (Edith / ULTRON headers) */
.mk-secflick { height: 2px; width: 28px; border-radius: 2px; background: var(--flick); }

/* ── Hero rule (under the wordmark on Command) ───────────────────────────── */
.mk-hero-rule { height: 2px; background: var(--hero-rule); }

/* ── Focus (§7) — one rule for the suite ─────────────────────────────────── */
:where(a, button, [tabindex], input, select, textarea):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}