/*
 * Console: Apple-style interface (apple-design skill).
 * System font with size-specific tracking, translucent chrome over scrolling
 * content, 16px cards, capsule buttons that respond on press, sheets that grow
 * from the button that opened them. Status colours come from the dataviz
 * status palette and always travel with an icon and a label.
 */

:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --fill: rgba(120, 120, 128, 0.12);
  --fill-strong: rgba(120, 120, 128, 0.2);
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #8e8e93;
  --hairline: rgba(0, 0, 0, 0.08);
  --hairline-strong: rgba(0, 0, 0, 0.14);
  --accent: #0071e3;
  --accent-ink: #ffffff;
  --accent-soft: rgba(0, 113, 227, 0.1);
  --sidebar: rgba(236, 236, 240, 0.78);
  --chrome: rgba(245, 245, 247, 0.72);
  --sheet: rgba(255, 255, 255, 0.86);
  --scrim: rgba(0, 0, 0, 0.28);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  --shadow-sheet: 0 24px 64px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.08);

  /* dataviz status palette, fixed in both modes */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --info: #0071e3;
  --neutral: #8e8e93;
  --good-ink: #006300;

  --radius-card: 16px;
  --radius-control: 10px;
  --sidebar-w: 15rem;
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); /* critically damped feel */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000;
    --surface: #1c1c1e;
    --surface-2: #232325;
    --fill: rgba(118, 118, 128, 0.24);
    --fill-strong: rgba(118, 118, 128, 0.34);
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --ink-3: #8e8e93;
    --hairline: rgba(255, 255, 255, 0.09);
    --hairline-strong: rgba(255, 255, 255, 0.16);
    --accent: #0a84ff;
    --accent-soft: rgba(10, 132, 255, 0.18);
    --sidebar: rgba(28, 28, 30, 0.72);
    --chrome: rgba(0, 0, 0, 0.66);
    --sheet: rgba(44, 44, 46, 0.86);
    --scrim: rgba(0, 0, 0, 0.5);
    --shadow-card: 0 0 0 0.5px rgba(255, 255, 255, 0.06);
    --shadow-sheet: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.1);
    --info: #0a84ff;
    --good-ink: #30d158;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-2: #232325;
  --fill: rgba(118, 118, 128, 0.24);
  --fill-strong: rgba(118, 118, 128, 0.34);
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --ink-3: #8e8e93;
  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.18);
  --sidebar: rgba(28, 28, 30, 0.72);
  --chrome: rgba(0, 0, 0, 0.66);
  --sheet: rgba(44, 44, 46, 0.86);
  --scrim: rgba(0, 0, 0, 0.5);
  --shadow-card: 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  --shadow-sheet: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  --info: #0a84ff;
  --good-ink: #30d158;
}

/* ── Base ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 0.875rem/1.45 var(--font);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; border-radius: 6px; }

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

.icon { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.mono { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.nowrap { white-space: nowrap; }

/* ── Shell: sidebar + content ─────────────────────────────────────── */

.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1.25rem 0.75rem 1rem;
  background: var(--sidebar);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border-right: 0.5px solid var(--hairline-strong);
}

.brand { display: flex; align-items: center; gap: 0.625rem; padding: 0 0.5rem 1.25rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 1.875rem; height: 1.875rem; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #34c759, #0a7d3b);
  color: #fff; box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.4);
}
.brand-mark .icon { width: 1.1rem; height: 1.1rem; stroke-width: 2; }
.brand-name { font: 600 0.9375rem/1.2 var(--font-display); letter-spacing: -0.012em; }
.brand-sub { display: block; font-size: 0.6875rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0.01em; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.4375rem 0.625rem; border-radius: 8px;
  color: var(--ink); font-weight: 500; letter-spacing: -0.01em;
  transition: background-color 120ms ease-out, transform 100ms ease-out;
}
.nav a:hover { background: var(--fill); text-decoration: none; }
.nav a:active { transform: scale(0.98); }
.nav a .icon { color: var(--accent); }
.nav a[aria-current="page"] { background: var(--accent-soft); }
.nav a .count {
  margin-left: auto; min-width: 1.25rem; padding: 0 0.375rem; border-radius: 999px;
  font-size: 0.6875rem; font-weight: 600; line-height: 1.25rem; text-align: center;
  background: var(--critical); color: #fff;
}
.nav-label { padding: 1rem 0.625rem 0.375rem; font-size: 0.6875rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0.02em; }

