/* why one file for four pages: principle 4 of docs/architecture/simulator.md
   says the harness looks like Aleta, and the only way three harness pages and
   the integration panel can look like one product is to share the token block
   of docs/aleta/ui-styling.md § 7 verbatim. It ships with the standalone,
   so it lives here; ops/scripts/build-ui links it into every dist directory
   and the standalone's image copies it, so no shipped UI names a harness
   path. Nothing page-specific belongs here. */

:root {
  --aleta-ink: #070604; --aleta-midnight: #224950; --aleta-turquoise: #22d2c4;
  --aleta-rose: #f3dedb; --aleta-rose-hover: #eed2cd; --aleta-wave: #faeeec;
  --background: #ffffff; --foreground: #070604;
  --card: #ffffff; --card-foreground: #070604;
  --popover: #ffffff; --popover-foreground: #070604;
  --primary: #070604; --primary-foreground: #ffffff;
  --secondary: #f5f8ff; --secondary-foreground: #070604;
  --muted: #f5f8ff; --muted-foreground: #9ba0ae; --placeholder: #c8cad0;
  /* between muted and foreground: secondary text that must stay legible, the
     time part of an instant (W2.4). Ours, not the product's token block. */
  --subtle-foreground: #5f6470;
  --accent: var(--aleta-rose); --accent-foreground: #070604;
  --destructive: #e7000b;
  --border: #eff2f5; --input: #f1f2f4; --input-focus: #d4d7dd;
  --ring: var(--aleta-turquoise);
  /* the gap between a page's sections, everywhere (W3.36) */
  --section-gap: 3rem;
  --surface-frame: #faf9f8; --row-hover-bg: #f8f9fc; --tab-hover-bg: #f6f7fa;
  --chart-positive: #59b99c; --chart-negative: #f86983; --chart-warning: #ca8a04;
  --shadow-dropdown: 0 1px 3px 0 hsl(0 0% 0% / 0.03), 0 16px 40px 0 hsl(0 0% 0% / 0.05);
  --radius: 0.75rem; --radius-sm: 0.25rem; --radius-md: 0.375rem;
  --radius-lg: 0.5rem; --radius-xl: 0.75rem;
  /* the two bars have fixed heights, so everything under them sits at a known offset (W3.38) */
  --app-gutter-x: 1.25rem; --app-topbar-h: 3.5rem; --app-clients-h: 3rem;
  /* the app's page width, its only width rule (W2.1): tweak it here */
  --page-max-width: 1600px;
  /* R1 of docs/ui/README.md: the page background of a screen the outside
     world serves (the consent page, the framed linking page), so it is never
     mistaken for ours. Nothing of ours uses it. */
  --outside-world: #f3efe9;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "Geist Mono", SFMono-Regular, Menlo, monospace;
}
.dark {
  color-scheme: dark;
  --aleta-turquoise: #2dd4c0; --aleta-rose: #15453c; --aleta-rose-hover: #1c4a44;
  --background: #0b1517; --foreground: #e8f1ef;
  --card: #122024; --card-foreground: #e8f1ef;
  --popover: #0b1517; --popover-foreground: #e8f1ef;
  --primary: #e8f1ef; --primary-foreground: #0b1517;
  --secondary: #16282d; --secondary-foreground: #e8f1ef;
  --muted: #0e1a1d; --muted-foreground: #9ba0ae; --placeholder: #48484e;
  --subtle-foreground: #c4ccce;
  --accent-foreground: #e8f1ef; --destructive: #ff8a8a;
  --border: #21353b; --input: #21353b; --input-focus: #3d5c64;
  --surface-frame: #0e1a1d; --row-hover-bg: #122024; --tab-hover-bg: #122024;
  --chart-positive: #3be8c2; --chart-negative: #ff8a8a;
  --outside-world: #221e1a;
  --shadow-dropdown: 0 1px 3px 0 hsl(0 0% 0% / 0.4), 0 16px 40px 0 hsl(0 0% 0% / 0.6);
}

*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
html { font-family: var(--font-sans); }
body { margin: 0; background: var(--background); color: var(--foreground); font-size: .875rem; line-height: 1.5; }
:focus-visible { outline: 2px solid color-mix(in oklab, var(--ring) 50%, transparent); outline-offset: -1px; }
::selection { background: color-mix(in oklab, var(--aleta-turquoise) 30%, transparent); }
.page { width: 100%; max-width: 980px; margin: 0 auto; padding: 1.5rem var(--app-gutter-x) 2.5rem; }
h1 { font-size: 1.25rem; line-height: 1.625rem; font-weight: 700; margin: 0 0 1rem; }
h2 { font-size: 1rem; line-height: 1.25rem; font-weight: 700; margin: 1.5rem 0 .75rem; }
h3 { font-size: .75rem; font-weight: 500; color: var(--muted-foreground); margin: 0 0 .5rem; }
.muted { color: var(--muted-foreground); }
.micro { font-size: .75rem; line-height: 1rem; color: var(--muted-foreground); }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.panel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); padding: 1.25rem; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: .8125rem; }
thead th { height: 30px; padding: .5rem 1rem .5rem 0; font-size: .75rem; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; border-bottom: 1px solid var(--border); }
tbody td { padding: .75rem 1.5rem .75rem 0; border-bottom: 1px solid var(--border); }
tbody tr { transition: background-color 120ms; }
tbody tr:hover { background: var(--row-hover-bg); }
tbody tr:last-child td { border-bottom: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; height: 2rem; padding: 0 .625rem; border: 1px solid transparent; border-radius: var(--radius-lg); font: inherit; font-size: .875rem; font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer; transition: all 120ms; background: var(--primary); color: var(--primary-foreground); }
.btn:hover { background: color-mix(in srgb, var(--primary) 80%, transparent); }
.btn:active { transform: translateY(1px); }
.btn:disabled { pointer-events: none; opacity: .5; }
.btn--outline { background: var(--background); color: var(--foreground); border-color: var(--border); }
.btn--outline:hover, .btn--ghost:hover { background: var(--muted); }
.btn--ghost { background: transparent; color: var(--foreground); }
.btn--destructive { background: color-mix(in srgb, var(--destructive) 10%, transparent); color: var(--destructive); }
.btn--sm { height: 1.75rem; font-size: .8rem; border-radius: var(--radius-md); }
.btn--lg { height: 2.25rem; }
label { display: block; font-size: .875rem; line-height: 1.0625rem; font-weight: 500; }
input, select, textarea { width: 100%; height: 2rem; min-width: 0; padding: .25rem .625rem; border: 1px solid var(--input); border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: .875rem; outline: none; transition: border-color 120ms; }
textarea { height: auto; }
/* a radio or a checkbox keeps its own size beside its label, wherever it
   sits: the box rule above is for text, dates and selects */
