/* TZX Desk Console — first-party web UI.

   Every colour, size and duration below is a token from design/tokens.json.
   The dark set lives on :root; the light set is a DESIGNED palette under
   [data-theme="light"], never an inversion. Components reference tokens
   only — no literal colour appears past the two token blocks. */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/IBMPlexSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/IBMPlexSans-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/IBMPlexSans-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---- tokens: dark (default) ------------------------------------------ */
:root {
  color-scheme: dark;

  /* colour.dark */
  --ground:         #0B0F0D;
  --surface:        #0E1411;
  --raised:         #16201B;
  --grid-line:      #121815;
  --hairline:       #1B2621;
  --control-border: #5E6F66;
  --ink:            #E6EDE8;
  --secondary:      #A9BBB1;
  --muted:          #829790;
  --accent:         #37D0E6;
  --accent-hover:   #8AE3F1;
  --accent-ink:     #0B0F0D;
  --ok:             #2ED38F;
  --pending:        #F5B942;
  --denied:         #FF7A7A;

  /* semantic derivations (dark). pending-text is the amber itself: on the
     dark ground it clears 4.5:1 on its own. */
  --pending-text:   #F5B942;
  --pending-dot:    #F5B942;
  --pending-pill:   rgba(245, 185, 66, 0.14);
  --pending-row:    rgba(245, 185, 66, 0.06);
  --denied-hover:   #FF9B9B;   /* color.dark.denied-hover in tokens.json */
  --ok-pill:        rgba(46, 211, 143, 0.14);
  --denied-pill:    rgba(255, 122, 122, 0.14);
  --accent-pill:    rgba(55, 208, 230, 0.14);
  --accent-edge:    rgba(55, 208, 230, 0.38);
  --selected-row:   rgba(55, 208, 230, 0.08);
  --scrim:          rgba(6, 9, 8, 0.72);
  --shadow:         0 24px 60px rgba(0, 0, 0, 0.55);
  --qr-paper:       #FFFFFF;
}

/* ---- tokens: scale (theme-independent) ---------------------------------- */
:root {
  /* type */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-eyebrow: 12px;
  --fs-caption: 13px;
  --fs-body-sm: 14px;
  --fs-body:    15px;
  --fs-body-lg: 16px;
  --fs-h3:      18px;
  --fs-h2:      20px;
  --fs-h1:      28px;
  --lh-body:    1.5;
  --lh-display: 1.2;
  --tracking-eyebrow: 0.12em;

  /* shape */
  --radius:    6px;
  --hairline-w: 1px;
  --control-h: 44px;
  --row-h:     44px;
  --icon:      16px;

  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

  /* motion */
  --t-ui:   180ms;
  --t-page: 320ms;
  --ease-enter: ease-out;
  --ease-exit:  ease-in;
  --ease-move:  ease-in-out;

  /* layout */
  --rail-w: 232px;
  --pane-w: 372px;
  --topbar-h: 56px;
}

/* ---- tokens: light (designed, not inverted) --------------------------- */
[data-theme="light"] {
  color-scheme: light;

  --ground:         #F7F9F6;
  --surface:        #FFFFFF;
  --raised:         #E2EFE9;
  --grid-line:      #EEF2EF;   /* derived: the one value with no light entry in tokens.json */
  --hairline:       #C9D6CF;
  --control-border: #7E948A;
  --ink:            #1B2420;
  --secondary:      #3E4C46;
  --muted:          #58675F;
  --accent:         #0B6B78;
  --accent-hover:   #0E8695;
  --accent-ink:     #FFFFFF;
  --ok:             #0F6E55;
  --pending:        #A87710;
  --denied:         #B3261E;

  --pending-text:   #7A4A00;
  --pending-dot:    #A87710;
  --pending-pill:   #FFE9B8;
  --pending-row:    #FFF6E0;
  --denied-hover:   #C8352C;
  --ok-pill:        rgba(15, 110, 85, 0.10);
  --denied-pill:    rgba(179, 38, 30, 0.09);
  --accent-pill:    rgba(11, 107, 120, 0.10);
  --accent-edge:    rgba(11, 107, 120, 0.35);
  --selected-row:   rgba(11, 107, 120, 0.07);
  --scrim:          rgba(27, 36, 32, 0.34);
  --shadow:         0 16px 40px rgba(27, 36, 32, 0.18);
  --qr-paper:       #FFFFFF;
}

/* ---- base -------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { line-height: var(--lh-display); }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: var(--s4);
  z-index: 100;
  padding: var(--s2) var(--s3);
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
}
.skip-link:focus { top: var(--s4); }

/* ---- type atoms --------------------------------------------------------- */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* The eyebrow: mono, uppercase, tracked. Used for column heads, labels,
   section titles inside panels and the wordmark. */
.th {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}
.caption { font-size: var(--fs-caption); color: var(--secondary); }
.num { font-variant-numeric: tabular-nums; }

