/* aice-admin — calm ledger.
   AiCE-Lab design language: deliberate, quiet, geometric.
   Playfair Display (display) · Inter (body, form labels) · IBM Plex Mono
   (code, ids, eyebrows, technical labels — never a sentence).

   Palette tuning is evidence-led:
   - desaturated blue chrome reads competent/trustworthy
     (Labrecque & Milne 2012; Cyr et al. 2010);
   - arousal follows saturation, not hue — large surfaces stay light
     and low-chroma (Valdez & Mehrabian 1994; Wilms & Oberfeld 2018);
   - few simultaneous hues beat colorful (Reinecke et al. 2013), so
     amber is reserved for warnings only and red for danger only;
   - every text color clears WCAG AA 4.5:1 on its background;
   - status is never encoded by color alone (diamond + label). */

:root {
  --navy: #091929;
  --ink: #11253E;
  --paper: #F2F7FF;
  --card: #FFFFFF;
  --primary: #1A5FAD;
  --primary-deep: #134487;
  --sky: #4AAEC9;          /* decorative on dark only */
  --teal: #3DA8BC;         /* decorative only */
  --amber: #D97320;        /* warning fills/borders; never body text */
  --amber-text: #8F4A0E;   /* warning text, AA on paper/card */
  --line: #C9D8EC;
  --line-soft: #DEE9F7;
  --muted: #51637D;
  --on-dark: #E8F1FF;
  --on-dark-dim: #8FA6C4;
  --ok: #1E7B43;           /* success green — AA on card */
  --ok-wash: #EBF4EE;
  --bad: #B3261E;          /* danger only */
  --bad-wash: #FBEDEC;
  --warn-wash: #FBF1E6;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}

* { box-sizing: border-box; }
/* The UA's own [hidden] rule is element-weight, so any id selector carrying a
   display beats it and the attribute stops hiding anything. Every toggle in
   this panel is `el.hidden = true/false`, so that silently shows controls the
   flow meant to keep back — #ls-code-row offered a code box next to the
   passkey prompt. */
[hidden] { display: none !important; }

html { font-size: 16px; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(26, 95, 173, .16); }

html { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: .6rem 1rem;
  background: var(--navy);
  color: var(--on-dark);
}
.skip:focus { left: 0; }

/* ── Sidebar ─────────────────────────────────────────────── */

.side {
  flex: 0 0 232px;
  padding: 2.2rem 1.6rem 1.6rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%23E8F1FF' stroke-opacity='0.055'%3E%3Crect x='33' y='33' width='30' height='30'/%3E%3Crect x='33' y='33' width='30' height='30' transform='rotate(45 48 48)'/%3E%3C/g%3E%3C/svg%3E")
    var(--navy);
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.side-brand { display: flex; flex-direction: column; align-items: center; gap: .45rem; }

/* Brand lockup on a light chip — the artwork is navy/teal on
   transparency, so it gets a paper surface inside the navy rail. */
.side-logo-chip {
  display: block;
  align-self: center;
  width: 8.5rem;
  padding: .45rem;
  background: var(--paper);
  border-radius: 3px;
}
.side-logo {
  display: block;
  width: 100%;
  height: auto;
}

.side-app {
  font: 500 .72rem/1 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}

.env {
  margin-top: .45rem;
  padding: .18rem .55rem;
  font: 500 .66rem/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--on-dark-dim);
  border-radius: 2px;
}
.env-staging { background: var(--teal); }
.env-production { background: var(--amber); }

.side-nav { display: flex; flex-direction: column; gap: .15rem; }

.side-nav a {
  /* Block, not inline: only the rail's TOP-level links are flex items of
     .side-nav. A link inside a <details> group is not, so left inline it
     flows like a word and wraps mid-label out of the rail. */
  display: block;
  position: relative;
  padding: .55rem .75rem .55rem 1.5rem;
  font: 500 .78rem/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  text-decoration: none;
  border-radius: 2px;
  transition: color .18s ease, background-color .18s ease;
}

.side-nav a::before {
  content: "";
  position: absolute;
  left: .45rem;
  top: 50%;
  width: 6px;
  height: 6px;
  transform: translateY(-50%) rotate(45deg) scale(0);
  background: var(--sky);
  transition: transform .18s ease;
}

.side-nav a:hover { color: var(--on-dark); background: rgba(232, 241, 255, .05); }
.side-nav a:hover::before { transform: translateY(-50%) rotate(45deg) scale(1); }

.side-nav a.active { color: var(--on-dark); }
.side-nav a.active::before {
  transform: translateY(-50%) rotate(45deg) scale(1);
  background: var(--sky);
}

.side-logout { margin-top: auto; }
.side-logout button {
  width: 100%;
  margin: 0;
  padding: .55rem .75rem;
  font: 500 .72rem/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  background: none;
  border: 1px solid rgba(232, 241, 255, .18);
  border-radius: 2px;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.side-logout button:hover { color: var(--on-dark); border-color: rgba(232, 241, 255, .45); background: none; }

/* ── Main column ─────────────────────────────────────────── */

main {
  flex: 1;
  min-width: 0;
  max-width: 1080px;
  padding: 3rem 3.2rem 4.5rem;
}

/* Each section of the site carries its own geometric watermark; the
   panel does the same per page. Overview: nested diamonds. Licenses:
   hexagons (structure). Tenants: square lattice (order). Audit:
   concentric circles (ripple of every action). All near-invisible. */
main.p-home {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%231A5FAD' stroke-opacity='0.033'%3E%3Crect x='46' y='46' width='48' height='48' transform='rotate(45 70 70)'/%3E%3Crect x='58' y='58' width='24' height='24' transform='rotate(45 70 70)'/%3E%3C/g%3E%3C/svg%3E");
}
main.p-licenses {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%231A5FAD' stroke-opacity='0.033'%3E%3Cpolygon points='100,70 85,96 55,96 40,70 55,44 85,44'/%3E%3Cpolygon points='85,70 77.5,83 62.5,83 55,70 62.5,57 77.5,57'/%3E%3C/g%3E%3C/svg%3E");
}
main.p-tenants {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%231A5FAD' stroke-opacity='0.033'%3E%3Crect x='46' y='46' width='48' height='48'/%3E%3Crect x='58' y='58' width='24' height='24'/%3E%3C/g%3E%3C/svg%3E");
}
main.p-audit {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%231A5FAD' stroke-opacity='0.033'%3E%3Ccircle cx='70' cy='70' r='24'/%3E%3Ccircle cx='70' cy='70' r='12'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference) {
  main { animation: settle .4s ease both; }
  @keyframes settle {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  /* One orchestrated reveal on the overview numbers; nothing loops. */
  .stat dd { animation: rise .5s ease both; }
  .stat:nth-child(2) dd { animation-delay: .06s; }
  .stat:nth-child(3) dd { animation-delay: .12s; }
  .stat:nth-child(4) dd { animation-delay: .18s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ── Headings & type ─────────────────────────────────────── */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.2rem;
}

.head-actions { display: flex; gap: .6rem; padding-bottom: .25rem; }

.eyebrow {
  margin: 0 0 .4rem;
  font: 500 .7rem/1 var(--font-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  margin: 0;
  font: 600 2.1rem/1.15 var(--font-display);
  color: var(--primary-deep);
}

h1.mono-title { font: 500 1.45rem/1.3 var(--font-mono); letter-spacing: 0; word-break: break-all; }

h1 .count {
  font: 500 .95rem/1 var(--font-mono);
  color: var(--muted);
  vertical-align: .45em;
  margin-left: .4rem;
}

h1 .sub {
  display: block;
  margin-top: .35rem;
  font: 400 .85rem/1.4 var(--font-mono);
  color: var(--muted);
}

.head-meta {
  margin: .55rem 0 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  color: var(--muted);
}

.meta-sep {
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  background: var(--line);
}

h2 {
  margin: 2.8rem 0 .9rem;
  font: 600 1.25rem/1.3 var(--font-display);
  color: var(--primary-deep);
}

.h-note {
  font: 400 .78rem/1 var(--font-mono);
  letter-spacing: .04em;
  color: var(--muted);
  margin-left: .4rem;
}

a { color: var(--primary); text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--primary); }

code, .mono { font-family: var(--font-mono); font-size: .86em; }

.muted { color: var(--muted); font-size: .85rem; }

.event { font-family: var(--font-mono); font-size: .82rem; color: var(--primary-deep); }

/* ── Buttons (links styled as buttons share .btn) ────────── */

.btn {
  display: inline-block;
  padding: .55rem 1.2rem;
  font: 600 .85rem/1 var(--font-body);
  letter-spacing: .02em;
  color: #fff;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 2px;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--primary-deep); border-color: var(--primary-deep); }

.btn-ghost { color: var(--primary); background: transparent; }
.btn-ghost:hover { color: #fff; }

/* ── Stats band (overview) ───────────────────────────────── */

.stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin: 0 0 1rem;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--line);
}

/* Ledger crop marks — quiet corner ticks on the figures that matter. */
.stats::before, .stats::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  opacity: .55;
}
.stats::before {
  top: -5px;
  left: -5px;
  border-top: 1px solid var(--primary);
  border-left: 1px solid var(--primary);
}
.stats::after {
  bottom: -5px;
  right: -5px;
  border-bottom: 1px solid var(--primary);
  border-right: 1px solid var(--primary);
}

.stat {
  padding: 1.1rem 1.3rem 1rem;
  border-right: 1px solid var(--line-soft);
}
.stat:last-child { border-right: 0; }

.stat dt {
  margin: 0 0 .3rem;
  font: 500 .66rem/1.3 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat dd {
  margin: 0;
  font: 600 2.3rem/1 var(--font-display);
  color: var(--primary-deep);
  font-variant-numeric: lining-nums;
}

.stat-warn dd { color: var(--amber-text); }
.stat-warn dt::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: .45em;
  transform: rotate(45deg);
  background: var(--amber);
}

/* ── Geometric divider (brand signature) ────────────────── */

.divider {
  display: flex;
  align-items: center;
  margin: 3rem 0 2rem;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
/* Khatam divider — two overlapped squares form the eight-pointed star
   of Islamic geometry; the brand divider, drawn in one element. */
.divider span {
  position: relative;
  width: 9px;
  height: 9px;
  margin: 0 .9rem;
  transform: rotate(45deg);
  border: 1px solid var(--primary);
  background: var(--paper);
}
.divider span::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--primary);
  transform: rotate(45deg);
}
.divider.divider-danger span,
.divider.divider-danger span::before { border-color: var(--bad); }

/* ── Tables ──────────────────────────────────────────────── */

.table-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
}

th {
  padding: .65rem .9rem;
  text-align: left;
  font: 500 .68rem/1.3 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  background: #F8FBFF;
  border-bottom: 1px solid var(--line);
}

td {
  padding: .7rem .9rem;
  text-align: left;
  font-size: .9rem;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}

tr:last-child td { border-bottom: 0; }
tr:hover td { background: #F6FAFF; }
tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--sky); }

