/* common/theme/tokens.css — the DEFAULT theme: every design token, and the ONLY file in the platform that holds
   colour, font or shadow literals (agents/theming.md). Ported 1:1 from aotc-main's design system
   (packages/ui/styles.css). A dealer overrides any token — never a component — through the theme handler
   (theme.go): its `token -> value` map is appended to this file as a second :root block. */

/* The platform's own faces, self-hosted (fonts/NOTICES.md). */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Figures keep IBM Plex Sans in every theme: a theme that sets another face for letters lists "Plex Figures" FIRST in its --font-sans, and this unicode-range family
   answers for digits, currency and figure punctuation only (the letters fall through to the next face). It is the same Plex Sans file as above. */
@font-face {
  font-family: "Plex Figures";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-var.woff2") format("woff2");
  unicode-range: U+0020-0040, U+005B-0060, U+007B-007E, U+00A3-00B1, U+2013-2014, U+2212; /* digits, currency, % . , : / + - and the like */
}

:root {
  /* The DEFAULT theme — mapped 1:1 from aotc-main's design system (packages/ui/styles.css :root) so the
     pages match the existing mockups and the platform's styling. A dealer overrides any of these (see
     agents/theming.md); the values below are the starting point, not a constraint. */

  /* Base */
  --background: #ffffff;
  --foreground: #111827;
  --card: #ffffff;
  --card-border: #e5e7eb;
  --muted: #6b7280;
  --accent: #000000;
  --accent-hover: #1f2937;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;

  /* Surface hierarchy */
  --surface-subtle: #f8fafc;
  --surface-inset: #f1f5f9;
  --border-strong: #cbd5e1;
  --ring: #111827;

  /* Type */
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-heading: var(--font-sans); /* the page title and card titles; a theme may give them a face of their own (Darko: Yanone Kaffeesatz) */
  --text-scale-small: 0.875;   /* Small text (the A's in the top bar): the root size is this times Medium's (--text-sm) */
  --text-scale-large: 1.25;    /* … and Large */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 0.9375rem;

  /* Density — the compact spacing (Arun, 2026-11-04: "use the same spacing for today's theme as well"); a theme may loosen or tighten it */
  --pad-page: 1rem 1rem 3rem;
  --pad-bar: 0.5rem 1rem;
  --gap-stack: 0.75rem;
  --pad-card-h: 0.75rem 0.75rem 0;
  --pad-card-b: 0.625rem 0.75rem 0.75rem;
  --pad-card-f: 0.5rem 0.75rem;
  --gap-field: 0.5rem;
  --pad-input: 0.3125rem 0.5rem;
  --pad-btn: 0.3125rem 0.625rem;
  --pad-cell: 0.375rem 0.625rem;
  --pad-head-cell: 0.3125rem 0.625rem;

  /* The action colour — the current page, the primary button, the active tab. initial = "not set": it follows the viewer's persona (base.css falls back to
     var(--persona)). A theme sets all three to make actions one colour for everyone (Mono: black; Azzurro: blue; Darko: red-orange). */
  --action: initial;
  --action-hover: initial;
  --action-on: initial;
  --rail-height: 3px;       /* the coloured rail along the top of a page (the persona's); a theme may set 0 */
  --logo-bg: initial;       /* the dealer's tile in the bar: initial = the persona gradient (base.css); a theme sets one colour */

  /* Component style — what a button, a field, a card, a table head and the top bar look like. The defaults are the platform's look; a theme sets them to be
     flat (Azzurro), raised (Darko) or inked (Mono). A token left `initial` is "not set": base.css falls back to the action colour. */
  --btn-radius: var(--radius-sm);
  --btn-border: 1px solid var(--border-strong);
  --btn-bg: var(--card);
  --btn-fill: none;                       /* a background-image: a gradient for a raised button */
  --btn-fg: var(--foreground);
  --btn-weight: 500;
  --btn-case: none;                       /* text-transform: uppercase for a Material button */
  --btn-tracking: normal;                 /* letter-spacing */
  --btn-shadow: none;
  --btn-text-shadow: none;
  --btn-hover-bg: var(--btn-bg);
  --btn-hover-fill: var(--btn-fill);
  --btn-hover-fg: var(--btn-fg);
  --btn-hover-shadow: var(--btn-shadow);
  --btn-primary-fill: none;
  --btn-primary-shadow: none;
  --btn-primary-hover-shadow: initial;    /* initial = --btn-primary-shadow */
  --btn-primary-border: initial;          /* initial = the action colour */
  --btn-primary-hover-bg: initial;        /* initial = --action-hover */
  --btn-primary-hover-fg: initial;        /* initial = --action-on */
  --btn-primary-hover-fill: none;
  --field-border: 1px solid var(--border-strong);
  --field-bg: var(--card);
  --field-shadow: none;
  --field-focus-border: var(--ring);
  --field-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);
  --frame-border: var(--card-border);     /* a card, a table's box, a card's foot */
  --th-bg: var(--surface-subtle);         /* a table's head */
  --th-fg: var(--muted);
  --th-rule: var(--card-border);
  --bar-fill: var(--card);                /* the top bar: a colour or a gradient */
  --bar-rule: var(--card-border);
  --bar-shadow: none;
  --nav-fg: var(--foreground);
  --nav-text-shadow: none;

  /* Radius / space */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;

  /* Elevation */
  --shadow-float: 0 1px 2px rgb(15 23 42 / 6%), 0 4px 12px rgb(15 23 42 / 4%);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  /* The veil behind a modal (the record pop-up) */
  --backdrop: rgb(15 23 42 / 45%);

  /* Direction & P&L — the ONE green/red pair */
  --up: #047857;
  --down: #be123c;
  --up-soft: #ecfdf5;
  --up-border: #a7f3d0;
  --down-soft: #fff1f2;

  /* Micro / density */
  --text-micro: 0.625rem;
  --tracking-micro: 0.08em;
  --col-head-size: 0.71875rem;
  --col-head-weight: 500;
  --col-head-tracking: 0;
  --col-head-case: none;
  --table-cell: 0.8125rem;
  --table-cell-lh: 1.25rem;
  --table-row-pad: 0.5rem;
  --text-data: 0.8125rem;

  /* Status */
  --warn: #f59e0b;
  --warn-ink: #b45309;
  --warn-soft: #fffbeb;
  --warn-border: #fcd34d;
  --danger-solid: #ef4444;
  --danger-ink: #dc2626;
  --danger-soft: #fef2f2;
  --danger-border: #fca5a5;

  /* Neutral chrome + faint/placeholder ink */
  --org-accent: #64748b;
  --org-accent-hover: #475569;
  --org-accent-ring: #64748b;
  --org-accent-soft: #f1f5f9;
  --faint: #9ca3af;
  --accent-ink: #ffffff;
  --logo-ink: #ffffff; /* text on the dealer's logo tile */
  --placeholder: #b9c0ca;

  /* Persona colours — the DEFAULT chrome per persona (design doc D12): purple super-admin, blue dealer,
     green customer. Overridable per dealer like every other token. */
  --persona-superadmin: #6d28d9;
  --persona-superadmin-hover: #5b21b6;
  --persona-superadmin-on: #ffffff; /* text on the persona colour */
  --persona-superadmin-soft: #f5f3ff;
  --persona-superadmin-border: #ddd6fe;
  --persona-superadmin-ink: #4c1d95;
  --persona-dealer: #1d4ed8;
  --persona-dealer-hover: #1e40af;
  --persona-dealer-on: #ffffff;
  --persona-dealer-soft: #eff6ff;
  --persona-dealer-border: #bfdbfe;
  --persona-dealer-ink: #1e3a8a;
  --persona-customer: #475569;
  --persona-customer-hover: #334155;
  --persona-customer-on: #ffffff;
  --persona-customer-soft: #f8fafc;
  --persona-customer-border: #cbd5e1;
  --persona-customer-ink: #1e293b;
}

