/* ============================================================================
   admin.css — CONSOLE UI LAYER

   A companion to the corporate identity sheet (public/ci.css, public/exat-ci.css
   — whichever `ci.stylesheet` binds). Every colour, face, weight and radius
   routes through a token defined there, so binding a different identity re-skins
   this whole console without a line changing here. No colour and no font-family
   literal belongs in this file; CiAssetSpec fails the build for one.

   The one exception is the font-size ladder in §0 below: sizes are global rather
   than per-identity, so a re-skin cannot re-size the console or ship a scale with
   holes in it. A *rule* still spends a token and never a literal.

   Design intent: clean, professional, objective. A modern data-table admin with
   a few restrained terminal cues — the mono face carries machine values (IDs,
   timestamps, db bindings) and a single "$" command sigil marks the page;
   everything structural speaks in the sans face.

   §1–§6 follow designui/ as given. §7 onward are components designui does not
   cover; each is marked AUTHORED and derives its shape from the rules above it
   (a dialog is a panel, a field is the search box, a toggle is the switch) so
   the whole console stays one language.
   ========================================================================== */

/* ── §0 type scale ─────────────────────────────────────────────────────────
   The one place a font *size* is stated. Colour, face and weight belong to the
   identity sheet; the ladder does not — a brand re-skins the console, it does
   not re-size it, and per-identity scales drifted in practice (the EXAT sheet
   silently lacked five of the tokens the rules below spend, so page titles and
   icon glyphs fell back to the inherited size under that brand alone).

     Heading  XL 28 · L 24 · M 18 · S 16
     Body/Label  L 14 · M 13 · S 12 · XS 11 · Caption 10

   A rule spends one of these tokens and never a literal; CiAssetSpec fails the
   build for a `font-size:` with a number on the right of it, here or in a view. */
:root {
  --fs-caption: 11px;   --fs-3xs:  10px;    /* Caption                        */
  --fs-2xs:  12px;                          /* Label XS                       */
  --fs-xs:   13px;                          /* Label / Body S                 */
  --fs-sm:   14px;                          /* Label / Body M                 */
  --fs-md:   15px;                          /* Label / Body L                 */
  --fs-base: 17px;                          /* base body                      */
  --fs-h-s:  17px;                          /* Heading S                      */
  --fs-h-m:  19px;   --fs-lg:   18px;       /* Heading M                      */
  --fs-h-l:  24px;                          /* Heading L                      */
  --fs-h-xl: 28px;   --fs-xl:   28px;       /* Heading XL                     */

  --fs-meta:  11px;   /* table meta / remark lines    */
  --fs-code:  12px;   /* panel titles, filter selects */
  --fs-input: 16px;   /* form controls — under 16px iOS Safari zooms on focus */
  --fs-glyph: 22px;   /* .icon--bare, a glyph with no button box */

  /* icon glyphs — sized to the control they sit in, not to the type scale */
  --fs-glyph-xs: 12px;   /* segmented control */
  --fs-glyph-sm: 14px;   /* button, search, row action */
  --fs-glyph-md: 15px;   /* sidebar nav item */
  --fs-glyph-lg: 16px;   /* standalone icon button */
  --fs-title:    24px;   /* page title — Heading L on this scale */

  /* Portal (login / services) — the one page set that sizes itself in rem. */
  --fs-portal-title: 1.7rem;
  --fs-portal-lede:  1.02rem;
  --fs-portal-input: 1rem;
  --fs-portal-note:  .85rem;
  --fs-portal-label: .82rem;
}

/* ── §1 reset & base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* The browser's `[hidden] { display: none }` is a user-agent rule, so any author
   rule that sets `display` on the same element beats it and `element.hidden = true`
   silently fails to hide. Stated once, with !important, so a later and more
   specific `display` cannot win either. Keep it. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--navy-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--ci-link); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--sky-400);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mono { font-family: var(--mono); }
.muted { color: var(--ink-dim); }

/* AUTHORED — keyboard skip target, a primary button that drops in on focus */
.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 1000;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--btn-ink);
  background: var(--green-400);
  transform: translateY(-150%);
  transition: transform .15s ease-out;
}
.skip-link:focus { transform: translateY(0); text-decoration: none; }

/* ── §2 app shell ─────────────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  min-height: 100vh;
}

/* ── §3 sidebar ───────────────────────────────────────────────────────────── */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px 18px;
  background: var(--surface-chrome);
  border-right: 1px solid var(--line);
}
/* The management console reads a step larger than the admin one. Keyed off its own sidebar
   modifier so the page needs no wrapper class and no inline <style> of its own. */
