/* ============================================================================
   IFTFC Master Console — the operator's admin for every client form.

   Built on the same "Industry" design system as the client-facing forms:
   Barlow Condensed over Barlow, square frames, hairline rules, "+" registration
   marks, nothing decorative that is not structural.

   Adapted for a console rather than a document. Three deliberate differences
   from the form:

     1. Density. The form is thumb-driven: 15px body, 46px controls. This is a
        desk tool used daily, so 13.5px body, 32px controls, 34px table rows.
     2. Figure and ground invert. The form floats white cards on grey. Here
        white is the continuous working surface and grey is the chrome — the
        rail, the header strip, the page margins.
     3. Registration marks are rationed. They mark singular framed objects —
        the sign-in card, the guarantee panel, a true empty state. On every
        panel they become wallpaper and stop meaning anything.

   Every colour, size and space comes from the tokens in :root.
   ========================================================================= */

/* — Barlow, latin subset, SIL Open Font License 1.1 (see fonts/OFL.txt) — */
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/barlow-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/barlow-condensed-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/barlow-condensed-600.woff2') format('woff2');
}

:root {
  /* Ground and ink. White is the work surface; grey is the chrome around it. */
  --color-bg: #ececed;
  --color-paper: #ffffff;
  --color-text: #1d1f20;
  --color-divider: rgba(29, 31, 32, 0.16);
  --color-hairline: rgba(29, 31, 32, 0.09);

  /* Accent — IFTFC's own steel. Deliberately NOT any client's brand colour:
     this console serves many firms and must never look like one of them. */
  --color-accent: #3d5a6c;
  --color-accent-100: #eef2f4;
  --color-accent-200: #dbe3e8;
  --color-accent-300: #b5c5cf;
  --color-accent-400: #8098aa;
  --color-accent-500: #5a7688;
  --color-accent-600: #344d5c;
  --color-accent-700: #2a3f4b;
  --color-accent-800: #21323c;
  --color-accent-900: #19262e;
  --color-accent-line: rgba(61, 90, 108, 0.42);
  --color-accent-wash: rgba(61, 90, 108, 0.055);
  --color-accent-tint: rgba(61, 90, 108, 0.075);

  /* Neutral ramp */
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  /* Semantic status roles. Four, and no more — a fifth would start to decorate.
     danger and warn are different roles, not shades: danger means irreversible,
     warn means look at this. */
  --color-ok: #2f6b4f;
  --color-ok-wash: rgba(47, 107, 79, 0.08);
  --color-ok-line: rgba(47, 107, 79, 0.36);
  --color-warn: #8a6224;
  --color-warn-wash: rgba(138, 98, 36, 0.08);
  --color-warn-line: rgba(138, 98, 36, 0.36);
  --color-danger: #8a2b20;
  --color-danger-wash: rgba(138, 43, 32, 0.06);
  --color-danger-line: rgba(138, 43, 32, 0.4);

  --font-heading: 'Barlow Condensed', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Half the form's spacing scale — this is a dense tool. */
  --space-1: 3px;
  --space-2: 6px;
  --space-3: 9px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-8: 28px;
  --space-10: 36px;

  --radius-md: 4px;
  --shadow-sm: 0 1px 2px rgba(43, 43, 45, 0.14);
  --shadow-md: 0 6px 22px rgba(43, 43, 45, 0.18);

  --rail-w: 232px;
  --control-h: 32px;
  --row-h: 34px;
  --pad: 18px;
  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: rgba(61, 90, 108, 0.22); }

/* ── Blueprint frame ─────────────────────────────────────────────────────
   The wireframe object. Corner marks are added only where an object is
   singular and deserves the ceremony — never on a routine panel. */
.blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; background: var(--color-paper); }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: rgba(29, 31, 32, 0.5); pointer-events: none;
}
.blueprint > .corner::before,
.blueprint > .corner::after { content: ''; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

/* ── Type roles ──────────────────────────────────────────────────────────── */
.kicker {
  font-family: var(--font-heading); font-weight: 600; font-size: 10px; line-height: 1.2;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--color-accent);
}
.kicker-muted { color: var(--color-neutral-600); }
.block-label {
  font-family: var(--font-heading); font-weight: 600; font-size: 10px; line-height: 1.2;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-neutral-700);
}
.page-title {
  font-family: var(--font-heading); font-weight: 600; font-size: 19px; line-height: 1.15;
  letter-spacing: -0.005em; margin: 0;
}
.section-title {
  font-family: var(--font-heading); font-weight: 600; font-size: 15px; line-height: 1.2;
  letter-spacing: 0.005em; margin: 0;
}
.muted { color: var(--color-neutral-700); }
.mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: -0.01em; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ── Shell ───────────────────────────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; align-items: stretch; }
@supports (min-height: 100svh) { .shell { min-height: 100svh; } }
.shell[hidden] { display: none; }

/* ── Left rail ───────────────────────────────────────────────────────────── */
.rail {
  width: var(--rail-w); flex: none;
  background: var(--color-bg);
  border-right: 1px solid var(--color-divider);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
@supports (height: 100svh) { .rail { height: 100svh; } }

.rail-head { padding: 18px var(--space-5) 16px; }
.rail-mark {
  display: flex; align-items: baseline; gap: 7px;
  font-family: var(--font-heading); font-weight: 600; font-size: 17px;
  letter-spacing: 0.02em; color: var(--color-text);
}
.rail-mark b { color: var(--color-accent); font-weight: 600; }
.rail-sub { margin-top: 3px; }

.rail-nav { flex: 1; overflow-y: auto; padding: 0 var(--space-3); }
.rail-group {
  padding: 14px var(--space-2) 5px;
  font-family: var(--font-heading); font-weight: 600; font-size: 9.5px;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--color-neutral-600);
}
.rail-link {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 0 var(--space-3); height: 31px;
  background: none; border: 0; border-left: 2px solid transparent;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  color: var(--color-neutral-800); text-align: left; cursor: pointer;
}
.rail-link:hover { background: var(--color-accent-tint); color: var(--color-text); }
.rail-link[aria-current='page'] {
  background: var(--color-paper); border-left-color: var(--color-accent);
  color: var(--color-text); font-weight: 600;
}
.rail-link .ico { flex: none; width: 15px; color: var(--color-neutral-600); }
.rail-link[aria-current='page'] .ico { color: var(--color-accent); }
.rail-count {
  margin-left: auto; font-variant-numeric: tabular-nums;
  font-size: 11px; color: var(--color-neutral-600);
}
.rail-link[aria-current='page'] .rail-count { color: var(--color-accent); }
.rail-dot { margin-left: auto; width: 6px; height: 6px; background: var(--color-danger); flex: none; }

.rail-foot { border-top: 1px solid var(--color-divider); padding: 11px var(--space-5) 13px; }
.rail-who { font-size: 12px; line-height: 1.35; }
.rail-who strong { font-weight: 600; }
.rail-role { font-size: 11.5px; }
.rail-signout {
  margin-top: 5px; background: none; border: 0; padding: 0;
  font-family: var(--font-body); font-size: 11.5px; color: var(--color-neutral-700);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.rail-signout:hover { color: var(--color-danger); }

/* Mode strip — says out loud when the console is showing sample data. */
.mode-strip {
  display: flex; align-items: center; gap: 7px;
  padding: 7px var(--space-5); border-top: 1px solid var(--color-divider);
  background: var(--color-warn-wash); font-size: 11px; line-height: 1.35;
  color: var(--color-neutral-800);
}
.mode-strip .dot { width: 6px; height: 6px; flex: none; background: var(--color-warn); }

/* ── Main column ─────────────────────────────────────────────────────────── */
.main { flex: 1; min-width: 0; background: var(--color-paper); display: flex; flex-direction: column; }

.crumbs {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 11px var(--space-8) 0; font-size: 11.5px; color: var(--color-neutral-600);
}
.crumbs a, .crumbs button {
  background: none; border: 0; padding: 0; font: inherit; color: var(--color-neutral-700);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.crumbs a:hover, .crumbs button:hover { color: var(--color-accent); }
.crumbs .sep { color: var(--color-neutral-400); }
.crumbs .here { color: var(--color-neutral-800); }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5);
  padding: 7px var(--space-8) 13px; border-bottom: 1px solid var(--color-divider);
}
.page-head-text { min-width: 0; }
.page-head-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.page-sub { font-size: 12.5px; color: var(--color-neutral-700); margin-top: 2px; }

