/* ============================================================================
   TILE KMS — Client Portal design system
   ----------------------------------------------------------------------------
   One hand-authored stylesheet, served from the embedded FS. It replaces the
   Tailwind Play CDN the templates used to pull at runtime: that shipped a JIT
   compiler to every browser, needed outbound internet from an operator
   workstation, and restyled the page after first paint. An air-gapped
   deployment now renders correctly with no network at all.

   Sections
     1. Tokens
     2. Reset & base
     3. Typography & text utilities
     4. Layout primitives (app shell, page header, grid, stack)
     5. Surfaces (panel, metric, definition list, copyable value)
     6. Buttons
     7. Forms
     8. Tables
     9. Badges, status, chips
    10. Alerts
    11. Modals
    12. Menus
    13. Empty / loading states
    14. Toast
    15. Auth & standalone pages
    16. Landing page
    17. Utilities
    18. Responsive & print
   ========================================================================== */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */

:root {
  /* Neutrals — a graphite ramp with a faint cool cast. Deliberately narrow:
     the interface separates things with hairlines and spacing, not with a
     dozen competing surface shades. */
  --ink-0:  #0e1113;   /* page */
  --ink-1:  #131719;   /* rails: sidebar, header */
  --ink-2:  #171b1e;   /* panels */
  --ink-3:  #1c2124;   /* inputs, nested surfaces */
  --ink-4:  #232a2e;   /* hover */
  --ink-5:  #2b3338;   /* pressed */

  --line:    #232a2e;  /* hairline between rows and sections */
  --line-2:  #303940;  /* control borders */
  --line-3:  #3c464e;  /* hovered control borders */

  --text-0: #e6ebee;   /* primary */
  --text-1: #a7b2b9;   /* secondary */
  --text-2: #78848c;   /* muted, labels */
  --text-3: #5a666e;   /* faint, placeholders */

  /* Brand — used sparingly: primary action, active navigation, ACTIVE state.
     Large fills use the darker step so white label text stays legible. */
  --accent-700: #077854;
  --accent-600: #0a9066;
  --accent-500: #0ba876;
  --accent-400: #14c089;
  --accent-tint: rgba(20, 192, 137, 0.10);
  --accent-line: rgba(20, 192, 137, 0.28);

  /* Status — one hue per meaning, muted enough to sit beside body text. */
  --info-400:  #5aa2e0;
  --info-tint: rgba(90, 162, 224, 0.10);
  --info-line: rgba(90, 162, 224, 0.26);

  --warn-400:  #d9a441;
  --warn-tint: rgba(217, 164, 65, 0.10);
  --warn-line: rgba(217, 164, 65, 0.26);

  --danger-400: #e06a6a;
  --danger-500: #cf4f4f;
  --danger-600: #b83e3e;
  --danger-tint: rgba(224, 106, 106, 0.10);
  --danger-line: rgba(224, 106, 106, 0.26);

  --violet-400: #9d8ff0;
  --violet-tint: rgba(157, 143, 240, 0.10);
  --violet-line: rgba(157, 143, 240, 0.26);

  /* Typography */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Consolas,
               "Liberation Mono", Menlo, monospace;

  --fs-2xs: 10.5px;
  --fs-xs:  11.5px;
  --fs-sm:  12.5px;
  --fs-md:  13px;
  --fs-base: 14px;
  --fs-lg:  16px;
  --fs-xl:  19px;
  --fs-2xl: 24px;

  /* Spacing — 4px base */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* Radius — small on purpose. Pill-shaped cards read as consumer SaaS. */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;

  /* One elevation, for overlays only. Everything else uses a hairline. */
  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.55);

  --sidebar-w: 236px;
  --header-h: 52px;
}

/* ── 2. Reset & base ─────────────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--text-0);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
dl, dd, dt { margin: 0; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--text-0); }

svg { display: block; flex-shrink: 0; }

code, kbd, samp, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }

/* Focus: one visible ring everywhere, never removed. A keyboard operator on a
   console that provisions cryptographic keys must always see where they are. */
:focus-visible {
  outline: 2px solid var(--accent-400);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent-line); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-5); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: var(--ink-5) transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.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;
}
.skip-link {
  position: absolute; left: var(--sp-3); top: -100px; z-index: 300;
  background: var(--ink-3); color: var(--text-0);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm);
}
.skip-link:focus { top: var(--sp-3); }

/* ── 3. Typography & text utilities ──────────────────────────────────────── */

.t-2xs { font-size: var(--fs-2xs); }
.t-xs  { font-size: var(--fs-xs); }
.t-sm  { font-size: var(--fs-sm); }
.t-md  { font-size: var(--fs-md); }
.t-lg  { font-size: var(--fs-lg); }

.t-primary   { color: var(--text-0); }
.t-secondary { color: var(--text-1); }
.t-muted     { color: var(--text-2); }
.t-faint     { color: var(--text-3); }
.t-accent    { color: var(--accent-400); }
.t-danger    { color: var(--danger-400); }
.t-warn      { color: var(--warn-400); }
.t-info      { color: var(--info-400); }

.t-medium { font-weight: 500; }
.t-semi   { font-weight: 600; }

.t-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-2);
}

.t-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-break    { word-break: break-all; overflow-wrap: anywhere; }
.t-nowrap   { white-space: nowrap; }
.t-right    { text-align: right; }
.t-center   { text-align: center; }
.t-clamp-2  { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── 4. Layout primitives ────────────────────────────────────────────────── */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--ink-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  min-height: var(--header-h);
}
.sidebar-brand .mark { color: var(--accent-400); }
.sidebar-brand .wordmark { font-size: var(--fs-md); font-weight: 600; color: var(--text-0); }
.sidebar-brand .subtitle { font-size: var(--fs-2xs); color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 1px; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-3) var(--sp-2); }