/* common/theme/base.css — the components every feature's pages share. Tokens only: a colour, font or shadow
   literal here is a bug (agents/theming.md). A feature's own page layout lives in the feature. */

* { box-sizing: border-box; }
html, body {
  margin: 0; background: var(--background); color: var(--foreground);
  font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* The text size a person picked (@aotc/chrome sets data-text-size on <html>; Medium sets nothing): the root size, so every rem follows.
   Medium's root is --text-sm (above: 14px, so 1rem is 14px on this site), and Small and Large are that times a factor — a percentage of
   the browser's 16px would leave Small equal to Medium. */
html[data-text-size="small"] { font-size: calc(var(--text-sm) * var(--text-scale-small)); }
html[data-text-size="large"] { font-size: calc(var(--text-sm) * var(--text-scale-large)); }
.mono { font-family: var(--font-mono); }
.hidden { display: none; }

/* Forms */
.label { display: block; margin-bottom: 0.375rem; font-size: var(--text-xs); font-weight: 500; color: var(--muted); }
.input {
  width: 100%; border: var(--field-border); padding: var(--pad-input); font-size: var(--text-sm);
  border-radius: var(--radius-sm); background: var(--field-bg); color: var(--foreground); font-family: inherit; box-shadow: var(--field-shadow);
}
.input::placeholder { color: var(--faint); }
.input:focus { outline: none; border-color: var(--field-focus-border); background: var(--card); box-shadow: var(--field-focus-shadow); }

/* Actions */
.btn-solid {
  width: 100%; margin-top: 1rem; padding: 0.5rem 0.75rem; font: inherit; font-weight: 600; font-size: var(--text-sm);
  color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-md); cursor: pointer;
}
.btn-solid:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-solid:disabled { opacity: 0.4; cursor: not-allowed; }
.link { color: var(--accent); font-size: var(--text-xs); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* Feedback */
.error { margin-top: 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--danger-border); border-radius: var(--radius-md); background: var(--danger-soft); color: var(--danger-ink); font-size: var(--text-xs); }
.spinner { height: 1rem; width: 1rem; border-radius: 9999px; border: 2px solid var(--card-border); border-top-color: var(--foreground); animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Key / value list */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 0.75rem; margin: 0; }
.kv dt { color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.kv dd { margin: 0; font-size: var(--text-sm); word-break: break-all; }
.kv dd.ok { color: var(--up); font-weight: 500; }

/* ── Persona (design doc D12) ────────────────────────────────────────────────
   A screen names its viewer's persona once — <body data-persona="superadmin|dealer|customer"> — and every
   piece of persona chrome below uses the --persona family. The colour is identity, never status. */
[data-persona="superadmin"] {
  --persona: var(--persona-superadmin); --persona-hover: var(--persona-superadmin-hover);
  --persona-on: var(--persona-superadmin-on); --persona-soft: var(--persona-superadmin-soft);
  --persona-border: var(--persona-superadmin-border); --persona-ink: var(--persona-superadmin-ink);
}
[data-persona="dealer"] {
  --persona: var(--persona-dealer); --persona-hover: var(--persona-dealer-hover);
  --persona-on: var(--persona-dealer-on); --persona-soft: var(--persona-dealer-soft);
  --persona-border: var(--persona-dealer-border); --persona-ink: var(--persona-dealer-ink);
}
[data-persona="customer"] {
  --persona: var(--persona-customer); --persona-hover: var(--persona-customer-hover);
  --persona-on: var(--persona-customer-on); --persona-soft: var(--persona-customer-soft);
  --persona-border: var(--persona-customer-border); --persona-ink: var(--persona-customer-ink);
}

/* ── Page chrome: the persona rail, the top bar (the dealer · the nav · who), the page head ─────────── */
.persona-bar { position: fixed; inset: 0 0 auto 0; height: var(--rail-height); background: var(--persona); z-index: 20; }
/* The bar and the banner under it stay at the top while the page scrolls (above the page's own sticky bits, below a pop-up). */
.sticky-head { position: sticky; top: 0; z-index: 25; background: var(--background); }
.topbar { border-bottom: 1px solid var(--bar-rule); background: var(--bar-fill); box-shadow: var(--bar-shadow); }
.topbar-in { max-width: 1180px; margin: 0 auto; padding: var(--pad-bar); display: flex; align-items: center; gap: 1.25rem; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo {
  height: 2rem; width: 2rem; border-radius: var(--radius-md); color: var(--persona-dealer-on);
  font-weight: 700; font-size: 0.78571rem; display: inline-flex; align-items: center; justify-content: center;
  background: var(--logo-bg, linear-gradient(135deg, var(--persona-dealer), var(--persona-dealer-ink))); /* the dealer's tile */
}
.brand .name { font-weight: 600; font-size: var(--text-sm); line-height: 1.2; }
.brand .site { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
/* The nav: buttons (pills), as aotc-main's top bar — inset grey; the current page filled with the persona colour. */
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  display: inline-block; padding: 0.375rem 0.625rem; border-radius: var(--radius-sm); font-size: var(--text-xs);
  font-weight: 500; line-height: 1.25; color: var(--nav-fg); background: var(--surface-inset); text-decoration: none; text-shadow: var(--nav-text-shadow);
  transition: background-color .15s, color .15s;
}
.nav a:hover { background: color-mix(in srgb, var(--surface-inset) 70%, var(--border-strong)); }
.nav a[aria-current="page"] { background: var(--action, var(--persona)); color: var(--action-on, var(--persona-on)); }
.nav a[aria-current="page"]:hover { background: var(--action-hover, var(--persona-hover)); }
.who { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); }
/* Text size: three A's, each in its own size. The sizes are px on purpose (px: fixed): they show the choice, so they do not follow it. */
.textsize { display: inline-flex; align-items: baseline; gap: 2px; padding: 2px 4px; border: 1px solid var(--card-border); border-radius: var(--radius-md); background: var(--card); }
.textsize button {
  border: 0; background: none; font: inherit; font-weight: 600; line-height: 1; color: var(--muted); cursor: pointer;
  padding: 3px 5px; border-radius: var(--radius-sm); display: inline-flex; align-items: baseline;
}
.textsize button[data-size="small"] { font-size: 12px; /* px: fixed */ }
.textsize button[data-size="medium"] { font-size: 15px; /* px: fixed */ }
.textsize button[data-size="large"] { font-size: 19px; /* px: fixed */ }
.textsize button:hover { background: var(--surface-subtle); color: var(--foreground); }
.textsize button[aria-checked="true"] { background: var(--persona-soft); color: var(--persona-ink); }
.textsize button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.persona-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--persona-border); background: var(--persona-soft); color: var(--persona-ink);
  font-family: var(--font-mono); font-size: 0.71429rem; letter-spacing: .06em; text-transform: uppercase;
}
.persona-chip .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--persona); }

