/* AuthGuard console.
   Design tokens come first: colours, spacing (4/8 scale), radius and type. The platform portal reuses them.
   Brand: black and porcelain surfaces; signal red only for the primary action and the active navigation item.
   The condensed display type belongs to the sign-in hero, not to the working surfaces.
   Colours: the stylesheet IS the AuthGuard theme (P5b D-B29, Palettes::AUTHGUARD in authguard-core branding.rs),
   mapped onto these properties exactly as P7's PROPERTIES table (plan 2026-10-15, D-23). :root holds the dark half
   (the default); html[data-console-mode="light"], or "auto" with a light preference, holds the light half. Only the
   twelve palette tokens change per mode: every other colour is mixed from them with color-mix(), so a realm palette
   that theme.js writes onto the same properties carries every tint and border with it.
   tools/test-web-theme-contrast.cjs checks this mapping and the WCAG AA pairs in both modes. */
:root {
  color-scheme: dark;

  /* Palette, dark (D-B29). primary → --signal, onPrimary → --signal-ink, accent → --accent and --focus,
     onAccent → --accent-ink, surface → --black, surfaceAlt → --black-2 and --surface-1, text → --porcelain,
     textMuted → --porcelain-dim and --graphite, border → --line-strong and --border-control. */
  --signal: #ff3b30;
  --signal-ink: #090908;
  --accent: #ff3b30;
  --accent-ink: #090908;
  --focus: #ff3b30;
  --black: #090908;
  --black-2: #11110f;
  --surface-1: #11110f;
  --porcelain: #f2efe7;
  --porcelain-dim: #bbb7ac;
  --graphite: #bbb7ac;
  --line-strong: #858179;
  --border-control: #858179;
  --success: #3ddc84;
  --warning: #f5b83d;
  --danger: #ff726a;
  /* Shadows stay black in both modes; only their weight changes. */
  --scrim: color-mix(in srgb, #000 72%, transparent);
  --shadow: color-mix(in srgb, #000 60%, transparent);

  /* Mixed from the palette (D-23's mix(a, b, w) is color-mix(in srgb, a (1 - w), b)). */
  --signal-hover: color-mix(in srgb, var(--signal) 85%, var(--porcelain));
  --signal-dark: color-mix(in srgb, var(--signal) 25%, var(--black));
  --black-3: color-mix(in srgb, var(--black-2) 96%, var(--porcelain));
  --surface-2: color-mix(in srgb, var(--black-2) 96%, var(--porcelain));
  --surface-3: color-mix(in srgb, var(--black-2) 92%, var(--porcelain));
  --field: color-mix(in srgb, var(--black) 50%, var(--black-2));
  --line: color-mix(in srgb, var(--line-strong) 45%, var(--black));

  /* Console mixes beyond D-23, also from the palette, so they follow mode and realm palette. Meaningful outlines
     (alert, banner and badge borders) keep WCAG 1.4.11's 3:1 against the page and their own tint; row lines keep
     at least 1.6:1 (decorative separators, the row text carries the structure). */
  --surface-0: var(--black);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --line-row: color-mix(in srgb, var(--line-strong) 60%, var(--black));
  --placeholder: color-mix(in srgb, var(--porcelain-dim) 80%, var(--field));
  --hover-tint: color-mix(in srgb, var(--porcelain) 3%, transparent);
  --watermark: color-mix(in srgb, var(--porcelain) 3.5%, transparent);
  --signal-tint: color-mix(in srgb, var(--signal) 12%, transparent);
  --success-glow: color-mix(in srgb, var(--success) 18%, transparent);
  /* Success as text: D-B29's light success is 4.29:1 on --surface-2, so text leans 12% towards --porcelain. */
  --success-text: color-mix(in srgb, var(--success) 88%, var(--porcelain));
  --danger-border: color-mix(in srgb, var(--danger) 80%, var(--black));
  --danger-tint: color-mix(in srgb, var(--danger) 8%, var(--black));
  --danger-hover: color-mix(in srgb, var(--danger) 12%, transparent);
  --danger-badge: color-mix(in srgb, var(--danger) 10%, var(--surface-2));
  --warning-border: color-mix(in srgb, var(--warning) 80%, var(--black));
  --warning-tint: color-mix(in srgb, var(--warning) 8%, var(--black));

  /* Text (all pass WCAG AA on surfaces 0 to 3 in both modes) */
  --fg: var(--porcelain);
  --fg-muted: var(--porcelain-dim);
  --fg-subtle: var(--graphite);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Type */
  --condensed: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  --text: "Aptos", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --fs-page: 28px;
  --fs-section: 18px;
  --fs-subsection: 15px;
  --fs-body: 14px;
  --fs-label: 13px;
  --fs-small: 12px;
  --fs-kicker: 11px;

  /* Shell */
  --topbar-h: 56px;
  --sidebar-w: 240px;
  --content-max: 1200px;
  --control-h: 38px;
  --control-h-sm: 32px;
  --card-pad: var(--space-6);

  color: var(--fg);
  background: var(--surface-0);
  font-family: var(--text);
  font-synthesis: none;
}

/* Palette, light (D-B29): P7's <html data-console-mode="light">, or "auto" when the system prefers light. Without
   the attribute the console stays dark. The two blocks are the same declarations. */
html[data-console-mode="light"] {
  color-scheme: light;
  --signal: #b3261e;
  --signal-ink: #ffffff;
  --accent: #ff3b30;
  --accent-ink: #090908;
  --focus: #ff3b30;
  --black: #fbfaf6;
  --black-2: #f2efe7;
  --surface-1: #f2efe7;
  --porcelain: #090908;
  --porcelain-dim: #4a4741;
  --graphite: #4a4741;
  --line-strong: #858179;
  --border-control: #858179;
  --success: #1d7a43;
  --warning: #8a5300;
  --danger: #a61f17;
  --scrim: color-mix(in srgb, #000 45%, transparent);
  --shadow: color-mix(in srgb, #000 18%, transparent);
}
@media (prefers-color-scheme: light) {
  html[data-console-mode="auto"] {
    color-scheme: light;
    --signal: #b3261e;
    --signal-ink: #ffffff;
    --accent: #ff3b30;
    --accent-ink: #090908;
    --focus: #ff3b30;
    --black: #fbfaf6;
    --black-2: #f2efe7;
    --surface-1: #f2efe7;
    --porcelain: #090908;
    --porcelain-dim: #4a4741;
    --graphite: #4a4741;
    --line-strong: #858179;
    --border-control: #858179;
    --success: #1d7a43;
    --warning: #8a5300;
    --danger: #a61f17;
    --scrim: color-mix(in srgb, #000 45%, transparent);
    --shadow: color-mix(in srgb, #000 18%, transparent);
  }
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--surface-0); }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--surface-0); color: var(--fg); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
code { font-family: var(--mono); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }

.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--fg); text-decoration: none; font-size: 15px; font-weight: 750; letter-spacing: -.02em; }
.brand-mark { width: 29px; height: 18px; display: grid; grid-template-columns: 18px 7px; gap: 4px; transform: skewX(-10deg); }
.brand-mark i { display: block; background: currentColor; }
.brand-mark i:last-child { background: var(--signal); }
/* Tiny uppercase labels: the area above a page title, the sidebar group, a few status labels. */
.kicker, .path, .nav-label { margin: 0; color: var(--fg-subtle); font: 600 var(--fs-kicker)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.kicker { display: flex; align-items: center; gap: 10px; }

/* Sign-in: the brand hero keeps the display type; the form uses the console controls. */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(390px, 42%) minmax(0, 1fr); }
.auth-shell .kicker::before { content: ""; width: 27px; height: 2px; flex: none; background: var(--signal); }
.auth-brief { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; padding: clamp(34px, 5vw, 72px); border-right: 1px solid var(--border); background: var(--black-2); }
.auth-brief::after { content: "01"; position: absolute; right: -18px; bottom: -48px; color: var(--watermark); font: 800 clamp(240px, 30vw, 470px)/.8 var(--condensed); letter-spacing: -.075em; pointer-events: none; }
.auth-brief > * { position: relative; z-index: 1; }
.auth-statement { margin: auto 0; padding: 8vh 0 48px; }
.auth-statement h1 { max-width: 640px; margin: 24px 0 22px; font: 760 clamp(66px, 7.4vw, 118px)/.9 var(--condensed); letter-spacing: -.045em; text-transform: uppercase; }
.auth-statement > p:last-child { max-width: 480px; margin: 0; color: var(--fg-muted); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.62; }
.privacy-contract { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--border); }
.privacy-contract div { min-width: 0; padding: 17px 14px 0 0; border-right: 1px solid var(--border); }
.privacy-contract div + div { padding-left: 14px; }
.privacy-contract div:last-child { border-right: 0; }
.privacy-contract dt { color: var(--fg-subtle); font: 600 10px/1.3 var(--mono); text-transform: uppercase; }
.privacy-contract dd { margin: 8px 0 0; color: var(--fg-muted); font-size: 13px; font-weight: 650; }
.auth-entry { min-width: 0; display: grid; grid-template-rows: 48px 1fr; background: var(--surface-0); }
.frame-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--border); color: var(--fg-subtle); font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.health-inline { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-subtle); }
.health-inline strong { color: inherit; font: inherit; }
.frame-tools { display: inline-flex; align-items: center; gap: 16px; min-width: 0; }
.health-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--fg-subtle); }
[data-service-health].is-available .health-dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-glow); }
[data-service-health].is-unavailable .health-dot { background: var(--danger); }
[data-service-health].is-unavailable [data-service-health-label] { color: var(--danger); }
.auth-panel { min-width: 0; display: grid; place-items: center; padding: clamp(42px, 6vw, 92px); }
.login-card { width: min(640px, 100%); }
.partner-login-brief { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); padding: var(--space-5); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-1); }
.partner-login-brief h3 { margin: 0; font: 650 20px/1.3 var(--text); overflow-wrap: anywhere; }
.partner-login-brief p:last-child { margin: 0; color: var(--fg-muted); line-height: 1.55; }
.federation-logout-flow .login-card > :not(#partner-logout-card) { display: none; }
.partner-logout-details { display: grid; gap: var(--space-4); margin: 0; }
.partner-logout-details dt { color: var(--fg-subtle); font-size: var(--fs-small); font-weight: 600; }
.partner-logout-details dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.card-heading { margin-bottom: var(--space-6); }
.card-heading h2 { margin: var(--space-4) 0 var(--space-2); font: 700 30px/1.15 var(--text); letter-spacing: -.02em; }
.card-heading > p:last-child { max-width: 620px; margin: 0; color: var(--fg-muted); font-size: 15px; line-height: 1.6; }
.local-proof { margin: var(--space-5) 0 var(--space-6); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); color: var(--fg-muted); font-size: 13px; line-height: 1.55; }
.local-proof strong { color: var(--fg); }
.fallbacks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; border-top: 1px solid var(--border); }
details { min-width: 0; }
details summary { min-height: 46px; display: flex; align-items: center; justify-content: space-between; color: var(--fg-muted); cursor: pointer; list-style: none; font: 600 var(--fs-label)/1.3 var(--text); }
details summary:hover { color: var(--fg); }
details summary::after { content: "+"; color: var(--fg-subtle); font-size: 16px; }
details[open] summary::after { content: "−"; }
details summary::-webkit-details-marker { display: none; }
details form { padding: 8px 0 4px; }
.auth-factor-step { display: grid; gap: var(--space-3); margin: 8px 0 4px; padding: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-1); }
.auth-factor-step header { display: grid; gap: 4px; }
.auth-factor-step header p { margin: 0; color: var(--fg-subtle); font-size: var(--fs-small); font-weight: 600; }
.auth-factor-step h3 { margin: 0; color: var(--fg); font: 650 17px/1.3 var(--text); }
.auth-factor-step > p:not(.message) { margin: 0; color: var(--fg-muted); font-size: 13px; line-height: 1.55; }
.auth-factor-step time { color: var(--fg-muted); font: 600 12px/1.4 var(--mono); }
.auth-factor-step form { padding: 0; }
.auth-factor-actions { display: flex; align-items: center; gap: 18px; }
.auth-factor-actions .button { flex: 1; }
.auth-factor-actions .text-button { flex: none; }
/* ProofFlow Presence (Mobile): sign-in with the phone alone and the second factor after a password
   (phone-sign-in.js, S3-3/S3-4). Offered, it is the sign-in page's one primary action and the passkey
   becomes the secondary path; while the step runs it replaces the form, the passkey note and the fallbacks. */