.tone-ok      { color: var(--ok); }
.tone-pending { color: var(--pending-text); }
.tone-denied  { color: var(--denied); }
.tone-accent  { color: var(--accent); }
.tone-muted   { color: var(--muted); }

/* ---- controls ------------------------------------------------------------ */
.btn, .btn-ghost, .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: var(--control-h);
  padding: 0 var(--s4);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.btn {
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
}
.btn:hover { background: var(--accent-hover); }
.btn-ghost {
  border: var(--hairline-w) solid var(--control-border);
  background: transparent;
  color: var(--secondary);
  font-weight: 500;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger { background: var(--denied); color: var(--accent-ink); }
[data-theme="light"] .btn-danger { color: #FFFFFF; }
.btn-danger:hover { background: var(--denied-hover); }
.btn-ghost.btn-danger-ghost { color: var(--denied); border-color: var(--denied); }
.btn-ghost.btn-danger-ghost:hover { color: var(--denied-hover); border-color: var(--denied-hover); }
.btn-ghost.btn-ok-ghost { color: var(--ok); border-color: var(--ok); }
.btn-block { width: 100%; }
.btn-sm { height: 32px; padding: 0 var(--s3); font-size: var(--fs-eyebrow); }
.btn[disabled], .btn-ghost[disabled], .icon-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn .kbd, .btn-ghost .kbd { margin-left: var(--s1); }

.icon-btn {
  width: var(--control-h);
  padding: 0;
  border: var(--hairline-w) solid transparent;
  background: transparent;
  color: var(--secondary);
}
.icon-btn:hover { background: var(--raised); color: var(--ink); }
.icon-btn svg { width: var(--icon); height: var(--icon); }

.kbd {
  display: inline-block;
  padding: 1px 5px;
  border: var(--hairline-w) solid var(--hairline);
  border-radius: 4px;
  background: var(--raised);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.4;
}

.input, .select, .search-input, .textarea {
  height: var(--control-h);
  width: 100%;
  padding: 0 var(--s3);
  border: var(--hairline-w) solid var(--control-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
}
.input.mono, .search-input { font-family: var(--font-mono); font-size: var(--fs-caption); }
.input::placeholder, .search-input::placeholder { color: var(--muted); }
.input:hover, .select:hover, .search-input:hover { border-color: var(--accent); }
.input[readonly] { color: var(--secondary); }
.select {
  width: auto;
  min-width: 150px;
  padding-right: 34px;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.select-block { width: 100%; }
.select-multi { height: auto; min-height: 132px; padding: var(--s2) var(--s3); background-image: none; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s4); }
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}
.label-hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.field-hint { font-size: var(--fs-caption); color: var(--muted); line-height: var(--lh-body); }
.field-row { display: flex; gap: var(--s2); align-items: center; }
.field-row .input, .field-row .select { flex: 1 1 auto; min-width: 0; }

.check {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--control-h);
  margin-bottom: var(--s2);
  cursor: pointer;
  color: var(--secondary);
  font-size: var(--fs-body-sm);
}
.check-box {
  width: 18px; height: 18px;
  flex: none;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.check-text { line-height: 1.4; }

/* A 44px hit target around a small checkbox. It fills the cell's own
   height (rows and the header are both 44px) and reaches sideways into
   the cell padding, so no part of the target is clipped by the wrap. */
.check-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  margin: 0 calc(var(--s3) * -1);
  vertical-align: middle;
  cursor: pointer;
}
.check-cell .check-box { width: 18px; height: 18px; }

/* ---- state glyphs ----------------------------------------------------------
   One vocabulary, drawn as inline SVG: filled dot = online and approved,
   hollow ring = approved but quiet, dashed amber ring = waiting for your
   approval, ring with a bar = revoked. Colour never carries the meaning
   alone — each shape is distinct in greyscale. */
.glyph { width: 12px; height: 12px; flex: none; display: inline-block; vertical-align: -1px; }
.glyph-online  { color: var(--ok); }
.glyph-offline { color: var(--control-border); }
.glyph-pending { color: var(--pending-dot); }
.glyph-revoked { color: var(--denied); }
.glyph-accent  { color: var(--accent); }

.dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--control-border);
  flex: none;
  display: inline-block;
}
.dot-accent  { background: var(--accent); }
.dot-ok      { background: var(--ok); }
.dot-pending { background: var(--pending-dot); }
.dot-denied  { background: var(--denied); }