.page-body { flex: 1; padding: var(--space-6) var(--space-8) var(--space-10); max-width: var(--maxw); width: 100%; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--control-h); padding: 0 13px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: var(--color-paper); color: var(--color-text);
  cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--color-accent-100); border-color: var(--color-accent-line); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--color-paper); border-color: var(--color-divider); }
.btn-primary {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff; font-weight: 600;
}
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.btn-danger { color: var(--color-danger); border-color: var(--color-danger-line); }
.btn-danger:hover { background: var(--color-danger-wash); border-color: var(--color-danger); }
.btn-sm { height: 26px; padding: 0 9px; font-size: 12px; }
.btn-ghost { border-color: transparent; background: none; }
.btn-ghost:hover { background: var(--color-accent-tint); border-color: transparent; }
.btn-full { width: 100%; }

/* ── Status pills ────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-heading); font-weight: 600; font-size: 9.5px; line-height: 1;
  letter-spacing: 0.11em; text-transform: uppercase;
  padding: 4px 6px; border: 1px solid; white-space: nowrap;
}
.pill .dot { width: 5px; height: 5px; flex: none; background: currentColor; }
.pill-live    { color: var(--color-ok);      border-color: var(--color-ok-line);     background: var(--color-ok-wash); }
.pill-paused  { color: var(--color-warn);    border-color: var(--color-warn-line);   background: var(--color-warn-wash); }
.pill-draft   { color: var(--color-neutral-700); border-color: var(--color-divider); background: transparent; }
.pill-archived{ color: var(--color-neutral-600); border-color: var(--color-hairline);background: transparent; }
.pill-failed  { color: var(--color-danger);  border-color: var(--color-danger-line); background: var(--color-danger-wash); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table-tools {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.table-tools .spacer { flex: 1; }
.search {
  height: 30px; width: 232px; padding: 0 10px;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: var(--color-paper); font-family: var(--font-body); font-size: 13px;
  color: var(--color-text); caret-color: var(--color-accent);
}
.search:focus-visible { border-color: var(--color-accent); }
.chip {
  height: 26px; padding: 0 9px; background: none;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 12px; color: var(--color-neutral-800); cursor: pointer;
}
.chip:hover { border-color: var(--color-accent-line); }
.chip[aria-pressed='true'] {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff; font-weight: 500;
}

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data thead th {
  text-align: left; padding: 0 10px 6px;
  font-family: var(--font-heading); font-weight: 600; font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-600);
  border-bottom: 1px solid var(--color-divider); white-space: nowrap;
}
table.data thead th.right, table.data td.right { text-align: right; }
table.data tbody td {
  padding: 0 10px; height: var(--row-h);
  border-bottom: 1px solid var(--color-hairline); vertical-align: middle;
}
table.data tbody tr.clickable { cursor: pointer; }
table.data tbody tr.clickable:hover { background: var(--color-accent-tint); }
/* A row with nothing behind it gets no hover and no pointer. The absence of
   the affordance IS the statement — see .noview below. */