/* The signed-in account: the user's org mark + their name; the menu holds the role, email and sign out.
   The trigger shows only the org and the person (the role is in the menu), as aotc-main's account menu. */
.account { position: relative; }
.account-trigger {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem;
  border: 1px solid var(--card-border); border-radius: var(--radius-md); background: var(--card);
  color: var(--foreground); font: inherit; font-size: var(--text-xs); cursor: pointer;
}
.account-trigger:hover { background: var(--surface-subtle); }
.org-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
  border-radius: var(--radius-sm); border: 1px solid var(--persona-border); background: var(--persona-soft);
  color: var(--persona-ink); font-family: var(--font-mono); font-size: 0.64286rem; font-weight: 700; letter-spacing: .04em;
  object-fit: cover;
}
.account-name { font-weight: 500; }
/* The persona chip under the name, inside the button (page-head.html option D): the name and the chip stack. */
.account-id { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.15; }
.account-id .persona-chip { padding: 0 6px; font-size: 0.64286rem; }
.account-chev { width: 12px; height: 12px; fill: none; stroke: var(--faint); stroke-width: 1.6; }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 0.375rem); z-index: 30; width: 16rem; padding: 0.375rem 0;
  border: 1px solid var(--card-border); border-radius: var(--radius-md); background: var(--card);
  box-shadow: var(--shadow-float);
}
.account-head { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--card-border); }
.account-head .name { font-size: var(--text-sm); font-weight: 600; }
.account-head .role { margin-top: 2px; font-size: 0.78571rem; color: var(--muted); }
.account-head .email { margin-top: 2px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.account-item {
  display: block; width: 100%; padding: 0.375rem 0.75rem; border: 0; background: none; text-align: left;
  font: inherit; font-size: var(--text-xs); color: var(--foreground); cursor: pointer;
}
.account-item:hover { background: var(--surface-subtle); }

.page { max-width: 1180px; margin: 0 auto; padding: var(--pad-page); }
.eyebrow { font-family: var(--font-mono); font-size: 0.78571rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; }
.eyebrow a { color: inherit; }
.head h1 { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; margin: 0 0 4px; letter-spacing: -.01em; }
.head .sub { color: var(--muted); margin: 0; max-width: 720px; }
.muted { color: var(--muted); }

/* ── Layout: a main column + an aside ──────────────────────────────────────── */
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap-stack); margin-top: var(--gap-stack); align-items: start; }
@media (max-width: 980px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.stack { display: flex; flex-direction: column; gap: var(--gap-stack); min-width: 0; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card { border: 1px solid var(--frame-border); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-sm); }
.card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: var(--pad-card-h); }
.card-h h2 { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; margin: 0 0 3px; }
.card-h .sub { margin: 0; font-size: var(--text-xs); color: var(--muted); }
.card-b { padding: var(--pad-card-b); }
.card-f { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: var(--pad-card-f); border-top: 1px solid var(--frame-border); background: var(--surface-subtle); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* ── Chips (status — never the persona colour) ─────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.82143rem; font-weight: 500; padding: 2px 8px;
  border-radius: 999px; border: 1px solid var(--card-border); color: var(--muted); background: var(--card); white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.chip.ok { color: var(--up); border-color: var(--up-border); background: var(--up-soft); }
.chip.warn { color: var(--warn-ink); border-color: var(--warn-border); background: var(--warn-soft); }
.chip.req { color: var(--danger-ink); border-color: var(--danger-border); background: var(--danger-soft); }

/* ── Form fields (with .label / .input above) ──────────────────────────────── */
.field { margin-bottom: var(--gap-field); }
.field:last-child { margin-bottom: 0; }
.select {
  width: 100%; border: var(--field-border); padding: var(--pad-input); font-size: var(--text-sm);
  border-radius: var(--radius-sm); background: var(--field-bg); color: var(--foreground); font-family: inherit; box-shadow: var(--field-shadow);
}
.select:focus { outline: none; border-color: var(--field-focus-border); background: var(--card); box-shadow: var(--field-focus-shadow); }
.input.mono, .select.mono { font-family: var(--font-mono); font-size: var(--text-xs); }
/* Fields are white with a firm edge (fields.html option A, Arun 2026-10-28): grey means read-only or disabled. */
.input:hover:not(:disabled):not([readonly]):not(:focus):not([aria-invalid="true"]), .select:hover:not(:disabled):not(:focus) { border-color: var(--muted); }
.input[readonly] { background: var(--surface-subtle); border-color: var(--card-border); }
.input:disabled, .select:disabled { background: var(--surface-inset); border-color: var(--card-border); color: var(--faint); cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--danger-border); background: var(--danger-soft); }
.hint { margin: 5px 0 0; font-size: 0.82143rem; color: var(--muted); }
.field-error { margin: 5px 0 0; font-size: 0.82143rem; color: var(--danger-ink); }

