/* ==========================================================================
   EPM Admin portal
   Tokens are layered: primitive -> semantic -> component.
   Light and dark are designed as a pair: dark uses lighter, desaturated tonal
   variants, never an inversion. Foreground/background pairs meet WCAG AA
   (4.5:1 body text, 3:1 borders and large text) in both themes.
   Fonts are system stacks on purpose: the portal's Content-Security-Policy is
   default-src 'self', so a webfont CDN would be blocked, and fetching one would
   leak admin IP addresses to a third party (GDPR).
   ========================================================================== */

/* ---------------------------------------------------- primitive + semantic */
:root {
  color-scheme: light;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* density 8/10: dense dashboard scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  --text-xs: 11.5px; --text-sm: 12.5px; --text-base: 14px;
  --text-md: 15px;   --text-lg: 18px;   --text-xl: 22px; --text-2xl: 28px;
  --leading: 1.55;

  --radius-sm: 5px; --radius: 8px; --radius-lg: 12px; --radius-full: 999px;
  --ring: 2px;
  --dur: 160ms;
  --ease: cubic-bezier(.2, 0, .2, 1);

  /* surfaces */
  --bg:            #F1F4F8;
  --surface:       #FFFFFF;
  --surface-2:     #F7F9FB;
  --surface-3:     #EDF1F6;
  --surface-inset: #F4F6F9;

  /* text */
  --fg:        #131A26;
  --fg-soft:   #3B4657;
  --fg-muted:  #59647A;

  /* lines */
  --line:       #DCE3EB;
  --line-strong:#C3CDD9;

  /* brand + status (light tonal variants) */
  --brand:        #1E293B;
  --brand-fg:     #FFFFFF;
  --brand-soft:   #E7EAEF;

  --ok:        #136B35;
  --ok-bg:     #E6F5EC;
  --ok-line:   #A8DCBC;
  --warn:      #8A5200;
  --warn-bg:   #FDF3E2;
  --warn-line: #EFD4A0;
  --bad:       #B42318;
  --bad-bg:    #FDECEA;
  --bad-line:  #F3BDB6;
  --info:      #1B5FA8;
  --info-bg:   #E8F1FB;
  --info-line: #B4D2F0;

  --focus: #1B5FA8;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 1px rgba(16, 24, 40, .04);
  --shadow:    0 2px 6px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .16);
  --scrim: rgba(19, 26, 38, .45);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0F172A;
  --surface:       #1A2233;
  --surface-2:     #212B3F;
  --surface-3:     #27324A;
  --surface-inset: #151D2C;

  --fg:        #F1F5F9;
  --fg-soft:   #CBD5E1;
  --fg-muted:  #9AA7BA;

  --line:       #303C54;
  --line-strong:#44536F;

  --brand:        #E2E8F0;
  --brand-fg:     #0F172A;
  --brand-soft:   #27324A;

  --ok:        #4ADE80;
  --ok-bg:     #14301F;
  --ok-line:   #256B41;
  --warn:      #FBBF24;
  --warn-bg:   #3A2A08;
  --warn-line: #7C5A12;
  --bad:       #FCA5A5;
  --bad-bg:    #3B1618;
  --bad-line:  #7F2E2E;
  --info:      #7DB6EE;
  --info-bg:   #12263D;
  --info-line: #2C4E74;

  --focus: #9EC5F5;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow:    0 2px 8px rgba(0, 0, 0, .45);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, .60);
  --scrim: rgba(3, 7, 16, .62);
}

/* System preference, when the user has not chosen explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#0F172A; --surface:#1A2233; --surface-2:#212B3F; --surface-3:#27324A; --surface-inset:#151D2C;
    --fg:#F1F5F9; --fg-soft:#CBD5E1; --fg-muted:#9AA7BA;
    --line:#303C54; --line-strong:#44536F;
    --brand:#E2E8F0; --brand-fg:#0F172A; --brand-soft:#27324A;
    --ok:#4ADE80; --ok-bg:#14301F; --ok-line:#256B41;
    --warn:#FBBF24; --warn-bg:#3A2A08; --warn-line:#7C5A12;
    --bad:#FCA5A5; --bad-bg:#3B1618; --bad-line:#7F2E2E;
    --info:#7DB6EE; --info-bg:#12263D; --info-line:#2C4E74;
    --focus:#9EC5F5;
    --shadow-sm:0 1px 2px rgba(0,0,0,.40); --shadow:0 2px 8px rgba(0,0,0,.45); --shadow-lg:0 14px 40px rgba(0,0,0,.60);
    --scrim: rgba(3, 7, 16, .62);
  }
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font: var(--text-base)/var(--leading) var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Not display:none. That would drop the whole subtree from rendering, and with
   it the gradient the brand mark paints itself with: a <use> of the mark then
   comes out as a bare tick on nothing. Zero-sized and clipped keeps the paint
   server reachable while taking up no space. */
svg.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible {
  outline: var(--ring) solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
::selection { background: var(--info-bg); color: var(--fg); }

/* Icons are stroked outlines on a 24px grid. fill and stroke are inherited
   properties, which is how they reach the cloned content of a <use>. */
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* The one multi-colour mark: opt it out of the outline treatment. */
.ico-brand { fill: currentColor; stroke: none; }

.muted { color: var(--fg-muted); }
.small { font-size: var(--text-sm); }
.mono { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
code {
  font-family: var(--font-mono); font-size: .92em;
  background: var(--surface-3); padding: 1px 5px; border-radius: var(--radius-sm);
}
/* Inside a <pre> the block already is the code surface. Without this the inline
   rule paints a second, lighter box around the command and it reads as a
   selection artefact on the dark strip rather than as the command. */
pre code, .package-hash code {
  background: none; padding: 0; border-radius: 0; font-size: inherit; color: inherit;
}
.loading { padding: var(--sp-6); color: var(--fg-muted); text-align: center; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 36px; padding: 0 var(--sp-4);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: var(--text-base); font-weight: 500; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--surface-3); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-sm { min-height: 30px; padding: 0 var(--sp-3); font-size: var(--text-sm); }
.btn-block { width: 100%; }
.btn-primary { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); }
.btn-primary:hover { filter: brightness(1.18); background: var(--brand); }
.btn-ok  { color: var(--ok);  border-color: var(--ok-line);  background: var(--ok-bg); }
.btn-bad { color: var(--bad); border-color: var(--bad-line); background: var(--bad-bg); }
.btn-ok:hover, .btn-bad:hover { filter: brightness(.97); }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--fg-soft); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--surface-3); color: var(--fg); }

/* ----------------------------------------------------------------- inputs */
input[type="text"], input[type="search"], input[type="password"],
input[type="number"], input[type="datetime-local"], select, textarea {
  width: 100%; min-height: 36px; padding: var(--sp-2) var(--sp-3);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--fg-muted); }