.nav-group + .nav-group { margin-top: var(--sp-5); }
.nav-group-label {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-3);
  padding: 0 var(--sp-2); margin-bottom: var(--sp-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 7px var(--sp-2);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  color: var(--text-1);
  border-left: 2px solid transparent;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.nav-item + .nav-item { margin-top: 1px; }
.nav-item svg { width: 15px; height: 15px; color: var(--text-3); transition: color 0.12s ease; }
.nav-item:hover { background: var(--ink-3); color: var(--text-0); }
.nav-item:hover svg { color: var(--text-1); }
.nav-item.is-active {
  background: var(--accent-tint);
  color: var(--accent-400);
  border-left-color: var(--accent-500);
  font-weight: 500;
}
.nav-item.is-active svg { color: var(--accent-400); }

.sidebar-footer { border-top: 1px solid var(--line); padding: var(--sp-3); }

.identity { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-2) var(--sp-3); min-width: 0; }
.avatar {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: var(--r-md);
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  color: var(--accent-400);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase;
}
.avatar-lg { width: 44px; height: 44px; flex-basis: 44px; font-size: var(--fs-lg); }

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

.topbar {
  height: var(--header-h);
  flex: 0 0 var(--header-h);
  background: var(--ink-1);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-6);
  position: sticky;
  top: 0;
  z-index: 20;
}
.breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); min-width: 0; }
.breadcrumb .sep { color: var(--text-3); }
.breadcrumb .current { color: var(--text-0); font-weight: 500; }

.topbar-meta { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); }
.meta-item { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.meta-item svg { width: 13px; height: 13px; color: var(--text-3); }

.content { flex: 1; padding: var(--sp-6); min-width: 0; }
.content-narrow { max-width: 900px; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-5);
}
.page-title { font-size: var(--fs-xl); font-weight: 600; color: var(--text-0); }
.page-desc  { font-size: var(--fs-md); color: var(--text-2); margin-top: 3px; max-width: 78ch; }
.page-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

.row  { display: flex; align-items: center; gap: var(--sp-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.row-top { display: flex; align-items: flex-start; gap: var(--sp-2); }
.row-wrap { flex-wrap: wrap; }
.row-center { justify-content: center; }
.col  { display: flex; flex-direction: column; min-width: 0; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }

.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── 5. Surfaces ─────────────────────────────────────────────────────────── */

.panel {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.panel-pad { padding: var(--sp-5); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.panel-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-0); }
.panel-body { padding: var(--sp-4); }
.panel-dashed { border-style: dashed; background: transparent; }

/* Metric — a labelled number. No sparkline, no delta arrow, no invented trend:
   the backend reports a count, so the tile shows a count. */
.metric { padding: var(--sp-4) var(--sp-5); }
.metric-label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-2); }
.metric-value { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; color: var(--text-0); margin-top: var(--sp-2); line-height: 1.1; }
.metric-value.is-accent { color: var(--accent-400); }
.metric-value.is-warn   { color: var(--warn-400); }
.metric-value.is-empty  { color: var(--text-3); }
.metric-note { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-2); }

.dl-row { display: flex; align-items: baseline; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); }
.dl-row + .dl-row { border-top: 1px solid var(--line); }
.dl-key { flex: 0 0 168px; font-size: var(--fs-sm); color: var(--text-2); }
.dl-val { flex: 1; min-width: 0; font-size: var(--fs-md); color: var(--text-0); }

.value-box { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.value-code {
  flex: 1; min-width: 0;
  background: var(--ink-0);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-1);
  word-break: break-all;
  overflow-wrap: anywhere;
}
.value-code.is-secret { color: var(--warn-400); }
.value-code.is-accent { color: var(--accent-400); }
.value-code.is-scroll { max-height: 240px; overflow-y: auto; white-space: pre-wrap; }

/* ── 6. Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px var(--sp-3);
  min-height: 30px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--ink-3);
  color: var(--text-0);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn:hover { background: var(--ink-4); border-color: var(--line-3); color: var(--text-0); }
.btn:active { background: var(--ink-5); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn svg { width: 14px; height: 14px; }

.btn-primary { background: var(--accent-600); border-color: var(--accent-600); color: #fff; }
.btn-primary:hover { background: var(--accent-500); border-color: var(--accent-500); color: #fff; }
.btn-primary:active { background: var(--accent-700); border-color: var(--accent-700); }

.btn-danger { background: var(--danger-600); border-color: var(--danger-600); color: #fff; }
.btn-danger:hover { background: var(--danger-500); border-color: var(--danger-500); color: #fff; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-1); }
.btn-ghost:hover { background: var(--ink-3); border-color: var(--line); color: var(--text-0); }

/* Outline variants keep a row-level action quieter than the page's primary
   action while still reading as its own risk class. */
.btn-outline-danger { background: transparent; border-color: var(--danger-line); color: var(--danger-400); }
.btn-outline-danger:hover { background: var(--danger-tint); border-color: var(--danger-400); color: var(--danger-400); }

.btn-outline-warn { background: transparent; border-color: var(--warn-line); color: var(--warn-400); }
.btn-outline-warn:hover { background: var(--warn-tint); border-color: var(--warn-400); color: var(--warn-400); }

.btn-outline-accent { background: transparent; border-color: var(--accent-line); color: var(--accent-400); }
.btn-outline-accent:hover { background: var(--accent-tint); border-color: var(--accent-400); color: var(--accent-400); }

.btn-sm { min-height: 26px; padding: 3px var(--sp-2); font-size: var(--fs-sm); }
.btn-sm svg { width: 12px; height: 12px; }
.btn-lg { min-height: 38px; padding: var(--sp-2) var(--sp-5); font-size: var(--fs-base); }
.btn-block { width: 100%; }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; flex-shrink: 0;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--text-3);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.btn-icon:hover { background: var(--ink-4); color: var(--text-0); }
.btn-icon svg { width: 14px; height: 14px; }
.btn-icon.is-ok { color: var(--accent-400); }