/* Definition-style table on detail pages */
table.kv th {
  width: 11rem;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
table.kv tr:last-child th { border-bottom: 0; }

/* ── Status badges & tags ────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .14rem .55rem;
  font: 500 .72rem/1.4 var(--font-mono);
  letter-spacing: .06em;
  border-radius: 2px;
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  flex: none;
}
.badge-active  { color: var(--ok);  background: var(--ok-wash); }
.badge-active::before  { background: var(--ok); }
.badge-revoked { color: var(--bad); background: var(--bad-wash); }
.badge-revoked::before { background: var(--bad); }

.tag {
  display: inline-block;
  padding: .08rem .45rem;
  font: 500 .68rem/1.4 var(--font-mono);
  letter-spacing: .06em;
  border-radius: 2px;
  vertical-align: .08em;
}
.tag-soon { color: var(--amber-text); background: var(--warn-wash); border: 1px solid #EBCDAA; }
.tag-perpetual { color: var(--primary-deep); background: transparent; border: 1px solid var(--line); }

/* ── Flash, notice & errors ──────────────────────────────── */

.flash {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.8rem;
  padding: .7rem 1rem;
  font-size: .9rem;
  color: var(--ok);
  background: var(--ok-wash);
  border: 1px solid #BFDCC1;
  border-left: 3px solid var(--ok);
}

.flash-mark {
  width: 7px;
  height: 7px;
  flex: none;
  transform: rotate(45deg);
  background: var(--ok);
}

.notice {
  margin: -.8rem 0 1.6rem;
  padding: .6rem .9rem;
  font-size: .85rem;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line);
}