.sidebar-foot { margin-top: auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.5rem 0; border-top: 0.5px solid var(--hairline); }
.avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--fill-strong); font-size: 0.75rem; font-weight: 600; flex: none; }
.sidebar-foot .who { min-width: 0; line-height: 1.25; }
.sidebar-foot .me { min-width: 0; }
.sidebar-foot .who strong { display: block; font-weight: 600; font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-foot .who span { font-size: 0.75rem; color: var(--ink-2); }
.sidebar-foot form { margin-left: auto; }

.main { min-width: 0; }

/* Translucent toolbar: content scrolls underneath it. */
.toolbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 3.25rem; padding: 0.5rem 2rem;
  background: var(--chrome);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
/* Scroll-edge effect instead of a hard divider: only once content is under the bar. */
.toolbar::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 0.5px;
  background: var(--hairline-strong); opacity: 0; transition: opacity 200ms ease;
}
.toolbar[data-scrolled]::after { opacity: 1; }
.toolbar-title { font-weight: 600; letter-spacing: -0.012em; opacity: 0; transform: translateY(4px); transition: opacity 200ms ease, transform 300ms var(--ease-spring); }
.toolbar[data-scrolled] .toolbar-title { opacity: 1; transform: none; }
.toolbar .crumbs { display: flex; align-items: center; gap: 0.375rem; color: var(--ink-2); font-size: 0.8125rem; }
.toolbar .crumbs a { color: var(--ink-2); }
.toolbar .spacer { flex: 1; }

.page { max-width: 76rem; padding: 0.5rem 2rem 4rem; }

/* Large title, tight leading, negative tracking as it grows. */
.page-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 1rem 1.5rem; margin: 0.25rem 0 1.75rem; }
.page-head .titles { min-width: 0; flex: 1 1 22rem; }
.eyebrow { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.25rem; font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); }
.large-title { margin: 0; font: 700 clamp(1.75rem, 1.4rem + 1.2vw, 2.125rem)/1.1 var(--font-display); letter-spacing: -0.024em; overflow-wrap: anywhere; }
.subtitle { margin: 0.375rem 0 0; color: var(--ink-2); font-size: 0.9375rem; letter-spacing: -0.012em; }
.subtitle a { color: inherit; text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.section-title { display: flex; align-items: baseline; gap: 0.75rem; margin: 2.25rem 0 0.75rem; font: 600 1.25rem/1.25 var(--font-display); letter-spacing: -0.018em; }
.section-title .aside { margin-left: auto; font: 400 0.8125rem/1 var(--font); letter-spacing: 0; color: var(--ink-2); }
.section-title:first-child { margin-top: 0; }

/* ── Cards & grids ────────────────────────────────────────────────── */

.card { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.card-pad { padding: 1.125rem 1.25rem; }
.card-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.25rem; border-bottom: 0.5px solid var(--hairline); }
.card-head h3 { margin: 0; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.012em; }
.card-head .aside { margin-left: auto; font-size: 0.8125rem; color: var(--ink-2); }
.card-head a.aside { color: var(--accent); }
.card-title { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.625rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.012em; }
.card-title .aside { margin-left: auto; }

.grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.split { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; }

/* Stat tiles: the number is the chart. */
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.tile { padding: 1rem 1.25rem 1.125rem; }
.tile-label { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); }
.tile-value { margin-top: 0.375rem; font: 600 2rem/1.05 var(--font-display); letter-spacing: -0.026em; }
.tile-value small { font-size: 1rem; font-weight: 500; color: var(--ink-2); letter-spacing: -0.01em; }
.tile-foot { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; font-size: 0.8125rem; color: var(--ink-2); }
a.tile { color: inherit; transition: transform 100ms ease-out; }
a.tile:hover { text-decoration: none; }
a.tile:active { transform: scale(0.985); }

/* ── Status: icon + label, colour never alone ─────────────────────── */