/* A pagination endpoint that is unavailable — rendered as text, not a button,
   because there is nothing to activate. */
.btn-static {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--sp-3); min-height: 30px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-md); color: var(--text-3);
  background: transparent; cursor: not-allowed;
}

/* ── 7. Forms ────────────────────────────────────────────────────────────── */

.field { display: block; }
.field + .field { margin-top: var(--sp-4); }

.label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text-1); margin-bottom: 5px; }
.label .req { color: var(--danger-400); margin-left: 2px; }
.hint { font-size: var(--fs-xs); color: var(--text-3); margin-top: 5px; }
.hint-mono { font-family: var(--font-mono); }

.input, .select, .textarea {
  display: block;
  width: 100%;
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 7px var(--sp-3);
  color: var(--text-0);
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: 1.45;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; }
.textarea { resize: vertical; min-height: 64px; }
.input-mono, .textarea-mono { font-family: var(--font-mono); font-size: var(--fs-sm); }

.select {
  appearance: none;
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378848c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
}
.select option { background: var(--ink-3); color: var(--text-0); }

.input-search { position: relative; }
.input-search > svg {
  position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--text-3); pointer-events: none;
}
.input-search .input { padding-left: var(--sp-8); }

.check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-md); color: var(--text-1); }
.check input[type="checkbox"], .check input[type="radio"] {
  width: 15px; height: 15px; margin: 0; accent-color: var(--accent-500);
  cursor: pointer; flex-shrink: 0;
}
.check:hover { color: var(--text-0); }
.check-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* A checkbox rendered as a full-width option row. */
.check-card {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-3);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.check-card:hover { border-color: var(--line-3); background: var(--ink-4); }
.check-card:focus-within { border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-tint); }
.check-card input { margin-top: 2px; }

/* A bordered group of related fields — the key slots on Create Application. */
.fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  background: var(--ink-3);
  margin: 0;
}
.fieldset + .fieldset { margin-top: var(--sp-4); }
.fieldset-optional { border-style: dashed; background: transparent; }
.fieldset > legend { padding: 0; }
.fieldset-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.fieldset-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-0); }
.fieldset-note { font-size: var(--fs-xs); color: var(--text-3); }

.slot-mark {
  width: 20px; height: 20px; flex: 0 0 20px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xs); font-weight: 700;
}
.slot-rest    { background: var(--accent-tint); color: var(--accent-400); }
.slot-transit { background: var(--info-tint);   color: var(--info-400); }
.slot-signing { background: var(--violet-tint); color: var(--violet-400); }
.slot-mac     { background: var(--warn-tint);   color: var(--warn-400); }

.filterbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}
.filterbar .field { margin: 0; }
.filterbar-actions { display: flex; gap: var(--sp-2); margin-left: auto; }

/* Masked secret textarea.
   A <textarea> is required so a multi-line PEM private key can be pasted, and
   it has no type="password" to hide what is typed. -webkit-text-security draws
   discs in Chromium/Safari; Firefox has no equivalent, so blur stands in — the
   text is still unreadable over someone's shoulder and one click reveals it. */
.secret-masked { -webkit-text-security: disc; text-security: disc; }
@supports not (-webkit-text-security: disc) {
  .secret-masked { filter: blur(3.5px); }
}

/* ── 8. Tables ───────────────────────────────────────────────────────────── */

.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-2);
  overflow: hidden;
}
.table-scroll { overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }

.table thead th {
  background: var(--ink-1);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-4);
  text-align: left;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.table thead th.num { text-align: right; }

.table tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  color: var(--text-1);
  vertical-align: middle;
}
.table tbody td.num { text-align: right; }
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr { transition: background-color 0.1s ease; }
.table tbody tr:hover { background: rgba(255, 255, 255, 0.022); }

.table tr.is-expandable { cursor: pointer; }
.table tr.is-expandable:focus-visible { outline: 2px solid var(--accent-400); outline-offset: -2px; }
.row-chevron { width: 13px; height: 13px; color: var(--text-3); transition: transform 0.15s ease, color 0.12s ease; }
.table tr.is-expandable:hover .row-chevron { color: var(--text-1); }
.row-chevron.is-open { transform: rotate(90deg); }

.detail-cell { background: var(--ink-0); padding: var(--sp-4); }

.table-nested { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table-nested th {
  text-align: left; padding: 0 var(--sp-4) var(--sp-2) 0;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--line);
}
.table-nested td { padding: 7px var(--sp-4) 7px 0; border-top: 1px solid var(--line); color: var(--text-1); }
.table-nested tbody tr:first-child td { border-top: 0; }

.cell-primary { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.cell-icon {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: var(--r-sm);
  background: var(--ink-3);
  border: 1px solid var(--line);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
}
.cell-icon svg { width: 14px; height: 14px; }
.cell-name { font-size: var(--fs-md); font-weight: 500; color: var(--text-0); }
.cell-sub  { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); margin-top: 1px; }

.id-cell { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-2); }

/* Copy affordance that appears on row hover but stays reachable by keyboard:
   focus restores it too, so it is not a mouse-only control. */
.hover-reveal { opacity: 0; transition: opacity 0.12s ease; }
tr:hover .hover-reveal, .hover-reveal:focus-visible { opacity: 1; }

.table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-3); min-height: 28px; flex-wrap: wrap;
}
.result-count { font-size: var(--fs-md); color: var(--text-2); }
.result-count strong { color: var(--text-0); font-weight: 600; }
.filter-tags { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-top: var(--sp-4); flex-wrap: wrap;
}
.pagination-note { font-size: var(--fs-sm); color: var(--text-3); }
.pagination-controls { display: flex; gap: var(--sp-2); }