/* ---- pills, chips, badges ---------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 var(--s2);
  border-radius: var(--radius);
  border: var(--hairline-w) solid transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pill-approved { background: var(--ok-pill);      color: var(--ok); }
.pill-pending  { background: var(--pending-pill); color: var(--pending-text); }
.pill-revoked  { background: var(--denied-pill);  color: var(--denied); }
.pill-offline  { background: transparent;         color: var(--muted); border-color: var(--hairline); }
.pill-accent   { background: var(--accent-pill);  color: var(--accent); }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--pending-pill);
  color: var(--pending-text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.chips { display: inline-flex; gap: var(--s1); max-width: 100%; overflow: hidden; vertical-align: middle; white-space: nowrap; }
.chips .chip { flex: 0 1 auto; min-width: 0; }
.chip-tag { background: var(--accent-pill); color: var(--accent); }
.chip {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  padding: 0 var(--s2);
  border-radius: var(--radius);
  background: var(--raised);
  color: var(--secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- messages ------------------------------------------------------------- */
.form-error, .form-ok, .form-note {
  margin: 0 0 var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
  border: var(--hairline-w) solid var(--denied);
  background: var(--denied-pill);
  color: var(--denied);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}
.form-ok { border-color: var(--ok); background: var(--ok-pill); color: var(--ok); }
.form-note { border-color: var(--hairline); background: var(--surface); color: var(--secondary); }

.banner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
  margin: var(--s4) var(--s6) 0;
  padding: var(--s2) var(--s3);
  border: var(--hairline-w) solid var(--pending-dot);
  border-radius: var(--radius);
  background: var(--pending-row);
  color: var(--pending-text);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}
.banner .btn-ghost { margin-left: auto; flex: none; color: var(--pending-text); border-color: var(--pending-dot); }

.empty {
  margin: var(--s4) 0 0;
  padding: var(--s5);
  border: var(--hairline-w) dashed var(--hairline);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}
.empty-inline { margin: 0 0 var(--s3); padding: var(--s3); font-size: var(--fs-caption); }
.empty-link {
  display: inline-block;
  margin-top: var(--s2);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  text-decoration: none;
}
.empty-link:hover { color: var(--accent-hover); }

/* Error with a way forward: what failed, then one button that retries. */
.error-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin: var(--s4) 0 0;
  padding: var(--s4);
  border: var(--hairline-w) solid var(--denied);
  border-radius: var(--radius);
  background: var(--denied-pill);
  color: var(--denied);
  font-size: var(--fs-body-sm);
}
.error-state p { margin: 0; flex: 1 1 240px; overflow-wrap: anywhere; }
.error-state .btn-ghost { color: var(--denied); border-color: var(--denied); }

/* Loading: a few rows of the table's own geometry, dimmed. Never a spinner
   over an empty box — the shape of what is coming is the message. */
.skeleton { display: flex; flex-direction: column; }
.skeleton-row {
  display: grid;
  grid-template-columns: 36px 16px minmax(0, 1fr) 120px 96px;
  gap: var(--s3);
  align-items: center;
  height: var(--row-h);
  padding: 0 var(--s4);
  border-bottom: var(--hairline-w) solid var(--grid-line);
}
.skeleton-bar { height: 10px; border-radius: 4px; background: var(--raised); }
.skeleton-bar.w-40 { width: 40%; }
.skeleton-bar.w-70 { width: 70%; }
.skeleton-bar.round { width: 12px; height: 12px; border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton-bar { animation: pulse 1.2s var(--ease-move) infinite; }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
}

/* ---- sign in ---------------------------------------------------------------- */
.signin {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s7) var(--s5);
  background: var(--ground);
}
.signin-card {
  width: 100%;
  max-width: 400px;
  padding: var(--s6);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}
.brand { display: flex; align-items: center; gap: var(--s3); color: var(--ink); min-width: 0; }
.brand-mark { width: 22px; height: 22px; color: var(--accent); flex: none; }
.brand-word {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-lg { margin-bottom: var(--s5); }
.brand-lg .brand-mark { width: 28px; height: 28px; }
.signin-title { margin: 0; font-size: var(--fs-h2); font-weight: 600; }
.signin-sub { margin: 6px 0 var(--s5); color: var(--secondary); font-size: var(--fs-body-sm); }
.signin-foot { margin: var(--s4) 0 0; font-size: var(--fs-eyebrow); color: var(--muted); line-height: 1.6; }
.theme-toggle-float { position: absolute; top: var(--s5); right: var(--s5); }

/* ---- shell ------------------------------------------------------------------ */
.shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  height: 100vh;
  background: var(--ground);
}