table.data tbody tr.inert { cursor: default; }
table.data td.tint { width: 3px; padding: 0; }
.row-bar { display: block; width: 3px; height: var(--row-h); }
.cell-strong { font-weight: 600; }
.chev { color: var(--color-neutral-400); font-size: 15px; line-height: 1; }

/* The brand chip. A client's colour identifies them; it never instructs.
   It is never used on a button, a status, a link or the navigation. */
.brand-chip { display: inline-block; width: 9px; height: 9px; flex: none; vertical-align: -1px; }
.with-chip { display: inline-flex; align-items: center; gap: 7px; }

/* ── The zero-access mark ────────────────────────────────────────────────
   Where a "view" control would sit on any other console, this sits instead.
   Deliberately NOT a padlock: a padlock says you could open this with the
   right key. An empty frame says there is nothing in there to open. */
.noview {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--color-neutral-600); font-size: 12px;
}
.noview .mark {
  width: 15px; height: 15px; flex: none;
  border: 1px solid var(--color-neutral-400);
  display: grid; place-items: center; color: var(--color-neutral-500);
  font-size: 11px; line-height: 1;
}

/* ── Stat row ────────────────────────────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--color-divider); margin-bottom: var(--space-6);
}
.stat { padding: 12px 14px 13px; border-left: 1px solid var(--color-hairline); }
.stat:first-child { border-left: 0; }
.stat-n {
  font-family: var(--font-heading); font-weight: 600; font-size: 27px; line-height: 1.05;
  letter-spacing: -0.015em; font-variant-numeric: tabular-nums; margin-top: 4px;
}
.stat-n.is-bad { color: var(--color-danger); }
.stat-note { font-size: 11.5px; color: var(--color-neutral-600); margin-top: 2px; }

/* ── Panels ──────────────────────────────────────────────────────────────── */
.panel { border: 1px solid var(--color-divider); background: var(--color-paper); margin-bottom: var(--space-6); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: 10px 14px; border-bottom: 1px solid var(--color-divider);
}
.panel-body { padding: 14px; }
.panel-body.flush { padding: 10px 4px 2px; }
.panel-foot {
  padding: 8px 14px; border-top: 1px solid var(--color-hairline);
  font-size: 12px; color: var(--color-neutral-600);
}
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
.cols-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; }

/* Definition rows — the standard label/value pair inside a panel. */
.dl { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 0; }
.dl > dt {
  padding: 6px 0; font-size: 11px; font-weight: 500; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--color-neutral-700);
  border-top: 1px solid var(--color-hairline);
}
.dl > dd {
  padding: 6px 0; margin: 0; font-size: 13.5px; border-top: 1px solid var(--color-hairline);
  min-width: 0; overflow-wrap: anywhere;
}
.dl > dt:first-of-type, .dl > dd:first-of-type { border-top: 0; }

/* ── The guarantee panel ─────────────────────────────────────────────────
   The single most persuasive object in the product. Two columns: what this
   console can see, and what it cannot. Gets corner marks — it has earned
   the ceremony. */
.guarantee { margin-bottom: var(--space-6); }
.guarantee .panel-head { background: var(--color-accent-wash); }
.guarantee-cols { display: grid; grid-template-columns: 1fr 1fr; }
.guarantee-col { padding: 13px 15px 15px; border-left: 1px solid var(--color-hairline); }
.guarantee-col:first-child { border-left: 0; }
.guarantee-col ul { margin: 9px 0 0; padding: 0; list-style: none; }
.guarantee-col li {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 13px; line-height: 1.45; padding: 3px 0;
}
.guarantee-col li .m { flex: none; width: 11px; font-family: var(--font-mono); font-size: 12px; }
.g-can li .m { color: var(--color-accent); }
.g-cannot li .m { color: var(--color-neutral-400); }
.g-cannot li { color: var(--color-neutral-700); }
.guarantee-foot {
  border-top: 1px solid var(--color-hairline); padding: 10px 15px;
  font-size: 12.5px; line-height: 1.5; color: var(--color-neutral-700);
}