.error {
  padding: .8rem 1rem;
  font-size: .92rem;
  color: var(--bad);
  background: var(--bad-wash);
  border: 1px solid #E9C4C1;
  border-left: 3px solid var(--bad);
}

/* Per-action step-up note (stepup-action.js) — appended to <body>, so it
   floats rather than displacing the page it interrupted. */
.stepup-note {
  position: fixed;
  z-index: 50;
  right: 1.2rem;
  bottom: 1.2rem;
  max-width: min(26rem, calc(100vw - 2.4rem));
  margin: 0;
  box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
}

/* ── Health strip ────────────────────────────────────────── */

.health {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.health li {
  position: relative;
  padding: 1rem 1.1rem .9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line);
  font-size: .88rem;
}

.health li strong {
  display: block;
  font-weight: 600;
  margin-bottom: .15rem;
  padding-right: 1.4rem;
}

.health li::after {
  content: "";
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
}

.health li.ok  { border-top-color: var(--teal); }
.health li.ok::after  { background: var(--ok); }
.health li.bad { border-top-color: var(--bad); }
.health li.bad::after { background: var(--bad); }

/* ── Forms ───────────────────────────────────────────────── */

form.action {
  position: relative;
  margin: 0 0 1.4rem;
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
}

/* A small diamond "seal" stitched into each card's top border —
   the brand mark standing in for a drop shadow. */
form.action::before {
  content: "";
  position: absolute;
  top: -4.5px;
  left: 18px;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--card);
  border: 1px solid var(--line);
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.danger-zone form.action::before { border-top-color: #E5C7C5; border-left-color: #E5C7C5; }

form.action-page { max-width: 36rem; margin-top: 1.4rem; }

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1.4rem;
  align-items: start;
  max-width: 56rem;
}
.action-grid form.action { margin: 0; }
.action-stack { display: flex; flex-direction: column; gap: 1.4rem; }
.action-stack form.action { margin: 0; }

form.action h3 {
  margin: 0 0 .4rem;
  font: 600 1.02rem/1.3 var(--font-display);
  color: var(--ink);
}

/* A field name is a name, not an eyebrow. Mono + uppercase + wide tracking
   is the eyebrow voice (.eyebrow, .h-note, ids, code); applied to every
   <label> it made short names shouty and long ones — a policy sentence on a
   checkbox — unreadable. Labels are body text. */
label {
  display: block;
  margin: .9rem 0 .3rem;
  font: 600 .82rem/1.4 var(--font-body);
  color: var(--ink);
}

.hint {
  margin: .25rem 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
}

input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%;
  padding: .5rem .65rem;
  font: 400 .92rem/1.4 var(--font-body);
  color: var(--ink);
  background: #FDFEFF;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

textarea { font-family: var(--font-mono); font-size: .85rem; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 95, 173, .14);
}