.rail {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s4) var(--s3);
  border-right: var(--hairline-w) solid var(--hairline);
  background: var(--surface);
  min-height: 0;
  overflow-y: auto;
}
.rail-brand { display: flex; align-items: center; gap: var(--s3); height: var(--control-h); padding: 0 var(--s3); }
.rail-brand .brand-mark { width: 22px; height: 22px; color: var(--accent); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: var(--control-h);
  padding: 0 var(--s3);
  border-radius: var(--radius);
  color: var(--secondary);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  text-decoration: none;
}
.nav-item svg { width: var(--icon); height: var(--icon); flex: none; }
.nav-item:hover { background: var(--raised); color: var(--ink); }
.nav-item.active {
  background: var(--raised);
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav-label { flex-grow: 1; }
.nav-group { margin-top: var(--s2); padding: var(--s2) var(--s3) var(--s1); }

.rail-spacer { flex-grow: 1; min-height: var(--s2); }
.rail-foot { display: flex; flex-direction: column; gap: var(--s2); }
.host-card {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 36px;
  padding: var(--s2) var(--s3);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  color: var(--secondary);
}
.host-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px var(--s2);
  margin: 0;
  padding: var(--s2) var(--s3) 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.rail-legend span { display: inline-flex; align-items: center; gap: var(--s2); }

.scrim { position: fixed; inset: 0; z-index: 30; background: var(--scrim); }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.topbar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: var(--topbar-h);
  min-width: 0;
  flex: none;
  padding: 0 var(--s6);
  border-bottom: var(--hairline-w) solid var(--hairline);
  background: var(--surface);
}
.topbar-spacer { flex-grow: 1; }
.menu-btn { display: none; }
.stamp { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }

/* Tenant switcher: a button that reads "Workspace · name", and a menu of
   every workspace this account may see. */
/* The switch is a shrinkable flex item and the button never grows past
   it, so at any width the name clips with an ellipsis instead of running
   under the search field beside it. */
.tenant-switch { position: relative; flex: 0 1 auto; min-width: 120px; max-width: 300px; }
.tenant-btn {
  display: flex;
  align-items: center;
  gap: var(--s2);
  height: var(--control-h);
  width: 100%;
  max-width: 100%;
  padding: 0 var(--s3);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.tenant-btn:hover { border-color: var(--accent); }
.tenant-btn .th { flex: none; }
.tenant-btn svg { width: 12px; height: 12px; flex: none; color: var(--muted); }
.tenant-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: var(--fs-body-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu {
  position: absolute;
  top: calc(100% + var(--s1));
  left: 0;
  z-index: 40;
  min-width: 280px;
  max-width: 360px;
  padding: var(--s2);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.menu-head { padding: var(--s2) var(--s3); }
.menu-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: var(--control-h);
  padding: var(--s2) var(--s3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--secondary);
  text-align: left;
  text-decoration: none;
  font-size: var(--fs-body-sm);
}
.menu-item:hover { background: var(--raised); color: var(--ink); }
.menu-item.current { color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); background: var(--raised); }
.menu-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-item-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item-sub { font-family: var(--font-mono); font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-sep { height: var(--hairline-w); margin: var(--s2) 0; background: var(--hairline); }
.menu-note { margin: 0; padding: var(--s2) var(--s3); font-size: var(--fs-eyebrow); color: var(--muted); line-height: 1.5; }

.search {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: 0 1 380px;
  min-width: 160px;
  height: var(--control-h);
  padding: 0 var(--s3);
  border: var(--hairline-w) solid var(--control-border);
  border-radius: var(--radius);
  background: var(--ground);
  color: var(--muted);
}
.search svg { width: var(--icon); height: var(--icon); flex: none; }
/* The container carries the 2 px focus ring (the input inside has none),
   so the ring is the same one every other control shows. */
.search:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.search-input { height: auto; min-width: 0; border: 0; padding: 0; background: transparent; }
.search-input:hover { border: 0; }
.search-input:focus { outline: none; }
.search-input::-webkit-search-cancel-button { appearance: none; }
.search .kbd { flex: none; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: var(--control-h);
  padding: 0 var(--s3);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius);
  background: transparent;
  color: var(--secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { width: 14px; height: 14px; }

.session { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; }
.session-user { font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--ink); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---- content + views ------------------------------------------------------------ */
.content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.view {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s5) var(--s6) var(--s7);
}
.view-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s4); min-height: var(--control-h); }
.view-title { margin: 0; font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.01em; }
.view-count { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.04em; color: var(--muted); }
.view-lede { margin: calc(var(--s3) * -1) 0 var(--s4); max-width: 70ch; color: var(--secondary); font-size: var(--fs-body-sm); line-height: 1.6; }
.spacer { flex-grow: 1; }

/* ---- tiles ----------------------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.tile {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-height: 92px;
  padding: var(--s3) var(--s4);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
a.tile:hover { border-color: var(--accent); }
.tile-pending { border-color: var(--pending-dot); background: var(--pending-row); }
.tile-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-h1); line-height: var(--lh-display); color: var(--ink); }
.tile-unit { font-size: var(--fs-caption); color: var(--muted); }
.tile-foot { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

/* ---- panels --------------------------------------------------------------- */
.panel {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}
.panel-head { display: flex; align-items: center; gap: var(--s3); min-height: 32px; flex-wrap: wrap; }
.panel-title { margin: 0; font-size: var(--fs-body-lg); font-weight: 600; }
.panel-note { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.06em; color: var(--muted); }
.panel-copy { margin: 0; color: var(--secondary); font-size: var(--fs-body-sm); line-height: 1.6; max-width: 70ch; }
.form-panel .panel-head { margin-bottom: var(--s1); }
.stack { display: flex; flex-direction: column; gap: var(--s5); }