body:is(:not(.federation-flow), .federation-phone) #identity-form:has(> #phone-login-start:not([hidden])) > #passkey-login { border-color: var(--border-strong); background: var(--surface-2); color: var(--fg); }
body:is(:not(.federation-flow), .federation-phone) #identity-form:has(> #phone-login-start:not([hidden])) > #passkey-login:hover:not(:disabled) { border-color: var(--fg-subtle); background: var(--surface-3); }
.federation-flow:not(.federation-phone) #phone-login-start { display: none; }
/* A service request completing on its own after a sign-in: only its card shows, never the console. */
body.federation-continuing #dashboard-view :is(.console-bar .primary-nav, .sidebar, .view-menu-bar, .dashboard-header, .console-subview, #first-run-banner) { display: none; }
/* Without the sidebar's column the card takes the whole row, centred at the sign-in panel's width. */
body.federation-continuing #dashboard-view .dashboard-body { grid-template-columns: minmax(0, 1fr); }
body.federation-continuing #dashboard-view .dashboard-main { max-width: calc(640px + 2 * var(--space-8)); margin-inline: auto; }
.login-card.phone-step-active :is(#identity-form, .local-proof, .fallbacks) { display: none; }
.auth-factor-step.phone-login-step { gap: var(--space-4); margin: 0; padding: var(--card-pad); border-color: var(--border); border-radius: var(--radius-lg); }
.phone-login-step header { gap: var(--space-2); }
.phone-login-step header p { font: 600 var(--fs-kicker)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
/* The heading takes the focus when the step opens; its ring hugs the text. */
.auth-factor-step.phone-login-step h3 { justify-self: start; font: 650 var(--fs-section)/1.3 var(--text); }
.auth-factor-step.phone-login-step > p:not(.message) { font-size: var(--fs-body); }
.auth-factor-step > p.phone-login-method { padding-top: var(--space-4); border-top: 1px solid var(--border); color: var(--fg); font: 600 var(--fs-subsection)/1.35 var(--text); }
/* The Match code to type on the phone: its instruction above it, the code large and grouped. */
.phone-login-step .phone-code-line { flex-direction: column; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-4); }
.phone-login-step > .message { margin: 0; }
.phone-login-step > .message:empty { display: none; }
.phone-login-resend-row:not(:has(> :not([hidden]))) { display: none; }
.phone-login-alternatives { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.phone-login-footer { display: flex; justify-content: flex-end; }
.entry-footer { display: flex; justify-content: space-between; gap: 18px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--fg-subtle); font-size: 13px; }

/* Forms: the label sits above its control; help is short and muted. */
form { display: grid; gap: var(--space-4); }
label { min-width: 0; display: grid; gap: 6px; color: var(--fg); font: 600 var(--fs-label)/1.35 var(--text); }
label small { color: var(--fg-subtle); font: 400 var(--fs-small)/1.4 var(--text); }
input, select, textarea { min-width: 0; width: 100%; min-height: var(--control-h); border: 1px solid var(--border-control); border-radius: var(--radius); background: var(--field); color: var(--fg); padding: 7px 12px; outline: none; font: 400 var(--fs-body)/1.4 var(--text); text-transform: none; transition: border-color .15s, background-color .15s; }
input:hover, select:hover, textarea:hover { border-color: var(--fg-subtle); }
input:focus, select:focus, textarea:focus { border-color: var(--fg-muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
input[readonly] { border-color: var(--border); color: var(--fg-subtle); cursor: default; }
input:disabled, select:disabled, textarea:disabled { border-color: var(--border-strong); color: var(--fg-subtle); cursor: not-allowed; }
textarea { resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%), linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-repeat: no-repeat; background-size: 5px 5px; cursor: pointer; }
select option { color: var(--fg); background: var(--surface-1); }
.password-input-control { position: relative; display: block; width: 100%; }
.password-input-control > input { padding-right: 88px; }
.password-visibility-toggle { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); min-height: 28px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--fg); padding: 0 10px; font: 600 12px/1 var(--text); cursor: pointer; }
.password-visibility-toggle:hover { border-color: var(--fg-subtle); }
/* Checkboxes and radio buttons have their own size; the field rule above would stretch them across the row. */
input:is([type="checkbox"], [type="radio"]) { appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-content: center; width: 18px; min-width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--field); color: var(--black); cursor: pointer; vertical-align: middle; transition: border-color .15s, background-color .15s; }
input[type="radio"] { border-radius: 50%; }
input:is([type="checkbox"], [type="radio"])::before { content: ""; transform: scale(0); transition: transform .1s; }
input[type="checkbox"]::before { width: 11px; height: 11px; background: currentColor; clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 86% 8%, 39% 70%); }
input[type="radio"]::before { width: 8px; height: 8px; border-radius: 50%; background: var(--fg); }
input:is([type="checkbox"], [type="radio"]):checked::before { transform: scale(1); }
input[type="checkbox"]:checked { border-color: var(--fg); background: var(--fg); }
input[type="radio"]:checked { border-color: var(--fg); }
input:is([type="checkbox"], [type="radio"]):hover:not(:disabled) { border-color: var(--fg); }
input:is([type="checkbox"], [type="radio"]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input:is([type="checkbox"], [type="radio"]):disabled { cursor: not-allowed; opacity: .5; }
/* A label that wraps a choice puts the box before its text. */
label:where(:has(> input:is([type="checkbox"], [type="radio"]))) { display: flex; align-items: flex-start; gap: 10px; color: var(--fg); font: 400 var(--fs-body)/1.45 var(--text); cursor: pointer; }
/* The box sits on the first line of its text, centred on it however the text wraps: its block margins fill
   one line of the label (1lh with the label's font), so every row of a list starts at the same x and the
   same distance from its text. The selector outranks input[type="checkbox"] { margin: 0 }. */
label:where(:has(> input:is([type="checkbox"], [type="radio"]))) > input:is([type="checkbox"], [type="radio"]) { font: inherit; margin-block: max(0px, calc((1lh - 18px) / 2)); }
label:where(:has(> input:is([type="checkbox"], [type="radio"]):disabled)) { cursor: default; }
input[type="file"] { padding: 4px 12px 4px 4px; color: var(--fg-muted); font-size: 13px; cursor: pointer; }
input[type="file"]::file-selector-button { min-height: 28px; margin-right: 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--fg); padding: 0 12px; font: 600 13px/1 var(--text); cursor: pointer; }
input[type="file"]:hover::file-selector-button { border-color: var(--fg-subtle); }
fieldset { min-width: 0; display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
legend { margin: 0 0 var(--space-2); padding: 0; color: var(--fg); font: 600 var(--fs-body)/1.35 var(--text); }
.two-fields { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.auth-fields { grid-template-columns: minmax(190px, .7fr) minmax(260px, 1.3fr); }
.readonly-field { min-width: 0; display: grid; gap: 6px; }
.readonly-field > span { color: var(--fg); font: 600 var(--fs-label)/1.35 var(--text); }
.readonly-field > strong { min-height: var(--control-h); display: flex; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-0); color: var(--fg-muted); padding: 7px 12px; font-size: var(--fs-body); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

/* Buttons: one red primary per surface; the others are neutral. */
.button { min-height: var(--control-h); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 14px; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; font: 600 var(--fs-body)/1.2 var(--text); text-align: center; text-decoration: none; transition: color .15s, background-color .15s, border-color .15s; }
.button > span[aria-hidden="true"] { font-size: 12px; opacity: .75; }
.button.primary { border-color: var(--signal); background: var(--signal); color: var(--signal-ink); }
.button.primary:hover:not(:disabled) { border-color: var(--signal-hover); background: var(--signal-hover); }
.button.secondary { border-color: var(--border-strong); background: var(--surface-2); color: var(--fg); }
.button.secondary:hover:not(:disabled) { border-color: var(--fg-subtle); background: var(--surface-3); }
.button.danger { border-color: var(--danger-border); background: transparent; color: var(--danger); }
.button.danger:hover:not(:disabled) { background: var(--danger-hover); }
/* An action that asks for a fresh confirmation: outlined, never a full-width bar. */
.button.confirm { border-color: var(--signal); background: transparent; color: var(--signal); }
.button.confirm:hover:not(:disabled) { background: var(--signal-tint); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button.confirm:disabled { opacity: 1; border-color: var(--border-strong); background: var(--surface-2); color: var(--porcelain-dim); }
.button.primary:disabled { opacity: 1; border-color: var(--border-strong); background: var(--surface-3); color: var(--fg-subtle); }
.button[aria-busy="true"] { cursor: wait; background-image: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, currentColor 18%, transparent) 9px 12px); }
.text-button { border: 0; background: transparent; color: var(--fg-muted); padding: 2px 0; cursor: pointer; font: 600 var(--fs-label)/1.3 var(--text); text-decoration: underline; text-decoration-color: var(--border-control); text-underline-offset: 3px; }
.text-button:hover:not(:disabled) { color: var(--fg); text-decoration-color: var(--fg); }
.text-button:disabled { color: var(--fg-subtle); text-decoration-color: var(--border); cursor: not-allowed; }
.text-button.danger { color: var(--danger); }
.text-button.inline { margin: 0; }
/* Small toolbar actions in a card header ("Refresh"). */
.icon-button { min-height: var(--control-h-sm); display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: transparent; color: var(--fg-muted); padding: 0 10px; cursor: pointer; font: 600 var(--fs-label)/1 var(--text); white-space: nowrap; }
.icon-button:hover:not(:disabled) { border-color: var(--fg-subtle); background: var(--surface-3); color: var(--fg); }
.file-button { cursor: pointer; width: fit-content; }

/* Status lines and callouts. */
.message { min-height: 1.4em; margin: var(--space-3) 0 0; color: var(--fg-muted); font: 400 var(--fs-label)/1.5 var(--text); }
.message:empty { min-height: 0; margin: 0; }
.message.error { color: var(--danger); }
/* PAM forms (plan 2026-10-19 Task 14): one problem note under each field. */
.field-problem { margin: calc(-1 * var(--space-2)) 0 var(--space-3); color: var(--danger); font: 400 var(--fs-label)/1.5 var(--text); }
.message.success { padding-left: 10px; border-left: 2px solid var(--success); color: var(--fg); }
.privacy-note, .freshness-note { margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--fg-muted); font-size: var(--fs-label); line-height: 1.5; }
.privacy-note strong, .freshness-note strong { color: var(--fg); font-weight: 650; }
.critical-note { margin: 0; padding: 10px 12px; border: 1px solid var(--danger-border); border-radius: var(--radius); background: var(--danger-tint); color: var(--fg); font-size: var(--fs-label); line-height: 1.5; }
.critical-note strong { color: var(--danger); font-weight: 650; }
.agent-stop-note { white-space: pre-line; overflow-wrap: anywhere; }
.freshness-note [data-proof-status] { color: var(--fg-muted); font-weight: 600; }
.freshness-note [data-proof-status].ready { color: var(--success-text); }
/* Help that belongs to the field above it: plain muted text, no box. */
form .freshness-note, .editor-help { max-width: 75ch; padding: 0; border: 0; border-radius: 0; background: none; color: var(--fg-subtle); font: 400 var(--fs-label)/1.5 var(--text); }
form .freshness-note { margin-top: calc(-1 * var(--space-2)); }
.editor-help code { color: var(--fg-muted); }
.freshness-inline { margin: 0; color: var(--fg-subtle); font-size: var(--fs-label); line-height: 1.5; }
.freshness-inline strong { color: var(--fg-muted); font-weight: 650; }
.impact-list { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8); border: 1px solid var(--border); border-radius: var(--radius); color: var(--fg-muted); font-size: var(--fs-label); line-height: 1.5; }
.impact-list li::marker { color: var(--fg-subtle); }

/* Badges: small, status only. */
.status-badge, .presence-tag, .one-use-badge, .append-only-badge, .intent-state { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--fg-muted); font: 600 var(--fs-small)/1.2 var(--text); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.status-badge::before, .intent-state::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--fg-subtle); }
.status-badge.is-active::before, .status-badge.is-success::before, .intent-state.confirmed::before { background: var(--success); }
.status-badge.is-pending::before { background: var(--warning); }
.status-badge.is-disabled, .status-badge.is-revoked, .status-badge.is-failure, .intent-state.rejected { border-color: var(--danger-border); background: var(--danger-badge); color: var(--danger); }
.status-badge.is-disabled::before, .status-badge.is-revoked::before, .status-badge.is-failure::before, .intent-state.rejected::before { background: var(--danger); }
.intent-state.confirmed { color: var(--fg); }