/* ── Needs attention ─────────────────────────────────────────────────────── */
.attn-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 14px; border-top: 1px solid var(--color-hairline);
  width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0;
  font-family: inherit; font-size: 13px; text-align: left; color: inherit; cursor: pointer;
}
.attn-row:first-child { border-top: 0; }
.attn-row:hover { background: var(--color-accent-tint); }
.attn-mark { width: 6px; height: 6px; flex: none; }
.attn-mark.sev-high { background: var(--color-danger); }
.attn-mark.sev-med { background: var(--color-warn); }
.attn-body { flex: 1; min-width: 0; }
.attn-meta { font-size: 11.5px; color: var(--color-neutral-600); margin-top: 1px; }
.attn-clear { padding: 13px 14px; font-size: 13px; color: var(--color-neutral-700); }

/* ── Delivery strip — one thin bar per day, 90 days ──────────────────────── */
.strip { display: flex; align-items: flex-end; gap: 1px; height: 46px; }
.strip-day { flex: 1; min-width: 1px; background: var(--color-accent-200); position: relative; }
.strip-day > i { display: block; width: 100%; background: var(--color-accent); }
.strip-day.has-fail > i { background: var(--color-danger); }
.strip-day.is-quiet { background: var(--color-hairline); height: 2px; }
.strip-axis {
  display: flex; justify-content: space-between;
  margin-top: 6px; font-size: 11px; color: var(--color-neutral-600);
}
.spark { display: flex; align-items: flex-end; gap: 1px; height: 18px; width: 92px; }
.spark i { flex: 1; background: var(--color-accent-300); min-height: 1px; }
.spark i.on { background: var(--color-accent); }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.field { margin-bottom: var(--space-4); }
.field > label, .field > .field-label {
  display: block; font-size: 11px; font-weight: 500; line-height: 1.2;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--color-neutral-800); margin-bottom: 5px;
}
.req { color: var(--color-accent); }
.input, select.input, textarea.input {
  width: 100%; height: var(--control-h); padding: 0 10px;
  background: var(--color-paper); border: 1px solid rgba(29, 31, 32, 0.22);
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 13.5px; color: var(--color-text);
  caret-color: var(--color-accent);
}
textarea.input { height: auto; min-height: 66px; padding: 7px 10px; line-height: 1.5; resize: vertical; }
select.input { appearance: none; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-neutral-700) 50%),
                    linear-gradient(135deg, var(--color-neutral-700) 50%, transparent 50%);
  background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.input[aria-invalid='true'] { border-color: var(--color-danger); }
.field-hint { font-size: 11.5px; line-height: 1.45; color: var(--color-neutral-600); margin: 5px 0 0; }
.field-error { font-size: 12px; color: var(--color-danger); margin: 5px 0 0; }
.swatch-row { display: flex; align-items: center; gap: 8px; }
.swatch-row input[type='color'] {
  width: 34px; height: var(--control-h); padding: 2px; border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); background: var(--color-paper); cursor: pointer;
}

/* Toggle — drawn, never a native control */
.toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 0; background: none; border: 0; border-top: 1px solid var(--color-hairline);
  font-family: inherit; font-size: 13.5px; text-align: left; color: inherit; cursor: pointer;
}
.toggle:first-of-type { border-top: 0; }
.toggle-box {
  width: 30px; height: 17px; flex: none; position: relative;
  border: 1px solid var(--color-neutral-400); background: var(--color-paper);
}
.toggle-box > i {
  position: absolute; top: 2px; left: 2px; width: 11px; height: 11px;
  background: var(--color-neutral-500); transition: left 0.12s ease, background 0.12s ease;
}
.toggle[aria-checked='true'] .toggle-box { border-color: var(--color-accent); background: var(--color-accent-100); }
.toggle[aria-checked='true'] .toggle-box > i { left: 15px; background: var(--color-accent); }
.toggle-text { flex: 1; min-width: 0; }
.toggle-note { display: block; font-size: 11.5px; color: var(--color-neutral-600); margin-top: 1px; }