/* A list of devices outside the table (overview, wizard, pending queue). */
.checkins, .queue { display: flex; flex-direction: column; gap: var(--s2); }
.checkin {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: var(--s3);
  align-items: center;
  min-height: var(--row-h);
  padding: var(--s2) var(--s3);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}
.checkin-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.checkin-name { font-size: var(--fs-body-sm); font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.checkin-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.checkin-when { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-eyebrow); color: var(--secondary); text-align: right; white-space: nowrap; }
.checkin.is-pending { border-color: var(--pending-dot); background: var(--pending-row); }
.cell-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }

/* ---- toolbar + filters ----------------------------------------------------- */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.toolbar .select { min-width: 0; }
.toolbar .input { width: auto; min-width: 0; flex: 1 1 160px; max-width: 260px; }
.filter-summary { font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--muted); }

.bulkbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s3);
  padding: var(--s1) var(--s2) var(--s1) var(--s3);
  border: var(--hairline-w) solid var(--accent-edge);
  border-radius: var(--radius);
  background: var(--accent-pill);
  color: var(--accent);
}
.bulk-count { font-weight: 600; font-size: var(--fs-caption); margin-right: var(--s1); }
.bulkbar .btn-ghost { border-color: transparent; color: var(--accent); }
.bulkbar .btn-ghost:hover { border-color: var(--accent); }
.bulkbar .btn-ghost.btn-danger-ghost { color: var(--denied); }

/* ---- tables ---------------------------------------------------------------- */
.table-wrap {
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  overflow-x: auto;
  min-width: 0;
}
.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: var(--row-h);
  text-align: left;
  padding: 0 var(--s3);
  background: var(--surface);
  border-bottom: var(--hairline-w) solid var(--hairline);
  vertical-align: middle;
}
.table tbody td {
  height: var(--row-h);
  padding: 0 var(--s3);
  border-bottom: var(--hairline-w) solid var(--grid-line);
  font-size: var(--fs-caption);
  color: var(--secondary);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--raised); }
.table tbody tr.is-selected td { background: var(--selected-row); }
.table tbody tr.is-cursor td { box-shadow: inset 0 -1px 0 var(--accent-edge); }
.table tbody tr.is-cursor td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.table tbody tr.is-open td { background: var(--raised); }
.table tbody tr.is-open td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.table tbody tr.is-pending td { background: var(--pending-row); }
.table tbody tr.is-fallback td { background: var(--denied-pill); color: var(--secondary); font-size: var(--fs-caption); }
.table td.mono, .cell-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cell-strong { color: var(--ink); font-weight: 500; }
.cell-muted { color: var(--muted); }
.cell-wrap { white-space: normal !important; overflow-wrap: anywhere; }
.table-simple { min-width: 560px; }
.table-simple tbody td { white-space: normal; overflow-wrap: anywhere; }

/* Devices table geometry. Auto layout with the name cell as the one
   flexible column (width 100% / max-width 0, floored at 220 px): every
   other column keeps its stated width and the name takes the rest, so
   the primary label is never the thing that gets squeezed. When rows are
   grouped by device group the Group column is redundant with the group
   header and is dropped. */
.table-devices { min-width: 1180px; table-layout: auto; }
.table-devices .cell-name-td { width: 100%; min-width: 220px; max-width: 0; }
.by-group .table-devices { min-width: 1030px; }
.by-group .col-tags, .by-group .cell-tags { display: none; }
.col-check    { width: 44px; }
.col-glyph    { width: 30px; }
.col-platform { width: 128px; }
.col-tags     { width: 150px; }
.col-taglist  { width: 170px; }
.col-seen     { width: 100px; }
.col-first    { width: 108px; }
.col-strategy { width: 150px; }
.col-actions  { width: 196px; }
.table-devices tbody tr { cursor: default; }
.cell-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.3; }
.cell-name-primary { font-size: var(--fs-body-sm); font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-name-secondary { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-name-secondary .sep { margin: 0 var(--s1); }
.only-sm { display: none; }
.row-open-btn {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  width: 100%;
  min-height: var(--row-h);
  display: flex;
  align-items: center;
  cursor: pointer;
}
.table-devices tbody td .cell-actions .btn-sm { height: 32px; }

/* Group header rows */
.table tbody tr.group-row td {
  height: 36px;
  padding: 0;
  background: var(--ground);
  border-top: var(--hairline-w) solid var(--hairline);
  border-bottom: var(--hairline-w) solid var(--hairline);
}
.table tbody tr.group-row:hover td { background: var(--ground); }
.group-btn {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  height: 36px;
  padding: 0 var(--s3);
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: var(--fs-caption);
  font-weight: 600;
}
.group-btn svg { width: 12px; height: 12px; color: var(--secondary); flex: none; }
.group-btn[aria-expanded="false"] svg { transform: rotate(-90deg); }
.group-btn .caption { font-weight: 400; }
.group-btn .group-meta { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); font-weight: 400; }

.pager {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-top: var(--hairline-w) solid var(--hairline);
}
.pager-label { font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--muted); }
.pager .spacer { flex-grow: 1; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin: var(--s3) 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Devices layout: the table and the detail pane side by side. */
.devices-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: start; }
.devices-layout.has-pane { grid-template-columns: minmax(0, 1fr) var(--pane-w); }
.devices-main { min-width: 0; }
/* Beside the open pane the table gives up the columns the pane repeats. */
.has-pane .table-devices { min-width: 0; }
.has-pane .col-first, .has-pane .cell-first, .has-pane .col-strategy, .has-pane .cell-strategy,
.has-pane .col-taglist, .has-pane .cell-taglist { display: none; }
.has-pane .table-devices .cell-actions { flex-wrap: nowrap; }