/* Console shell: a sticky top bar, a fixed sidebar with its own scroll, and the content beside it. */
.dashboard { min-height: 100vh; background: var(--surface-0); }
.console-bar { position: sticky; top: 0; z-index: 30; min-width: 0; height: var(--topbar-h); display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) auto; border-bottom: 1px solid var(--border); background: var(--surface-0); }
.console-brand { padding: 0 var(--space-5); border-right: 1px solid var(--border); }
.primary-nav { min-width: 0; display: flex; align-items: stretch; gap: var(--space-1); padding: 0 var(--space-4); }
.primary-nav button { position: relative; padding: 0 var(--space-4); border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; font: 600 var(--fs-body)/1 var(--text); }
.primary-nav button:hover:not(:disabled) { color: var(--fg); }
.primary-nav button.active { color: var(--fg); }
.primary-nav button.active::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px; height: 2px; border-radius: 2px; background: var(--signal); }
.primary-nav button:disabled { opacity: .5; cursor: default; }
.operator { min-width: 0; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-5); }
.avatar { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface-3); color: var(--fg); font: 700 12px/1 var(--text); }
.operator > div { min-width: 0; max-width: 240px; }
.operator #user-email { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-label); font-weight: 600; line-height: 1.25; }
.operator small { display: block; color: var(--fg-subtle); font-size: var(--fs-small); line-height: 1.25; }
.language-select { width: auto; min-width: 0; min-height: var(--control-h-sm); padding: 0 28px 0 10px; border-color: var(--border-strong); background-color: transparent; color: var(--fg-muted); font: 600 var(--fs-small)/1 var(--text); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; }
.language-select:hover { color: var(--fg); }
.logout { min-height: var(--control-h-sm); border: 1px solid var(--border-strong); border-radius: var(--radius); background: transparent; color: var(--fg-muted); padding: 0 12px; cursor: pointer; font: 600 var(--fs-label)/1 var(--text); white-space: nowrap; }
.logout:hover { border-color: var(--fg-subtle); color: var(--fg); }
#first-run-banner { margin: var(--space-4) var(--space-4) 0; }
.dashboard-body { min-width: 0; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-items: start; }
.sidebar { position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); min-width: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-5) var(--space-3); border-right: 1px solid var(--border); background: var(--surface-1); }
.sidebar .nav-label { padding: 0 var(--space-3); }
.sidebar nav { display: grid; gap: 2px; margin-top: var(--space-3); }
.nav-item { position: relative; min-height: 36px; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: var(--space-2); padding: 7px var(--space-3); border-radius: var(--radius); color: var(--fg-muted); font: 500 var(--fs-body)/1.3 var(--text); text-decoration: none; }
.nav-item > span { color: var(--fg-subtle); font: 500 var(--fs-kicker)/1 var(--mono); }
.nav-item:hover:not(.active) { background: var(--surface-2); color: var(--fg); }
.nav-item.active { background: var(--surface-3); color: var(--fg); font-weight: 650; }
.nav-item.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--signal); }
.nav-item.active > span { color: var(--fg-muted); }
.nav-item:focus-visible { outline-offset: -2px; }
.service-state { margin-top: auto; padding: var(--space-4) var(--space-3) 0; border-top: 1px solid var(--border); }
.sidebar nav + .service-state { margin-top: auto; }
.service-state span, .service-state small { display: block; color: var(--fg-subtle); font-size: var(--fs-small); line-height: 1.4; }
.service-state strong { display: flex; align-items: center; gap: var(--space-2); margin: 4px 0 2px; color: var(--fg-muted); font-size: var(--fs-label); font-weight: 600; }
.service-state strong::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--fg-subtle); }
.service-state.is-available strong::before { background: var(--success); }
.service-state.is-unavailable strong::before { background: var(--danger); }
.service-state .health-retry { margin-top: var(--space-2); color: var(--danger); }
.dashboard-main { min-width: 0; width: 100%; max-width: calc(var(--content-max) + 2 * var(--space-8)); padding: var(--space-6) var(--space-8) var(--space-12); }
.control-plane-main { min-width: 0; }
/* One page title per view: the area above it, the view's name in it. */
.dashboard-header { min-width: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.dashboard-header .path { margin-bottom: 6px; }
.dashboard-header h1 { margin: 0; font: 650 var(--fs-page)/1.2 var(--text); letter-spacing: -.015em; overflow-wrap: anywhere; }
.dashboard-message:empty { display: none; }
.dashboard-message { margin-top: var(--space-5); }

/* Cards: one concern each, a lighter surface, a 1px border, consistent padding and spacing between them. */
.console-subview { min-width: 0; display: grid; gap: var(--space-5); }
.console-subview > *, .partner-login-card { min-width: 0; }
.resource-panel, .device-card, .presence-card, .authorization-card, .partner-login-card, .metric, .control-principles { padding: var(--card-pad); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); }
.partner-login-card { margin-bottom: var(--space-5); }
:is(.resource-panel, .device-card, .authorization-card, .partner-login-card) > * { margin-top: 0; margin-bottom: 0; }
/* The spacing between a card's parts wins over the components' own margins. */
:is(.resource-panel, .device-card, .authorization-card):not(.card-group) > * + * { margin-top: var(--space-4); }
:is(.resource-panel, .device-card, .authorization-card) > .message:empty { margin-top: 0; }
/* Card header: title, a one-line description under it, actions on the right. */
.resource-heading, .section-heading { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.resource-heading .kicker, .section-heading .kicker, .presence-card > header .kicker, .policy-revision-heading .kicker { display: none; }
.resource-heading h2, .section-heading h2, .presence-card h2, .partner-login-card h2 { margin: 0; color: var(--fg); font: 650 var(--fs-section)/1.3 var(--text); letter-spacing: -.005em; }
:is(.resource-heading, .section-heading) + .section-copy, .resource-panel > .resource-heading + p.section-copy { margin-top: 6px; }
.section-copy { max-width: 75ch; margin: 0; color: var(--fg-muted); font-size: var(--fs-body); line-height: 1.5; }
.resource-actions { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.resource-heading .resource-actions .button, .section-heading .button { min-height: var(--control-h-sm); padding: 0 12px; font-size: var(--fs-label); }
.resource-heading .icon-button, .section-heading .icon-button { flex: none; }
/* Subsections inside a card are separated by a rule. */
.resource-panel h3, .policy-revision-heading h3 { margin: 0; color: var(--fg); font: 650 var(--fs-subsection)/1.35 var(--text); }
:is(.resource-panel) > :is(h3, .policy-revision-heading, .policy-network-editor) { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.resource-panel h4 { margin: 0; font: 650 var(--fs-body)/1.35 var(--text); }
/* Status line of a card (loaded, failed, saved). */
.resource-message { color: var(--fg-muted); font: 400 var(--fs-label)/1.5 var(--text); }
.resource-message.error { color: var(--danger); }
.resource-message.success { color: var(--fg); }
.resource-pagination { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); color: var(--fg-subtle); font-size: var(--fs-small); }
.resource-panel > .resource-pagination { margin-top: var(--space-2); }
/* A card whose title is the page title: its actions sit on the right and its description beside them. */
:is(.resource-panel > .resource-heading, .device-card > .section-heading, .authorization-card > .section-heading):has(h2.sr-only) { float: right; max-width: 60%; margin: 0 0 var(--space-3) var(--space-5); }
:is(.resource-heading, .section-heading):has(h2.sr-only) + .section-copy { margin-top: 0; }
:is(.resource-heading, .section-heading):has(h2.sr-only) ~ :not(.section-copy) { clear: both; }
/* A list, an editor and related details: a group of cards, one per concern. */
.resource-panel.card-group { padding: 0; border: 0; border-radius: 0; background: none; }
.resource-panel.card-group > * + * { margin-top: var(--space-5); }
.resource-panel.card-group > .resource-heading + .section-copy { margin-top: 0; }
.resource-panel.card-group > .message:empty { margin-top: 0; }
.card-group > :is(form, .card-section, .saml-idp-card, .saml-metadata-import) { padding: var(--card-pad); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); }
.card-group > :is(form, .card-section, .saml-idp-card, .saml-metadata-import) > h3 { font-size: var(--fs-section); }
.card-group > .card-section { display: grid; gap: var(--space-4); }
.card-group > .card-section > form { padding-top: var(--space-4); border-top: 1px solid var(--border); }
.resource-panel[data-unconfirmed] > .card-section { display: none; }
/* An empty table shows nothing; the card's status line says that there is nothing to list. */
.data-table-shell:has(> .data-table > tbody:empty) { display: none; }

/* Forms inside cards: buttons keep their size; settings forms end in a footer with "Save". */
.console-view form > .button, .console-view form > .resource-actions, .partner-login-card .button { justify-self: start; }
.console-view .resource-actions { justify-content: flex-start; }
.console-view .resource-heading .resource-actions { justify-content: flex-end; }
:is(#security-settings-form, #helpdesk-settings-form, #email-settings-form, #privacy-settings-form, #sso-settings-form) > :is(label, select, input:not([type="checkbox"], [type="radio"])) { max-width: 560px; }
.form-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); }
form > .form-footer + .message:empty { display: none; }
.security-settings-choices, .sso-sensitive-apps { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.security-settings-choices label, .sso-sensitive-apps label { overflow-wrap: anywhere; }
#security-settings-devices-field:not([hidden]) ~ .security-settings-choices { margin-top: var(--space-2); }
#security-settings-sign-in-field > .freshness-note + label { margin-top: var(--space-2); }
.sso-settings-form { display: grid; gap: var(--space-3); }
.sso-settings-form > label { margin-top: var(--space-1); }
/* Until a recent confirmation, a settings card shows its call to action instead of an empty, disabled form. */
.confirm-gate { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); }
.confirm-gate > p:first-child { max-width: 72ch; margin: 0; color: var(--fg-muted); font-size: var(--fs-body); line-height: 1.5; }
.confirm-gate > .message { margin: 0; }
.resource-panel[data-unconfirmed] > :is(form, dl, .data-table-shell, h3, .message) { display: none; }
/* The helpdesk card belongs to the security settings: hidden with them, and while they wait for a confirmation. */
#security-settings-pane:is([hidden], [data-unconfirmed]) ~ #helpdesk-settings-card, #helpdesk-settings-card:has(> #helpdesk-settings-form[hidden]) { display: none; }

/* Protect: overview */
.metric-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.metric { min-width: 0; padding: var(--space-4) var(--space-5); }
.metric p { margin: 0; color: var(--fg-muted); font-size: var(--fs-label); font-weight: 600; }
.metric strong { display: block; margin-top: 6px; overflow-wrap: anywhere; color: var(--fg); font: 650 var(--fs-section)/1.3 var(--text); }
.metric small { display: block; margin-top: 2px; color: var(--fg-subtle); font-size: var(--fs-label); }
.overview-notice a { color: var(--fg); font-weight: 650; }
.presence-card { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); row-gap: var(--space-3); }
.presence-card > header { display: contents; }
.presence-card > * { grid-column: 1 / -1; }
.presence-card > h2 { grid-column: 1; grid-row: 1; }
.presence-card .presence-tag { grid-column: 2; grid-row: 1; align-self: start; }
.presence-card > p { max-width: 75ch; margin: 0; color: var(--fg-muted); font-size: var(--fs-body); line-height: 1.55; }
.presence-facts { display: grid; grid-template-columns: 1fr 1fr; margin: var(--space-1) 0 0; border-top: 1px solid var(--border); }
.presence-facts div { padding: var(--space-3) var(--space-4) 0 0; }
.presence-facts div + div { padding-left: var(--space-4); border-left: 1px solid var(--border); }
.presence-facts dt { color: var(--fg-subtle); font-size: var(--fs-small); }
.presence-facts dd { margin: 2px 0 0; color: var(--fg); font-size: var(--fs-label); font-weight: 600; }
.intent-approvals-list { display: grid; padding: 0; margin: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); }
.intent-approvals-list:empty { display: none; }
.intent-approval-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; min-width: 0; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.intent-approval-item:last-child { border-bottom: 0; }
.intent-approval-item:hover { background: var(--hover-tint); }
.intent-approval-open { border: 0; background: transparent; color: var(--fg); padding: 0; cursor: pointer; text-align: left; overflow-wrap: anywhere; font: 600 var(--fs-body)/1.4 var(--text); }
.intent-approval-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.intent-approval-expiry { color: var(--fg-subtle); font-size: var(--fs-small); }