body:has(.sidebar--mgmt) { font-size: var(--fs-base); }

.brand {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px 14px;
  font-family: var(--mono);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  letter-spacing: var(--track-1);
  border-bottom: 1px solid var(--line);
}
.brand:hover { text-decoration: none; }
.brand__bracket { color: var(--ink-dim); }
.brand__n       { color: var(--ink); }
.brand__zero    { color: var(--green-400); }
.brand__slash   { color: var(--sage-400); }
.brand__code    { color: var(--sky-400); }

/* whoami identity chip — a quiet terminal cue */
.identity {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 10px;
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  line-height: var(--lh-tight);
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.identity__path { color: var(--ink-faint); letter-spacing: var(--track-grip); }
.identity__cmd  { color: var(--sage-400); }
.identity__arrow{ color: var(--ink-faint); padding: 0 2px; }
.identity__user { color: var(--ink); font-weight: var(--fw-medium); }

/* nav */
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__legend {
  padding: 4px 10px 6px;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-6);
  text-transform: uppercase;
  color: var(--sage-400);
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  color: var(--ink-dim);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  transition: background-color .12s ease, color .12s ease;
}
.nav-item:hover { background: var(--hover-sky); color: var(--ink); text-decoration: none; }
.nav-item__icon { display: inline-grid; place-items: center; width: 20px; height: 18px; flex: none; opacity: .9; font-size: var(--fs-glyph-md); }
.nav-item__icon i { line-height: 1; }
.nav-item__arrow { color: var(--ink-faint); font-family: var(--mono); padding: 0 1px; }
.nav-item__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item.is-active {
  background: var(--active-bg);
  color: var(--active-text);
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 3px; top: 50%;
  width: 3px; height: 17px;
  transform: translateY(-50%);
  border-radius: var(--r-pill);
  background: var(--ci-blue);
}
.nav-item.is-active .nav-item__icon { opacity: 1; color: var(--ci-blue); }
.nav-item.is-active .nav-item__label { color: var(--ci-blue); }
.nav-item.is-active .nav-item__arrow { color: currentColor; }

/* AUTHORED — the masterdata console lists groups with a row count */
.nav__count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.nav-item.is-active .nav__count { color: currentColor; }

/* AUTHORED — a long nav (masterdata groups) scrolls inside the sidebar */
.sidebar__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.sidebar__spacer { flex: 1 1 auto; }

.sidebar__footer { display: flex; flex-direction: column; gap: 12px; }

/* theme segmented control — a <fieldset>, so its UA defaults are reset here: min-inline-size
   is min-content on a fieldset and would stop the grid from shrinking with the sidebar. */
.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 3px;
  margin: 0;
  min-inline-size: 0;
  border: 1px solid var(--line);
  background: var(--surface-inset);
  border-radius: var(--r);
}
.segmented__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 4px;
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--ink-dim);
  transition: background-color .12s ease, color .12s ease;
}
.segmented__opt i { font-size: var(--fs-glyph-xs); }
.segmented__opt:hover { color: var(--ink); }
.segmented__opt.is-on {
  background: var(--navy-850);
  color: var(--ink);
  box-shadow: 0 1px 2px var(--shadow-edge);
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-1);
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn i { font-size: var(--fs-glyph-sm); }
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--primary {
  background: var(--green-400);
  color: var(--btn-ink);
  border-color: var(--btn-line);
}
.btn--primary:hover { filter: saturate(1.05) brightness(1.06); }

.btn--ghost {
  background: transparent;
  color: var(--ink-dim);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--hover-sky); color: var(--ink); }

.btn--danger {
  width: 100%;
  background: transparent;
  color: var(--crimson);
  border-color: var(--danger-line);
}
.btn--danger:hover { background: var(--danger-bg); }

/* AUTHORED — a destructive confirm inside a dialog is a solid fill, not the
   sidebar's full-width outline button */
.btn--danger-solid {
  width: auto;
  background: var(--crimson);
  color: var(--danger-on);
  border-color: var(--crimson);
}
.btn--danger-solid:hover { filter: brightness(1.08); }

/* AUTHORED — compact variant for toolbars */
.btn--sm { padding: 6px 11px; font-size: var(--fs-2xs); }