/* ── Buttons (actions on the LEFT); the primary action is the persona's ────── */
.btn {
  font: inherit; font-size: var(--text-xs); font-weight: var(--btn-weight); text-transform: var(--btn-case); letter-spacing: var(--btn-tracking); padding: var(--pad-btn); border-radius: var(--btn-radius);
  border: var(--btn-border); background-color: var(--btn-bg); background-image: var(--btn-fill); color: var(--btn-fg);
  box-shadow: var(--btn-shadow); text-shadow: var(--btn-text-shadow); cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s;
}
.btn:hover:not(:disabled) { background-color: var(--btn-hover-bg); background-image: var(--btn-hover-fill); color: var(--btn-hover-fg); box-shadow: var(--btn-hover-shadow); }
.btn.primary {
  background-color: var(--action, var(--persona)); background-image: var(--btn-primary-fill); color: var(--action-on, var(--persona-on));
  border-color: var(--btn-primary-border, var(--action, var(--persona))); box-shadow: var(--btn-primary-shadow);
}
.btn.primary:hover:not(:disabled) {
  background-color: var(--btn-primary-hover-bg, var(--action-hover, var(--persona-hover))); background-image: var(--btn-primary-hover-fill);
  color: var(--btn-primary-hover-fg, var(--action-on, var(--persona-on))); border-color: var(--btn-primary-border, var(--action-hover, var(--persona-hover)));
  box-shadow: var(--btn-primary-hover-shadow, var(--btn-primary-shadow));
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* An icon-only button — a file row's view and download. Square, no text: the name is aria-label + title. */
.btn.icon { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; text-transform: none; }
.btn.icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Tables ────────────────────────────────────────────────────────────────── */
.tablebox { border: 1px solid var(--frame-border); border-radius: var(--radius-md); overflow: auto; }
/* A long table scrolls inside its box; the header stays in view. */
.tablebox.scroll { max-height: 28rem; }
/* A blotter with expandable records needs room for a record's detail; it still scrolls past the page. */
.tablebox.scroll.tall { max-height: 44rem; }
.tablebox.scroll thead th { position: sticky; top: 0; z-index: 1; }
/* A table that fills the window (opt-in: a page whose table is its main thing — super-admin Organizations; Arun, 2026-11-12, rendering
   features/org-admin/organizations/docs/mockups/table-fill.html). The page that holds one is exactly one window tall under the bar (--chrome-top, set by the chrome); every
   box between the page and the table passes the height down, the table box takes what the rest of the page leaves, never less than 12rem, and scrolls inside with its head pinned.
   If the rest is taller than the window the table stays at 12rem and the page scrolls. Other tables keep the .scroll cap. */
.page:has(.tablebox.fill) { display: flex; flex-direction: column; height: calc(100vh - var(--chrome-top, 3.5rem)); min-height: 0; }
.page:has(.tablebox.fill) :is(div, section):has(.tablebox.fill) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.tablebox.fill { flex: 1 1 0; min-height: 12rem; }
.tablebox.fill thead th { position: sticky; top: 0; z-index: 1; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table thead th {
  text-align: left; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .06em; color: var(--th-fg); background: var(--th-bg);
  border-bottom: 1px solid var(--th-rule); padding: var(--pad-head-cell); white-space: nowrap;
}
.table td { padding: var(--pad-cell); border-bottom: 1px solid var(--card-border); vertical-align: top; font-size: var(--text-xs); }
.table tr:last-child td { border-bottom: 0; }
.table .strong { font-weight: 500; font-size: var(--text-sm); }
.table .sub { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); margin-top: 1px; }
.table .num { font-family: var(--font-mono); white-space: nowrap; }

/* ── Notes and notices ─────────────────────────────────────────────────────── */
.legend { margin: 14px 0 0; font-size: 0.82143rem; color: var(--muted); }
.legend b { color: var(--foreground); font-weight: 500; }
.unset { color: var(--faint); font-style: italic; }
.notice { border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 14px 16px; background: var(--surface-subtle); }
.notice strong { display: block; font-size: var(--text-sm); margin-bottom: 2px; }
.notice p { margin: 0; font-size: var(--text-xs); color: var(--muted); }
.notice.err { border-color: var(--danger-border); background: var(--danger-soft); }
.notice.err strong { color: var(--danger-ink); }

/* ── Field grids, sub-headings, action rows ─────────────────────────────────── */
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 14px; }
.subhead { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 22px 0 10px; }
.subhead:first-child { margin-top: 0; }
/* The required / mandatory mark — a field label's, or a mandatory parameter's (its title explains it on hover). */
.req { color: var(--danger-ink); }
.req[title] { cursor: help; }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.actions .input { flex: 1; min-width: 16rem; }
.actions .end, .actions.end { margin-left: auto; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); cursor: pointer; }
.toggle input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--persona, var(--accent)); }
.brand-logo.lg { height: 3rem; width: 3rem; font-size: var(--text-sm); }
/* A customer's tile is the customer persona's green (Arun, 2026-10-28: "Make the customer's logo green"). */
.brand-logo.customer {
  color: var(--persona-customer-on);
  background: var(--logo-bg, linear-gradient(135deg, var(--persona-customer), var(--persona-customer-ink)));
}