/* Lists of rows: devices, phones, browsers, services. */
.credential-list, .phones-list, #sso-session-list, .oidc-client-list { min-width: 0; display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
.oidc-client-list:empty { display: none; }
.credential, .phone-item, #sso-session-list > li, .oidc-client-list > li { min-width: 0; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
:is(.credential, .phone-item, #sso-session-list > li, .oidc-client-list > li):last-child { border-bottom: 0; }
:is(.credential, .phone-item, #sso-session-list > li, .oidc-client-list > li):hover { background: var(--hover-tint); }
.credential { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.credential-symbol { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--fg-muted); font: 600 14px/1 var(--mono); }
.credential strong, .phone-item strong { display: block; overflow: hidden; color: var(--fg); font-size: var(--fs-body); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.credential small, .phone-item small { display: block; margin-top: 2px; color: var(--fg-subtle); font-size: var(--fs-small); line-height: 1.4; }
.remove-credential { width: 32px; height: 32px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--fg-subtle); cursor: pointer; font-size: 18px; }
.remove-credential:hover { border-color: var(--danger-border); color: var(--danger); }
.empty { padding: var(--space-5) var(--space-4); color: var(--fg-subtle); font-size: var(--fs-label); line-height: 1.55; }
.device-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.phone-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); }
.phone-item.is-revoked { opacity: .65; }
#sso-session-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--space-4); color: var(--fg-subtle); font-size: var(--fs-label); line-height: 1.45; }
#sso-session-list > li > strong { color: var(--fg); font-size: var(--fs-body); font-weight: 600; overflow-wrap: anywhere; }
#sso-session-list > li > small { grid-column: 1; color: var(--fg-subtle); font-size: var(--fs-small); }
#sso-session-list > li > .text-button { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.oidc-client-list > li { display: grid; gap: 4px; }
.oidc-client-list small { color: var(--fg-muted); overflow-wrap: anywhere; }
.oidc-client-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: end; }
/* Inbound federation certificates for Microsoft Entra ID (externals.js). */
.federation-certificates { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.federation-certificate-steps { margin: 0; padding-left: 1.4em; display: grid; gap: var(--space-2); }
.federation-certificate-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.federation-certificate-list > li { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: 8px; }
.federation-certificate-list > li[data-state="active"] { border-color: var(--signal); }
.federation-certificate-list code { overflow-wrap: anywhere; font-size: 0.85em; }
.oidc-client-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.oidc-client-wide, .oidc-client-form .message { grid-column: 1 / -1; }
.oidc-client-scopes { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.oidc-client-scopes legend { width: 100%; }
.oidc-client-check { display: flex; gap: var(--space-2); align-items: center; }
.oidc-client-form > .oidc-client-actions { padding-top: var(--space-4); border-top: 1px solid var(--border); }
.oidc-client-secret, .secret-output { display: block; margin: 0; padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-0); color: var(--fg); font: 500 var(--fs-label)/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.oidc-secret-details { display: grid; gap: var(--space-2); margin: 0; }
.oidc-secret-details dt { color: var(--fg-subtle); font-size: var(--fs-small); }
.oidc-secret-details dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.saml-idp-card, .saml-metadata-import { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.saml-idp-details { display: grid; gap: var(--space-2); margin: 0; }
.saml-idp-details dt { color: var(--fg-subtle); font-size: var(--fs-small); }
.saml-idp-details dd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; overflow-wrap: anywhere; }
.saml-metadata-import > .button { justify-self: start; }

/* Tables: column headers, row hover, actions on the right. */
.data-table-shell { min-width: 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
.data-table { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; }
.data-table th, .data-table td { min-width: 0; padding: 10px var(--space-3); border-bottom: 1px solid var(--line-row); text-align: left; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table th { height: 38px; background: var(--surface-2); color: var(--fg-muted); font: 600 var(--fs-small)/1.3 var(--text); }
.data-table td { color: var(--fg-muted); font-size: var(--fs-label); line-height: 1.45; overflow-wrap: anywhere; }
.data-table tbody tr:hover td { background: var(--hover-tint); }
.data-table td:first-child { color: var(--fg); font-weight: 600; }
.data-table code { color: var(--fg-subtle); font: 500 var(--fs-small)/1.45 var(--mono); }
.people-table th:first-child, .people-table td:first-child { width: 26%; }
.people-table th:nth-child(2) { width: 15%; }
.people-table th:nth-child(3) { width: 12%; }
.people-table th:nth-child(4) { width: 14%; }
.people-table th:last-child { width: 33%; }
.sessions-table th:first-child, .sessions-table td:first-child { width: 29%; }
.audit-table th:first-child, .audit-table td:first-child { width: 27%; }
.data-table .control-identity small, .data-table .control-cell small { display: block; margin-top: 2px; color: var(--fg-subtle); font: 400 var(--fs-small)/1.4 var(--text); }
.data-table .status-cell .status-badge { max-width: 100%; white-space: normal; }
.data-table .status-cell.active .status-badge::before { background: var(--success); }
.data-table .status-cell.elevated .status-badge { color: var(--fg); }
.data-table .status-cell.elevated .status-badge::before { background: var(--fg); }
.data-table .status-cell.disabled .status-badge { border-color: var(--danger-border); background: var(--danger-badge); color: var(--danger); }
.data-table .status-cell.disabled .status-badge::before { background: var(--danger); }
.data-table .control-action { text-align: right; }
.data-table .control-empty { padding: var(--space-6) var(--space-4); color: var(--fg-subtle); font-size: var(--fs-label); line-height: 1.55; }
.data-table .control-empty strong, .data-table .control-empty span { display: block; }
.data-table .control-empty strong { margin-bottom: 4px; color: var(--fg); font-weight: 600; }
.data-table .muted { color: var(--fg-subtle); }
/* Computers: the first column holds the platform, the host name and the server role on one wrapping
   line, the details below; a row header is not styled as a column header. */
.computers-table thead th:first-child { width: 30%; }
.computers-table tbody th { height: auto; background: none; color: var(--fg); font: 600 var(--fs-label)/1.45 var(--text); overflow-wrap: anywhere; }
.computers-table tbody tr:hover th { background: var(--hover-tint); }
.computers-table .computer-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.computers-table .computer-host { min-width: 0; overflow-wrap: anywhere; }
.computers-table .status-badge { max-width: 100%; white-space: normal; }
.computers-table .row-actions .text-button + .text-button { margin-left: 12px; }
.computers-table .computer-note { display: block; margin-top: 4px; color: var(--fg-subtle); font: 400 var(--fs-small)/1.4 var(--text); overflow-wrap: anywhere; }
.platform-badge { flex: none; display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--fg-muted); font: 600 var(--fs-small)/1.2 var(--text); white-space: nowrap; }
.data-primary, .data-secondary { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-secondary { margin-top: 2px; color: var(--fg-subtle); font-size: var(--fs-small); }
.row-action { min-height: 28px; display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: transparent; color: var(--fg-muted); padding: 0 var(--space-2); cursor: pointer; font: 600 var(--fs-small)/1 var(--text); white-space: nowrap; }
.row-action:hover:not(:disabled) { border-color: var(--fg-subtle); background: var(--surface-3); color: var(--fg); }
.row-action.danger, .row-action.danger-action { color: var(--danger); }
.row-action.danger:hover:not(:disabled), .row-action.danger-action:hover:not(:disabled) { border-color: var(--danger-border); background: var(--danger-hover); color: var(--danger); }
.row-action:disabled { border-color: var(--border); color: var(--fg-subtle); cursor: not-allowed; opacity: .7; }
.row-action-group { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.person-row .control-action { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.person-row .control-action .row-action + .row-action { margin-left: 0; }
.intent-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.intent-row-actions button + button { margin-left: 0; }
/* Loading and empty states. */
.resource-placeholder { min-height: 0; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-5); border: 1px dashed var(--border-strong); border-radius: var(--radius); background: transparent; }
.resource-placeholder > div { display: grid; gap: 2px; }
.resource-placeholder strong { color: var(--fg); font: 600 var(--fs-body)/1.3 var(--text); }
.resource-placeholder small { color: var(--fg-subtle); font-size: var(--fs-label); line-height: 1.5; }
.placeholder-index { display: none; }
.loading-placeholder > span { width: 18px; height: 18px; flex: none; border: 2px solid var(--border-strong); border-top-color: var(--fg); border-radius: 50%; animation: precision-spin .8s linear infinite; }
@keyframes precision-spin { to { transform: rotate(360deg); } }
/* Filters above a table. */
.filter-bar { min-width: 0; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(230px, .7fr) auto; align-items: end; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.filter-grid { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(135px, 1fr)); gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.filter-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.console-view .filter-bar > .button { justify-self: end; }
.check-control { min-height: var(--control-h); display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-control); border-radius: var(--radius); background: var(--field); padding: 6px 12px; cursor: pointer; }
.check-control input { flex: none; }
.check-control span { min-width: 0; display: grid; gap: 1px; }
.check-control strong { color: var(--fg); font: 600 var(--fs-label)/1.2 var(--text); }
.check-control small { overflow: hidden; color: var(--fg-subtle); font: 400 var(--fs-small)/1.2 var(--text); text-overflow: ellipsis; white-space: nowrap; }
/* Write-only roles: what the browser can and cannot show. */
.write-only-boundary { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); }
.write-only-boundary h3, .write-only-boundary p { margin: 0; }
.write-only-boundary > p:not(.kicker):not(.message) { max-width: 72ch; color: var(--fg-muted); font-size: var(--fs-label); line-height: 1.55; }

/* Manage: organization */
.control-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
.control-principles div { min-width: 0; padding: var(--space-4) var(--space-5); }
.control-principles div + div { border-left: 1px solid var(--border); }
.control-principles span, .control-principles strong { display: block; }
.control-principles span { color: var(--fg-subtle); font-size: var(--fs-small); }
.control-principles strong { margin-top: 2px; color: var(--fg); font-size: var(--fs-label); font-weight: 600; }
.setup-checklist-item small { display: block; margin-top: 4px; color: var(--fg-subtle); }
.tenant-profile-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.tenant-profile-facts div { min-width: 0; padding: var(--space-3) var(--space-4); }
.tenant-profile-facts div + div { border-left: 1px solid var(--border); }
.tenant-profile-facts dt, .tenant-profile-pending dt { color: var(--fg-subtle); font-size: var(--fs-small); }
.tenant-profile-facts dd, .tenant-profile-pending dd { margin: 2px 0 0; overflow-wrap: anywhere; color: var(--fg); font-size: var(--fs-label); }
.tenant-profile-facts code, .tenant-profile-pending code { color: var(--fg); font: 500 var(--fs-small)/1.45 var(--mono); }
.tenant-profile-form { grid-template-columns: minmax(240px, 480px) auto; align-items: end; justify-content: start; }
.tenant-profile-pending { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--warning-border); border-radius: var(--radius); background: var(--warning-tint); }
.tenant-profile-pending h3, .tenant-profile-pending p, .tenant-profile-pending dl { margin: 0; }
.tenant-profile-pending > p { max-width: 78ch; color: var(--fg-muted); font-size: var(--fs-label); line-height: 1.55; }
.tenant-profile-pending dl { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-3); }

/* Manage: roles and hierarchy (a proposal read on the Presence authenticator) */
.iam-handoff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.iam-handoff-grid label:first-child, .iam-handoff-grid label:last-child { grid-column: 1 / -1; }
.iam-permission-grid { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.iam-permission-grid label { min-height: 40px; display: flex; align-items: center; gap: 10px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: var(--fs-label); }
.iam-handoff-result { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(240px, 300px); gap: var(--space-5); padding: var(--space-5); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); }
.iam-handoff-result > div:first-child { align-self: center; }
.iam-handoff-result h3 { margin: 0 0 var(--space-3); }
.iam-handoff-result :is(#iam-handoff-match, #tenant-hierarchy-handoff-match) { display: block; color: var(--fg); font: 700 32px/1.1 var(--mono); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.iam-handoff-result time { display: block; margin-top: var(--space-2); color: var(--fg-muted); font: 500 var(--fs-small)/1.4 var(--mono); }
.iam-handoff-result .pairing-qr { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.iam-handoff-result dl, .iam-handoff-result > p { grid-column: 1; }
.iam-handoff-result > p { margin: 0; color: var(--fg-muted); font-size: var(--fs-label); line-height: 1.55; }
.iam-handoff-result > .resource-actions, .iam-handoff-result > .handoff-result-import, .iam-handoff-result > #iam-handoff-confirmation, .iam-handoff-result > #tenant-hierarchy-handoff-confirmation { grid-column: 1 / -1; }
.handoff-result-import { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
.handoff-result-import h4, .handoff-result-import p { margin: 0; }
.handoff-result-import p { max-width: 78ch; color: var(--fg-muted); font-size: var(--fs-label); line-height: 1.55; }
.handoff-result-import textarea { min-height: 96px; font: 500 var(--fs-small)/1.45 var(--mono); }

/* Manage: access policy */
.policy-rollout { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.policy-slot { min-width: 0; display: flex; flex-direction: column; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.policy-slot > span { color: var(--fg-muted); font-size: var(--fs-small); font-weight: 600; }
.policy-slot > strong { margin-top: 4px; color: var(--fg); font: 650 var(--fs-subsection)/1.3 var(--text); }
.policy-slot > code { display: block; margin-top: 4px; overflow: hidden; color: var(--fg-subtle); font: 500 var(--fs-small)/1.4 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.policy-slot > small { display: block; margin-top: auto; padding-top: var(--space-3); color: var(--fg-subtle); font-size: var(--fs-small); line-height: 1.5; }
.policy-slot-active[data-populated="true"] { border-color: var(--border-strong); box-shadow: inset 3px 0 0 var(--success); }
.policy-slot-shadow[data-populated="true"] { border-color: var(--border-strong); background: var(--surface-3); }
.policy-rollout-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.policy-rollout-actions .button:first-child { margin-right: auto; }
.policy-revision-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
/* Small state labels next to a subsection title stay uppercase. */
.policy-revision-heading > span { color: var(--fg-subtle); font: 600 var(--fs-kicker)/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.policy-network-editor { display: grid; gap: var(--space-3); }
.policy-network-editor > .section-copy { color: var(--fg-muted); }
.policy-network-editor label { color: var(--fg); }
.policy-network-editor textarea { min-height: 180px; tab-size: 2; font: 500 var(--fs-small)/1.55 var(--mono); }
.policy-network-editor input { max-width: 240px; }
.policy-network-editor .editor-help { margin: calc(-1 * var(--space-1)) 0 0; }
.policy-table th:first-child, .policy-table td:first-child { width: 18%; }
.policy-table th:nth-child(2), .policy-table td:nth-child(2) { width: 27%; }
.policy-table .policy-digest { font-family: var(--mono); }
.policy-table .policy-digest code { display: block; overflow: hidden; color: var(--fg-subtle); text-overflow: ellipsis; white-space: nowrap; }
.policy-table .policy-version { color: var(--fg); font: 650 var(--fs-body)/1.2 var(--text); }
.policy-table .policy-version small { font-family: var(--mono); }
.policy-handoff-match { font: 700 2.5rem/1.1 var(--mono); letter-spacing: .25em; font-variant-numeric: tabular-nums; }
#policy-handoff-detail { overflow-wrap: anywhere; }
#policy-schedule-message, #policy-create-source { overflow-wrap: anywhere; }
:is(#policy-schedule-tools, #policy-network-condition-tools, #policy-auth-condition-tools, #policy-portal-tools) { margin-block: var(--space-2); padding-block: var(--space-1) var(--space-3); border-block: 1px solid var(--border); }
:is(#policy-schedule-tools, #policy-network-condition-tools, #policy-auth-condition-tools, #policy-portal-tools) > :not(summary) { margin-block: var(--space-3) 0; }
:is(#policy-schedule-tools, #policy-network-condition-tools, #policy-auth-condition-tools, #policy-portal-tools) > .editor-help { color: var(--fg-muted); }
:is(#policy-schedule-days, #policy-network-values, #policy-auth-methods) { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-2); margin-block: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
:is(#policy-schedule-days, #policy-network-values, #policy-auth-methods, #policy-auth-inputs) legend { padding: 0 4px; color: var(--fg-muted); font-size: var(--fs-small); }
:is(#policy-schedule-days, #policy-network-values, #policy-auth-methods) label { display: flex; align-items: center; gap: var(--space-2); margin: 0; min-height: 40px; }
#policy-auth-inputs { min-width: 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); }
#policy-auth-inputs > :not(legend) { margin-block: var(--space-3) 0; }
#policy-auth-condition-tools :is(input, select) { min-width: 0; max-width: 100%; }
#policy-schedule-tools .field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
:is(#policy-schedule-review-result, #policy-network-condition-review-result, #policy-auth-review-result, #policy-portal-review-result) { white-space: pre-wrap; overflow-wrap: anywhere; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); }
.policy-dialog { width: min(820px, calc(100% - 32px)); }
.policy-dialog textarea { min-height: 300px; tab-size: 2; white-space: pre; font: 500 var(--fs-small)/1.55 var(--mono); }
.policy-dialog :is(#policy-portal-clients, #policy-portal-groups) { min-height: 100px; white-space: pre-wrap; overflow-wrap: anywhere; }
.policy-dialog textarea[readonly] { border-color: var(--border); background: var(--surface-0); color: var(--fg-muted); cursor: default; }
.policy-dialog-identity { min-width: 0; display: grid; gap: 4px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-0); }
.policy-dialog-identity > span { color: var(--fg-subtle); font-size: var(--fs-small); }
.policy-dialog-identity > strong { color: var(--fg); font: 650 var(--fs-section)/1.3 var(--text); }
.policy-dialog-identity > code { overflow-wrap: anywhere; color: var(--fg-muted); font: 500 var(--fs-small)/1.5 var(--mono); }
.policy-transition-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-0); }
.policy-transition-summary div { min-width: 0; padding: var(--space-3); }
.policy-transition-summary div + div { border-left: 1px solid var(--border); }
.policy-transition-summary dt { color: var(--fg-subtle); font-size: var(--fs-small); }
.policy-transition-summary dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--fg); font: 500 var(--fs-small)/1.45 var(--mono); }
.policy-approval-summary { grid-template-columns: minmax(0, 1fr); }
.policy-approval-summary div + div { border-left: 0; border-top: 1px solid var(--border); }
.policy-approval-zones { margin: 0; padding-left: 1.2em; }
.policy-approval-activation { font-weight: 700; }
.policy-simulation-result { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-0); }
.policy-simulation-result > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.policy-simulation-result > header strong { color: var(--fg); font: 650 var(--fs-section)/1.3 var(--text); }
.policy-simulation-result[data-decision="allow"] > header strong { color: var(--success-text); }
.policy-simulation-result[data-decision="deny"] > header strong { color: var(--danger); }
.policy-simulation-result dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.policy-simulation-result dl div { min-width: 0; padding: var(--space-3) var(--space-4); }
.policy-simulation-result dl div + div { border-left: 1px solid var(--border); }
.policy-simulation-result dt { color: var(--fg-subtle); font-size: var(--fs-small); }
.policy-simulation-result dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--fg-muted); font: 500 var(--fs-small)/1.5 var(--mono); }
.policy-simulation-result > small { display: block; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); color: var(--fg-subtle); font-size: var(--fs-small); }

/* Manage: third-party requests */
.intent-admin-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3) var(--space-4); align-items: end; }
.intent-admin-form .wide, .intent-admin-form fieldset { grid-column: 1 / -1; }
.intent-admin-form textarea { font: 500 var(--fs-small)/1.6 var(--mono); }
.intent-client-secret { display: grid; gap: var(--space-3); }
.intent-client-secret h3 { margin: 0; font: 650 var(--fs-subsection)/1.35 var(--text); }
.intent-client-secret p { margin: 0; }

/* Protect: review intent and the execution receipt */
.authorization-card { min-width: 0; }
.authorization-fields { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, .35fr); gap: var(--space-4); max-width: 720px; }
.authorization-fields label:first-child { grid-column: 1 / -1; }
.authorization-card form { min-width: 0; }
.authorization-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.authorization-review, .authorization-result { min-width: 0; padding-top: var(--space-5); border-top: 1px solid var(--border); }
.intent-review-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); }
.intent-review-heading p { margin: 0 0 4px; color: var(--fg-subtle); font-size: var(--fs-small); }
.intent-review-heading h3 { margin: 0; font: 650 var(--fs-subsection)/1.35 var(--text); }
.intent-metadata { display: grid; grid-template-columns: 1fr 1fr; margin: var(--space-4) 0; border: 1px solid var(--border); border-radius: var(--radius); }
.intent-metadata div { min-width: 0; padding: var(--space-3); border-bottom: 1px solid var(--border); }
.intent-metadata div:nth-child(even) { border-left: 1px solid var(--border); }
.intent-metadata div:nth-last-child(-n + 2) { border-bottom: 0; }
.intent-metadata dt, .intent-digest-line span { color: var(--fg-subtle); font-size: var(--fs-small); }
.intent-metadata dd { margin: 4px 0 0; overflow: hidden; color: var(--fg); font-size: var(--fs-label); text-overflow: ellipsis; white-space: nowrap; }
.intent-metadata code { font: 500 var(--fs-small)/1.4 var(--mono); }
.intent-digest-line { min-width: 0; display: grid; gap: 4px; }
.intent-digest-line code { display: block; overflow: hidden; color: var(--fg-muted); font: 500 var(--fs-small)/1.4 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.authorization-review > p { margin: var(--space-3) 0 0; color: var(--fg-subtle); font-size: var(--fs-small); line-height: 1.55; }
.proof-approval-controls { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.proof-approval-controls p { margin: 0 0 var(--space-3); color: var(--fg-muted); font-size: var(--fs-label); }
.proof-approval-controls > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
/* The ProofFlow Match code is read and compared: large, grouped, mono. */
.intent-match-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); }
.intent-match-line span { color: var(--fg-muted); font-size: var(--fs-small); font-weight: 600; }
.intent-match-line strong { color: var(--fg); font: 700 28px/1 var(--mono); letter-spacing: .16em; font-variant-numeric: tabular-nums; }
/* An agent's request (design 2026-10-27 section 10.3): a fixed banner whose kind word and marker come from the
   console, never from tenant text. */
.intent-agent-banner { display: grid; gap: 4px; margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-left: 4px solid var(--signal); border-radius: var(--radius); background: var(--surface-2); }
.intent-agent-banner [data-part="kind"] { color: var(--fg-muted); font-size: var(--fs-small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.intent-agent-banner [data-part="kind"]::before { content: "\25C6\00A0"; color: var(--signal); }
.intent-agent-banner [data-part="headline"] { color: var(--fg); font-weight: 650; overflow-wrap: anywhere; }
.intent-agent-banner [data-part="vendor"], .intent-agent-banner [data-part="progress"] { color: var(--fg-muted); font-size: var(--fs-small); overflow-wrap: anywhere; }
.intent-signed-details { margin: var(--space-3) 0; }
.intent-signed-details summary { cursor: pointer; color: var(--fg-muted); font-size: var(--fs-small); font-weight: 600; }
.intent-signed-details dd { font-family: var(--mono); overflow-wrap: anywhere; }
.authorization-result { display: grid; gap: var(--space-3); }
.authorization-result div { min-width: 0; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-3); }
.authorization-result span { color: var(--fg-subtle); font-size: var(--fs-small); }
.authorization-result strong, .authorization-result code { overflow: hidden; color: var(--fg); font-size: var(--fs-label); text-overflow: ellipsis; white-space: nowrap; }
.authorization-result code { color: var(--fg-muted); font-family: var(--mono); }
.authorization-result > .button { justify-self: start; }
.execution-receipt { min-width: 0; padding: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); }
.execution-heading { display: flex !important; grid-template-columns: none !important; align-items: start; justify-content: space-between; gap: var(--space-4); }
.authorization-result .execution-heading > div { display: block !important; }
.execution-heading p { margin: 0 0 4px; color: var(--fg-subtle); font-size: var(--fs-small); }
.execution-heading h3 { margin: 0; font: 650 var(--fs-subsection)/1.35 var(--text); }
.execution-metadata { display: grid; grid-template-columns: 1fr .45fr; margin: var(--space-4) 0 0; border-top: 1px solid var(--border); }
.execution-metadata div { display: block; min-width: 0; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--border); }
.execution-metadata div:first-child { grid-column: 1 / -1; }
.execution-metadata div:nth-child(odd):not(:first-child):not(.wide) { padding-left: 10px; }
.execution-metadata div.wide { grid-column: 1 / -1; padding-left: 0; }
.execution-metadata dt { color: var(--fg-subtle); font-size: var(--fs-small); }
.execution-metadata dd { margin: 4px 0 0; overflow: hidden; color: var(--fg-muted); font-size: var(--fs-small); text-overflow: ellipsis; white-space: nowrap; }
.execution-timeline { display: grid; margin: var(--space-4) 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.execution-timeline li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--fg-muted); font-size: var(--fs-small); }
.execution-timeline li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-muted); }
.execution-timeline li[data-outcome="failure"]::before { background: var(--danger); }
/* The start of a chain whose earlier history was never recorded (migration 0304): a hollow marker, the note in full. */
.execution-timeline li[data-gap]::before { background: transparent; border: 1px dashed var(--fg-muted); }
.execution-timeline li[data-gap] span { grid-column: 2 / -1; font-style: italic; }
.execution-timeline small { color: var(--fg-subtle); font: 500 11px/1.2 var(--mono); white-space: nowrap; }
.federation-flow #authorization-form { display: none; }