/* ── §4 main column ───────────────────────────────────────────────────────── */
.main { display: flex; flex-direction: column; min-width: 0; background: var(--ci-white); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  background: var(--navy-900);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  color: var(--ink-dim);
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.icon-btn:hover { background: var(--hover-sky); color: var(--ink); border-color: var(--line); text-decoration: none; }
.icon-btn i { font-size: var(--fs-glyph-lg); }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }

/* AUTHORED — state colours for the row toggles (disable / archive) */
.icon-btn--on  { color: var(--green-400); }
.icon-btn--off { color: var(--ink-faint); }
.topbar .icon-btn:has(.fa-house), .crumbs .icon-btn:has(.fa-house) { color: var(--ci-link); }
.topbar .identity__user, .portal-bar .identity__user { color: var(--ci-blue); }
.topbar .identity__cmd:has(.fa-right-from-bracket), .portal-bar .identity__cmd:has(.fa-right-from-bracket) { color: var(--ci-crimson); }
.icon-btn:has(.fa-eye) { color: var(--green-400); }
.icon-btn:has(.fa-pen-to-square) { color: var(--sky-400); }
.icon-btn:has(.fa-trash), .icon-btn--danger { color: var(--crimson); }
.icon-btn--danger:hover { color: var(--crimson); border-color: var(--danger-line); background: var(--danger-bg); }

.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--ink-dim);
}
.crumbs__sep  { color: var(--ink-faint); }
.crumbs__here { color: var(--ink); }
.crumbs a { color: var(--ci-link); }

.topbar__spacer { flex: 1 1 auto; }

/* search */
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(340px, 38vw);
  padding: 0 10px;
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-dim);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.search:focus-within {
  border-color: var(--sky-400);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.search i { font-size: var(--fs-glyph-sm); flex: none; }
.search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-sm);
}
.search input::placeholder { color: var(--ink-faint); }
.search input:focus { outline: none; }
.search__key {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--ink-dim);
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface-deep);
}

/* content area */
.content { padding: 24px 28px 40px; }

.page-head { margin-bottom: 18px; }
.page-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  color: var(--ink);
}
.page-title__sigil {
  font-family: var(--mono);
  font-weight: var(--fw-bold);
  color: var(--green-400);
}
.count {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--sky-400);
  padding: 2px 8px;
  border: 1px solid var(--line-blue);
  border-radius: var(--r-pill);
  background: var(--active-bg);
}
.page-sub {
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--ink-dim);
  max-width: 68ch;
}

/* ── §5 table panel ───────────────────────────────────────────────────────── */
.panel {
  background: transparent;
  border: none;
  border-radius: var(--r-lg);
  box-shadow: none;
  /* `clip`, not `hidden`: both trim the table to the rounded corner, but `hidden` also makes the
     panel a scroll container, which re-anchors the sticky table header to a box that never
     scrolls — i.e. silently stops it sticking. `clip` leaves the page as the scrollport. */
  overflow: clip;
}

.panel__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.panel__tools .spacer { flex: 1 1 auto; }
.filter {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--surface-inset);
  border-radius: var(--r-sm);
}
.filter button {
  padding: 5px 11px;
  border-radius: var(--r-xs);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--ink-dim);
}
.filter button.is-on { background: var(--navy-850); color: var(--ink); box-shadow: 0 1px 2px var(--shadow-edge); }

/* The wrapper provides horizontal scrolling for wide grids.
   (Note: Making it a scroll container means the sticky header now anchors to this wrapper,
   so we set top: 0 to stick to the top of the wrapper.) */
.table-scroll { width: 100%; overflow-x: auto; scrollbar-width: none; }
.table-scroll::-webkit-scrollbar { display: none; }

.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.grid th, .grid td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.grid th:first-child, .grid td:first-child {
  padding-left: 22px;
  position: sticky;
  left: 0;
  z-index: 2;
}
.grid th:last-child,  .grid td:last-child  { padding-right: 22px; }

/* The header reads at body size and bold rather than as a small tracked label: every table in
   the console is one .grid, so this rule is the only place a column heading is styled. */
.grid thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  /*background: var(--surface-deep);*/
  color: var(--blue-700);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-5);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}

.grid thead th:first-child {
  z-index: 3;
}

.grid tbody td:first-child { background: transparent; }

.grid tbody tr { border-top: 1px solid var(--line); }
.grid tbody tr:first-child { border-top: 0; }