/* ── 9. Badges, status, chips ────────────────────────────────────────────── */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-3);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-1);
  white-space: nowrap;
}
.badge-accent { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-400); }
.badge-info   { background: var(--info-tint);   border-color: var(--info-line);   color: var(--info-400); }
.badge-warn   { background: var(--warn-tint);   border-color: var(--warn-line);   color: var(--warn-400); }
.badge-danger { background: var(--danger-tint); border-color: var(--danger-line); color: var(--danger-400); }
.badge-violet { background: var(--violet-tint); border-color: var(--violet-line); color: var(--violet-400); }
.badge-mono   { font-family: var(--font-mono); letter-spacing: 0; font-weight: 500; }

/* Status = coloured dot + plain label. In a dense table that reads faster than
   a filled pill on every row, and it stays legible for a reader who cannot
   separate the hues, because the word is always there. */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); white-space: nowrap; color: var(--text-1); }
.status .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--text-3); }
.status-active      { color: var(--accent-400); font-weight: 500; }
.status-active .dot { background: var(--accent-400); }
.status-pre-active      { color: var(--info-400); }
.status-pre-active .dot { background: var(--info-400); }
.status-suspended      { color: var(--warn-400); }
.status-suspended .dot { background: var(--warn-400); }
.status-deactivated      { color: var(--text-1); }
.status-deactivated .dot { background: var(--text-2); }
.status-revoked      { color: var(--danger-400); }
.status-revoked .dot { background: var(--danger-400); }
.status-compromised      { color: var(--warn-400); font-weight: 500; }
.status-compromised .dot { background: var(--warn-400); }
.status-destroyed      { color: var(--text-3); }
.status-destroyed .dot { background: var(--text-3); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 4px 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--ink-3);
  font-size: var(--fs-sm);
  color: var(--text-1);
  max-width: 230px;
}
.chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; flex-shrink: 0;
  border: 0; border-radius: var(--r-xs);
  background: transparent; color: var(--text-3); cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.chip-remove:hover { background: var(--danger-tint); color: var(--danger-400); }
.chip-remove svg { width: 10px; height: 10px; }

.chip-add {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--fs-sm);
  color: var(--text-3);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.chip-add:hover { border-color: var(--line-3); color: var(--text-1); }
.chip-add svg { width: 10px; height: 10px; }

.chip-list { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

/* ── 10. Alerts ──────────────────────────────────────────────────────────── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--ink-2);
  font-size: var(--fs-md);
  color: var(--text-1);
}
.alert svg { width: 16px; height: 16px; margin-top: 1px; }
.alert-title { font-weight: 600; color: var(--text-0); display: block; margin-bottom: 2px; }

.alert-danger { border-color: var(--danger-line); border-left-color: var(--danger-500); background: var(--danger-tint); color: #eec2c2; }
.alert-danger svg { color: var(--danger-400); }
.alert-danger .alert-title { color: var(--danger-400); }

.alert-warn { border-color: var(--warn-line); border-left-color: var(--warn-400); background: var(--warn-tint); color: #e6d2ac; }
.alert-warn svg { color: var(--warn-400); }
.alert-warn .alert-title { color: var(--warn-400); }

.alert-info { border-color: var(--info-line); border-left-color: var(--info-400); background: var(--info-tint); color: #c3d9ee; }
.alert-info svg { color: var(--info-400); }
.alert-info .alert-title { color: var(--info-400); }

.alert-accent { border-color: var(--accent-line); border-left-color: var(--accent-500); background: var(--accent-tint); color: #b6e3d1; }
.alert-accent svg { color: var(--accent-400); }
.alert-accent .alert-title { color: var(--accent-400); }

.mb-alert { margin-bottom: var(--sp-4); }

/* ── 11. Modals ──────────────────────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(6, 8, 9, 0.72);
}

.modal-box {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 4 * var(--sp-4));
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-overlay);
}
.modal-box.is-wide { max-width: 580px; }

.modal-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.modal-title { font-size: var(--fs-base); font-weight: 600; color: var(--text-0); flex: 1; min-width: 0; }
.modal-body { padding: var(--sp-5); overflow-y: auto; }
.modal-foot {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.modal-foot .btn { flex: 1; }

.modal-mark {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
}
.modal-mark svg { width: 15px; height: 15px; }
.modal-mark.is-danger { background: var(--danger-tint); color: var(--danger-400); }
.modal-mark.is-warn   { background: var(--warn-tint);   color: var(--warn-400); }
.modal-mark.is-accent { background: var(--accent-tint); color: var(--accent-400); }
.modal-mark.is-info   { background: var(--info-tint);   color: var(--info-400); }

.result-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.result-mark {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-400);
  display: flex; align-items: center; justify-content: center;
}
.result-mark svg { width: 12px; height: 12px; }
.result-text { font-size: var(--fs-md); font-weight: 600; color: var(--accent-400); }

/* ── 12. Menus ───────────────────────────────────────────────────────────── */

.menu-anchor { position: relative; display: inline-block; }
.menu {
  position: absolute;
  right: 0; top: calc(100% + 4px);
  z-index: 30;
  min-width: 168px;
  padding: var(--sp-1);
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-overlay);
}
.menu-item {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%;
  padding: 6px var(--sp-2);
  border: 0; border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-1);
  font-family: inherit; font-size: var(--fs-md); text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.menu-item:hover { background: var(--ink-4); color: var(--text-0); }
.menu-item .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.menu-label {
  padding: var(--sp-2) var(--sp-2) 4px;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3);
}

/* ── 13. Empty / loading states ──────────────────────────────────────────── */