/* Flow cards (partner sign-in, phone approval, service sign-in) */
.partner-login-card { display: grid; gap: var(--space-4); }
.partner-login-card > div > .kicker { margin-bottom: var(--space-2); }
.partner-login-card h2 { margin-bottom: var(--space-2); }
.partner-login-card p { max-width: 75ch; margin: 0; color: var(--fg-muted); line-height: 1.55; }
.partner-login-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-4) 0; }
.partner-login-card dt { color: var(--fg-subtle); font-size: var(--fs-small); }
.partner-login-card dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.partner-login-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Directory, groups, Presence inventories */
.group-dialog { max-width: 760px; }
.policy-group-picker { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.policy-group-picker .dialog-actions { flex-wrap: wrap; margin: 0; }
.policy-group-picker select { max-width: 100%; min-width: 0; }
#group-form { display: grid; gap: var(--space-3); }
#group-form .privacy-note { padding: 0; border: 0; background: none; }
#group-form .button { justify-self: start; }
.group-authority-ack, .directory-independent-ack { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: var(--space-3); font: 400 var(--fs-label)/1.5 var(--text); cursor: pointer; }
.directory-independent-ack { margin-top: var(--space-4); }
.group-members-panel { border-top: 1px solid var(--border); margin-top: var(--space-6); padding-top: var(--space-6); }
.group-members-panel > details { margin-bottom: var(--space-3); }
#group-policy-reference { margin-top: var(--space-2); font: 400 var(--fs-small)/1.5 var(--mono); }
.group-members-list { list-style: none; padding: 0; margin: var(--space-4) 0; border: 1px solid var(--border); border-radius: var(--radius); }
.group-members-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.group-members-list li:last-child { border-bottom: 0; }
.group-members-list li span { min-width: 0; }
.group-members-list strong, .group-members-list code, #groups-list small, #groups-list strong { display: block; }
.group-members-list code, #group-identity, #group-operation-id { overflow-wrap: anywhere; font-size: var(--fs-small); }
#groups-list small { max-width: 32rem; overflow-wrap: anywhere; color: var(--fg-subtle); margin-top: 2px; font-weight: 400; }
#group-pending .dialog-actions { flex-wrap: wrap; }
.presence-inventory-list { display: grid; gap: var(--space-3); padding: 0; margin: 0; list-style: none; }
.presence-inventory-item { min-width: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.presence-inventory-item code { display: block; overflow-wrap: anywhere; margin: var(--space-2) 0; font: 400 var(--fs-small)/1.6 var(--mono); }
.presence-inventory-item .inventory-meta { margin: 4px 0; font-size: var(--fs-label); line-height: 1.6; color: var(--fg-muted); }
#presence-inventory-person, #passkey-inventory-person, .passkey-inventory-item strong { overflow-wrap: anywhere; }
#passkey-inventory-next { margin-top: var(--space-5); }
.directory-journal-list { display: grid; gap: var(--space-3); }
.directory-journal-record { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.directory-journal-record code, .directory-pending-references code { overflow-wrap: anywhere; font: 400 var(--fs-small)/1.6 var(--mono); }
.directory-journal-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); }
.directory-journal-heading h3 { margin: 0; font-size: var(--fs-subsection); }
.directory-journal-heading > span { color: var(--fg-muted); font-size: var(--fs-small); }
.directory-pending-warning { margin-top: var(--space-4); }
.directory-pending-references { max-height: 160px; overflow: auto; padding-left: var(--space-5); }

/* Approver phones: the list, the enrollment QR and the typed confirmation code */
.phone-qr { width: min(100%, 280px); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius); background: #fff; padding: 12px; }
.phone-qr svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }
.phone-enroll-layout { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.phone-enroll-steps { min-width: 0; }
.phone-code-input { font: 700 22px/1 var(--mono); letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.phone-code-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); }
.phone-code-line span { color: var(--fg-muted); font-size: var(--fs-small); font-weight: 600; }
.phone-approval-code { color: var(--fg); font: 700 clamp(28px, 6vw, 40px)/1 var(--mono); letter-spacing: .18em; font-variant-numeric: tabular-nums; }