/* AUTHORED — a row group is one record spread over 2–3 <tr>s (detail, then a
   description or audit line). It highlights and hides as one unit. */
.grid tbody.row-group { border-top: 1px solid var(--line); }
.grid tbody.row-group:first-of-type { border-top: 0; }
.grid tbody.row-group tr { border-top: 0; }
.grid tbody.row-group .row-sub > td { padding-top: 0; padding-bottom: 14px; white-space: normal; }

.col-center, .grid th.col-center, .grid td.col-center { text-align: center; }
.col-right, .grid th.col-right, .grid td.col-right { text-align: right; }
.col-org { width: 100%; white-space: normal; }

/* organization cell */
.org { display: flex; flex-direction: column; gap: 3px; }
.org__name { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--ink); }
.org__name--id { font-family: var(--mono); font-weight: var(--fw-medium); letter-spacing: 0; }
.org__name--raw {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--crimson-bright);
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
  border-radius: var(--r-xs);
  padding: 1px 6px;
  align-self: flex-start;
}
.org__desc { font-size: var(--fs-meta); color: var(--ink-dim); }
.org__desc--empty { color: var(--ink-faint); font-style: italic; }

/* mono chips (db conn / db config) */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-deep);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
}

/* author */
.author { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-dim); }
.avatar {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--r-pill);
  background: var(--active-bg);
  color: var(--sky-400);
  font-family: var(--mono);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
}
.author__name { font-family: var(--mono); font-size: var(--fs-xs); }

/* timestamp */
.ts { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-dim); }
.ts .tz { color: var(--sage-400); margin-left: 4px; }

/* AUTHORED — carried over from the previous sheet; specs assert on both names */
.md-cell-meta { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center; }
.col-right .md-cell-meta { text-align: right; }
.md-remark { margin: 0; font-size: var(--fs-meta); font-style: italic; color: var(--ink-dim); }

/* row actions */
.row-actions { display: inline-flex; gap: 4px; }
.row-actions .icon-btn { width: 30px; height: 30px; }
.row-actions .icon-btn i { font-size: var(--fs-glyph-sm); }

/* switch */
.switch { position: relative; display: inline-flex; align-items: center; }
.switch input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.switch__track {
  position: relative;
  width: 38px; height: 22px;
  border-radius: var(--r-pill);
  background: var(--surface-inset);
  border: 1px solid var(--line);
  transition: background-color .14s ease, border-color .14s ease;
}
.switch__thumb {
  position: absolute;
  top: 50%; left: 3px;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  border-radius: var(--r-pill);
  background: var(--ink-dim);
  box-shadow: 0 1px 1px var(--shadow-edge);
  transition: left .14s ease, background-color .14s ease;
}
.switch input:checked ~ .switch__track {
  background: var(--green-400);
  border-color: transparent;
}
.switch input:checked ~ .switch__track .switch__thumb {
  left: 19px;
  background: var(--btn-ink);
}
.switch input:focus-visible ~ .switch__track {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* panel footer / pagination */
.panel__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-dim);
}
.panel__foot .spacer { flex: 1 1 auto; }
.pager { display: inline-flex; gap: 4px; }
.pager button {
  min-width: 30px; height: 30px;
  padding: 0 8px;
  display: inline-grid; place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-inset);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
}
.pager button:hover:not(:disabled) { background: var(--hover-sky); color: var(--ink); }
.pager button.is-on { background: var(--green-400); color: var(--btn-ink); border-color: transparent; }
.pager button:disabled { opacity: .45; cursor: not-allowed; }

/* AUTHORED — empty state inside a panel */
.empty {
  padding: 44px 22px;
  text-align: center;
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--ink-faint);
}
td.empty { white-space: normal; }

/* ══ §7 AUTHORED — FORM FIELDS ═══════════════════════════════════════════════
   Derived from .search: the same inset well, hairline and focus ring, with a
   label above it. */