button {
  margin-top: 1.1rem;
  padding: .55rem 1.35rem;
  font: 600 .85rem/1 var(--font-body);
  letter-spacing: .02em;
  color: #fff;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
button:hover { background: var(--primary-deep); border-color: var(--primary-deep); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: default; }
button:disabled:hover { background: var(--primary); border-color: var(--primary); }

button.danger {
  color: var(--bad);
  background: transparent;
  border-color: var(--bad);
}
button.danger:hover { color: #fff; background: var(--bad); }

.danger-note { font-size: .8rem; color: var(--bad); margin: .2rem 0 0; }

.danger-zone { margin-top: -1rem; }
.danger-title { color: var(--bad); margin-top: 0; }
.danger-zone form.action { border-color: #E5C7C5; }
.danger-zone form.action h3 { color: var(--bad); }

/* ── Filter bar (audit) ──────────────────────────────────── */

.filter-bar {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin: 0 0 1.6rem;
  padding: 1rem 1.3rem 1.2rem;
  background: var(--card);
  border: 1px solid var(--line);
}

.filter-field { flex: 1 1 11rem; min-width: 9rem; }
.filter-field label { margin-top: 0; }
.filter-bar button { margin-top: 1.25rem; flex: none; }

/* ── Token reveal & copy ─────────────────────────────────── */

.token-reveal { margin: 1.3rem 0; }
.token-reveal summary {
  cursor: pointer;
  font: 500 .78rem/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
}
.token-reveal pre {
  margin: .7rem 0 0;
  padding: .9rem 1rem;
  white-space: pre-wrap;
  word-break: break-all;
  font: 400 .78rem/1.5 var(--font-mono);
  background: var(--card);
  border: 1px dashed var(--line);
}

button.copy {
  margin: 0 0 0 .45rem;
  padding: 0;
  width: 1.15rem;
  height: 1.15rem;
  vertical-align: -.1em;
  color: var(--muted);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2351637D' stroke-width='1.4'%3E%3Crect x='5.5' y='5.5' width='8' height='8'/%3E%3Cpath d='M10.5 5.5v-3h-8v8h3'/%3E%3C/svg%3E")
    center/0.95rem no-repeat transparent;
  border: 0;
  cursor: pointer;
}
button.copy:hover { background-color: transparent; opacity: .7; }
button.copy.copied {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231E7B43' stroke-width='1.8'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7-7'/%3E%3C/svg%3E");
}

button.copy-labelled {
  width: auto;
  height: auto;
  margin-top: .6rem;
  padding: .35rem .8rem .35rem 2rem;
  font: 500 .75rem/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  background-position: .6rem center;
  border: 1px solid var(--line);
  border-radius: 2px;
}
button.copy-labelled:hover { border-color: var(--primary); opacity: 1; }
button.copy-labelled.copied { color: var(--ok); border-color: var(--ok); }

/* ── Pager & misc ────────────────────────────────────────── */

.pager { margin: 1.2rem 0; font: 500 .82rem/1 var(--font-mono); }
.pager a { margin-right: 1.4rem; text-decoration: none; }

.more-link { margin: .9rem 0; font: 500 .82rem/1 var(--font-mono); }
.more-link a { text-decoration: none; }

.empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
  background: var(--card);
  border: 1px dashed var(--line);
}
.empty::before {
  content: "\25C7 \25C6 \25C7"; /* ◇ ◆ ◇ */
  display: block;
  margin-bottom: .55rem;
  font-size: .62rem;
  letter-spacing: .7em;
  text-indent: .7em; /* recenters after trailing letter-spacing */
  color: var(--line);
}

/* ── Login ───────────────────────────────────────────────── */

.login-body {
  align-items: center;
  justify-content: center;
  padding: 1.6rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%23E8F1FF' stroke-opacity='0.055'%3E%3Crect x='33' y='33' width='30' height='30'/%3E%3Crect x='33' y='33' width='30' height='30' transform='rotate(45 48 48)'/%3E%3C/g%3E%3C/svg%3E")
    var(--navy);
}

.login-card {
  flex: none; /* opt out of the global main { flex: 1 } stretch */
  width: min(21rem, 100%);
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--paper);
  border-radius: 4px;
}

.login-logo { align-self: center; }

.login-app {
  margin: 1rem 0 0;
  font: 500 .72rem/1 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.login-app .env { margin: 0 0 0 .4rem; }

.login-error {
  width: 100%;
  margin: 1.2rem 0 0;
  padding: .55rem .75rem;
  font-size: .85rem;
  color: var(--bad);
  background: var(--bad-wash);
  border: 1px solid #E5C7C5;
  border-radius: 2px;
}

.login-card form { width: 100%; }
.login-card button { width: 100%; }

.login-h {
  margin: 1.4rem 0 0;
  font: 600 1.3rem/1.3 var(--font-display);
  color: var(--ink);
}

.login-note {
  margin: 1rem 0 0;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}
.login-note-dim { font-size: .75rem; }

.login-phrase {
  width: 100%;
  margin: 1rem 0 0;
  padding: .8rem .9rem;
  font: 500 .95rem/1.6 var(--font-mono);
  text-align: center;
  color: var(--primary-deep);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.phrase-blank {
  color: var(--amber-text);
  letter-spacing: .1em;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1100px) {
  main { padding: 2.4rem 2rem 3.5rem; }
}

@media (max-width: 880px) {
  body { flex-direction: column; }
  .side {
    flex: none;
    padding: .85rem 1.3rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 5;
  }
  .side-brand { flex-direction: row; align-items: center; gap: .7rem; }
  .side-logo-chip { align-self: center; padding: .2rem; width: 2.9rem; flex: none; }
  .login-logo { width: 8.5rem; padding: .45rem; } /* login card keeps the full-size mark */
  .side-app { display: none; }
.env { margin-top: 0; }
  .side-nav { flex-direction: row; gap: .2rem; flex-wrap: wrap; }
  .side-nav a { padding: .55rem .55rem .55rem 1.15rem; }
  .side-logout { margin-top: 0; }
  .side-logout button { width: auto; padding: .45rem .7rem; }
  main { padding: 1.6rem 1.3rem 3rem; }
  .page-head { align-items: flex-start; }
  th, td { padding: .55rem .6rem; }
  table.kv th { width: 8rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .filter-bar { flex-direction: column; gap: .2rem; }
  .filter-field { flex: none; width: 100%; min-width: 0; }
  .filter-bar button { margin-top: 1rem; align-self: flex-start; }
}

@media (max-width: 640px) {
  /* Data tables collapse to labeled cards — no sideways scrolling on
     a phone. The kv definition table stacks label over value. */
  .table-wrap:has(table:not(.kv)) {
    background: transparent;
    border: 0;
    overflow: visible;
  }
  .table-wrap table:not(.kv),
  .table-wrap table:not(.kv) tr,
  .table-wrap table:not(.kv) td { display: block; width: 100%; }
  .table-wrap table:not(.kv) tr:has(th) { display: none; }
  .table-wrap table:not(.kv) tr {
    margin-bottom: .8rem;
    padding: .3rem 1rem;
    background: var(--card);
    border: 1px solid var(--line);
  }
  .table-wrap table:not(.kv) tr:last-child { margin-bottom: 0; }
  .table-wrap table:not(.kv) td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .5rem 0;
    text-align: right;
    border-bottom: 1px solid var(--line-soft);
  }
  .table-wrap table:not(.kv) td:last-child { border-bottom: 0; }
  .table-wrap table:not(.kv) td::before {
    content: attr(data-label);
    flex: none;
    font: 500 .62rem/1.8 var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: left;
    color: var(--muted);
  }
  .table-wrap tr:hover td { background: var(--card); }
  .table-wrap tr:hover td:first-child { box-shadow: none; }

  table.kv tr, table.kv th, table.kv td { display: block; width: 100%; }
  table.kv th {
    width: auto;
    padding: .6rem .9rem .05rem;
    background: transparent;
    border-right: 0;
    border-bottom: 0;
  }
  table.kv td { padding: 0 .9rem .6rem; }
  table.kv tr { border-bottom: 1px solid var(--line-soft); }
  table.kv tr:last-child { border-bottom: 0; }
}

@media (max-width: 560px) {
  html { font-size: 15px; }
  main { padding: 1.2rem 1rem 2.5rem; }
  h1 { font-size: 1.7rem; }
  h1.mono-title { font-size: 1.15rem; }
  .page-head { margin-bottom: 1.5rem; }
  .head-actions { width: 100%; padding-bottom: 0; }
  .head-actions .btn { flex: 1 1 auto; text-align: center; }
  .stat dd { font-size: 1.9rem; }
  .stat { padding: .85rem 1rem .8rem; }
  h2 { margin-top: 2.2rem; }
  .divider { margin: 2.2rem 0 1.5rem; }
}

/* auth-test harness */
.at-target { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-bottom: 2rem; }
.at-target input[readonly] { opacity: .7; }
.at-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; }
.at-card { background: var(--card); border: 1px solid var(--line); border-radius: .5rem; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.at-card h2 { margin: 0 0 .25rem; font-size: 1rem; }
.at-card h3 { margin: .75rem 0 0; font-size: .85rem; font-weight: 600; }
.code-input { max-width: 8rem; letter-spacing: .3em; font-family: var(--font-mono); }
.totp-secret { font-family: var(--font-mono); user-select: all; word-break: break-all; }
.totp-uri { word-break: break-all; font-size: .8rem; }
.at-loghead { margin-top: 3rem; }
.at-log .step { border-left: 3px solid var(--line); padding: .5rem .75rem; margin-bottom: 1rem; }
.at-log .step-pass { border-left-color: var(--ok); background: var(--ok-wash); }
.at-log .step-fail { border-left-color: var(--bad); background: var(--bad-wash); }
.at-log pre { white-space: pre-wrap; word-break: break-all; margin: .2rem 0; font-family: var(--font-mono); font-size: .8rem; }
.at-log .lbl { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); }
.at-state { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); margin: 1rem 0 0; }
.login-reset { margin-top: 1.25rem; font-size: .75rem; text-align: center; }
.login-reset a { color: var(--muted); }

/* Demoted secondary passkey control: a muted text link, not a primary button. */
.login-actions { display: flex; flex-direction: column; gap: .6rem; width: 100%; margin-top: 1.2rem; }
.login-actions form { margin: 0; }
.btn-block { width: 100%; margin: 0; }
.btn-secondary {
  color: var(--primary);
  background: transparent;
  border: 1px solid var(--line);
}
.btn-secondary:hover { background: var(--paper); border-color: var(--primary); color: var(--primary-deep); }
.btn-secondary:disabled:hover { background: transparent; border-color: var(--line); }
.linklike {
  width: auto;
  margin: 0;
  padding: 0;
  font: inherit;
  color: var(--muted);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
.linklike:hover { background: none; color: var(--ink); }
.linklike:disabled { opacity: .55; cursor: default; }
.linklike:disabled:hover { background: none; color: var(--muted); }

/* Passkey list (Security tab) */
/* Security: a constrained settings column with a section per sign-in method. */
.sec-wrap { max-width: 620px; }
.sec-intro { color: var(--muted); margin: 0 0 1.5rem; line-height: 1.55; }
.sec-method { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.sec-method:first-of-type { border-top: none; padding-top: 0; }
.sec-method-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; }
.sec-method-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.sec-method-head h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.sec-method-head .hint { margin: 0; max-width: 42ch; }
.sec-method-actions { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.sec-method-actions form { margin: 0; }
.cred-state { white-space: nowrap; }
.sec-method-actions button { margin: 0; }
.pill { font-size: .78rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.pill-on { background: #10331f; color: #7be0a3; }
.pill-off { background: #3a2a12; color: #e0b478; }
.cred-state { font-size: .85rem; color: var(--muted); }
button.secondary { background: transparent; color: var(--primary); border-color: var(--line); }
button.secondary:hover { background: var(--paper); border-color: var(--primary); color: var(--primary-deep); }
#totp-confirm-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
#totp-confirm-row .code-input { box-sizing: border-box; padding: .5rem .65rem; }
#totp-confirm-row button { margin: 0; }
/* Login step-up: full-width input + button, stacked and aligned (the narrow
   login card looked off with an 8rem input above a full-width button). */
#ls-code-row { display: flex; flex-direction: column; gap: .6rem; margin: .35rem 0; }
#ls-code-row .code-input { max-width: none; width: 100%; box-sizing: border-box; text-align: center; padding: .6rem; }

/* Phone-OTP code entry: full-width to match the Verify button, big centred
   monospace digits. Kept as one input (not 6 boxes) so the OS one-time-code
   autofill fires reliably (autocomplete="one-time-code"). */
.login-card .code-input {
  max-width: none; width: 100%; box-sizing: border-box;
  text-align: center; padding: .7rem .5rem;
  font-size: 1.4rem; letter-spacing: .5em; text-indent: .5em;
}
.rc-list { list-style: none; margin: .75rem 0; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font-family: var(--mono, ui-monospace, monospace); columns: 2; column-gap: 1.5rem; }
.rc-list li { padding: .15rem 0; letter-spacing: .04em; break-inside: avoid; }
@media (max-width: 480px) { .rc-list { columns: 1; } }

.cred-list { margin: 1rem 0 .25rem; color: var(--muted); }
.cred-actions { display: flex; gap: .5rem; flex: none; margin-top: .75rem; }
.cred-actions button { margin: 0; }

/* Passkeys as a compact table with real action buttons. */
.pk-table { width: 100%; border-collapse: collapse; margin: 1rem 0 .25rem; font-size: .95rem; }
.pk-table th { text-align: left; font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .3rem .6rem .3rem 0; border-bottom: 1px solid var(--line); }
.pk-table td { padding: .55rem .6rem .55rem 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pk-table tr:last-child td { border-bottom: none; }
.pk-name-cell { font-weight: 500; color: var(--ink, inherit); }
.pk-added { color: var(--muted); white-space: nowrap; }
.pk-actions { text-align: right; white-space: nowrap; }
.pk-actions button { margin: 0 0 0 .4rem; }
button.btn-sm { padding: .3rem .7rem; font-size: .85rem; }
button.btn-sm.danger { background: transparent; color: var(--danger, #b3261e); border-color: var(--line); }
button.btn-sm.danger:hover { background: var(--danger, #b3261e); color: #fff; border-color: var(--danger, #b3261e); }

/* TOTP enrollment QR (SVG from the vendored qrcode-generator) */
.totp-qr {
  position: relative;
  width: fit-content;
}
.totp-qr svg {
  width: 180px;
  height: 180px;
  display: block;
  margin: 0.5rem 0;
  background: #fff;
  border-radius: 6px;
}
/* Brand mark centred over the QR. ~19% of the symbol width — well inside
   what level-H error correction (30%) can absorb. */
.totp-qr .totp-qr-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 36px; /* logo-mark is 840x892 — keep its aspect */
  object-fit: contain;
  background: #fff;
  padding: 3px;
  border-radius: 6px;
}

/* ── UI v3 — overview attention queue, fleet, product hub ── */

.badge-warn     { color: var(--amber-text); background: var(--warn-wash); }
.badge-warn::before     { background: var(--amber); }
.badge-grace    { color: var(--amber-text); background: var(--warn-wash); }
.badge-grace::before    { background: var(--amber); }
.badge-degraded { color: var(--bad); background: var(--bad-wash); }
.badge-degraded::before { background: var(--bad); }
.badge-es       { color: var(--amber-text); background: var(--warn-wash); }
.badge-es::before       { content: none; }
.badge-muted    { color: var(--muted); background: var(--line-soft); }
.badge-muted::before    { background: var(--muted); }

.btn-sm { padding: .2rem .65rem; font-size: .78rem; }

.attn { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.attn li {
  display: flex; align-items: center; gap: .9rem;
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--muted); border-radius: 4px;
  padding: .55rem .9rem; font-size: .9rem;
}
.attn li.sev-bad  { border-left-color: var(--bad); }
.attn li.sev-warn { border-left-color: var(--amber); }
.attn-tag {
  flex: none; font: 500 .72rem/1.4 var(--font-mono); letter-spacing: .06em;
  color: var(--muted); text-transform: uppercase; white-space: nowrap;
}
.sev-bad .attn-tag  { color: var(--bad); }
.sev-warn .attn-tag { color: var(--amber-text); }
.attn-text { flex: 1; min-width: 0; }
.attn li .btn-sm { flex: none; }
.attn-empty {
  background: var(--ok-wash); border: 1px solid var(--ok); color: var(--ok);
  border-radius: 4px; padding: .55rem .9rem; font-size: .9rem;
}

.dots { display: inline-flex; gap: .3rem; vertical-align: middle; }
.dot {
  width: .55rem; height: .55rem; border-radius: 999px;
  border: 1.5px solid var(--line); display: inline-block;
}
.dot.on { background: var(--ok); border-color: var(--ok); }
.dots-key { font: 400 .68rem var(--font-mono); color: var(--muted); text-transform: none; letter-spacing: 0; }
.es-mark { color: var(--amber-text); }

.hub-summary { margin: .35rem 0 0; font-size: .95rem; }
.hub-id { margin: .1rem 0 0; font-size: .82rem; color: var(--muted); }
.hub-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1rem; margin: 1.4rem 0 2rem;
}
.hub-panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 6px; padding: 1rem 1.2rem;
}
.hub-panel header { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; }
.hub-panel header h2 { margin: 0; font-size: 1rem; }
.hub-panel-err { border-color: var(--bad); background: var(--bad-wash); }
.hub-err { color: var(--bad); font-size: .88rem; margin: .3rem 0; }
.hub-unlinked { color: var(--muted); font-size: .88rem; margin: .3rem 0; }
.hub-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .1rem 1.1rem; font-size: .88rem; }
.hub-facts dt { color: var(--muted); }
.hub-facts dd { margin: 0; overflow-wrap: anywhere; }
.hub-open { margin: auto 0 0; padding-top: .7rem; font: 500 .82rem/1 var(--font-mono); display: flex; gap: 1rem; }
.hub-open a { text-decoration: none; }

/* The licence is the product's contract anchor, not one service among
   several — so it sits full width above the service cards rather than
   competing with them in the grid. */
.hub-lic { margin: 1.4rem 0 2rem; }
.hub-facts-wide { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); }

/* Section heads over the card grids. Quiet, so the cards carry the page. */
.hub-sec {
  margin: 0 0 .8rem; font: 500 .78rem/1.3 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.hub-sec .h-note { text-transform: none; letter-spacing: 0; }

/* One card per registered service. Cards are equal height so a row of them
   reads as one board; the footer links sit on the bottom edge. */
.hub-grid > .hub-panel { display: flex; flex-direction: column; }
.hub-panel-unused { background: none; border-style: dashed; }

/* How the product uses the service, in the card's header. The star says it
   (filled = a tenant of ours, outlined = its own), so colour carries
   nothing here. */
.hub-mode {
  display: flex; align-items: center; gap: .35rem; white-space: nowrap;
  font: 400 .74rem/1 var(--font-mono); color: var(--muted);
}
.hub-mode-off { color: var(--muted); }
.hub-chip { margin: 0 0 .5rem; }
.hub-tenant { margin: 0 0 .5rem; font-size: .8rem; color: var(--muted); }

/* ── UI v3.1 — onboarding wizard ─────────────────────────── */

.wiz-steps { list-style: none; margin: 1.4rem 0; padding: 0; }
.wiz-steps > li {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 6px; padding: .9rem 1.2rem; margin-bottom: .7rem;
}
.wiz-no {
  flex: none; width: 1.8rem; height: 1.8rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font: 600 .85rem/1 var(--font-mono);
  border: 1.5px solid var(--line); color: var(--muted); background: var(--paper);
}
.wiz-done .wiz-no { background: var(--ok); border-color: var(--ok); color: #fff; }
.wiz-fail .wiz-no { background: var(--bad); border-color: var(--bad); color: #fff; }
.wiz-fail { border-color: var(--bad); }
.wiz-blocked { opacity: .6; }
.wiz-body { flex: 1; min-width: 0; }
.wiz-body h3 { margin: 0 0 .15rem; font-size: 1rem; }
.wiz-body p { margin: .15rem 0; font-size: .88rem; }
.wiz-err { color: var(--bad); font-size: .88rem; }

.wiz-form { display: flex; flex-direction: column; gap: .7rem; max-width: 34rem; margin-top: .6rem; }
/* Field help is collapsed until the field has focus: the form reads clean,
   and the explanation arrives exactly when the operator is filling that
   field. Collapsed with max-height rather than display:none so the text
   stays in the accessibility tree for screen readers. */
.wiz-form .hint {
  display: block; margin: 0;
  /* The hint sits inside the <label>, so it inherits the label's weight and
     size. Help text is a sentence, not a field name. */
  font: 400 .78rem/1.5 var(--font-body);
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .15s ease, opacity .15s ease, margin .15s ease;
}
.wiz-form label:focus-within .hint { max-height: 16rem; opacity: 1; margin: .2rem 0 0; }
.wiz-form .hint em { display: block; margin-top: .15rem; }
@media (prefers-reduced-motion: reduce) { .wiz-form .hint { transition: none; } }
.wiz-form input[type=text], .wiz-form input[type=number], .wiz-form select {
  display: block; width: 100%; margin-top: .25rem;
  border: 1px solid var(--line); border-radius: 4px; padding: .45rem .7rem;
  font: .9rem var(--font-body); background: var(--card); color: var(--ink);
}
.wiz-form button { align-self: flex-start; }
/* Flow, not flex: a checkbox label is one sentence, and every text node and
   inline span inside a flex container becomes its own column. */
.wiz-check { display: block; padding-left: 1.5rem; text-indent: -1.5rem; font-weight: 400; font-size: .88rem; }
.wiz-check input { width: 1rem; margin-right: .5rem; text-indent: 0; vertical-align: -.15rem; }
.wiz-inline { margin-top: .6rem; display: flex; flex-direction: column; gap: .6rem; }
.wiz-inline button { align-self: flex-start; }

.wiz-printonce {
  background: var(--navy); color: var(--on-dark);
  border-radius: 6px; padding: 1rem 1.3rem; margin: 1rem 0;
}
.wiz-printonce h2 { margin: 0 0 .3rem; color: #fff; font-size: 1.05rem; }
.wiz-printonce p { margin: .2rem 0; font-size: .9rem; }
.wiz-key {
  background: rgba(232,241,255,.08); border-radius: 4px;
  padding: .5rem .8rem; word-break: break-all; user-select: all;
}
.wiz-note { color: var(--on-dark-dim); font-size: .8rem !important; }

.wiz-diff { margin: .6rem 0; }
.wiz-diff table { border-collapse: collapse; font-size: .84rem; margin: .4rem 0; }
.wiz-diff th, .wiz-diff td { border: 1px solid var(--line); padding: .35rem .7rem; text-align: left; }
.wiz-diff th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.wiz-delta td { background: var(--warn-wash); }

/* ── UI v3.2 — suspension ────────────────────────────────── */
.dot.sus { background: var(--bad); border-color: var(--bad); }

/* A value kept off the screen until the operator asks for it (secretWidget).
   The token still reaches the browser — this stops it being on display. */
.secret > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: .85rem;
  list-style: none;
}
.secret > summary::-webkit-details-marker { display: none; }
.secret > summary::before { content: "\25B8\00a0"; }
.secret[open] > summary::before { content: "\25BE\00a0"; }
.secret > summary:hover { color: var(--primary); }
.secret-value {
  display: block;
  margin: .4rem 0 .35rem;
  padding: .5rem .6rem;
  font: 500 .72rem/1.5 var(--font-mono);
  overflow-wrap: anywhere;
  border: 1px dashed var(--line);
  border-radius: 4px;
}
.secret-copy {
  font: inherit;
  font-size: .8rem;
  padding: .2rem .6rem;
  cursor: pointer;
}
.secret-copy.copied::after { content: "\00a0\2713"; }

/* How a product uses each service it uses at all (enrolmentsWidget). A
   service with no enrolment has no line — "not used" is an absent entry. */
.enrolments { margin: 0; padding: 0; list-style: none; }
.enrolments li { padding: .15rem 0; }
.enrolment-service {
  font: 500 .72rem/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.enrolment-hosted { color: var(--primary); }
.enrolment-tenant { font: 500 .78rem/1 var(--font-mono); }
.enrolment-self { color: var(--muted); font-size: .85rem; }

/* Collapsible rail sections (forge NavItem.Group). Native <details>, so the
   rail grows a line per service without becoming a wall, and no script. */
.side-nav .nav-group > summary {
  cursor: pointer;
  list-style: none;
  /* Same box and voice as a rail link: a group heading IS a rail row, and a
     smaller face made it read as a caption for the rows above it. */
  position: relative;
  padding: .55rem .75rem .55rem 1.5rem;
  font: 500 .78rem/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--on-dark-dim);
}
.side-nav .nav-group > summary::-webkit-details-marker { display: none; }
/* One angle bracket, rotated: ">" closed, pointing down when open. It sits in
   the same left gutter as a link's diamond, so labels line up. */
.side-nav .nav-group > summary::before {
  content: ">";
  position: absolute;
  left: .5rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .18s ease;
}
.side-nav .nav-group[open] > summary::before { transform: translateY(-50%) rotate(90deg); }
.side-nav .nav-group > summary:hover { color: var(--on-dark); }

/* A fleet dot for a self-hosted service: enrolled, but no tenant of ours —
   outlined rather than filled, so it reads as neither on nor absent. */
.dots .dot.self {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--muted);
}

/* ---- Fleet board -------------------------------------------------------
   Rows are products, columns are registered services. The product column
   stays put while the services scroll, so the table never needs redesigning
   when a service is added. Read-only: every link here only navigates. */
.fleet-strip {
  display: flex; flex-wrap: wrap;
  border: 1px solid var(--line-soft); border-radius: 6px;
  overflow: hidden; margin: 0 0 1.1rem;
}
.fleet-strip > div {
  flex: 1 1 150px; min-width: 0;
  padding: .6rem .9rem; border-right: 1px solid var(--line-soft);
}
.fleet-strip > div:last-child { border-right: 0; }
.fleet-strip b { display: block; font: 600 1.5rem/1.1 var(--font-display); }
.fleet-strip span { font-size: .78rem; color: var(--muted); }
.fleet-strip .c-bad b { color: var(--bad); }
.fleet-strip .c-warn b { color: var(--amber-text); }

.board-wrap { overflow-x: auto; margin-bottom: .6rem; }
table.board { border-collapse: separate; border-spacing: 0; width: 100%; }
table.board th, table.board td { white-space: nowrap; }
table.board thead th {
  text-align: left; padding: 0 1.3rem .5rem 0; vertical-align: bottom;
  border-bottom: 1px solid var(--line); background: var(--bg);
  font: 500 .64rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted);
}
table.board thead th a { color: inherit; text-decoration: none; }
table.board thead th a:hover { color: var(--primary); text-decoration: underline; }
table.board .pcol {
  position: sticky; left: 0; z-index: 2; background: var(--bg);
  padding-right: 1.6rem; box-shadow: 1px 0 0 var(--line-soft);
}
table.board tbody td {
  padding: 0 1.3rem 0 0; vertical-align: middle; height: 3.4rem;
  border-bottom: 1px solid var(--line-soft);
}
table.board tbody td.pcol { padding: .5rem 1.6rem .5rem 0; white-space: normal; }
table.board td.pcol > a { font-weight: 600; }
table.board .lic,
table.board .phase { display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--muted); }
table.board .phase { display: block; }
.board .cell-in { display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; text-decoration: none; color: inherit; }
a.cell-in:hover { color: var(--primary); }
a.cell-in:hover .cid { color: var(--primary); }
.board .cid { font: 500 .7rem/1 var(--font-mono); color: var(--muted); }
.board .selfw { font-size: .72rem; color: var(--muted); }
.board .dash { color: var(--line); }

/* Islamic eight-point star: filled = a tenant of ours, outlined = the
   product runs its own. Shape carries the meaning, not colour. */
.glyph {
  display: inline-block; width: .8rem; height: .8rem; vertical-align: -.1rem;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 28%, 89% 15%, 78% 44%, 100% 50%, 78% 56%, 89% 85%, 61% 72%,
                     50% 100%, 39% 72%, 11% 85%, 22% 56%, 0 50%, 22% 44%, 11% 15%, 39% 28%);
}
.star-on { color: var(--ink, var(--primary)); }
.star-off { color: var(--line); }

.bar { display: inline-block; height: 2px; width: 2.1rem; border-radius: 1px; background: var(--muted); }
.bar.ok { background: var(--ok); }
.bar.warn { background: var(--amber); }
.bar.bad { background: var(--bad); }
.bar.muted { background: var(--line); }

.legend {
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  font-size: .74rem; color: var(--muted);
  padding-top: .7rem; margin: 0 0 .4rem;
}
.legend span { display: flex; align-items: center; gap: .4rem; }
.board-note { font-size: .74rem; color: var(--muted); margin: 0 0 1.4rem; }

/* The running build, at the foot of the rail. Deliberately the quietest
   thing in the chrome: it answers "what is deployed?" when asked and is
   ignorable otherwise. */
.side-version {
  margin: .9rem .7rem 0;
  font: 500 .62rem/1.4 var(--font-mono);
  letter-spacing: .04em;
  color: var(--on-dark-dim);
  overflow-wrap: anywhere;
}