/* Dialogs */
dialog { width: min(620px, calc(100% - 32px)); max-height: calc(100vh - 32px); overflow: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 0; background: var(--surface-1); color: var(--fg); box-shadow: 0 24px 64px var(--shadow); }
#recovery-dialog { width: min(780px, calc(100% - 32px)); }
#totp-dialog { width: min(700px, calc(100% - 32px)); }
dialog::backdrop { background: var(--scrim); }
dialog form { display: block; }
.dialog-bar { position: sticky; top: 0; z-index: 1; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-left: var(--space-6); border-bottom: 1px solid var(--border); background: var(--surface-1); color: var(--fg-muted); font: 600 var(--fs-label)/1.2 var(--text); }
.dialog-close { width: 48px; height: 48px; flex: none; border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; font-size: 22px; }
.dialog-close:hover { color: var(--fg); }
.dialog-body { display: grid; gap: var(--space-4); padding: var(--space-6); }
.dialog-body > .kicker { margin-bottom: calc(-1 * var(--space-2)); }
.dialog-body h2 { margin: 0; font: 650 22px/1.25 var(--text); letter-spacing: -.01em; }
.dialog-body > p:not(.kicker):not(.privacy-note):not(.freshness-note):not(.critical-note):not(.message) { margin: 0; color: var(--fg-muted); font-size: var(--fs-body); line-height: 1.6; }
.dialog-body > .button, .dialog-body > form > .button, dialog .dialog-body .button { justify-self: start; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Risk explanation: digests and signal texts are long unbroken strings, so they wrap inside the dialog
   instead of widening it. */
#risk-detail-dialog .dialog-body > * { min-width: 0; overflow-wrap: anywhere; }
.risk-evidence { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; }
.risk-evidence dt { color: var(--fg-muted); }
.risk-evidence dd { min-width: 0; margin: 0; }
.risk-evidence code { overflow-wrap: anywhere; word-break: break-all; }
@media (max-width: 640px) { .risk-evidence { grid-template-columns: minmax(0, 1fr); } .risk-evidence dd + dt { margin-top: var(--space-2); } }
#password-change-form, #password-change-pending, #password-change-acknowledgement { display: grid; gap: var(--space-4); }
#password-change-form .section-copy { margin: 0; }
#password-change-pending > p { margin: 0; color: var(--fg-muted); font-size: var(--fs-body); line-height: 1.6; }
.security-settings-choices label { color: var(--fg); }
/* Choices rendered into a wrapper (approver phones, sensitive applications) keep the list's row spacing. */
:is(.security-settings-choices, .sso-sensitive-apps) > div { min-width: 0; display: grid; gap: var(--space-2); }
#factor-reset-fields { display: grid; gap: var(--space-4); }
#step-up-choice .authorization-actions { margin-top: var(--space-3); }
.recovery-code-set { padding: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-0); }
#recovery-prepare-fields { display: grid; gap: var(--space-4); }
.recovery-code-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.recovery-code-heading strong { color: var(--fg); font-size: var(--fs-label); font-weight: 650; }
#recovery-activation-expiry { display: block; margin: var(--space-3) 0; color: var(--fg); font: 500 var(--fs-small)/1.5 var(--mono); }
#download-recovery-codes { margin-top: var(--space-5); }
.recovery-code-set > p { margin: var(--space-3) 0 var(--space-4); color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.5; }
.recovery-code-set ol { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-6); margin: 0; padding-left: var(--space-6); }
.recovery-code-set li { color: var(--fg); font: 500 var(--fs-small)/1.45 var(--mono); overflow-wrap: anywhere; }
.recovery-code-set li::marker { color: var(--fg-subtle); }
.recovery-acknowledgement { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: var(--space-3); margin: var(--space-5) 0 var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); color: var(--fg-muted); font: 400 var(--fs-small)/1.5 var(--text); }
.recovery-code-set .privacy-note { margin-top: var(--space-3); }
#factor-reset-code { display: block; margin: var(--space-3) 0; color: var(--fg); font: 500 var(--fs-small)/1.5 var(--mono); overflow-wrap: anywhere; user-select: all; }
#factor-reset-template { width: 100%; min-height: 96px; resize: vertical; }
.totp-state { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px var(--space-4); padding: var(--space-3) 0; border-block: 1px solid var(--border); }
.totp-state span { grid-row: 1 / 3; color: var(--fg-subtle); font-size: var(--fs-small); }
.totp-state strong { color: var(--fg); font: 650 var(--fs-subsection)/1.3 var(--text); }
.totp-state strong.active { color: var(--success-text); }
.totp-state small { color: var(--fg-subtle); font-size: var(--fs-small); }
.oath-mode-selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-0); }
.oath-mode { min-height: 34px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg-muted); font: 600 var(--fs-label)/1.2 var(--text); cursor: pointer; }
.oath-mode:hover { color: var(--fg); background: var(--surface-2); }
.oath-mode.active { color: var(--fg); background: var(--surface-3); }
.totp-pane { display: grid; gap: var(--space-4); }
.totp-pane > p:not(.critical-note) { margin: 0; color: var(--fg-muted); font-size: var(--fs-label); line-height: 1.6; }
.totp-secret-card { min-width: 0; display: grid; gap: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-0); padding: var(--space-4); }
.totp-secret-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.totp-secret-card span { color: var(--fg-subtle); font-size: var(--fs-small); }
.totp-secret-card strong { color: var(--fg-muted); font: 500 var(--fs-small)/1 var(--mono); }
.totp-secret-card code { min-width: 0; color: var(--fg); font: 600 clamp(14px, 3vw, 18px)/1.45 var(--mono); letter-spacing: .1em; overflow-wrap: anywhere; }
.totp-copy-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.totp-qr-setup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); min-width: 0; }
.totp-qr-setup canvas { width: 224px; max-width: 100%; height: auto; flex: 0 1 224px; border-radius: var(--radius); background: #fff; image-rendering: pixelated; }
.totp-qr-setup > div { flex: 1 1 180px; min-width: 0; }
.totp-qr-setup h3 { margin: 0 0 var(--space-3); font-size: var(--fs-subsection); }
.totp-qr-setup p { color: var(--fg-muted); font-size: var(--fs-label); line-height: 1.6; }
.totp-qr-setup time { display: block; color: var(--fg); font: 500 var(--fs-small)/1.6 var(--mono); }
.ocra-enrollment-setup { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.ocra-enrollment-setup h3, .ocra-enrollment-setup p { margin: 0; }
.ocra-enrollment-setup p { color: var(--fg-muted); font-size: var(--fs-label); line-height: 1.6; }
.ocra-enrollment-setup time { color: var(--fg); font: 500 var(--fs-small)/1.6 var(--mono); }
.ocra-challenge-card { min-width: 0; display: grid; gap: var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-0); padding: var(--space-4); }
.ocra-challenge-card span { color: var(--fg-subtle); font-size: var(--fs-small); }
.ocra-challenge-card code { color: var(--fg); font: 600 var(--fs-small)/1.55 var(--mono); letter-spacing: .04em; overflow-wrap: anywhere; }
.ocra-challenge-card small { color: var(--fg-subtle); font-size: 11px; line-height: 1.5; }
.hotp-resynchronization { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.hotp-resynchronization h3, .hotp-resynchronization p { margin: 0; }
.hotp-resynchronization p { color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.55; }
.hotp-code-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

/* Presence pairing */
.presence-pairing-dialog { width: min(980px, calc(100% - 32px)); }
.pairing-body { min-height: 480px; }
.pairing-body section { min-width: 0; }
#presence-pairing-start { display: grid; gap: var(--space-4); }
.pairing-contract { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-0); }
.pairing-contract div { min-width: 0; display: grid; gap: 4px; padding: var(--space-3) var(--space-4); }
.pairing-contract div + div { border-left: 1px solid var(--border); }
.pairing-contract span { color: var(--fg-subtle); font-size: var(--fs-small); }
.pairing-contract strong { color: var(--fg); font: 600 var(--fs-label)/1.3 var(--text); }
.pairing-layout { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(320px, 1.15fr); gap: clamp(24px, 5vw, 48px); align-items: center; }
.pairing-qr-column { min-width: 0; display: grid; justify-items: center; gap: var(--space-4); }
.pairing-qr { width: min(100%, 320px); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius); background: #fff; padding: 14px; }
.pairing-qr:empty::before { content: "A preparar QR"; color: #090908; font: 600 12px/1 var(--text); }
.pairing-qr svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }
.pairing-progress { min-width: 0; display: grid; gap: var(--space-4); }
.pairing-progress > p:not(.kicker) { margin: 0; color: var(--fg-muted); font-size: var(--fs-label); line-height: 1.6; }
.pairing-clock { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-block: 1px solid var(--border); }
.pairing-clock span { color: var(--fg-subtle); font-size: var(--fs-small); }
.pairing-clock strong { color: var(--fg); font: 700 24px/1 var(--mono); font-variant-numeric: tabular-nums; }
.pairing-steps { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-0); }
.pairing-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; min-height: 44px; border-bottom: 1px solid var(--border); color: var(--fg-subtle); }
.pairing-steps li:last-child { border-bottom: 0; }
.pairing-steps li span { display: grid; place-items: center; align-self: stretch; border-right: 1px solid var(--border); font: 500 11px/1 var(--mono); }
.pairing-steps li strong { padding: 0 var(--space-3); font: 600 var(--fs-label)/1.3 var(--text); }
.pairing-steps li.active { color: var(--fg); }
.pairing-steps li.complete { color: var(--success-text); }
.pairing-review { display: grid; gap: var(--space-4); }
.pairing-review-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); }
.pairing-review > p:not(.privacy-note) { margin: 0; color: var(--fg-muted); font-size: var(--fs-label); line-height: 1.6; }
.pairing-review-core, .pairing-measurements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-0); }
.pairing-review-core div, .pairing-measurements article { min-width: 0; display: grid; gap: 4px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.pairing-review-core div:nth-child(even), .pairing-measurements article:nth-child(even) { border-left: 1px solid var(--border); }
.pairing-review-core div:nth-last-child(-n + 2), .pairing-measurements article:nth-last-child(-n + 2) { border-bottom: 0; }
.pairing-review-core .wide { grid-column: 1 / -1; border-left: 0; }
.pairing-review-core dt, .pairing-measurements span { color: var(--fg-subtle); font-size: var(--fs-small); }
.pairing-review-core dd { margin: 0; overflow-wrap: anywhere; color: var(--fg); font: 500 var(--fs-small)/1.45 var(--mono); }
.pairing-review-core code { color: var(--fg); font: inherit; }
.pairing-measurements strong { overflow-wrap: anywhere; color: var(--fg); font: 600 var(--fs-label)/1.3 var(--text); }
.pairing-measurements code { overflow: hidden; color: var(--fg-subtle); font: 500 11px/1.35 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.pairing-complete { min-height: 400px; display: grid; place-content: center; justify-items: start; gap: var(--space-4); }
.pairing-complete-mark { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--success); border-radius: 50%; color: var(--success-text); font: 700 22px/1 var(--text); }
.pairing-complete > p:not(.kicker) { max-width: 610px; margin: 0; color: var(--fg-muted); font-size: var(--fs-body); line-height: 1.65; }

/* Narrow screens: the sidebar is a drawer behind the area's menu button (console-router.js). */
.view-menu-bar, .drawer-close, .drawer-backdrop { display: none; }

@media (max-width: 1100px) {
  :root { --sidebar-w: 212px; --card-pad: var(--space-5); }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brief { min-height: 68vh; border-right: 0; border-bottom: 1px solid var(--border); }
  .auth-statement { padding-top: 10vh; }
  .auth-entry { min-height: 720px; }
  .operator > div { display: none; }
  .dashboard-main { padding: var(--space-6); }
  .filter-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .metric-row { grid-template-columns: 1fr 1fr; }
  .metric:first-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --card-pad: var(--space-4); }
  .console-bar { position: relative; height: auto; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 52px 46px; }
  .console-brand { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 var(--space-4); }
  .operator { grid-column: 2; grid-row: 1; gap: var(--space-2); padding: 0 var(--space-4) 0 0; border-bottom: 1px solid var(--border); }
  .avatar { display: none; }
  .primary-nav { grid-column: 1 / -1; grid-row: 2; gap: 0; padding: 0; overflow-x: auto; }
  .primary-nav button { flex: 1 1 0; min-width: 0; }
  .dashboard-body { grid-template-columns: minmax(0, 1fr); }
  .dashboard-main { padding: 0 var(--space-4) var(--space-10); }
  .dashboard-header { margin-bottom: var(--space-5); }
  .dashboard-header h1 { font-size: 24px; }
  .view-menu-bar { position: sticky; top: 0; z-index: 12; display: flex; margin: 0 calc(-1 * var(--space-4)) var(--space-4); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); background: var(--surface-0); }
  .view-menu-button { min-height: 40px; max-width: 100%; display: inline-flex; align-items: center; gap: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--fg); padding: 0 14px; cursor: pointer; font: 600 var(--fs-body)/1.2 var(--text); text-align: left; }
  .view-menu-button:hover { border-color: var(--fg-subtle); }
  .view-menu-button [data-console-menu-label] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .view-menu-icon { width: 16px; height: 12px; flex: none; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; }
  .console-view .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(320px, 86vw); height: auto; display: flex; overflow-y: auto; padding: var(--space-5) var(--space-3) var(--space-6); border-right: 1px solid var(--border-strong); background: var(--surface-1); transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
  /* Visible at once when opening (so it can take the focus), hidden only after sliding out. */
  .console-view[data-drawer="open"] .sidebar { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
  .console-view .sidebar .nav-item { min-height: 44px; }
  .drawer-close { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; font-size: 26px; line-height: 1; }
  .drawer-close:hover { color: var(--fg); }
  .console-view[data-drawer="open"] .drawer-backdrop { position: fixed; inset: 0; z-index: 39; display: block; background: var(--scrim); }
  .partner-login-card dl { grid-template-columns: 1fr; }
  .filter-bar { grid-template-columns: minmax(0, 1fr); }
  .console-view .filter-bar > .button { justify-self: stretch; }
  .policy-rollout { grid-template-columns: minmax(0, 1fr); }
  .pairing-layout { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .iam-permission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iam-handoff-result { grid-template-columns: minmax(0, 1fr); }
  .iam-handoff-result .pairing-qr, .iam-handoff-result dl, .iam-handoff-result > p { grid-column: 1; grid-row: auto; }
  .tenant-profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tenant-profile-facts div:nth-child(3) { border-left: 0; }
  .tenant-profile-facts div:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
  .metric-row { grid-template-columns: minmax(0, 1fr); }
  .metric:first-child { grid-column: auto; }
  .resource-heading, .section-heading { flex-wrap: wrap; }
  .console-view .resource-heading .resource-actions { justify-content: flex-start; }
  :is(.resource-panel > .resource-heading, .device-card > .section-heading, .authorization-card > .section-heading):has(h2.sr-only) { float: none; max-width: none; margin: 0; }
  :is(.resource-heading, .section-heading):has(h2.sr-only) + .section-copy { margin-top: var(--space-3); }
  .oidc-client-form { grid-template-columns: 1fr; }
  .phone-enroll-layout { grid-template-columns: minmax(0, 1fr); }
  .phone-item { grid-template-columns: minmax(0, 1fr) auto; }
  #sso-session-list > li { grid-template-columns: minmax(0, 1fr); }
  #sso-session-list > li > .text-button { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--space-1); }
}

@media (max-width: 680px) {
  .auth-brief { min-height: 620px; padding: 28px 20px; }
  .auth-statement { padding-top: 70px; }
  .auth-statement h1 { font-size: clamp(65px, 21vw, 92px); }
  .privacy-contract { grid-template-columns: 1fr; }
  .privacy-contract div, .privacy-contract div + div { padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .auth-panel { padding: 40px 20px 60px; }
  .card-heading h2 { font-size: 26px; }
  .two-fields, .auth-fields, .fallbacks { grid-template-columns: minmax(0, 1fr); }
  .iam-handoff-grid, .iam-permission-grid { grid-template-columns: minmax(0, 1fr); }
  .iam-handoff-grid label:first-child, .iam-handoff-grid label:last-child { grid-column: auto; }
  .fallbacks { gap: 0; }
  .auth-factor-actions { align-items: stretch; flex-direction: column; }
  .auth-factor-actions .button, .auth-factor-actions .text-button { width: 100%; }
  .entry-footer { display: grid; }
  .frame-bar { gap: 12px; padding: 0 20px; }
  .health-inline { font-size: 9px; letter-spacing: .06em; }
  .authorization-fields, .intent-metadata, .authorization-result div, .recovery-code-set ol { grid-template-columns: minmax(0, 1fr); }
  .authorization-fields label:first-child { grid-column: auto; }
  .intent-metadata div:nth-child(even) { border-left: 0; }
  .intent-metadata div:nth-last-child(2) { border-bottom: 1px solid var(--border); }
  .intent-review-heading { display: grid; }
  .intent-state { justify-self: start; }
  .control-principles, .filter-grid { grid-template-columns: minmax(0, 1fr); }
  .control-principles div + div { border-left: 0; border-top: 1px solid var(--border); }
  .tenant-profile-facts, .tenant-profile-form, .tenant-profile-pending dl { grid-template-columns: minmax(0, 1fr); }
  .tenant-profile-facts div + div { border-left: 0; border-top: 1px solid var(--border); }
  .tenant-profile-facts div:nth-child(-n + 2) { border-bottom: 0; }
  .filter-actions { justify-content: stretch; }
  .filter-actions .button { flex: 1 1 auto; }
  .resource-pagination { align-items: start; flex-direction: column; padding: var(--space-2) 0; }
  .presence-facts { grid-template-columns: minmax(0, 1fr); }
  .presence-facts div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); margin-top: var(--space-3); }
  /* Tables become one card per row, each value with its column label. */
  .data-table-shell { overflow: visible; border: 0; background: transparent; }
  .data-table { display: block; min-width: 0; }
  .data-table thead { display: none; }
  .data-table tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .data-table tbody tr { display: block; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
  .data-table tbody tr:hover td { background: none; }
  .data-table tbody td,
  .data-table tbody td:first-child,
  .people-table td:first-child,
  .sessions-table td:first-child,
  .audit-table td:first-child {
    position: relative;
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 10px var(--space-3) 10px 112px;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }
  .data-table tbody td::before {
    content: attr(data-label);
    position: absolute;
    left: var(--space-3);
    top: 11px;
    width: 90px;
    color: var(--fg-subtle);
    font: 600 var(--fs-small)/1.3 var(--text);
  }
  .data-table tbody td:last-child { border-bottom: 0; }
  .data-table tbody td.control-empty { padding-left: var(--space-4); }
  .data-table tbody td.control-empty::before { content: none; }
  .data-table .control-action, .person-row .control-action { text-align: left; justify-content: flex-start; }
  .row-action-group { justify-content: flex-start; }
  .policy-revision-heading { align-items: start; flex-direction: column; }
  .policy-transition-summary, .policy-simulation-result dl { grid-template-columns: minmax(0, 1fr); }
  .policy-transition-summary div + div, .policy-simulation-result dl div + div { border-left: 0; border-top: 1px solid var(--border); }
  .dialog-body { padding: var(--space-5) var(--space-4); }
  .totp-secret-card > div:first-child { align-items: start; flex-direction: column; }
  .oath-mode-selector, .hotp-code-pair { grid-template-columns: 1fr; }
  .pairing-contract, .pairing-review-core, .pairing-measurements { grid-template-columns: minmax(0, 1fr); }
  .pairing-contract div + div { border-left: 0; border-top: 1px solid var(--border); }
  .pairing-review-core div, .pairing-review-core div:nth-child(even), .pairing-measurements article, .pairing-measurements article:nth-child(even) { border-left: 0; border-bottom: 1px solid var(--border); }
  .pairing-review-core div:last-child, .pairing-measurements article:last-child { border-bottom: 0; }
  .pairing-review-core .wide { grid-column: auto; }
  .pairing-review-heading { align-items: start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; }
}

/* Platform portal: organizations and the realm audit (plan 2026-10-15 P7a) */
.portal-filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }
.portal-detail h2 { margin: 6px 0 0; font: 760 26px/1.15 var(--condensed); }
.portal-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 22px; margin: 18px 0; }
.portal-facts dt { color: var(--graphite); font: 600 10px/1.3 var(--mono); text-transform: uppercase; }
.portal-facts dd { margin: 6px 0 0; color: var(--porcelain-dim); font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 760px) { .portal-filters { grid-template-columns: minmax(0, 1fr); } }
/* Distributors (plan 2026-10-15 P7d): detail sections, inline forms, and the platform-only parts of the
   organizations pane hidden in the distributor area. */