.field { display: grid; gap: 5px; min-width: 0; }
.field__key {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-3);
  color: var(--sage-400);
}
.field__required-mark { color: var(--crimson-bright); font-weight: var(--fw-bold); }
.field__val {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-input);   /* --fs-input is 16px: under that, iOS Safari zooms on focus */
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field__val::placeholder { color: var(--ink-faint); }
.field__val:focus {
  outline: none;
  border-color: var(--sky-400);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.field__val:disabled, .field__val--locked { opacity: .6; cursor: not-allowed; }
textarea.field__val { resize: vertical; min-height: 76px; line-height: var(--lh-base); }
.field__val--area { min-height: 96px; resize: vertical; }
select.field__val { width: 100%; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-grid[hidden] { display: none; }

/* AUTHORED — inline filter selects above a table (accounts console) */
.filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin: 0 0 16px; padding: 0; border: 0; min-inline-size: 0; }
.filter-field { display: flex; flex-direction: column; gap: 4px; }
.filter-field__key { font-size: var(--fs-2xs); font-weight: var(--fw-medium); letter-spacing: var(--track-3); color: var(--sage-400); }
.filter-field__sel {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-sm);
}
.filter-field__sel:hover, .filter-field__sel:focus { border-color: var(--ci-secondary); outline: none; }

/* ══ §8 AUTHORED — DIALOGS ═══════════════════════════════════════════════════
   A dialog is a .panel that floats: same surface, border and radius, with a
   deeper shadow and a scrim behind it. */
.dialog {
  width: min(92vw, 680px);
  padding: 0;
  color: var(--ink);
  background: var(--navy-850);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -20px var(--shadow-modal);
}
.dialog::backdrop { background: var(--overlay); backdrop-filter: blur(2px); }
.dialog__form { display: grid; gap: 16px; padding: 22px; margin: 0; }
.dialog__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  color: var(--ink);
}
.dialog__title::before { content: "$"; font-family: var(--mono); color: var(--green-400); }
.dialog__text { font-size: var(--fs-sm); color: var(--ink-dim); }
.dialog__check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink); }
.dialog__error {
  padding: 9px 12px;
  border: 1px solid var(--danger-line);
  border-radius: var(--r-sm);
  background: var(--danger-bg);
  font-size: var(--fs-xs);
  color: var(--crimson-bright);
}
.dialog__actions { display: flex; justify-content: flex-end; gap: 10px; margin: 0; padding: 0; }
.dialog__media { text-align: center; padding: 12px 0; }
#logoImg { max-width: 100%; max-height: 200px; border-radius: var(--r-sm); }

/* ══ §9 AUTHORED — BADGES, CARDS, LOG ════════════════════════════════════════
   A badge is a .chip carrying a status colour; a card is a small .panel. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-deep);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  white-space: nowrap;
}
.badge--ok   { color: var(--green-400); border-color: var(--ok-line); }
.badge--warn { color: var(--sand-300); border-color: var(--warn-line); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.card {
  padding: 18px;
  background: var(--navy-850);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px var(--shadow-edge);
}
.card__key { font-size: var(--fs-2xs); font-weight: var(--fw-medium); letter-spacing: var(--track-3); text-transform: uppercase; color: var(--sage-400); }
.card__metric { margin: 10px 0 2px; font-family: var(--mono); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--ink); }
.card__metric--ok   { color: var(--green-400); }
.card__metric--sky  { color: var(--sky-400); }
.card__metric--warn { color: var(--sand-300); }
.card__sub { font-size: var(--fs-xs); color: var(--ink-dim); }

.panel__body {
  margin: 0;
  padding: 18px 22px;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.log { color: var(--ink-dim); }
.log--ok   { color: var(--green-400); }
.log--sky  { color: var(--sky-400); }
.log--warn { color: var(--sand-300); }

/* ══ §10 AUTHORED — SIGN-IN & PORTAL ═════════════════════════════════════════
   The one place the mono face leads: a sign-in card that still reads as a
   terminal, built from the panel's surface and radius. */
.login { min-height: 100dvh; display: grid; grid-template-columns: 1fr 480px; }
@media (max-width: 800px) {
  .login { grid-template-columns: 1fr; }
  .login__static { display: none; }
}
.login__static {
  background: var(--surface-deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
}
.login__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 60px;
}
.login__brand {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-bottom: 24px;
  font-family: var(--mono);
  font-size: var(--fs-title);
  font-weight: var(--fw-black);
}
.login__line { margin-bottom: 24px; font-size: var(--fs-sm); color: var(--ink-dim); text-align: center; }
.login__note { margin-top: 24px; font-size: var(--fs-xs); color: var(--ink-faint); text-align: center; }
.form { display: grid; gap: 14px; }

/* passkey binding — the offer shown right after sign-in when the account has none */
.passkey__actions { display: flex; gap: 8px; margin-top: 16px; }
.passkey__actions > * { flex: 1; text-align: center; justify-content: center; }
.passkey__status { min-height: 20px; color: var(--crimson); }
.passkey__status:empty { margin-top: 0; }
.login__alt { width: 100%; margin-top: 12px; }