/* ── Recipients ──────────────────────────────────────────────────────────── */
.rcpt {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 14px; border-top: 1px solid var(--color-hairline);
}
.rcpt:first-child { border-top: 0; }
.rcpt-body { flex: 1; min-width: 0; }
.rcpt-label { font-weight: 600; }
.rcpt-email { font-size: 12.5px; color: var(--color-neutral-700); overflow-wrap: anywhere; }
.rcpt-meta { font-size: 11.5px; color: var(--color-neutral-600); margin-top: 1px; }
.rcpt-meta.stale { color: var(--color-warn); }
.rcpt-actions { display: flex; gap: 5px; flex: none; }

/* ── Empty states ────────────────────────────────────────────────────────── */
.empty { padding: 40px 24px 44px; text-align: center; }
.empty-mark {
  width: 34px; height: 34px; margin: 0 auto 13px;
  border: 1px solid var(--color-neutral-400); color: var(--color-neutral-400);
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 15px;
}
.empty-title { font-family: var(--font-heading); font-weight: 600; font-size: 16px; margin: 0 0 5px; }
.empty-text { font-size: 13px; color: var(--color-neutral-700); margin: 0 auto 15px; max-width: 46ch; line-height: 1.5; }

/* The brand chip beside a page title, larger than the one used in a row. */
.title-chip { width: 11px; height: 11px; margin-right: 8px; vertical-align: 1px; }

/* A secret shown once — an API key at the moment it is minted. */
.secret-box {
  padding: 10px; border: 1px solid var(--color-divider);
  background: var(--color-bg); overflow-wrap: anywhere; line-height: 1.6;
}

/* ── Dialogs ─────────────────────────────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(29, 31, 32, 0.42);
  display: grid; place-items: center; padding: var(--space-5);
}
.scrim[hidden] { display: none; }
.dialog {
  background: var(--color-paper); border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md); width: min(520px, 100%);
  max-height: calc(100vh - 56px); overflow-y: auto;
}
.dialog.wide { width: min(680px, 100%); }
.dialog-head { padding: 13px 16px 11px; border-bottom: 1px solid var(--color-divider); }
.dialog-title { font-family: var(--font-heading); font-weight: 600; font-size: 17px; margin: 3px 0 0; }
.dialog-body { padding: 15px 16px; }
.dialog-foot {
  display: flex; justify-content: flex-end; gap: var(--space-2);
  padding: 11px 16px; border-top: 1px solid var(--color-divider); background: var(--color-bg);
}
.dialog-foot .spacer { flex: 1; }

/* ── Danger zone ─────────────────────────────────────────────────────────── */
.danger-zone { border: 1px solid var(--color-danger-line); margin-top: var(--space-8); }
.danger-zone .panel-head { border-bottom-color: var(--color-danger-line); background: var(--color-danger-wash); }
.danger-zone .panel-head .section-title { color: var(--color-danger); }
.danger-row {
  display: flex; align-items: center; gap: var(--space-5);
  padding: 12px 14px; border-top: 1px solid var(--color-hairline);
}
.danger-row:first-child { border-top: 0; }
.danger-row .d-body { flex: 1; min-width: 0; }
.danger-row .d-title { font-weight: 600; }
.danger-row .d-note { font-size: 12px; color: var(--color-neutral-700); margin-top: 1px; }