.status { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 500; white-space: nowrap; color: var(--ink); }
.status .glyph { width: 0.875rem; height: 0.875rem; flex: none; }
.status[data-tone="good"] .glyph { color: var(--good); }
.status[data-tone="warning"] .glyph { color: var(--warning); }
.status[data-tone="serious"] .glyph { color: var(--serious); }
.status[data-tone="critical"] .glyph { color: var(--critical); }
.status[data-tone="info"] .glyph { color: var(--info); }
.status[data-tone="neutral"] .glyph { color: var(--neutral); }

.pill { padding: 0.1875rem 0.625rem 0.1875rem 0.5rem; border-radius: 999px; font-size: 0.8125rem; background: var(--fill); }
.pill[data-tone="good"] { background: color-mix(in srgb, var(--good) 13%, transparent); }
.pill[data-tone="warning"] { background: color-mix(in srgb, var(--warning) 18%, transparent); }
.pill[data-tone="serious"] { background: color-mix(in srgb, var(--serious) 16%, transparent); }
.pill[data-tone="critical"] { background: color-mix(in srgb, var(--critical) 13%, transparent); }
.pill[data-tone="info"] { background: color-mix(in srgb, var(--info) 11%, transparent); }
.pill-lg { padding: 0.3125rem 0.875rem 0.3125rem 0.6875rem; font-size: 0.875rem; }

.tag { display: inline-block; padding: 0.0625rem 0.4375rem; border-radius: 6px; background: var(--fill); font-size: 0.75rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }

/* ── Lists (reflow on phones; rows are whole-row links) ───────────── */

.list { list-style: none; margin: 0; padding: 0; }
.list > li + li { border-top: 0.5px solid var(--hairline); }
.row {
  display: grid; align-items: center; gap: 0.25rem 1rem;
  padding: 0.75rem 1.25rem; color: inherit; position: relative;
  transition: background-color 120ms ease-out;
}
a.row:hover { background: var(--surface-2); text-decoration: none; }
a.row:active { background: var(--fill); }
.row .primary { min-width: 0; }
.row .primary strong { display: block; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .primary span { display: block; font-size: 0.8125rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .primary .tag { display: inline-block; vertical-align: 1px; margin-left: 0.25rem; font-size: 0.6875rem; color: var(--ink-2); }
.row .cell { font-size: 0.8125rem; color: var(--ink-2); min-width: 0; }
.row .cell strong { color: var(--ink); font-weight: 500; }
.row .chev { color: var(--ink-3); justify-self: end; }
.list-head { display: grid; gap: 1rem; padding: 0.5rem 1.25rem; font-size: 0.75rem; font-weight: 500; color: var(--ink-3); border-bottom: 0.5px solid var(--hairline); }

.rows-deployments .row, .rows-deployments.list-head { grid-template-columns: minmax(0, 2.2fr) minmax(7.5rem, 1fr) minmax(4rem, 0.6fr) minmax(4.5rem, 0.6fr) minmax(6rem, 0.9fr) 1rem; }
.rows-clients .row, .rows-clients.list-head { grid-template-columns: minmax(0, 2.2fr) minmax(8rem, 1fr) minmax(5rem, 0.6fr) minmax(5rem, 0.6fr) 1rem; }
.rows-attention .row { grid-template-columns: minmax(0, 1fr) auto 1rem; }
.rows-renewals .row { grid-template-columns: minmax(0, 1fr) auto; }
.rows-licences .row { grid-template-columns: minmax(0, 1.4fr) minmax(7rem, 1fr) minmax(6rem, 0.8fr) minmax(6rem, 0.8fr) 1rem; }
.issues { display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: flex-end; }

.empty { padding: 2.5rem 1.25rem; text-align: center; color: var(--ink-2); }
.empty .icon { width: 2rem; height: 2rem; color: var(--good); margin-bottom: 0.5rem; stroke-width: 1.5; }
.empty strong { display: block; color: var(--ink); font-size: 0.9375rem; margin-bottom: 0.125rem; }

/* Activity feed */
.feed { list-style: none; margin: 0; padding: 0.25rem 0; }
.feed li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: start; padding: 0.625rem 1.25rem; }
.feed .dot { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--ink-2); }
.feed .dot .icon { width: 0.875rem; height: 0.875rem; stroke-width: 2; }
.feed .dot[data-kind="deployment"] { background: var(--accent-soft); color: var(--accent); }
.feed .what { min-width: 0; overflow-wrap: anywhere; }
.feed .what a { color: inherit; }
.feed .who { display: block; font-size: 0.75rem; color: var(--ink-2); }
.feed time { font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; }