/* portal / services */
.portal-shell { min-height: 100vh; display: flex; flex-direction: column; }
.portal-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 28px;
  background: var(--surface-chrome);
  border-bottom: 1px solid var(--line);
}
.portal-bar__brand { display: flex; gap: 2px; font-family: var(--mono); font-size: var(--fs-lg); font-weight: var(--fw-black); }
/* language switch + whoami chip, held together at the right end of the bar */
.portal-bar__tools { display: flex; align-items: center; gap: 18px; }
.portal-main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 56px 28px 72px; }
.portal { width: 100%; max-width: 380px; }
.portal__icon { width: 60px; height: 60px; display: block; margin-bottom: 20px; color: var(--sky-400); }
.portal h2 { font-size: var(--fs-portal-title); font-weight: var(--fw-black); letter-spacing: var(--track-tight); line-height: var(--lh-tight); }
.portal__lede { margin: 8px 0 26px; font-size: var(--fs-portal-lede); line-height: var(--lh-relaxed); color: var(--ink-dim); }
.portal__note { margin-top: 24px; font-size: var(--fs-portal-note); line-height: var(--lh-base); color: var(--ink-dim); }

.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; max-width: 860px; }
.svc-card {
  display: block;
  padding: 22px;
  color: var(--ci-blue);
  background: var(--navy-850);
  border: 1px solid var(--ci-secondary);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px var(--shadow-edge);
  transition: border-color .12s ease, transform .12s ease;
}
.svc-card:hover { border-color: var(--ci-secondary); transform: translateY(-2px); text-decoration: none; }
.svc-card h2 { margin: 14px 0 6px; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ci-blue); }
.svc-card p { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ci-blue); }
.svc-icon { width: 52px; height: 52px; display: block; color: var(--sky-400); }
.denied { max-width: 540px; }
.denied .svc-icon { color: var(--crimson-bright); margin-bottom: 10px; }
.denied h2 { margin: 12px 0 8px; font-size: var(--fs-portal-title); font-weight: var(--fw-bold); }
.denied p { color: var(--ink-dim); line-height: var(--lh-relaxed); }

/* account screen (/index/account) — two independent credential cards, side by side while
   there is room for them. A .panel with padding: it holds a form, not a table. */
.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  max-width: 860px;
  margin-top: 22px;
}
.account-card { padding: 22px; }
.account-card__head { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink); }
.account-card__lede { margin: 8px 0 18px; font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-dim); }
.account-card__note { margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-dim); }
.passkey-list { display: grid; gap: 8px; margin-bottom: 16px; }
.passkey-list__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.passkey-list__meta { font-size: var(--fs-xs); color: var(--ink-dim); }
/* Both cards end on the same full-width action, whichever control the card is offering. */
.account-card__action { width: 100%; margin-top: 4px; }
/* A password field and the button that uncovers it, sharing one box. */
.field-reveal { position: relative; display: block; }
.field-reveal .field__val { width: 100%; padding-right: 38px; }
.field-reveal__btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 4px;
  color: var(--ink-faint);
  font-size: var(--fs-glyph-sm);
  cursor: pointer;
}
.field-reveal__btn:hover, .field-reveal__btn[aria-pressed="true"] { color: var(--ink); }

/* ══ §11 AUTHORED — ORG SWITCHER ═════════════════════════════════════════════
   A topbar control plus a popover that borrows the dialog's surface. */