.empty { padding: var(--sp-16) var(--sp-6); text-align: center; }
.empty-mark {
  width: 40px; height: 40px; margin: 0 auto var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-3);
  color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
}
.empty-mark svg { width: 18px; height: 18px; }
.empty-title { font-size: var(--fs-base); font-weight: 500; color: var(--text-1); }
.empty-desc { font-size: var(--fs-md); color: var(--text-3); margin-top: var(--sp-2); max-width: 56ch; margin-left: auto; margin-right: auto; }
.empty-actions { margin-top: var(--sp-5); display: flex; justify-content: center; gap: var(--sp-2); }

.spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--line-3);
  border-top-color: var(--accent-400);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 14. Toast ───────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 200;
  max-width: 380px;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-2);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--ink-3);
  box-shadow: var(--shadow-overlay);
  font-size: var(--fs-md);
  color: var(--text-0);
}
.toast.is-success { border-left-color: var(--accent-500); }
.toast.is-error   { border-left-color: var(--danger-500); }
.toast.is-info    { border-left-color: var(--info-400); }

/* ── 15. Auth & standalone pages ─────────────────────────────────────────── */

/* Split layout: the form on the left, a factual panel on the right stating
   what this deployment actually enforces. The panel is descriptive only and
   is dropped below 1024px. */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-form-col { display: flex; align-items: center; justify-content: center; padding: var(--sp-10) var(--sp-6); }
.auth-form { width: 100%; max-width: 368px; }

.auth-brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-10); }
.auth-brand .mark { color: var(--accent-400); }
.auth-brand .wordmark { font-size: var(--fs-lg); font-weight: 600; color: var(--text-0); }
.auth-brand .subtitle { font-size: var(--fs-2xs); color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; }

.auth-title { font-size: var(--fs-xl); font-weight: 600; color: var(--text-0); }
.auth-desc { font-size: var(--fs-md); color: var(--text-2); margin-top: var(--sp-2); margin-bottom: var(--sp-6); }

.auth-divider { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; font-size: var(--fs-xs); color: var(--text-3); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.btn-google { width: 100%; background: var(--ink-3); border-color: var(--line-2); color: var(--text-0); min-height: 38px; }
.btn-google:hover { background: var(--ink-4); }
.btn-google svg { width: 16px; height: 16px; }

.auth-foot { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-3); }

.auth-aside {
  background: var(--ink-1);
  border-left: 1px solid var(--line);
  padding: var(--sp-10);
  display: flex; flex-direction: column; justify-content: center;
}
.auth-aside-inner { max-width: 420px; }
.auth-aside h2 { font-size: var(--fs-lg); color: var(--text-0); margin-bottom: var(--sp-5); }

.spec-row { display: flex; gap: var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.spec-row:first-child { border-top: 0; }
.spec-key { flex: 0 0 132px; font-size: var(--fs-sm); color: var(--text-2); }
.spec-val { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text-1); }

/* Centred single-card pages: pending approval, cluster mismatch, error,
   device authorization. */
.centered { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-6); }
.centered-card { width: 100%; max-width: 440px; }
.centered-card.is-wide { max-width: 520px; }

.state-mark {
  width: 40px; height: 40px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-4);
}
.state-mark svg { width: 20px; height: 20px; }
.state-mark.is-accent { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-400); }
.state-mark.is-info   { background: var(--info-tint);   border-color: var(--info-line);   color: var(--info-400); }
.state-mark.is-warn   { background: var(--warn-tint);   border-color: var(--warn-line);   color: var(--warn-400); }
.state-mark.is-danger { background: var(--danger-tint); border-color: var(--danger-line); color: var(--danger-400); }
.state-mark.is-center { margin-left: auto; margin-right: auto; }

.error-code { font-size: 64px; font-weight: 600; letter-spacing: -0.03em; color: var(--text-3); line-height: 1; }

/* ── 16. Marketing site (landing page) ───────────────────────────────────── */

/* The public face of the product, not a console screen. It shares the tokens,
   buttons and table rules above so the two never drift apart visually, but its
   rhythm is deliberately looser: the console optimises for density, this page
   optimises for a reader who has never heard of TILE.

   Everything here is landing-only except `.lifecycle`, which the dashboard also
   uses — that one is left exactly as it was. */

.container { max-width: 1160px; margin: 0 auto; padding: 0 var(--sp-6); width: 100%; }
.container-narrow { max-width: 880px; }

/* ── Header ──────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(14, 17, 19, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  min-height: 60px;
  display: flex; align-items: center;
}

.brand-lockup { display: flex; align-items: center; gap: var(--sp-3); }
.brand-lockup .mark { color: var(--accent-400); }
.brand-lockup .wordmark { font-size: var(--fs-lg); font-weight: 600; color: var(--text-0); letter-spacing: -0.01em; }
.brand-lockup .subtitle {
  font-size: var(--fs-2xs); color: var(--text-3); white-space: nowrap;
  letter-spacing: 0.09em; text-transform: uppercase; margin-top: 1px;
}

.site-nav { display: flex; align-items: center; gap: var(--sp-5); }
.site-nav a { font-size: var(--fs-md); color: var(--text-2); white-space: nowrap; transition: color 0.12s ease; }
.site-nav a:hover { color: var(--text-0); }
.site-nav .btn { color: #fff; }
.site-nav .btn-ghost { color: var(--text-1); }

/* Hamburger — only rendered small. It toggles [hidden] on the nav, which the
   base reset already forces to display:none, so no inline style is needed. */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--ink-2); color: var(--text-1); cursor: pointer;
}
.nav-toggle:hover { background: var(--ink-3); color: var(--text-0); }
.nav-toggle svg { width: 16px; height: 16px; }

/* ── Section scaffolding ─────────────────────────────────────────────────── */

.section { padding: var(--sp-20) 0; border-top: 1px solid var(--line); }
.section-alt { background: var(--ink-1); }
.section-tight { padding: var(--sp-16) 0; }