/* Key–value details */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: 0; }
.facts dt, .facts dd { padding: 0.5625rem 0; border-top: 0.5px solid var(--hairline); }
.facts dt { padding-right: 1.5rem; color: var(--ink-2); }
.facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-weight: 500; }
.facts dt:first-of-type, .facts dt:first-of-type + dd { border-top: 0; }
.facts dd .muted { font-weight: 400; }

/* ── Data marks (dataviz: thin marks, 4px rounded data-ends) ──────── */

.meter { height: 0.375rem; border-radius: 999px; background: var(--fill); overflow: hidden; margin-top: 0.5rem; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.meter[data-tone="warning"] > span { background: var(--warning); }
.meter[data-tone="serious"] > span { background: var(--serious); }
.meter[data-tone="critical"] > span { background: var(--critical); }

.bars { list-style: none; margin: 0; padding: 0.375rem 0; }
.bars li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 2.5rem; align-items: center; gap: 0.75rem; padding: 0.3125rem 1.25rem; border-radius: 8px; }
.bars .label { font-size: 0.8125rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bars .track { height: 0.875rem; position: relative; }
.bars .bar { position: absolute; inset: 0 auto 0 0; min-width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); }
.bars .val { font-size: 0.8125rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.bars li[data-hover] { background: var(--fill); }

/* Check-in strip: one cell per hour. */
.strip { display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); gap: 2px; height: 2rem; margin: 0.25rem 0 0.375rem; }
.strip .cell { border-radius: 2px; background: var(--fill); position: relative; }
.strip .cell[data-state="ok"] { background: var(--good); }
.strip .cell[data-state="missed"] { background: color-mix(in srgb, var(--critical) 55%, var(--fill)); }
.strip .cell[data-state="untracked"] { background: transparent; box-shadow: inset 0 0 0 0.5px var(--hairline-strong); }
.strip .cell[data-state="pending"] { background: var(--fill-strong); }
.strip .cell::before { content: ""; position: absolute; inset: -6px -1px; } /* hit target taller than the mark */
.strip .cell[data-hover] { outline: 2px solid var(--ink); outline-offset: 1px; }
.strip-axis { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--ink-3); }
.legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.625rem; font-size: 0.75rem; color: var(--ink-2); }
.legend i { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 2px; margin-right: 0.375rem; vertical-align: -1px; }

.tooltip {
  position: fixed; z-index: 60; pointer-events: none;
  padding: 0.4375rem 0.625rem; border-radius: 8px;
  background: var(--sheet); color: var(--ink);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16), 0 0 0 0.5px var(--hairline-strong);
  font-size: 0.75rem; line-height: 1.35; white-space: nowrap;
  opacity: 0; transform: translateY(2px); transition: opacity 120ms ease-out, transform 160ms var(--ease-spring);
}
.tooltip[data-show] { opacity: 1; transform: none; }
.tooltip strong { display: block; font-weight: 600; }