/* ---- note editing ------------------------------------------------------------- */
.textarea {
  height: auto;
  min-height: 120px;
  padding: var(--s2) var(--s3);
  line-height: var(--lh-body);
  resize: vertical;
  font-family: var(--font-sans);
}
.note-view {
  margin: 0;
  padding: var(--s2) var(--s3);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius);
  background: var(--ground);
  color: var(--ink);
  font-size: var(--fs-caption);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 200px;
  overflow-y: auto;
}
.note-view.is-empty { color: var(--muted); font-style: italic; }
.note-form { display: flex; flex-direction: column; gap: var(--s2); }
.note-foot { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.note-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- detail pane -------------------------------------------------------------- */
.pane {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s4);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  position: sticky;
  top: 0;
  max-height: calc(100vh - var(--topbar-h) - var(--s8));
  overflow-y: auto;
}
.pane-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: start; }
.pane-title { margin: 0; font-size: var(--fs-h3); font-weight: 600; overflow-wrap: anywhere; }
.pane-sub { font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--muted); overflow-wrap: anywhere; }
.pane-state { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.pane-state-text { font-size: var(--fs-caption); color: var(--secondary); }
.pane-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.pane-actions .btn, .pane-actions .btn-ghost { flex: 1 1 auto; }
.pane-section { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s3); border-top: var(--hairline-w) solid var(--hairline); }
.pane-section .th { margin-bottom: var(--s1); }

.facts { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.fact { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s2); align-items: baseline; }
.fact dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.fact dd { margin: 0; font-size: var(--fs-caption); color: var(--ink); overflow-wrap: anywhere; }
.fact dd.mono { font-family: var(--font-mono); }

.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
  padding: var(--s2) 0;
  border-bottom: var(--hairline-w) solid var(--grid-line);
}
.timeline li:last-child { border-bottom: 0; }
.timeline .glyph { margin-top: 3px; }
.timeline-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.timeline-what { font-size: var(--fs-caption); color: var(--ink); overflow-wrap: anywhere; }
.timeline-when { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

/* ---- pending queue ------------------------------------------------------------ */
.queue-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: var(--s3);
  align-items: center;
  min-height: 60px;
  padding: var(--s2) var(--s3);
  border: var(--hairline-w) solid var(--pending-dot);
  border-radius: var(--radius);
  background: var(--pending-row);
}
.queue-row.is-cursor { box-shadow: 0 0 0 2px var(--accent); }
.queue-row.is-done { border-color: var(--hairline); background: var(--surface); }
.queue-actions { display: flex; gap: var(--s2); }

/* ---- split (table + form) --------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s5); align-items: start; }
.table-note { margin: var(--s3) 2px 0; font-size: var(--fs-caption); color: var(--muted); line-height: 1.6; max-width: 80ch; }

/* ---- one-time secret reveal -------------------------------------------------- */
.reveal { border-color: var(--pending-dot); background: var(--pending-row); margin-bottom: var(--s4); }
.reveal-warn { margin: 0; color: var(--pending-text); font-size: var(--fs-caption); line-height: 1.6; }
.reveal-row { display: flex; gap: var(--s2); align-items: center; }
.reveal-row .input { flex: 1 1 auto; min-width: 0; }
.reveal-copied { margin: 0; }
.cmds { display: flex; flex-direction: column; gap: var(--s2); }
.cmd { display: flex; flex-direction: column; gap: var(--s1); }
.cmd-line {
  display: block;
  padding: var(--s2) var(--s3);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius);
  background: var(--ground);
  color: var(--secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  line-height: 1.6;
  overflow-x: auto;
  overflow-wrap: anywhere;
}