input:hover, select:hover, textarea:hover { border-color: var(--fg-muted); }
textarea { font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6; resize: vertical; }
select { cursor: pointer; }
.field { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.field > label { font-size: var(--text-sm); font-weight: 500; color: var(--fg-soft); }
.field-inline { display: flex; align-items: center; gap: var(--sp-2); }
.field-inline select, .field-inline input { width: auto; min-width: 132px; }
.field-error { color: var(--bad); font-size: var(--text-sm); margin-top: var(--sp-2); }
.check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.check input { width: 16px; height: 16px; min-height: 0; accent-color: var(--focus); cursor: pointer; }
.search { position: relative; display: flex; align-items: center; }
.search .ico { position: absolute; left: 10px; color: var(--fg-muted); pointer-events: none; }
.search input { padding-left: 34px; min-width: 210px; }
.row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------ chips */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px var(--sp-2); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600; line-height: 1.7;
  border: 1px solid transparent; white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip-ok    { color: var(--ok);   background: var(--ok-bg);   border-color: var(--ok-line); }
.chip-warn  { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.chip-bad   { color: var(--bad);  background: var(--bad-bg);  border-color: var(--bad-line); }
.chip-info  { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }
.chip-muted { color: var(--fg-muted); background: var(--surface-3); border-color: var(--line); }
.chip-live .dot { animation: pulse 2s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------------------------------------------------------------- sign in */
.login { min-height: 100%; display: grid; place-items: center; padding: var(--sp-8) var(--sp-4); }
.login-card {
  width: 100%; max-width: 420px; padding: var(--sp-8);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.login-brand { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-6); }
.login-title { font-size: var(--text-lg); font-weight: 650; letter-spacing: -.01em; }
.login-env { margin-top: var(--sp-4); text-align: center; }
.btn-ms { width: 100%; min-height: 44px; background: #2F2F2F; color: #FFFFFF; border-color: #2F2F2F; }
.btn-ms:hover { background: #1F1F1F; filter: none; }
.bg-block { margin-top: var(--sp-5); border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.bg-block summary {
  display: flex; align-items: center; gap: var(--sp-2); list-style: none;
  cursor: pointer; color: var(--fg-soft); font-size: var(--text-sm); font-weight: 500;
}
.bg-block summary::-webkit-details-marker { display: none; }
.bg-block summary:hover { color: var(--fg); }
.bg-block > p { margin: var(--sp-2) 0 var(--sp-4); }

/* ---------------------------------------------------------------- callout */
.callout {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0;
  background: var(--info-bg); border: 1px solid var(--info-line);
  border-radius: var(--radius); color: var(--fg); font-size: var(--text-sm);
}
.callout .ico { color: var(--info); margin-top: 1px; }
.callout.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.callout.warn .ico { color: var(--warn); }
.callout.bad  { background: var(--bad-bg);  border-color: var(--bad-line); }
.callout.bad .ico { color: var(--bad); }
.callout.ok   { background: var(--ok-bg);   border-color: var(--ok-line); }
.callout.ok .ico { color: var(--ok); }

/* -------------------------------------------------------------- app shell */
.shell {
  min-height: 100%;
  display: grid;
  grid-template-columns: 216px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas: "top top" "nav main";
}
.topbar {
  grid-area: top; position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--fg); }
.brand-name { font-weight: 650; letter-spacing: -.01em; }
.topbar-spacer { flex: 1; }
.who { display: flex; align-items: center; gap: var(--sp-2); }
.who-text { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.who-name { font-size: var(--text-sm); font-weight: 550; }

.sidenav {
  grid-area: nav; position: sticky; top: 56px; align-self: start;
  display: flex; flex-direction: column; gap: 2px;
  height: calc(100vh - 56px); padding: var(--sp-3);
  background: var(--surface); border-right: 1px solid var(--line);
}
.navitem {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 38px; padding: 0 var(--sp-3);
  background: none; border: 0; border-radius: var(--radius);
  color: var(--fg-soft); font-size: var(--text-base); font-weight: 500;
  cursor: pointer; text-align: left;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.navitem:hover { background: var(--surface-3); color: var(--fg); }
.navitem.active { background: var(--brand-soft); color: var(--fg); font-weight: 600; }
.navitem.active .ico { color: var(--info); }

.content { grid-area: main; padding: var(--sp-6); min-width: 0; }
.page { display: grid; gap: var(--sp-5); align-content: start; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.page-head h1 { font-size: var(--text-2xl); font-weight: 650; letter-spacing: -.02em; margin-bottom: 2px; }
.page-head p { max-width: 68ch; }
.only-mobile { display: none; }

/* ------------------------------------------------------------------- KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4); }
.kpi {
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.kpi-label { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--fg-muted); font-weight: 500; }
.kpi-value { font-size: var(--text-2xl); font-weight: 650; line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi-sub { font-size: var(--text-sm); color: var(--fg-muted); margin-top: 2px; }
.kpi-hot .kpi-value { color: var(--ok); }
.kpi-warn .kpi-value { color: var(--warn); }
.kpi.skeleton {
  height: 94px; border-color: var(--line);
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-3) 50%, var(--surface) 75%);
  background-size: 300% 100%; animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -300% 0; } }

/* ----------------------------------------------------------------- panels */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.panel + .panel { margin-top: var(--sp-4); }
.panel-pad { padding: var(--sp-5); }
.panel-title { font-size: var(--text-md); font-weight: 620; letter-spacing: -.01em; }
.panel-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line);
  background: var(--surface-2); flex-wrap: wrap;
}
.panel-bar-right { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.panel-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); background: var(--surface-2);
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
.sub { font-size: var(--text-sm); font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .05em; margin: var(--sp-5) 0 var(--sp-2); }

.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-3); border-radius: var(--radius); }
.seg-btn {
  min-height: 28px; padding: 0 var(--sp-3); border: 0; border-radius: 6px;
  background: none; color: var(--fg-muted); font-size: var(--text-sm); font-weight: 550; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg-btn:hover { color: var(--fg); }
.seg-btn.active { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-sm); }

/* ----------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; }
.grid th {
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-size: var(--text-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-muted); text-align: left; white-space: nowrap;
}
.grid td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid.compact th, .grid.compact td { padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); }
.grid tr.row-click { cursor: pointer; transition: background var(--dur) var(--ease); }
.grid tr.row-click:hover > td { background: var(--surface-2); }
.grid tr.open > td { background: var(--surface-2); }
.col-toggle { width: 34px; }
.col-act { width: 1%; }
.cell-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }

/* The request table carries eight columns of dense data. Left to itself the
   long UPNs refuse to break and push Decision and Actions off the right edge.
   The names now carry a break opportunity after the @ (see upn() in app.js) and
   the chrome around them is trimmed. Measured at 1280px: 1173px of table into a
   970px panel, down to a fit. */
#req-table th, #req-table td { padding-inline: var(--sp-3); }
#req-table .col-toggle { width: 1%; padding-inline: var(--sp-3) var(--sp-1); }

/* Approve and Deny are the point of the table, so they stay on screen when it
   is wider than its panel instead of hiding behind a horizontal scroll. The
   background is repeated here because a sticky cell scrolls over its siblings,
   and it has to track the row states the same way they do. */
#req-table .col-act {
  position: sticky; right: 0; z-index: 1;
  background: var(--surface); border-left: 1px solid var(--line);
}
/* A sticky cell paints its own background, so it has to be given the one its
   row already has: the header's, and the open row's. */
#req-table th.col-act { background: var(--surface-2); }
#req-table tr.open > td.col-act { background: var(--surface-2); }
.twoline { display: grid; gap: 1px; }
.twoline b { font-weight: 600; }
.twoline .sub-line { font-size: var(--text-sm); color: var(--fg-muted); }
.path { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); word-break: break-all; }
.expander {
  display: grid; place-items: center; width: 24px; height: 24px;
  background: none; border: 0; border-radius: var(--radius-sm);
  color: var(--fg-muted); cursor: pointer;
}
.expander .ico { transition: transform var(--dur) var(--ease); }
tr.open .expander .ico { transform: rotate(90deg); }
.empty { padding: var(--sp-10) var(--sp-6); text-align: center; color: var(--fg-muted); }
.empty-title { font-weight: 600; color: var(--fg); margin-bottom: var(--sp-1); }

/* -------------------------------------------------------- event timeline */
tr.detail > td { background: var(--surface-inset); padding: 0; }
.trail { padding: var(--sp-4) var(--sp-5); }
.trail-head {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: baseline;
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.timeline { display: grid; }
/* Four columns: mark, body, time, and the chevron that says the line opens
   something. Three left the chevron to wrap onto a row of its own. */
.tl-item { display: grid; grid-template-columns: 26px 1fr auto 18px; gap: var(--sp-3); align-items: start; padding: var(--sp-3) 0; }
.tl-mark {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--fg-muted);
}
.tl-mark .ico { width: 14px; height: 14px; }
.tl-ok   { color: var(--ok);   border-color: var(--ok-line);   background: var(--ok-bg); }
.tl-bad  { color: var(--bad);  border-color: var(--bad-line);  background: var(--bad-bg); }
.tl-warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-bg); }
.tl-info { color: var(--info); border-color: var(--info-line); background: var(--info-bg); }
.tl-body { min-width: 0; padding-top: 3px; }
.tl-text { line-height: 1.5; }
.tl-text b { font-weight: 600; }
.tl-sub { font-size: var(--text-sm); color: var(--fg-muted); margin-top: 1px; }
.tl-time { font-size: var(--text-sm); color: var(--fg-muted); white-space: nowrap; padding-top: 4px; font-variant-numeric: tabular-nums; text-align: right; }
.tl-src { display: block; font-size: var(--text-xs); }

/* ------------------------------------------------------------- audit feed */
.feed { padding: 0 var(--sp-5) var(--sp-4); }
.feed-day {
  margin: var(--sp-4) calc(var(--sp-5) * -1) 0;
  padding: var(--sp-2) var(--sp-5);
  background: var(--surface-2); border-block: 1px solid var(--line);
  font-size: var(--text-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted);
}
.feed .tl-item { border-bottom: 1px solid var(--line); }
.feed .tl-item:last-child { border-bottom: 0; }
.raw {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  background: var(--surface-inset); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted);
  white-space: pre-wrap; word-break: break-all;
}

/* --------------------------------------------------------- key/value list */
dl.kv { display: grid; grid-template-columns: minmax(140px, 210px) 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--text-sm); }
dl.kv dt { color: var(--fg-muted); }
dl.kv dd { display: flex; gap: var(--sp-2); align-items: flex-start; font-family: var(--font-mono); font-size: var(--text-sm); word-break: break-all; }
.copy { flex: none; padding: 0 6px; min-height: 20px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.code {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
  background: var(--surface-inset); border: 1px solid var(--line);
  overflow-x: auto; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7;
  white-space: pre-wrap; word-break: break-all; color: var(--fg-soft);
}
.ticks { display: grid; gap: var(--sp-2); font-size: var(--text-sm); }
.ticks li { display: grid; grid-template-columns: 16px 1fr; gap: var(--sp-2); align-items: start; }
.ticks li::before {
  content: ""; width: 13px; height: 13px; margin-top: 4px; border-radius: 50%;
  border: 1.5px solid var(--ok); background: var(--ok-bg);
}
.steps { display: grid; gap: var(--sp-2); counter-reset: s; font-size: var(--text-sm); }
.steps li { display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-2); counter-increment: s; }
.steps li::before {
  content: counter(s); display: grid; place-items: center;
  width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: var(--surface-3); color: var(--fg-muted); font-size: var(--text-xs); font-weight: 650;
}