.portal-section { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.portal-section h3 { margin: 0 0 8px; font: 700 15px/1.3 var(--condensed); }
.portal-inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 10px 0; }
.portal-inline-form label { display: grid; gap: 6px; min-width: min(260px, 100%); }
#realms-pane[data-portal="reseller"] .platform-only { display: none; }
#realms-pane[data-portal="reseller"] .portal-filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 760px) { #realms-pane[data-portal="reseller"] .portal-filters { grid-template-columns: minmax(0, 1fr); } }
/* Plan 2026-10-15 P3: the first administrator's activation dialog. */
.activation-card label { display: grid; gap: 6px; }
.activation-org { margin: 0; color: var(--porcelain); font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
/* Console light/dark mode selector (theme.js): it sits beside the language selector on the sign-in page and in
   the console bar, so on a phone the console bar keeps the brand mark and drops its words. */
@media (max-width: 480px) {
  .console-brand > span:not(.brand-mark) { display: none; }
  .operator .language-select { padding: 0 24px 0 8px; background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; }
  .auth-entry { grid-template-rows: auto 1fr; }
  .frame-bar { flex-wrap: wrap; row-gap: var(--space-2); min-height: 48px; padding-block: var(--space-2); }
  .frame-tools { flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
}

/* Runtime theming (plan 2026-10-15 P7c, theme.js): the palette goes onto the properties above through the
   CSSOM; the sign-in waits for the realm's branding (at most 1.5 s) so it never shows the wrong brand first,
   nor a product name a white-labelled realm does not use (its brief included; opacity keeps focus working). */
.theme-pending #auth-view { opacity: 0; }
.brand-logo { max-width: 140px; max-height: 28px; object-fit: contain; }
.console-brand { min-width: 0; overflow: hidden; }
.brand [data-brand-name] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-brand { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.login-brand p { margin: 0; }
.login-brand-title { color: var(--fg); font: 700 var(--fs-section)/1.3 var(--text); }

/* Custom domains (plan 2026-10-15 P7c, portal-domains.js). */
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin: var(--space-3) 0; }
.inline-form label { flex: 1 1 260px; display: grid; gap: var(--space-1); }
#domains-pane > label { display: grid; gap: var(--space-1); max-width: 420px; margin-top: var(--space-3); }
.domain-list { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.domain-card { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.domain-card .resource-actions:empty { display: none; }
.domain-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-2); }
.domain-head strong { overflow-wrap: anywhere; }
.domain-head .status-cell { color: var(--fg-muted); font: 650 10px/1.3 var(--mono); text-transform: uppercase; }
.domain-head .status-cell.active { color: var(--success-text); }
.domain-head .status-cell.disabled { color: var(--danger); }
.domain-primary { padding: 2px 8px; border: 1px solid var(--signal); border-radius: var(--radius-sm); color: var(--signal); font: 650 10px/1.4 var(--mono); text-transform: uppercase; }
.domain-card code { font: 560 12px/1.5 var(--mono); overflow-wrap: anywhere; }
.domain-card dd .text-button { margin-left: var(--space-1); }

/* The branding editor (plan 2026-10-15 P7c, branding.js). */
dialog.branding-dialog { width: min(860px, calc(100% - 32px)); }
.branding-group { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.branding-group h3 { margin: 0; font-size: var(--fs-section); }
.branding-mode { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; border: 0; }
.branding-mode legend { padding: 0; margin-bottom: var(--space-2); color: var(--fg-muted); font: 600 var(--fs-label)/1.35 var(--text); }
.branding-tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-2) var(--space-4); }
.branding-tokens label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-weight: 500; }
.branding-tokens input[type="color"] { flex: none; width: 52px; min-height: 30px; padding: 2px; cursor: pointer; }
.branding-tokens input[type="color"]:disabled { cursor: not-allowed; opacity: .6; }
.branding-contrast { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; font: 500 var(--fs-small)/1.4 var(--mono); }
.branding-contrast li::before { display: inline-block; width: 1.4em; }
.branding-contrast .contrast-ok { color: var(--success-text); }
.branding-contrast .contrast-ok::before { content: "✓"; }
.branding-contrast .contrast-fail { color: var(--danger); font-weight: 700; }
.branding-contrast .contrast-fail::before { content: "✕"; }
.branding-assets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.branding-asset { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.branding-asset h4, .branding-asset p { margin: 0; }
.branding-asset label { font-weight: 500; color: var(--fg-muted); }
.branding-asset input[type="file"] { min-height: 0; padding: var(--space-1); font-size: var(--fs-small); }
.branding-preview { max-width: 100%; max-height: 64px; justify-self: start; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1); }
.branding-texts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.branding-language, .branding-email { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); }
.branding-language legend, .branding-email legend { padding: 0 var(--space-1); font: 600 var(--fs-label)/1.35 var(--text); }
.branding-language p, .branding-email p { margin: 0; }
.branding-language textarea { min-height: 72px; resize: vertical; }