/* ---- strategy editor ----------------------------------------------------------- */
.settings-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s3); }
.setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s1) var(--s3);
  align-items: center;
  padding: var(--s2) var(--s3);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius);
  background: var(--ground);
}
.setting-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.setting-key { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink); overflow-wrap: anywhere; }
.setting-value { grid-column: 1; font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--muted); overflow-wrap: anywhere; }
.setting .btn-sm { grid-column: 2; grid-row: 1 / span 2; }
.danger-note { color: var(--denied); }
.assign-block { border-top: var(--hairline-w) solid var(--hairline); margin-top: var(--s4); padding-top: var(--s4); }

/* ---- audit ------------------------------------------------------------------ */
.log-list {
  display: flex;
  flex-direction: column;
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.log {
  display: grid;
  grid-template-columns: 150px 84px minmax(0, 1fr);
  gap: var(--s3);
  align-items: baseline;
  min-height: 40px;
  padding: var(--s2) var(--s4);
  border-bottom: var(--hairline-w) solid var(--grid-line);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-eyebrow);
  color: var(--secondary);
}
.log:last-child { border-bottom: 0; }
.log-time { color: var(--muted); white-space: nowrap; }
.log-kind { letter-spacing: 0.08em; text-transform: uppercase; }
.log-text { color: var(--secondary); overflow-wrap: anywhere; }
.log-text .log-actor { color: var(--ink); }
.log-text .log-target { color: var(--ink); }

/* ---- dialogs ---------------------------------------------------------------------- */
.dialog {
  padding: 0;
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  max-width: 440px;
  width: calc(100% - 40px);
  box-shadow: var(--shadow);
}
.dialog::backdrop { background: var(--scrim); }
.dialog-body { padding: var(--s5); }
.dialog-title { margin: 0 0 var(--s2); font-size: var(--fs-h3); font-weight: 600; }
.dialog-text { margin: 0 0 var(--s2); font-size: var(--fs-body-sm); color: var(--secondary); overflow-wrap: anywhere; line-height: 1.6; }
.dialog-note { margin: 0 0 var(--s4); font-size: var(--fs-caption); color: var(--muted); line-height: 1.6; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--s2); }
.dialog-list {
  margin: 0 0 var(--s3);
  padding: var(--s2) var(--s3) var(--s2) var(--s6);
  border: var(--hairline-w) solid var(--denied);
  border-radius: var(--radius);
  background: var(--denied-pill);
  color: var(--denied);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  max-height: 180px;
  overflow-y: auto;
}
.dialog-item { overflow-wrap: anywhere; }

/* ---- settings / MFA ----------------------------------------------------------- */
.steps { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s4); }
.step { display: flex; flex-direction: column; gap: var(--s2); }
.step-title { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); }
/* The code is always dark-on-white in both themes: a scanner needs the
   contrast, and a theme-aware QR code is one half the users cannot scan. */
.qr-frame {
  align-self: flex-start;
  padding: var(--s3);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius);
  background: var(--qr-paper);
  line-height: 0;
}
.mfa-uri { margin-top: var(--s2); font-size: var(--fs-eyebrow); }
.mfa-enrolment { margin-top: var(--s1); }