/* ── Controls ─────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  min-height: 2rem; padding: 0.375rem 0.9375rem; border: 0; border-radius: 999px;
  font: 500 0.875rem/1.2 var(--font); letter-spacing: -0.01em;
  background: var(--fill); color: var(--ink); cursor: pointer; white-space: nowrap;
  transition: transform 100ms ease-out, background-color 120ms ease-out, opacity 120ms;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:hover { background: var(--fill-strong); text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn .icon { width: 1rem; height: 1rem; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn-danger { color: var(--critical); background: color-mix(in srgb, var(--critical) 11%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, var(--critical) 17%, transparent); }
.btn-danger-solid { background: var(--critical); color: #fff; }
.btn-danger-solid:hover { background: color-mix(in srgb, var(--critical) 88%, #000); }
.btn-plain { background: transparent; color: var(--accent); padding-inline: 0.5rem; }
.btn-plain:hover { background: var(--accent-soft); }
.btn-icon { padding: 0; width: 2rem; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn-sm { min-height: 1.625rem; padding: 0.1875rem 0.6875rem; font-size: 0.8125rem; }

.search { position: relative; flex: 0 1 17rem; }
.search .icon { position: absolute; left: 0.625rem; top: 50%; translate: 0 -50%; width: 0.9375rem; height: 0.9375rem; color: var(--ink-3); pointer-events: none; }
.search input[type="search"] { padding-left: 2rem; border-radius: 999px; background: var(--fill); border-color: transparent; min-height: 2rem; }

/* Segmented control with a sliding thumb (transitions retarget from the live value). */
.segmented { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border-radius: 9px; background: var(--fill); isolation: isolate; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented button {
  position: relative; z-index: 1; border: 0; background: transparent; color: var(--ink);
  padding: 0.3125rem 0.875rem; border-radius: 7px; font: 500 0.8125rem/1.2 var(--font); letter-spacing: -0.006em;
  cursor: pointer; white-space: nowrap; transition: transform 100ms ease-out;
}
.segmented button:active { transform: scale(0.96); }
.segmented button .n { color: var(--ink-2); font-variant-numeric: tabular-nums; margin-left: 0.25rem; }
.segmented .thumb {
  position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 0; border-radius: 7px;
  background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: transform 380ms var(--ease-spring), width 380ms var(--ease-spring);
}
:root[data-theme="dark"] .segmented .thumb { background: #636366; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .segmented .thumb { background: #636366; } }

/* Forms */
.field { display: grid; gap: 0.375rem; }
.field > span { font-size: 0.8125rem; font-weight: 500; }
.field .hint { font-size: 0.75rem; color: var(--ink-2); font-weight: 400; }
.field .error { font-size: 0.75rem; color: var(--critical); }
.fields { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.fields .wide { grid-column: 1 / -1; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="url"], input[type="search"], select, textarea {
  width: 100%; min-height: 2.25rem; padding: 0.4375rem 0.75rem;
  border: 0.5px solid var(--hairline-strong); border-radius: var(--radius-control);
  background: var(--surface); color: var(--ink);
  font: 400 0.875rem/1.4 var(--font); letter-spacing: -0.006em;
  transition: box-shadow 150ms ease-out, border-color 150ms ease-out;
}
textarea { min-height: 5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 25%, transparent); }
[aria-invalid="true"] { border-color: var(--critical); }
.check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.check input { width: 1rem; height: 1rem; accent-color: var(--accent); }

.choices { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: grid; gap: 0.125rem; padding: 0.625rem 0.75rem; border-radius: 12px; cursor: pointer;
  box-shadow: inset 0 0 0 0.5px var(--hairline-strong); background: var(--surface);
  transition: box-shadow 150ms ease-out, background-color 150ms ease-out, transform 100ms ease-out;
}
.choice span small { color: var(--ink-2); font-size: 0.75rem; }
.choice span:active { transform: scale(0.98); }
.choice input:checked + span { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.choice input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }

.copy { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.375rem 0.375rem 0.75rem; border-radius: 12px; background: var(--fill); }
.copy code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: var(--mono); font-size: 0.8125rem; scrollbar-width: none; }
pre.copy { display: block; position: relative; margin: 0; padding: 0.875rem 5.5rem 0.875rem 1rem; white-space: pre; overflow-x: auto; font: 0.8125rem/1.6 var(--mono); }
pre.copy code { display: block; white-space: pre; overflow: visible; }
pre.copy .btn { position: absolute; top: 0.5rem; right: 0.5rem; }

.notice-box { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.875rem 1rem; border-radius: 12px; background: var(--fill); }
.notice-box[data-tone="warning"] { background: color-mix(in srgb, var(--warning) 14%, transparent); }
.notice-box[data-tone="critical"] { background: color-mix(in srgb, var(--critical) 11%, transparent); }
.notice-box[data-tone="info"] { background: color-mix(in srgb, var(--info) 9%, transparent); }
.notice-box .glyph { width: 1rem; height: 1rem; margin-top: 0.125rem; flex: none; }
.notice-box p { margin: 0; }

/* Getting started */
.checklist .row { grid-template-columns: 1.5rem minmax(0, 1fr) auto; }
.check-mark { width: 1.375rem; height: 1.375rem; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--hairline-strong); }
.checklist [data-done="true"] .check-mark { background: var(--good); box-shadow: none; color: #fff; }
.checklist [data-done="true"] .check-mark .icon { width: 0.875rem; height: 0.875rem; stroke-width: 2.4; }
.checklist [data-done="true"] .primary strong { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--hairline-strong); }
.checklist [data-done="true"] .primary span { display: none; }

