/* Enqorum: the category-standard business console (owner's choice, 2026-10-21; reference
   .impeccable/mocks/decision/canon.html). Navy navigation, light workspace, white panels.
   Blue only on what can be pressed; cyan only for signals and freshness; amber only for warnings. */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --nav: #0F1B2D;
  --nav-2: #16243A;
  --nav-line: #22334D;
  --nav-text: #C4CFDE;
  --nav-dim: #8C9BB1;
  --nav-current: #1D3150;
  --ground: #F3F5F8;
  --card: #FFFFFF;
  --well: #FBFCFD;
  --line: #E1E6ED;
  --line-2: #EDF0F4;
  --ink: #142033;
  --ink-2: #2B3A50;
  --muted: #586579;
  --faint: #7C8798;
  --blue: #2257D4;
  --blue-hover: #1B48B3;
  --blue-ink: #1D49B0;
  --blue-soft: #E9F0FD;
  --cyan: #086A83;
  --cyan-soft: #E3F5F9;
  --cyan-bright: #22B8DA;
  --green: #0B6E54;
  --green-dot: #17A07B;
  --amber: #8A5A0B;
  --amber-soft: #FBF3E2;
  --amber-line: #F0DFBA;
  --neutral-soft: #EEF1F5;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 2px 8px rgba(15, 27, 45, .04);
  --side-width: 252px;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5;
  color: var(--ink); background: var(--ground); font-feature-settings: "cv11", "ss01";
}
::selection { background: #CFE0FB; color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
a { color: var(--blue); }
h1, h2, h3 { color: var(--ink); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Shell */
.app { display: grid; grid-template-columns: var(--side-width) minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--nav); color: var(--nav-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
/* The logo: the mark and wordmark cut from the supplied artwork (never redrawn), on the navy itself. */
.brand { flex: none; display: block; margin: 22px 20px 14px; border-radius: var(--radius-sm); }
.brand img { width: 100%; max-width: 196px; height: auto; display: block; }
.brand:focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 4px; }
.nav { padding: 12px 10px; display: grid; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 7px;
  color: var(--nav-text); text-decoration: none; font-weight: 500;
}
.nav a:hover { background: var(--nav-2); color: #fff; }
.nav a[aria-current="page"] { background: var(--nav-current); color: #fff; box-shadow: inset 0 0 0 1px #2A4468; }
.nav a[aria-current="page"] svg { color: var(--cyan-bright); }
.nav .count { margin-left: auto; font-size: 12px; font-weight: 600; color: #DDE6F2; background: #24385A; padding: 1px 8px; border-radius: 999px; }
.nav-label { padding: 14px 12px 4px; font-size: 11.5px; font-weight: 600; color: var(--nav-dim); }
.nav :focus-visible { outline-color: var(--cyan-bright); }
.who { margin-top: auto; border-top: 1px solid var(--nav-line); padding: 14px 18px 18px; display: flex; gap: 11px; align-items: center; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #2A4468; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; }
.who b { display: block; color: #fff; font-weight: 600; }
.who span { display: block; font-size: 12.5px; color: var(--nav-dim); line-height: 1.4; }
.who a { display: block; width: fit-content; color: var(--nav-text); font-size: 12.5px; }
.who a + a { margin-top: 2px; }

.topbar { display: none; }
.main { min-width: 0; display: flex; flex-direction: column; }
.utility { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 10px 32px; border-bottom: 1px solid var(--line); background: var(--card); }
.utility-end { display: flex; align-items: center; gap: 12px; }
.crumb { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.crumb [aria-current] { color: var(--ink); font-weight: 500; }
.synthetic { font-size: 12px; color: var(--amber); background: var(--amber-soft); border: 1px solid var(--amber-line); padding: 2px 9px; border-radius: 999px; font-weight: 500; white-space: nowrap; }

.page { padding: 28px 32px 56px; width: 100%; max-width: 1240px; }
.public-top ~ .page { margin-inline: auto; }

/* Public pages (signed out): a plain header, no sidebar */
.public-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 32px; background: var(--nav); }
.public-top .brand-mini { display: block; border-radius: 6px; }
.public-top .brand-mini img { height: 44px; width: auto; display: block; }
.public-top .brand-mini:focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 4px; }
.public-top a.link { color: #fff; font-weight: 600; text-decoration: none; }

/* Page head */
.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 24px; flex-wrap: wrap; }
h1 { font-size: 24px; line-height: 1.25; margin: 0 0 8px; font-weight: 650; letter-spacing: -0.015em; }
.status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Badges: words first, colour second */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--neutral-soft); color: var(--ink-2); white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.badge.open { background: var(--blue-soft); color: var(--blue-ink); }
.badge.open::before { background: var(--blue); }
.badge.approved { background: var(--cyan-soft); color: var(--cyan); }
.badge.approved::before { background: var(--cyan); }
.badge.warn { background: var(--amber-soft); color: var(--amber); }
.badge.warn::before { background: #C98A1B; }

/* Buttons */
.btn {
  font: inherit; font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  cursor: pointer; box-shadow: 0 1px 1px rgba(15, 27, 45, .04); text-decoration: none; line-height: 1.4;
}
.btn:hover { border-color: #C9D2DE; background: #F8FAFC; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-hover); }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--muted); }
.btn.ghost:hover { background: #E9EDF3; color: var(--ink); }
.btn.small { padding: 6px 11px; font-size: 13px; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .55; pointer-events: none; }

/* Key facts strip */
.facts { margin: 20px 0 24px; display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.facts div { display: grid; gap: 1px; min-width: 0; }
.facts dt { font-size: 12px; color: var(--muted); }
.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.facts dd.lead { font-weight: 600; font-size: 15px; }
.stage-fact dt label { cursor: pointer; }
.stage-fact dd { display: grid; gap: 2px; }
.stage-form { display: flex; gap: 6px; align-items: center; }
.stage-form select { min-height: 32px; padding: 4px 30px 4px 9px; width: auto; font-weight: 500; }
.stage-fact small { font-size: 12px; color: var(--muted); font-weight: 400; }

/* Panels */
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.col { display: grid; gap: 24px; min-width: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.card-h h2 { font-size: 15px; margin: 0; font-weight: 650; }
.card-h p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.card-b { padding: 18px 20px 20px; }
.card-link { display: block; padding: 12px 20px; border-top: 1px solid var(--line-2); color: var(--blue); font-weight: 600; text-decoration: none; font-size: 13.5px; }
.card-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.note { display: flex; gap: 8px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 13px; background: var(--well); border-radius: 0 0 var(--radius) var(--radius); }
.note svg { width: 16px; height: 16px; }

/* Signal tiles (other providers' activity) */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.kpi { padding: 14px 18px 13px; background: var(--card); }
.kpi:first-child { padding-left: 0; }
.kpi .lbl { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.kpi .dot { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--faint); }
.kpi.open .dot { background: var(--blue); }
.kpi.approved .dot { background: var(--cyan); }
.kpi.declined .dot { background: #7C8798; }
.kpi.withdrawn .dot { background: #A3AEBD; }
.kpi .v { font-size: 30px; font-weight: 650; line-height: 1.15; margin: 8px 0 4px; letter-spacing: -0.02em; }
.kpi .w { font-size: 12.5px; color: var(--muted); }
.kpi.zero .v { color: var(--muted); font-weight: 500; }
.kpis.stale .kpi .v { color: var(--ink-2); }
.foot { display: flex; align-items: center; gap: 7px; margin-top: 14px; color: var(--muted); font-size: 13px; }
.foot svg { width: 16px; height: 16px; }
.fresh { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 500; }
.fresh::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-dot); }
.stale-mark { display: inline-flex; align-items: center; gap: 6px; color: var(--amber); font-weight: 500; }
.stale-mark::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #C98A1B; }

/* Inline state boxes: unavailable, failed, empty, not yet */
.state-box { display: grid; place-items: center; text-align: center; gap: 4px; border: 1px dashed #CDD5E0; border-radius: var(--radius-sm); padding: 22px 16px; color: var(--muted); font-size: 13px; }
.state-box b { display: block; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.state-box svg { width: 22px; height: 22px; color: var(--faint); }
.state-box.warn { border-style: solid; border-color: var(--amber-line); background: var(--amber-soft); color: var(--amber); }
.state-box.warn b { color: var(--amber); }
.state-box.warn svg { color: var(--amber); }

/* Terms: one comparison table, a column per set, so rows line up */
.terms-table { table-layout: fixed; }
.terms-table thead th { background: none; vertical-align: top; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.terms-table thead th:first-child { width: 22%; }
.terms-table .set-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 650; color: var(--ink); }
.terms-table .set-m { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.terms-table tbody th { font-size: 13px; font-weight: 400; color: var(--muted); background: none; border-bottom: 1px solid var(--line-2); padding: 11px 20px; }
.terms-table td { text-align: right; font-weight: 600; padding: 11px 20px; }
.terms-table .current { background: #F7FAFF; }
.terms-table td.gap { vertical-align: middle; font-weight: 400; text-align: center; padding: 14px; }
.terms-table td.gap .state-box { padding: 16px 12px; }
.terms-missing { display: none; margin: 0; padding: 12px 16px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 13px; }
.terms-missing b { color: var(--ink-2); }
.tag { font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 5px; background: var(--cyan-soft); color: var(--cyan); }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 20px; background: #F8FAFC; border-bottom: 1px solid var(--line); }
td { padding: 12px 20px; border-bottom: 1px solid var(--line-2); }
tr:last-child td { border-bottom: 0; }
th.r, td.r { text-align: right; }
tbody th.row { background: none; font-size: 14px; font-weight: 400; color: var(--ink); border-bottom-color: var(--line-2); }
td.none { color: var(--muted); }

/* Consumer signals */
.signals { list-style: none; margin: 0; padding: 6px 0; }
.signals li { display: flex; gap: 12px; padding: 12px 20px; }
.signals li + li { border-top: 1px solid var(--line-2); }
.sig-i { width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: none; }
.sig-i.on { background: var(--cyan-soft); color: var(--cyan); }
.sig-i.off { background: #F0F2F5; color: #8A96A8; }
.sig-i.flag { background: var(--amber-soft); color: var(--amber); }
.signals b { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.signals p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.signals p.req-state { margin-top: 4px; }
.signals p.req-state a { margin-left: 4px; font-weight: 600; }
.pill { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; }
.pill.on { background: var(--cyan-soft); color: var(--cyan); }
.pill.off { background: var(--neutral-soft); color: var(--muted); }
.pill.flag { background: var(--amber-soft); color: var(--amber); }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 8px 20px 18px; }
.timeline li { display: grid; grid-template-columns: 46px 20px minmax(0, 1fr); gap: 0 10px; position: relative; padding: 10px 0; }
.timeline li::before { content: ""; position: absolute; left: 65px; top: 30px; bottom: -10px; width: 1px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline time { font-size: 12.5px; color: var(--muted); padding-top: 1px; }
.timeline time small { font-size: 11.5px; }
.node { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--cyan-soft); color: var(--cyan); z-index: 1; }
.node svg { width: 12px; height: 12px; stroke-width: 2.2; }
.node.own { background: var(--neutral-soft); color: var(--muted); }
.timeline b { font-weight: 600; display: block; }
.timeline p { margin: 2px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.src { font-size: 11.5px; font-weight: 600; color: var(--cyan); }
.src.own { color: var(--muted); }
.timeline details { margin-top: 4px; }
.timeline p.delivery { font-size: 12.5px; color: var(--muted); }
.timeline p.delivery.warn { color: var(--amber); font-weight: 500; }
.timeline p.delivery a { color: var(--blue); font-weight: 600; }
.notif-more { display: flex; justify-content: space-between; gap: 12px; padding: 0 20px 16px; font-size: 13px; font-weight: 600; }
.notif-more a:only-child { margin-left: auto; }
.timeline summary { cursor: pointer; color: var(--blue); font-size: 12.5px; font-weight: 600; }
.timeline pre { margin: 6px 0 0; padding: 10px 12px; background: #F8FAFC; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; overflow-x: auto; white-space: pre; }

/* Loading placeholders */
.skel { display: block; height: 12px; border-radius: 4px; background: linear-gradient(100deg, #EDF0F4 35%, #F6F8FA 50%, #EDF0F4 65%); background-size: 220% 100%; animation: skel 1.4s linear infinite; }
@keyframes skel { from { background-position: 120% 0; } to { background-position: -80% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Whole-page explanations: pending, unavailable, no permission, error, not found */
.explain { max-width: 560px; margin: 48px auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 28px 24px; }
.explain .mark { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 14px; background: var(--neutral-soft); color: var(--ink-2); }
.explain .mark svg { width: 22px; height: 22px; }
.explain.pending .mark { background: var(--blue-soft); color: var(--blue-ink); }
.explain.unavailable .mark { background: var(--neutral-soft); color: var(--muted); }
.explain.forbidden .mark { background: var(--neutral-soft); color: var(--ink-2); }
.explain.error .mark { background: var(--amber-soft); color: var(--amber); }
.explain h1 { font-size: 20px; }
.explain p { color: var(--ink-2); margin: 0 0 12px; }
.explain .ref { font-size: 12.5px; color: var(--muted); }
.explain .actions { margin-top: 18px; }

/* Notices: what was just saved, and what stopped a save */
.flash { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.flash svg { color: var(--muted); margin-top: 1px; }
.flash p { margin: 0; flex: 1; }
.flash .btn { margin: -4px 0; flex: none; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: var(--radius-sm); color: var(--ink-2); }
.alert > svg { color: var(--amber); margin-top: 1px; }
.alert b { display: block; color: var(--amber); font-weight: 650; }
.alert p { margin: 2px 0 0; }
.alert ul { margin: 4px 0 0; padding-left: 18px; }
.alert a { color: var(--blue); }
.alert:focus { outline: none; }
.alert:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.lede { margin: 0; color: var(--muted); }
.lede b.flag-count { color: var(--amber); font-weight: 600; }
.quiet { color: var(--muted); font-size: 13px; margin: 0; }
.subject { margin: 0; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.subject a { font-weight: 600; }

/* Open applications */
.head + .card, .head + .grid { margin-top: 20px; }
.apps { table-layout: auto; }
.apps thead th { vertical-align: bottom; white-space: nowrap; }
.apps tbody tr { position: relative; }
.apps tbody tr:hover td { background: #F8FAFD; }
.apps tbody tr.has-flag td:first-child { box-shadow: inset 3px 0 0 #E0B25A; }
.apps td { vertical-align: top; padding: 14px 14px; }
.apps th { padding-left: 14px; padding-right: 14px; }
.apps td:first-child, .apps th:first-child { padding-left: 20px; }
.apps td:last-child, .apps th:last-child { padding-right: 20px; }
.apps .name, .apps .who-cell .sub { white-space: nowrap; }
.apps .sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.apps .sub.ending { color: var(--amber); font-weight: 500; }
.apps .ref a { font-weight: 650; color: var(--ink); text-decoration: none; }
.apps .ref a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.apps .row-link::after { content: ""; position: absolute; inset: 0; }
.apps .row-link:focus-visible { outline: none; }
.apps .row-link:focus-visible::after { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 4px; }
.apps .name { font-weight: 500; }
.apps .amount { font-weight: 600; white-space: nowrap; }
.apps .when { white-space: nowrap; }
.apps .linkish { position: relative; z-index: 1; }
.apps .flags { display: flex; flex-wrap: wrap; gap: 6px; max-width: 190px; }
.apps .flags .sub { margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pill svg { width: 13px; height: 13px; }

/* Filters: apply as you type */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.filters .search { position: relative; flex: 1 1 260px; max-width: 380px; }
.filters .search svg { position: absolute; left: 11px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.filters .search input { padding-left: 34px; }
.filters select { width: auto; min-width: 190px; }
.filters .passport-country { display: inline-flex; align-items: center; gap: 8px; }
.filters .passport-country[hidden] { display: none; }
.filters .passport-country label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.seg { display: inline-flex; border: 1px solid #808C9E; border-radius: var(--radius-sm); overflow: hidden; }
.seg button { font: inherit; font-size: 13.5px; font-weight: 500; padding: 8px 12px; min-height: 40px; border: 0; background: var(--card); color: var(--ink-2); cursor: pointer; }
.seg button + button { border-left: 1px solid #808C9E; }
.seg button[aria-pressed="true"] { background: var(--blue-soft); color: var(--blue-ink); font-weight: 600; }
.seg button:focus-visible { outline-offset: -3px; }
.filter-status { margin: 0 0 0 auto; color: var(--muted); font-size: 13px; }
.filter-empty { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 28px 16px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line-2); }
.filter-empty b { color: var(--ink-2); font-size: 14px; }
.filter-empty svg { width: 22px; height: 22px; color: var(--faint); }
.stage-chip { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.stage-chip::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--faint); translate: 0 -1px; }

/* History */
.hist-card { container: hist / inline-size; }
.hist-filters select { min-width: 0; width: auto; }
.hist-filters .dates { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.hist-filters input[type="date"] { width: auto; font: inherit; color: var(--ink); border: 1px solid #808C9E; border-radius: var(--radius-sm); padding: 7px 10px; min-height: 40px; background: var(--card); }
[data-history-results] { transition: opacity .15s; }
[data-history-results].loading { opacity: .55; }
.hist-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--line-2); font-weight: 500; }
.hist-count:focus { outline: none; }
.hist .final { color: var(--ink-2); }
.hist .status-cell .sub { margin-top: 4px; }
.hist .when .closed-narrow { display: none; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 13.5px; }
@container hist (max-width: 760px) {
  .hist thead { display: none; }
  .hist, .hist tbody { display: block; }
  .hist tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ref status" "who amt" "who final" "when when"; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
  .hist tbody tr:last-child { border-bottom: 0; }
  .hist td, .hist td:first-child, .hist td:last-child { display: block; padding: 0; border: 0; }
  .hist .ref { grid-area: ref; } .hist .status-cell { grid-area: status; text-align: right; }
  .hist .who-cell { grid-area: who; } .hist .amount:not(.final) { grid-area: amt; }
  .hist .when { grid-area: when; color: var(--muted); font-size: 13px; }
  .hist .when::before { content: "Opened "; }
  .hist .status-cell .sub { display: none; }
  .hist .when .closed-narrow { display: inline; }
  .hist .final { grid-area: final; font-size: 13px; align-self: start; }
  .hist .final.none { display: none; }
  .hist .final::before { content: "Approved "; color: var(--muted); font-weight: 400; }
}
@media (prefers-reduced-motion: reduce) { [data-history-results] { transition: none; } }

/* Activity counts: four fixed columns, so the numbers line up from row to row */
.counts { display: grid; grid-template-columns: repeat(4, 74px); }
.counts .c { display: flex; align-items: center; gap: 6px; }
.counts .dot { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--faint); }
.counts .open .dot { background: var(--blue); }
.counts .approved .dot { background: var(--cyan); }
.counts .declined .dot { background: #7C8798; }
.counts .withdrawn .dot { background: #A3AEBD; }
.counts b { font-weight: 650; font-size: 15px; }
.counts .zero b { color: var(--muted); font-weight: 500; }
.counts .l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.counts.stale b { color: var(--ink-2); font-weight: 500; }
.counts.legend { margin-top: 4px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.counts.legend .c { gap: 5px; }
.act-title { display: block; }
.stale-mark.small { display: flex; align-items: baseline; font-size: 12.5px; margin-top: 4px; }
.stale-mark.small::before { flex: none; translate: 0 -1px; }
.act-state { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); min-height: 22px; }
.act-state svg { width: 16px; height: 16px; }
.act-state.none { color: var(--ink-2); }
.act-state.none svg { color: var(--faint); }
.act-state.warn { color: var(--amber); font-weight: 500; }
.act-state.loading .skel { width: 120px; }
.linkish { font: inherit; color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.card.empty { padding: 28px; }

/* Open applications: the list fits the card's own width. Wide: a table. Middle: two lines per application, the
   activity counts with their words. Narrow (phone): a card per application. */
.list-card { container: list / inline-size; }
@container list (max-width: 1099px) {
  .apps thead { display: none; }
  .apps, .apps tbody { display: block; }
  .apps tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 112px 230px;
    grid-template-areas: "ref who amt act" "when flags flags act"; gap: 6px 20px;
    padding: 14px 20px; border-bottom: 1px solid var(--line-2);
  }
  .apps tbody tr:last-child { border-bottom: 0; }
  .apps tbody tr:hover { background: #F8FAFD; }
  .apps tbody tr.has-flag { box-shadow: inset 3px 0 0 #E0B25A; }
  .apps tbody tr.has-flag td:first-child { box-shadow: none; }
  .apps td, .apps td:first-child, .apps td:last-child { display: block; padding: 0; border: 0; background: none !important; }
  .apps .ref { grid-area: ref; }
  .apps .when { grid-area: when; white-space: normal; }
  .apps .when > .num:first-child { font-size: 13px; color: var(--muted); }
  .apps .who-cell { grid-area: who; }
  .apps .amount { grid-area: amt; text-align: right; }
  .apps .act { grid-area: act; }
  .apps .flags-cell { grid-area: flags; }
  .apps .flags { max-width: none; }
  .apps .flags .none { display: none; }
  .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .counts .l { position: static; width: auto; height: auto; overflow: visible; clip-path: none; color: var(--muted); font-size: 13px; }
}
@container list (max-width: 719px) {
  .apps tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ref when" "who amt" "act act" "flags flags"; gap: 6px 12px; padding: 14px 16px; }
  .apps .when { text-align: right; }
  .apps .when > .num:first-child { font-size: inherit; color: inherit; }
  .apps .name, .apps .who-cell .sub { white-space: normal; }
  .apps .act { padding: 8px 0 2px; border-top: 1px dashed var(--line); margin-top: 4px; }
}

/* Decisions: change offer, approve, decline, withdraw */
.grid.decide { grid-template-columns: minmax(0, 1fr) 380px; }
.grid.decide > .col:first-child { max-width: 760px; }
.grid.decide.single { grid-template-columns: minmax(0, 760px); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field.wide { grid-column: 1 / -1; max-width: calc(50% - 10px); }
.field label { font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
input[type="text"], input[type="search"], input[type="tel"], input[type="email"], input[type="url"], input[type="date"], input[type="password"], input:not([type]), select, textarea {
  font: inherit; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--card); width: 100%;
  border: 1px solid #808C9E; border-radius: var(--radius-sm); padding: 8px 11px; min-height: 40px;
}
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); border-radius: var(--radius-sm); }
input.short { max-width: 140px; }
.money { position: relative; }
.money span { position: absolute; left: 11px; top: 50%; translate: 0 -50%; color: var(--muted); font-weight: 500; pointer-events: none; }
.money input { padding-left: 28px; }
[aria-invalid="true"] { border-color: var(--amber); background: #FFFCF5; }
.err { font-size: 13px; color: var(--amber); font-weight: 500; }
.err:empty { display: none; }
.hint { display: flex; gap: 8px; align-items: center; margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.hint svg { width: 16px; height: 16px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 20px; border-top: 1px solid var(--line-2); background: var(--well); border-radius: 0 0 var(--radius) var(--radius); }
.form-actions .quiet { margin-left: 6px; }
.consequence { padding: 14px 20px 16px; border-top: 1px solid var(--line-2); }
.consequence h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 650; }
.consequence ul, .prose ul { margin: 0; padding-left: 18px; color: var(--ink-2); }
.consequence li + li, .prose li + li { margin-top: 4px; }
.prose p { margin: 0 0 10px; }
.prose ul + p { margin-top: 12px; }
.prose > :last-child { margin-bottom: 0; }
.terms-line { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; padding: 12px 20px; border-top: 1px solid var(--line-2); }
.terms-line div { display: grid; gap: 1px; }
.terms-line dt { font-size: 12px; color: var(--muted); }
.terms-line dd { margin: 0; font-weight: 600; }
.versions { list-style: none; margin: 0; padding: 4px 0; }
.versions li { padding: 12px 20px; }
.versions li + li { border-top: 1px solid var(--line-2); }
.versions li.current { background: #F7FAFF; }
.versions .v-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.versions .v-m { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.versions p { margin: 3px 0 0; font-size: 13.5px; }
.versions p.quiet { font-size: 12.5px; margin-top: 1px; }
.versions li.requested b { color: var(--ink-2); }
.grid.decide .alert { margin-bottom: 0; }

/* Capture */
.stack { display: grid; gap: 24px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-weight: 600; font-size: 13.5px; color: var(--ink-2); margin-bottom: 8px; }
input[type="radio"] { accent-color: var(--blue); width: 16px; height: 16px; margin: 0; flex: none; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 20px 0 12px; }
.choice-row legend { width: 100%; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.choice legend { grid-column: 1 / -1; }
.choice .err { grid-column: 1 / -1; }
.choice:focus { outline: none; }
.choice-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid #808C9E; border-radius: var(--radius-sm); cursor: pointer; }
.choice-item:hover { background: #F8FAFD; }
.choice-item:has(input:checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: #F7FAFF; }
.choice-item input { margin-top: 2px; }
.choice-item b { display: block; font-weight: 600; }
.choice-item small { display: block; color: var(--muted); font-size: 13px; margin-top: 1px; }
.choice[aria-invalid="true"] .choice-item { border-color: var(--amber); }
.fields + .fields, .choice-row + .fields { margin-top: 16px; }
.field-hint { font-size: 12.5px; color: var(--muted); }
input.mono { letter-spacing: 0.04em; }
input[type="checkbox"] { accent-color: var(--blue); width: 18px; height: 18px; margin: 1px 0 0; flex: none; }
.consent { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-2); display: grid; gap: 6px; }
.card > form > .consent, form.card > .consent { margin: 0; padding: 16px 20px; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check b { font-weight: 600; }
.check input[aria-invalid="true"] { outline: 2px solid var(--amber); outline-offset: 2px; }
.alert-action { margin-top: 10px !important; }
.alert-action .btn { color: var(--ink-2); }

/* Application stages (provider settings) */
.stage-list { list-style: none; margin: 0; padding: 6px 0; }
.stage-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 10px 20px; }
.stage-meta { display: grid; grid-template-columns: auto 64px auto; gap: 16px; align-items: center; }
.stage-row + .stage-row { border-top: 1px solid var(--line-2); }
.stage-row .move { display: flex; gap: 2px; }
.icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { background: #F8FAFC; border-color: #C9D2DE; }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn svg { width: 16px; height: 16px; }
.stage-name { display: grid; gap: 4px; min-width: 0; }
.stage-count { color: var(--muted); font-size: 13px; text-align: right; }
.stage-moves { font-size: 12.5px; color: var(--amber); font-weight: 500; }
.stage-row.removing .stage-name input { text-decoration: line-through; color: var(--muted); background: var(--well); }
.stage-row .check.remove { font-size: 13.5px; color: var(--ink-2); align-items: center; }
.stage-row .check.remove input { margin: 0; }
.stage-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; border-top: 1px solid var(--line-2); }
.stage-foot .err { flex-basis: 100%; }

/* Provider status and onboarding */
.standing { display: flex; gap: 18px; padding: 22px 24px; margin: 20px 0 24px; }
.standing-mark { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--neutral-soft); color: var(--ink-2); }
.standing-mark svg { width: 22px; height: 22px; }
.standing.open .standing-mark { background: var(--blue-soft); color: var(--blue-ink); }
.standing.warn .standing-mark { background: var(--amber-soft); color: var(--amber); }
.standing.approved .standing-mark { background: var(--cyan-soft); color: var(--cyan); }
.standing h2 { margin: 0 0 4px; font-size: 18px; font-weight: 650; }
.standing p { margin: 0 0 8px; color: var(--ink-2); max-width: 70ch; }
.standing .actions { margin-top: 14px; }
.reason { margin: 12px 0 4px; padding: 12px 14px; border-left: 3px solid var(--line); background: var(--well); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink); max-width: 70ch; }
.standing.warn .reason { border-left-color: #E0B25A; background: var(--amber-soft); }
.reason-h { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.detail-list { margin: 0; padding: 6px 0; }
.detail-list > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 4px 16px; padding: 10px 20px; }
.detail-list > div + div { border-top: 1px solid var(--line-2); }
.detail-list dt { color: var(--muted); font-size: 13.5px; }
.detail-list dd.lines, .detail-list dd.lines > span { white-space: pre-line; }
.detail-list dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.detail-list dd.none { color: var(--muted); }
.can-list { list-style: none; margin: 0; padding: 8px 0; }
.can-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 20px; }
.can-list .no svg { color: var(--muted); }
.can-list .yes svg { color: var(--cyan); }
.billing { margin: 0 0 8px; }
.optional { font-weight: 400; color: var(--muted); font-size: 12.5px; margin-left: 4px; }
textarea { resize: vertical; line-height: 1.45; }
input[type="file"] { font: inherit; font-size: 13.5px; }
input[type="file"]::file-selector-button { font: inherit; font-weight: 600; font-size: 13px; margin-right: 12px; padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer; }
.upload-note { margin-top: 12px; }
.inline-form { display: contents; }
.sub-h { border-top: 1px solid var(--line-2); }
.file-line { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 10px; }
.file-line svg, .file-list svg { width: 16px; height: 16px; color: var(--muted); }
.file-list { list-style: none; margin: 0; padding: 6px 0; }
.file-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 10px 20px; }
.file-list li + li { border-top: 1px solid var(--line-2); }
.file-list .quiet { margin-left: auto; }
.read-table th[scope="row"] { font-size: 13.5px; font-weight: 400; color: var(--muted); background: none; }
.read-table td { vertical-align: top; }
.read-table td > span { margin-right: 8px; }
.read-table tr.differs td:last-child > span:first-child { font-weight: 600; }
.match { font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 5px; }
.match.same { background: var(--neutral-soft); color: var(--muted); }
.match.diff { background: var(--amber-soft); color: var(--amber); }

/* Onboarding steps: a row on the step pages, a list on the status page */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.step { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.step-mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12.5px; font-weight: 650; background: var(--neutral-soft); color: var(--muted); }
.step-mark svg { width: 14px; height: 14px; stroke-width: 2.4; }
.step.done .step-mark { background: var(--cyan-soft); color: var(--cyan); }
.step.now .step-mark, .step.here .step-mark { background: var(--blue); color: #fff; }
.step.attention .step-mark { background: var(--amber-soft); color: var(--amber); }
.step-text { display: grid; gap: 1px; padding-top: 2px; }
.step-text b, .step-text a { font-weight: 600; color: var(--ink); }
.step-text a { color: var(--blue); }
.step-text small { font-size: 12.5px; color: var(--muted); }
.step.attention small { color: var(--amber); font-weight: 500; }
.steps-bar { margin: 20px 0 24px; padding: 14px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.steps-bar .steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.steps-bar .step { padding: 0; }

.explain.closed .mark { background: var(--neutral-soft); color: var(--muted); }

/* Help kit, in the app's colours (doubled :root outranks help.css, which loads after this file) */
:root:root {
  --help-page: var(--card);
  --help-ink: var(--ink);
  --help-ink-2: var(--muted);
  --help-line: var(--line);
  --help-well: #F8FAFC;
  --help-accent: var(--blue);
  --help-accent-wash: var(--blue-soft);
  --help-radius: var(--radius-sm);
}

/* Narrow screens: the sidebar becomes a drawer behind a top bar */
@media (max-width: 1180px) {
  .grid { display: flex; flex-direction: column; align-items: stretch; }
  .col { display: contents; }
  [data-order="1"] { order: 1; } [data-order="2"] { order: 2; } [data-order="3"] { order: 3; }
  [data-order="4"] { order: 4; } [data-order="5"] { order: 5; } [data-order="6"] { order: 6; }
  [data-order="7"] { order: 7; } [data-order="8"] { order: 8; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(-100%); transition: transform .2s ease; }
  .nav-open .side { transform: none; box-shadow: 0 0 0 100vmax rgba(15, 27, 45, .45); }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--nav); padding: 10px 16px; position: sticky; top: 0; z-index: 30; }
  .topbar .mini { display: block; border-radius: 6px; }
  .topbar .mini img { height: 38px; width: auto; display: block; }
  .topbar .mini:focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 4px; }
  .menu { background: transparent; border: 1px solid #2A4468; color: #fff; border-radius: var(--radius-sm); width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; }
  .menu:focus-visible { outline-color: var(--cyan-bright); }
  .utility { padding: 10px 16px; flex-wrap: nowrap; gap: 8px; }
  .crumb { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
  .crumb > :not(:nth-last-child(-n+3)) { display: none; }
  .crumb [aria-current], .crumb a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .crumb [aria-current] { flex: none; max-width: 70%; }
  .utility-end { flex: none; }
  .page { padding: 20px 16px 48px; }
  .public-top { padding: 10px 16px; }
  h1 { font-size: 21px; }
  .actions { width: 100%; }
  .actions .btn { flex: 1 1 auto; }
  .actions .btn.primary { flex-basis: 100%; }
  .facts { gap: 10px 20px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(odd) { padding-left: 0; }
  .terms-table thead th, .terms-table tbody th, .terms-table td { padding-left: 8px; padding-right: 8px; font-size: 12.5px; }
  .terms-table thead th:first-child, .terms-table tbody th { padding-left: 16px; }
  .terms-table td:last-child, .terms-table thead th:last-child { padding-right: 16px; }
  .terms-table thead th:first-child { width: 27%; }
  .card-h, .card-b, .note, td, th, .signals li, .timeline, .card-link, .open-reqs > li, .act-list > div, .notify-list > li, .fb-notes li { padding-left: 16px; padding-right: 16px; }
  .explain { margin: 24px 0; padding: 22px 18px 20px; }
  .form-actions, .consequence, .terms-line, .versions li { padding-left: 16px; padding-right: 16px; }
  .grid.decide > .col:first-child { max-width: none; }
}
/* Forms on a phone */
@media (max-width: 760px) {
  .fields { grid-template-columns: minmax(0, 1fr); }
  .field.wide { max-width: none; }
  .choice { grid-template-columns: minmax(0, 1fr); }
  input.short { max-width: none; }
  .form-actions .btn { flex: 1 1 auto; }
  .form-actions .btn.primary { flex-basis: 100%; }
  .form-actions .quiet { margin: 0; flex-basis: 100%; text-align: center; }
  .filters { padding: 12px 16px; }
  .detail-list > div { grid-template-columns: minmax(0, 1fr); padding: 10px 16px; }
  .standing { padding: 18px 16px; gap: 14px; }
  .steps-bar { padding: 12px 16px; }
  .steps-bar .steps { grid-auto-flow: row; gap: 4px; }
  .can-list li, .file-list li { padding-left: 16px; padding-right: 16px; }
  .stage-row { grid-template-columns: auto minmax(0, 1fr); padding: 12px 16px; }
  .stage-meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .stage-row .stage-count { text-align: left; }
  .filters .search { max-width: none; flex-basis: 100%; }
  .filters .passport-country { flex-basis: 100%; min-width: 0; }
  .filters .passport-country select { flex: 1 1 0; min-width: 0; }
  .filters select { flex: 1 1 auto; }
  .filter-status { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 600px) {
  .terms-table .missing-col, .terms-table td.gap { display: none; }
  .terms-missing { display: block; }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }

/* Staff */
.staff-card { container: staff / inline-size; }
.staff .person .name { font-weight: 600; color: var(--ink); text-decoration: none; }
.staff .person a.name:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.staff .person .tag { margin-left: 6px; vertical-align: 1px; }
.staff .when { color: var(--ink-2); }
.staff tr.is-suspended .name, .staff tr.is-suspended .role { color: var(--muted); }
.staff .person .name, .staff .person .sub { white-space: normal; overflow-wrap: anywhere; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; position: relative; z-index: 1; }
.tag.you { background: var(--neutral-soft); color: var(--ink-2); }
.page-alert { margin-top: 20px; }
.choice.stack { grid-template-columns: minmax(0, 1fr); margin: 18px 0 12px; }
.card-b.flush-top { padding-top: 0; }
.self-warn { margin: -4px 0 16px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--amber-soft); color: var(--amber); font-size: 13.5px; font-weight: 500; }
.detail-list.stacked > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
@container staff (max-width: 719px) {
  .staff thead { display: none; }
  .staff, .staff tbody { display: block; }
  .staff tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "person status" "role when"; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
  .staff tbody tr:last-child { border-bottom: 0; }
  .staff td, .staff td:first-child, .staff td:last-child { display: block; padding: 0; border: 0; }
  .staff .person { grid-area: person; min-width: 0; }
  .staff .person .name, .staff .person .sub { overflow-wrap: anywhere; white-space: normal; }
  .staff .status-cell { grid-area: status; text-align: right; }
  .staff .role { grid-area: role; color: var(--muted); font-size: 13px; }
  .staff .when { grid-area: when; text-align: right; font-size: 13px; color: var(--muted); }
  .staff .when .sub { margin: 0; }
  .staff tr.is-invite { grid-template-areas: "person status" "sent sent" "role when" "acts acts"; }
  .staff tr.is-invite .person { display: contents; }
  .staff tr.is-invite .person .name { grid-area: person; min-width: 0; }
  .staff tr.is-invite .person .sub { grid-area: sent; margin: 0; }
  .staff tr.is-invite .inline-actions { grid-area: acts; margin-top: 6px; }
}

/* Invitation (signed out) */
.invite { max-width: 560px; margin: 48px auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.invite-head { padding: 28px 28px 20px; border-bottom: 1px solid var(--line-2); }
.invite-head h1 { font-size: 22px; margin: 6px 0 10px; }
.invite-head p { margin: 0 0 8px; color: var(--ink-2); overflow-wrap: anywhere; }
.invite .step-of { margin: -4px 0 10px; font-size: 13px; font-weight: 500; color: var(--muted); }
.invite-role { padding: 10px 12px; background: var(--well); border-radius: var(--radius-sm); font-size: 13.5px; margin-top: 12px !important; }
.invite-role b { margin-right: 4px; }
.invite-body { padding: 20px 28px 24px; display: grid; gap: 16px; }
.invite-body h2 { font-size: 15px; margin: 0; }
.invite-body p { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.invite > .alert { margin: 20px 28px 0; }
.invite .form-actions { padding-left: 28px; padding-right: 28px; }
.field .label { font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.field .fixed { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .invite { margin: 16px 0; }
  .invite-head { padding: 22px 18px 16px; }
  .invite-body { padding: 18px 18px 20px; }
  .invite > .alert { margin: 16px 18px 0; }
  .invite .form-actions { padding-left: 18px; padding-right: 18px; }
}

/* Provider reviews: queue */
.queue-card { container: queue / inline-size; }
.queue-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 20px 0; }
.qtab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; min-height: 36px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; font-weight: 500; text-decoration: none; background: var(--card); }
.qtab:hover { border-color: #808C9E; }
.qtab[aria-current="true"] { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-ink); font-weight: 600; }
.qcount { font-size: 12px; font-weight: 600; min-width: 20px; text-align: center; padding: 1px 6px; border-radius: 999px; background: var(--neutral-soft); color: var(--ink-2); }
.qtab[aria-current="true"] .qcount { background: var(--card); color: var(--blue-ink); }
.queue-card .filters { border-bottom: 0; }
.queue .ref a { white-space: normal; }
.queue .sub.next { color: var(--ink-2); font-weight: 500; }
.reading { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; }
.reading::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.reading.read::before { background: var(--cyan); }
.reading.check { color: var(--amber); }
.reading.check::before { background: #C98A1B; }
@container queue (max-width: 760px) {
  .queue thead { display: none; }
  .queue, .queue tbody { display: block; }
  .queue tbody tr:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 16px; border-top: 1px solid var(--line-2); }
  .queue td, .queue td:first-child, .queue td:last-child { display: block; padding: 0; border: 0; }
  .queue td:nth-child(1) { grid-column: 1 / -1; }
  .queue td:nth-child(3)::before { content: "Submitted "; color: var(--muted); }
  .queue td:nth-child(5) { text-align: right; color: var(--muted); font-size: 13px; }
  .queue td:nth-child(4) { grid-column: 1; }
  .queue td:nth-child(2) { grid-column: 1; }
  .queue td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; color: var(--muted); font-size: 13px; }
  .queue td:nth-child(5)::before, .idq td:nth-child(4)::before { content: "Waiting "; }
  .idq td:nth-child(4) { grid-column: 2; text-align: right; color: var(--muted); font-size: 13px; }
  .queue-tabs { padding: 12px 16px 0; }
}

/* A feature switched off, on a page that stays readable */
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; margin: 20px 0 0; background: var(--neutral-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-2); }
.notice > svg { color: var(--muted); margin-top: 1px; flex: none; }
.notice b { display: block; color: var(--ink); font-weight: 650; }
.notice p { margin: 2px 0 0; }

/* Features and policy */
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li { display: grid; grid-template-columns: minmax(0, 1fr) 190px 160px; gap: 8px 16px; align-items: start; padding: 16px 20px; border-top: 1px solid var(--line-2); }
.feature-what b { display: block; font-weight: 600; }
.feature-what > span { display: block; color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }
.feature-what .feature-last { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.feature-what .feature-missing { color: var(--amber); font-size: 13px; font-weight: 500; margin-top: 6px; }
.feature-act { text-align: right; }
.feature-act .quiet { font-size: 12.5px; }
.fstate { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); padding-top: 1px; }
.fstate svg { width: 16px; height: 16px; flex: none; }
.fstate.on { color: var(--cyan); }
.fstate.missing { color: var(--amber); }
.fstate.pending { color: var(--ink-2); }
.policy-list > div { grid-template-columns: 240px minmax(0, 1fr); }
@media (max-width: 760px) { .policy-list > div { grid-template-columns: minmax(0, 1fr); } }
.policy-list dd { display: grid; gap: 2px; }
.policy-list dd .num, .policy-list dd > span:first-child { font-weight: 600; }
.policy-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.unit-input { display: flex; align-items: center; gap: 8px; }
.unit-input input { max-width: 110px; }
.unit-input span { color: var(--muted); }
.card-h.sub-h { border-top: 1px solid var(--line-2); }
@media (max-width: 760px) {
  .feature-list li { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; }
  .feature-what { grid-column: 1 / -1; }
  .feature-act { text-align: right; }
  .policy-fields { grid-template-columns: minmax(0, 1fr); }
}

/* Registration */
.register { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 340px); gap: 32px; justify-content: center; align-items: start; margin: 48px auto; }
.register .invite { margin: 0; }
.register-side h2 { font-size: 15px; margin: 18px 0 12px; }
.next-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 14px; }
.next-steps li { counter-increment: step; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 12px; }
.next-steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-ink); font-size: 12.5px; font-weight: 650; }
.next-steps b { font-weight: 600; }
.next-steps span { color: var(--muted); font-size: 13.5px; }
.already { margin-top: 22px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.already p { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; }
@media (max-width: 960px) {
  .register { grid-template-columns: minmax(0, 560px); margin: 16px auto; gap: 20px; }
}

/* Provider review: the four parts */
.part .card-h { align-items: center; }
.part .card-h > div { display: flex; align-items: center; gap: 10px; }
.part-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--neutral-soft); color: var(--ink-2); font-size: 12.5px; font-weight: 650; flex: none; }
.cert-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.cert-file > svg { width: 22px; height: 22px; color: var(--muted); }
.cert-file b { display: block; overflow-wrap: anywhere; }
.cert-file .quiet { display: block; }
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { text-align: left; padding: 10px 20px; border-top: 1px solid var(--line-2); vertical-align: top; font-size: 14px; }
.compare thead th { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--well); }
.compare tbody th { font-weight: 500; color: var(--ink-2); width: 28%; }
.compare td { width: 36%; overflow-wrap: anywhere; }
.compare td.none { color: var(--muted); }
.compare .mark { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 5px; background: var(--neutral-soft); color: var(--ink-2); white-space: nowrap; }
.compare .mark.m-same { background: var(--cyan-soft); color: var(--cyan); }
.compare .mark.m-diff, .compare .mark.m-check { background: var(--amber-soft); color: var(--amber); }
.compare tr.m-diff td, .compare tr.m-diff th, .compare tr.m-check td, .compare tr.m-check th { background: #FFFCF5; }
.assist { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px 20px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 13px; }
.assist svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.earlier { border-top: 1px solid var(--line-2); }
.earlier ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 760px) {
  .cert-file { grid-template-columns: auto minmax(0, 1fr); }
  .cert-file .btn { grid-column: 1 / -1; }
  .compare thead { display: none; }
  .compare tr { display: grid; padding: 10px 16px; border-top: 1px solid var(--line-2); gap: 2px; }
  .compare th, .compare td { padding: 0; border: 0; width: auto !important; }
  .compare td:nth-child(2)::before { content: "Entered: "; color: var(--muted); }
  .compare td:nth-child(3)::before { content: "Read: "; color: var(--muted); }
  .assist { padding: 12px 16px; }
}

/* A confirmation above a whole-page explanation */
.explain-flash { max-width: 560px; margin: 0 auto; }
.explain-flash .flash { margin: 24px 0 0; }
.explain-flash:has(.flash) + .explain { margin-top: 16px; }

/* Your providers */
.my-providers { max-width: 760px; margin-top: 20px; }
.provider-list { list-style: none; margin: 0; padding: 0; }
.provider-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 16px 20px; border-top: 1px solid var(--line-2); }
.provider-list li:first-child { border-top: 0; }
.provider-list li.current { background: var(--well); }
.provider-list .who-line { display: grid; gap: 4px; min-width: 0; }
.provider-list .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.warn-text { color: var(--amber) !important; font-weight: 500; }
@media (max-width: 760px) { .provider-list li { padding: 14px 16px; } .provider-list .pick, .provider-list .pick .btn { width: 100%; } }

/* Last, so it wins over any display rule above */
[hidden] { display: none !important; }

/* Audit history: When | Who | What | Reason. Narrow (phone): an entry per block. */
.audit-filters .dates { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }
.audit-filters input[type="date"] { width: auto; font: inherit; color: var(--ink); border: 1px solid #808C9E; border-radius: var(--radius-sm); padding: 7px 10px; min-height: 40px; background: var(--card); }
.audit-filters select { min-width: 0; width: auto; }
.audit td { vertical-align: top; padding: 14px; }
.audit th { padding-left: 14px; padding-right: 14px; white-space: nowrap; }
.audit td:first-child, .audit th:first-child { padding-left: 20px; }
.audit td:last-child, .audit th:last-child { padding-right: 20px; }
.audit .when { white-space: nowrap; width: 1%; }
.audit .when small { color: var(--muted); font-size: 12.5px; }
.audit .actor { width: 22%; }
.audit .actor .name { display: block; font-weight: 600; }
.audit .sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.audit .sub.enq { color: var(--ink-2); font-weight: 600; }
.audit .what b { display: block; font-weight: 600; }
.audit .kind { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.audit .kind .i { width: 13px; height: 13px; }
.audit .target { display: block; overflow-wrap: anywhere; }
.audit .change { display: inline-block; margin-top: 4px; font-size: 12.5px; padding: 1px 8px; border-radius: 999px; background: var(--well); border: 1px solid var(--line-2); }
.audit .why { width: 34%; color: var(--ink); }
.audit .why.none { color: var(--muted); }
.pager span.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
@container hist (max-width: 760px) {
  .audit thead { display: none; }
  .audit, .audit tbody { display: block; }
  .audit tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what when" "actor actor" "why why"; gap: 6px 16px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
  .audit tbody tr:last-child { border-bottom: 0; }
  .audit td, .audit td:first-child, .audit td:last-child { display: block; padding: 0; border: 0; width: auto; }
  .audit .actor, .audit .why, .audit .when { width: auto; }
  .audit .what { grid-area: what; }
  .audit .when { grid-area: when; text-align: right; }
  .audit .actor { grid-area: actor; display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; }
  .audit .actor .name { display: inline; font-weight: 500; }
  .audit .actor .sub { display: inline; margin: 0; }
  .audit .why { grid-area: why; color: var(--muted); font-size: 13.5px; }
  .audit .why.none { display: none; }
  .audit-filters .dates { flex-wrap: wrap; flex-basis: 100%; }
  .audit-filters input[type="date"] { flex: 1 1 130px; }
}
.audit .name.enq { color: var(--ink-2); }
.audit-filters select { max-width: 220px; }
@container hist (max-width: 760px) { .audit-filters select { max-width: none; } }

/* Engine audit: the chain's state and the entries' marks */
.chain-state { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; margin: 20px 0; border-radius: var(--radius-sm); }
.chain-state > svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.chain-state h2 { margin: 0; font-size: 15px; font-weight: 650; }
.chain-state p { margin: 4px 0 0; max-width: 72ch; }
.chain-state p.quiet { margin-top: 6px; }
.chain-state.ok { background: color-mix(in srgb, var(--green) 7%, var(--card)); border: 1px solid color-mix(in srgb, var(--green) 25%, var(--card)); color: var(--ink-2); }
.chain-state.ok > svg, .chain-state.ok h2 { color: var(--green); }
.chain-state.broken h2 { color: var(--amber); }
.chain-state.notice { margin-top: 20px; }
.engine-audit .entry { white-space: nowrap; width: 1%; }
.engine-audit .entry .no { display: block; font-weight: 650; color: var(--ink); }
.engine-audit .check { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 12px; font-weight: 600; }
.engine-audit .check .i { width: 12px; height: 12px; }
.engine-audit .check.verified { color: var(--green); }
.engine-audit .check.notyetchecked { color: var(--muted); }
.engine-audit .check.afterbreak { color: var(--amber); }
.engine-audit .hash { display: block; margin-top: 3px; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11.5px; color: var(--muted); }
.engine-audit .actor { width: 24%; }
.engine-audit .name.mono { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 13px; overflow-wrap: anywhere; }
.engine-audit .details { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: 12.5px; }
.engine-audit .details div { display: inline-flex; gap: 5px; }
.engine-audit .details dt { color: var(--muted); }
.engine-audit .details dt::after { content: ":"; }
.engine-audit .details dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.engine-audit .engine-note { margin: 6px 0 0; padding: 6px 10px; font-size: 12.5px; color: var(--ink-2); background: var(--well); border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.engine-audit tr.after-break { background: var(--amber-soft); }
@container hist (max-width: 760px) {
  .engine-audit tbody tr { grid-template-areas: "what when" "actor actor" "entry entry"; }
  .engine-audit .entry { grid-area: entry; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; width: auto; white-space: normal; }
  .engine-audit .entry .no::before { content: "Entry\00a0"; font-weight: 500; color: var(--muted); }
  .engine-audit .actor { width: auto; }
  .engine-audit .entry .no, .engine-audit .check, .engine-audit .hash { display: inline-flex; margin: 0; }
}

/* Identity reviews */
.idconflict { margin-top: 20px; }
.idconflict + .grid { margin-top: 20px; }
.evidence { display: grid; gap: 14px; }
.evidence.earlier { background: var(--well); }
.round-h { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.ev { margin: 0; display: grid; gap: 8px; }
.ev-img { display: block; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #E9EDF1; }
.ev-img img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; }
.ev-img:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ev figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ev figcaption > svg { width: 18px; height: 18px; color: var(--muted); }
.ev figcaption b { overflow-wrap: anywhere; font-weight: 600; }
.ev figcaption .quiet { display: block; }
.claim .idnum { font-size: 18px; font-weight: 600; letter-spacing: .02em; }
.claim .mark { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 5px; white-space: nowrap; }
.claim .mark.m-same { background: var(--cyan-soft); color: var(--cyan); }
.claim .mark.m-diff { background: var(--amber-soft); color: var(--amber); }
.claim > div.m-diff { background: #FFFCF5; }
@media (max-width: 760px) {
  .ev figcaption { grid-template-columns: auto minmax(0, 1fr); }
  .ev figcaption .btn { grid-column: 1 / -1; }
}
.from-to { display: grid; gap: 8px; justify-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--well); }
.from-to > div { display: grid; gap: 1px; }
.from-to > svg { width: 18px; height: 18px; color: var(--muted); }
.move-h { margin: 18px 0 6px; font-size: 14px; font-weight: 650; }
.move-apps { margin: 0; padding-left: 18px; }
.tell-list { list-style: none; margin: 0; padding: 0; }
.tell-list > li { display: grid; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line-2); }
.tell-who { display: grid; gap: 2px; }
.tell-who .quiet { display: block; }
.tell-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; }
.tell-form label { grid-column: 1 / -1; font-size: 13px; font-weight: 600; }
.tell-form .err { grid-column: 1 / -1; }
.told { margin: 0; font-size: 13.5px; }
@media (max-width: 760px) { .tell-form { grid-template-columns: minmax(0, 1fr); } }

/* Identity verification (consumer) */
.mini-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 12px 0 4px; }
.mini-facts > div { display: grid; gap: 1px; }
.mini-facts dt { font-size: 12.5px; color: var(--muted); }
.mini-facts dd { margin: 0; font-weight: 500; }
.sent-files ul { margin: 6px 0 0; padding-left: 18px; }
.sent-files b { font-weight: 600; font-size: 13.5px; }
.why-person { margin-top: 16px; }
.grid > .col > .standing { margin: 0; }
.verify-form .card-b > .field, .verify-form .card-b > .fields { margin-top: 18px; }
.verify-form .card-b > .field:first-child, .verify-form .card-b > .fields:first-child { margin-top: 0; }
.verify-form .card-b > .choice-row { margin-top: 0; }
.verify-form .check span { font-weight: 400; }

/* My protection (consumer dashboard) */
.my-apps { list-style: none; margin: 0; padding: 0; }
.my-apps > li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 150px; gap: 6px 20px; align-items: start; padding: 14px 20px; border-top: 1px solid var(--line-2); }
.my-apps > li:hover { background: #F8FAFD; }
.my-apps .ma-main { display: grid; gap: 2px; justify-items: start; }
.my-apps .ma-main b { font-weight: 650; }
.my-apps .row-link { color: var(--ink); text-decoration: none; }
.my-apps .row-link b { color: var(--blue-ink); }
.my-apps .row-link b::after { content: " \203A"; font-weight: 500; }
.my-apps .row-link::after { content: ""; position: absolute; inset: 0; }
.my-apps .row-link:hover b { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.my-apps .row-link:focus-visible { outline: none; }
.my-apps .row-link:focus-visible::after { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 4px; }
.my-apps .ma-amount { text-align: right; display: grid; gap: 2px; }
.my-apps .ma-status { display: grid; gap: 4px; justify-items: start; }
.req-chip { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 600; padding: 1px 8px; border-radius: 5px; background: var(--amber-soft); color: var(--amber); }
.open-reqs { list-style: none; margin: 0; padding: 0; }
.open-reqs > li { display: grid; gap: 2px; padding: 12px 20px; border-top: 1px solid var(--line-2); }
.open-reqs a { font-weight: 600; }
.notice.in-card { margin: 0; }
@media (max-width: 760px) {
  .my-apps > li { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; }
  .my-apps .ma-status { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; }
}
.act-list { display: grid; }
.act-list > div { display: grid; gap: 4px; justify-items: start; padding: 16px 20px; }
.act-list > div + div { border-top: 1px solid var(--line-2); }
.act-list b { font-weight: 650; }
.act-list p { margin: 0 0 8px; color: var(--ink-2); }
.req-card + .req-card { margin-top: 20px; }
.req-list { list-style: none; margin: 0; padding: 0; }
.req-list > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 8px 24px; padding: 16px 20px; border-top: 1px solid var(--line-2); }
.rq-what, .rq-status { display: grid; gap: 3px; justify-items: start; align-content: start; }
.rq-what b { font-weight: 650; }
@media (max-width: 760px) { .req-list > li { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; } }

/* Protection preferences */
.pref-list { list-style: none; margin: 0; padding: 0; }
.pref-list > li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 16px; align-items: start; padding: 18px 20px; border-top: 1px solid var(--line-2); }
.pref-mark { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--neutral-soft); color: var(--ink-2); }
.pref-mark svg { width: 20px; height: 20px; }
.pref-list > li.on .pref-mark { background: var(--cyan-soft); color: var(--cyan); }
.pref-body h3 { margin: 0 0 4px; font-size: 15px; font-weight: 650; }
.pref-body p { margin: 0 0 4px; color: var(--ink-2); max-width: 60ch; }
.pref-state { display: grid; gap: 8px; justify-items: end; }
.field.narrow { max-width: 360px; }
@media (max-width: 760px) {
  .pref-list > li { grid-template-columns: 40px minmax(0, 1fr); padding: 16px; }
  .pref-state { grid-column: 2; justify-items: start; justify-content: start; grid-auto-flow: column; align-items: center; }
}

/* Notifications (consumer) */
.notify-list { list-style: none; margin: 0; padding: 0; }
.notify-list > li { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--line-2); }
.notify-list > li > div, .notify-list .check > span { display: grid; gap: 2px; }
.notify-list b { font-weight: 600; }
.notify-list .check span span { font-weight: 400; }
.wa-preview { border: 0; margin: 0; min-width: 0; display: grid; gap: 12px; }
.wa-preview :disabled { opacity: .55; }
.sent-card { margin-top: 20px; }
table.sent td { vertical-align: top; }
table.sent td.when { white-space: nowrap; width: 1%; }
table.sent td.what, table.sent td.to, table.sent td.st { display: table-cell; }
table.sent td.what > *, table.sent td.to > *, table.sent td.st > * { display: block; }
table.sent td.st .badge { display: inline-flex; margin-bottom: 4px; }
table.sent td.to .quiet { overflow-wrap: anywhere; }
.sent-card { container: sent / inline-size; }
@container sent (max-width: 720px) {
  table.sent thead { display: none; }
  table.sent, table.sent tbody, table.sent tr { display: block; }
  table.sent tr { padding: 14px 16px; border-bottom: 1px solid var(--line-2); display: grid; gap: 6px; }
  table.sent td, table.sent td.what, table.sent td.to, table.sent td.st { display: block; padding: 0; border: 0; width: auto; }
}

/* Landing page (public) */
/* Landing (US-001): the product's own application screen, at real size, annotated (.impeccable surface brief). */
.public-end { display: flex; align-items: center; gap: 16px; }
.public-nav { display: flex; align-items: center; gap: 18px; }
.public-nav a.plain { color: var(--nav-text); font-weight: 500; font-size: 14px; text-decoration: none; }
.public-nav a.plain:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.public-nav a:focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 3px; border-radius: 4px; }
.lp { max-width: 1240px; margin: 0 auto; }
.lp ::selection { background: var(--blue-soft); color: var(--ink); }
.lp-hero { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7.4fr); gap: 48px; align-items: center; padding: 40px 0 8px; }
.lp-copy h1 { margin: 0; font-size: clamp(34px, 3.6vw, 48px); line-height: 1.06; font-weight: 700; letter-spacing: -.028em; color: var(--ink); text-wrap: balance; }
.lp-lede { margin: 20px 0 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.lp-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 28px; }
.lp-ctas .btn.primary { padding: 11px 18px; font-size: 15px; }
.lp-cons { text-wrap: balance; margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14.5px; max-width: 46ch; }
.lp-cons a { color: var(--blue-ink); font-weight: 600; text-decoration: none; }
.lp-cons a:hover { text-decoration: underline; text-underline-offset: 3px; }
.closed-note { margin: 0; color: var(--ink-2); font-size: 14px; }
.closed-note b { color: var(--ink); font-weight: 600; }

/* The screen: a working replica of the application page, in the app's own components. */
.lp-screen { margin: 0; position: relative; }
.lp-app { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.lp-app-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 22px 16px; border-bottom: 1px solid var(--line-2); }
.lp-app-head b { font-size: 18px; font-weight: 650; }
.lp-app-head .badge { margin-left: 8px; vertical-align: 2px; }
.lp-app-head p { margin: 6px 0 0; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lp-ex { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--neutral-soft); border-radius: 999px; padding: 3px 10px; }
.lp-app-body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.lp-app-body > section { padding: 18px 22px 20px; }
.lp-app-body > section + section { border-left: 1px solid var(--line-2); }
.lp-sec-t { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 650; color: var(--ink); }
.lp-sec-t span.quiet { font-weight: 500; color: var(--muted); }
.lp-pair { display: inline-flex; align-items: center; gap: 8px; }
.lp .nw { white-space: nowrap; }
.lp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; }
.lp-kpis .kpi, .lp-kpis .kpi:first-child { padding: 11px 13px 10px; }
.lp-kpis .kpi + .kpi { border-left: 1px solid var(--line-2); }
.lp-kpis .kpi .v { font-size: 26px; margin: 6px 0 2px; }
.lp-kpis .kpi .w { font-size: 11.5px; white-space: nowrap; }
.lp-kpis .kpi .lbl { font-size: 12.5px; white-space: nowrap; }
.lp-ob { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 0; font-size: 13.5px; color: var(--ink-2); }
.lp-ob b { color: var(--ink); font-weight: 650; white-space: nowrap; }
.lp-fresh { margin: 0 0 10px; font-size: 12.5px; }
.lp-signals { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lp-signals li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 13.5px; }
.lp-signals .i { width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.lp-signals li.warn .i { color: #C98A1B; }
.lp-signals b { display: block; font-weight: 650; }
.lp-signals li.warn b { color: var(--amber); }
.lp-signals span { color: var(--muted); }
.lp-app-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line-2); background: var(--well); }
.lp-app-foot .btn { pointer-events: none; }
.lp-screen figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* The markers that tie the screen to the notes below. */
.lp-n { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-app .lp-n { box-shadow: 0 0 0 0 rgba(20, 32, 51, .28); animation: lp-ping 1.6s cubic-bezier(.16, 1, .3, 1) 1 both; }
.lp-app .lp-n.n2 { animation-delay: .35s; }
.lp-app .lp-n.n3 { animation-delay: .7s; }
@keyframes lp-ping { 0% { box-shadow: 0 0 0 0 rgba(20, 32, 51, .28); } 100% { box-shadow: 0 0 0 10px rgba(20, 32, 51, 0); } }
@media (prefers-reduced-motion: reduce) { .lp-app .lp-n { animation: none; } }
.lp-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; padding: 40px 0 8px; }
.lp-notes > div { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 12px; align-content: start; }
.lp-notes h2 { margin: 0; font-size: 16px; font-weight: 650; line-height: 22px; }
.lp-notes p { grid-column: 2; margin: 0; color: var(--ink-2); line-height: 1.55; font-size: 14.5px; }

/* The two paths: providers in full, consumers in the signal colour's wash. */
.lp-path { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 32px 56px; padding: 56px 0; border-top: 1px solid var(--line); margin-top: 48px; }
.lp-path h2 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; text-wrap: balance; }
.lp-path .lp-sub { margin: 12px 0 22px; color: var(--ink-2); line-height: 1.55; }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px; }
.lp-steps li { display: grid; gap: 4px; }
.lp-steps b { font-weight: 650; color: var(--ink); }
.lp-steps span { color: var(--ink-2); line-height: 1.55; font-size: 14.5px; }
.lp-path.cons { margin-top: 0; align-items: center; }
.lp-short { margin: 0 0 24px; padding-left: 18px; color: var(--ink-2); line-height: 1.55; font-size: 14.5px; }
.lp-short li + li { margin-top: 6px; }
.lp-short b { color: var(--ink); font-weight: 650; }
.lp-myapps { list-style: none; margin: 0; padding: 0; }
.lp-myapps li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line-2); }
.lp-myapps li:first-child { border-top: 0; }
.lp-myapps b { display: block; font-weight: 650; color: var(--ink); }
.lp-myapps span { font-size: 13.5px; color: var(--muted); }
.lp-not { padding: 56px 0 8px; }
.lp-not h2 { margin: 0 0 18px; font-size: 20px; font-weight: 650; }
.lp-not ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.lp-not li { display: grid; gap: 4px; padding-top: 14px; border-top: 2px solid var(--ink); }
.lp-not li b { font-weight: 650; }
.lp-not li span { color: var(--ink-2); line-height: 1.5; font-size: 14px; }
.lp-foot { margin: 56px 0 8px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 14px; }
.lp-foot a { color: var(--blue-ink); font-weight: 600; }
/* Beside the copy (the page is capped at 1240px), four counts across never have room: two by two. */
@media (min-width: 1081px) {
  .lp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-kpis .kpi:nth-child(3) { border-left: 0; }
  .lp-kpis .kpi:nth-child(n+3) { border-top: 1px solid var(--line-2); }
}
@media (max-width: 1080px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .lp-copy { max-width: 640px; }
  .lp-not ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .public-nav .btn { display: none; }
  .lp-hero { padding-top: 20px; }
  .lp-lede { font-size: 16.5px; }
  .lp-ctas .btn { flex: 1 1 100%; justify-content: center; }
  .lp-app-head { padding: 14px 16px; }
  .lp-app-head b { font-size: 15px; }
  .lp-hide-s { display: none; }
  .lp-app-foot .btn.ghost { display: none; }
  .lp-myapps li { padding: 12px 16px; }
  .lp-app-body { grid-template-columns: minmax(0, 1fr); }
  .lp-app-body > section { padding: 16px; }
  .lp-app-body > section + section { border-left: 0; border-top: 1px solid var(--line-2); }
  .lp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-kpis .kpi:nth-child(3) { border-left: 0; }
  .lp-kpis .kpi:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .lp-app-foot { padding: 12px 16px; }
  .lp-notes { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 28px; }
  .lp-path { grid-template-columns: minmax(0, 1fr); padding: 40px 0; margin-top: 32px; }
  .lp-path.cons { padding: 28px 20px; }
  .lp-steps, .lp-not ul { grid-template-columns: minmax(0, 1fr); }
  .lp-path h2 { font-size: 22px; }
}

/* Sign-in pages */
.invite.sign-in { max-width: 460px; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.label-row a { font-size: 13px; }
.code-input { font-size: 22px; letter-spacing: .2em; max-width: 200px; }
/* Setting up an authenticator app: two numbered steps, the QR code always dark on white (cameras need the contrast). */
.invite.setup { max-width: 540px; }
.setup-steps { list-style: none; margin: 0; counter-reset: setup; gap: 22px; }
.setup-steps > li { counter-increment: setup; display: grid; gap: 10px; padding-left: 38px; position: relative; }
.setup-steps > li::before { content: counter(setup); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 650; color: var(--ink); background: var(--well); border: 1px solid var(--line); }
.qr-frame { width: 184px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.qr-frame .qr { display: block; width: 100%; height: auto; }
.totp-key { flex: 1; padding: 8px 10px; font-size: 14px; letter-spacing: .02em; word-spacing: .1em; background: var(--well); border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.new-here { border-top: 1px solid var(--line-2); }
.sign-out { margin: 2px 0 0; }
.sign-out button { font: inherit; font-size: 12.5px; color: var(--nav-text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sign-out button:hover { color: #fff; }
.sign-out button:focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 2px; border-radius: 3px; }
.req-chip.done { background: var(--neutral-soft); color: var(--ink-2); }

/* Account settings */
.settings-fields { display: grid; gap: 16px; max-width: 460px; }
.sign-fail { color: var(--amber); }

/* API keys */
.key-list { list-style: none; margin: 0; padding: 0; }
.key-list > li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px 20px; align-items: start; padding: 16px 20px; border-top: 1px solid var(--line-2); }
.key-main { display: grid; gap: 4px; justify-items: start; }
.key-main b { font-weight: 650; }
.key-prefix { font-size: 13px; color: var(--ink-2); }
.scopes { display: flex; flex-wrap: wrap; gap: 6px; }
.scope { font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 5px; background: var(--neutral-soft); color: var(--ink-2); }
.key-meta { display: grid; gap: 2px; font-size: 13.5px; color: var(--muted); }
.key-list.revoked > li { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; }
.key-list.revoked b { color: var(--ink-2); }
.revoked-card { margin-top: 20px; }
.secret-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.secret-row .secret { flex: 1; font-size: 14px; background: var(--well); }
.secret-card .alert { margin-bottom: 16px; }
.scope-check { margin-top: 10px; }
.scope-check > span { display: grid; gap: 2px; }
.scope-check .quiet { font-weight: 400; }
@media (max-width: 760px) {
  .key-list > li, .key-list.revoked > li { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .secret-row { flex-wrap: wrap; }
}

/* Integration guide */
.docs { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 20px; }
.docs-toc { position: sticky; top: 72px; display: grid; gap: 6px; font-size: 13.5px; }
.docs-toc b { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.docs-toc a { color: var(--ink-2); text-decoration: none; }
.docs-toc a:hover { color: var(--blue); text-decoration: underline; }
.docs-body { display: grid; gap: 16px; min-width: 0; }
.doc h2 { margin: 0 0 10px; font-size: 18px; font-weight: 650; scroll-margin-top: 72px; }
.doc .card-b { padding: 22px 24px; }
.flow { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.code { position: relative; margin: 10px 0 14px; }
.code pre { margin: 0; padding: 14px 16px; padding-right: 80px; background: #F8FAFC; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 13px; line-height: 1.55; overflow-x: auto; white-space: pre; }
.code .btn { position: absolute; top: 8px; right: 8px; }
@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs-toc { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
  .docs-toc b { grid-column: 1 / -1; }
  .doc .card-b { padding: 18px 16px; }
}
.doc .mono { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .9em; background: var(--well); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 4px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .code { display: grid; gap: 6px; }
  .code .btn { position: static; justify-self: end; order: -1; }
  .code pre { padding-right: 16px; }
}
.origin-add { border-top: 1px solid var(--line-2); }
.origin-add .secret-row input { flex: 1 1 260px; max-width: 440px; }
.origin-list .key-main b { overflow-wrap: anywhere; }

/* LMS widget (US-044): a portal page inside a provider's LMS, 320 px wide and up. */
.wg-body { margin: 0; background: var(--card); }
.wg { min-height: 100vh; display: flex; flex-direction: column; font-size: 14px; color: var(--ink); }
.wg-top { display: flex; align-items: center; gap: 8px; min-height: 53px; box-sizing: border-box; padding: 10px 14px; border-bottom: 1px solid var(--line-2); background: var(--well); position: sticky; top: 0; z-index: 1; }
.wg-top > b { font-weight: 650; letter-spacing: -0.01em; }
.wg-top .synthetic { font-size: 11px; padding: 1px 7px; }
.wg-mark { width: 22px; height: 22px; object-fit: contain; }
.wg-icon { margin-left: auto; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink-2); cursor: pointer; }
.wg-icon:hover { border-color: #C3CCD8; color: var(--ink); }
.wg-icon:focus-visible, .wg .btn:focus-visible, .wg a:focus-visible, .linkish:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wg-icon .i { width: 16px; height: 16px; }
.wg.refreshing .wg-icon .i { animation: wg-spin 0.9s linear infinite; }
@keyframes wg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wg.refreshing .wg-icon .i { animation: none; } }
.wg-state { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 32px 18px; color: var(--muted); font-size: 13.5px; }
.wg-state b { color: var(--ink); font-size: 15px; font-weight: 650; }
.wg-state .i { width: 24px; height: 24px; color: var(--faint); }
.wg-state.warn .i { color: #C98A1B; }
.wg-state .btn { margin-top: 6px; }
.wg-state .skel { width: 60%; height: 10px; }
.wg-app { padding: 14px 14px 12px; border-bottom: 1px solid var(--line-2); }
.wg-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.wg-ref b { font-size: 15px; font-weight: 650; }
.wg-app p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.wg-sec { padding: 12px 14px 14px; border-bottom: 1px solid var(--line-2); }
.wg-sec h2 { margin: 0 0 8px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); text-transform: none; }
.wg-sec h2 span { font-weight: 500; color: var(--muted); }
.wg-sec h3 { margin: 14px 0 6px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.wg-flags { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wg-flags li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
.wg-flags .i { width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.wg-flags li.warn .i { color: #C98A1B; }
.wg-flags b { display: block; font-weight: 650; font-size: 13.5px; }
.wg-flags li.warn b { color: var(--amber); }
.wg-flags span { display: block; color: var(--muted); font-size: 12.5px; }
.wg-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.wg-terms { margin: 0; display: grid; gap: 8px; }
.wg-terms div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; }
.wg-terms dt { color: var(--muted); font-size: 13px; }
.wg-terms dd { margin: 0; }
.wg-terms dd b { display: block; font-weight: 650; }
.wg-terms dd span { color: var(--muted); font-size: 12.5px; }
.wg-fresh { margin: 0 0 8px; font-size: 12.5px; }
.wg-refreshing { display: none; color: var(--muted); }
.wg.refreshing .wg-fresh > :not(.wg-refreshing) { display: none; }
.wg.refreshing .wg-refreshing { display: inline; }
.wg-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; }
.wg-kpis .kpi, .wg-kpis .kpi:first-child { padding: 9px 11px 8px; }
.wg-kpis .kpi .lbl { font-size: 12.5px; }
.wg-kpis .kpi .v { font-size: 22px; margin: 4px 0 2px; }
.wg-kpis .kpi .w { font-size: 11.5px; }
.wg-kpis.stale .kpi .v { color: var(--ink-2); }
.wg-quiet { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--muted); font-size: 12.5px; }
.wg-quiet .i { width: 14px; height: 14px; color: var(--green-dot); }
.wg-obl { list-style: none; margin: 0; padding: 0; }
.wg-obl li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line-2); font-size: 13px; }
.wg-obl li:first-child { border-top: 0; }
.wg-box { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 12.5px; }
.wg-box.warn { background: var(--amber-soft); border: 1px solid var(--amber-line); color: var(--amber); }
.wg-box b { font-size: 13.5px; }
.linkish { justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; cursor: pointer; }
.wg-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; font-size: 13px; }
.wg-foot .btn .i { width: 14px; height: 14px; margin-left: 4px; }
.wg-foot .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.wg-ends { margin-left: auto; color: var(--muted); font-size: 12px; }

/* Widget design preview: a made-up LMS page around the real widget. */
.wp-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; padding: 14px 18px; margin-bottom: 16px; }
.wp-controls .field { margin: 0; min-width: 220px; }
.wp-controls .field select { min-width: 220px; }
.lms-window { border: 1px solid #C9D1DC; border-radius: var(--radius); overflow: hidden; background: #E9ECF0; box-shadow: var(--shadow); }
.lms-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #DCE1E7; border-bottom: 1px solid #C9D1DC; }
.lms-dots { display: inline-flex; gap: 5px; }
.lms-dots i { width: 9px; height: 9px; border-radius: 50%; background: #B4BDC9; }
.lms-url { flex: 1; min-width: 0; padding: 3px 10px; border-radius: 6px; background: #F4F6F8; color: #5E6B7C; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lms { display: flex; align-items: stretch; gap: 0; min-height: 660px; }
.lms-main { flex: 1; min-width: 0; padding: 18px 22px; background: #F7F8FA; font-family: Arial, Helvetica, sans-serif; color: #4A5565; }
.lms-title { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 2px solid #D5DAE1; }
.lms-title b { color: #333C48; font-size: 15px; }
.lms-title span { font-size: 12px; color: #5E6B7C; }
.lms-fields { margin: 0; display: grid; gap: 12px; }
.lms-fields div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center; }
.lms-fields dt { font-size: 12.5px; }
.lms-fields dd { margin: 0; height: 28px; border: 1px solid #D5DAE1; background: #fff; border-radius: 3px; display: flex; align-items: center; padding: 0 8px; }
.lms-fields dd i { display: block; height: 8px; border-radius: 4px; background: #E3E7EC; }
.lms-actions { display: flex; gap: 8px; margin-top: 18px; }
.lms-actions i { display: block; width: 92px; height: 30px; border-radius: 3px; background: #CDD3DB; }
.lms-side { flex: none; width: calc(var(--wp-width) + 2px); border-left: 1px solid #C9D1DC; background: #fff; }
.lms-side iframe { display: block; width: var(--wp-width); height: 100%; min-height: 660px; border: 0; }
.wp-foot { margin-top: 12px; }
@media (max-width: 900px) {
  .lms { flex-direction: column; min-height: 0; }
  .lms-main { padding: 14px 16px; }
  .lms-fields div { grid-template-columns: 110px minmax(0, 1fr); }
  .lms-side { width: 100%; border-left: 0; border-top: 1px solid #C9D1DC; }
  .lms-side iframe { width: 100%; min-height: 620px; }
}

/* Integrations overview (US-035): health in words and an icon; amber for both levels of trouble, never red. */
.health { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12.5px; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--neutral-soft); color: var(--ink-2); white-space: nowrap; }
.health .i { width: 14px; height: 14px; }
.health.ok { background: var(--neutral-soft); color: var(--ink-2); }
.health.look { background: var(--amber-soft); color: var(--amber); }
.health.bad { background: var(--amber-soft); color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber-line); }
.hpart.bad { border-color: #E2C892; }
.health-sum { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 20px 0 18px; border-radius: var(--radius-sm); background: var(--amber-soft); border: 1px solid var(--amber-line); }
.health-sum > .i { color: var(--amber); margin-top: 1px; flex: none; }
.health-sum b { display: block; color: var(--amber); font-weight: 650; }
.health-sum p { margin: 2px 0 0; color: var(--ink-2); }
.health-sum a { color: var(--ink); font-weight: 600; }
.health-sum.ok { background: var(--well); border-color: var(--line); }
.health-sum.ok > .i { color: var(--faint); }
.health-sum.ok b { color: var(--ink); }
.fix { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--amber-line); background: var(--amber-soft); border-radius: var(--radius-sm); }
.fix > b { display: block; font-weight: 650; color: var(--ink); }
.fix p { margin: 3px 0 0; color: var(--ink-2); }
.failures { list-style: none; margin: 0; padding: 0; }
.failures li { padding: 12px 20px; border-top: 1px solid var(--line-2); }
.failures li p { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; }
.failures li.gave-up p b { color: var(--amber); }
.detail-list dd.wrap { overflow-wrap: anywhere; }
.health-sum.none { background: var(--well); border: 1px dashed #CDD5E0; }
.health-sum.none > .i { color: var(--faint); }
.health-sum.none b { color: var(--ink); }

/* Browser extension (US-036) */
.inst-list .key-main .quiet { font-size: 13px; }
.steps-pair { display: grid; gap: 4px 24px; }
.steps-pair h3 { margin: 0 0 4px; font-size: 14px; font-weight: 650; }
.steps-pair ol { margin: 0 0 12px; padding-left: 20px; }
.steps-pair li + li { margin-top: 4px; }
.pair-wait { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 28px 20px; }
.pair-wait p { margin: 0; }
.pair-code { font-size: 34px; font-weight: 650; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: var(--ink); padding: 10px 22px; border: 1px dashed #CDD5E0; border-radius: var(--radius-sm); background: var(--well); user-select: all; }
.pair-waiting { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.pair-waiting .skel { width: 80px; height: 8px; }
.pair-done { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 28px 20px; }
.pair-done .i { width: 26px; height: 26px; color: var(--green-dot); }
.pair-done b { font-size: 16px; }
.pair-done p { margin: 0; color: var(--ink-2); }

/* Extension design preview (US-037, US-038): a made-up browser, the LMS page and the sidebar (which reads like the widget). */
.xp-how { margin: 0 0 14px; }
.xp-window { border: 1px solid #C9D1DC; border-radius: var(--radius); overflow: hidden; background: #E9ECF0; box-shadow: var(--shadow); }
.xp-tabs { display: flex; gap: 2px; padding: 8px 10px 0; background: #DCE1E7; overflow-x: auto; scrollbar-width: thin; }
.xp-tabs button { flex: none; border: 0; border-radius: 8px 8px 0 0; padding: 7px 14px; background: transparent; color: #4A5565; font: inherit; font-size: 12.5px; cursor: pointer; }
.xp-tabs button[aria-selected="true"] { background: #F4F6F8; color: #333C48; font-weight: 600; }
.xp-tabs button:focus-visible, .xp-ext:focus-visible, .xp-menu button:focus-visible, .sb-tabs button:focus-visible, .sb-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.xp-bar { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #F4F6F8; border-bottom: 1px solid #C9D1DC; }
.xp-url { flex: 1; min-width: 0; padding: 4px 10px; border-radius: 6px; background: #fff; border: 1px solid #DCE1E7; color: #4A5565; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-ext { position: relative; display: grid; place-items: center; width: 34px; height: 30px; border: 1px solid #C9D1DC; border-radius: 6px; background: #fff; cursor: pointer; }
.xp-ext[aria-pressed="true"] { background: var(--blue-soft); border-color: #B9CCF4; }
.xp-ext img { width: 18px; height: 18px; }
.xp-badge { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); border: 2px solid #fff; }
.xp-body { display: flex; align-items: stretch; min-height: 680px; }
.xp-page { flex: 1; min-width: 0; padding: 18px 22px; background: #F7F8FA; font-family: Arial, Helvetica, sans-serif; color: #4A5565; }
.xp-fields dd { height: auto; min-height: 28px; color: #333C48; font-size: 13.5px; }
.xp-note { margin: 0 0 12px; font-size: 12.5px; color: #6B7684; font-style: italic; }
.xp-hint { margin: 16px 0 0; font-size: 12px; color: var(--muted); }
.xp-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; padding-top: 12px; border-top: 1px solid #D5DAE1; font-size: 13px; }
.xp-links .linkish { color: #2B5DAA; font-weight: 400; }
.xp-side { flex: none; width: 362px; border-left: 1px solid #C9D1DC; background: #fff; }
.xp-window.closed .xp-side { display: none; }
.xp-closed { margin: 0; padding: 10px 14px; background: #F4F6F8; border-top: 1px solid #C9D1DC; font-size: 13px; color: var(--ink-2); }
.xp-menu { position: fixed; z-index: 50; list-style: none; margin: 0; padding: 4px; min-width: 210px; background: #fff; border: 1px solid #C9D1DC; border-radius: 6px; box-shadow: 0 6px 20px rgba(15, 27, 45, .18); }
.xp-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: 4px; background: none; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; color: var(--ink); }
.xp-menu button:hover { background: var(--blue-soft); }
.xp-menu img { width: 16px; height: 16px; }
.sb { min-height: 680px; }
.sb .wg-top { position: static; }
.sb-who { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-tabs { display: flex; border-bottom: 1px solid var(--line-2); padding: 0 8px; }
.sb-tabs button { flex: 1; border: 0; border-bottom: 2px solid transparent; background: none; padding: 10px 4px 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.sb-tabs button[aria-selected="true"] { color: var(--blue-ink); border-bottom-color: var(--blue); }
.sb-banner { display: flex; gap: 8px; align-items: flex-start; margin: 10px 14px 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--blue-soft); color: var(--blue-ink); font-size: 12.5px; font-weight: 600; }
.sb-banner.quiet { background: var(--neutral-soft); color: var(--ink-2); font-weight: 500; }
.sb-banner.warn { background: var(--amber-soft); color: var(--amber); }
.sb-banner .i { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.sb-err { margin: 10px 14px 0; }
.sb .wg-sec input[type="search"] { width: 100%; }
.sb-list { list-style: none; margin: 0; padding: 0; }
.sb-row { display: grid; gap: 2px; width: 100%; text-align: left; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line-2); background: none; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.sb-row:hover { background: var(--well); }
.sb-row b { color: var(--ink); font-size: 14px; }
.sb-row .badge { justify-self: start; }
.sb-row .quiet { font-size: 12px; }
.sb-lookup fieldset { border: 0; padding: 0; margin: 0 0 12px; display: flex; gap: 16px; flex-wrap: wrap; }
.sb-lookup legend { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.sb-radio { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; }
.sb .field { margin-bottom: 12px; }
.sb-activate h2 { font-size: 15px; color: var(--ink); }
.sb-code { font-size: 20px !important; letter-spacing: 0.12em; text-transform: uppercase; }
.sb-pins { list-style: none; margin: 0 0 10px; padding: 0; }
.sb-pins li { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-2); font-size: 13px; }
.sb-pins li:first-child { border-top: 0; }
.sb-url { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.sb-back { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px 0; font-size: 13px; }
.sb-back .linkish { color: var(--blue-ink); font-weight: 600; text-decoration: none; }
.sb-back .wg-icon { margin-left: 0; }
.sb.refreshing .sb-back .wg-icon .i { animation: wg-spin 0.9s linear infinite; }
.sb.refreshing .wg-fresh > :not(.wg-refreshing) { display: none; }
.sb.refreshing .wg-refreshing { display: inline; }
.sb-name { color: var(--ink); font-size: 14px; }
.sb-pinned { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; font-size: 13px; }
.sb-pinned .i { width: 15px; height: 15px; }
@media (max-width: 900px) {
  .xp-body { flex-direction: column; min-height: 0; }
  .xp-page { padding: 14px 16px; }
  .xp-side { width: 100%; border-left: 0; border-top: 1px solid #C9D1DC; }
}

/* Webhooks (US-048) */
.test-result { display: flex; gap: 8px; align-items: flex-start; }
.test-result .i { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.test-result.ok .i { color: var(--muted); }
.test-result.bad .i { color: #C98A1B; }

/* Help feedback (US-042) */
.fb-article + .fb-article { margin-top: 16px; }
.fb-counts { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: 13.5px; color: var(--ink-2); }
.fb-counts b { font-size: 18px; font-weight: 650; color: var(--ink); margin-right: 4px; }
.fb-notes { list-style: none; margin: 0; padding: 0; }
.fb-notes li { padding: 12px 20px; border-top: 1px solid var(--line-2); display: grid; gap: 4px; }
.fb-notes blockquote { margin: 0; color: var(--ink); }
.fb-notes .quiet { font-size: 12.5px; }

/* Review fixes, 2026-10-22: space after page notices; small headings inside panel headers; overview headers keep the badge top-right. */
.notice + .grid, .notice + .card, .notice + form.card, .alert + .grid, .notice + .lms-window, .notice + .wp-controls { margin-top: 20px; }
.card-h h3 { font-size: 14px; margin: 0; font-weight: 650; }
.hpart .card-h { flex-wrap: nowrap; align-items: flex-start; }
.apps .stage-chip { white-space: nowrap; }
.head > div:first-child { flex: 1 1 0; min-width: 0; }
.head > .actions { flex: none; }
.staff .person a.name { color: var(--blue-ink); }
@media (max-width: 760px) {
  .audit-filters .dates, .hist-filters .dates { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
}
.hist-filters .dates[hidden] { display: none; }
@media (max-width: 900px) { .open-reqs > li, .fb-notes li { padding-left: 16px; padding-right: 16px; } }
/* Accounts on a narrow screen: stacked rows (as the audit history) */
@container hist (max-width: 760px) {
  .accounts thead { display: none; }
  .accounts, .accounts tbody { display: block; }
  .accounts tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 16px; border-top: 1px solid var(--line-2); }
  .accounts td, .accounts td:first-child, .accounts td:last-child { display: block; padding: 0; border: 0; }
  .accounts td:nth-child(1) { grid-column: 1 / -1; }
  .accounts td:nth-child(2) { grid-column: 1; }
  .accounts td:nth-child(3) { grid-column: 1; color: var(--ink-2); }
  .accounts td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; }
  .accounts td:nth-child(5) { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
  .accounts td:nth-child(5)::before { content: "Last signed in: "; }
  .accounts td.none:nth-child(3) { display: none; }
}

/* The engine has limited the provider (US-049): its own state, amber because it needs someone's attention. */
.paused-note { display: flex; gap: 18px; padding: 22px 24px; margin: 20px 0 0; border-color: var(--amber-line); background: var(--amber-soft); }
.paused-note .standing-mark { background: var(--card); color: var(--amber); }
.paused-note h2 { margin: 0 0 6px; font-size: 16px; font-weight: 650; color: var(--amber); }
.paused-note p { margin: 0 0 6px; color: var(--ink-2); }
.act-state.paused { color: var(--ink-2); }
.act-state.paused svg { color: var(--faint); }
.wg-box:not(.warn) { background: var(--neutral-soft); color: var(--ink-2); }
@media (max-width: 900px) { .paused-note { padding: 18px 16px; gap: 14px; } }
.engine-attention { margin: 0 0 16px; }
.engine-attention ul { margin: 4px 0 0; padding-left: 18px; }
.queue .sub.engine-mark { color: var(--amber); font-weight: 600; }
.engine-card .detail-list > div { grid-template-columns: 104px minmax(0, 1fr); }

/* Leaving Enqorum (US-052): the notice on the status page and above open applications */
.leaving-banner { margin: 0 0 16px; }
.leaving-note ul { margin: 2px 0 8px; padding-left: 20px; color: var(--ink-2); max-width: 70ch; }
.leaving-note ul li + li { margin-top: 2px; }
.leaving-note .actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Changes after approval (US-053): the certificate reminder and the change waiting for review */
.cert-expiry { margin: 0 0 16px; }
.change-waiting { margin: 0 0 24px; }
.change-waiting .was { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.cert-valid p { margin: 0 0 4px; }
.change-review { border-top: 1px solid var(--line-2); }
.change-review h3 { margin: 0 0 4px; font-size: 15px; font-weight: 650; }
.change-review .compare tr.changed th { color: var(--ink); }
.change-review .was { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.card-b > .field + .field { margin-top: 18px; }

/* Audit download (US-054) */
.audit-download { align-items: center; max-width: 360px; }
.audit-download .quiet { font-size: 12.5px; flex-basis: 100%; }
.leaving-note { margin-bottom: 24px; }
@media (max-width: 760px) {
  .change-review .compare td:nth-child(2)::before { content: "Asked for: "; }
  .change-review .compare td:nth-child(3)::before { content: "Read from the new certificate: "; }
}

/* Your data and data requests (US-056) */
.data-sections { display: grid; gap: 20px; margin-top: 20px; }
.data-requests { margin-top: 20px; }
.data-list { margin: 0; padding-left: 18px; }
.data-list li + li { margin-top: 10px; }
.data-list li p { margin: 4px 0 0; color: var(--ink-2); }
.data-list .badge { margin-left: 6px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { text-align: left; padding: 8px 10px 8px 0; border-top: 1px solid var(--line-2); vertical-align: top; }
.data-table thead th { font-size: 12.5px; color: var(--muted); font-weight: 600; border-top: 0; }
@media (max-width: 760px) {
  .data-table thead { display: none; }
  .data-table tr { display: grid; padding: 8px 0; border-top: 1px solid var(--line-2); }
  .data-table td { border: 0; padding: 0; }
}
@media print {
  .sidebar, .side, .topbar, .crumbs, .no-print, .help-button, .uifirst-toolbar, [data-uifirst-toolbar], .gs, .tour-offer { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; break-inside: avoid; }
}
.check .outcome-hint { display: block; margin-top: 1px; font-weight: 400; color: var(--ink-2); }
fieldset.field { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
fieldset.field legend { font-weight: 600; margin-bottom: 4px; }
/* A scrolling code block takes keyboard focus, so it can be scrolled without a mouse (WCAG 2.1.1). */
.code pre:focus-visible, .timeline pre:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Links listed in an alert are spaced as touch targets (WCAG 2.5.8: at least 24px apart). */
.alert ul li { padding: 4px 0; }
.alert ul li a { display: inline-block; min-height: 20px; }