/* ---- first-run setup --------------------------------------------------------- */
.setup { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.setup-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s2);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}
.setup-step {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: var(--s3);
  align-items: center;
  width: 100%;
  min-height: var(--control-h);
  padding: var(--s2) var(--s3);
  border: var(--hairline-w) solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--secondary);
  text-align: left;
}
.setup-step:hover { border-color: var(--hairline); color: var(--ink); }
.setup-step.active { border-color: var(--hairline); background: var(--raised); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.setup-step-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setup-step-index { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.setup-step.active .setup-step-index { color: var(--accent); }
.setup-step-name { font-size: var(--fs-body-sm); overflow-wrap: anywhere; }
.setup-step.done .setup-step-name { color: var(--secondary); }
.setup-step.done .setup-step-index { color: var(--ok); }
.setup-stage { display: flex; flex-direction: column; gap: var(--s4); max-width: 780px; }
.setup-panel { gap: var(--s4); }
.setup-panel .panel-note { margin-left: auto; }
.setup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s1); }
.setup-optional { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
.setup-optional .panel-copy { margin: 6px 0 var(--s3); font-size: var(--fs-caption); }
.setup-fresh { border-color: var(--pending-dot); background: var(--pending-row); }

/* ---- overview: getting started ---------------------------------------------- */
.started { margin-bottom: var(--s5); }
.started-list { list-style: none; margin: var(--s1) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.started-item {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: var(--s3);
  align-items: center;
  min-height: var(--row-h);
  padding: var(--s2) var(--s3);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius);
  font-size: var(--fs-body-sm);
  color: var(--secondary);
}
.started-item-name { min-width: 0; overflow-wrap: anywhere; }
.started-item-state { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.started-item.done .started-item-state { color: var(--ok); }
.started-item.done .started-item-name { color: var(--muted); }

/* ---- motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .btn, .btn-ghost, .icon-btn, .nav-item, .theme-toggle, .input, .select, .search, .tenant-btn, .menu-item, .tile, .group-btn svg {
    transition: background-color var(--t-ui) var(--ease-move), color var(--t-ui) var(--ease-move),
                border-color var(--t-ui) var(--ease-move), transform var(--t-ui) var(--ease-move);
  }
  .pane { animation: pane-in var(--t-ui) var(--ease-enter); }
  .menu { animation: menu-in var(--t-ui) var(--ease-enter); }
  @keyframes pane-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- responsive --------------------------------------------------------------- */
@media (max-width: 1280px) {
  .stamp { display: none; }
  .search { flex: 1 1 160px; min-width: 120px; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .devices-layout.has-pane { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1100px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .setup { grid-template-columns: minmax(0, 1fr); }
  .setup-optional { grid-template-columns: minmax(0, 1fr); }
  .devices-layout.has-pane { grid-template-columns: minmax(0, 1fr); }
  .pane {
    position: fixed;
    inset: var(--topbar-h) 0 0 auto;
    z-index: 35;
    width: min(100%, 420px);
    max-height: none;
    border-radius: 0;
    border-width: 0 0 0 var(--hairline-w);
    box-shadow: var(--shadow);
  }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(84vw, 300px);
    transform: translateX(-100%);
    border-right: var(--hairline-w) solid var(--hairline);
    box-shadow: none;
  }
  .rail.is-open { transform: none; box-shadow: var(--shadow); }
  @media (prefers-reduced-motion: no-preference) {
    .rail { transition: transform var(--t-ui) var(--ease-move); }
  }
  .menu-btn { display: inline-flex; }
  .topbar { padding: 0 var(--s3); gap: var(--s2); }
  .tenant-switch { flex: 0 1 auto; min-width: 0; }
  .tenant-btn { max-width: 100%; padding: 0 var(--s2); }
  .tenant-btn .th { display: none; }
  .session, .stamp, #refresh { display: none; }
  .search { flex: 1 1 96px; min-width: 96px; padding: 0 var(--s2); }
  .search .kbd { display: none; }
  .theme-toggle { padding: 0 var(--s2); }
  .theme-toggle .theme-toggle-label { display: none; }
  #signout { width: var(--control-h); padding: 0; }
  #signout .signout-label { display: none; }
  #signout svg { width: var(--icon); height: var(--icon); }
  .view { padding: var(--s4); }
  .banner { margin: var(--s3) var(--s4) 0; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pane { inset: 0; width: 100%; border: 0; }
  .menu { max-width: calc(100vw - 32px); }
}
@media (max-width: 640px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Four columns: select, glyph, name, actions. Auto layout with the name
     cell at width 100% / max-width 0 makes it the one flexible column and
     keeps its ellipsis, so the table is exactly as wide as its wrap. */
  .table-devices { min-width: 0; }
  .col-platform, .col-first, .col-strategy, .col-tags, .col-taglist, .col-seen,
  .table-devices .cell-platform, .table-devices .cell-first, .table-devices .cell-strategy, .table-devices .cell-tags, .table-devices .cell-taglist, .table-devices .cell-seen { display: none; }
  .table-devices thead th, .table-devices tbody td { padding-left: var(--s2); padding-right: var(--s2); }
  .col-check { width: 36px; }
  .col-glyph { width: 20px; }
  .col-actions { width: 92px; }
  .table-devices .cell-name-td { min-width: 0; }
  .table-devices .cell-actions .btn-sm { min-width: 0; padding: 0 var(--s2); }
  .only-sm { display: inline; }
  .cell-name-secondary { white-space: normal; }
  .table-devices .cell-actions { flex-direction: column; align-items: stretch; gap: var(--s1); }
  .table-devices .cell-actions .btn-sm { width: 100%; height: 32px; }
  .table-devices tbody td { height: auto; min-height: var(--row-h); padding-top: var(--s1); padding-bottom: var(--s1); }
  .table-simple { min-width: 0; }
  .table-simple .col-hide-sm, .table-simple .cell-hide-sm { display: none; }
  .log { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .queue-row { grid-template-columns: 12px minmax(0, 1fr); }
  .queue-actions { grid-column: 2; }
  .signout-label { display: none; }
  .view-head .btn-ghost { flex: 1 1 100%; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions .btn, .dialog-actions .btn-ghost { width: 100%; }
}

/* ---- tone utilities, last so they win over component colours ------------ */
.tone-ok, .tile-value.tone-ok, .panel-note.tone-ok { color: var(--ok); }
.tone-pending, .tile-value.tone-pending, .panel-note.tone-pending { color: var(--pending-text); }
.tone-denied, .tile-value.tone-denied { color: var(--denied); }
.tone-accent { color: var(--accent); }
.tone-muted { color: var(--muted); }