/* Account and staff */
.me { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1; padding: 0.25rem; margin: -0.25rem; border-radius: 10px; color: inherit; transition: background-color 120ms ease-out; }
.me:hover { background: var(--fill); text-decoration: none; }
.me[aria-current="page"] { background: var(--accent-soft); }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 1.25rem; }
.steps > li { counter-increment: step; position: relative; padding-left: 2.25rem; display: grid; gap: 0.375rem; justify-items: start; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 0.8125rem; font-weight: 600;
}
.steps .muted { font-size: 0.8125rem; }
.qr { margin: 0.5rem 0; padding: 0.75rem; border-radius: 14px; background: #fff; box-shadow: 0 0 0 0.5px var(--hairline-strong); line-height: 0; }
.qr svg { width: 11rem; height: 11rem; }
.code-input { font: 600 1.25rem/1.2 var(--mono) !important; letter-spacing: 0.3em !important; text-align: center; max-width: 11rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.375rem 1rem; margin: 0 0 0.875rem; padding: 0.875rem 1rem; list-style: none; border-radius: 12px; background: var(--fill); }
.disclosure summary { cursor: pointer; color: var(--accent); font-size: 0.8125rem; font-weight: 500; list-style: none; }
.disclosure summary::-webkit-details-marker { display: none; }
.switch-row { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.switch-row > span { display: grid; gap: 0.125rem; }
.switch-row .muted { font-size: 0.8125rem; }
.switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 3.1875rem; height: 1.9375rem; margin: 0;
  border-radius: 999px; background: var(--fill-strong); cursor: pointer; transition: background-color 250ms ease;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 1.6875rem; height: 1.6875rem; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06);
  transition: transform 300ms var(--ease-spring);
}
.switch:checked { background: #34c759; }
.switch:checked::after { transform: translateX(1.25rem); }
.switch:active::after { width: 1.9375rem; }
.switch:checked:active::after { transform: translateX(1rem); }
.member-form { display: grid; gap: 0.625rem; justify-items: start; }
.member-form .choices { width: 100%; }
.member-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.25rem; border-top: 0.5px solid var(--hairline); padding-top: 1rem; }

/* ── Sheets: <dialog> that grows from its trigger ─────────────────── */

dialog.sheet {
  width: min(30rem, calc(100vw - 2rem)); max-height: min(44rem, calc(100vh - 2rem));
  padding: 0; border: 0; border-radius: 18px; overflow: auto;
  background: var(--sheet); color: var(--ink);
  -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  box-shadow: var(--shadow-sheet);
  opacity: 0; transform: scale(0.92); transform-origin: var(--origin, 50% 50%);
  transition: opacity 200ms ease-out, transform 360ms var(--ease-spring), overlay 360ms allow-discrete, display 360ms allow-discrete;
}
dialog.sheet[open] { opacity: 1; transform: none; }
@starting-style { dialog.sheet[open] { opacity: 0; transform: scale(0.92); } }
dialog.sheet::backdrop { background: var(--scrim); opacity: 0; transition: opacity 240ms ease, overlay 360ms allow-discrete, display 360ms allow-discrete; }
dialog.sheet[open]::backdrop { opacity: 1; }
@starting-style { dialog.sheet[open]::backdrop { opacity: 0; } }

.sheet-body { padding: 1.5rem 1.5rem 1.25rem; display: grid; gap: 1rem; }
.sheet h2 { margin: 0; font: 600 1.25rem/1.25 var(--font-display); letter-spacing: -0.018em; }
.sheet p { margin: 0; color: var(--ink-2); }
.sheet .consequence { color: var(--ink); }
.sheet-actions { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.875rem 1.5rem 1.25rem; }

/* ── Toast ────────────────────────────────────────────────────────── */