.orgbar { position: relative; min-width: 0; }
.orgbar__line { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.orgbar__label { font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink-dim); }
.orgbar__org {
  font-family: var(--mono); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.orgbar__toggle { width: 28px; height: 28px; }
.orgbar__caret { display: block; transition: transform .15s ease; }
.orgbar__toggle[aria-expanded="true"] { background: var(--active-bg); color: var(--active-text); border-color: var(--line-blue); }
.orgbar__toggle[aria-expanded="true"] .orgbar__caret { transform: rotate(180deg); }

.orgpop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0; right: auto; bottom: auto;
  width: min(92vw, 330px);
  margin: 0; padding: 0;
  color: inherit;
  background: var(--navy-850);
  border: 1px solid var(--line);
  /*border-radius: var(--r-lg);*/
  box-shadow: 0 24px 60px -20px var(--shadow-modal);
  overflow: hidden;
}
.orgpop__head { padding: 11px 14px; background: var(--surface-deep); border-bottom: 1px solid var(--line); }
.orgpop__title { font-size: var(--fs-3xs); font-weight: var(--fw-medium); letter-spacing: var(--track-6); text-transform: uppercase; color: var(--sage-400); }
.orgpop__list { margin: 0; padding: 6px; list-style: none; max-height: 320px; overflow-y: auto; }
.orgpop__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  text-align: left;
  color: var(--ink);
  font-size: var(--fs-sm);
  transition: background-color .12s ease;
}
.orgpop__opt:hover { background: var(--hover-sky); }
.orgpop__opt.is-current { background: var(--active-bg); color: var(--active-text); }
.orgpop__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgpop__role { flex: none; font-family: var(--mono); font-size: var(--fs-2xs); color: var(--sage-400); }
.orgpop__mark { flex: none; width: 14px; color: var(--green-400); }
.orgpop__empty { padding: 16px 12px; font-size: var(--fs-xs); font-style: italic; color: var(--ink-faint); text-align: center; }

/* ══ §12 AUTHORED — ASSIGNMENT CHIPS ═════════════════════════════════════════
   Role↔account / role↔policy consoles: a subject row with its bindings as
   removable chips. The chip is .chip with a destructive hover. */
.ra-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ra-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px 3px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-deep);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}
.ra-chip:hover { border-color: var(--danger-line); background: var(--danger-bg); color: var(--crimson-bright); }
.ra-chip__x { display: inline-flex; font-size: var(--fs-3xs); color: var(--ink-faint); }
.ra-chip:hover .ra-chip__x { color: var(--crimson-bright); }
.ra-none { font-size: var(--fs-xs); font-style: italic; color: var(--ink-faint); }
.ra-checklist { display: grid; gap: 6px; max-height: min(46vh, 320px); overflow: auto; padding: 4px 2px; }
.ra-check { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); color: var(--ink); }

/* ══ §13 AUTHORED — FORM BUILDER ═════════════════════════════════════════════
   /admin/schema/builder — a field designer beside a live JSON preview. Each
   card is a panel; the preview is a .panel__body. */
.builder { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.builder__fields { display: grid; gap: 14px; }
.builder__preview { position: sticky; top: 84px; }
.builder__preview .panel__body { max-height: 70vh; overflow: auto; font-size: var(--fs-xs); }
.builder__error, .builder__ok {
  margin-bottom: 14px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.builder__error { border: 1px solid var(--danger-line); background: var(--danger-bg); color: var(--crimson-bright); }
.builder__ok { border: 1px solid var(--ok-line); color: var(--green-400); }

.field-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: var(--navy-850);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px var(--shadow-edge);
}
.field-card__head { display: flex; align-items: center; gap: 10px; }
.field-card__grip { color: var(--ink-faint); letter-spacing: var(--track-grip); cursor: grab; }
.field-card__label { font-size: var(--fs-2xs); font-weight: var(--fw-medium); letter-spacing: var(--track-3); color: var(--sage-400); }
.field-card__summary { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-dim); }
.field-card__tools { margin-left: auto; display: flex; gap: 4px; }
.field-card.is-collapsed .field-card__body { display: none; }
.field-card .val-block, .field-card .opt-block { display: none; }
.field-card.has-validation .val-block { display: grid; }
.field-card.has-options .opt-block { display: grid; gap: 8px; }
.field-card:not(.has-pattern) .pattern-field { display: none; }
.opt-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.opt-rows, .vi-rows { display: grid; gap: 8px; }
.vi-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: center; }
.vi-value-wrap.is-disabled { opacity: .5; }
.settings-row { display: grid; gap: 5px; }
.settings-row__hint { font-size: var(--fs-2xs); color: var(--ink-faint); }
.cond-badge {
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid currentColor;
  border-radius: var(--r-xs);
  font-family: var(--mono);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
}
.req-star { color: var(--crimson-bright); font-weight: var(--fw-bold); }

/* ══ §14 AUTHORED — MASTER DATA FORM ═════════════════════════════════════════
   /masterdata/form — a rendered web_form; field shells separated by hairlines. */