input[type="radio"], input[type="checkbox"] { flex: none; width: auto; height: auto; margin: 0; padding: 0; accent-color: var(--primary); }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--input-focus); }
input[aria-invalid="true"] { border-color: var(--destructive); }
input:disabled { cursor: not-allowed; opacity: .5; background: color-mix(in srgb, var(--input) 50%, transparent); }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field + .field { margin-top: 1rem; }
/* the label of a field that is a group of controls (a tab bar, a range), not one control */
.field__label { font-size: .875rem; line-height: 1.0625rem; font-weight: 500; }
.field__error { font-size: .8125rem; line-height: 1.0625rem; color: var(--destructive); }
.pill { display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .5rem; border: 1px solid var(--border); border-radius: 9999px; background: var(--card); font-size: .75rem; line-height: 1; font-weight: 500; color: var(--foreground); white-space: nowrap; }
.pill__dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--muted-foreground); flex: none; }
.pill__dot--ok { background: var(--chart-positive); }
.pill__dot--warn { background: var(--chart-warning); }
.pill__dot--bad { background: var(--chart-negative); }
.pill__dot--off { background: color-mix(in srgb, var(--muted-foreground) 40%, transparent); }
.tabs { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 6px; background: var(--surface-frame); }
.tabs button { width: auto; height: auto; border: 0; background: transparent; border-radius: 6px; padding: .375rem .625rem; font-size: .8125rem; line-height: 1.0625rem; color: var(--muted-foreground); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--background); color: var(--foreground); }
.overlay { background: var(--popover); color: var(--popover-foreground); border-radius: var(--radius-xl); padding: 1rem; box-shadow: var(--shadow-dropdown); }
.empty, .error-state { display: flex; flex-direction: column; align-items: center; gap: .375rem; padding: 2rem 0; text-align: center; }
.empty > strong, .error-state > strong { font-size: .875rem; line-height: 1.125rem; font-weight: 500; }
.empty > span, .error-state > span { max-width: 44ch; font-size: .875rem; line-height: 1rem; color: var(--muted-foreground); }

/* chrome every harness page repeats: the top bar with the clock, rows of
   controls, notices and the monospace ids the simulator names rows by. */
.topbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .625rem; flex-wrap: nowrap; overflow: hidden; height: var(--app-topbar-h); box-sizing: border-box; padding: 0 var(--app-gutter-x); background: var(--card); border-bottom: 1px solid var(--border); }
/* the Aleta wordmark (aleta-logo.svg, beside this file in every dist/) at the
   bar's text height, its width following */
.topbar__brand { display: block; flex: none; height: 1.25rem; width: auto; margin-right: .5rem; }
.topbar__clock { display: inline-flex; align-items: baseline; gap: .5rem; font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9375rem; }
.topbar__clock time { font-family: var(--font-mono); }
.topbar__clock--paused { padding: .125rem .5rem; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-foreground); }
.topbar__spacer { margin-left: auto; }
.row { display: flex; gap: .375rem; align-items: center; flex-wrap: wrap; }
.row > input, .row > select { width: auto; }
.row + .row { margin-top: .375rem; }
.notice { margin: .625rem 0; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-frame); font-size: .8125rem; }
.notice.bad { border-color: color-mix(in srgb, var(--destructive) 35%, var(--border)); color: var(--destructive); }
.link { color: var(--foreground); cursor: pointer; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 4px; }
.link:hover { text-decoration-color: var(--foreground); }
code, .mono { font-family: var(--font-mono); font-size: .75rem; }
/* the one instant component (ui/format.ts `time`), in /app/, /sim/ and /dev/:
   a stamp never breaks across lines; the T and the Z are transparent, still
   in the text so a copy reads 2026-10-05T12:32:53Z; the time part a darker
   grey than the date, so the date reads first and the time stays legible (W2.4);
   the separators at 10px so the gap stays narrow (W3.1). The date component
   (ui/format.ts `date`, iso--date) shares the one-line rule (W3.3). */
.iso { white-space: nowrap; font-variant-numeric: tabular-nums; }
.iso__sep { color: transparent; font-size: 10px; }
.iso__time { color: var(--subtle-foreground); }