/* --------------------------------------------------------------- checklist */
.field-action { display: flex; align-items: flex-end; }

/* ------------------------------------------------------------------ modal */
.modal {
  width: 460px; max-width: calc(100vw - 32px); padding: var(--sp-5);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.modal::backdrop { background: var(--scrim); backdrop-filter: blur(3px); }
.modal h2 { font-size: var(--text-lg); font-weight: 620; margin-bottom: var(--sp-1); }
.modal > form > p { margin-bottom: var(--sp-4); }
.modal menu { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: 0; margin: var(--sp-5) 0 0; }

/* ------------------------------------------------------------------ toast */
.toast {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 50;
  max-width: 420px; padding: var(--sp-3) var(--sp-4);
  background: var(--fg); color: var(--surface);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: var(--text-sm);
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1180px) { .two-col { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .savebar { left: 0; padding-inline: var(--sp-4); flex-wrap: wrap; }
  .savebar .btn-lg { flex: 1; justify-content: center; }
  .shell { grid-template-columns: 1fr; grid-template-areas: "top" "main"; }
  .only-mobile { display: inline-grid; }
  .sidenav {
    position: fixed; top: 56px; left: 0; right: 0; z-index: 15;
    height: auto; flex-direction: row; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .navitem { white-space: nowrap; }
  .content { padding: var(--sp-4); }
  .who-text { display: none; }
  .page-head h1 { font-size: var(--text-xl); }
  dl.kv { grid-template-columns: 1fr; gap: var(--sp-1) 0; }
  dl.kv dd { margin-bottom: var(--sp-2); }
  .search input { min-width: 140px; }
  .tl-item { grid-template-columns: 26px 1fr; }
  .tl-time { grid-column: 2; text-align: left; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
.idp-add { margin-top: var(--sp-4); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.idp-add summary { cursor: pointer; color: var(--fg-soft); font-size: var(--text-sm); font-weight: 600; list-style: none; }
.idp-add summary::-webkit-details-marker { display: none; }
.idp-add summary::before { content: "+ "; color: var(--info); font-weight: 700; }
.idp-add[open] summary::before { content: "\2212  "; }
.idp-add summary:hover { color: var(--fg); }
#entra-buttons .btn-ms + .btn-ms { margin-top: var(--sp-2); }

/* ========================================================================== 
   2026 workspace redesign
   A report-first visual system inspired by analytical BI workspaces. The
   yellow accent is reserved for navigation and focus; operational states keep
   their familiar semantic colours.
   ========================================================================== */
:root {
  --font-sans: Inter, Aptos, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --surface-3: #EEF2F6;
  --surface-inset: #F1F4F8;
  --fg: #172033;
  --fg-soft: #39445A;
  --fg-muted: #68758C;
  --line: #E3E8EF;
  --line-strong: #CDD5DF;
  --brand: #172033;
  --brand-fg: #FFFFFF;
  --brand-soft: #FFF7C2;
  --accent: #F2C811;
  --accent-strong: #D6AA00;
  --accent-soft: #FFF9D7;
  --nav: #141C2E;
  --nav-soft: #202B42;
  --nav-fg: #D7DEEA;
  --nav-muted: #8995A9;
  --info: #2563EB;
  --info-bg: #EAF1FF;
  --info-line: #BFD1FF;
  --ok: #087A55;
  --ok-bg: #E7F7F1;
  --ok-line: #B6E4D4;
  --warn: #9A6700;
  --warn-bg: #FFF6DB;
  --warn-line: #F2D68A;
  --bad: #C4323D;
  --bad-bg: #FDEDEF;
  --bad-line: #F3C1C6;
  --focus: #2563EB;
  --radius-sm: 6px;
  --radius: 9px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(23, 32, 51, .04), 0 1px 4px rgba(23, 32, 51, .03);
  --shadow: 0 8px 24px rgba(23, 32, 51, .08);
  --shadow-lg: 0 24px 64px rgba(8, 15, 29, .22);
}

:root[data-theme="dark"] {
  --bg: #0F1522;
  --surface: #182132;
  --surface-2: #1D283B;
  --surface-3: #253147;
  --surface-inset: #111927;
  --fg: #F3F6FA;
  --fg-soft: #CBD4E1;
  --fg-muted: #9AA7B9;
  --line: #2A374C;
  --line-strong: #3A4961;
  --brand: #F2C811;
  --brand-fg: #161D2B;
  --brand-soft: #3C3516;
  --accent-soft: #393315;
  --nav: #090E18;
  --nav-soft: #192236;
  --nav-fg: #DCE3ED;
  --nav-muted: #8996AA;
  --info: #86B0FF;
  --info-bg: #172947;
  --info-line: #33558A;
  --ok: #54D6A6;
  --ok-bg: #143329;
  --ok-line: #266950;
  --warn: #FFD75E;
  --warn-bg: #3A300E;
  --warn-line: #745F18;
  --bad: #FF9DA7;
  --bad-bg: #3E1C22;
  --bad-line: #78313B;
  --focus: #F2C811;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0F1522; --surface:#182132; --surface-2:#1D283B; --surface-3:#253147; --surface-inset:#111927;
    --fg:#F3F6FA; --fg-soft:#CBD4E1; --fg-muted:#9AA7B9; --line:#2A374C; --line-strong:#3A4961;
    --brand:#F2C811; --brand-fg:#161D2B; --brand-soft:#3C3516; --accent-soft:#393315;
    --nav:#090E18; --nav-soft:#192236; --nav-fg:#DCE3ED; --nav-muted:#8996AA;
    --info:#86B0FF; --info-bg:#172947; --info-line:#33558A;
    --ok:#54D6A6; --ok-bg:#143329; --ok-line:#266950;
    --warn:#FFD75E; --warn-bg:#3A300E; --warn-line:#745F18;
    --bad:#FF9DA7; --bad-bg:#3E1C22; --bad-line:#78313B; --focus:#F2C811;
  }
}

body { letter-spacing: -.005em; }
a { color: var(--info); text-underline-offset: 3px; }
.eyebrow, .panel-kicker, .nav-label {
  font-size: 11px; line-height: 1.2; font-weight: 750; letter-spacing: .11em;
  text-transform: uppercase;
}
.eyebrow { color: var(--info); margin-bottom: 7px; }
.panel-kicker { color: var(--fg-muted); margin-bottom: 5px; }

/* Sign in */
.login {
  padding: 32px;
  background:
    radial-gradient(circle at 10% 10%, rgba(242,200,17,.16), transparent 25%),
    linear-gradient(135deg, #111827 0 45%, var(--bg) 45% 100%);
}
.login-layout {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 460px);
  width: min(1080px, 100%); min-height: 610px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.10); border-radius: 22px;
  background: var(--surface); box-shadow: 0 32px 90px rgba(3, 8, 20, .30);
}
.login-story {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 7vw, 82px); overflow: hidden; color: #fff;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(145deg, #18233A, #101726);
  background-size: 32px 32px, 32px 32px, auto;
}
.login-story::after {
  content: ""; position: absolute; right: -90px; bottom: -140px;
  width: 360px; height: 360px; border: 80px solid rgba(242,200,17,.12); border-radius: 50%;
}
.login-story .eyebrow { color: var(--accent); }
.login-story h1 { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -.045em; max-width: 620px; }
.login-story > p:not(.eyebrow) { max-width: 540px; margin-top: 22px; color: #B8C3D5; font-size: 16px; line-height: 1.65; }
.login-proof { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 54px; }
.login-proof div { display: grid; gap: 3px; padding-top: 13px; border-top: 2px solid rgba(242,200,17,.55); }
.login-proof b { font-size: 13px; }
.login-proof span { color: #92A0B5; font-size: 11px; line-height: 1.45; }
.login-card {
  display: flex; flex-direction: column; justify-content: center; width: auto; max-width: none;
  padding: clamp(34px, 5vw, 64px); border: 0; border-radius: 0; box-shadow: none;
}
.login-brand { margin-bottom: 34px; }
.login-title { font-size: 24px; letter-spacing: -.025em; }
.btn-ms { min-height: 48px; border-radius: 9px; font-weight: 650; }

/* Shell and global navigation */
.shell {
  grid-template-columns: 244px minmax(0, 1fr);
  grid-template-rows: 68px minmax(0, 1fr);
}
.topbar {
  height: 68px; padding: 0 24px; gap: 14px; border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(23,32,51,.02);
}
.brand-copy { display: grid; line-height: 1.1; }
.brand-name { font-size: 14px; font-weight: 700; }
.brand-tenant { margin-top: 4px; color: var(--fg-muted); font-size: 10px; font-weight: 550; letter-spacing: .03em; }
.workspace-label, .freshness {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px;
  color: var(--fg-muted); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; font-size: 11px; font-weight: 600;
}
.workspace-dot { width: 7px; height: 7px; border-radius: 50%; background: #16A36F; box-shadow: 0 0 0 3px rgba(22,163,111,.12); }
.head-actions { display: flex; align-items: center; gap: 10px; }
.who { padding-left: 14px; border-left: 1px solid var(--line); }
.who-name { font-weight: 650; }
.sidenav {
  top: 68px; height: calc(100vh - 68px); gap: 4px; padding: 24px 14px 16px;
  background: var(--nav); border-right: 0; color: var(--nav-fg);
}
.nav-label { margin: 0 12px 8px; color: var(--nav-muted); }
.nav-label-spaced { margin-top: 22px; }
.navitem {
  position: relative; min-height: 44px; padding: 0 13px; gap: 12px;
  color: var(--nav-fg); border-radius: 9px; font-size: 13px;
}
.navitem .ico { color: var(--nav-muted); }
.navitem:hover { color: #fff; background: var(--nav-soft); }
.navitem.active { color: #fff; background: var(--nav-soft); font-weight: 650; }
.navitem.active::before {
  content: ""; position: absolute; left: 0; width: 3px; height: 22px;
  background: var(--accent); border-radius: 0 4px 4px 0;
}
.navitem.active .ico { color: var(--accent); }
.nav-foot {
  display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 10px;
  color: var(--nav-fg); border-top: 1px solid rgba(255,255,255,.09);
}
.nav-foot-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; color: var(--accent); background: rgba(242,200,17,.10); border-radius: 9px; }
.nav-foot > span:last-child { display: grid; gap: 2px; }
.nav-foot b { font-size: 11px; }
.nav-foot small { color: var(--nav-muted); font-size: 9px; line-height: 1.35; }

/* Pages */
.content { width: 100%; max-width: 1720px; padding: 30px clamp(20px, 2.5vw, 40px) 56px; }
.page { gap: 22px; }
.page-head { align-items: center; }
.page-head h1 { margin: 0 0 5px; font-size: 30px; line-height: 1.15; font-weight: 720; letter-spacing: -.035em; }
.page-head p.muted { font-size: 13px; }
.btn {
  min-height: 38px; border-color: var(--line-strong); border-radius: 8px;
  font-size: 13px; font-weight: 620; box-shadow: 0 1px 1px rgba(23,32,51,.03);
}
.btn:hover { border-color: var(--fg-muted); }
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand); filter: brightness(1.12); }
.icon-btn { border-radius: 8px; }
input[type="text"], input[type="search"], input[type="password"],
input[type="number"], input[type="datetime-local"], select, textarea {
  min-height: 38px; border-color: var(--line-strong); border-radius: 8px; font-size: 13px;
}

/* Analytical cards */
.kpis { grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 14px; }
.kpis-three { grid-template-columns: repeat(3, minmax(190px, 1fr)); }
.kpi {
  position: relative; min-height: 118px; padding: 18px 20px; overflow: hidden;
  border-radius: 12px; box-shadow: var(--shadow-sm);
}
.kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--info); }
.kpi:nth-child(2)::before { background: var(--accent-strong); }
.kpi:nth-child(3)::before { background: #7C5CE7; }
.kpi:nth-child(4)::before { background: #15A47A; }
.kpi-label { font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.kpi-label .ico { width: 15px; height: 15px; }
.kpi-value { margin-top: 10px; font-size: 30px; font-weight: 730; }
.kpi-sub { margin-top: 5px; font-size: 11px; }
.kpi.skeleton { min-height: 118px; height: auto; }
.dashboard-grid { display: grid; grid-template-columns: 1.05fr 1fr .9fr; gap: 14px; }
.panel { border-color: var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.panel-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.panel-title { font-size: 15px; font-weight: 700; }
.panel-heading .muted { margin-top: 4px; }
.panel-icon { color: var(--info); }
.period-chip { padding: 4px 8px; color: var(--fg-muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; font-size: 10px; font-weight: 650; white-space: nowrap; }
.insight-card { min-height: 264px; }
.outcome-chart { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; min-height: 190px; padding: 18px 22px; }
.donut { position: relative; width: 142px; height: 142px; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 9; }
.donut-track { stroke: var(--surface-3); }
.donut-value { stroke: var(--ok); stroke-linecap: round; }
.donut-copy { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-copy b { font-size: 27px; line-height: 1; letter-spacing: -.04em; }
.donut-copy span { margin-top: 5px; color: var(--fg-muted); font-size: 10px; }
.legend { display: grid; gap: 13px; }
.legend-row { display: grid; grid-template-columns: 9px 1fr auto; gap: 8px; align-items: center; font-size: 11px; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; }
.legend-dot.ok { background: var(--ok); }
.legend-dot.bad { background: var(--bad); }
.legend-row span:nth-child(2) { color: var(--fg-muted); }
.legend-row b { font-variant-numeric: tabular-nums; }
.demand-summary, .control-summary { display: grid; gap: 16px; min-height: 190px; padding: 21px 22px; align-content: center; }
.metric-row { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; align-items: center; font-size: 11px; }
.metric-row > span { color: var(--fg-muted); }
.metric-row > b { font-size: 13px; font-variant-numeric: tabular-nums; }
.metric-row progress { grid-column: 1 / -1; width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 99px; background: var(--surface-3); }
.metric-row progress::-webkit-progress-bar { background: var(--surface-3); border-radius: 99px; }
.metric-row progress::-webkit-progress-value { background: var(--info); border-radius: 99px; }
.metric-row progress::-moz-progress-bar { background: var(--info); border-radius: 99px; }
.metric-row:nth-child(2) progress::-webkit-progress-value { background: #7C5CE7; }
.metric-row:nth-child(2) progress::-moz-progress-bar { background: #7C5CE7; }
.metric-row:nth-child(3) progress::-webkit-progress-value { background: var(--accent-strong); }
.metric-row:nth-child(3) progress::-moz-progress-bar { background: var(--accent-strong); }
.attention-row { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; }
.attention-row > .ico { width: 17px; height: 17px; color: var(--ok); }
.attention-row.warn > .ico { color: var(--warn); }
.attention-row span { display: grid; gap: 1px; }
.attention-row b { font-size: 12px; }
.attention-row small { color: var(--fg-muted); font-size: 10px; }
.chart-skeleton { width: 100%; height: 120px; border-radius: 9px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 250% 100%; animation: shimmer 1.4s linear infinite; }

/* Filters and data grids */
/* Panel-level insets are all 20px so the content edges of a heading, a
   filter bar, a table, a footer and a padded body line up down the card. */
.table-heading { border-bottom: 0; padding-bottom: 14px; }
.panel-bar { padding: 12px 20px; background: var(--surface-2); }
.seg { padding: 3px; background: var(--surface-3); border-radius: 8px; }
.seg-btn { min-height: 30px; border-radius: 6px; font-size: 11px; font-weight: 650; }
.seg-btn.active { color: #172033; background: var(--accent); box-shadow: none; }
.search input { min-width: 220px; }
.grid th { padding: 11px 16px; background: var(--surface-2); font-size: 10px; letter-spacing: .075em; }
.grid td { padding: 14px 16px; font-size: 12px; }
.grid tbody tr { transition: background var(--dur) var(--ease); }
.grid tbody tr:hover > td,
#req-table tbody tr:hover > td.col-act { background: color-mix(in srgb, var(--info-bg) 35%, var(--surface)); }
.twoline { gap: 3px; }
.twoline b { font-weight: 680; }
.twoline .sub-line { font-size: 11px; }
.path { font-size: 10px; }
.chip { padding: 3px 8px; font-size: 10px; font-weight: 700; }
.panel-foot { padding: 12px 20px; }
.empty { padding: 48px 24px; }

/* Human-readable audit trail */
.audit-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.audit-summary-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; }
.audit-summary-item > span:last-child { display: grid; gap: 2px; }
.audit-summary-item b { font-size: 12px; }
.audit-summary-item small { color: var(--fg-muted); font-size: 10px; }
.summary-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; color: var(--info); background: var(--info-bg); border-radius: 9px; }
.summary-icon.warn { color: var(--warn); background: var(--warn-bg); }
.summary-icon.ok { color: var(--ok); background: var(--ok-bg); }
/* Refused sign-ins are the one figure on this page that should look like
   a problem when it is not zero. */
.summary-icon.bad { color: var(--bad); background: var(--bad-bg); }
.feed { padding: 0 20px 20px; }
.feed-day { position: sticky; top: 68px; z-index: 2; margin: 0 -22px; padding: 9px 22px; background: color-mix(in srgb, var(--surface-2) 92%, transparent); backdrop-filter: blur(8px); }
.feed .tl-item { position: relative; grid-template-columns: 36px 1fr 120px; gap: 14px; padding: 18px 0; }
.feed .tl-item::before { content: ""; position: absolute; left: 17px; top: 54px; bottom: -1px; width: 1px; background: var(--line); }
.feed .tl-item:last-child::before { display: none; }
.tl-mark { width: 36px; height: 36px; border: 0; border-radius: 10px; }
.tl-mark .ico { width: 17px; height: 17px; }
.tl-body { padding-top: 1px; }
.tl-text { font-size: 13px; }
.tl-text b { font-weight: 700; }
.tl-sub { margin-top: 4px; font-size: 11px; line-height: 1.55; }
.tl-time { font-size: 11px; }
.tl-src { margin-top: 3px; font-size: 9px; }
.trail { padding: 18px 24px 22px; }
.trail .tl-item { grid-template-columns: 32px 1fr 110px; }
.trail .tl-mark { width: 32px; height: 32px; }
.raw { font-size: 10px; }

/* Forms, setup and policy pages */
.panel-pad { padding: 20px; }
.panel-pad > .panel-kicker + .panel-title { margin-bottom: 5px; }
.two-col { gap: 16px; }
.field > label { font-weight: 650; }
.sub { margin-top: 24px; font-size: 10px; }
dl.kv { gap: 10px 18px; }
dl.kv dt { font-size: 11px; }
dl.kv dd { font-size: 11px; }
.code { background: var(--nav); color: #D7DEEA; border-color: transparent; }
.callout { border-radius: 9px; }
.modal { border-radius: 14px; }
.toast { color: #fff; background: #111827; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; }


/* ==========================================================================
   Brand mark
   The shield carries its own gold gradient and navy check as SVG attributes,
   so it stays itself in both themes rather than flipping with the palette.
   Only the size changes here.
   ========================================================================== */
.logomark { width: 34px; height: 34px; flex: none; }
.logomark-lg { width: 48px; height: 48px; }
.logomark-xl { width: 56px; height: 56px; margin-bottom: 36px; }

/* ==========================================================================
   Timeline lines are buttons
   Every line in every trail opens the full record, so each one needs the reset
   a <button> demands and a hit area that reads as a row, not a control.
   ========================================================================== */
.tl-item {
  width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: var(--radius);
  transition: background var(--dur) var(--ease);
}
.tl-item > .tl-body, .tl-item > .tl-time { display: block; }
.tl-item .tl-text, .tl-item .tl-sub, .tl-item .raw { display: block; }
/* Faint at rest rather than absent: on a touch screen there is no hover to
   discover that the row opens something. */
.tl-open { display: grid; place-items: center; align-self: center; color: var(--fg-muted); opacity: .38; transition: opacity var(--dur) var(--ease); }
.tl-open .ico { width: 14px; height: 14px; }
.tl-item:hover { background: var(--surface-2); }
.tl-item:hover .tl-open { opacity: 1; }
.tl-item:focus-visible { outline: var(--ring) solid var(--focus); outline-offset: -2px; }
.tl-current { background: var(--accent-soft); }
.tl-current:hover { background: var(--accent-soft); }

.feed .tl-item { grid-template-columns: 36px 1fr 120px 18px; margin: 0 -10px; padding-inline: 10px; width: calc(100% + 20px); }
.feed .tl-item::before { left: 27px; }
.trail .tl-item { grid-template-columns: 26px 1fr auto 18px; }
.timeline-inset {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.timeline-inset .tl-item + .tl-item { border-top: 1px solid var(--line); }

/* ==========================================================================
   The audit record dialog
   Header and footer stay put; only the record scrolls. It is the one place
   that shows everything about one event, so it is allowed to be long.
   ========================================================================== */
/* display only when open: a bare `display: grid` here would beat the user-agent
   `dialog:not([open]) { display: none }` and leave the dialog in the page. */
.modal-wide {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(780px, calc(100vw - 32px)); max-height: min(86vh, 860px); padding: 0;
}
.modal-wide[open] { display: grid; }
.modal-head {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.modal-head-copy { flex: 1; min-width: 0; }
.modal-head h2 { font-size: var(--text-lg); line-height: 1.35; margin: 0; }
.modal-head h2 b { font-weight: 700; }
.modal-body { overflow-y: auto; padding: var(--sp-2) var(--sp-5) var(--sp-5); }
.modal-body > .sub:first-child, .modal-body > .ad-lede + .sub { margin-top: var(--sp-4); }
.modal .modal-foot {
  display: flex; align-items: center; gap: var(--sp-2); margin: 0;
  padding: var(--sp-3) var(--sp-5); background: var(--surface-2);
  border-top: 1px solid var(--line);
}
.ad-lede { margin-top: var(--sp-4); color: var(--fg-soft); font-size: var(--text-sm); }

/* Key/value pairs written for a reader rather than a console: the label is a
   full phrase, so it gets its own line instead of a narrow column. */
dl.kv.readable { grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 9px 18px; }
dl.kv.readable dt { font-size: var(--text-sm); font-weight: 600; color: var(--fg-muted); }
dl.kv.readable dd { font-size: var(--text-sm); color: var(--fg); overflow-wrap: anywhere; }
dl.kv.readable dd .path { font-size: var(--text-xs); }

/* Copy buttons line up on the right edge of the value column instead of
   trailing each value at whatever width it happens to be. */
dl.kv dd > span { min-width: 0; }
dl.kv dd > .copy { margin-inline-start: auto; align-self: center; }

/* A key/value list reads as a block of labelled facts, so it needs air above it
   when it follows a sentence. A <h3 class=sub> already carries its own margin. */
p + dl.kv, ul + dl.kv, .code-block + dl.kv { margin-top: var(--sp-4); }

/* The product name never breaks across two lines in a 56px-tall bar. */
.brand-name { white-space: nowrap; }

/* ==========================================================================
   Policy: the three-question builder
   ========================================================================== */
.policy-live {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--ok); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.policy-live .ico { flex: none; margin-top: 2px; color: var(--ok); }
.policy-live b { font-weight: 700; }
.policy-live small { display: block; margin-top: 3px; font-size: var(--text-xs); }
.policy-live.is-warn { border-left-color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.policy-live.is-warn .ico { color: var(--warn); }

.builder-step + .builder-step { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.builder .panel-title { margin-bottom: var(--sp-3); }
.builder-step > .muted { margin: -6px 0 var(--sp-3); }
.step-dot {
  display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 7px;
  color: #172033; background: var(--accent); border-radius: 50%;
  font-size: 10px; font-weight: 800; letter-spacing: 0; vertical-align: -3px;
}

/* The offline step asks two follow-up questions under its first one, so they
   need a heading that is quieter than a step's own kicker and does not start a
   new numbered step. */
.sub-kicker { margin-top: var(--sp-5); }
#ps-offline-detail > .muted { margin: var(--sp-2) 0 0; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: var(--sp-3); }
.choice {
  display: grid; gap: 5px; padding: var(--sp-4); text-align: left; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  font: inherit; color: inherit; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.choice:hover { border-color: var(--line-strong); }
.choice:focus-visible { outline: var(--ring) solid var(--focus); outline-offset: 2px; }
.choice b { font-size: var(--text-md); font-weight: 650; }
.choice small { color: var(--fg-muted); font-size: var(--text-xs); line-height: 1.5; }
.choice.active { border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft); }
.choice-icon {
  display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 3px;
  border-radius: 9px; background: var(--surface-3); color: var(--fg-muted);
}
.choice-icon .ico { width: 16px; height: 16px; }
.choice-icon.ok   { color: var(--ok);   background: var(--ok-bg); }
.choice-icon.warn { color: var(--warn); background: var(--warn-bg); }
.choice-icon.bad  { color: var(--bad);  background: var(--bad-bg); }

.chip-choice { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.chip-choice > button {
  min-height: 38px; padding: 0 var(--sp-4); cursor: pointer; font: inherit; font-weight: 600;
  color: var(--fg-soft); background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius-full); transition: border-color var(--dur) var(--ease);
}
.chip-choice > button:hover { border-color: var(--line-strong); color: var(--fg); }
.chip-choice > button:focus-visible { outline: var(--ring) solid var(--focus); outline-offset: 2px; }
.chip-choice > button.active { color: #172033; background: var(--accent); border-color: var(--accent-strong); }
.chip-choice-custom { display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-2); }
.chip-choice-custom input { width: 104px; }

.builder-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line);
}
.policy-preview {
  display: flex; align-items: flex-start; gap: var(--sp-2); flex: 1; min-width: 260px; margin: 0;
  color: var(--fg-soft); font-size: var(--text-sm);
}
.policy-preview .ico { flex: none; margin-top: 2px; color: var(--info); }
.btn-lg { min-height: 44px; padding: 0 var(--sp-5); font-size: var(--text-md); font-weight: 650; }

.rules-empty { padding: var(--sp-4) var(--sp-5) 0; margin: 0; }
.rule-add {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end;
  padding: var(--sp-4) var(--sp-5); background: var(--surface-2); border-top: 1px solid var(--line);
}

/* One save action for the page, pinned so it is reachable from any scroll
   position, and present only while there is something to save. */
.savebar {
  position: fixed; left: 244px; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface); border-top: 1px solid var(--line-strong);
  box-shadow: 0 -6px 24px rgba(8, 15, 29, .10);
}
.savebar-copy { flex: 1; min-width: 0; display: grid; gap: 1px; }
.savebar-copy b { font-size: var(--text-sm); }
.savebar .field-error { margin: 0; }
/* The page must be able to scroll clear of the bar. */
.page:has(.savebar:not([hidden])) { padding-bottom: 76px; }

/* A setup value the deployment has not supplied yet. */
dl.kv dd.unset { flex-direction: column; align-items: flex-start; gap: 1px; font-family: var(--font-sans); }
dl.kv dd.unset > span { color: var(--warn); font-weight: 650; }
dl.kv dd.unset small { font-size: var(--text-xs); }
.rule-add .field { margin-bottom: 0; }
.rule-add .field-grow { flex: 1; min-width: 220px; }

/* ==========================================================================
   Agent
   The package, then the one real decision (how you are installing), then the
   one precondition. No dark hero: this page uses the same surface as every
   other page, and spends its emphasis on the primary download alone.
   ========================================================================== */
.package {
  display: flex; align-items: flex-start; gap: var(--sp-5);
  padding: var(--sp-5); margin-bottom: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.package-icon {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px;
  border-radius: 14px; background: var(--accent-soft); color: var(--accent-strong);
}
.package-icon .ico { width: 26px; height: 26px; stroke-width: 1.5; }
.package.is-empty .package-icon { background: var(--warn-bg); color: var(--warn); }
.package-main { flex: 1; min-width: 0; }
.package-name { margin: 2px 0 4px; font-size: var(--text-xl); font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.package-meta { color: var(--fg-muted); font-size: var(--text-sm); }
.package-meta b { color: var(--fg); font-weight: 600; overflow-wrap: anywhere; }
.package-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex: none; align-items: center; }

/* The hash, its label and its copy button are one object, so they sit together
   on one line and wrap together. */
.package-hash {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
.package-hash .hash-label {
  flex: none; font-size: var(--text-xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--fg-muted);
}
.package-hash code {
  min-width: 0; overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-soft);
}

/* The install paths get the full width; the segmented control lives in the
   panel heading, because choosing one is the heading's question. */
.how-body { padding: var(--sp-5); }
.how-body > .steps { margin-bottom: var(--sp-4); font-size: var(--text-base); }
.how-body > .steps li { margin-bottom: 2px; }
.how-body .callout { margin-top: var(--sp-4); }
.psadt-actions { margin: var(--sp-4) 0; }
.code-block { margin: var(--sp-3) 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.code-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 7px var(--sp-3); background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-size: var(--text-xs); font-weight: 650; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .07em;
}
.code-block .code { margin: 0; border: 0; border-radius: 0; }

/* The precondition. Not a numbered step: it has to be true before step one. */
.prereq {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-5); margin-top: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.prereq-icon {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px;
  border-radius: 11px; background: var(--accent-soft); color: var(--accent-strong);
}
.prereq-icon .ico { width: 19px; height: 19px; }
.prereq b { display: block; margin-bottom: 3px; font-size: var(--text-md); font-weight: 650; }
.prereq .ticks { margin-top: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }

/* Settings read as sentences; the MSI property name is the small print. */
/* Capped: on a wide panel a full-width value column strands each copy button
   an inch away from the thing it copies. */
dl.kv.settings { max-width: 820px; grid-template-columns: minmax(210px, 280px) minmax(0, 1fr); align-items: baseline; }
dl.kv.settings dt { display: flex; flex-direction: column; gap: 2px; color: var(--fg); font-family: var(--font-sans); }
dl.kv.settings .prop {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted);
  letter-spacing: 0; text-transform: none;
}

/* ==========================================================================
   Setup: progress and the five guide cards
   ========================================================================== */


/* ==========================================================================
   Collapsed reference blocks. Anything an administrator reads once and never
   again lives behind one of these rather than in front of everyone.
   ========================================================================== */
details.adv { margin-top: var(--sp-4); }
details.adv > summary {
  display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; list-style: none;
  /* Cancels the .panel-pad inset so the summary is full-bleed inside the card;
     both are 20px, and they must stay equal or the summary sits inset. */
  margin: -20px; padding: var(--sp-4) 20px;
  font-size: var(--text-sm); font-weight: 650; color: var(--fg-soft);
}
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::after {
  content: ""; width: 7px; height: 7px; margin-left: auto;
  border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur) var(--ease);
}
details.adv[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.adv > summary:hover { color: var(--fg); }
details.adv > summary .ico { color: var(--fg-muted); }
details.adv[open] > summary { margin-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }

@media (max-width: 860px) {
  /* The download buttons drop below the package details rather than being
     squeezed beside them. */
  .package { flex-wrap: wrap; padding: var(--sp-5); }
  .package-actions { width: 100%; }
  .package-actions .btn { flex: 1; justify-content: center; }
  .how-body { padding: var(--sp-5); }
  .panel-heading.table-heading .seg { margin-top: var(--sp-3); }
  .modal-wide { max-height: 92vh; }
  dl.kv.readable { grid-template-columns: 1fr; gap: 2px 0; }
  dl.kv.readable dd { margin-bottom: 9px; }
  .builder-foot { flex-direction: column; align-items: stretch; }
  .builder-foot .btn-lg { width: 100%; }
  .feed .tl-item { grid-template-columns: 36px 1fr 18px; }
}

@media (max-width: 1240px) {
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .control-card { grid-column: 1 / -1; }
  .control-summary { grid-template-columns: repeat(2, 1fr); min-height: auto; }
  .kpis { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
}
@media (max-width: 860px) {
  .savebar { left: 0; padding-inline: var(--sp-4); flex-wrap: wrap; }
  .savebar .btn-lg { flex: 1; justify-content: center; }
  .shell { grid-template-columns: 1fr; grid-template-rows: 62px 1fr; }
  .topbar { height: 62px; padding: 0 14px; }
  .brand-tenant, .workspace-label { display: none; }
  .sidenav {
    top: 62px; height: auto; padding: 9px; flex-direction: row; gap: 5px;
    background: var(--nav); border-bottom: 0; box-shadow: var(--shadow-lg);
  }
  .nav-label, .nav-foot { display: none; }
  .navitem { min-height: 40px; padding: 0 12px; }
  .navitem.active::before { left: 8px; right: 8px; top: auto; bottom: 0; width: auto; height: 2px; }
  .content { padding: 22px 16px 42px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .control-card { grid-column: auto; }
  .audit-summary { grid-template-columns: 1fr; }
  .feed-day { top: 62px; }
}
@media (max-width: 620px) {
  .login { padding: 0; background: var(--surface); }
  .login-layout { display: block; min-height: 100vh; border: 0; border-radius: 0; }
  .login-story { min-height: 265px; padding: 34px 28px; justify-content: flex-end; }
  .logomark-xl, .login-proof { display: none; }
  .login-story h1 { font-size: 34px; }
  .login-story > p:not(.eyebrow) { margin-top: 12px; font-size: 13px; }
  .login-card { padding: 36px 28px; }
  .kpis, .kpis-three { grid-template-columns: 1fr 1fr; }
  .kpi { min-height: 108px; padding: 16px; }
  .outcome-chart { grid-template-columns: 125px 1fr; padding-inline: 16px; }
  .donut { width: 120px; height: 120px; }
  .control-summary { grid-template-columns: 1fr; }
  .page-head { align-items: flex-start; }
  .head-actions { width: 100%; justify-content: space-between; }
  .panel-bar, .panel-bar-right { align-items: stretch; flex-direction: column; }
  .field-inline { justify-content: space-between; }
  .field-inline select, .field-inline input, .search input { width: 100%; min-width: 0; }
  .seg { width: max-content; max-width: 100%; overflow-x: auto; }
  .feed .tl-item { grid-template-columns: 36px 1fr; }
  .feed .tl-time { grid-column: 2; }
  /* No room for it, and it would land on a row of its own. The whole line is
     the tap target anyway. */
  .tl-open { display: none; }
  /* Let a data table scroll inside its panel rather than compress every column
     to a single word. .table-wrap already scrolls; it just needs something to
     scroll past. */
  .table-wrap > table.grid { min-width: 540px; }
  .rule-add { padding: var(--sp-4); }
  .panel-pad { padding: var(--sp-4); }
  .package, .prereq, .how-body { padding: var(--sp-4); }
  .modal-head, .modal-body, .modal-foot { padding-inline: var(--sp-4); }
}

/* Stale-device clean-up dialog: room between the explanation and the choice. */
#stale-dialog .modal-body > p { margin-bottom: var(--sp-3); }
#stale-dialog .field { margin-bottom: var(--sp-4); }

/* ==========================================================================
   Branding designer
   The preview is painted only from --b-* variables that app.js sets from the
   resolved palette. The fallbacks are the app's built-in look, so the page is
   right before the first render as well.
   ========================================================================== */
.brand-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.brand-form { display: grid; gap: var(--sp-4); }
.brand-form .panel + .panel, .brand-side .panel + .panel { margin-top: 0; }
.brand-side { position: sticky; top: 72px; display: grid; gap: var(--sp-4); }
.brand-form .panel-title { margin-bottom: var(--sp-3); }
.brand-note { margin-top: var(--sp-2); }

.brand-logo { display: flex; gap: var(--sp-4); align-items: center; }
.brand-logo-view {
  display: grid; place-items: center; flex: none; width: 72px; height: 72px;
  background: var(--b-surface, #202B42); border-radius: var(--radius-lg);
}
.brand-logo-view img, .brand-logo-view svg { width: 44px; height: 44px; object-fit: contain; }
.brand-logo-copy { display: grid; gap: var(--sp-2); min-width: 0; }
.brand-file { position: relative; overflow: hidden; }
.brand-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.brand-file:focus-within { outline: var(--ring) solid var(--focus); outline-offset: 2px; }

.brand-colours { display: grid; gap: var(--sp-4); margin-top: var(--sp-3); }
.brand-group { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.brand-group legend { font-size: var(--text-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--sp-1); }
.brand-colour { display: grid; grid-template-columns: 36px minmax(0, 1fr) 112px; gap: var(--sp-3); align-items: center; }
.brand-colour label { display: grid; gap: 0; min-width: 0; }
.brand-colour label b { font-size: var(--text-sm); text-transform: capitalize; }
.brand-colour input[type="text"] { font-family: var(--font-mono); font-size: var(--text-sm); text-transform: uppercase; }
.brand-colour input[type="text"]::placeholder { text-transform: none; }
.brand-colour input[type="color"] {
  width: 36px; height: 36px; padding: 2px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.brand-colour.is-refused input[type="text"] { border-color: var(--warn); background: var(--warn-bg); }
.brand-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sp-3); }

.brand-problems { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--text-sm); }
.brand-problems li { display: grid; grid-template-columns: 18px 1fr; gap: var(--sp-2); align-items: start; }
.brand-problems .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--warn); }
.brand-problems li.is-ok .ico { color: var(--ok); }
.brand-steps { margin: var(--sp-2) 0 var(--sp-4); }
.brand-downloads { margin-bottom: var(--sp-3); }

/* --- the app, in miniature ------------------------------------------------ */
.brand-app {
  margin-top: var(--sp-3); overflow: hidden;
  font-family: var(--b-font, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif);
  background: var(--b-background, #141C2E); color: var(--b-text, #F3F6FA);
  border: 1px solid var(--b-line, #2A374C); border-radius: var(--b-radius, 14px);
  box-shadow: var(--shadow-lg);
}
.brand-app-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--b-surface, #202B42); border-bottom: 1px solid var(--b-line, #2A374C);
}
.brand-app-mark { display: grid; place-items: center; width: 28px; height: 28px; flex: none; }
.brand-app-mark img, .brand-app-mark svg { width: 28px; height: 28px; object-fit: contain; }
.brand-app-name { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-app-close { color: var(--b-text-muted, #9AA7B9); font-size: 18px; line-height: 1; }
.brand-app-body { display: grid; gap: 8px; padding: 16px; }
.brand-app-state { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 650; }
.brand-app-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--b-text-soft, #CBD4E1); }
.brand-app-soft { color: var(--b-text-soft, #CBD4E1); font-size: 13px; line-height: 1.45; }
.brand-app-label { margin-top: 4px; color: var(--b-text-muted, #9AA7B9); font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.brand-app-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.brand-app-seg span {
  padding: 5px 10px; font-size: 12px; color: var(--b-text-soft, #CBD4E1);
  border: 1px solid var(--b-line, #2A374C); border-radius: calc(var(--b-radius, 14px) / 2);
}
.brand-app-seg span.on { color: var(--b-text, #F3F6FA); border-color: var(--b-accent, #F2C811); }
.brand-app-btn {
  display: block; margin-top: 6px; padding: 10px 14px; text-align: center; font-size: 13px; font-weight: 650;
  background: var(--b-accent, #F2C811); color: var(--b-on-accent, #172033);
  border-radius: calc(var(--b-radius, 14px) / 2);
  transition: background var(--dur) var(--ease);
}
.brand-app-btn:hover { background: var(--b-accent-strong, #D6AA00); }
.brand-app-muted { color: var(--b-text-muted, #9AA7B9); font-size: 11.5px; }
.brand-app-status { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 10px; border-top: 1px solid var(--b-line, #2A374C); font-size: 12px; font-weight: 600; }
.brand-app-ok { color: var(--b-ok, #54D6A6); }
.brand-app-warn { color: var(--b-warn, #FFD75E); }
.brand-app-bad { color: var(--b-bad, #FF9DA7); }
.brand-app-foot { padding: 9px 16px; font-size: 11.5px; color: var(--b-text-muted, #9AA7B9); border-top: 1px solid var(--b-line, #2A374C); }

.brand-shield-face { fill: url(#brand-grad) var(--b-accent, #F2C811); }
.brand-grad-from { stop-color: var(--b-accent-light, #F7DE70); }
.brand-grad-to { stop-color: var(--b-accent-strong, #D6AA00); }
.brand-shield-tick { fill: none; stroke: var(--b-on-accent, #172033); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1180px) {
  .brand-layout { grid-template-columns: 1fr; }
  .brand-side { position: static; }
}
@media (max-width: 640px) {
  .brand-details { grid-template-columns: 1fr; }
  .brand-colour { grid-template-columns: 36px minmax(0, 1fr); }
  .brand-colour input[type="text"] { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------- demo */
.demo-login { display: grid; gap: var(--sp-3); }
.demo-login .eyebrow { margin: 0; }
.demo-login-lead { margin: 0; font-size: var(--text-md); color: var(--fg-soft); }
.demo-list { list-style: none; margin: var(--sp-1) 0 var(--sp-2); padding: 0; display: grid; gap: var(--sp-2); }
.demo-list li { display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--fg-soft); }
.demo-list .ico { flex: none; margin-top: 2px; color: var(--ok); }
.demo-list-off, .demo-list-off .ico { color: var(--fg-muted); }
.btn-demo { min-height: 48px; border-radius: 9px; font-weight: 650; justify-content: center; gap: var(--sp-2); }
.demo-login + #entra-buttons:empty { display: none; }

.demo-banner {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin: 0 0 var(--sp-6); padding: var(--sp-3) var(--sp-4);
  color: var(--fg-soft); background: var(--info-bg);
  border: 1px solid var(--info-line); border-radius: 9px;
  font-size: var(--text-sm);
}
.demo-banner .ico { flex: none; margin-top: 1px; color: var(--info); }
.demo-banner > span { flex: 1; min-width: 0; }
.demo-banner-link { flex: none; color: var(--info); font-weight: 650; white-space: nowrap; }
@media (max-width: 620px) {
  .demo-banner { flex-wrap: wrap; }
  .demo-banner-link { margin-left: calc(18px + var(--sp-3)); }
}

/* --------------------------------------------------------------- settings */
/* One tab in the sidebar, five sections inside it. The sections are panes
   rather than separate tabs because "where do I change X" deserves one
   answer, and because the first-run checklist reads as part of the same
   page it sends you into. */
.settings-pane { display: grid; gap: var(--sp-5); }


/* A label for a group of controls, where a <label> would wrongly claim to
   point at one of them. */
.field > .label { font-size: var(--text-sm); font-weight: 650; color: var(--fg-soft); }

.checks { display: grid; gap: var(--sp-2); margin-top: var(--sp-1); }
.checks > label {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  gap: var(--sp-1) var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
  font-size: var(--text-sm); cursor: pointer;
}
.checks > label:hover { border-color: var(--line-strong); }
.checks > label > .small { grid-column: 2; }
.checks input { margin: 0; accent-color: var(--accent); }
.checks input:disabled { cursor: not-allowed; }
.checks > label:has(input:disabled) { opacity: .65; cursor: not-allowed; }

/* The one-click consent row: a claim, then the sentence that says what it
   costs. Laid out so the warning is never smaller than the promise. */
.switch-row {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  align-items: start; cursor: pointer;
}
.switch-row > span { display: grid; gap: 2px; }
.switch-row input { margin-top: 3px; accent-color: var(--accent); }

.two-up { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-3); }
@media (max-width: 560px) { .two-up { grid-template-columns: 1fr; } }

/* Arriving from a notification, the request the mail was about. Long enough
   to find with your eyes, short enough not to sit there blinking. */
.row-flash > td { animation: row-flash 2.4s ease-out; }
@keyframes row-flash {
  0%, 55% { background: var(--warn-bg); }
  100%    { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .row-flash > td { animation: none; background: var(--warn-bg); }
}

/* ----------------------------------------------------------- task cards */





/* A card that needs attention should read that way before anything is read. */

/* Back out of a section to the grid. */

/* Detail an end user does not need, kept one click away rather than removed:
   whoever installed the server still has to be able to see it. */
.tech { margin-top: var(--sp-3); }
.tech summary { cursor: pointer; color: var(--fg-soft); font-size: var(--text-sm); }
.tech ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); color: var(--fg-soft); font-size: var(--text-sm); }


/* --------------------------------------------- settings: panelled cards */
/* A quiet header strip names the section, the body holds the work. Hairline
   and flat rather than shadowed: everything else in this portal is tables
   and rules, and a page of floating tiles would be the only part that is
   not. Colour is spent on state alone -- a chip, a dot -- never on chrome. */
.sheet-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.card-head .ico { flex: none; width: 17px; height: 17px; color: var(--fg-muted); }
.card-head h2 {
  flex: 1; min-width: 0; margin: 0;
  font-size: var(--text-base); font-weight: 650; letter-spacing: -.005em;
}
.card-head > .btn, .card-head > .chip { flex: none; }
.card-body { padding: var(--sp-5); }
.card-body > :first-child { margin-top: 0; }
.card-body > :last-child { margin-bottom: 0; }
.card-body .sub:first-of-type { margin-top: var(--sp-5); }

/* ------------------------------------------- settings: fields as boxes */
/* Each field is its own bordered box with the label inside it, so a form of
   eight inputs reads as eight things rather than one wall. */
.settings-pane .field {
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.settings-pane .field:focus-within { border-color: var(--line-strong); }
.settings-pane .field > label,
.settings-pane .field > .label { font-size: var(--text-sm); font-weight: 650; color: var(--fg); }
.settings-pane .field > label .muted,
.settings-pane .field > .label + .muted { font-weight: 400; }
/* The control sits inside its box, so it carries no second heavy outline. */
.settings-pane .field > input,
.settings-pane .field > select,
.settings-pane .field > textarea {
  background: var(--surface-2);
  border-color: var(--line);
}
.settings-pane .field .checks { margin-top: 0; }
.settings-pane .field .checks > label { background: var(--surface-2); }
/* A group of controls that is not a single input does not need the box. */
.settings-pane .field:has(> .seg) { border: 0; padding: 0; background: none; }

.settings-pane details.idp-add { margin-top: var(--sp-4); }

@media (max-width: 560px) {
  .card-head { padding: var(--sp-3) var(--sp-4); }
  .card-body { padding: var(--sp-4); }
}

/* ------------------------------------------------------- security keys */
/* A person owns more than one -- the key on the keyring and the one in the
   drawer -- so these are a list of named things, not a single setting. */
.keys { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.key-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.key-icon {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px;
  color: var(--fg-soft); background: var(--surface-3); border-radius: var(--radius-sm);
}
.key-icon .ico { width: 16px; height: 16px; }
.key-copy { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: var(--text-sm); }
.key-row .btn { flex: none; }

#keys-section { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
#keys-section .sub:first-child { margin-top: 0; }

/* The second step of signing in, where the sign-in form was. */
#key-step { display: grid; gap: var(--sp-3); }

/* A button waiting on the server. Not a spinner -- the work is usually over in
   a few hundred milliseconds and a spinner that flashes is worse than none --
   but the cursor and the dimming say "asked, waiting" rather than "broken". */
.btn.is-busy, button.is-busy { cursor: progress; opacity: .65; }

/* ======================================================================
   Settings: a list of decisions, not a stack of boxes
   Every setting is one row -- a label column that reads as a vertical
   index, the controls beside it, a hairline between. Scanning the left
   column is how you find anything, which is why it is fixed-width and
   why nothing else may grow into it.
   ====================================================================== */
.set-tabs {
  display: flex; gap: var(--sp-6);
  margin: 0 0 var(--sp-5);
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.set-tabs::-webkit-scrollbar { display: none; }
.set-tab {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  flex: none; margin: 0; padding: 0 0 var(--sp-3);
  background: none; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font: inherit; font-size: var(--text-base); font-weight: 600;
  color: var(--fg-muted); white-space: nowrap; cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.set-tab:hover { color: var(--fg-soft); }
.set-tab.is-active { color: var(--fg); border-bottom-color: var(--fg); }
.set-tab:focus-visible { outline: var(--ring) solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }

/* What the section is for, said once, with its actions beside it. */
.set-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-6); margin-bottom: var(--sp-2);
}
.set-head h2 { font-size: var(--text-lg); font-weight: 650; letter-spacing: -.01em; margin-bottom: 3px; }
.set-head p { max-width: 62ch; }
.set-head-actions { display: flex; gap: var(--sp-2); flex: none; }

.set-row {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-8);
  padding: var(--sp-6) 0; border-bottom: 1px solid var(--line);
}
.set-row:last-child { border-bottom: 0; }
.set-row > .set-label { display: grid; gap: 3px; align-content: start; }
.set-label b { font-size: var(--text-base); font-weight: 650; }
.set-label p { font-size: var(--text-sm); color: var(--fg-muted); }
.set-field { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
/* Inside a row the field boxes are the only thing that needs a frame. */
.set-field > .field { margin-bottom: 0; }
.set-field > .row { margin: 0; }

@media (max-width: 900px) {
  /* The index column stops earning its width; the label becomes a heading. */
  .set-row { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-5) 0; }
}

/* A switch for anything that applies on its own. Built on a real checkbox so
   it is keyboard-reachable and announced without a word of ARIA. */
.switch { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }
.switch > input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  position: relative; flex: none; width: 38px; height: 22px;
  background: var(--surface-3); border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease);
}
.switch > input:checked + .switch-track { background: var(--accent-strong, var(--brand)); border-color: var(--accent-strong, var(--brand)); }
.switch > input:checked + .switch-track::after { transform: translateX(16px); }
.switch > input:focus-visible + .switch-track { outline: var(--ring) solid var(--focus); outline-offset: 2px; }
.switch > input:disabled + .switch-track { opacity: .55; }
.switch-copy { display: grid; gap: 1px; min-width: 0; }
.switch-copy b { font-size: var(--text-base); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .switch-track, .switch-track::after { transition: none; }
}

/* A required field says so where the eye already is -- on the label -- rather
   than only by failing after you press the button. */
.req { color: var(--bad); font-weight: 700; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Show the password. Sixteen characters typed blind, from a handover note, is
   the worst moment this portal asks anybody to sit through. */
.reveal-wrap { position: relative; display: block; }
.reveal-wrap > input { padding-right: 42px; }
.reveal {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  display: grid; place-items: center; width: 32px; height: 32px;
  padding: 0; background: none; border: 0; border-radius: var(--radius-sm);
  color: var(--fg-muted); cursor: pointer;
}
.reveal:hover { color: var(--fg); background: var(--surface-3); }
.reveal:focus-visible { outline: var(--ring) solid var(--focus); outline-offset: -2px; }
.reveal .ico { width: 17px; height: 17px; }

/* ------------------------------------------------- the authenticator app */
/* Enrolment is one moment: a QR to point a phone at, the same secret in text
   for the camera that will not focus, and the field that proves it worked. */
.totp-enrol {
  display: flex; gap: var(--sp-5); align-items: flex-start;
  margin-bottom: var(--sp-4);
}
.totp-qr {
  flex: none; display: grid; place-items: center;
  padding: var(--sp-3);
  background: #FFFFFF;           /* a QR is read by contrast, not by theme */
  border: 1px solid var(--line); border-radius: var(--radius);
}
/* 53 modules across, so 180px gives a little over 3 device pixels per module
   -- comfortable for a phone camera. Below about 2.5 they start to fail. */
.totp-qr svg { display: block; width: 180px; height: 180px; }
.totp-copy { display: grid; gap: var(--sp-2); min-width: 0; }
.totp-secret {
  display: block; padding: var(--sp-2) var(--sp-3);
  background: var(--surface-inset); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-sm);
  letter-spacing: .06em; overflow-wrap: anywhere; user-select: all;
}
@media (max-width: 560px) {
  .totp-enrol { flex-direction: column; }
}

/* The six digits, on the sign-in page and during enrolment. */
#code-input, #totp-code {
  font-family: var(--font-mono); font-size: var(--text-lg);
  letter-spacing: .28em; text-align: center;
}

/* ------------------------------------------------------- an offline code */
/* Read aloud from a screen to somebody writing it down, so it is set large,
   monospaced and widely tracked: the groups of four have to be unmistakable
   over a bad line. */
.code-out {
  display: grid; gap: var(--sp-2); justify-items: center;
  margin-top: var(--sp-3); padding: var(--sp-5);
  background: var(--surface-inset);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.code-value {
  font-family: var(--font-mono); font-size: var(--text-xl);
  letter-spacing: .12em; user-select: all; text-align: center;
  overflow-wrap: anywhere;
}