.mdf { display: grid; max-width: 680px; }
.f { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.f:last-of-type { border-bottom: 0; }
.f__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.f__label { font-weight: var(--fw-medium); }
.f__name { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-faint); }
.f__req { color: var(--crimson-bright); font-weight: var(--fw-bold); }
.f__help { font-size: var(--fs-xs); color: var(--ink-dim); }
.f__err { font-family: var(--mono); font-size: var(--fs-xs); color: var(--crimson-bright); }
.f__err:empty { display: none; }
.f__note { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--sand-300); }
.f__meta { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-faint); }
.choice { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); }
.choice input { accent-color: var(--green-400); }
.choicebox { display: grid; gap: 6px; justify-items: start; }
.clearlink { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-dim); text-decoration: underline; padding: 0; }
.numrow { display: flex; gap: 8px; align-items: center; }
.numrow .field__val { flex: 1; min-width: 100px; }
.stepbtn {
  width: 34px; height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  color: var(--ink-dim);
  font-family: var(--mono);
}
.stepbtn:hover { background: var(--hover-sky); color: var(--ink); }
.readout { font-family: var(--mono); font-size: var(--fs-xs); color: var(--sage-400); min-width: 48px; text-align: right; }
.rangerow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rangerow .field__val { flex: 1; min-width: 150px; }
.mdf__actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.mdf__saved { font-family: var(--mono); font-size: var(--fs-xs); color: var(--green-400); }

/* the masterdata form's boolean control — the .switch, with its legacy markup */
.tog { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.tog input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tog__track {
  position: relative;
  width: 38px; height: 22px;
  border-radius: var(--r-pill);
  background: var(--surface-inset);
  border: 1px solid var(--line);
  flex: none;
  transition: background-color .14s ease, border-color .14s ease;
}
.tog__track::after {
  content: "";
  position: absolute;
  top: 50%; left: 3px;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  border-radius: var(--r-pill);
  background: var(--ink-dim);
  transition: left .14s ease, background-color .14s ease;
}
.tog input:checked ~ .tog__track { background: var(--green-400); border-color: transparent; }
.tog input:checked ~ .tog__track::after { left: 19px; background: var(--btn-ink); }
.tog input:focus-visible ~ .tog__track { box-shadow: 0 0 0 3px var(--focus-ring); }

/* ══ §15 AUTHORED — MASTER DATA TABLE ════════════════════════════════════════ */
.icon-btn[data-md-view] { color: var(--ci-success); }
.icon-btn[data-md-copy] { color: var(--ci-link); }
.icon-btn:not(:disabled):has(.fa-table-list) { color: var(--ci-link); }

.md-code {
  display: inline-block;
  padding: 5px 8px;
  background: var(--surface-deep);
  border-radius: var(--r-xs);
  font-family: var(--mono);
  font-size: var(--fs-code);
  color: var(--ink);
}
.md-json {
  margin: 0;
  max-height: min(60vh, 420px);
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-deep);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  white-space: pre;
}
.md-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.md-col { display: grid; gap: 16px; align-content: start; }
.md-json-field { grid-template-rows: auto 1fr; height: 100%; }
.md-json-field .field__val { height: 100%; min-height: 220px; resize: none; }
#mdDialog { width: min(94vw, 900px); }

/* ══ §16 AUTHORED — WORKFLOW DIAGRAM ═════════════════════════════════════════
   The renderer paints the graph itself, taking every colour from ci.css through the tokens
   workflow.js reads off a probe element; these rules only give the drawing somewhere to sit and
   colour the legend that explains its outlines. */
.wf-canvas {
  padding: 18px;
  overflow: auto;
  white-space: normal;
  min-height: 140px;
}
.wf-canvas svg { max-width: 100%; height: auto; }

.wf-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.wf-legend__item {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-deep);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: var(--fs-3xs);
  white-space: nowrap;
}
.wf-legend__item--created    { border-left-color: var(--sky-400); }
.wf-legend__item--inprogress { border-left-color: var(--sand-300); }
.wf-legend__item--finished   { border-left-color: var(--green-400); }
.wf-legend__item--archived   { border-left-color: var(--sage-400); }
.wf-legend__item--deleted    { border-left-color: var(--crimson); }

/* ── §17 responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .builder { grid-template-columns: minmax(0, 1fr); }
  .builder__preview { position: static; }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .search { width: 200px; }
  .content { padding: 20px 16px 32px; }
  .topbar { padding: 12px 16px; flex-wrap: wrap; }
  .field-grid, .md-grid { grid-template-columns: 1fr; }
  .nav-item { padding: 12px 11px; }
  #mdDialog { width: 94vw; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .svc-card:hover { transform: none; }
}