.section-head { max-width: 72ch; margin-bottom: var(--sp-10); }
.section-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }

.section-eyebrow {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-400); margin-bottom: var(--sp-3);
}
.section-title {
  font-size: clamp(22px, 2.6vw, 31px);
  font-weight: 600; letter-spacing: -0.022em; line-height: 1.2; color: var(--text-0);
}
.section-lede { font-size: var(--fs-lg); line-height: 1.65; color: var(--text-2); margin-top: var(--sp-4); }
.section-lede + .section-lede { margin-top: var(--sp-3); }
.section-note { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-3); margin-top: var(--sp-5); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

/* One very low-contrast wash, placed once. It gives the fold some depth without
   the page turning into a gradient exercise. */
.hero {
  padding: var(--sp-20) 0 var(--sp-16);
  background:
    radial-gradient(60rem 28rem at 18% -8%, rgba(20, 192, 137, 0.07), transparent 70%),
    radial-gradient(46rem 24rem at 92% 4%, rgba(90, 162, 224, 0.045), transparent 72%);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--sp-12); align-items: start;
}

.hero-title {
  font-size: clamp(31px, 4.4vw, 50px);
  font-weight: 600; letter-spacing: -0.034em; line-height: 1.1;
  color: var(--text-0); max-width: 22ch;
}
.hero-title .line { display: block; }
.hero-lede { font-size: var(--fs-lg); line-height: 1.65; color: var(--text-1); margin-top: var(--sp-5); max-width: 58ch; }
.hero-sub { font-size: var(--fs-base); line-height: 1.65; color: var(--text-2); margin-top: var(--sp-4); max-width: 58ch; }

.hero-tagline {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--accent-line); border-left-width: 2px;
  border-radius: var(--r-sm);
  background: var(--accent-tint);
  font-size: var(--fs-md); font-weight: 500; color: var(--accent-400);
  letter-spacing: 0.01em;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.hero-foot { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--sp-5); }

/* ── Pills ───────────────────────────────────────────────────────────────── */

.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--ink-2);
  font-size: var(--fs-sm); color: var(--text-1); white-space: nowrap;
}
.pill .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-400); flex-shrink: 0; }

/* ── Card grids ──────────────────────────────────────────────────────────── */

/* One hairline grid, three widths. The 1px gap over a --line background draws
   the dividers, so there are no per-card borders to misalign. */
.card-grid {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Legacy alias: the previous landing markup used .feature-grid / .feature. */
.feature-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.feature, .mcard { background: var(--ink-0); padding: var(--sp-6); }
.section-alt .feature, .section-alt .mcard { background: var(--ink-1); }

.feature-mark, .mcard-mark {
  width: 32px; height: 32px; margin-bottom: var(--sp-4);
  border: 1px solid var(--accent-line); border-radius: var(--r-md);
  background: var(--accent-tint); color: var(--accent-400);
  display: flex; align-items: center; justify-content: center;
}
.feature-mark svg, .mcard-mark svg { width: 16px; height: 16px; }

.feature h3, .mcard h3 { font-size: var(--fs-base); color: var(--text-0); margin-bottom: var(--sp-2); }
.feature p, .mcard p { font-size: var(--fs-md); line-height: 1.65; color: var(--text-2); }
.mcard-meta {
  display: block; margin-top: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3);
}

/* ── Flow diagram (request path, lifecycle) ──────────────────────────────── */

.flow { display: flex; flex-direction: column; gap: 0; }
.flow-step { display: flex; align-items: stretch; gap: var(--sp-4); }
.flow-rail { flex: 0 0 28px; display: flex; flex-direction: column; align-items: center; }
.flow-dot {
  width: 26px; height: 26px; flex-shrink: 0;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: var(--ink-2); color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xs); font-weight: 600;
}
.flow-step.is-kms .flow-dot { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-400); }
.flow-line { flex: 1; width: 1px; background: var(--line); min-height: var(--sp-5); }
.flow-step:last-child .flow-line { display: none; }
.flow-body { padding-bottom: var(--sp-5); min-width: 0; }
.flow-step:last-child .flow-body { padding-bottom: 0; }
.flow-label { font-size: var(--fs-base); font-weight: 600; color: var(--text-0); }
.flow-step.is-kms .flow-label { color: var(--accent-400); }
.flow-desc { font-size: var(--fs-md); line-height: 1.6; color: var(--text-2); margin-top: 3px; }

/* ── Deployment comparison (two stacks side by side) ─────────────────────── */

.stack-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.stack-col { padding: var(--sp-5); }
.stack-col-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-0); }
.stack-col-sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; margin-bottom: var(--sp-5); }

.stack { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.stack-node {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--ink-3);
  font-size: var(--fs-sm); color: var(--text-1); text-align: center;
}
.stack-node.is-tile {
  background: var(--accent-tint); border-color: var(--accent-line);
  color: var(--accent-400); font-weight: 600;
}
.stack-node.is-boundary { background: var(--ink-2); border-style: dashed; color: var(--text-2); }
.stack-link { align-self: center; width: 1px; height: var(--sp-5); background: var(--line-3); }
.stack-foot { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-3); margin-top: var(--sp-5); }

/* ── Authorization inputs ────────────────────────────────────────────────── */

.authz { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.authz-inputs { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: var(--sp-2); }
.authz-input {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--ink-3); text-align: center; min-width: 118px;
}
.authz-input .k { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-0); }
.authz-input .v { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.authz-plus { display: flex; align-items: center; color: var(--text-3); font-size: var(--fs-lg); }
.authz-down { color: var(--text-3); font-size: var(--fs-lg); line-height: 1; }
.authz-result {
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--accent-line); border-radius: var(--r-md);
  background: var(--accent-tint);
  font-size: var(--fs-base); font-weight: 600; color: var(--accent-400); text-align: center;
}