/* ── Notes and banners ───────────────────────────────────────────────────── */
.note {
  border-left: 2px solid var(--color-accent); background: var(--color-accent-wash);
  padding: 11px 14px; font-size: 13px; line-height: 1.55; margin-bottom: var(--space-5);
}
.note-warn { border-left-color: var(--color-warn); background: var(--color-warn-wash); }
.note-danger { border-left-color: var(--color-danger); background: var(--color-danger-wash); }
.note p { margin: 0 0 7px; }
.note p:last-child { margin-bottom: 0; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast-stack { position: fixed; z-index: 95; right: var(--space-6); bottom: var(--space-6); display: flex; flex-direction: column; gap: 7px; }
.toast {
  background: var(--color-neutral-900); color: #fff; padding: 9px 13px;
  font-size: 13px; box-shadow: var(--shadow-md); max-width: 340px;
}
.toast.bad { background: var(--color-danger); }

/* ── Sign-in ─────────────────────────────────────────────────────────────── */
.signin-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); }
@supports (min-height: 100svh) { .signin-wrap { min-height: 100svh; } }
.signin-wrap[hidden] { display: none; }
.signin { width: min(376px, 100%); padding: 24px 24px 20px; }
.signin-mark {
  display: flex; align-items: baseline; gap: 7px;
  font-family: var(--font-heading); font-weight: 600; font-size: 21px; letter-spacing: 0.02em;
}
.signin-mark b { color: var(--color-accent); }
.signin-kicker { margin-top: 2px; }
.signin-title { font-family: var(--font-heading); font-weight: 600; font-size: 25px; margin: 13px 0 3px; letter-spacing: -0.01em; }
.signin-lede { font-size: 13px; color: var(--color-neutral-700); margin: 0 0 19px; line-height: 1.5; }
.signin-foot {
  margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--color-hairline);
  font-size: 12px; line-height: 1.55; color: var(--color-neutral-700);
}

/* ── Activity day headers ────────────────────────────────────────────────── */
tr.day-head th {
  padding: 15px 10px 5px; border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-heading); font-weight: 600; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-700);
  background: var(--color-paper); text-align: left;
}

/* ── Small screens ───────────────────────────────────────────────────────
   The console is a desk tool, but Richard will open it on a phone to check
   whether a form is still delivering. The rail becomes a top bar and the
   grids collapse; nothing is hidden. */
@media (max-width: 900px) {
  :root { --pad: 14px; }
  .shell { display: block; }
  .rail {
    width: auto; height: auto; position: static; flex-direction: column;
    border-right: 0; border-bottom: 1px solid var(--color-divider);
  }
  .rail-head { padding: 13px var(--pad) 10px; }
  .rail-nav { display: flex; overflow-x: auto; padding: 0 var(--pad) 0; gap: 2px; }
  .rail-group { display: none; }
  .rail-link { width: auto; height: 36px; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .rail-link[aria-current='page'] { border-left-color: transparent; border-bottom-color: var(--color-accent); background: none; }
  .rail-link .ico, .rail-count { display: none; }
  .rail-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 9px var(--pad); }
  .rail-signout { margin-top: 0; }
  .crumbs, .page-head { padding-left: var(--pad); padding-right: var(--pad); }
  .page-body { padding: var(--space-5) var(--pad) var(--space-10); }
  /* The rail is no longer a flex sibling, so .main stops at its content and
     the page ground shows through below it. Hold the working surface open. */
  .main { min-height: 78vh; }
  .page-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--color-hairline); }
  .cols-2, .cols-main, .guarantee-cols { grid-template-columns: 1fr; }
  .guarantee-col { border-left: 0; border-top: 1px solid var(--color-hairline); }
  .guarantee-col:first-child { border-top: 0; }
  .dl { grid-template-columns: 1fr; }
  .dl > dd { border-top: 0; padding-top: 0; padding-bottom: 9px; }
  .search { width: 100%; }
  .toast-stack { right: var(--pad); left: var(--pad); bottom: var(--pad); }
  .toast { max-width: none; }
}

@media print {
  .rail, .page-head-actions, .table-tools, .toast-stack { display: none !important; }
  body { background: #fff; }
}