/* ── Tables: group rows, inputs in cells ───────────────────────────────────── */
.table tr.group td {
  background: var(--surface-subtle); font-size: 0.82143rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); padding: 6px 12px;
}
.table .input, .table .select { padding: 0.375rem 0.5rem; font-size: var(--text-xs); }
.table .input.narrow { width: 6.5rem; }
.table .actions { flex-wrap: nowrap; }

/* ── Notices: status variants (never the persona colour) ───────────────────── */
.notice.warn { border-color: var(--warn-border); background: var(--warn-soft); }
.notice.warn strong { color: var(--warn-ink); }
.notice.ok { border-color: var(--up-border); background: var(--up-soft); }
.notice.ok strong { color: var(--up); }

/* ── Tabs ───────────────────────────────────────────────────────────────────
   A tab is a page-level view switch (the audit screen's Audit | Traceability). It is a button, not a link:
   the page's address does not change, and the view is client state. The active underline is the persona's. */
.tabs { display: flex; align-items: center; gap: 1.25rem; border-bottom: 1px solid var(--card-border); margin-top: 1.5rem; }
.tab {
  margin-bottom: -1px; padding: 0.25rem 0 0.5rem; border: 0; border-bottom: 2px solid transparent; background: none;
  font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--muted); cursor: pointer;
  text-decoration: none;
}
.tab:hover:not(:disabled) { color: var(--foreground); }
.tab[aria-selected="true"],
.tab[aria-current="page"] { color: var(--foreground); border-bottom-color: var(--action, var(--persona, var(--accent))); }
.tab:disabled { color: var(--faint); cursor: not-allowed; }
.tab .chip { margin-left: 0.375rem; vertical-align: 1px; }