/* Least-privilege worked example: same application, same key, two operations. */
.lp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.lp-case { padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-2); }
.lp-case.is-allow { border-color: var(--accent-line); }
.lp-case.is-deny  { border-color: var(--danger-line); }
.lp-chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-1); }
.lp-chain .sep { color: var(--text-3); }
.lp-verdict { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-3); }
.lp-case.is-allow .lp-verdict { color: var(--accent-400); }
.lp-case.is-deny  .lp-verdict { color: var(--danger-400); }
.lp-note { font-size: var(--fs-md); line-height: 1.6; color: var(--text-2); margin-top: var(--sp-3); }

/* ── Lifecycle chain ─────────────────────────────────────────────────────── */

.lifecycle { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.lifecycle .arrow { color: var(--text-3); font-size: var(--fs-sm); }

/* ── Comparison table ────────────────────────────────────────────────────── */

.cmp-wrap { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); min-width: 620px; }
.cmp-table th, .cmp-table td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; }
.cmp-table thead th {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.cmp-table thead th.is-tile { color: var(--accent-400); }
.cmp-table tbody td { border-top: 1px solid var(--line); color: var(--text-2); }
.cmp-table tbody th {
  border-top: 1px solid var(--line); font-weight: 500; color: var(--text-0);
  font-size: var(--fs-md);
}
.cmp-table td.is-tile { color: var(--text-1); background: rgba(20, 192, 137, 0.035); }
.cmp-mark { display: inline-flex; align-items: center; gap: 6px; }
.cmp-mark svg { width: 13px; height: 13px; }
.cmp-mark.is-yes { color: var(--accent-400); }
.cmp-mark.is-dep { color: var(--text-3); }

/* ── Model chooser ───────────────────────────────────────────────────────── */

.choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.choice-col { padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-2); }
.choice-col.is-tile { border-color: var(--accent-line); background: var(--ink-2); }
.choice-kind { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.choice-col.is-tile .choice-kind { color: var(--accent-400); }
.choice-col h3 { font-size: var(--fs-lg); color: var(--text-0); margin-top: var(--sp-2); margin-bottom: var(--sp-4); }
.choice-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.choice-list li { display: flex; gap: var(--sp-3); font-size: var(--fs-md); line-height: 1.55; color: var(--text-2); }
.choice-list svg { width: 14px; height: 14px; margin-top: 3px; color: var(--text-3); }
.choice-col.is-tile .choice-list svg { color: var(--accent-400); }
.choice-foot { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }

/* ── Post-quantum highlights ─────────────────────────────────────────────── */

.pqc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.pqc-card { padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-2); }
.pqc-name { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 500; color: var(--text-0); letter-spacing: -0.01em; }
.pqc-role { font-size: var(--fs-sm); color: var(--accent-400); margin-top: var(--sp-2); }
.pqc-std { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-3); }

/* ── Split: lede beside a supporting panel ───────────────────────────────── */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-12); align-items: start; }
.split-quote {
  padding: var(--sp-6);
  border: 1px solid var(--accent-line); border-left-width: 2px; border-radius: var(--r-md);
  background: var(--accent-tint);
}
.split-quote p { font-size: var(--fs-lg); line-height: 1.55; color: var(--text-0); font-weight: 500; }
.split-quote p + p { margin-top: var(--sp-4); color: var(--accent-400); }

/* ── Algorithm inventory ─────────────────────────────────────────────────── */

.algo-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.algo-table th {
  text-align: left; padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--line);
}
.algo-table td { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--line); color: var(--text-1); vertical-align: top; }
.algo-table tbody tr:first-child td { border-top: 0; }
.algo-table td:first-child { color: var(--text-0); font-weight: 500; white-space: nowrap; }
.algo-table .mono { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); }

/* ── Market pricing ──────────────────────────────────────────────────────── */

.price-kind {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: var(--sp-2);
}
.mcard .price-big {
  font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 500;
  color: var(--text-0); letter-spacing: -0.02em; margin: var(--sp-3) 0 var(--sp-2);
}

/* Numbers right-aligned in tabular figures so a column of prices reads as one. */
.cmp-table .t-right, .cmp-table td.price-num { text-align: right; }
.cmp-table td.price-num { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-1); white-space: nowrap; }
.cmp-table tr.price-group > * { border-top-color: var(--line-2); }
.cmp-table tbody th { white-space: nowrap; }
.price-region { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-3); margin-top: 1px; }
.price-sources a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.price-sources a:hover { color: var(--text-0); }


/* ── FAQ — native <details>, so it works with zero JavaScript ────────────── */

.faq { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--ink-2); }
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-base); font-weight: 500; color: var(--text-0);
  cursor: pointer; list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { background: var(--ink-3); color: var(--text-0); }
.faq-q .chev { flex-shrink: 0; width: 15px; height: 15px; color: var(--text-3); transition: transform 0.15s ease; }
.faq-item[open] > .faq-q { color: var(--accent-400); }
.faq-item[open] > .faq-q .chev { transform: rotate(180deg); color: var(--accent-400); }
.faq-a { padding: 0 var(--sp-5) var(--sp-5); font-size: var(--fs-md); line-height: 1.7; color: var(--text-2); max-width: 86ch; }
.faq-a p + p { margin-top: var(--sp-3); }

/* ── Final call to action ────────────────────────────────────────────────── */