/* Licence terms, an organization's limits and activation code, licences and the licence banner (plan 2026-10-15 P7b). */
.portal-form { display: grid; gap: var(--space-4); max-width: 720px; }
.portal-form > .button { justify-self: start; }
.portal-section { display: grid; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.portal-section h3 { margin: 0; color: var(--fg); font: 700 15px/1.3 var(--text); }
.portal-section > .button { justify-self: start; }
.portal-section .section-copy { margin: 0; }
.portal-inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3) var(--space-4); }
.portal-inline-form > label:not(:has(> input[type="checkbox"])) { flex: 1 1 240px; max-width: 360px; }
.portal-inline-form > label:has(> input[type="checkbox"]) { flex: 1 1 100%; }
.one-time-value { display: block; margin: var(--space-2) 0; padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-0); color: var(--fg); font: 600 13px/1.5 var(--mono); overflow-wrap: anywhere; user-select: all; }
.license-banner { margin: var(--space-4) clamp(16px, 4vw, 32px) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--warning-border); border-radius: var(--radius); background: var(--warning-tint); color: var(--fg); font-size: var(--fs-label); line-height: 1.5; }
.license-banner.read-only { border-color: var(--danger-border); background: var(--danger-tint); }
.license-banner .text-button { margin-left: var(--space-2); }
#licenses-list .row-action + .row-action, #tenant-allocations-list .row-action + .row-action { margin-left: var(--space-2); }
.license-chain { display: grid; gap: var(--space-1); margin: 0 0 var(--space-5); padding-left: var(--space-5); color: var(--fg-muted); }
#tenant-license-pane h3 { margin: var(--space-5) 0 var(--space-2); color: var(--fg); font: 700 15px/1.3 var(--text); }
/* Plan 2026-10-15 P7a (D-12, D-13): the sign-in page of a realm host and its realm states. */
.auth-fields.single-realm { grid-template-columns: minmax(0, 1fr); }
.host-realm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 var(--space-4); color: var(--fg-subtle); font: 600 var(--fs-kicker)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.host-realm strong { color: var(--fg); font: 650 15px/1.4 var(--text); letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
.realm-state-notice { display: grid; justify-items: start; gap: var(--space-3); margin-bottom: var(--space-6); }
.realm-state-name { margin: var(--space-2) 0 0; color: var(--fg-muted); font-weight: 650; font-size: 15px; overflow-wrap: anywhere; }
.realm-state-name:empty { display: none; }
.realm-state-notice h2 { margin: 0; color: var(--fg); font: 700 30px/1.15 var(--text); letter-spacing: -.02em; }
.realm-state-notice h2:focus { outline: none; }
.realm-state-notice #realm-state-detail { max-width: 620px; margin: 0; color: var(--fg-muted); font-size: 15px; line-height: 1.6; }
.realm-state-notice .button { margin-top: var(--space-3); }

/* PAM recording player (plan 2026-10-19 Task 41). */
#pam-player-dialog { width: min(1320px, calc(100% - 32px)); }
.pam-player-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: var(--space-4); align-items: start; margin-top: 12px; }
@media (max-width: 900px) { .pam-player-layout { grid-template-columns: minmax(0, 1fr); } }
.pam-player-stage { min-height: 120px; overflow: auto; }
.pam-player-screen { display: inline-block; max-width: 100%; }
/* An RDP recording keeps its pixels: scaled down to fit, never stretched. */
.pam-player-canvas { display: block; max-width: 100%; max-height: 70vh; height: auto; background: var(--black); }
.pam-player-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.pam-player-controls[hidden] { display: none; }
.pam-player-seek { flex: 1 1 200px; min-width: 120px; accent-color: var(--signal); }
.pam-player-time { color: var(--fg-muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.pam-player-speeds { display: inline-flex; gap: 4px; }
.pam-player-speeds .button[aria-pressed="true"] { border-color: var(--signal); background: var(--signal); color: var(--signal-ink); }
.pam-player-index h3 { margin-top: 0; }
.pam-player-index .pam-events { max-height: 60vh; }
.pam-player-text { margin: 0; padding: 12px; max-height: 60vh; overflow: auto; background: var(--surface-0); color: var(--fg); font: var(--fs-small)/1.4 var(--mono, monospace); white-space: pre-wrap; word-break: break-all; }
#pam-player-integrity[data-state="verified"]::before { background: var(--success); }
#pam-player-integrity[data-state="failed"]::before { background: var(--danger); }
.pam-player-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.pam-events { list-style: none; margin: 8px 0 0; padding: 0; max-height: 40vh; overflow: auto; }
.pam-events li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--border); }
.pam-event-kind, .pam-event-masked { color: var(--fg-muted); font-size: var(--fs-small); }
.pam-event-alert code { color: var(--danger); }

/* The branded sign-in hero (2026-10-23; theme.js applyHero). The brand's logo may stand large in the hero, its
   headline and supporting line replace the AuthGuard statement (a neutral one under white label), and its typeface
   (heroTypeface) sets the hero and the sign-in headings. The faces are bundled OFL files the console serves itself
   (fonts/README.md); each has a system fallback stack, so a missing file never breaks the page. The form below
   keeps its own type. A [data-hero-typeface] element (<html> on the sign-in page, the editor's preview) sets the
   face for what it contains. */
@font-face { font-family: "AG Serif Classic"; src: url("/assets/fonts/serif-classic-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "AG Serif Classic"; src: url("/assets/fonts/serif-classic-600.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "AG Geometric"; src: url("/assets/fonts/geometric-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "AG Geometric"; src: url("/assets/fonts/geometric-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "AG Rounded"; src: url("/assets/fonts/rounded-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "AG Rounded"; src: url("/assets/fonts/rounded-800.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "AG Condensed"; src: url("/assets/fonts/condensed-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "AG Condensed"; src: url("/assets/fonts/condensed-800.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }
:root, [data-hero-typeface="default"] {
  --hero-face: var(--condensed); --hero-weight: 760; --hero-heading-weight: 760; --hero-transform: uppercase; --hero-tracking: -.045em;
}
[data-hero-typeface="serif-classic"] {
  --hero-face: "AG Serif Classic", Georgia, "Times New Roman", serif; --hero-weight: 600; --hero-heading-weight: 600;
  --hero-transform: none; --hero-tracking: -.015em;
}
[data-hero-typeface="geometric"] {
  --hero-face: "AG Geometric", Arial, Helvetica, sans-serif; --hero-weight: 700; --hero-heading-weight: 700;
  --hero-transform: none; --hero-tracking: -.04em;
}
[data-hero-typeface="rounded"] {
  --hero-face: "AG Rounded", "Trebuchet MS", Verdana, sans-serif; --hero-weight: 800; --hero-heading-weight: 800;
  --hero-transform: none; --hero-tracking: -.03em;
}
[data-hero-typeface="condensed"] {
  --hero-face: "AG Condensed", "Arial Narrow", sans-serif; --hero-weight: 800; --hero-heading-weight: 800;
  --hero-transform: uppercase; --hero-tracking: -.02em;
}
.auth-statement h1 { font-family: var(--hero-face); font-weight: var(--hero-weight); letter-spacing: var(--hero-tracking); text-transform: var(--hero-transform); overflow-wrap: anywhere; }
html[data-hero-typeface]:not([data-hero-typeface="default"]) #auth-view :is(.auth-entry h2, .auth-entry h3, .login-brand-title) { font-family: var(--hero-face); font-weight: var(--hero-heading-weight); }
.hero-logo { display: block; width: auto; max-width: min(360px, 80%); max-height: 120px; margin: 0 0 var(--space-5); object-fit: contain; object-position: left center; }
.hero-logo[hidden] { display: none; }
.auth-statement.hero-long h1 { font-size: clamp(42px, 4.6vw, 76px); line-height: .98; }
@media (max-width: 680px) {
  .hero-logo { max-height: 72px; margin-bottom: var(--space-4); }
  .auth-statement.hero-long h1 { font-size: clamp(34px, 10vw, 52px); }
}
/* The editor's live preview of the hero: the same rules at a small scale. */
.hero-preview { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--black-2); overflow: hidden; }
.hero-preview-logo { max-width: 180px; max-height: 48px; object-fit: contain; object-position: left center; }
.hero-preview-logo[hidden] { display: none; }
.hero-preview-headline { margin: 0; font: var(--hero-weight) 30px/1 var(--hero-face); letter-spacing: var(--hero-tracking); text-transform: var(--hero-transform); overflow-wrap: anywhere; }
.hero-preview-line { margin: 0; color: var(--fg-muted); font-size: 14px; line-height: 1.5; }
.hero-preview-line[hidden] { display: none; }
.branding-hero-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-3); }
/* The logo stands in the hero: the small corner mark would repeat it. */
.auth-brief:has([data-hero-logo]:not([hidden])) > .brand { visibility: hidden; }