/* ── A filter bar: fields on one line (wrapping); the actions sit at the end ── */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin-bottom: 1rem; }
.filters.tight { margin-bottom: 0.5rem; }
.filters .field { margin: 0; flex: 1 1 10rem; min-width: 9rem; }
.filters .field.wide { flex: 2 1 18rem; }
/* A single tick beside a label, in a filter row (the audit page's Hide notifications). */
.check { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.filters .field.narrow { flex: 0 1 8rem; min-width: 7rem; }
.filters .actions { margin-left: auto; }

/* ── A table row that expands to its record ───────────────────────────────── */
.row-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem;
  margin-right: 0.5rem; padding: 0; border: 1px solid var(--card-border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--muted); cursor: pointer; vertical-align: -0.375rem;
}
.row-toggle:hover { background: var(--surface-inset); color: var(--foreground); }
.row-toggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .15s; }
.row-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.table tr.expanded td { border-bottom: 0; }
.table tr.detail > td { padding: 0; background: var(--surface-subtle); border-bottom: 1px solid var(--card-border); }
.detail-in {
  display: grid; grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.4fr); gap: 1.5rem;
  padding: 0.875rem 1rem 1.125rem 2.5rem; border-top: 1px dashed var(--card-border);
}
@media (max-width: 760px) { .detail-in { grid-template-columns: minmax(0, 1fr); } }
.detail-in > div > .subhead:first-child { margin-top: 0; }