.cta-band {
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background:
    radial-gradient(44rem 20rem at 50% -30%, rgba(20, 192, 137, 0.10), transparent 70%),
    var(--ink-2);
  padding: var(--sp-16) var(--sp-6);
  text-align: center;
}
.cta-title { font-size: clamp(23px, 2.8vw, 33px); font-weight: 600; letter-spacing: -0.025em; color: var(--text-0); }
.cta-lede { font-size: var(--fs-lg); line-height: 1.6; color: var(--text-2); margin: var(--sp-4) auto 0; max-width: 58ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-8); }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--line); padding: var(--sp-12) 0 var(--sp-8); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
.footer-brand-note { font-size: var(--fs-sm); line-height: 1.65; color: var(--text-3); margin-top: var(--sp-4); max-width: 38ch; }
.footer-col-title {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-2); margin-bottom: var(--sp-4);
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-links a { font-size: var(--fs-sm); color: var(--text-3); }
.footer-links a:hover { color: var(--text-0); }
.footer-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4);
  margin-top: var(--sp-10); padding-top: var(--sp-5); border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--text-3);
}

/* ── 17. Utilities ───────────────────────────────────────────────────────── */

.mt-1 { margin-top: var(--sp-1); }  .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }  .mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }  .mt-6 { margin-top: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.ml-auto { margin-left: auto; }
.w-full { width: 100%; }
.flush { margin: 0 !important; }
.inline-block { display: inline-block; }
.hidden { display: none !important; }
[hidden] { display: none !important; }

/* Sizing helpers.
   These exist because the Content-Security-Policy forbids style="" attributes,
   so a one-off width has to be a class. Naming them by role rather than by
   pixel value keeps the column widths of the tables consistent across pages. */
.fw-sm { min-width: 170px; }
.fw-md { min-width: 210px; }
.fw-lg { min-width: 260px; }
.fw-xl { min-width: 280px; }

.w-id-sm  { max-width: 10rem; }
.w-id-md  { max-width: 12rem; }
.w-id-lg  { max-width: 15rem; }
.w-sub    { max-width: 190px; }
.w-desc   { max-width: 22rem; }
.w-chevron { width: 32px; }

.dot-accent { background: var(--accent-400) !important; }
.dot-info   { background: var(--info-400) !important; }

/* ── 18. Responsive & print ──────────────────────────────────────────────── */

/* Laptop: tighten the shell before anything collapses. */
@media (max-width: 1280px) {
  :root { --sidebar-w: 212px; }
  .content { padding: var(--sp-5); }
}

/* Tablet: the sidebar becomes a horizontal rail above the content. Desktop is
   the primary target for this console, so this is a graceful fallback rather
   than a separate small-screen design. */
@media (max-width: 1024px) {
  .app { flex-direction: column; }
  .sidebar {
    width: 100%; flex-basis: auto; height: auto; position: static;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .sidebar-nav { display: flex; gap: var(--sp-3); overflow-x: auto; padding: var(--sp-2) var(--sp-4); }
  .nav-group { display: flex; align-items: center; gap: var(--sp-1); }
  .nav-group + .nav-group { margin-top: 0; }
  .nav-group-label { display: none; }
  .nav-item { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  .nav-item + .nav-item { margin-top: 0; }
  .nav-item.is-active { border-left: 0; border-bottom-color: var(--accent-500); }
  .sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
  .identity { padding: 0 var(--sp-2); }
  .sidebar-footer form { flex-shrink: 0; }

  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { display: none; }
  .dl-key { flex-basis: 140px; }

  /* Marketing site: one column for the fold, two for every card grid. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .hero-title { max-width: 28ch; }
  .feature-grid, .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .pqc-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .section { padding: var(--sp-16) 0; }
}

/* Below this width the marketing header has no room for seven anchors, so the
   nav collapses behind a toggle. The button is inert above this breakpoint and
   the nav is never left hidden there — see landing.js, which uses the same
   width. The brand plus the full nav need roughly 960px; 900px left a band where
   labels wrapped onto two lines (a 1366px laptop at 150% scaling is 911px). */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .site-header .container { flex-wrap: wrap; }
  .site-nav {
    order: 3; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid var(--line);
    margin: 0 calc(var(--sp-6) * -1);
    padding: var(--sp-2) var(--sp-6) var(--sp-4);
  }
  .site-nav a { padding: var(--sp-3) 0; font-size: var(--fs-base); }
  .site-nav a + a { border-top: 1px solid var(--line); }
  .site-nav .btn { margin-top: var(--sp-3); justify-content: center; border-top: 0; }
}

@media (max-width: 720px) {
  .content { padding: var(--sp-4); }
  .page-head { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .filterbar-actions { margin-left: 0; }
  .dl-row { flex-direction: column; gap: var(--sp-1); }
  .dl-key { flex-basis: auto; }
  .spec-row { flex-direction: column; gap: var(--sp-1); }
  .spec-key { flex-basis: auto; }
  .topbar { padding: 0 var(--sp-4); }
  .topbar-meta { gap: var(--sp-3); }

  /* Marketing site: single column throughout. The comparison table keeps its
     own horizontal scroller rather than collapsing — a reader comparing two
     deployment models needs the columns side by side to read a row at all. */
  .section { padding: var(--sp-12) 0; }
  .section-tight { padding: var(--sp-10) 0; }
  .hero { padding: var(--sp-12) 0 var(--sp-10); }
  .hero-actions .btn { flex: 1 1 auto; }
  .feature-grid, .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); }
  .stack-compare, .choice, .lp-grid { grid-template-columns: minmax(0, 1fr); }
  .cta-band { padding: var(--sp-10) var(--sp-5); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .authz-inputs { flex-direction: column; align-items: stretch; }
  .authz-plus { justify-content: center; }
}

/* Operators do print key inventories for change records. */
@media print {
  .sidebar, .topbar, .page-actions, .filterbar, .pagination, .toast, .modal { display: none !important; }
  body { background: #fff; color: #000; }
  .panel, .table-wrap { border-color: #ccc; background: #fff; }
  .table tbody td, .table thead th { color: #000; border-color: #ddd; background: #fff; }
}