.toast {
  position: fixed; z-index: 70; left: 50%; top: 1rem; max-width: min(36rem, calc(100vw - 2rem));
  display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem 0.625rem 0.75rem; border-radius: 999px;
  background: var(--sheet); color: var(--ink);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16), 0 0 0 0.5px var(--hairline-strong);
  font-weight: 500; translate: -50% 0;
  transition: transform 420ms var(--ease-spring), opacity 220ms ease-out;
}
.toast[data-hidden] { transform: translateY(calc(-100% - 1.5rem)); opacity: 0; }
.toast .glyph { width: 1rem; height: 1rem; color: var(--good); flex: none; }
.toast[data-tone="critical"] .glyph { color: var(--critical); }

/* ── Sign-in ──────────────────────────────────────────────────────── */

.auth { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 9%, var(--bg)), var(--bg)); }
.auth-card { width: min(23rem, 100%); padding: 2rem 1.75rem 1.75rem; display: grid; gap: 1.25rem; }
.auth-card .brand-mark { width: 3.25rem; height: 3.25rem; border-radius: 14px; margin: 0 auto; }
.auth-card .brand-mark .icon { width: 1.75rem; height: 1.75rem; }
.auth-card h1 { margin: 0; text-align: center; font: 700 1.5rem/1.15 var(--font-display); letter-spacing: -0.022em; }
.auth-card p.lead { margin: -0.75rem 0 0; text-align: center; color: var(--ink-2); }
.auth-card .btn { width: 100%; min-height: 2.5rem; font-size: 0.9375rem; }

.pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.25rem; }

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

@media (max-width: 1080px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; align-items: center;
    gap: 0.5rem; padding: 0.5rem 1rem; border-right: 0; border-bottom: 0.5px solid var(--hairline-strong);
    overflow-x: auto; scrollbar-width: none;
  }
  .brand { padding: 0; }
  .brand-name, .nav-label { display: none; }
  .nav { flex-direction: row; }
  .nav a { padding: 0.375rem 0.625rem; }
  .nav a .label { display: none; }
  .nav a[aria-current="page"] .label { display: inline; }
  .sidebar-foot { margin: 0 0 0 auto; padding: 0; border: 0; }
  .sidebar-foot .who { display: none; }
  .toolbar { top: 3rem; padding: 0.5rem 1rem; }
  .page { padding: 0.5rem 1rem 3rem; }

  .rows-deployments.list-head, .rows-clients.list-head { display: none; }
  .rows-deployments .row, .rows-clients .row, .rows-licences .row { grid-template-columns: minmax(0, 1fr) auto; }
  .row .cell.optional { display: none; }
  .row .chev { display: none; }
  .rows-attention .row { grid-template-columns: minmax(0, 1fr); }
  .issues { justify-content: flex-start; }
  .row { padding: 0.75rem 1rem; }
  .card-head, .card-pad { padding-inline: 1rem; }
  .bars li { padding-inline: 1rem; }
  .strip { gap: 1px; }
}

/* ── Accessibility preferences ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  dialog.sheet, dialog.sheet[open] { transform: none; transition: opacity 200ms ease, overlay 200ms allow-discrete, display 200ms allow-discrete !important; }
  @starting-style { dialog.sheet[open] { transform: none; } }
  .toast { transition: opacity 200ms ease !important; }
  .toast[data-hidden] { transform: none; }
  .btn:active, .nav a:active, a.tile:active, .segmented button:active, .choice span:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .sidebar, .toolbar, dialog.sheet, .toast, .tooltip { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sidebar { background: var(--surface); }
  .toolbar { background: var(--bg); }
  dialog.sheet, .toast, .tooltip { background: var(--surface); }
}

@media (prefers-contrast: more) {
  :root { --hairline: rgba(0, 0, 0, 0.3); --hairline-strong: rgba(0, 0, 0, 0.5); --ink-2: #3a3a3c; --ink-3: #48484a; }
  .card, .tile { box-shadow: 0 0 0 1px var(--hairline-strong); }
  .sidebar, .toolbar, dialog.sheet, .toast { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sidebar { background: var(--surface); }
  .toolbar { background: var(--bg); border-bottom: 1px solid var(--hairline-strong); }
  dialog.sheet { background: var(--surface); border: 1px solid var(--hairline-strong); }
  .pill, .btn { box-shadow: inset 0 0 0 1px var(--hairline-strong); }
}

@media (forced-colors: active) {
  .strip .cell, .meter > span, .bars .bar { forced-color-adjust: none; }
}