/* Row tones: identity for an act-as row, status for a warning or alert record. */
.table tr.tone-info td:first-child { box-shadow: inset 3px 0 0 var(--persona, var(--accent)); }
.table tr.tone-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.table tr.tone-alert td:first-child { box-shadow: inset 3px 0 0 var(--danger-solid); }

/* ── A detail section's head (a label with its disclosure) ─────────────────── */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.section-head .subhead { margin: 0 0 0.625rem; }
/* A section that follows another in an expanded record gets air; the first one sits at the top. */
.detail-in .section-head { margin-top: 1.375rem; }
.detail-in > div > .section-head:first-child { margin-top: 0; }
.link-btn {
  border: 0; background: none; padding: 0; font: inherit; font-size: var(--text-xs); font-weight: 500;
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.link-btn:hover { color: var(--accent-hover); }

/* ── A JSON tree (a record's layout, collapsible) ─────────────────────────── */
.json-tree { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: 0.82143rem; line-height: 1.65; }
.json-tree ul { list-style: none; margin: 0; padding-left: 1.125rem; border-left: 1px dashed var(--card-border); }
.json-tree li { position: relative; }
.json-caret, .json-caret-space { display: inline-block; width: 0.875rem; height: 0.875rem; }
.json-caret {
  margin: 0; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer;
  vertical-align: -0.125rem; line-height: 1;
}
.json-caret:hover { color: var(--foreground); }
.json-caret svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .15s; }
.json-caret[aria-expanded="false"] svg { transform: rotate(-90deg); }
.json-key { color: var(--foreground); font-weight: 500; }
.json-punct { color: var(--muted); }
.json-string { color: var(--muted); }
.json-number, .json-boolean { color: var(--foreground); }
.json-null { color: var(--faint); font-style: italic; }
.json-count { margin-left: 0.375rem; color: var(--faint); font-family: var(--font-sans); font-size: 0.75rem; }

/* ── A record's raw detail ────────────────────────────────────────────────── */
.code {
  margin: 0; padding: 0.625rem 0.75rem; overflow: auto; max-height: 14rem; background: var(--surface-inset);
  border: 1px solid var(--card-border); border-radius: var(--radius-sm); font-family: var(--font-mono);
  font-size: 0.82143rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}

/* ── Steps: a numbered checklist; the current step wears the persona (D12) ─── */
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--card-border); }
.steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps .n {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--card); font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.steps li[aria-current="step"] .n { border-color: var(--action, var(--persona)); background: var(--action, var(--persona)); color: var(--action-on, var(--persona-on)); }
/* A finished step: its number becomes a small green check (the ok chip's colours). */
.steps li.done .n { border-color: var(--up-border); background: var(--up-soft); color: var(--up); font-family: var(--font-sans); font-weight: 600; }
.steps .t { font-size: var(--text-xs); font-weight: 500; }
.steps .d { font-size: 0.82143rem; color: var(--muted); }
.steps .chip { margin-left: auto; align-self: flex-start; }

/* ── A modal: one card over the page — the record pop-up (Arun, 2026-10-28: "a reusable modal component … when a row
   is selected, displays the product details and param as one card"). The page behind stays put; the modal scrolls.
   It sits below the top nav ("make sure it is placed below top Nav"): the frame sets --modal-top to the top bar's
   bottom edge when it opens (0 once the bar has scrolled away), so the nav stays in view and usable. */
.modal-backdrop {
  position: fixed; inset: var(--modal-top, 0) 0 0 0; z-index: 40; display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 24px; background: var(--backdrop); overflow: auto;
}
.modal-backdrop.hidden { display: none; }
.modal-card { width: min(1120px, 100%); box-shadow: var(--shadow-float); }
.modal-close {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--radius-md);
  background: none; color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.modal-close:hover { background: var(--surface-inset); color: var(--foreground); }
.table tr.selectable { cursor: pointer; }
.table tr.selectable:hover td { background: var(--surface-subtle); }

/* the azzurro theme */
/* Azzurro — a calm sky blue on white, from HTML5 UP's "Fractal" (CC BY 3.0, credit: HTML5 UP, html5up.net): its blue #4696e5 and light tints #b5d5f5 / #d1e5f9,
   its #e6e6e6 hairlines and 6px corners. Letters in Nunito Sans, figures in IBM Plex Sans. White on #4696e5 is only 3.1:1, so solid fills use #2a78c8 (4.6:1).
   Our own tokens; no Fractal code or images. Rendering: docs/mockups/mono-theme.html (approved by Arun, 2026-11-04). Its component style is "flat" (below). */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/nunito-sans-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --font-sans: "Plex Figures", "Nunito Sans", Arial, sans-serif;
  --foreground: #1f2933; --muted: #6b7280; --card-border: #e6e6e6; --border-strong: #c6c6c6;
  --surface-subtle: #f7fafe; --surface-inset: #eef5fc;
  --accent: #2a78c8; --accent-hover: #1f64ad; --ring: #4696e5;
  --action: #2a78c8; --action-hover: #1f64ad; --action-on: #ffffff;
  --rail-height: 0px; --logo-bg: #2a78c8;
  --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.375rem;
  --shadow-sm: none;
  /* flat: bold borderless buttons (the secondary a 2px grey ring, the primary solid blue), fields a 2px inset ring that turns blue on focus, no shadows */
  --pad-btn: 0.5rem 1rem;
  --btn-border: 0 solid transparent; --btn-bg: transparent; --btn-fg: #6b7280; --btn-weight: 700;
  --btn-shadow: inset 0 0 0 2px #e6e6e6; --btn-hover-fg: #2a78c8; --btn-hover-shadow: inset 0 0 0 2px #b5d5f5;
  --field-border: 0 solid transparent; --field-shadow: inset 0 0 0 2px #e6e6e6;
  --field-focus-border: transparent; --field-focus-shadow: inset 0 0 0 2px #4696e5;
  --th-bg: var(--surface-inset);
  --persona-superadmin: #5b5bd6; --persona-superadmin-soft: #ecebfd; --persona-superadmin-border: #b3b2f0; --persona-superadmin-ink: #2e2e8f;
  --persona-dealer: #2a8fe0;     --persona-dealer-soft: #e6f2fd;     --persona-dealer-border: #8fc0f0;     --persona-dealer-ink: #124f8c;
  --persona-customer: #12a594;   --persona-customer-soft: #def6f2;   --persona-customer-border: #86d9cc;   --persona-customer-ink: #0b5a4f;
}