@font-face {
  font-family: Geist;
  src: url("vendor/geist/GeistVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("vendor/geist/GeistMonoVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;

  /* Black and charcoal surfaces; warm orange identity, separate semantic status colors. */
  --bg: #0b0b0b;
  --panel: #151515;
  --panel-soft: #1c1c1c;
  --line: #262626;
  --line-strong: #373737;
  --text: #ededed;
  --muted: #a3a3a3;
  --dim: #696969;

  /* Warm orange interaction ramp shared by navigation, branding and controls. */
  --accent-rgb: 243, 128, 32;
  --accent: #f38020;
  --accent-hi: #ffbd80;
  --accent-hover: #ff9a45;
  --accent-press: #e8781c;
  --accent-deep: #df731c;
  --accent-100: #ffe5cd;
  --accent-200: #ffc58f;
  --accent-link: #ffae66;
  --accent-link-hover: #ffdbc0;
  --accent-soft: rgba(var(--accent-rgb), .12);
  --accent-ink: #261408;
  --accent-surface: #2b1b12;
  --accent-surface-hover: #4b2c1a;

  /* Status. Desaturated a step from the neon defaults so a critical finding
     looks urgent instead of the whole page looking urgent. */
  --green: #4ade80;
  --yellow: #fbbf24;
  --orange: #fb923c;
  --red: #fb7185;
  --blue: #ffae66;
  --cyan: #ffc58f;

  --content-width: 1500px;
  --secondary: #242424;
  --secondary-hover: #313131;
  --ring: rgba(var(--accent-rgb), .55);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 12px 28px rgba(0, 0, 0, .3);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --speed: 160ms;
  --speed-slow: 260ms;
}

* { box-sizing: border-box; }
/* A class-level `display` outranks the UA stylesheet's [hidden] rule, so any
   component styled with display:grid/flex stays on screen when scripts hide it.
   That is how the download progress bar and the password strength meter both
   rendered at rest. Settle it once, here. */
[hidden] { display: none !important; }
/* Full-bleed bands are 100vw inside a centred column, so the sliver they overhang
   by has to be clipped or the page scrolls sideways.

   The clip belongs on <html>, not <body>. On the root element overflow propagates
   to the viewport and the root itself paints as `visible`, so nothing is left
   holding a clip. Put it on <body> and <body> becomes a clipping box that eats
   its own fixed-position children — which is why the back-to-top button never
   appeared no matter what the script did to it. `clip` rather than `hidden`
   throughout: hidden would make the viewport a scroll container on both axes and
   break every sticky rail. */
/* `scrollbar-gutter` reserves the vertical scrollbar's strip whether or not there
   is one to draw. Without it a tall tab and a short tab lay out against viewports
   ~15px apart, and every switch between them nudged the whole console sideways. */
html { scroll-behavior: auto; overflow-x: clip; scrollbar-gutter: stable; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(var(--accent-rgb), .1), transparent 70%),
    linear-gradient(180deg, #151515 0, var(--bg) 46%) fixed;
  color: var(--text);
  font: 14px/1.55 Geist, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent-link); text-underline-offset: 3px; transition: color var(--speed) var(--ease); }
a:hover { color: var(--accent-link-hover); }
code, pre { font-family: "Geist Mono", ui-monospace, "Cascadia Code", Consolas, monospace; }
main { flex: 1 0 auto; width: min(var(--content-width), calc(100% - 32px)); margin: 24px auto 32px; }

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

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* Scroll-revealed sections opt out: a filled animation would pin opacity to 1
   and defeat the reveal's starting state. */
main > * { animation: none; }
details[open] > *:not(summary) { animation: reveal 220ms var(--ease); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  background: rgba(12, 12, 12, .78);
  backdrop-filter: blur(14px);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(var(--content-width), calc(100% - 32px));
  margin: 0 auto;
  padding: 10px 0;
}
.topnav { display: flex; gap: 4px; align-items: center; }
.topnav a, .linklike {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0 12px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.topnav a:hover, .linklike:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.inline-form { display: inline-flex; margin: 0; }

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 23px; font-weight: 600; letter-spacing: -.01em; }
h2 { margin-bottom: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.eyebrow {
  margin-bottom: 4px;
  color: var(--accent-link);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- status pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  animation: pop-in 200ms var(--ease) both;
}
.pill::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
}
/* Each status/severity class publishes its own RGB triple, so every component
   that carries one (pill, score chip, icon tile) can derive a matching tint,
   border, and ring from a single source instead of restating the colour. */
.risk-low, .pill.active { --sev: 53, 201, 139; color: var(--green); }
.risk-medium, .pill.warning { --sev: 232, 178, 60; color: var(--yellow); }
.risk-high { --sev: 239, 135, 68; color: var(--orange); }
.risk-critical, .pill.revoked { --sev: 239, 90, 90; color: var(--red); }
.pill.neutral { --sev: 163, 163, 163; color: #b8b8b8; }

.risk-low, .risk-medium, .risk-high, .risk-critical { background: rgba(var(--sev), .1); }
.pill.active, .pill.revoked, .pill.warning, .pill.neutral,
.pill.risk-low, .pill.risk-medium, .pill.risk-high, .pill.risk-critical {
  border-color: rgba(var(--sev), .3);
  background: rgba(var(--sev), .1);
}

/* ---------- surfaces ---------- */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.summary-grid article, .panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-md);
}
.summary-grid article {
  padding: 18px;
  animation: rise 320ms var(--ease) both;
  transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.summary-grid article:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.summary-grid article:nth-child(2) { animation-delay: 50ms; }
.summary-grid article:nth-child(3) { animation-delay: 100ms; }
.summary-grid article:nth-child(4) { animation-delay: 150ms; }
.summary-grid article:nth-child(5) { animation-delay: 200ms; }
.summary-grid article:nth-child(6) { animation-delay: 250ms; }
.summary-grid span { display: block; color: var(--muted); }
.summary-grid strong { display: block; margin-top: 8px; font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.summary-grid code { display: block; margin-top: 10px; overflow-wrap: anywhere; }
.panel { margin-bottom: 18px; overflow: hidden; animation: rise 320ms var(--ease) both; }
.panel-heading { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.panel-body { padding: 20px; }

/* ---------- forms ---------- */
.upload-form { display: grid; gap: 20px; padding: 22px 20px; }
.upload-group {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 8px 18px 18px;
  background: rgba(11, 11, 11, .3);
}
.upload-group legend {
  padding: 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.upload-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  gap: 18px;
  align-items: start;
}
label { color: var(--muted); font-weight: 600; }
input, select {
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: #111111;
  color: var(--text);
  font: inherit;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease);
}
/* The rule above is written for text fields. A checkbox is not one: left to
   inherit it, it stretches to the width of its row and grows a 6px top margin,
   which is why the profile module list read as a column of smeared boxes. */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  margin-top: 0;
  padding: 0;
  accent-color: var(--accent);
}
input:hover, select:hover { border-color: var(--line-strong); }
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}
input::placeholder { color: var(--dim); }

/* The native control parks its arrow hard against the right edge, far from the
   value. Draw our own and inset it instead. */
select {
  appearance: none;
  padding-right: 40px;
  background-image: var(--i-chevron-down);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px 8px;
  cursor: pointer;
}
select:hover, select:focus { background-image: var(--i-chevron-down); }
select option { background: #111111; color: var(--text); }

input[type="file"] { padding: 6px; }
input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 12px;
  background: var(--secondary);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--speed) var(--ease);
}
input[type="file"]::file-selector-button:hover { background: var(--secondary-hover); }
.upload-fields label { display: flex; flex-direction: column; min-width: 0; }
.upload-fields label small { margin-top: 6px; color: var(--muted); font-weight: 400; }

/* ---------- buttons ---------- */
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 16px;
  /* Dark labels on light primary actions; secondary and icon controls override. */
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: #111;
  font: inherit;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease),
    color var(--speed) var(--ease), transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
button:hover, .button:hover {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .22);
}
button:active, .button:active {
  background: linear-gradient(180deg, var(--accent-deep), var(--accent-press));
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
button:disabled, .button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

button.secondary, .button.secondary {
  border-color: var(--line-strong);
  background: var(--secondary);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
button.secondary:hover, .button.secondary:hover {
  border-color: #444444;
  background: var(--secondary-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
button.secondary:active, .button.secondary:active { background: var(--secondary); }
button.compact, .button.compact { min-height: 34px; padding: 7px 12px; font-size: 13px; }
button.danger {
  border-color: rgba(239, 90, 90, .4);
  background: rgba(239, 90, 90, .12);
  color: #fecdd3;
  box-shadow: none;
}
button.danger:hover { background: rgba(239, 90, 90, .2); color: #fff; box-shadow: 0 4px 14px rgba(239, 90, 90, .2); }
button.danger:active { background: rgba(239, 90, 90, .28); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
/* A wide table scrolls, and with a mouse it has to *look* like it scrolls: the
   default bar fades out when the pointer is elsewhere, leaving a table that is
   merely truncated as far as the reader can tell. Only for fine pointers, though.
   Touch devices scroll a table by dragging it and draw an overlay bar while you
   do; styling ::-webkit-scrollbar there replaces that with a permanent classic
   bar under every table, which is clutter nobody asked for. */
@media (pointer: fine) {
  .table-wrap {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .table-wrap::-webkit-scrollbar { height: 9px; }
  .table-wrap::-webkit-scrollbar-track { background: transparent; }
  .table-wrap::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--line-strong); }
  .table-wrap::-webkit-scrollbar-thumb:hover { background: #494949; }
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th {
  background: rgba(11, 11, 11, .45);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
tbody tr { transition: background var(--speed) var(--ease); }
tbody tr:hover { background: rgba(255, 255, 255, .025); }
tbody tr:last-child td { border-bottom: 0; }
td small { display: block; color: var(--muted); }
td code { overflow-wrap: anywhere; }
.empty { padding: 28px; color: var(--muted); text-align: center; }
.empty strong { display: block; margin-bottom: 4px; color: var(--text); font-weight: 600; }

/* ---------- flashes ---------- */
.flash {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  overflow-wrap: anywhere;
  overflow: hidden;
  /* A concrete height to animate from: max-height cannot transition out of
     `none`, and the flash is a line or two of text. */
  max-height: 12rem;
  animation: rise 300ms var(--ease) both;
  transition: opacity var(--speed-slow) var(--ease), transform var(--speed-slow) var(--ease),
    margin var(--speed-slow) var(--ease), max-height var(--speed-slow) var(--ease);
}
/* Collapse the row as it goes, so the content below does not jump. */
.flash.is-leaving {
  max-height: 0;
  margin-bottom: 0;
  padding-block: 0;
  border-width: 0;
  opacity: 0;
  transform: translateY(-6px);
}
.flash.success { border-color: rgba(53, 201, 139, .35); background: rgba(53, 201, 139, .08); }
.flash.error { border-color: rgba(239, 90, 90, .35); background: rgba(239, 90, 90, .08); }
.flash.invite { max-height: none; border-color: var(--line); }
.flash.invite small { display: block; margin-top: 8px; }
.flash.invite.is-leaving { max-height: 0; }
pre {
  margin: 0;
  overflow: auto;
  padding: 18px;
  background: #090909;
  color: #e1e1e1;
}
.finding { border-top: 1px solid var(--line); padding: 16px 20px; }
.finding summary { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.finding pre { margin-top: 14px; border-radius: var(--radius-sm); }

/* ---------- headings ---------- */
.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 10px 0 22px;
}
.page-heading h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -.02em; }
.page-subtitle { margin: 8px 0 0; color: var(--muted); }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.back-link:hover { color: var(--text); transform: translateX(-2px); }
/* The block sits at the right of the heading (the flex row puts it there), but
   its text reads left-aligned: right-aligning a sentence that wraps leaves a
   ragged left edge, which is what made the account help text look crooked. */
.heading-help { max-width: 480px; margin: 0; color: var(--muted); }
.split-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* ---------- expand all ----------
   Always the last thing on the right of the panel's own heading — never beside the
   title on one panel and out at the edge on another. It governs that panel, so its
   antecedent is obvious, and it lands in the same place on every one of them. */
.heading-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: flex-end; }
.heading-actions .heading-help { text-align: right; }
.expand-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--secondary);
  color: var(--muted);
  box-shadow: none;
}
.finding-group-heading .expand-toggle { margin-left: auto; }
.expand-toggle:hover:not(:disabled) {
  border-color: rgba(var(--accent-rgb), .5);
  background: var(--accent-soft);
  color: var(--accent-100);
  transform: none;
  box-shadow: none;
}
.expand-toggle:active { transform: none; box-shadow: none; }
.expand-toggle .ui-icon { grid-area: 1 / 1; transition: opacity var(--speed) var(--ease), transform var(--speed-slow) var(--ease); }
.expand-toggle .collapse-glyph,
.expand-toggle[aria-expanded="true"] .expand-glyph { opacity: 0; transform: scale(.7); }
.expand-toggle[aria-expanded="true"] .collapse-glyph { opacity: 1; transform: none; }
.expand-toggle[aria-expanded="true"] { border-color: rgba(var(--accent-rgb), .45); background: var(--accent-soft); color: var(--accent-100); }
.muted { color: var(--muted); }
.field-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }

.risk-badge {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  min-width: 150px;
  border: 1px solid rgba(var(--sev, 133, 147, 166), .35);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  background: rgba(var(--sev, 133, 147, 166), .12);
  box-shadow: inset 0 0 24px rgba(var(--sev, 133, 147, 166), .1);
}
.risk-badge span { grid-column: 1 / -1; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.risk-badge strong { font-size: 38px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.risk-badge small { margin-left: 3px; }
.summary-grid .summary-text { font-size: 20px; }
/* Seven tiles sharing a column with the rail: auto-fit keeps them on one row
   when they fit and reflows them evenly when they do not, rather than stranding
   the last tile alone on a second row. */
.scan-summary { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }
.scan-summary strong { font-size: 24px; }
.scan-summary .summary-text { font-size: 16px; }

/* Coverage is one status story, not seven unrelated dashboard cards. The
   completion figure anchors the row while exceptions remain easy to scan. */
.coverage-overview {
  display: grid;
  grid-template-columns: minmax(250px, .8fr) minmax(520px, 1.8fr);
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  background: rgba(12, 12, 12, .24);
}
.coverage-completion {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-right: 1px solid var(--line);
}
.coverage-completion-value { display: flex; align-items: baseline; min-width: max-content; }
.coverage-completion-value strong {
  color: var(--accent-100);
  font-size: 38px;
  font-weight: 680;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.coverage-completion-value span { margin-left: 5px; color: var(--muted); font-size: 16px; }
.coverage-completion-label { display: block; font-weight: 600; }
.coverage-completion p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.coverage-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(92px, 1fr));
  align-items: stretch;
  margin: 0;
}
.coverage-metrics > div {
  display: flex;
  min-width: 0;
  flex-direction: column-reverse;
  justify-content: center;
  gap: 6px;
  padding: 18px 16px;
  border-right: 1px solid rgba(145, 145, 145, .12);
}
.coverage-metrics > div:last-child { border-right: 0; }
.coverage-metrics dt { color: var(--muted); font-size: 12px; line-height: 1.35; }
.coverage-metrics dd {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.coverage-metrics dd.has-exception { color: var(--red); }
.coverage-metrics dd.has-warning { color: var(--yellow); }
.sysdiagnose-read { display: grid; gap: 22px; margin-top: 18px; }
.sysdiagnose-read h3 { margin: 0 0 6px; font-size: 15px; }
.sysdiagnose-read p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.sysdiagnose-read ul { margin: 10px 0 0; padding: 0; list-style: none; }
.sysdiagnose-read li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid rgba(145, 145, 145, .12);
  font-size: 13px;
}
.sysdiagnose-read li span { overflow-wrap: anywhere; font-family: "Geist Mono", ui-monospace, monospace; }
.sysdiagnose-read li small { flex: none; color: var(--muted); }
.coverage-details { background: rgba(12, 12, 12, .18); }
.coverage-details > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  color: var(--accent-link);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  transition: color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.coverage-details > summary::-webkit-details-marker { display: none; }
.coverage-details > summary::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--speed) var(--ease);
}
.coverage-details[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.coverage-details > summary:hover { color: var(--accent-link-hover); background: var(--accent-soft); }
.coverage-details > summary small { margin-left: auto; color: var(--muted); font-weight: 500; }
.coverage-details .evidence-summary { padding-top: 0; }

/* ---------- tabs ---------- */
.tab-list {
  position: sticky;
  top: calc(var(--topbar-h, 90px) + 8px);
  z-index: 10;
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0f0f0f;
  scrollbar-width: thin;
}
.tab-list button {
  flex: 1 0 auto;
  min-width: 120px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  box-shadow: none;
}
.tab-list button:hover {
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  transform: none;
  box-shadow: none;
}
.tab-list button span {
  margin-left: 6px;
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, .08);
  font-size: 12px;
  font-weight: 600;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.tab-list button[aria-selected="true"] {
  border-color: rgba(var(--accent-rgb), .45);
  background: var(--accent-soft);
  color: var(--accent-100);
  font-weight: 600;
}
.tab-list button[aria-selected="true"] span { background: rgba(var(--accent-rgb), .3); color: var(--accent-100); }
.tab-panel { scroll-margin-top: calc(var(--topbar-h, 90px) + 76px); }
.tab-panel:focus { outline: none; }
.tab-panel:not([hidden]) { animation: rise var(--speed-slow) var(--ease) both; }

/* ---------- workspace rail ----------
   Two levels of navigation in one column: the category tabs, and the sections
   inside whichever tab is open. A scan can carry hundreds of rows per tab, so
   every section is reachable without scrolling the panel end to end. */
.workspace { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 20px; align-items: start; }
.workspace-main { min-width: 0; }
.workspace-rail {
  position: sticky;
  top: calc(var(--topbar-h, 90px) + 16px);
  z-index: 10;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - var(--topbar-h, 90px) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
/* Opaque, not blurred. A backdrop-filter on a sticky element repaints its whole
   area on every scroll frame; the top bar already pays that cost, and a second
   blurred layer sitting over a page of evidence tables is what made scrolling
   stutter. Nothing shows through behind the rail anyway. */
.tab-rail {
  display: grid;
  gap: 3px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0f0f0f;
}
.tab-rail button {
  justify-content: space-between;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  box-shadow: none;
}
.tab-rail button:hover { background: rgba(255, 255, 255, .05); color: var(--text); transform: none; box-shadow: none; }
.tab-rail button[aria-selected="true"] {
  border-color: rgba(var(--accent-rgb), .45);
  background: var(--accent-soft);
  color: var(--accent-100);
  font-weight: 600;
}
.rail-count {
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, .08);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.tab-rail button[aria-selected="true"] .rail-count { background: rgba(var(--accent-rgb), .3); color: var(--accent-100); }

.section-rail { border: 1px solid var(--line); border-radius: 14px; padding: 12px 10px; background: rgba(12, 12, 12, .6); }
.rail-title {
  margin: 0 0 8px;
  padding-left: 12px;
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.section-links { display: grid; gap: 2px; }
.section-link {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  border-left: 2px solid var(--line);
  padding: 7px 10px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.section-link:hover { border-left-color: var(--line-strong); background: rgba(255, 255, 255, .04); color: var(--text); }
.section-link.is-current { border-left-color: var(--accent); background: var(--accent-soft); color: var(--accent-100); font-weight: 600; }
.rail-tally {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 1px 7px;
  background: rgba(255, 255, 255, .07);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* The rail parks a section under the sticky top bar, not behind it. */
[data-section] { scroll-margin-top: calc(var(--topbar-h, 90px) + 20px); }

.required-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--red); }
.field-required, .field-optional { margin-left: 4px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.field-required { color: #fda4af; font-weight: 600; }
.field-optional { color: var(--dim); font-weight: 500; }
.form-action { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-top: 4px; }
.form-action small { margin-right: auto; color: var(--muted); }

/* ---------- score list ----------
   Two different facts sit in one row and must not be confused. The score badge
   is tinted for contribution size; the pill is tinted for finding severity. */
.panel-collapse-details > summary {
  cursor: pointer;
  list-style: none;
  transition: background var(--speed) var(--ease);
}
.panel-collapse-details > summary::-webkit-details-marker { display: none; }
.panel-collapse-details > summary:hover { background: rgba(255, 255, 255, .025); }
.panel-collapse-details:not([open]) > summary { border-bottom: 0; }
.panel-collapse-title, .panel-collapse-title > span { display: block; }
.panel-collapse-heading {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.panel-collapse-summary { display: flex; gap: 16px; align-items: center; }
.panel-collapse-disclosure {
  flex: 0 0 auto;
  width: 13px;
  height: 9px;
  background: currentColor;
  color: var(--muted);
  clip-path: polygon(0 12%, 50% 65%, 100% 12%, 100% 42%, 50% 95%, 0 42%);
  transition: transform var(--speed-slow) var(--ease), color var(--speed) var(--ease);
}
.panel-collapse-details:not([open]) .panel-collapse-disclosure { transform: rotate(-90deg); }
.panel-collapse-details > summary:hover .panel-collapse-disclosure { color: var(--text); }
.score-list {
  --score-columns: minmax(190px, 1fr) 92px 92px 84px;
  display: grid;
}
.score-legend {
  display: grid;
  grid-template-columns: var(--score-columns);
  gap: 16px;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 11, 11, .45);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.score-row {
  display: grid;
  grid-template-columns: var(--score-columns);
  gap: 16px;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  transition: background var(--speed) var(--ease);
}
.score-row:hover { background: rgba(255, 255, 255, .02); }
.score-row:last-child { border-bottom: 0; }
/* A shared fixed track keeps every finding aligned while leaving enough room
   for the full 0–100 contribution range. */
.score-value {
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid rgba(var(--sev, 133, 147, 166), .28);
  border-radius: 10px;
  background: rgba(var(--sev, 133, 147, 166), .14);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.score-row > .pill { justify-self: start; }
.score-copy strong, .score-copy span { display: block; }
.score-copy strong { font-weight: 600; }
.score-copy span { color: var(--muted); font-size: 12px; }
.score-confidence {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ---------- findings ----------
   `minmax(0, 1fr)`, not the implicit `auto` track. An auto track refuses to go
   below the min-content width of what is in it, and a finding holding a wide
   evidence table has a min-content width of about 1200px — so the track grew to
   1200, the card overflowed the panel, and `.panel { overflow: hidden }` quietly
   painted the last column away. Nothing could scroll, because as far as the table's
   own wrapper was concerned it had all the room it asked for. Capping the track at
   the panel's width pushes the overflow back down into .table-wrap, which is the
   one box on the page equipped to scroll it. */
.finding-list {
  --finding-columns: 8px minmax(180px, 1fr) 110px 92px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.finding-legend {
  display: grid;
  grid-template-columns: var(--finding-columns);
  gap: 14px;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 11, 11, .45);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.finding-legend .legend-confidence, .confidence { justify-self: end; }
.finding-card { border-bottom: 1px solid var(--line); transition: background var(--speed) var(--ease); }
.finding-card:last-child { border-bottom: 0; }
.finding-card > summary {
  display: grid;
  grid-template-columns: var(--finding-columns);
  gap: 14px;
  align-items: center;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
  transition: background var(--speed) var(--ease);
}
.finding-card > summary:hover { background: rgba(255, 255, 255, .03); }
.finding-card > summary::-webkit-details-marker { display: none; }
.finding-card[open] > summary { background:transparent; }
.finding-marker { width: 8px; height: 36px; border-radius: 999px; background: currentColor; }
.finding-title strong, .finding-title small { display: block; }
.finding-title strong { font-weight: 600; }
.finding-title small, .confidence { color: var(--muted); font-size: 12px; }
.disclosure { font-size: 22px; color: var(--muted); transition: transform var(--speed-slow) var(--ease), color var(--speed) var(--ease); }
.finding-card[open] .disclosure { transform: rotate(45deg); color: var(--text); }
.finding-evidence { padding: 0 20px 20px 42px; }
.finding-evidence h3 { margin: 8px 0 12px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
/* The subject is what tells two findings of the same type apart, so it sits on
   the headline itself rather than inside the evidence. */
.finding-headline { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-width: 0; }
.finding-subject { color: var(--accent-link); font-size: 13px; overflow-wrap: anywhere; }
.finding-reason { margin: 14px 0; color: #e8e8e8; }
/* Each finding category is its own panel so the rail can jump straight to it. */
.finding-group-heading { display: flex; align-items: center; gap: 12px; }
.finding-group-heading h2, .finding-group-heading p { margin: 0; }
.finding-group-heading p { color: var(--muted); font-size: 12px; }
.category-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-200);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
}
.finding-group-network .category-icon { background: rgba(165, 165, 165, .12); color: var(--cyan); }
.finding-group-device_integrity .category-icon { background: rgba(239, 90, 90, .12); color: #fda4af; }
.finding-group-applications .category-icon { background: rgba(149, 149, 149, .12); color: #bebebe; }
.finding-group-configuration .category-icon { background: rgba(232, 178, 60, .12); color: var(--yellow); }

/* ---------- expandable evidence tables ----------
   DNS packets, VPN flows, and installed apps are all the same shape of problem:
   hundreds of rows you want to sort and scan, each hiding a page of evidence.
   One component: a sortable table whose rows open in place.

   Fixed layout with a shared column rhythm, so the three tables line up as one
   system. Auto layout sized each column to whatever happened to be in it, which
   is why DOMAIN and PACKAGE sprawled while their neighbours were squeezed. Each
   table declares its own <colgroup>: one flexible identifier column, the rest on
   the scale below. */
.evidence-table[data-expandable] { table-layout: fixed; width: 100%; }
.evidence-table[data-expandable] th,
.evidence-table[data-expandable] td { overflow-wrap: anywhere; }

/* A floor, one per table: the sum of its colgroup plus a usable identifier column.

   Given column widths that add up to more than the table is allowed to be, a fixed
   layout does not overflow — it quietly scales every column down, past the width
   its own heading needs, and the headings wrap. That is what stacked the DNS header
   row three lines deep on a 1280px screen while the apps table beside it stayed on
   one, and it is why the three tables stopped looking like one system. Below its
   floor a table scrolls in its wrapper instead, and every header row on the page
   stays exactly one line tall, whatever the window is doing. */
#vpn-flows .evidence-table { min-width: 1030px; }
#dns-packets .evidence-table { min-width: 1110px; }
#apps-list .evidence-table { min-width: 900px; }
.col-time { width: 190px; }
.col-badge { width: 116px; }
/* Wide enough for the longest header on the scale ("DECLARED", "ANSWERS") plus the
   cell padding *and* the room the sort arrow reserves on its right: a column that
   cannot hold its own heading wraps it. */
.col-narrow { width: 114px; }
.col-medium { width: 132px; }
.col-expand { width: 52px; }
/* The nested permission table keeps auto layout: it has its own shape. */
.evidence-detail .evidence-table { table-layout: auto; }

.evidence-row { cursor: pointer; }
.evidence-row > td { transition: background var(--speed) var(--ease); }
.evidence-row:hover > td { background: rgba(255, 255, 255, .035); }
.evidence-row.is-open > td { border-bottom-color: var(--line); }
.evidence-row > td > code { overflow-wrap: anywhere; }
.expand-cell { width: 46px; padding-left: 0 !important; text-align: right; }
.row-expand {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
.row-expand:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .06); color: var(--text); transform: none; box-shadow: none; }
.row-expand:active { transform: none; box-shadow: none; }
.evidence-row.is-open .disclosure { transform: rotate(45deg); color: var(--accent-100); }

.evidence-detail > td {
  padding: 4px 20px 20px;
  background: rgba(11, 11, 11, .55);
  border-bottom: 1px solid var(--line-strong);
}
.evidence-detail .evidence-summary { padding: 12px 0 0; }
.evidence-detail .dns-sections { padding: 8px 0 0; }
.evidence-detail .dns-route { padding: 12px 0 0; }
.permission-name { overflow-wrap: break-word; }

/* ---------- evidence search ---------- */
.evidence-search {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 11, 11, .35);
}
.evidence-search input { margin: 0; }
.evidence-search button, .evidence-search .button { flex: 0 0 auto; min-width: 104px; }

/* ---------- evidence ---------- */
.evidence-summary { padding: 16px 20px; }
/* Inside a finding the wrapper already carries the inset, so the summary must
   not add its own — that is what pushed the evidence cards out of line with the
   "Evidence" heading above them. */
.finding-evidence .evidence-summary { padding: 0; }
/* One rule decides how wide any evidence field is, everywhere in the console:

     a field is as wide as its own value needs, and no wider.

   An auto-fit grid could not express that — every column came out the same width,
   so a one-word resolver address got the same box as a SHA-256, and a field
   holding a single chip was promoted to a full row because a longer list might
   have needed one. Flex sizes each box from its content (flex-basis: auto), lets
   the boxes on a line share what is left over, and hands the full row only to the
   values that genuinely are row-sized things: a table, a nested record, or a list
   long enough to have been collapsed. */
.evidence-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.evidence-grid > div {
  flex: 1 1 auto;
  min-width: min(160px, 100%);
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: rgba(11, 11, 11, .45);
  transition: border-color var(--speed) var(--ease);
}
.evidence-grid > div:hover { border-color: var(--line-strong); }
.evidence-grid.compact > div { min-width: min(130px, 100%); }
.evidence-grid dt { margin-bottom: 4px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.evidence-grid dd { margin: 0; min-width: 0; }
.evidence-value { white-space: normal; overflow-wrap: anywhere; color: #e8e8e8; }
.metric-value { font-weight: 600; font-variant-numeric: tabular-nums; }

/* The three row-sized values. Anything else keeps the width of its content. */
.evidence-grid > div:has(.table-wrap),
.evidence-grid > div:has(.evidence-grid),
.evidence-grid > div:has([data-collapsible]) { flex-basis: 100%; }

.evidence-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.evidence-list > li { min-width: 0; border-radius: 6px; padding: 3px 8px; background: #212121; }
.evidence-list > li:has(.evidence-grid) { width: 100%; padding: 0; background: transparent; }

/* ---------- long lists ----------
   Forty granted permissions used to be penned into a fixed height with their own
   scrollbar: it hid how many there were, and putting the pointer over it stole
   the page's scroll. Show a couple of rows, fade the cut so it plainly continues,
   and let the reader ask for the rest. Every item stays in the DOM, so find-in-page
   and printing still see the whole list. */
.evidence-list-wrap { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.evidence-list-wrap.is-collapsed .evidence-list {
  max-height: 82px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 46px, transparent);
  mask-image: linear-gradient(180deg, #000 46px, transparent);
}
.list-toggle {
  min-height: 26px;
  padding: 3px 10px;
  border-color: var(--line-strong);
  border-radius: 999px;
  background: var(--secondary);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
}
.list-toggle:hover {
  background: var(--secondary-hover);
  color: var(--text);
  transform: none;
  box-shadow: none;
}

/* The frame and its rounding belong to the scroll box, not to the table.
   `overflow: hidden` on a <table> makes the table clip its own cells: the table
   box stays at width:100% while the columns inside need more, so the last column
   is simply painted away — and the wrapper never sees an overflow to scroll. That
   is what cut "Is System" off the end of the app evidence table. Move the frame
   out to the wrapper, which can actually scroll. */
.table-wrap:has(> .record-table), .table-wrap:has(> .answer-table) {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.record-table { border-collapse: collapse; }
/* Headers keep the console's header scale. At 13px these read a size larger than
   every other table on the page. */
.record-table th, .record-table td { padding: 9px 12px; vertical-align: middle; }
.record-table td { font-size: 13px; }
/* Headers sit on one baseline, at the bottom of the header row. Centred, a header
   that fits on one line ("Is System") floats to the middle of a row whose height is
   set by one that takes two ("Permissions Truncated") — so no two headers in the
   row start at the same height. Bottom-aligned they all land on the line directly
   above the data they label, however many lines each of them needs. */
.record-table th, .answer-table th { vertical-align: bottom; }
.record-table tbody tr:last-child td { border-bottom: 0; }
/* `anywhere` lets a cell shrink to one character wide, which is how a column of
   package names ended up crushed to four letters beside a column of permission
   chips. `break-word` keeps the longest word as the column's minimum, so an
   identifier gets the width it needs and the table scrolls if the row is wide. */
.record-table code { overflow-wrap: break-word; color: #e8e8e8; }
/* A floor, not a target. At 180px five of these columns alone came to 900px and
   the table could not fit any panel it was put in; 130px still holds a package
   name without crushing it, and leaves the chip column the room it actually needs. */
.record-table td:not(:has(.evidence-list)) { min-width: 130px; }

/* ---------- indicators ---------- */
/* See .finding-list: an auto track will not shrink below its content's min-content
   width, and these hold provider evidence that can be very wide. */
.card-table { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 20px; }
.indicator-card {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 130px auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px;
  background: rgba(11, 11, 11, .4);
  transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.indicator-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.indicator-main code { display: block; margin-top: 4px; font-size: 14px; overflow-wrap: anywhere; }
.indicator-main p { margin: 6px 0 0; color: var(--muted); }
.indicator-type { color: var(--cyan); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.indicator-provider span, .indicator-provider strong { display: block; }
.indicator-provider span { color: var(--muted); font-size: 12px; }
.indicator-provider strong { font-weight: 600; }
.indicator-score {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  border: 1px solid rgba(var(--sev, 133, 147, 166), .3);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  background: rgba(var(--sev, 133, 147, 166), .14);
}
.indicator-score strong { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.indicator-score span { color: var(--muted); font-size: 12px; }
.inline-details { grid-column: 1 / -1; }
.inline-details > summary {
  width: fit-content;
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--accent-link);
  cursor: pointer;
  transition: color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.inline-details > summary:hover { background: var(--accent-soft); color: var(--accent-link-hover); }
.inline-details .evidence-grid { margin-top: 10px; }

.protocol-badge, .direction-badge {
  display: inline-flex;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 8px;
  background: rgba(145, 145, 145, .12);
  color: #b8b8b8;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
}
.direction-badge { border-color: rgba(149, 149, 149, .28); background: rgba(149, 149, 149, .12); color: #bebebe; }
.protocol-tcp { border-color: rgba(149, 149, 149, .3); background: rgba(149, 149, 149, .14); color: #bebebe; }
.protocol-udp { border-color: rgba(153, 153, 153, .32); background: rgba(153, 153, 153, .16); color: var(--accent-200); }
.protocol-icmp { border-color: rgba(239, 135, 68, .3); background: rgba(239, 135, 68, .14); color: #fdba74; }
.traffic-up, .traffic-down { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; }
.traffic-up { color: var(--yellow); }
.traffic-down { color: #cecece; }
.evidence-table small { display: block; color: var(--muted); }

/* ---------- dns ---------- */
.direction-badge.response { background: rgba(53, 201, 139, .12); color: var(--green); }
.dns-route { display: flex; gap: 12px; align-items: center; padding: 14px 20px 0; color: var(--muted); }

/* ---------- downloads / artifacts ---------- */
/* Email status: facts in labelled columns, then one notice whose icon and
   colour carry the outcome. The resend action lives in the panel heading. */
.delivery-action { display: flex; flex-direction: column; flex-shrink: 0; align-items: flex-end; gap: 8px; }
.delivery-progress { max-width: 34ch; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: right; }
.delivery-facts { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr) minmax(0, 1fr); gap: 16px 24px; margin: 0; padding: 16px 24px 20px; }
.delivery-facts > div { min-width: 0; }
.delivery-facts dt { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--muted); font-size: 13px; }
.delivery-facts dd { margin: 0; color: var(--text); font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.delivery-notice {
  display: flex; align-items: flex-start; gap: 12px; margin: 0 24px 24px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: var(--radius-md);
  background: color-mix(in srgb, currentColor 7%, transparent);
}
.delivery-notice .ui-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
.delivery-notice p { margin: 0; color: var(--text); font-size: 14px; line-height: 1.55; }
.delivery-notice strong { font-weight: 600; }
.delivery-notice.is-failed { color: var(--red); }
.delivery-notice.is-sent { color: var(--green); }
.delivery-notice.is-pending { color: var(--yellow); }

/* Exported files: one row per artifact, the same anatomy as the scanner download. */
.artifact-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 24px; }
.artifact-row + .artifact-row { border-top: 1px solid var(--line); }
.artifact-list { padding-bottom: 6px; }
.artifact-row .settings-copy > strong { font-size: 15px; font-weight: 600; }
.artifact-row .settings-copy > small { color: var(--muted); font-size: 12px; line-height: 18px; }

/* ---------- search ---------- */
.search-panel { border-bottom: 1px solid var(--line); background: rgba(11, 11, 11, .35); }
.primary-search { padding: 18px 20px 14px; }
.primary-search > label { display: block; margin-bottom: 8px; }
.search-input { display: flex; gap: 10px; }
.search-input input { margin: 0; font-size: 15px; }
.search-input button { min-width: 120px; }
.advanced-filters { border-top: 1px solid var(--line); }
.advanced-filters > summary {
  padding: 12px 20px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
  transition: color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.advanced-filters > summary:hover { background: rgba(255, 255, 255, .03); color: var(--text); }
.active-filter-dot {
  margin-left: 8px;
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--accent-soft);
  color: var(--accent-200);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.filter-grid { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 12px; align-items: end; padding: 4px 20px 18px; }
.audit-filter-grid { grid-template-columns: repeat(4, minmax(160px, 1fr)); padding: 18px 20px; }
.filter-actions { display: flex; gap: 8px; }
.results-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 20px; color: var(--muted); }
.results-meta strong { color: var(--text); font-weight: 600; }
/* Pushed to the far end of the strip: it governs the rows below, but it is a
   setting, not a result. */
.rows-per-page { display: flex; gap: 8px; align-items: center; margin-left: auto; font-size: 13px; font-weight: 500; }
.rows-per-page .select { margin-top: 0; }
.rows-per-page select, .rows-per-page .select-button { min-height: 32px; margin-top: 0; padding: 4px 10px; font-size: 13px; }
.rows-per-page .select-button { padding-right: 8px; }
.filter-chip {
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 999px;
  padding: 2px 10px;
  background: var(--accent-soft);
  color: var(--accent-100);
  font-size: 12px;
  font-weight: 600;
}
/* Score only — the tint carries the severity. Fixed width and tabular figures
   keep "5" and "100" aligned down the column. */
.risk-score {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  width: 82px;
  padding: 6px 10px;
  border: 1px solid rgba(var(--sev, 133, 147, 166), .28);
  border-radius: 999px;
  background: rgba(var(--sev, 133, 147, 166), .1);
  font-variant-numeric: tabular-nums;
}
.risk-score strong { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.risk-score-max { color: var(--muted); font-size: 12px; font-weight: 500; }
.evidence-count { display: inline-flex; gap: 4px; margin: 0 8px 4px 0; color: var(--muted); white-space: nowrap; }
.evidence-count strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.is-loading { opacity: .5; pointer-events: none; transition: opacity var(--speed) var(--ease); }

/* ---------- module picker ----------
   The steps of a profile are chosen here. The server orders them by the order the
   checkboxes appear in the form, so the badge on each selected card is its real
   execution step — the script numbers them in DOM order, never in click order. */
.picker-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.picker-count { margin: 0; color: var(--muted); }
.picker-count strong { color: var(--text); font-variant-numeric: tabular-nums; }
.picker-count small { display: block; margin-top: 2px; color: var(--dim); font-size: 12px; }
.picker-actions { display: flex; gap: 8px; }

.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.picker-card {
  /* The real checkbox is taken out of flow below, so the card has to be the box
     it is taken out of — otherwise it lands against some far-off ancestor and
     sits, invisible but clickable, over whatever happens to be there. */
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: rgba(11, 11, 11, .45);
  color: var(--text);
  font-weight: 400;
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.picker-card:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .03); }
.picker-card:has(:checked) { border-color: rgba(var(--accent-rgb), .5); background: var(--accent-soft); }
/* The native box is kept — it is what submits, and what a screen reader reads —
   but it draws differently on every platform, so hide it and draw the indicator
   beside it. The focus ring has to be re-hung on the card, or keyboard users lose
   the only cue they had. */
.picker-card input[type="checkbox"] { position: absolute; opacity: 0; width: 18px; height: 18px; }
.picker-card:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.picker-box {
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #111111;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.picker-card:has(:checked) .picker-box {
  border-color: var(--accent);
  background: #333 var(--i-check) center / 10px no-repeat;
}
.picker-copy { min-width: 0; }
.picker-copy strong, .picker-copy small { display: block; overflow-wrap: anywhere; }
.picker-copy strong { font-weight: 600; }
.picker-copy small { color: var(--muted); font-size: 12px; }
/* Empty until the card is chosen, so an unselected list carries no phantom steps. */
.picker-order {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .3);
  color: var(--accent-100);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.picker-order:empty { background: none; }

/* Seven columns of device telemetry beside a 252px rail is the tightest fit in the
   console. At the shared 16px the cell padding alone came to 224px of the row —
   enough on its own to push the table off the panel on a 1200px screen. */
.stack-table th, .stack-table td { padding-inline: 12px; }

/* ---------- profile steps ---------- */
/* Steps is the only column that should absorb the slack. Left to itself it took
   most of the row, and Status and Action ended up at the far right edge, a long
   way from the profile they describe. */
.col-profile { width: 260px; }
.profile-table { table-layout: fixed; }
.profile-table th, .profile-table td { overflow-wrap: anywhere; }
.step-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.step-chips li {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px 3px 3px;
  background: rgba(11, 11, 11, .5);
  font-size: 12px;
}
.step-index {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-100);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- device assignment ----------
   The cell reports what the device is running, and nothing more. Choosing a scanner
   needs three selects, and three selects in a table cell is what dragged the devices
   table wider than the page — so that lives in a dialog, reached from the Action
   column with every other control that acts on the device. */
.mode-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.mode-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  background: rgba(11, 11, 11, .5);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
/* Unassign is destructive and belongs at the far end from Save, not next to it. */
.modal-foot-start { margin-right: auto; }

/* ---------- audit timeline ---------- */
/* See .finding-list: audit details render the same evidence tables. */
.audit-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.audit-event {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 6px 16px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  animation: rise 320ms var(--ease) both;
  transition: background var(--speed) var(--ease);
}
.audit-event:hover { background: rgba(255, 255, 255, .025); }
.audit-event:last-child { border-bottom: 0; }
.audit-event:nth-child(2) { animation-delay: 40ms; }
.audit-event:nth-child(3) { animation-delay: 80ms; }
.audit-event:nth-child(4) { animation-delay: 120ms; }
.audit-event:nth-child(5) { animation-delay: 160ms; }
.audit-event:nth-child(n + 6) { animation-delay: 200ms; }
.audit-rail {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.audit-copy { min-width: 0; }
.audit-copy strong { display: block; font-weight: 600; }
.audit-actor, .audit-copy small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.audit-time {
  justify-self: end;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.audit-time small { display: block; margin-top: 2px; color: var(--dim); }
.audit-details { grid-column: 2 / -1; margin-top: 4px; }

/* ---------- account ---------- */
.account-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.account-card { overflow: visible; }
.account-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.account-details > div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: rgba(11, 11, 11, .4);
  transition: border-color var(--speed) var(--ease);
}
.account-details > div:hover { border-color: var(--line-strong); }
.account-details span, .account-details strong { display: block; }
.account-details span { margin-bottom: 5px; color: var(--muted); font-size: 12px; }
.account-details strong { font-weight: 600; overflow-wrap: anywhere; }
.session-action { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.session-action p { margin: 5px 0 0; color: var(--muted); }
.session-action form { flex: 0 0 auto; margin: 0; }

/* ---------- credentials ---------- */
.password-form { display: grid; gap: 18px; max-width: 520px; padding: 22px 20px; }
.password-form .form-action { justify-content: space-between; }

.session-list { display: grid; }
.session-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  transition: background var(--speed) var(--ease);
}
.session-row:last-child { border-bottom: 0; }
.session-row:hover { background: rgba(255, 255, 255, .02); }
/* The session you are reading this in: tinted so revoking the wrong one is hard. */
.session-row.is-current { background: rgba(var(--accent-rgb), .07); }
.session-row form { margin: 0; }
.session-copy { min-width: 0; }
.session-copy strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.session-copy span, .session-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.session-copy small { color: var(--dim); }

.artifact-summary { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.artifact-summary strong, .artifact-action strong, .artifact-action small { display: block; }
.artifact-summary strong { font-weight: 600; }
.artifact-summary p { margin: 4px 0 0; color: var(--muted); }
.artifact-action small { color: var(--muted); font-weight: 400; }
.artifact-action { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.artifact-action strong { font-weight: 600; }
/* Same principle as the evidence grid: each fact is as wide as its value needs.
   The digest is 64 characters and the other two are a handful, so they are not
   given matching columns. */
.artifact-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.artifact-facts > div {
  flex: 1 1 auto;
  min-width: min(180px, 100%);
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: rgba(11, 11, 11, .45);
}
.artifact-fact-wide { flex-basis: 340px; }
.artifact-facts code { color: #e8e8e8; font-size: 12px; }
.artifact-facts strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.inline-notice { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: rgba(11, 11, 11, .4); color: var(--muted); }

/* ---------- device groups ---------- */
.group-manager { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 18px 20px; }
.group-rename-form { display: flex; gap: 7px; align-items: center; }
.group-rename-form input { min-width: 150px; margin: 0; padding: 8px 10px; }
/* Every control that acts on a device lives here, so it has to hold four of them
   without making the row twice the height of the data beside it. Two columns, each
   button stretched to its cell, so the group reads as one block rather than four
   buttons of four different widths. */
.action-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  /* Wide enough for the longest label on it ("Edit details") in both columns, and
     not a pixel wider: this column and the device id were between them costing the
     table more width than the page had to give it. */
  min-width: 220px;
}
.action-stack form { margin: 0; }
.action-stack button, .action-stack .button { width: 100%; }
/* The one primary action when there is nothing else to pair it with. */
.action-wide { grid-column: 1 / -1; }
.local-time { display: inline-block; white-space: nowrap; }
.audit-time .local-time { white-space: normal; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}
.filter-bar input,
.filter-bar select { min-width: 160px; }

.pagination {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.pagination a {
  border-radius: 7px;
  padding: 6px 10px;
  text-decoration: none;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.pagination a:hover { background: var(--accent-soft); }

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

/* ---------- back to top ----------
   Visibility rides on .is-visible, never the [hidden] attribute: the global
   `[hidden] { display: none !important }` rule would win over any display here
   and there would be nothing to transition from. */
.to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(var(--accent-rgb), .55);
  border-radius: 50%;
  /* Filled with the accent, not tinted glass. A dark circle on a dark page at the
     very edge of the viewport is there but not *seen*, which is indistinguishable
     from broken. */
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: #111;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 0 5px rgba(var(--accent-rgb), .12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(.92);
  transition: opacity var(--speed-slow) var(--ease), transform var(--speed-slow) var(--ease),
    visibility var(--speed-slow) var(--ease), border-color var(--speed) var(--ease),
    background var(--speed) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.to-top:hover {
  border-color: var(--accent-hi);
  background: linear-gradient(180deg, var(--accent-hover), var(--accent-press));
  color: #111;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(var(--accent-rgb), .45), 0 0 0 6px rgba(var(--accent-rgb), .16);
}
.to-top:active { transform: none; box-shadow: var(--shadow-sm); }

/* ---------- brand ---------- */
.brand-block {
  display: flex;
  gap: 12px;
  align-items: center;
  border-radius: var(--radius-md);
  padding: 6px 10px 6px 6px;
  color: inherit;
  text-decoration: none;
  transition: background var(--speed) var(--ease);
}
.brand-block:hover { background: rgba(255, 255, 255, .05); }
.brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(var(--accent-rgb), .45);
  border-radius: 11px;
  background: linear-gradient(150deg, rgba(var(--accent-rgb), .35), rgba(var(--accent-rgb), .12));
}
.brand-glyph { width: 24px; height: 24px; transition: transform var(--speed-slow) var(--ease); }
.brand-block:hover .brand-glyph { transform: scale(1.06); }
.brand-text { display: grid; }
.brand-text .eyebrow { margin-bottom: 1px; }
/* "Mobile Hexii" is the product's name, not a paragraph: let the nav beside it
   wrap instead of breaking the wordmark across two lines. */
.brand-name { color: var(--text); font-size: 19px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }

/* ---------- dropzones ---------- */
.dropzone-field { display: flex; flex-direction: column; min-width: 0; }
.dropzone-caption { margin-bottom: 6px; }
.dropzone {
  position: relative;
  display: block;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  background: rgba(11, 11, 11, .45);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.dropzone:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .06); }
.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.dropzone.is-focused { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.dropzone.is-dragging {
  border-color: var(--accent);
  border-style: solid;
  background: rgba(var(--accent-rgb), .14);
  transform: scale(1.005);
}
.dropzone.has-file { border-style: solid; border-color: rgba(53, 201, 139, .45); background: rgba(53, 201, 139, .07); }
.dropzone-body { display: grid; gap: 5px; justify-items: center; pointer-events: none; }
.dropzone-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-200);
  font-size: 15px;
  font-weight: 600;
}
.dropzone.has-file .dropzone-icon { background: rgba(53, 201, 139, .16); color: var(--green); }
.dropzone-title { color: var(--text); font-weight: 600; }
.dropzone-browse { color: var(--accent-link); text-decoration: underline; text-underline-offset: 2px; }
.dropzone-hint { color: var(--muted); font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
.dropzone-hint strong { color: var(--text); font-weight: 600; }

/* ---------- modal ---------- */
dialog.modal {
  width: min(440px, calc(100vw - 32px));
  margin: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 0;
  background: linear-gradient(160deg, #202020, #131313);
  color: var(--text);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
dialog.modal::backdrop {
  background: rgba(6, 6, 6, .68);
  backdrop-filter: blur(3px);
  animation: fade-in 200ms var(--ease);
}
dialog.modal[open] { animation: pop-in 200ms var(--ease); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 18px; font-weight: 600; }
.modal-close {
  min-height: 32px;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  box-shadow: none;
}
.modal-close:hover { background: rgba(255, 255, 255, .07); color: var(--text); transform: none; box-shadow: none; }
.modal-body { display: grid; gap: 16px; padding: 20px; }
.modal-context { display: grid; gap: 2px; margin: 0; }
.modal-context code { overflow-wrap: anywhere; color: var(--muted); }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); background: rgba(11, 11, 11, .4); }

.field { display: grid; gap: 6px; }
.field label { color: var(--muted); font-size: 13px; font-weight: 600; }
/* The field already spaces its own rows; the control must not add a second gap.
   `.select` is the scripted listbox that stands in for a native <select>. */
.field input, .field select, .field .select { margin-top: 0; }
.field-hint { color: var(--muted); font-size: 12px; }

/* ---------- copy to clipboard ---------- */
.copyable, .has-copy { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.copyable > code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-button {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--dim);
  box-shadow: none;
  opacity: .75;
  transition: color var(--speed) var(--ease), background var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
.copy-button:hover {
  border-color: var(--line);
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  opacity: 1;
  transform: none;
  box-shadow: none;
}
.copy-button:active { transform: none; box-shadow: none; }
.copy-button .ui-icon { grid-area: 1 / 1; transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease); }
.copy-button .copy-tick, .copy-button.is-copied .copy-icon { opacity: 0; transform: scale(.8); }
.copy-button.is-copied { border-color: rgba(53, 201, 139, .4); background: rgba(53, 201, 139, .14); color: var(--green); opacity: 1; }
.copy-button.is-copied .copy-tick { opacity: 1; transform: none; }
.copy-button.is-failed { border-color: rgba(239, 90, 90, .4); color: var(--red); opacity: 1; }
td .copy-button, .modal-context .copy-button { opacity: .55; }
tr:hover .copy-button, td .copy-button:focus-visible, .copyable:hover .copy-button { opacity: 1; }

/* ---------- download progress ---------- */
.download-progress {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  background: rgba(11, 11, 11, .45);
  animation: rise 260ms var(--ease) both;
}
.download-progress-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.download-progress-head strong { font-weight: 600; }
.download-progress-head span { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.download-progress small { color: var(--dim); font-size: 12px; }

.progress-track {
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: #212121;
  appearance: none;
}
.progress-track::-webkit-progress-bar { border-radius: 999px; background: #212121; }
.progress-track::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  transition: width var(--speed) linear;
}
.progress-track::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
}
/* No `value` yet: the server is still signing. Sweep a band to show it is alive
   rather than sitting at a misleading 0%. */
.progress-track:not([value]) {
  background:
    linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .85), transparent) 0 0 / 40% 100% no-repeat,
    #212121;
  animation: progress-sweep 1.3s var(--ease) infinite;
}
@keyframes progress-sweep {
  from { background-position: -45% 0; }
  to { background-position: 145% 0; }
}

.spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.is-loading-action { pointer-events: none; opacity: .85; }
.is-loading-action .spinner { display: inline-block; }

/* ---------- service status ----------
   Reads like the dashboard: a notice that states the outcome, the overview
   tiles, then one row per component in the settings-row anatomy with its
   uptime strip. Colour marks state only in icons, pills and ticks. */
.status-notice {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px;
  margin: 0 0 18px; padding: 16px 18px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: var(--radius-lg);
  background: color-mix(in srgb, currentColor 7%, transparent);
}
.status-notice > .ui-icon { width: 20px; height: 20px; margin-top: 1px; }
.status-notice strong { display: block; color: var(--text); font-size: 15px; font-weight: 600; }
.status-notice p { margin: 2px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.status-notice > small { margin-top: 2px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.status-notice.is-ok { color: var(--green); }
.status-notice.is-degraded { color: var(--yellow); }
.status-notice.is-down { color: var(--red); }

.status-summary strong small { margin-left: 4px; color: var(--muted); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.status-summary article > small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }

.status-components { display: grid; }
.status-legend, .status-component {
  display: grid;
  grid-template-columns: 44px minmax(200px, 300px) minmax(0, 1fr) 156px;
  gap: 16px 20px;
  align-items: center;
  padding: 16px 24px;
}
.status-legend { padding-block: 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 500; }
.status-legend > span:first-child { grid-column: 1 / 3; }
.status-component + .status-component { border-top: 1px solid var(--line); }
.status-component-icon, .status-config-icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: linear-gradient(180deg, #1c1c1c, #0b0b0b); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.status-component-icon .ui-icon, .status-config-icon .ui-icon { width: 20px; height: 20px; }
.status-component.is-failing .status-component-icon, .status-config.is-warn .status-config-icon { color: var(--yellow); }
.status-component.is-not_configured .status-component-icon, .status-config.is-unknown .status-config-icon { color: var(--dim); }
.status-config.is-ok .status-config-icon { color: var(--green); }
.status-component .settings-copy > strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15px; font-weight: 600; }
.status-component .settings-copy > small { color: var(--dim); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }

/* Ticks flex to share the row: the strip is always padded to a fixed slot count,
   so every component's ticks line up column-for-column down the page. */
.uptime-strip { display: flex; gap: 2px; align-items: stretch; height: 30px; min-width: 0; }
.uptime-tick {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 2px;
  background: var(--green);
  opacity: .82;
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.uptime-tick:hover { opacity: 1; transform: scaleY(1.12); }
.uptime-tick.is-down { background: var(--red); opacity: 1; }
/* Not yet recorded — present so the strip keeps its width, but plainly not a
   healthy check. */
.uptime-tick.is-empty { background: var(--line-strong); opacity: .5; }
.uptime-tick.is-empty:hover { transform: none; }
/* Same two columns in the legend and every row, so the headings sit exactly
   above their figures. */
.uptime-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.uptime-figure { font-size: 13px; font-weight: 600; }
.uptime-figure small { display: block; margin-top: 2px; color: var(--dim); font-size: 11px; font-weight: 400; }
.uptime-figure.is-perfect { color: var(--green); }
.uptime-figure.is-fair { color: var(--yellow); }
.uptime-figure.is-poor { color: var(--red); }
.uptime-unset { grid-column: 1 / -1; color: var(--dim); font-size: 13px; }
.uptime-window { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.uptime-note { margin: 0; padding: 14px 24px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; }

.status-config { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: 16px; padding: 18px 24px; }
.status-config + .status-config { border-top: 1px solid var(--line); }
.status-config .settings-copy > strong { font-size: 15px; font-weight: 600; }
.status-config > .pill { margin-top: 2px; }
.status-fix { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; }
.status-fix pre {
  margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: #0b0b0b; color: var(--text); font-size: 13px;
}
.status-fix pre { flex: 1 1 auto; min-width: 0; overflow-x: auto; }

/* ---------- error page ---------- */
.error-page {
  display: grid;
  justify-items: center;
  gap: 6px;
  max-width: 560px;
  margin: 8vh auto 6vh;
  text-align: center;
}
.error-code {
  font-size: clamp(64px, 12vw, 104px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(180deg, var(--accent-200), rgba(var(--accent-rgb), .25));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.error-page h2 { margin: 12px 0 0; font-size: clamp(22px, 3vw, 28px); }
.error-detail { margin: 10px 0 22px; color: var(--muted); }

/* ---------- live status chip ---------- */
.status-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

/* ---------- custom select ----------
   The native select is kept in the DOM (still named, still submitted, still the
   no-JS fallback) and hidden once the scripted listbox takes over. */
.select { position: relative; margin-top: 6px; }
.select-native { display: none; }
.select-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: #111111;
  color: var(--text);
  font-weight: 500;
  text-align: left;
  box-shadow: none;
}
.select-button:hover {
  border-color: var(--line-strong);
  background: #171717;
  color: var(--text);
  transform: none;
  box-shadow: none;
}
.select-button:active { background: #111111; transform: none; box-shadow: none; }
.select-button[aria-expanded="true"] {
  border-color: var(--accent);
  background: #111111;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}
.select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-arrow {
  flex: 0 0 auto;
  width: 11px;
  height: 8px;
  background: currentColor;
  color: var(--muted);
  clip-path: polygon(50% 100%, 0 15%, 12% 0, 50% 72%, 88% 0, 100% 15%);
  transition: transform var(--speed-slow) var(--ease), color var(--speed) var(--ease);
}
.select-button:hover .select-arrow { color: var(--text); }
.select-button[aria-expanded="true"] .select-arrow { transform: rotate(180deg); color: var(--accent-200); }

.select-menu {
  position: fixed;
  z-index: 60;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 5px;
  background: #1b1b1b;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
  scrollbar-width: thin;
  animation: select-in 140ms var(--ease);
}
@keyframes select-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 7px;
  padding: 9px 11px;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.select-option:hover, .select-option.is-active { background: rgba(255, 255, 255, .06); color: var(--text); }
.select-option[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-100); font-weight: 600; }
.select-option[aria-selected="true"]::after {
  content: "";
  width: 12px;
  height: 9px;
  background: currentColor;
  clip-path: polygon(0 52%, 12% 40%, 42% 70%, 88% 0, 100% 12%, 42% 96%);
}

/* ---------- sortable tables ----------
   The arrow is positioned, not inlined. Inline it shared the header's line box, so
   a header that fit its column on its own no longer did once the arrow was added:
   "DECLARED" plus an arrow overran a 106px column by two pixels, the arrow wrapped
   onto a line of its own, and that one cell made the whole header row of the apps
   table taller than the identical row on DNS and VPN. Out of flow it cannot break a
   line, cannot change a row's height, and cannot make one header sit lower than its
   neighbour. The space it needs is reserved with padding instead. */
th.sortable {
  position: relative;
  padding-right: 26px;
  cursor: pointer;
  user-select: none;
  transition: color var(--speed) var(--ease), background var(--speed) var(--ease);
}
th.sortable:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
th.sortable::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 0;
  height: 0;
  margin-top: -2px;
  border-inline: 4px solid transparent;
  border-bottom: 5px solid currentColor;
  opacity: 0;
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
}
th.sortable:hover::after { opacity: .35; }
th.sortable[aria-sort="ascending"]::after { opacity: 1; color: var(--accent-200); }
th.sortable[aria-sort="descending"]::after { opacity: 1; color: var(--accent-200); transform: rotate(180deg); }

/* ---------- password fields ---------- */
.password-field { position: relative; display: flex; }
.password-field input { padding-right: 74px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  min-height: 30px;
  padding: 0 10px;
  transform: translateY(-50%);
  border-color: var(--line-strong);
  background: var(--secondary);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
}
.password-toggle:hover { background: var(--secondary-hover); color: var(--text); transform: translateY(-50%); box-shadow: none; }
.password-toggle:active { transform: translateY(-50%); }

.strength { display: grid; gap: 6px; margin-top: 2px; }
.strength-track { height: 5px; overflow: hidden; border-radius: 999px; background: #212121; }
.strength-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--red);
  transition: width var(--speed-slow) var(--ease), background var(--speed-slow) var(--ease);
}
.strength-fill[data-score="2"] { background: var(--orange); }
.strength-fill[data-score="3"] { background: var(--yellow); }
.strength-fill[data-score="4"] { background: #a3e635; }
.strength-fill[data-score="5"] { background: var(--green); }
.strength-label { margin: 0; color: var(--muted); font-size: 12px; }
.strength-rules { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.strength-rules li {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  transition: color var(--speed) var(--ease);
}
.strength-rules li::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.strength-rules li.met { color: var(--green); }
.strength-rules li.met::before {
  border-color: var(--green);
  background: var(--green) var(--i-check) center / 9px no-repeat;
}

/* ---------- dns detail ---------- */
.dns-sections { display: grid; gap: 18px; padding: 16px 20px 20px; }
.dns-section + .dns-section { border-top: 1px solid var(--line); padding-top: 18px; }
.dns-section h4 {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.section-count { border-radius: 999px; padding: 1px 8px; background: rgba(255, 255, 255, .07); color: var(--text); font-size: 12px; letter-spacing: 0; }
.dns-section .evidence-grid { padding: 0; }
.dns-section-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.parse-error { margin: 10px 0 0; border-radius: var(--radius-sm); padding: 9px 12px; background: rgba(239, 90, 90, .1); color: #fecdd3; font-size: 12px; }

/* See .record-table: the frame lives on the scroll box, never on the table. */
.answer-table { border-collapse: collapse; }
.answer-table th, .answer-table td { padding: 9px 12px; vertical-align: middle; }
.answer-table td { font-size: 13px; }
.answer-table tbody tr:last-child td { border-bottom: 0; }
.answer-table code { color: #e8e8e8; }
.answer-value { overflow-wrap: anywhere; }
.record-type {
  display: inline-flex;
  border: 1px solid rgba(165, 165, 165, .28);
  border-radius: 6px;
  padding: 2px 7px;
  background: rgba(165, 165, 165, .12);
  color: var(--cyan);
  font-size: 12px;
  font-weight: 600;
}
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chip-list li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(11, 11, 11, .5);
  font-size: 12px;
}
.chip-list code { color: #e8e8e8; }
.confidence-empty { color: var(--dim); }

/* ---------- auth ---------- */
.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 460px);
  gap: 64px;
  max-width: 984px;
  align-items: center;
  margin: 56px auto;
}
.auth-aside { max-width: 460px; }
.auth-aside h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -.02em; }
.auth-aside-lede { margin: 12px 0 20px; color: var(--muted); font-size: 15px; }
.auth-points { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.auth-points li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); }
.auth-points li::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--accent-soft) var(--i-check) center / 10px no-repeat;
}
.auth-aside-link { font-weight: 600; text-decoration: none; }
.auth-aside-link:hover { text-decoration: underline; }
.auth-card { width: 100%; margin: 0; }
.auth-form { display: grid; gap: 16px; padding: 20px; }
.auth-form button[type="submit"] { margin-top: 4px; }
.auth-alt { padding: 0 20px 20px; color: var(--muted); }
.login-form { padding-bottom: 12px; }
.login-alternative { display: grid; gap: 12px; padding: 0 20px; }
.login-alternative > button, .passkey-cancel > button { width: 100%; }
.login-alternative [data-passkey-status]:empty { display: none; }
.login-alternative [data-passkey-status] { margin: 0; }
.login-support { margin: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.enrollment-help summary { cursor: pointer; font-weight: 600; font-size: .875rem; line-height: 1.5; }
.enrollment-help summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.enrollment-help p { color: var(--muted); font-size: .875rem; line-height: 1.6; margin: 12px 0; }
.enrollment-help .field { margin-top: 0; }
.passkey-cancel { margin: 0; }
.approval-form { display: grid; gap: 16px; }
.passkey-list { border-top: 1px solid var(--line); }
.passkey-recovery-body > button { justify-self: start; }
.passkey-recovery-body { display: grid; gap: 18px; padding-top: 18px; }
.passkey-recovery-body p, .passkey-recovery-body ol { margin: 0; color: var(--muted); line-height: 1.7; }
.passkey-result-actions { display: flex; gap: 8px; margin-top: 12px; }
@media (max-width: 640px) {
  .passkey-manager .panel-heading { gap: 16px; flex-wrap: wrap; }
}

/* ---------- landing ---------- */

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .button { min-height: 44px; padding: 12px 20px; }

.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 0; }

.feature-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent-200);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
}

/* ---------- landing showcase ---------- */

.step-chip {
  display: inline-flex;
  border: 1px solid rgba(var(--accent-rgb), .4);
  border-radius: 999px;
  padding: 4px 11px;
  background: var(--accent-soft);
  color: var(--accent-100);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.steps { margin-bottom: 40px; }
.steps .panel-heading { padding-inline: 0; border-bottom: 0; }
.step-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step-list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  background: rgba(11, 11, 11, .4);
}
.step-number {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(var(--accent-rgb), .4);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-100);
  font-weight: 600;
}
.step-list strong { display: block; margin-bottom: 6px; font-weight: 600; }
.step-list p { margin: 0; color: var(--muted); }

/* ---------- full-bleed bands ----------
   A strip that breaks out of the centred content column to the viewport edges,
   separating one part of the story from the next. `overflow-x: clip` on <body>
   contains the 100vw width without creating a scroll container, which is what
   `overflow-x: hidden` would do — and that would kill every sticky rail. */

/* The strip runs to the viewport edges, but its columns do not: on a very wide
   screen a full-width grid drags the four items so far apart they stop reading
   as one row. Wider than the content column, capped well short of the viewport. */

/* The status band reads as a live readout, not a feature. */

.status-band strong { display: block; font-weight: 600; }
.status-band p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.status-band .status-chip { font-size: 14px; }

@media (max-width: 1100px) {
  .auth-shell { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  
  
  .auth-aside { max-width: none; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-list { grid-template-columns: minmax(0, 1fr); }
  
  /* Two columns: the left-hand divider only belongs on odd items now. */
  
  

  /* No room for a side rail: both levels lay out as horizontal strips that
     still stick under the top bar, so navigation survives the narrow layout.

     The strips are swiped, not dragged by a scrollbar, and a bar drawn under each
     of them is two grey lines of chrome pinned below the navigation on every
     screen. A tab cut off mid-chip already says "there is more this way", and the
     buttons stay reachable by keyboard, which is what actually matters here. */
  .workspace { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .workspace-rail { top: calc(var(--topbar-h, 90px) + 8px); gap: 8px; max-height: none; overflow: visible; }
  .tab-rail, .section-rail { scrollbar-width: none; }
  .tab-rail::-webkit-scrollbar, .section-rail::-webkit-scrollbar { display: none; }
  .tab-rail { grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 6px; overflow-x: auto; }
  .tab-rail button { justify-content: center; text-align: center; }
  .section-rail { display: flex; gap: 10px; align-items: center; overflow-x: auto; padding: 9px 12px; }
  .rail-title { flex: 0 0 auto; margin: 0; padding: 0; }
  .section-links { display: flex; gap: 6px; }
  .section-link {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 12px;
    white-space: nowrap;
  }
  .section-link:hover, .section-link.is-current { border-color: var(--line-strong); }
  .section-link.is-current { border-color: rgba(var(--accent-rgb), .45); }
}

@media (max-width: 900px) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coverage-overview { grid-template-columns: minmax(0, 1fr); }
  .coverage-completion { border-right: 0; border-bottom: 1px solid var(--line); }
  .coverage-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coverage-metrics > div:nth-child(3) { border-right: 0; }
  .coverage-metrics > div:nth-child(-n+3) { border-bottom: 1px solid rgba(145, 145, 145, .12); }
  .upload-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dns-section-split { grid-template-columns: minmax(0, 1fr); }
  .filter-bar input, .filter-bar select { min-width: 0; flex: 1 1 100%; }
  .scan-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .indicator-card { grid-template-columns: 1fr auto; }
  .indicator-provider { display: none; }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .artifact-summary { grid-template-columns: 52px minmax(0, 1fr); }
  .artifact-summary .pill { grid-column: 2; width: fit-content; }
}

@media (max-width: 620px) {
  main { width: min(100% - 20px, 1500px); margin-top: 14px; }
  .topbar-inner { align-items: flex-start; padding-block: 14px; }
  .topnav { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .tab-list, .workspace-rail { position: static; }
  .evidence-search { flex-wrap: wrap; }
  .evidence-search input { flex: 1 1 100%; }
  .evidence-search button, .evidence-search .button { flex: 1 1 auto; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  
  
  
  
  
  .hero-actions .button { width: 100%; }
  .brand-text .eyebrow { display: none; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .risk-badge { width: 100%; }
  .summary-grid, .scan-summary, .account-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coverage-completion { padding-inline: 16px; }
  .coverage-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coverage-metrics > div:nth-child(3) { border-right: 1px solid rgba(145, 145, 145, .12); }
  .coverage-metrics > div:nth-child(even) { border-right: 0; }
  .coverage-metrics > div:nth-child(-n+4) { border-bottom: 1px solid rgba(145, 145, 145, .12); }
  .coverage-details > summary { padding-inline: 16px; }
  .summary-grid strong { font-size: 24px; }
  .split-heading { align-items: flex-start; flex-direction: column; }
  .panel-collapse-summary { width: 100%; }
  .panel-collapse-summary .heading-help { flex: 1 1 auto; }
  .score-list { --score-columns: repeat(3, minmax(0, 1fr)); }
  /* Preserve the desktop reading order while wrapping the descriptive finding
     above its three compact metrics. */
  .score-legend span:first-child, .score-copy { grid-column: 1 / -1; grid-row: 1; }
  .score-legend span:nth-child(n+2),
  .score-row > .pill,
  .score-confidence,
  .score-value { grid-row: 2; }
  .finding-list { --finding-columns: 7px minmax(100px, 1fr) 92px; }
  .finding-legend, .finding-card > summary { row-gap: 8px; }
  .finding-legend .legend-marker, .finding-marker { grid-column: 1; grid-row: 1 / 3; }
  .finding-legend > span:nth-child(2), .finding-title { grid-column: 2 / -1; grid-row: 1; }
  .finding-legend .legend-confidence, .finding-card .confidence {
    display: block;
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }
  .finding-legend > span:nth-child(4), .finding-card > summary > .pill {
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
  }
  .finding-legend .legend-disclosure, .finding-card .disclosure { display: none; }
  .finding-evidence { padding-left: 20px; }
  .session-action { align-items: stretch; flex-direction: column; }
  .session-action button { width: 100%; }
  .delivery-action { align-self: stretch; align-items: stretch; }
  .delivery-action button { width: 100%; }
  .delivery-progress { max-width: none; text-align: left; }
  .delivery-facts { grid-template-columns: minmax(0, 1fr) auto; }
  .delivery-facts > div:first-child { grid-column: 1 / -1; }
  .artifact-row { grid-template-columns: 44px minmax(0, 1fr); }
  .artifact-row .button { grid-column: 1 / -1; }
  .session-row { grid-template-columns: minmax(0, 1fr) auto; }
  .session-row form { grid-column: 1 / -1; }
  .session-row button { width: 100%; }
  .search-input { flex-direction: column; }
  .upload-fields { grid-template-columns: 1fr; }
  .filter-grid, .account-details { grid-template-columns: 1fr; }
  .filter-actions { flex-direction: column; }
  .audit-event { grid-template-columns: 10px minmax(0, 1fr); }
  .audit-time { grid-column: 2; justify-self: start; text-align: left; }
  .audit-details { grid-column: 2; }
  .form-action, .artifact-action { align-items: stretch; flex-direction: column; }
  .form-action small { margin-right: 0; }
  .artifact-action .button, .form-action button { width: 100%; }
  .group-manager, .group-rename-form { align-items: stretch; flex-direction: column; }
  .group-manager > div { margin-right: 0; }
  .group-rename-form input { min-width: 0; }

  /* Dense evidence tables scroll sideways instead of crushing every column into
     an unreadable sliver. Column alignment is the whole point of those, and you
     open a row to read it properly anyway. */
  .table-wrap > table { min-width: 680px; }
  .table-wrap > .answer-table, .table-wrap > .record-table { min-width: 520px; }

  /* The console's own tables are a different matter. They are not something you
     read across, they are something you act on — and a Scan now button parked
     three columns off the right edge of a phone may as well not exist. Below this
     width each row becomes a card and each cell names itself from the header it
     came from, so nothing is reachable only by scrolling sideways. */
  .table-wrap > .stack-table { min-width: 0; table-layout: auto; }
  .stack-table, .stack-table > tbody, .stack-table > tbody > tr, .stack-table > tbody > tr > td { display: block; }
  .stack-table > thead { display: none; }
  .stack-table > tbody > tr {
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 4px 14px;
    background: rgba(11, 11, 11, .4);
  }
  .stack-table > tbody > tr:hover { background: rgba(11, 11, 11, .4); }
  .stack-table > tbody > tr > td {
    display: grid;
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
    gap: 4px 14px;
    align-items: start;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
  }
  .stack-table > tbody > tr > td::before {
    content: attr(data-label);
    grid-area: 1 / 1;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.6;
  }
  /* The label owns the first column and nothing else may enter it. A cell that
     holds a value and a note beneath it — a device and its id, a platform and its
     app version — would otherwise let the note wrap back under the label, which
     reads as a second label rather than as part of the value. */
  .stack-table > tbody > tr > td > * { grid-column: 2; }
  .stack-table > tbody > tr > td:last-child { border-bottom: 0; }
  /* The "nothing here" row is a message, not a record: it has no header to name. */
  .stack-table > tbody > tr > td.empty { display: block; }
  .stack-table > tbody > tr > td.empty::before { content: none; }
  .stack-table > tbody > tr:has(> td.empty) { border: 0; background: none; }
  .stack-table .action-stack { min-width: 0; }
  .panel-heading, .panel-body, .upload-form, .evidence-summary { padding-inline: 16px; }
  .dns-sections { padding-inline: 16px; }

  dialog.modal { width: calc(100vw - 24px); }
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot button { width: 100%; }
}

@media (max-width: 430px) {
  main { margin-top: 10px; }
  .topbar-inner { gap: 12px; }
  .brand-name { font-size: 17px; }
  .summary-grid, .scan-summary, .account-summary { grid-template-columns: minmax(0, 1fr); }
  
  .tab-list button { min-width: 0; flex: 1 0 auto; padding-inline: 12px; }
  .page-heading h2 { font-size: 24px; }
  .risk-score { width: 78px; }
  .action-stack { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .dropzone { padding: 16px 12px; }
  .pagination { flex-wrap: wrap; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  button:hover, .button:hover, .summary-grid article:hover, .indicator-card:hover, .back-link:hover, .dropzone.is-dragging { transform: none; }
}

.invite-history details { white-space: normal; }
.invite-history article { padding-block: 12px; border-top: 1px solid var(--line); }

/* Shared controls: primary creation, neutral navigation, destructive changes. */
button, .button, button.compact, .button.compact, .hero-actions .button {
  min-height: 40px; padding: 9px 16px; border-radius: 8px; font-size: 13px;
  line-height: 20px; box-shadow: none;
}
button:not(.secondary):not(.danger):not(.linklike):not(.copy-button):not(.expand-toggle):not(.row-expand):not(.password-toggle):not(.select-button):not([data-tab-target]):not(.to-top):not(.icon-button):not(.modal-close):not(.redemption-toggle):not(.calendar-control),
.button:not(.secondary):not(.danger):not(.gradient-outline) { background: var(--btn-primary-bg, var(--accent)); color: var(--btn-primary-fg, var(--accent-ink)); border-color: transparent; }
button:hover, .button:hover { transform: none; box-shadow: none; }
button.secondary, .button.secondary { background: #222222; border-color: #424242; color: #ededed; }
button.secondary:hover, .button.secondary:hover { background: #333333; border-color: #6f6f6f; }
button.danger, .button.danger { background: #351c24; border-color: #9f4654; color: #ffc2c7; }
button.danger:hover, .button.danger:hover { background: #592631; color: #fff; }
.topnav .gradient-outline {
  border: 1px solid transparent; color: var(--text);
  background: linear-gradient(var(--accent-surface), var(--accent-surface)) padding-box, linear-gradient(110deg, var(--accent-hi), var(--accent-deep), var(--accent)) border-box;
}
.topnav .gradient-outline:hover { background: linear-gradient(var(--accent-surface-hover), var(--accent-surface-hover)) padding-box, linear-gradient(110deg, var(--accent-hi), var(--accent-deep), var(--accent)) border-box; }
.topbar .brand-mark { width: 34px; height: 34px; border-radius: 9px; }
.topbar .brand-name { font-size: 18px; }
.topbar .brand-block { gap: 10px; }
.topnav a, .topnav .linklike { min-height: 40px; padding: 9px 12px; }
.auth-aside-link, .back-link { display: inline-flex; align-items: center; gap: 8px; }

.feature-icon .ui-icon, .dropzone-icon .ui-icon { width: 24px; height: 24px; }

.copy-button, .expand-toggle, .row-expand { width: 32px; height: 32px; min-height: 32px; padding: 6px; }
.password-toggle { min-height: 30px; padding: 3px 10px; }
.password-toggle:hover, .password-toggle:active { transform: translateY(-50%); }
.to-top { width: 40px; height: 40px; min-height: 40px; padding: 10px; }
.form-page { max-width: 680px; margin: 32px auto; }
.form-page .back-link { margin-bottom: 24px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.history-list { padding-left: 18px; min-width: 200px; }
.history-list li + li { margin-top: 12px; }

/* Readable states use Lucide symbols and words; no capsule or decorative dot. */
.pill, .pill.active, .pill.revoked, .pill.warning, .pill.neutral,
.pill.risk-low, .pill.risk-medium, .pill.risk-high, .pill.risk-critical {
  padding: 0; border: 0; border-radius: 0; background: none; animation: none;
  min-height: 24px; font-size: 13px; gap: 7px;
}
.pill::before { width: 16px; height: 16px; border-radius: 0; box-shadow: none; background: currentColor; mask: var(--i-minus) center / contain no-repeat; }
.pill.active::before, .pill.risk-low::before { mask-image: var(--i-circle-check); }
.pill.revoked::before, .pill.risk-critical::before { mask-image: var(--i-circle-x); }
.pill.warning::before, .pill.risk-medium::before, .pill.risk-high::before { mask-image: var(--i-triangle-alert); }
.risk-score, .score-value, .indicator-score, .risk-badge {
  border: 0; border-radius: 0; background: transparent; padding: 0;
  justify-content: flex-start; text-align: left; min-width: 0;
}
.field-required { color: var(--muted); font-size: 12px; letter-spacing: 0; text-transform: none; }
.auth-points li::before {
  border: 0; border-radius: 0; background: var(--accent-link); mask: var(--i-check) center / contain no-repeat;
}
select, select:hover, select:focus { background-image: var(--i-chevron-down); }
.select-arrow { width: 16px; height: 16px; border: 0; background: currentColor; mask: var(--i-chevron-down) center / contain no-repeat; transform: none; }
.select-button[aria-expanded="true"] .select-arrow { transform: rotate(180deg); }
th.sortable::after { width: 14px; height: 14px; margin-top: -7px; border: 0; background: currentColor; mask: var(--i-chevron-up) center / contain no-repeat; }
@media (max-width: 760px) {
  .auth-shell { grid-template-columns: minmax(0, 1fr); gap: 32px; margin: 28px auto; max-width: 480px; }
  
  .topbar-inner { gap: 12px; }
  .topnav a, .topnav .linklike { padding-inline: 8px; }
}

.coverage-details > summary::before { width: 16px; height: 16px; border: 0; background: currentColor; mask: var(--i-chevron-right) center / contain no-repeat; transform: none; }
.coverage-details[open] > summary::before { transform: rotate(90deg); }
.select-option[aria-selected="true"]::after { width: 16px; height: 16px; clip-path: none; mask: var(--i-check) center / contain no-repeat; }
.strength-rules li::before { border: 0; border-radius: 0; background: currentColor; mask: var(--i-minus) center / contain no-repeat; }
.strength-rules li.met::before { background: currentColor; mask-image: var(--i-check); }

.disclosure { width: 16px; height: 16px; border: 0; background: currentColor; mask: var(--i-chevron-right) center / contain no-repeat; transform: none; }
details[open] > summary .disclosure, .evidence-row.is-open .disclosure { transform: rotate(90deg); }
#tab-redemptions .inline-details summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; }
#tab-redemptions .inline-details summary::-webkit-details-marker { display: none; }
#tab-redemptions .inline-details summary::before { content: ""; width: 16px; height: 16px; background: currentColor; mask: var(--i-chevron-right) center / contain no-repeat; }
#tab-redemptions .inline-details[open] > summary::before { transform: rotate(90deg); }
@media (min-width: 1101px) { .summary-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }

.panel, .summary-grid article, .tab-panel:not([hidden]) { animation: none; }

.risk-score-label { margin-left: 8px; font-size: 12px; }
/* Component refinements: shared page surfaces and action hierarchy. */
:root { --bg: #000; --panel: #111; --panel-soft: #242424; --line: #3b3b3b; --line-strong: #626262; --muted: #a3a3a3; --dim: #999999; }
body { background: #000; }
.topbar { background: #000; }
button, .button, button.compact, .button.compact { min-height: 40px; border-radius: 6px; font-weight: 500; }
.upload-form > button, .filter-grid > button { justify-self: start; width: auto; }
button:not(.secondary):not(.danger):not(.linklike):not(.copy-button):not(.expand-toggle):not(.row-expand):not(.password-toggle):not(.select-button):not([data-tab-target]):not(.to-top):not(.icon-button):not(.modal-close):not(.redemption-toggle):not(.calendar-control):hover,
.button:not(.secondary):not(.danger):not(.gradient-outline):hover { background: var(--btn-primary-hover, var(--accent-hover)); border-color: transparent; }
button.secondary, .button.secondary { background: #1b1b1b; border-color: #464646; }
button.secondary:hover, .button.secondary:hover { background: #2d2d2d; border-color: #787878; }
.topnav .gradient-outline:hover, .topnav .gradient-outline:focus-visible { color: #fff; background: linear-gradient(110deg, var(--accent-surface), var(--accent-surface-hover)) padding-box, linear-gradient(110deg, var(--accent), var(--accent-hi), var(--accent-hover)) border-box; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2); }
button.icon-button, button.modal-close, button.password-toggle { display: inline-flex; justify-content: center; align-items: center; width: 36px; height: 36px; min-height: 36px; padding: 8px; background: transparent; border: 1px solid transparent; color: #b8b8b8; box-shadow: none; flex: 0 0 36px; }
button.icon-button:hover, button.modal-close:hover, button.password-toggle:hover { background: #303030; color: #fff; border-color: #525252; }
.password-field input { padding-right: 52px; }

.flash { display: grid; grid-template-columns: 20px minmax(0,1fr) 36px; align-items: start; gap: 12px; padding: 16px; max-height: none; background: #141414; border: 1px solid #444; border-left: 3px solid var(--accent); border-radius: 8px; }
.flash.success { background: #181818; border-color: #315842; }
.flash.error { background: #211214; border-color: #844149; }
.flash-symbol { margin-top: 8px; color: var(--accent-200); }
.flash.success .flash-symbol { color: #53dda1; }
.flash.error .flash-symbol { color: #ff8c96; }
.flash-content { padding-top: 5px; min-width: 0; }
.flash-content p { margin: 4px 0 12px; }
.flash-content small { color: #b1b1b1; }
.flash .flash-close { margin: 0; }
.flash.is-leaving { display: none; }
.invite-secret { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.invite-secret code { user-select: all; overflow-wrap: anywhere; font-size: 16px; color: #fff; }
.invite-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.invite-actions .inline-form { margin: 0; }
.split-heading .heading-help { flex: 0 1 480px; text-align: left; }
.history-table { table-layout: fixed; width: 100%; }
.history-table th, .history-table td { vertical-align: top; overflow-wrap: anywhere; }
.history-table th:last-child { width: 24%; }
.redemption-details { min-width: 0; }
.redemption-details summary { font-weight: 500; min-height: 28px; }
.redemption-details summary::before { flex: 0 0 16px; transition: transform 160ms ease; }
.history-list { list-style: none; margin: 12px 0 0; padding: 12px 0 0; min-width: 0; border-top: 1px solid var(--line); }
.history-list small { margin-top: 4px; }
.risk-score { width: auto; display: inline-flex; flex-wrap: wrap; gap: 3px; }
.risk-score-label { white-space: nowrap; margin-left: 6px; }
.evidence-count { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.role-label { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: #b8b8b8; }
.role-superadmin { color: var(--accent-100); }
.role-admin { color: var(--accent-link); }
.select-arrow { clip-path: none; width: 16px; height: 16px; color: #c6c6c6; }
.rows-per-page .select-button { min-height: 40px; padding: 8px 12px; }
.inline-form button, .inline-form .select-button { min-height: 40px; }
dialog.modal { background: #151515; border-color: #444; border-radius: 12px; }
.modal-head { padding: 20px 24px; align-items: start; border-bottom: 1px solid #333; }
.modal-body { padding: 24px; }
.modal-foot { padding: 16px 24px; gap: 12px; background: #191919; border-top: 1px solid #333; }
.assessment-card { display: flex; flex-direction: column; gap: 12px; min-width: 260px; max-width: 360px; padding: 20px 24px; border: 1px solid #383838; border-radius: 10px; background: #111; box-shadow: none; }
.assessment-card > strong { font-size: 21px; line-height: 1.35; }
.assessment-card > small { color: var(--muted); }
.assessment-card a { display: inline-flex; align-items: center; gap: 8px; }
.assessment-score { display: flex; align-items: baseline; justify-content: center; gap: 5px; padding-block: 8px; }
.assessment-score strong { font-size: 40px; line-height: 1; }
.assessment-score > span:not(.risk-score-label) { color: var(--muted); }
.evidence-search { gap: 8px; align-items: center; }
.evidence-search input { min-height: 40px; margin: 0; }
.audit-event { grid-template-columns: minmax(0,1fr) auto; gap: 16px 24px; padding: 24px; align-items: start; animation: none; }
.audit-copy > strong { font-size: 15px; color: #f4f4f4; }
.audit-facts { display: flex; flex-wrap: wrap; gap: 16px 28px; margin: 16px 0 0; }
.audit-facts > div { min-width: 100px; max-width: 100%; }
.audit-facts dt { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.audit-facts dd { margin: 0; color: #e4e4e4; font-size: 13px; overflow-wrap: anywhere; }
.audit-facts dd.role-superadmin { color: var(--accent-100); }
.audit-facts dd.role-admin { color: var(--accent-link); }
.audit-time { color: #b8b8b8; font-size: 13px; }
.audit-time small { color: #a3a3a3; margin-top: 6px; }
.audit-details { grid-column: 1 / -1; margin: 0; border-top: 1px solid #333; padding-top: 12px; }
#assessment-v2 { padding: 24px; }
#assessment-v2 h3 { margin-top: 28px; border-top: 1px solid #333; padding-top: 20px; }
@media (max-width: 760px) {
 .split-heading .heading-help { flex-basis: auto; }
 .history-table { table-layout: auto; }
 .audit-event { grid-template-columns: minmax(0,1fr); padding: 18px; }
 .audit-time { justify-self: start; text-align: left; }
 .assessment-card { min-width: 0; max-width: none; width: 100%; }
 .flash { gap: 8px; padding: 12px; }
}
/* Review refinements: compact feedback, consistent forms, and evidence hierarchy. */
.flash:not(.invite) { padding: 6px 12px; gap: 10px; align-items: center; }
.flash:not(.invite) .flash-content { padding: 0; }
.flash:not(.invite) .flash-symbol { margin: 0; }
.flash:not(.invite) .flash-close { width: 32px; height: 32px; min-height: 32px; padding: 6px; }
#organizations-create .upload-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 24px; max-width: 800px; }
#organizations-create .field label { display: flex; align-items: baseline; gap: 8px; min-height: 22px; margin: 0; }
#organizations-create .field input { margin-top: 6px; }
#organizations-create .field-required { display: inline; font-weight: 400; }
.invite-actions { gap: 12px; flex-wrap: nowrap; }
a.icon-button { display: inline-flex; justify-content: center; align-items: center; width: 36px; height: 36px; padding: 8px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); text-decoration: none; }
a.icon-button:hover { background: #303030; color: var(--text); border-color: #525252; }
.scan-link-row { cursor: pointer; }
.scan-link-row:hover, .scan-link-row:has(:focus-visible) { background: var(--accent-soft); }
.scan-link-row .investigate-link { color: var(--accent-link); }
.role-update-form { display: inline-flex; align-items: center; gap: 12px; }
.role-update-form .select { min-width: 150px; margin: 0; }
.role-update-form .select-button, .role-update-form > button { min-height: 40px; padding: 9px 12px; line-height: 20px; }
#tab-redemptions .history-table { min-width: 1120px; table-layout: fixed; }
#tab-redemptions .history-table th, #tab-redemptions .history-table td { padding: 16px 20px; }
#tab-redemptions .history-table th:nth-child(1) { width: 17%; }
#tab-redemptions .history-table th:nth-child(2) { width: 17%; }
#tab-redemptions .history-table th:nth-child(3) { width: 11%; }
#tab-redemptions .history-table th:nth-child(4) { width: 13%; }
#tab-redemptions .history-table th:nth-child(5) { width: 22%; }
#tab-redemptions .history-table th:last-child { width: 20%; }
#tab-redemptions .history-table td:last-child { border-left: 1px solid var(--line); padding-left: 24px; }
.history-table time { display: block; white-space: normal; }
.audit-event { padding: 18px 20px; gap: 12px 24px; }
.audit-facts { gap: 12px 24px; margin-top: 12px; }
.audit-detail-content { padding: 16px 0; }
.audit-detail-content .evidence-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 28px; margin: 0; }
.audit-detail-content .evidence-grid > div { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 0; min-width: 0; }
.audit-detail-content .evidence-grid > div:has(> dd > .evidence-grid), .audit-detail-content .evidence-grid > div:has(table) { grid-column: 1 / -1; }
.audit-detail-content .evidence-grid > div:has(> dd > .evidence-grid) > dt { font-size: 13px; color: var(--text); margin-bottom: 8px; }
.audit-detail-content .evidence-grid dt { text-transform: none; letter-spacing: 0; font-size: 12px; }
.audit-detail-content .evidence-grid dd { margin: 4px 0 0; }
.audit-raw { margin-top: 8px; }
.audit-raw pre { max-height: 350px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: #0c0c0c; padding: 16px; }
#assessment-summary.assessment-overview { padding: 0; }
.assessment-intro { padding: 16px 20px; color: var(--muted); border-bottom: 1px solid var(--line); }
.assessment-intro p { margin: 8px 0 0; color: var(--text); }
.assessment-dimensions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.assessment-dimension { min-width: 0; padding: 24px; border-bottom: 1px solid var(--line); }
.assessment-dimension:nth-child(odd):not(.assessment-wide) { border-right: 1px solid var(--line); }
.assessment-wide { grid-column: 1 / -1; }
.assessment-dimension header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
#assessment-summary .assessment-dimension h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; border: 0; padding: 0; margin: 0; }
.assessment-dimension h3 .ui-icon { color: var(--accent-link); }
.assessment-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.is-negative { color: var(--red); }.is-warning { color: var(--yellow); }.is-positive { color: var(--green); }.is-unknown { color: var(--muted); }
.dimension-context, .dimension-note, .dimension-count { color: var(--muted); font-size: 13px; }
.dimension-note { margin: 16px 0 0; line-height: 1.6; }
.dimension-metrics, .posture-counts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 16px 0; }
.dimension-metrics dt, .posture-counts dt { color: var(--muted); font-size: 12px; }
.dimension-metrics dd, .posture-counts dd { margin: 6px 0 0; font-weight: 500; font-size: 17px; }
.posture-counts { grid-template-columns: repeat(auto-fit,minmax(80px,1fr)); border-block: 1px solid var(--line); padding-block: 16px; }
.dimension-details { margin-top: 18px; }
.dimension-details summary, .audit-details summary { cursor: pointer; color: var(--accent-link); }
.detail-facts { margin: 12px 0; }
.detail-facts > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.detail-facts dt { color: var(--muted); font-size: 12px; }.detail-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.coverage-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 28px; }
.coverage-list > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.coverage-list dt { font-size: 13px; }.coverage-list dd { margin: 0; }
.assessment-dimension td { padding: 12px 8px; }.assessment-dimension td small { display: block; color: var(--muted); }
.category-icon .ui-icon { width: 20px; height: 20px; }
.traffic-protocol, .traffic-direction { border: 0; background: none; padding: 0; border-radius: 0; font-size: 12px; color: var(--text); }
.traffic-direction { display: block; margin-bottom: 6px; color: var(--muted); }
#vpn-flows .evidence-table, #dns-packets .evidence-table { min-width: 1220px; }
.col-endpoint { width: 172px; }.col-protocol { width: 96px; }.col-traffic { width: 190px; }
.network-endpoint code { white-space: nowrap; overflow-wrap: normal; }
.network-detail .evidence-grid > div { background: transparent; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); padding: 12px 0; }
.network-detail .evidence-grid { gap: 12px 28px; }
.network-detail .evidence-grid dt { text-transform: none; letter-spacing: 0; font-size: 12px; }
.network-detail h4 { font-size: 14px; margin: 12px 0; }
.network-detail .evidence-summary { padding: 0; }
.network-detail .dns-route { flex-wrap: wrap; gap: 16px; }
.field-label .ui-icon { width: 16px; height: 16px; }
@media(max-width:760px) {
 #organizations-create .upload-fields, .assessment-dimensions { grid-template-columns: minmax(0,1fr); }
 .assessment-dimension:nth-child(odd):not(.assessment-wide) { border-right: 0; }
 .assessment-dimension { padding: 18px; }
 .coverage-list, .audit-detail-content .evidence-grid { grid-template-columns: minmax(0,1fr); }
 #tab-redemptions .history-table { min-width: 0; }
 #tab-redemptions .history-table td:last-child { border-left: 0; padding-left: 20px; }
}

/* Keep wide evidence inside its own keyboard-scrollable viewport. */
.table-wrap { contain: inline-size layout paint; max-width: 100%; }
.col-protocol { width: 112px; }
.evidence-table th { word-break: normal; overflow-wrap: normal; }
#enrollment-history .history-table th:nth-child(2) { width: 15%; }
#enrollment-history .history-table th:nth-child(3) { width: 19%; }
#enrollment-history .history-table th:nth-child(4) { width: 11%; }
#enrollment-history .history-table th:nth-child(5) { width: 19%; }
#enrollment-history .history-table th:last-child { width: 19%; }
/* Unified outlined labels, editorial landing page, and grouped evidence. */
.summary-grid > article > span { display:flex; align-items:center; gap:9px; }
.summary-grid > article > span > .ui-icon { color:var(--accent-link); width:18px; height:18px; flex-shrink:0; }
.outlined-field { position:relative; display:block; padding-top:10px; min-width:0; }
.outlined-field .field-caption, #organizations-create .outlined-field .field-caption { position:absolute; z-index:1; top:0; left:12px; display:flex; align-items:center; gap:8px; min-height:0; padding:0 6px; margin:0; background:var(--panel); font-size:12px; line-height:20px; }
.outlined-field .field-caption .field-required, .outlined-field .field-caption .field-optional { display:inline; margin:0; font-size: 12px; line-height:20px; text-transform:none; letter-spacing:0; }
.outlined-field .field-caption .field-required { color:var(--accent-link); font-weight: 600; }
.outlined-field .field-caption .field-optional { color:var(--muted); }
.outlined-field input, #organizations-create .outlined-field input { margin-top:0; min-height:48px; padding-top:12px; }
.outlined-field .select { margin-top:0; }.outlined-field .select-button { min-height:48px; }
#tab-redemptions .history-table td:last-child { border-left:0; }
.redemption-details summary { display:flex; align-items:center; gap:7px; color:var(--accent-link); }
.redemption-details .history-list { padding:0; margin:14px 0 0; list-style:none; }
.redemption-details .history-list li { display:flex; align-items:flex-start; gap:10px; padding:12px; margin:8px 0; background:var(--panel-soft); border-radius:8px; overflow-wrap:anywhere; }
.redemption-avatar { color:var(--accent-link); padding-top:2px; }.history-list strong { font-size:12px; font-weight: 500; }.history-list small { display:flex; align-items:center; gap:5px; }.history-list small .ui-icon { width:13px; height:13px; }
.audit-facts dt { display:flex; align-items:center; gap:6px; }.audit-facts dt .ui-icon { width:14px; height:14px; color:var(--accent-link); }
.audit-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.audit-group { min-width:0; background:var(--panel-soft); padding:18px; border-radius:8px; }
.audit-group h4, .packet-groups h4 { display:flex; align-items:center; gap:8px; margin:0 0 18px; color:var(--accent-link); font-size:14px; }
.audit-group .evidence-grid > div, .audit-detail-content .evidence-grid > div { border:0; padding:8px 0; }
.audit-group .evidence-grid { gap:10px 24px; }.audit-details { border:0; padding-top:4px; }
.assessment-dimensions { gap:16px; padding:20px; background:var(--bg); }
.assessment-dimension, .assessment-dimension:nth-child(odd):not(.assessment-wide) { border:0; background:var(--panel); border-radius:10px; }
.posture-counts { grid-template-columns:repeat(4,minmax(0,1fr)); border:0; gap:10px; padding:0; }
.posture-counts > div { background:var(--panel-soft); border-radius:6px; padding:12px; }
.posture-counts dt { min-height:34px; line-height:17px; }.posture-counts dd { margin-top:4px; font-size:21px; }
.posture-pass dd { color:var(--green); }.posture-fail dd,.posture-error dd { color:var(--red); }.posture-unknown dd,.posture-manual dd { color:var(--yellow); }
.integrity-confidence { color:var(--yellow); }
.detail-facts > div { border:0; padding:14px 16px; margin-top:8px; border-radius:8px; background:var(--panel-soft); }
.coverage-list { gap:10px; }.coverage-list > div { border:0; padding:14px; border-radius:7px; background:var(--panel-soft); }.coverage-list dt { display:flex; align-items:center; gap:8px; }.coverage-list dt .ui-icon { width:16px; height:16px; color:var(--accent-link); }
.category-icon, .category-icon.integrity, .category-icon.network, .category-icon.configuration { color:var(--accent-link); background:transparent; border:0; box-shadow:none; padding:0; }
#dns-packets .col-time { width:230px; }#dns-packets .evidence-row > td:nth-child(2) { padding-left:24px; }
.packet-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:16px 0; }
.packet-groups > section { min-width:0; background:var(--panel-soft); padding:18px; border-radius:8px; }
.network-detail .packet-groups .evidence-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.network-detail .evidence-grid > div { border:0; padding:0; }
.packet-provenance { padding:14px 0; }.packet-provenance summary { display:flex; align-items:center; gap:8px; color:var(--accent-link); cursor:pointer; }.packet-provenance[open] .evidence-summary,.packet-provenance[open] > .evidence-grid { margin-top:16px; }

@media(max-width:900px) { .audit-groups { grid-template-columns:minmax(0,1fr); }.posture-counts { grid-template-columns:repeat(3,minmax(0,1fr)); }.coverage-list { grid-template-columns:minmax(0,1fr); } }
.demo-notice { display:flex; align-items:flex-start; gap:10px; color:var(--accent-100); background:var(--accent-soft); padding:14px 18px; border-radius:8px; font-size:13px; }.demo-notice .ui-icon { flex-shrink:0; }
#organizations-create .outlined-field .field-caption { flex-direction:row; width:auto; }
[class*="finding-group-"] .category-icon { color:var(--accent-link); background:transparent; border:0; box-shadow:none; }

.severity-distribution { display:flex; flex-wrap:wrap; gap:12px; }.severity-distribution > div { display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--panel-soft); border-radius:6px; }.severity-distribution dt { color:var(--muted); font-size:12px; }.severity-distribution dd { margin:0; font-size:18px; font-weight:600; }
/* Brand and public platform page: one visual system, clear hierarchy. */
.brand-mark { width:38px; height:38px; border:0; border-radius:0; padding:0; background:none; box-shadow:none; color:var(--accent); }.brand-glyph { width:38px; height:38px; }.brand-block:hover .brand-mark { background:none; box-shadow:none; }

/* Shared evidence groups retain the data while reducing nested borders. */
.evidence-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:16px 0; }.evidence-group,.vulnerability-metrics > section { padding:20px; background:var(--panel-soft); border-radius:8px; min-width:0; }.evidence-group h4,.vulnerability-metrics h4 { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--accent-link); margin:0 0 18px; }.evidence-group .evidence-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding:0; margin:0; }.evidence-group .evidence-grid > div { border:0; padding:0; border-radius:0; background:none; min-width:0; }.evidence-group .evidence-grid dt { text-transform:none; letter-spacing:0; font-size:12px; font-weight:500; }.evidence-group .evidence-grid > div:has(.evidence-grid),.evidence-group .evidence-grid > div:has(.evidence-list-wrap) { grid-column:1/-1; }.evidence-group .evidence-grid .evidence-grid { margin-top:12px; }.evidence-group .evidence-list li { background:transparent; border:0; padding:4px 0; }.evidence-group .evidence-value { white-space:normal; overflow-wrap:anywhere; }.vulnerability-metrics { display:grid; gap:12px; margin-top:16px; }.vulnerability-metrics strong { font-size:23px; }.vulnerability-metrics strong small { font-size:12px; color:var(--muted); }.vulnerability-metrics dl { display:flex; gap:24px; }.vulnerability-metrics dt { color:var(--muted); font-size:12px; }.vulnerability-metrics dd { margin:6px 0 0; }.vulnerability-metrics p { font-size:13px; overflow-wrap:anywhere; }
.finding-list { --finding-columns:minmax(180px,1fr) 140px 132px 24px; }.finding-legend .legend-marker { display:none; }.finding-legend,.finding-card > summary { gap:24px; }.finding-card > summary { padding:18px 20px; }.confidence-meter { display:flex; align-items:center; gap:10px; color:var(--text); }.confidence-meter meter { width:64px; height:8px; appearance:none; }.confidence-meter meter::-webkit-meter-bar { background:#414141; border:0; border-radius:4px; }.confidence-meter meter::-webkit-meter-optimum-value { background:var(--accent); border-radius:4px; }.confidence-meter meter::-moz-meter-bar { background:var(--accent); }.detail-chevron { width:18px; height:18px; color:var(--muted); transform:none; transition:transform 160ms; }.finding-card[open] > summary > .detail-chevron,.evidence-row.is-open .detail-chevron { transform:rotate(90deg); }.finding-evidence > h3 { display:none; }.finding-evidence { padding:20px; }.finding-reason { font-size:14px; margin-top:0; }.finding-card .confidence-empty { font-size:12px; }
.redemption-toggle { display:inline-flex; align-items:center; gap:8px; padding:4px 0; min-height:32px; background:transparent; border:0; color:var(--accent-link); box-shadow:none; font-size:13px; }.redemption-toggle:hover { background:transparent; color:var(--accent-100); }.redemption-records { background:var(--panel-soft); padding:20px; border-radius:8px; }.redemption-records h4 { color:var(--accent-link); display:flex; align-items:center; gap:8px; margin:0; }.redemption-records > p { font-size:13px; }.redemption-records dl { margin:16px 0 0; }.redemption-records dl > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 32px; padding:12px 0; }.redemption-records dt,.redemption-records dd { display:flex; align-items:center; gap:8px; margin:0; font-size:13px; }.redemption-records dd { white-space:nowrap; color:var(--muted); }.redemption-records .ui-icon { width:16px; height:16px; flex-shrink:0; }.redemption-records time { display:inline; white-space:nowrap; }
#dns-packets .dns-section { background:var(--panel-soft); border:0; border-radius:8px; padding:20px; margin-top:16px; }#dns-packets .dns-section h4 { display:flex; align-items:center; gap:8px; color:var(--accent-link); letter-spacing:0; text-transform:none; }.dns-section .record-type { background:none; border:0; padding:0; }.dns-section .chip-list li { background:none; border:0; padding:0; }
.account-role { display:flex; align-items:center; gap:8px; }.role-superadmin { color:var(--accent-link); }.role-admin { color:var(--accent-100); }

@media(max-width:760px) { .evidence-groups { grid-template-columns:1fr; }.evidence-group .evidence-grid { grid-template-columns:1fr; }.finding-list { --finding-columns:minmax(0,1fr) auto 20px; }.finding-card > summary,.finding-legend { gap:12px; }.finding-title,.finding-legend > span:nth-child(2) { grid-column:1/3;grid-row:1; }.finding-card .confidence,.finding-legend .legend-confidence { grid-column:1;grid-row:2;justify-self:start; }.finding-card > summary > .pill,.finding-legend > span:nth-child(4) { grid-column:2;grid-row:2;justify-self:end; }.finding-card .detail-chevron { grid-column:3;grid-row:1/3;display:block; }.redemption-expanded > td::before { display:none; }.redemption-records dt { overflow-wrap:anywhere; min-width:0; } }

/* Shared low-emphasis actions and visibly separated dark surfaces. */
button.redemption-toggle { padding:8px 10px; min-height:36px; border:1px solid var(--line-strong); border-radius:6px; white-space:nowrap; background:transparent; }
button.redemption-toggle:hover { background:var(--panel-soft); border-color:var(--accent-link); }
button.secondary.action-revoke { color:#fda4af; border-color:#84515a; background:transparent; }
button.secondary.action-revoke:hover { color:#ffe4e6; background:#42252b; border-color:#fda4af; }
.account-details strong.account-role { display:flex; align-items:center; gap:8px; }
.audit-event:hover { background:#1b1b1b; box-shadow:inset 3px 0 var(--accent-link); }
.audit-event:hover .audit-group { background:#303030; }
.indicator-card:has(details) { cursor:pointer; }
.indicator-card:hover,.indicator-card:has(:focus-visible) { background:#1b1b1b; border-color:var(--accent-link); transform:none; }
.indicator-card:hover .evidence-group { background:#303030; }

.account-details .role-label { display:inline-flex; align-items:center; gap:7px; }
.audit-event:has(details) { cursor:pointer; }
.audit-event:has(:focus-visible) { box-shadow:inset 3px 0 var(--accent-link); }
.topnav a,.topnav button.linklike { display:inline-flex; align-items:center; gap:7px; }
.topnav .ui-icon { width:16px; height:16px; }
.flash.is-dismissing { opacity:0; transition:opacity 250ms ease; }
@media(prefers-reduced-motion:reduce) { .flash.is-dismissing { transition:none; } }

/* Shared role presentation in account cards and user tables. */
.role-label,.account-details .role-label { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight: 500; line-height:1.5; }
.role-label .ui-icon,.account-details .role-label .ui-icon { display:inline-block; width:18px; height:18px; color:inherit; }
.account-details .role-label.role-superadmin,.role-label.role-superadmin { color:var(--accent-link); }
.account-details .role-label.role-admin,.role-label.role-admin { color:var(--accent-100); }
.account-details .role-label.role-user,.role-label.role-user { color:#b8b8b8; }
.organization-name { display:flex; align-items:center; gap:8px; }
.assignment-capture { display:flex; align-items:center; gap:6px; margin-top:8px; }
.assignment-capture .ui-icon { width:15px; height:15px; }
.assignment-policy { color:var(--muted); }
.invite-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.coverage-checks { display:grid; gap:1px; background:var(--line); margin:16px 0; }
.coverage-check { background:var(--panel); padding:16px; }
.coverage-check > header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.coverage-check h4 { margin:0; font-size:14px; }
.coverage-check .check-context { display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:13px; margin:10px 0; }
.check-state { display:inline-flex; align-items:center; gap:6px; font-size:13px; }
.check-state.complete { color:var(--green); }.check-state.limited { color:var(--yellow); }.check-state.failed { color:var(--red); }
.capture-summary { padding:4px 20px 16px; }

/* Invite history keeps identity, lifecycle, registrations and actions together. */
#tab-redemptions .invite-history-table { min-width: 800px; }
#tab-redemptions .invite-history-table th:nth-child(1) { width: 25%; }
#tab-redemptions .invite-history-table th:nth-child(2) { width: 25%; }
#tab-redemptions .invite-history-table th:nth-child(3) { width: 20%; }
#tab-redemptions .invite-history-table th:nth-child(4) { width: 30%; }
#tab-redemptions .invite-history-table td { vertical-align: top; }
.invite-history-table .invite-actions { gap: 8px; }
.invite-history-table .invite-actions form { margin: 0; }
.invite-history-table .invite-actions button { white-space: nowrap; }
.invite-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.invite-status.is-active { color: var(--green); }
.invite-status.is-revoked { color: var(--muted); }
.invite-status .ui-icon { width: 16px; height: 16px; }
.invite-reference { margin-top: 8px; }
@media (max-width: 760px) {
  #tab-redemptions .invite-history-table { min-width: 0; }
  .invite-history-table .invite-actions { justify-content: flex-start; }
}

.invite-filters { padding: 20px; border-bottom: 1px solid var(--line); }
.registration-table { min-width: 1420px; table-layout: auto; }
.registration-table td { vertical-align: top; min-width: 120px; }
.registration-table td:first-child { min-width: 240px; max-width: 280px; }
.registration-table td:nth-child(5) { min-width: 180px; }
.registration-table small code { overflow-wrap: anywhere; }
.administrator-invite-table { min-width: 1000px; }
@media (max-width:760px) {
  .registration-table, .administrator-invite-table { min-width: 0; }
  .registration-table td, .registration-table td:first-child, .registration-table td:nth-child(5) { min-width: 0; max-width: none; }
  .invite-secret { min-width:0; max-width:100%; }
}

#tab-redemptions .form-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
#tab-redemptions .form-grid > label { display: grid; align-content: start; gap: 7px; min-width: 0; }
#tab-redemptions .form-grid small { display: block; color: var(--muted); font-weight: 400; }
#tab-redemptions .invite-filters .inline-details { margin: 16px 0; }
#tab-redemptions .invite-filters .inline-details .form-grid { padding-top: 16px; }
@media(max-width:900px) { #tab-redemptions .form-grid { grid-template-columns: 1fr; } }

/* Management pages keep decisions in context and tables within their panel. */
.management-page { width:100%; min-width:0; }
.management-page > .panel { margin-top:24px; }
.management-page > .button { margin-top:24px; }
.management-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:18px; }
.management-summary { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center; }
.back-link { display:inline-flex; align-items:center; gap:8px; margin:12px 0; }
.page-heading h1 { overflow-wrap:anywhere; }
.split-heading .heading-help { flex:0 1 auto; margin-left:auto; max-width: min(48%,480px); text-align:left; }
.account-details .role-label { align-items:center; }
.account-details .role-label .ui-icon { margin:0; align-self:center; vertical-align:middle; line-height:1; }
.table-wrap { overflow:visible; contain:none; container-type:inline-size; }
.table-wrap > table { width:100%; min-width:0; table-layout:fixed; }
.table-wrap th, .table-wrap td { min-width:0; max-width:none; overflow-wrap:anywhere; white-space:normal; }
.table-wrap col { width:auto; }
.table-wrap td > *, .table-wrap th > * { max-width:100%; }
.table-wrap code, .table-wrap time, .table-wrap .pill { white-space:normal; overflow-wrap:anywhere; }
.table-wrap .copyable { min-width:0; flex-wrap:wrap; }
.table-wrap .button, .table-wrap button { white-space:normal; }
.profile-table col:nth-child(1) { width:23%; }
.profile-table col:nth-child(2) { width:47%; }
.profile-table col:nth-child(3) { width:12%; }
.profile-table col:nth-child(4) { width:18%; }
.step-chips { flex-wrap:wrap; min-width:0; }
.step-chips li { min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.registration-table td:first-child { width:34%; min-width:0; max-width:none; }
.registration-table td:nth-child(5) { min-width:0; }
.invite-secret { width:100%; max-width:100%; }
.invite-secret [hidden] { display:none !important; }
.secret-field [data-invite-copy].is-copied { color:var(--green); }
.secret-field [data-invite-copy].is-copied .ui-icon { animation:copy-confirm .22s ease-out; }
@keyframes copy-confirm { from { transform:scale(.65); opacity:.4; } to { transform:scale(1); opacity:1; } }
.icon-button { width:38px; height:38px; padding:8px; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; }
@container (max-width:1000px) {
  .stack-table, .stack-table tbody, .stack-table tr, .stack-table td { display:block; width:100%; min-width:0; }
  .stack-table colgroup, .stack-table thead { display:none; }
  .stack-table tr { padding:12px 16px; border-bottom:1px solid var(--line); }
  .stack-table td, .registration-table td:first-child { display:grid; grid-template-columns:minmax(100px,28%) minmax(0,1fr); width:100%; gap:8px 16px; padding:12px 0; border:0; }
  .stack-table td::before { content:attr(data-label); color:var(--muted); font-size: 12px; text-transform:uppercase; grid-column:1; }
  .stack-table td > * { grid-column:2; }
  .stack-table td.empty { display:block; }
  .stack-table td.empty::before { display:none; }
}
@media(max-width:760px) {
 .split-heading .heading-help { max-width:100%; margin-left:0; text-align:left; }
 .table-wrap > table { min-width:0; }
}
@media(prefers-reduced-motion:reduce) { .secret-field [data-invite-copy].is-copied .ui-icon { animation:none; } }

.management-page > .page-heading { display:block; margin:16px 0 28px; }
.management-page > .page-heading h1 { margin:6px 0 12px; }
.management-page > .page-heading p { margin:6px 0; }
.invite-secret button.compact { padding:8px 10px; white-space:nowrap; overflow-wrap:normal; flex-shrink:0; }
.invite-secret { gap:0; display:block; }
.management-page .invite-filters { padding:20px; }

.table-wrap > :is(table,.record-table,.answer-table,.registration-table,.administrator-invite-table,.profile-table) { min-width:0; width:100%; table-layout:fixed; }
@container(max-width:1000px) {
 .stack-table td[colspan] { display:block; width:100%; }
 .stack-table td[colspan]::before { display:none; }
}

.table-wrap > table { min-width:0 !important; max-width:100%; }
@media(max-width:1100px) {
 .workspace-rail .tab-rail { display:flex; flex-wrap:wrap; overflow:visible; }
 .workspace-rail .tab-rail button { flex:1 1 130px; min-width:0; max-width:100%; white-space:normal; }
 .workspace-rail .section-rail { display:flex; flex-wrap:wrap; overflow:visible; min-width:0; }
 .workspace-rail .section-links { display:flex; flex-wrap:wrap; min-width:0; max-width:100%; }
 .workspace-rail .section-link { min-width:0; white-space:normal; }
}

/* Management pages share the dashboard navigation and section rhythm. */
.management-navigation a { display:flex; align-items:center; min-height:38px; padding:8px 12px; border:1px solid transparent; border-radius:var(--radius-sm); color:var(--muted); font-weight:500; text-decoration:none; }
.management-navigation a:hover { background:rgba(255,255,255,.05); color:var(--text); }
.management-navigation a[aria-current] { border-color:rgba(var(--accent-rgb),.45); background:var(--accent-soft); color:var(--accent-100); font-weight:600; }
.management-identity { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.management-identity .role-label { vertical-align:middle; }
.invitation-toolbar { justify-content:space-between; gap:12px; padding:14px 20px; }
.table-wrap .device-manage-link { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; padding:8px 10px; min-height:38px; }
.device-manage-link .ui-icon { width:16px; height:16px; flex-shrink:0; }
.device-manage-link .icon-chevron-right { width:14px; color:var(--muted); }
@media(max-width:1100px) { .management-navigation a { flex:1 1 130px; min-width:0; } }

.management-context-rail .section-link { justify-content:space-between; }
.management-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:24px; margin:0; }
.management-facts dt { color:var(--muted); font-size:12px; margin-bottom:6px; }
.management-facts dd { margin:0; overflow-wrap:anywhere; }
.management-records > article { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 20px; border-top:1px solid var(--line); flex-wrap:wrap; }
.management-records > article > div { min-width:0; flex:1 1 240px; overflow-wrap:anywhere; }
.management-records p { color:var(--muted); margin:6px 0; font-size:13px; }
.page-subtitle { font-size:18px; font-weight:500; color:var(--muted); }
.code-label { display:flex; align-items:center; gap:6px; }
.code-label .ui-icon { width:14px; height:14px; flex-shrink:0; }
[data-registration-row] { cursor:pointer; }
[data-registration-row]:hover { background:rgba(255,255,255,.025); }
[data-registration-row]:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.organization-group td { background:var(--accent-soft); padding:16px; border-top:2px solid var(--line); }
.organization-group-label { display:flex; align-items:center; gap:10px; font-weight:600; }

.password-guidance { color:var(--muted); font-size:13px; line-height:1.6; }

.inline-invitation summary { display:flex; align-items:center; gap:8px; color:var(--accent-link); cursor:pointer; font-weight:600; }
.inline-invitation form { margin-top:18px; align-items:end; }
.inline-invitation [role=status] { grid-column:1/-1; font-size:13px; color:var(--muted); margin:0; }

.management-entry { display: flex; align-items: center; gap: .5rem; padding: .75rem; color: inherit; text-decoration: none; border-radius: .5rem; }
.management-entry:hover { background: rgba(255, 255, 255, .06); }

.rail-name, .management-facts dt { display: inline-flex; align-items: center; gap: .45rem; }

.invite-email-row { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.invite-email-row .outlined-field { flex: 1; min-width: 0; }

.table-sort { display: inline-flex; align-items: center; gap: .4rem; color: inherit; text-decoration: none; }
.table-sort:hover { color: var(--accent-link); }

.page-heading h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -.02em; }
main > .back-link, .form-page > .back-link { font-size: 14px; font-weight: 400; line-height: 1.5; margin: 12px 0; }
.management-identity > span { display: inline-flex; align-items: center; gap: .45rem; }

/* Icons and count badges share the fixed rail width; long names wrap inside it. */
.workspace-rail, .workspace-rail > * { min-width: 0; }
.tab-rail { grid-template-columns: minmax(0, 1fr); }
.tab-rail button { min-width: 0; width: 100%; gap: 8px; white-space: normal; }
.tab-rail .rail-name { min-width: 0; text-align: left; overflow-wrap: anywhere; }
.rail-count { flex-shrink: 0; }

/* Shared management actions and whole-record links. */
.actions-right { justify-content: flex-end; }
.actions-spread > form { margin-inline-start: auto; }
.management-record-link { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 20px; border-top:1px solid var(--line); flex-wrap:wrap; color:inherit; text-decoration:none; }
.management-record-link:hover, .management-record-link:focus-visible { background:var(--surface); outline:1px solid var(--accent-link); outline-offset:-1px; }
th.sortable:focus-within::after { opacity:1; }

/* Shared console contracts: table hover, outlined captions and action alignment. */
.table-wrap table tbody > tr:not(.evidence-detail):not(.organization-group):not(.is-open):not(.evidence-detail tr):not(.finding-evidence tr):hover,
.table-wrap table tbody > tr:not(.evidence-detail):not(.organization-group):not(.is-open):not(.evidence-detail tr):not(.finding-evidence tr):has(:focus-visible) { background:#1b1b1b; outline:0; box-shadow:none; }
.table-wrap table tbody > tr:not(.evidence-detail):not(.organization-group):not(.is-open):not(.evidence-detail tr):not(.finding-evidence tr):is(:hover,:has(:focus-visible)) > td { background:#1b1b1b; }
.table-wrap table tbody > tr:not(.evidence-detail):not(.organization-group):not(.is-open):not(.evidence-detail tr):not(.finding-evidence tr):is(:hover,:has(:focus-visible)) > td:first-child { box-shadow:inset 3px 0 var(--accent-link); }
.table-wrap tr.evidence-detail > td { background:var(--panel); }
.activity-detail > td { padding:0 20px 12px; }
.activity-detail .audit-details > summary { padding:8px 0; }
.registration-details { padding:20px; }
.management-record-link:hover,.management-record-link:focus-visible { background:#1b1b1b; outline:0; box-shadow:inset 3px 0 var(--accent-link); }
.management-facts dt .ui-icon,.management-identity .ui-icon { color:var(--accent-link); }
.platform-organization { background:var(--accent-soft); }
.platform-organization td:first-child { box-shadow:inset 3px 0 var(--accent-link); }
.platform-organization .organization-name > strong { color:var(--accent-link); }
#organizations-create .form-action { width:100%; display:flex; justify-content:flex-end; }
.management-records > .device-group-record > .invite-actions { flex:0 0 auto; margin-left:auto; justify-content:flex-end; }
#invite-administrator { display:flex; justify-content:flex-end; }
.panel-body.form-action { margin:0; padding:20px; align-items:center; }
.scan-heading { align-items:flex-start; padding-top:0; }
.scan-heading .eyebrow { margin-top:0; }
.outlined-field > .field-caption { width:auto; max-width:calc(100% - 24px); }
.outlined-field .password-field { margin-top:0; }
.outlined-field > input,.outlined-field > select,.outlined-field .password-field > input { margin-top:0; }
.primary-search.outlined-field { padding-top:20px; }.primary-search.outlined-field > .field-caption { top:10px; left:32px; }
.account-details > div { position:relative; margin-top:8px; padding-top:22px; }
.account-details > div > span:first-child:not(.role-label) { position:absolute; top:-10px; left:12px; padding:0 6px; background:var(--panel); line-height:20px; }
@media(max-width:760px) { .activity-detail > td::before { display:none; }.activity-detail > td { display:block; }.management-records > .device-group-record > .invite-actions { margin-left:auto; } }

.date-trigger.secondary { width:100%; min-height:48px; justify-content:space-between; text-align:left; font-weight:400; background:var(--panel); border-color:var(--line-strong); color:var(--text); padding:12px; }
.date-trigger::after { content:""; width:16px; height:16px; background:var(--accent-link); mask:var(--i-calendar-days) center/contain no-repeat; }
.date-calendar { position:fixed; margin:0; width:320px; max-width:calc(100vw - 16px); max-height:calc(100vh - 16px); padding:16px; border:1px solid var(--line-strong); border-radius:8px; background:var(--panel); color:var(--text); box-shadow:0 12px 32px #0008; }
.date-calendar::backdrop { background:transparent; }
.calendar-heading,.calendar-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.calendar-heading { margin-bottom:16px; }.calendar-heading strong { font-size:14px; }.calendar-heading button { font-size:24px; }
.calendar-weekdays,.calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; text-align:center; }
.calendar-weekdays { color:var(--muted); font-size:12px; margin-bottom:8px; }
.calendar-days button { min-width:0; min-height:36px; padding:4px; color:var(--text); background:transparent; border:1px solid transparent; box-shadow:none; }
.calendar-days button:hover { background:var(--panel-soft); border-color:var(--accent-link); }
.calendar-days button[aria-pressed="true"] { background:var(--accent); color:#111; }
.calendar-days button[aria-current="date"] { border-color:var(--accent-link); }
.calendar-days button:focus-visible { outline:2px solid var(--accent-link); outline-offset:1px; }
.calendar-actions { border-top:1px solid var(--line); margin-top:16px; padding-top:12px; }

.table-wrap a.icon-button { border:0; box-shadow:none; background:transparent; }

/* One selected-row shade, taken from Active sessions; hover remains transient. */
:root { --highlight-surface:rgba(var(--accent-rgb), .07); --accent-soft:var(--highlight-surface); --table-action-height:38px; }
.session-row.is-current,.organization-group td,.platform-organization { background:var(--highlight-surface); }
#organizations-create .upload-fields { max-width:none; width:100%; }
button.compact,.button.compact,.table-action,.action-revoke { min-height:var(--table-action-height); height:var(--table-action-height); padding:8px 10px; line-height:20px; white-space:nowrap; }
.table-wrap table td { vertical-align:middle; }
.table-wrap [data-manage-row]:has(.row-management-link) { cursor:pointer; }
.invite-status.status-active { color:var(--green); }.invite-status.status-used { color:var(--blue); }.invite-status.status-expired { color:var(--yellow); }.invite-status.status-revoked { color:var(--red); }
#administrator-invite-history .panel-heading { align-items:flex-start; }
#administrator-invite-history .heading-action { margin-left:auto; flex-shrink:0; }
#modules-history th:nth-child(4) { width:12%; }
#modules-history th:nth-child(5) { width:19%; }
#modules-history th:nth-child(6) { width:16%; }
.dropzone-field { position:relative; padding-top:10px; }
.dropzone-field > .dropzone-caption { position:absolute; z-index:2; top:0; left:12px; padding:0 6px; background:var(--panel); line-height:20px; margin:0; }
.dropzone-field .dropzone { margin-top:0; }
.account-summary article > span { display:flex; align-items:center; gap:8px; }.account-summary .ui-icon { color:var(--accent-link); }

@media(max-width:760px) { #administrator-invite-history .panel-heading { flex-wrap:wrap; }.table-wrap .evidence-detail > td::before { display:none; } }

.calendar-period-toggle.secondary { min-height:36px; padding:4px 8px; background:transparent; border:0; font-size:14px; }
.calendar-period { padding:8px 0; }.calendar-period .outlined-field { margin-bottom:16px; }
.calendar-months { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.calendar-period[hidden],.calendar-days[hidden],.calendar-weekdays[hidden] { display:none; }
.calendar-actions .ui-icon { width:14px; height:14px; }

/* Use scan finding spacing and a continuous summary/detail surface. */
.table-wrap table[data-integrated-details] .evidence-row.is-open > td { border-bottom:0; }
.table-wrap table[data-integrated-details] .evidence-detail > td { padding:0; border-top:0; }
.dropzone-caption .field-required { color:var(--accent-link); font-weight: 600; }

/* Expanded records remain a single quiet surface, including their nested data. */
.table-wrap table tbody > tr.evidence-row.is-open:is(:hover,:has(:focus-visible)),
.table-wrap table tbody > tr.evidence-row.is-open:is(:hover,:has(:focus-visible)) > td,
.table-wrap .evidence-detail tr:hover, .table-wrap .evidence-detail tr:hover > td { background:var(--panel); box-shadow:none; }
.finding-card[open] > summary:hover, .audit-event[open]:hover,
.indicator-card[open]:hover,.indicator-card:has(details[open]):hover { background:var(--panel); box-shadow:none; border-color:var(--line); }
.audit-event[open]:hover .audit-group,.indicator-card[open]:hover .evidence-group,.indicator-card:has(details[open]):hover .evidence-group { background:var(--panel-soft); }
.copyable code,.has-copy code { cursor:pointer; }
.scan-link-row .investigate-link { color:#fff; }
.management-page > .organization-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.organization-heading .heading-action { margin-left:auto; flex-shrink:0; }
@media(max-width:760px) { .management-page > .organization-heading { align-items:flex-start; flex-wrap:wrap; }.organization-heading .heading-action { margin-left:0; } }
@property --register-angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes register-outline { to { --register-angle:360deg; } }
.topnav .gradient-outline,.topnav .gradient-outline:hover,.topnav .gradient-outline:focus-visible {
 border:1px solid transparent;
 background:linear-gradient(var(--panel),var(--panel)) padding-box,conic-gradient(from var(--register-angle),var(--accent-deep),var(--accent),var(--accent-hi),var(--accent-deep)) border-box;
 animation:register-outline 5s linear infinite;
}
@media(prefers-reduced-motion:reduce) { .topnav .gradient-outline,.topnav .gradient-outline:hover,.topnav .gradient-outline:focus-visible { animation:none; } }

.table-wrap table tbody > tr.evidence-row.is-open:is(:hover,:has(:focus-visible)) > td:first-child { box-shadow:none; }
/* Passkey screens reuse the console surfaces, type and button tokens. */
.passkey-content { display: grid; gap: 1rem; padding: 1.25rem; min-width: 0; }
.passkey-content > p { margin: 0; }
.passkey-content > .panel { display: grid; gap: .75rem; padding: 1rem; min-width: 0; }
.passkey-content > .panel p { margin: 0; }
.passkey-content details { min-width: 0; }
.passkey-content details[open] { display: block; }
.passkey-content .enrollment-help > p { margin: 12px 0; }
.passkey-content input, .passkey-content textarea, .passkey-content select { max-width: 100%; box-sizing: border-box; }
.auth-shell { align-items: start; }
.auth-shell .auth-aside { padding-top: 96px; }
@media (max-width: 900px) { .auth-shell .auth-aside { padding-top: 0; } }
.passkey-content [data-passkey-status]:empty { display: none; }
.passkey-setup { display: grid; gap: 20px; min-width: 0; }
.passkey-setup [hidden] { display: none !important; }
.passkey-steps { display: flex; margin: 0; padding: 0 0 20px; list-style: none; border-bottom: 1px solid var(--line); gap: 8px; }
.passkey-steps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; color: var(--muted); text-align: center; font-size: .75rem; line-height: 1.4; }
.passkey-step-number { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; font-size: .8125rem; font-weight: 600; }
.passkey-step-number .passkey-step-check { display: none; }
.passkey-steps .is-current { color: var(--text); font-weight: 600; }
.passkey-steps .is-current .passkey-step-number { background: var(--accent); color: #16100a; border-color: var(--accent); }
.passkey-steps .is-saved { color: var(--green); }
.passkey-steps .is-saved .passkey-step-number { border-color: var(--green); background: rgba(53, 201, 139, .08); }
.passkey-steps .is-saved [data-step-number] { display: none; }
.passkey-steps .is-saved .passkey-step-check { display: inline-block; }
.passkey-saved-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.passkey-saved-item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; animation: passkey-saved-in 180ms ease-out; }
.passkey-saved-item > div { display: grid; gap: 3px; min-width: 0; flex: 1; }
.passkey-saved-item strong { font-size: .875rem; overflow-wrap: anywhere; }
.passkey-saved-caption { color: var(--muted); font-size: .75rem; }
.passkey-saved-state { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: .75rem; white-space: nowrap; }
.passkey-current-step h3 { margin: 0; font-size: 1.0625rem; line-height: 1.4; }
.passkey-current-step p { margin: 8px 0 0; font-size: .875rem; line-height: 1.5; }
.passkey-current-step h3:focus { outline: none; }
.passkey-setup [data-passkey-entry] { display: grid; gap: 16px; }
.passkey-setup .field { margin: 0; }
.passkey-setup button { width: 100%; }
@keyframes passkey-saved-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .passkey-saved-item { animation: none; } }
.passkey-recovery-dialog { width: min(560px, calc(100vw - 32px)); }
.passkey-recovery-dialog .modal-body { padding: 20px; }
.passkey-recovery-body textarea { display: block; width: 100%; min-height: 120px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; line-height: 1.5; resize: vertical; box-sizing: border-box; }
.passkey-recovery-body textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.passkey-recovery-body [data-passkey-dialog-status]:empty { display: none; }
.passkey-recovery-body [data-recovery-result][hidden] { display: none; }

/* ---------- accessibility and consistency pass ----------
   Every page now carries exactly one h1 (its title). The selectors below give
   those h1s the sizes their h2 predecessors had, so the visual hierarchy is
   unchanged while assistive technology gets a real document outline. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus-visible { transform: none; color: var(--accent-ink); }
main:focus { outline: none; }

/* The page you are on stays marked, not just hovered. */
.topnav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }

.auth-aside h1 { font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -.02em; }
.error-page h1 { margin: 12px 0 0; font-size: clamp(22px, 3vw, 28px); }
@media (max-width: 640px) { .page-heading h1 { font-size: 24px; } }

/* Password and passkey sign-in are alternatives; say so between them. */
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--dim); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.login-alternative ~ .auth-alt { padding-top: 16px; }

/* Passkey feedback: one treatment for progress, success and errors, so a
   failed ceremony reads as a failure instead of more grey help text. */
.passkey-message { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-soft); color: var(--muted); font-size: .875rem; line-height: 1.55; }
.passkey-message:empty { display: none; }
.passkey-message.is-success { border-color: rgba(74, 222, 128, .35); background: rgba(74, 222, 128, .07); color: #bbf7d0; }
.passkey-message.is-error { border-color: rgba(251, 113, 133, .4); background: rgba(251, 113, 133, .08); color: #fecdd3; }
.modal-body .passkey-message { margin-top: 12px; }

.passkey-step-label { color: var(--accent-link); font-size: .8125rem; font-weight: 600; }
.passkey-cancel { justify-self: center; }
.passkey-cancel > button.linklike { width: auto; min-height: 40px; font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; }
.approval-form .field-hint { margin: -8px 0 0; }

.passkey-recovery-result { display: grid; gap: 12px; margin-top: 4px; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel-soft); }
.passkey-recovery-result p, .passkey-recovery-result .field { margin: 0; }
.passkey-recovery-result .passkey-result-actions { margin-top: 0; }
#recovery-secret { font-family: "Geist Mono", ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: .02em; }

/* Windows high contrast and other forced-colour modes drop backgrounds; keep
   controls, status chips and focus outlines distinguishable there. */
@media (forced-colors: active) {
  button, .button, .pill, .passkey-message { border: 1px solid CanvasText; }
  :focus-visible { outline: 2px solid Highlight; }
  .topnav a[aria-current="page"] { border-color: Highlight; }
}

/* Narrow screens: let copy own its row so the tag and action wrap beneath it,
   instead of squeezing the text into a one-word column beside them. */

@media (max-width: 480px) {
  .topbar-inner { flex-wrap: wrap; row-gap: 6px; }
  .topnav { flex: 1 1 100%; flex-wrap: nowrap; justify-content: space-between; }
}
/* Rail labels are single short words; wrap between words, never inside one. */
.tab-rail .rail-name { overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (max-width: 640px) { .workspace-rail .tab-rail button { flex: 1 1 auto; width: auto; white-space: nowrap; } }

/* Passkey manager: built on the Active sessions row (.session-row) so both
   account lists share one layout: details, a status tag, then actions. */
.passkey-summary { display: grid; gap: 12px; }
.passkey-summary > p:first-child { margin: 0; color: var(--muted); }
.passkey-summary > p:first-child strong { color: var(--text); font-weight: 600; }
.passkey-summary .pill { margin-right: 6px; vertical-align: 1px; }
.passkey-list { border-top: 1px solid var(--line); }
.passkey-settings { border-top: 1px solid var(--line); background: rgba(255, 255, 255, .012); }
.session-copy .passkey-required { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--muted); }
.passkey-required .ui-icon { width: 14px; height: 14px; color: var(--accent-link); }
.session-copy .passkey-message { margin-top: 10px; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.row-actions form { margin: 0; }
@media (max-width: 640px) {
  .session-row .row-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Registration code: the reveal and copy controls live inside the field, the
   same way the password field carries its show/hide toggle. */
.secret-field { position: relative; display: flex; align-items: center; width: 100%; max-width: 300px; }
.secret-field .invite-secret-value { width: 100%; min-width: 0; height: 40px; padding-right: 76px; font-family: "Geist Mono", ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; letter-spacing: .04em; }
.secret-field-actions { position: absolute; right: 4px; top: 50%; display: flex; gap: 2px; transform: translateY(-50%); }
.secret-field-actions button.icon-button { width: 32px; height: 32px; min-height: 32px; flex-basis: 32px; padding: 7px; }
.secret-field-actions button.icon-button:hover:not(:disabled) { background: var(--secondary-hover); color: var(--text); }
.secret-field-actions button.icon-button:disabled { opacity: .35; }
.secret-field-actions .ui-icon { width: 16px; height: 16px; }
.secret-field + .code-label { margin-top: 8px; }

/* ---------- table system ----------
   One layout for every data table. Earlier patches forced table-layout:fixed,
   which split width evenly across columns: dates, names and buttons wrapped
   while other columns sat half empty. Columns now size to their content; only
   free text wraps, and the action column shrinks to fit on the right. */
.table-wrap { overflow-x: auto; }
.table-wrap > table:not(.profile-table):not(.evidence-table) { table-layout: auto; }
.table-wrap th { white-space: nowrap; }
.table-wrap td { vertical-align: middle; }
.table-wrap td time, .table-wrap td .pill, .table-wrap td .button, .table-wrap td button,
.table-wrap td .invite-status, .table-wrap td .role-label, .table-wrap td .evidence-count { white-space: nowrap; overflow-wrap: normal; }
.table-wrap .copyable { flex-wrap: nowrap; }
.table-wrap td:not(.empty):last-child:has(> .button, > button, > form, > .row-actions) { width: 1%; white-space: nowrap; text-align: right; }
.table-wrap td:last-child > form { display: inline-flex; }
.table-wrap td > small { margin-top: 2px; }
.table-wrap td.expand-cell { width: 44px; padding-inline: 8px; text-align: right; }
th.sortable > .table-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
th.sortable > .table-sort:hover { color: var(--text); }
th.sortable > .table-sort:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* The sort arrow sits right after its label, so a wide column doesn't strand
   it at the far edge, and every header keeps the same left padding as its cells. */
th.sortable { padding-right: 12px; }
th.sortable::after { position: static; display: inline-block; margin: 0 0 0 4px; vertical-align: -3px; }
th.sortable > .table-sort { display: inline; }

/* ---------- controls (authoritative) ----------
   Buttons were defined three times with competing heights (34/38/40px) and
   corners (6/8/10px). These rules settle one scale: 40px default, 34px compact
   (table actions included), and the same 8px corner as inputs. */
:root { --control-h: 40px; --control-h-compact: 34px; --control-radius: var(--radius-sm); --table-action-height: var(--control-h-compact); }
button, .button { min-height: var(--control-h); border-radius: var(--control-radius); font-size: 13px; font-weight: 600; line-height: 20px; }
button.compact, .button.compact, .table-action, .action-revoke { min-height: var(--control-h-compact); height: var(--control-h-compact); padding: 0 12px; gap: 6px; }
button .ui-icon, .button .ui-icon { width: 16px; height: 16px; vertical-align: middle; }
button.secondary.action-revoke, .button.secondary.action-revoke { color: #fda4af; border-color: rgba(251, 113, 133, .45); background: transparent; }
button.secondary.action-revoke:hover, .button.secondary.action-revoke:hover { color: #ffe4e6; border-color: #fda4af; background: rgba(251, 113, 133, .12); }
input, select, textarea { border-radius: var(--control-radius); }

/* Stat tiles are read-only: no hover lift or staggered entrance. The grid fits
   its tile count, so seven scan metrics share one row instead of orphaning two. */
.summary-grid article { animation: none; transition: none; }
.summary-grid article:hover { transform: none; border-color: var(--line); }
@media (min-width: 1101px) { .summary-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } }
.scan-summary strong { font-size: 24px; }

/* Wrap long identifiers only when they cannot fit, and never let them shrink a
   column's minimum width (overflow-wrap:anywhere did, splitting names mid-word). */
.table-wrap th, .table-wrap td, .table-wrap code { overflow-wrap: break-word; }
/* Stacked (card) tables: the action cell spans the card, without a label. */
@container (max-width: 1000px) {
  .table-wrap td:not(.empty):last-child:has(> .button, > button, > form, > .row-actions) { display: block; width: 100%; padding-top: 14px; text-align: left; }
  .table-wrap td:not(.empty):last-child:has(> .button, > button, > form, > .row-actions)::before { display: none; }
  .table-wrap td:last-child > .button, .table-wrap td:last-child > form, .table-wrap td:last-child > form > button { width: 100%; }
}

/* Server-sorted headers: the link fills the whole header cell, so the entire
   box is the click target, and the arrow travels with it. */
th.sortable:has(> .table-sort) { padding: 0; }
th.sortable:has(> .table-sort)::after { content: none; }
th.sortable > .table-sort { display: flex; align-items: center; gap: 4px; width: 100%; min-height: 44px; padding: 13px 12px; color: inherit; text-decoration: none; }
th.sortable > .table-sort::after { content: ""; flex: 0 0 auto; width: 14px; height: 14px; background: currentColor; mask: var(--i-chevron-up) center / contain no-repeat; opacity: 0; transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease); }
th.sortable:hover > .table-sort::after, th.sortable > .table-sort:focus-visible::after { opacity: .35; }
th.sortable[aria-sort="ascending"] > .table-sort::after { opacity: 1; color: var(--accent-200); }
th.sortable[aria-sort="descending"] > .table-sort::after { opacity: 1; color: var(--accent-200); transform: rotate(180deg); }
th.sortable > .table-sort:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: 0; }

/* Tile values share a baseline even when one label wraps to two lines. */
.summary-grid article { display: flex; flex-direction: column; }
.summary-grid article > strong { margin-top: auto; padding-top: 10px; }
/* Header cells and counts sit on the same centre line as the rest of the row. */
.table-wrap th { vertical-align: middle; }
.table-wrap td .evidence-count { margin: 0; vertical-align: middle; }

/* ---------- landing ----------
   Minimal and product-first: one centred statement, the real console, four
   plain capabilities, one call to action. No decorative motion or labels. */

/* =====================================================================
   Theme: Geist-style console
   Pure black canvas, near-black surfaces, hairline borders and no shadows.
   Neutral white primary actions; brand orange is reserved for the logo,
   focus and selection accents, and colour otherwise means status.
   ===================================================================== */
:root {
  --bg: #000;
  --panel: #0a0a0a;
  --panel-soft: #111;
  --surface: #111;
  --line: #1f1f1f;
  --line-strong: #2e2e2e;
  --text: #ededed;
  --muted: #a1a1a1;
  --dim: #8f8f8f;
  --secondary: #0a0a0a;
  --secondary-hover: #1a1a1a;
  --accent-link: #ededed;
  --accent-link-hover: #fff;
  --accent-soft: rgba(255, 255, 255, .06);
  --highlight-surface: rgba(255, 255, 255, .04);
  --ring: rgba(var(--accent-rgb), .7);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: none;
  --shadow-md: none;
  --btn-primary-bg: #ededed;
  --btn-primary-fg: #0a0a0a;
  --btn-primary-hover: #d4d4d4;
  --control-h: 40px;
  --control-h-compact: 32px;
  --table-action-height: 32px;
}
body { background: var(--bg); }
code, pre, kbd, samp { font-family: "Geist Mono", ui-monospace, "Cascadia Code", Consolas, monospace; }
a { color: var(--text); text-decoration-color: rgba(255, 255, 255, .3); }
a:hover { color: #fff; text-decoration-color: currentColor; }
::selection { background: rgba(var(--accent-rgb), .35); color: #fff; }

/* Top bar: one hairline, small grey links, the current page in white. */
.topbar { background: rgba(0, 0, 0, .82); border-bottom: 1px solid var(--line); }
.topbar-inner { min-height: 64px; padding-block: 0; }
.brand-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.topbar .brand-mark, .topbar .brand-glyph { width: 26px; height: 26px; }
.topnav { gap: 2px; }
.topnav a, .topnav .linklike { min-height: 32px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--muted); font-size: 14px; font-weight: 400; }
.topnav a:hover, .topnav .linklike:hover { color: var(--text); background: var(--secondary-hover); }
.topnav a[aria-current="page"] { color: var(--text); box-shadow: none; background: transparent; border-radius: var(--radius-sm); }
.topnav .ui-icon { display: none; }
.topnav .gradient-outline, .topnav .gradient-outline:hover, .topnav .gradient-outline:focus-visible {
  margin-left: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-sm);
  background: var(--btn-primary-bg); color: var(--btn-primary-fg); font-weight: 500; box-shadow: none; animation: none;
}
.topnav .gradient-outline:hover { background: var(--btn-primary-hover); }

/* Buttons */
button, .button { border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; letter-spacing: 0; box-shadow: none; }
button.compact, .button.compact, .table-action, .action-revoke { font-size: 13px; }
button.secondary, .button.secondary { background: var(--secondary); border-color: var(--line-strong); color: var(--text); }
button.secondary:hover, .button.secondary:hover { background: var(--secondary-hover); border-color: #3d3d3d; }
button.secondary.action-revoke, .button.secondary.action-revoke { color: #ff6166; border-color: var(--line-strong); background: var(--secondary); }
button.secondary.action-revoke:hover, .button.secondary.action-revoke:hover { color: #ff8589; border-color: rgba(255, 97, 102, .5); background: rgba(255, 97, 102, .08); }
button.icon-button, button.modal-close, button.password-toggle { color: var(--muted); border-radius: var(--radius-sm); }
button.icon-button:hover, button.modal-close:hover, button.password-toggle:hover { background: var(--secondary-hover); border-color: transparent; color: var(--text); }
button:disabled, .button[aria-disabled="true"] { opacity: .45; }

/* Inputs: label above, hairline field, quiet focus ring. */
input, select, textarea { background-color: var(--panel); border-color: var(--line-strong); color: var(--text); font-size: 14px; }
input:hover, select:hover, textarea:hover { border-color: #3d3d3d; }
input:focus, select:focus, textarea:focus { border-color: #8f8f8f; box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); outline: none; }
input::placeholder, textarea::placeholder { color: var(--dim); }
.outlined-field { padding-top: 0; }
.outlined-field > .field-caption, .outlined-field .field-caption, #organizations-create .outlined-field .field-caption {
  position: static; display: flex; align-items: baseline; gap: 6px; width: auto; max-width: none; margin: 0 0 6px; padding: 0;
  background: none; color: var(--muted); font-size: 13px; font-weight: 500; line-height: 20px;
}
.outlined-field .field-caption .field-required { color: var(--muted); font-weight: 400; }
.outlined-field .field-caption .field-optional { color: var(--dim); }
.outlined-field input, .outlined-field select, .outlined-field .select-button, #organizations-create .outlined-field input { min-height: var(--control-h); padding-top: 0; padding-bottom: 0; }
.outlined-field textarea { padding-top: 10px; }
.field label, .filter-grid label { color: var(--muted); font-size: 13px; font-weight: 500; }

/* Surfaces */
.panel, .summary-grid article { background: var(--panel); border-color: var(--line); border-radius: var(--radius-lg); box-shadow: none; }
.panel-heading { padding: 20px 24px; border-bottom-color: var(--line); background: transparent; }
.panel-heading h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.heading-help { color: var(--muted); font-size: 14px; }
.panel-body { padding: 20px 24px; }
.summary-grid article { padding: 20px; }
.summary-grid > article > span { color: var(--muted); font-size: 14px; }
.summary-grid > article > span > .ui-icon { color: var(--dim); width: 16px; height: 16px; }
.summary-grid strong { font-size: 28px; font-weight: 600; letter-spacing: -.03em; }

/* Page titles: one clear title and a short grey line below, no label above. */
.page-heading h1, .management-page > .page-heading h1 { font-size: 32px; font-weight: 600; letter-spacing: -.04em; line-height: 1.15; }
.page-subtitle, .management-page > .page-heading p { color: var(--muted); font-size: 15px; }

/* Side rail: plain list, soft fill for the current item, counts as grey text. */
.tab-rail { gap: 2px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.tab-rail button { min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); color: var(--muted); font-size: 14px; font-weight: 400; }
.tab-rail button .ui-icon { width: 16px; height: 16px; color: var(--dim); }
.tab-rail button:hover { background: var(--secondary-hover); color: var(--text); }
.tab-rail button[aria-selected="true"] { border: 0; background: #1a1a1a; color: var(--text); font-weight: 500; }
.tab-rail button[aria-selected="true"] .ui-icon { color: var(--text); }
.rail-count, .tab-rail button[aria-selected="true"] .rail-count { padding: 0; background: none; color: var(--dim); font-size: 13px; font-weight: 400; }
.section-rail { padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.rail-title { padding-left: 10px; color: var(--dim); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.section-link { border-left: 0; border-radius: var(--radius-sm); padding: 6px 10px; color: var(--muted); font-size: 13px; }
.section-link:hover { background: var(--secondary-hover); color: var(--text); }
.back-link { color: var(--muted); font-size: 14px; text-decoration: none; }
.back-link:hover { color: var(--text); }

/* Tables: sentence-case grey headers, hairline rows, soft hover. */
th { background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
th, td { border-bottom-color: var(--line); }
tbody tr:hover, .scan-link-row:hover, .scan-link-row:has(:focus-visible) { background: var(--panel-soft); }
.stack-table td::before { text-transform: none; letter-spacing: 0; font-size: 12px; }

/* Status: a coloured dot and plain text, as in a deployment list. */
.pill, .pill.active, .pill.revoked, .pill.warning, .pill.neutral,
.pill.risk-low, .pill.risk-medium, .pill.risk-high, .pill.risk-critical {
  gap: 7px; padding: 0; border: 0; background: none; color: var(--text); font-size: 13px; font-weight: 400; animation: none;
}
.pill::before { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--sev, 115, 115, 115)); box-shadow: none; -webkit-mask: none; mask: none; }
.pill.neutral { color: var(--muted); }
.pill.neutral::before { background: #525252; }

/* Modals, flashes and small controls */
.modal { background: var(--panel); border-color: var(--line-strong); border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.modal-head, .modal-foot { border-color: var(--line); }
.flash { background: var(--panel); border-color: var(--line-strong); border-radius: var(--radius-md); box-shadow: none; }
.copy-button { color: var(--dim); }
.copy-button:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.pill.active::before, .pill.revoked::before, .pill.warning::before, .pill.neutral::before,
.pill.risk-low::before, .pill.risk-medium::before, .pill.risk-high::before, .pill.risk-critical::before { -webkit-mask: none; mask: none; }
.section-count { padding: 0; background: none; color: var(--dim); font-size: 12px; }
/* Everything inside a panel shares the heading's 24px gutter. */
.panel .table-wrap th:first-child, .panel .table-wrap td:first-child { padding-left: 24px; }
.panel .table-wrap th:last-child, .panel .table-wrap td:last-child { padding-right: 24px; }
.panel .table-wrap th.sortable:first-child:has(> .table-sort) { padding-left: 0; }
.panel .table-wrap th.sortable:first-child > .table-sort { padding-left: 24px; }
.results-meta { padding: 12px 24px; }
.primary-search { padding: 20px 24px 16px; }
.advanced-filters > summary { padding-inline: 24px; }
.search-panel { background: transparent; }
.rail-tally { padding: 0; background: none; color: var(--dim); font-size: 12px; }

/* Landing: grid backdrop, bento screenshots and restrained motion. */

@container (max-width: 1000px) {
  .panel .table-wrap td:first-child, .panel .table-wrap td:last-child { padding-left: 0; padding-right: 0; }
}
.date-trigger.secondary { min-height: var(--control-h); padding: 0 12px; }
.date-trigger::after { background: var(--dim); }
.assessment-intro { padding: 16px 24px; }
.assessment-dimensions { padding: 24px; background: transparent; }
.finding-group .panel-heading, .finding-group > summary { padding-inline: 24px; }
.auth-form { padding: 24px; }
.login-form { padding-bottom: 12px; }
.login-alternative { padding: 0 24px; }
.auth-alt { padding: 16px 24px 24px; }
.passkey-content { padding: 24px; }
.auth-aside-link { color: var(--text); }
.session-row { padding: 16px 24px; }
.session-action, .password-form { padding-inline: 24px; }
.management-records > article, .management-record-link { padding-inline: 24px; }
.management-facts.panel-body { padding-inline: 24px; }
.upload-form { padding: 24px; }
legend, fieldset > legend { color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
fieldset { border-color: var(--line); border-radius: var(--radius-md); }
.upload-group legend { color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
/* Labels use sentence case and normal tracking throughout. */
.eyebrow, .field-label, .risk-badge span, .field-required, .field-optional, .score-legend, .finding-legend, .finding-evidence h3, .evidence-grid dt, .active-filter-dot, .dns-section h4, .step-chip, .stack-table > tbody > tr > td::before { text-transform: none; letter-spacing: 0; }
.eyebrow { color: var(--muted); font-size: 13px; font-weight: 500; }
.evidence-grid dt, .score-legend, .finding-legend { font-size: 12px; font-weight: 500; }

/* ---------- Theme: monochrome accents, Geist status colours ----------
   The orange ramp is retired from the interface. Neutral tokens drive every
   former accent (selection, active rails, links, icons, the logo); blue marks
   focus and selection as it does in Geist; colour otherwise means status. */
:root {
  --accent-rgb: 237, 237, 237;
  --accent: #ededed;
  --accent-hi: #a1a1a1;
  --accent-hover: #fff;
  --accent-press: #d4d4d4;
  --accent-deep: #a1a1a1;
  --accent-100: #ededed;
  --accent-200: #ededed;
  --accent-link: #ededed;
  --accent-link-hover: #fff;
  --accent-soft: rgba(255, 255, 255, .06);
  --accent-ink: #0a0a0a;
  --accent-surface: #1a1a1a;
  --accent-surface-hover: #242424;
  --blue: #52a8ff;
  --cyan: #52a8ff;
  --green: #62c073;
  --yellow: #f5a524;
  --orange: #ff8a3d;
  --red: #ff6166;
  --focus: #52a8ff;
  --ring: rgba(82, 168, 255, .75);
  --ease: cubic-bezier(.2, 0, 0, 1);
  --speed: 150ms;
}
::selection { background: rgba(82, 168, 255, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { border-color: #8f8f8f; box-shadow: 0 0 0 3px rgba(82, 168, 255, .25); }

.risk-low, .pill.active { --sev: 98, 192, 115; }
.risk-medium, .pill.warning { --sev: 245, 165, 36; }
.risk-high { --sev: 255, 138, 61; }
.risk-critical, .pill.revoked { --sev: 255, 97, 102; }
.pill.neutral { --sev: 82, 82, 82; }

/* Logo: a monochrome mark, as a dashboard header carries it. */
.brand-mark { color: #ededed; }
.brand-mark .brand-glyph path:last-child { fill: #ededed; }

/* Badges: small rounded labels on a grey wash; tinted only when they carry status. */
.role-label, .invite-status, .filter-chip, .step-chip, .active-filter-dot, .count-badge {
  display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 8px;
  border: 0; border-radius: 999px; background: #1f1f1f; color: var(--text);
  font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.role-label .ui-icon, .invite-status .ui-icon { width: 13px; height: 13px; color: inherit; }
.role-label.role-superadmin { background: rgba(82, 168, 255, .14); color: #8fc7ff; }
.role-label.role-admin { background: rgba(237, 237, 237, .08); color: var(--text); }
.invite-status.status-active { background: rgba(98, 192, 115, .14); color: #8fd99c; }
.invite-status.status-used { background: #1f1f1f; color: var(--muted); }
.invite-status.status-expired { background: rgba(245, 165, 36, .14); color: #f7c066; }
.invite-status.status-revoked { background: rgba(255, 97, 102, .14); color: #ff8a8e; }
.field-required { color: var(--muted); }

/* Former accent words (links in prose, emphasised values) read as plain text. */
.muted-link, .heading-help a, .auth-alt a, p a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.heading-help a:hover, .auth-alt a:hover, p a:hover { text-decoration-color: currentColor; }

/* Interaction motion: quick colour transitions, a soft entrance for overlays. */
a, button, .button, input, select, textarea, summary, .tab-rail button, .section-link, tbody tr {
  transition: color var(--speed) var(--ease), background-color var(--speed) var(--ease),
    border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
button:active:not(:disabled), .button:active { transform: none; }
@keyframes overlay-in { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
dialog[open] { animation: overlay-in 180ms var(--ease); }
dialog[open]::backdrop { background: rgba(0, 0, 0, .6); animation: backdrop-in 180ms var(--ease); }
.select-menu:not([hidden]), .date-calendar[open] { animation: overlay-in 140ms var(--ease); }
details > summary .ui-icon, .detail-chevron { transition: transform 200ms var(--ease); }
details[open] > summary > .ui-icon, [aria-expanded="true"] > .detail-chevron { transform: rotate(90deg); }
details[open] > *:not(summary) { animation: none; }
.flash { animation: overlay-in 220ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  dialog[open], dialog[open]::backdrop, .select-menu:not([hidden]), .date-calendar[open], .flash { animation: none; }
}

/* Small chrome that still carried the old accent. */
.copy-button.is-copied, .copy-tick { color: var(--green); }
.dropzone { border-color: var(--line-strong); background: transparent; }
.dropzone:hover, .dropzone.is-dragging { border-color: #8f8f8f; background: #0f0f0f; }
.to-top { background: var(--panel); border: 1px solid var(--line-strong); color: var(--text); }
.platform-organization td:first-child { box-shadow: inset 2px 0 0 #ededed; }
.platform-organization .organization-name > strong { color: var(--text); }
.topbar-inner > .brand-block { flex: 0 0 auto; }
.topbar-scope { display: inline-flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; margin-left: 4px; color: var(--text); font-size: 14px; font-weight: 500; }
.topbar-sep { color: #3d3d3d; font-size: 22px; font-weight: 200; line-height: 1; }
.topbar-org { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .topbar-scope { display: none; } }
/* A count of zero is not a signal: only non-zero posture counts carry colour. */
.posture-count.is-zero dd { color: var(--dim); }
.integrity-confidence { color: var(--text); }
.assessment-card .eyebrow { display: block; margin-bottom: 6px; }
.filter-grid { padding: 4px 24px 20px; }
.audit-filter-grid { padding: 20px 24px; }
.finding-legend, .finding-card > summary { padding-inline: 24px; }
.finding-evidence { padding: 20px 24px; }

/* =====================================================================
   Layout: Geist dashboard structure
   Tabs sit directly under the header and span the page; content follows in
   one column. Statuses are Badges (Geist reserves the bare dot for
   deployment lifecycle). Section cards read like Vercel settings cards:
   title and description stacked, actions in a footer bar.
   ===================================================================== */

/* Header: logo mark, slash, workspace, badge, grouped tightly as one unit. */
.topbar-inner { gap: 0; }
.topbar-inner:has(.topbar-scope) .brand-text { display: none; }
.topbar-inner:has(.topbar-scope) .brand-block { gap: 0; }
.topbar-scope { gap: 8px; margin-left: 12px; font-size: 14px; font-weight: 500; }
.topbar-sep { display: inline-block; width: 1px; height: 22px; margin-right: 4px; background: #333; color: transparent; font-size: 0; transform: rotate(20deg); }
.org-avatar { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #3d3d3d, #1a1a1a); color: #ededed; font-size: 11px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.topbar-org { color: var(--text); font-weight: 500; }
.topnav { margin-left: auto; }

/* Tabs: a full-width bar under the header, white underline on the current tab. */
.workspace { display: block; }
.workspace-rail {
  position: sticky; top: var(--topbar-h, 64px); z-index: 15; display: flex; align-items: stretch; gap: 8px;
  max-height: none; margin: -24px calc(50% - 50vw) 32px; padding: 0 calc(50vw - 50%);
  overflow: visible; border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, .9);
  backdrop-filter: saturate(180%) blur(12px);
}
.workspace-rail .section-rail { display: none; }
.tab-rail { display: flex; flex: 1 1 auto; gap: 0; min-width: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.tab-rail::-webkit-scrollbar { display: none; }
.workspace-rail .tab-rail button, .tab-rail button {
  position: relative; flex: 0 0 auto; width: auto; min-height: 48px; height: 48px; padding: 0 4px; margin: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 14px; font-weight: 400; white-space: nowrap;
}
.tab-rail button .rail-name { display: inline-flex; align-items: center; gap: 0; padding: 6px 10px; border-radius: var(--radius-sm); transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease); }
.tab-rail button .ui-icon, .tab-rail button .rail-count { display: none; }
.tab-rail button:hover { background: transparent; color: var(--text); }
.tab-rail button:hover .rail-name { background: #1a1a1a; }
.tab-rail button[aria-selected="true"] { background: transparent; color: var(--text); font-weight: 400; }
.tab-rail button[aria-selected="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text); }
.workspace-rail > .management-entry { display: inline-flex; align-self: center; align-items: center; gap: 6px; order: 2; padding: 6px 10px; border: 0; border-radius: var(--radius-sm); color: var(--muted); font-size: 14px; text-decoration: none; white-space: nowrap; }
.workspace-rail > .management-entry:hover { background: #1a1a1a; color: var(--text); }
.workspace-rail > .management-entry .ui-icon { width: 15px; height: 15px; }
.workspace-main { min-width: 0; }
.back-link { display: inline-flex; margin: 0 0 16px; }
@media (max-width: 640px) {
  .workspace-rail { margin-bottom: 24px; }
  .workspace-rail > .management-entry { display: none; }
}

/* Page title row */
.page-heading { margin: 0 0 28px; }
.page-heading h1, .management-page > .page-heading h1 { font-size: 32px; font-weight: 600; letter-spacing: -.035em; }
.page-subtitle { margin-top: 6px; font-size: 14px; }

/* Metrics: one bordered strip divided into cells, as a usage summary. */
.summary-grid { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); margin-bottom: 32px; }
.summary-grid article { border: 0; border-radius: 0; background: transparent; padding: 20px 24px; }
.summary-grid article + article { box-shadow: inset 1px 0 0 var(--line); }
.summary-grid > article > span { gap: 0; color: var(--muted); font-size: 14px; }
.summary-grid > article > span > .ui-icon { display: none; }
.summary-grid strong { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.scan-summary strong.summary-text { font-size: 16px; font-weight: 500; }

/* Section cards: stacked title and description; forms end in a footer bar. */
.panel { margin-bottom: 24px; }
.split-heading { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; }
.panel-body { padding: 16px 24px 24px; }
.panel .form-action, .upload-form > .form-action { margin: 8px -24px -24px; padding: 12px 24px; border-top: 1px solid var(--line); background: #0d0d0d; border-radius: 0 0 var(--radius-lg) var(--radius-lg); justify-content: flex-end; }
.panel .upload-form { padding: 16px 24px 24px; }

/* Badges (Geist): pill, 22px, 12px medium text, low-contrast colour wash. */
.pill, .pill.active, .pill.revoked, .pill.warning, .pill.neutral,
.pill.risk-low, .pill.risk-medium, .pill.risk-high, .pill.risk-critical {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; gap: 0; border: 0; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0;
}
.pill::before, .pill.active::before, .pill.revoked::before, .pill.warning::before, .pill.neutral::before,
.pill.risk-low::before, .pill.risk-medium::before, .pill.risk-high::before, .pill.risk-critical::before { content: none; display: none; }
.pill.active, .pill.risk-low { background: rgba(98, 192, 115, .12); color: #7fd18e; }
.pill.warning, .pill.risk-medium { background: rgba(245, 165, 36, .12); color: #f7b955; }
.pill.risk-high { background: rgba(255, 138, 61, .12); color: #ffa36b; }
.pill.revoked, .pill.risk-critical { background: rgba(255, 97, 102, .12); color: #ff8589; }
.pill.neutral { background: #1f1f1f; color: var(--muted); }
.role-label .ui-icon, .invite-status .ui-icon { display: none; }
.role-label, .invite-status, .count-badge { height: 22px; min-height: 22px; padding: 0 9px; }
.count-badge { background: #1f1f1f; color: var(--muted); }

/* Rows: content rows are slightly denser, as in Geist tables. */
.table-wrap td { padding-top: 12px; padding-bottom: 12px; }
th { height: 40px; }
/* The first tab label lines up with the page content edge below it. */
.tab-rail { margin-left: -14px; }

/* ---------- landing ----------
   Wide, product-first sections in the manner of a modern platform homepage:
   a centred statement, full-UI screenshots in fading frames, showcase rows
   with a statement and feature list, and cards that fold back on hover. */
.page-landing main { width: min(1400px, calc(100% - 48px)); margin-bottom: 0; }
.lp-hero { position: relative; max-width: 880px; margin: 0 auto; padding: 120px 0 64px; text-align: center; overflow-x: clip; }
.lp-hero::before {
  content: ""; position: absolute; inset: -40px -200px 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center top; opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 55% 65% at 50% 35%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 55% 65% at 50% 35%, #000 15%, transparent 75%);
}
.lp-hero h1 { margin: 0; font-size: clamp(44px, 6.2vw, 80px); font-weight: 600; line-height: 1; letter-spacing: -.055em; text-wrap: balance;
  background: linear-gradient(180deg, #fff 35%, #9a9a9a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-hero p { max-width: 560px; margin: 24px auto 0; color: var(--muted); font-size: 19px; line-height: 1.55; text-wrap: pretty; }
.lp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.lp-actions .button { min-width: 156px; height: 44px; font-size: 15px; }

/* Screenshot frame: a thin bezel and edges that fade into the page. */
.lp-frame { position: relative; margin: 0; padding: 6px; border: 1px solid var(--line-strong); border-radius: 14px; background: linear-gradient(180deg, #161616, #0a0a0a); }
.lp-frame img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 9px; }
.lp-frame::after { content: ""; position: absolute; inset: auto -1px -1px; height: 38%; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }
.lp-frame-hero { max-width: 1280px; margin: 0 auto; }

/* Fold-back cards */
.lp-peels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 120px 0 40px; }
.lp-peel { position: relative; overflow: hidden; min-height: 360px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: #000; outline-offset: 4px; }
.lp-peel-under { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 28px;
  background: linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(160deg, #3b82f6, #1d4ed8); }
.lp-chips { display: grid; justify-items: end; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lp-chips li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; background: rgba(255, 255, 255, .14); color: #fff; font-family: "Geist Mono", ui-monospace, monospace; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.lp-chips li:nth-child(2) { margin-right: 36px; }
.lp-chips li:nth-child(3) { margin-right: 72px; }
.lp-chips .ui-icon { width: 16px; height: 16px; }
.lp-peel-front, .lp-peel-flap { position: absolute; inset: 0; transition: clip-path 700ms cubic-bezier(.65, 0, .25, 1); }
.lp-peel-front { display: flex; align-items: flex-end; padding: 28px; background: #000; clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%); }
.lp-peel-copy { max-width: 300px; }
.lp-peel-copy h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.lp-peel-copy p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.lp-peel-flap { background: linear-gradient(115deg, #3a3a3a, #232323 45%, #161616); clip-path: polygon(100% 100%, 100% 100%, 100% 100%); filter: drop-shadow(-8px 8px 18px rgba(0, 0, 0, .55)); }
.lp-peel:hover .lp-peel-front, .lp-peel:focus-visible .lp-peel-front { clip-path: polygon(0 0, 100% 0, 100% 12%, 50% 100%, 0 100%); }
.lp-peel:hover .lp-peel-flap, .lp-peel:focus-visible .lp-peel-flap { clip-path: polygon(100% 12%, 50% 100%, 30% 42%); }
@media (hover: none) {
  .lp-peel .lp-peel-front { clip-path: polygon(0 0, 100% 0, 100% 30%, 66% 100%, 0 100%); }
  .lp-peel .lp-peel-flap { clip-path: polygon(100% 30%, 66% 100%, 52% 56%); }
}

/* Showcase rows: heading, wide frame, and an aside with a statement and features. */
.lp-showcase { padding: 120px 0 0; }
.lp-showcase > h2 { max-width: 12ch; margin: 0 0 40px; font-size: clamp(36px, 4.6vw, 60px); font-weight: 600; line-height: 1.02; letter-spacing: -.05em; }
.lp-showcase-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 64px; align-items: center; }
.lp-showcase-aside { max-width: 340px; }
.lp-statement { margin: 0; color: var(--muted); font-size: 22px; font-weight: 500; line-height: 1.35; letter-spacing: -.02em; }
.lp-statement strong { color: var(--text); font-weight: 500; }
.lp-showcase-aside h3 { margin: 36px 0 12px; color: var(--muted); font-size: 14px; font-weight: 400; }
.lp-showcase-aside ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lp-showcase-aside li { color: var(--text); font-size: 15px; font-weight: 500; }

.lp-cta { margin: 160px 0 0; padding: 96px 0; border-top: 1px solid var(--line); text-align: center; }
.lp-cta h2 { margin: 0; font-size: clamp(32px, 4vw, 52px); font-weight: 600; letter-spacing: -.045em; text-wrap: balance; }
.lp-cta .lp-actions { margin-top: 32px; }
.lp-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 0 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.lp-footer > span { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 500; }
.lp-footer .brand-mark, .lp-footer .brand-glyph { width: 20px; height: 20px; }
.lp-footer nav { display: flex; gap: 24px; }
.lp-footer a { color: var(--muted); text-decoration: none; }
.lp-footer a:hover { color: var(--text); }

/* Motion: one entrance on load, gentle reveals on scroll where supported. */
@keyframes lp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lp-reveal { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
.lp-hero > * { animation: lp-rise 700ms cubic-bezier(.2, .7, .2, 1) both; }
.lp-hero > p { animation-delay: 80ms; }
.lp-hero > .lp-actions { animation-delay: 160ms; }
.lp-frame-hero { animation: lp-rise 900ms 260ms cubic-bezier(.2, .7, .2, 1) both; }
@supports (animation-timeline: view()) {
  .lp-peel, .lp-showcase > h2, .lp-showcase-body, .lp-cta { animation: lp-reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-hero > *, .lp-frame-hero, .lp-peel, .lp-showcase > h2, .lp-showcase-body, .lp-cta { animation: none; }
  .lp-peel-front, .lp-peel-flap { transition: none; }
}
@media (max-width: 1000px) {
  .lp-peels { grid-template-columns: minmax(0, 1fr); padding-top: 80px; }
  .lp-showcase { padding-top: 88px; }
  .lp-showcase-body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lp-showcase-aside { max-width: none; }
}
@media (max-width: 640px) {
  .page-landing main { width: calc(100% - 32px); }
  .lp-hero { padding: 64px 0 40px; }
  .lp-hero p { font-size: 16px; }
  .lp-actions .button { flex: 1 1 100%; }
  .lp-frame { padding: 3px; border-radius: 10px; }
  .lp-peel { min-height: 320px; }
  .lp-cta { margin-top: 96px; padding: 64px 0; }
}
.lp-peel-copy { max-width: 220px; }
.lp-peel:hover .lp-peel-front, .lp-peel:focus-visible .lp-peel-front { clip-path: polygon(0 0, 100% 0, 100% 10%, 64% 100%, 0 100%); }
.lp-peel:hover .lp-peel-flap, .lp-peel:focus-visible .lp-peel-flap { clip-path: polygon(100% 10%, 64% 100%, 46% 36%); }
@media (hover: none) { .lp-peel .lp-peel-front { clip-path: polygon(0 0, 100% 0, 100% 34%, 78% 100%, 0 100%); } .lp-peel .lp-peel-flap { clip-path: polygon(100% 34%, 78% 100%, 66% 58%); } }
.lp-peel-under { padding: 24px 22px; }
.lp-chips { gap: 10px; }
.lp-chips li { padding: 8px 12px; font-size: 13px; }
.lp-chips li:nth-child(2), .lp-chips li:nth-child(3) { margin-right: 0; }
.lp-peel:hover .lp-peel-front, .lp-peel:focus-visible .lp-peel-front { clip-path: polygon(0 0, 100% 0, 100% 8%, 56% 100%, 0 100%); }
.lp-peel:hover .lp-peel-flap, .lp-peel:focus-visible .lp-peel-flap { clip-path: polygon(100% 8%, 56% 100%, 38% 34%); }
.lp-peel-copy { max-width: 200px; }
.lp-peel:hover .lp-peel-flap, .lp-peel:focus-visible .lp-peel-flap { clip-path: polygon(100% 8%, 56% 100%, 48% 30%); }
/* Assessment states follow the badge rules: tinted pill, no icon. */
.assessment-state { height: 22px; padding: 0 9px; border-radius: 999px; background: #1f1f1f; color: var(--muted); font-size: 12px; font-weight: 500; }
.assessment-state .ui-icon { display: none; }
.assessment-state.is-negative { background: rgba(255, 97, 102, .12); color: #ff8589; }
.assessment-state.is-warning { background: rgba(245, 165, 36, .12); color: #f7b955; }
.assessment-state.is-positive { background: rgba(98, 192, 115, .12); color: #7fd18e; }
/* Each card's reveal carries its own meaning: emerald for signed delivery,
   violet for network evidence, amber for assessment. Chips arrive one by one
   once the fold opens. */
.lp-peel-under { --peel-a: #10b981; --peel-b: #047857; background: linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px) 0 0 / 48px 48px, radial-gradient(120% 90% at 100% 100%, var(--peel-a), var(--peel-b) 70%); }
.lp-peel:nth-child(2) .lp-peel-under { --peel-a: #8b5cf6; --peel-b: #5b21b6; }
.lp-peel:nth-child(3) .lp-peel-under { --peel-a: #f59e0b; --peel-b: #b45309; }
.lp-chips li { opacity: 0; transform: translateX(16px); transition: opacity 320ms ease, transform 420ms cubic-bezier(.2, .7, .2, 1); }
.lp-peel:hover .lp-chips li, .lp-peel:focus-visible .lp-chips li { opacity: 1; transform: none; }
.lp-peel:hover .lp-chips li:nth-child(1), .lp-peel:focus-visible .lp-chips li:nth-child(1) { transition-delay: 260ms; }
.lp-peel:hover .lp-chips li:nth-child(2), .lp-peel:focus-visible .lp-chips li:nth-child(2) { transition-delay: 340ms; }
.lp-peel:hover .lp-chips li:nth-child(3), .lp-peel:focus-visible .lp-chips li:nth-child(3) { transition-delay: 420ms; }
@media (hover: none) { .lp-chips li { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lp-chips li { transition: none; } }
.lp-peel { min-height: 384px; }
.lp-peel-under { padding: 18px; }
.lp-chips { gap: 8px; }
.lp-chips li { padding: 7px 11px; gap: 8px; font-size: 12.5px; }
.lp-chips .ui-icon { width: 14px; height: 14px; }

/* ---------- creation dialogs ----------
   Catalog sections carry their primary action in the heading; the form opens
   in a dialog with essentials first and optional settings folded away. */
.heading-with-action { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 24px; }
.heading-with-action > div { min-width: 0; }
.heading-with-action > button { flex: 0 0 auto; }

dialog.modal-form { width: min(680px, calc(100vw - 32px)); max-height: min(86vh, 820px); padding: 0; overflow: hidden; }
dialog.modal-form.modal-wide { width: min(820px, calc(100vw - 32px)); }
dialog.modal-form > form { display: flex; flex-direction: column; max-height: inherit; margin: 0; }
dialog.modal-form .modal-head { align-items: flex-start; gap: 16px; padding: 20px 24px; }
dialog.modal-form .modal-head h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.modal-subtitle { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
dialog.modal-form .modal-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 24px 24px; }
dialog.modal-form .modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px; border-top: 1px solid var(--line); background: #0d0d0d; }

.form-stack { display: grid; gap: 20px; }
.form-row { display: grid; gap: 16px; }
.form-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-row-profile { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.form-stack .outlined-field small { display: block; margin-top: 6px; color: var(--dim); font-size: 12px; line-height: 1.4; }
.form-section-label { margin-bottom: -8px; color: var(--muted); font-size: 13px; font-weight: 500; }
.input-suffix { position: relative; display: block; }
.input-suffix input { width: 100%; padding-right: 32px; }
.input-suffix > span { position: absolute; top: 50%; right: 12px; color: var(--dim); transform: translateY(-50%); pointer-events: none; }

.form-disclosure { border: 1px solid var(--line); border-radius: var(--radius-md); }
.form-disclosure > summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; border-radius: var(--radius-md); }
.form-disclosure > summary::-webkit-details-marker { display: none; }
.form-disclosure > summary:hover { background: #111; }
.form-disclosure > summary .ui-icon { width: 15px; height: 15px; color: var(--muted); transition: transform 200ms var(--ease); }
.form-disclosure[open] > summary .ui-icon { transform: rotate(90deg); }
.form-disclosure > summary .field-optional { margin-left: auto; color: var(--dim); font-size: 12px; font-weight: 400; }
.form-disclosure-body { display: grid; gap: 16px; padding: 4px 14px 16px; }

/* Dropzone in a dialog: compact and quiet until a file is dragged over it. */
dialog.modal-form .dropzone-field { display: grid; gap: 6px; }
dialog.modal-form .dropzone-caption { color: var(--muted); font-size: 13px; font-weight: 500; }
dialog.modal-form .dropzone { min-height: 120px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: transparent; }
dialog.modal-form .dropzone-icon { width: 32px; height: 32px; border-radius: 50%; background: #1a1a1a; color: var(--text); }

/* Module picker inside the profile dialog: two compact columns. */
dialog.modal-form .picker-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 0; }
dialog.modal-form .picker-count { margin: 0; color: var(--muted); font-size: 13px; }
dialog.modal-form .picker-count strong { color: var(--text); }
dialog.modal-form .picker-count small { display: block; margin-top: 2px; color: var(--dim); font-size: 12px; }
dialog.modal-form .picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 320px; overflow-y: auto; padding: 2px; }
dialog.modal-form .picker-card { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); cursor: pointer; transition: border-color var(--speed) var(--ease), background-color var(--speed) var(--ease); }
dialog.modal-form .picker-card:hover { border-color: var(--line-strong); background: #111; }
dialog.modal-form .picker-card:has(input:checked) { border-color: #8f8f8f; background: #141414; }
dialog.modal-form .picker-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
dialog.modal-form .picker-copy strong { font-size: 13px; font-weight: 500; }
dialog.modal-form .picker-copy small { color: var(--dim); font-size: 12px; }
dialog.modal-form .picker-order { margin-left: auto; min-width: 22px; height: 22px; border-radius: 999px; background: var(--text); color: #0a0a0a; font-size: 12px; font-weight: 600; text-align: center; line-height: 22px; }
dialog.modal-form .picker-order:empty { display: none; }

@media (max-width: 640px) {
  .heading-with-action { flex-direction: column; }
  .form-row-2, .form-row-3, .form-row-profile, dialog.modal-form .picker-grid { grid-template-columns: minmax(0, 1fr); }
  dialog.modal-form { max-height: 92vh; }
}

/* ---------- interface motion ----------
   Short and functional: a panel settles in when its tab is chosen, rows glide
   on sort (script), new pages of results fade in (script), menus and dialogs
   scale in. Nothing moves on its own. */
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tab-panel:not([hidden]) { animation: panel-in 240ms cubic-bezier(.2, 0, 0, 1); }
.tab-rail button[aria-selected="true"]::after { animation: tab-underline 200ms cubic-bezier(.2, 0, 0, 1); transform-origin: center; }
@keyframes tab-underline { from { transform: scaleX(.4); opacity: 0; } to { transform: none; opacity: 1; } }
th.sortable > .table-sort::after, th.sortable::after { transition: opacity var(--speed) var(--ease), transform 220ms cubic-bezier(.2, 0, 0, 1); }
.is-loading { opacity: .55; transition: opacity 120ms var(--ease); }
.flash.is-dismissing { transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .tab-panel:not([hidden]), .tab-rail button[aria-selected="true"]::after { animation: none; }
}
dialog.modal-form .modal-body { padding-top: 20px; }
dialog.modal-form .dropzone-caption { position: static; padding: 0; background: none; transform: none; }
input, select, textarea { font-weight: 400; }
input::placeholder, textarea::placeholder { color: #6b6b6b; font-weight: 400; opacity: 1; }
/* Creation dialogs open wide, so fields sit side by side instead of stacking. */
dialog.modal-form { width: min(820px, calc(100vw - 48px)); }
dialog.modal-form.modal-wide { width: min(980px, calc(100vw - 48px)); }
dialog.modal-form .modal-head, dialog.modal-form .modal-foot { padding-inline: 28px; }
dialog.modal-form .modal-body { padding: 24px 28px 28px; }
dialog.modal-form .picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 360px; }
@media (max-width: 900px) { dialog.modal-form .picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { dialog.modal-form .picker-grid { grid-template-columns: minmax(0, 1fr); } }
/* Wide displays: the console grows with the window instead of sitting in a
   narrow column, keeping proportional gutters. */
:root { --content-width: 1840px; }
main, .topbar-inner { width: min(var(--content-width), calc(100% - 4vw)); }
@media (max-width: 900px) { main, .topbar-inner { width: calc(100% - 32px); } }
.page-landing main { width: min(1640px, calc(100% - 6vw)); }
dialog.modal-form { width: min(920px, calc(100vw - 48px)); }
dialog.modal-form.modal-wide { width: min(1120px, calc(100vw - 48px)); }
@media (min-width: 1400px) { dialog.modal-form .picker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- creation pages ----------
   A full page for multi-field creation: stacked sections in the main column,
   and a sticky summary with the submit action alongside. */
.create-page .page-heading { margin-bottom: 32px; }
.create-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 32px; align-items: start; margin: 0; }
.create-main { display: grid; gap: 24px; min-width: 0; }
.create-section { margin: 0; }
.create-section-head { padding: 24px 28px 0; }
.create-section-head h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.create-section-head p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.create-section-body { padding: 20px 28px 28px; }
.create-section .dropzone { min-height: 160px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: transparent; }
.create-section .dropzone:hover, .create-section .dropzone.is-dragging { border-color: #8f8f8f; background: #0f0f0f; }
.create-section .dropzone-icon { width: 36px; height: 36px; border-radius: 50%; background: #1a1a1a; color: var(--text); }
.create-section .outlined-field small { display: block; margin-top: 6px; color: var(--dim); font-size: 12px; line-height: 1.4; }
.create-section .picker-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 0; border: 0; }
.create-section .picker-count { margin: 0; color: var(--muted); font-size: 13px; }
.create-section .picker-count strong { color: var(--text); }
.create-section .picker-count small { display: block; margin-top: 2px; color: var(--dim); font-size: 12px; }
.create-section .picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.create-section .picker-card { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); cursor: pointer; transition: border-color var(--speed) var(--ease), background-color var(--speed) var(--ease); }
.create-section .picker-card:hover { border-color: var(--line-strong); background: #111; }
.create-section .picker-card:has(input:checked) { border-color: #8f8f8f; background: #141414; }
.create-section .picker-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.create-section .picker-copy strong { font-size: 13px; font-weight: 500; }
.create-section .picker-copy small { color: var(--dim); font-size: 12px; }
.create-section .picker-order { margin-left: auto; min-width: 22px; height: 22px; border-radius: 999px; background: var(--text); color: #0a0a0a; font-size: 12px; font-weight: 600; line-height: 22px; text-align: center; }
.create-section .picker-order:empty { display: none; }

.create-aside { position: sticky; top: calc(var(--topbar-h, 64px) + 24px); }
.create-summary { display: grid; gap: 16px; margin: 0; padding: 24px; }
.create-summary h2 { margin: 0; font-size: 16px; font-weight: 600; }
.create-summary dl { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.create-summary dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.create-summary dt { color: var(--muted); }
.create-summary dd { margin: 0; max-width: 60%; overflow: hidden; color: var(--text); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.create-summary dd.is-empty { color: var(--dim); }
.create-summary-steps > span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 14px; }
.create-summary-steps ol { display: grid; gap: 6px; margin: 0; padding-left: 20px; font-size: 13px; }
.create-summary-steps ol.is-empty { padding-left: 0; list-style: none; }
.create-summary-steps ol.is-empty::before { content: attr(data-empty); color: var(--dim); }
.create-summary .button, .create-summary button { width: 100%; }
.create-note { margin: 0; color: var(--dim); font-size: 12px; line-height: 1.5; }
@media (max-width: 1100px) {
  .create-layout { grid-template-columns: minmax(0, 1fr); }
  .create-aside { position: static; }
}
@media (max-width: 640px) {
  .create-section-head { padding: 20px 20px 0; }
  .create-section-body { padding: 16px 20px 20px; }
}

/* ---------- section tints ----------
   Each box carries a barely-there wash of its own hue from the top-right
   corner, echoing the landing cards without competing with the content. */
.panel, .summary-grid { --tint: 148, 163, 184; background: radial-gradient(70% 140% at 100% 0%, rgba(var(--tint), .065), transparent 60%), var(--panel); }
.workspace-main > .tab-panel > .panel:nth-of-type(6n + 1), .create-main > .panel:nth-child(6n + 1) { --tint: 56, 189, 248; }
.workspace-main > .tab-panel > .panel:nth-of-type(6n + 2), .create-main > .panel:nth-child(6n + 2) { --tint: 139, 92, 246; }
.workspace-main > .tab-panel > .panel:nth-of-type(6n + 3), .create-main > .panel:nth-child(6n + 3) { --tint: 16, 185, 129; }
.workspace-main > .tab-panel > .panel:nth-of-type(6n + 4) { --tint: 245, 158, 11; }
.workspace-main > .tab-panel > .panel:nth-of-type(6n + 5) { --tint: 244, 63, 94; }
.workspace-main > .tab-panel > .panel:nth-of-type(6n + 6) { --tint: 20, 184, 166; }
#organizations-list, #security-passkeys, #organization-overview { --tint: 16, 185, 129; }
#scans-search, #scans-results, #profile-details, #findings-device_integrity { --tint: 56, 189, 248; }
#devices-list, #device-groups-list, #security-sessions, #device-overview { --tint: 139, 92, 246; }
#modules-history, #security-password, #device-details { --tint: 245, 158, 11; }
#profiles-list, #profile-resources, #device-assignment { --tint: 20, 184, 166; }
#audit-filters, #audit-events, #security-signout, #organization-access, #device-access { --tint: 244, 63, 94; }
#invite-search, #invite-history, #users-list, #account-overview { --tint: 99, 102, 241; }
.create-summary { --tint: 237, 237, 237; }

/* ---------- authentication ----------
   One centred column over a faint grid and glow: mark, title, one line of
   context, the form, then the alternative. Passkey ceremonies use the same
   stack, with their explanation above the card. */
.page-auth main { position: relative; display: grid; place-items: start center; min-height: calc(100vh - 64px); margin-top: 0; padding: 12vh 0 64px; overflow-x: clip; }
.page-auth main::before {
  content: ""; position: absolute; inset: 0 -10vw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 30% at 50% 22%, rgba(237, 237, 237, .06), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px) center top / 64px 64px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) center top / 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 50% 55% at 50% 30%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 50% 55% at 50% 30%, #000 10%, transparent 75%);
  opacity: .7;
}
.auth-center, .auth-shell { width: min(400px, 100%); }
.auth-column { display: grid; gap: 0; text-align: center; animation: panel-in 420ms cubic-bezier(.2, 0, 0, 1) both; }
.auth-mark { justify-self: center; margin-bottom: 28px; }
.auth-mark .brand-mark, .auth-mark .brand-glyph { width: 40px; height: 40px; }
.auth-column h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.035em; }
.auth-tagline { margin: 10px auto 32px; max-width: 34ch; color: var(--muted); font-size: 14px; line-height: 1.55; }
.auth-column .auth-form { gap: 14px; padding: 0; text-align: left; }
.auth-column .auth-form button[type="submit"] { width: 100%; height: 44px; margin-top: 6px; font-size: 14px; }
.auth-column .field label { font-size: 13px; }
.auth-column .login-alternative { gap: 14px; padding: 18px 0 0; }
.auth-column .login-alternative > button { height: 44px; }
.auth-column .auth-alt { padding: 28px 0 0; color: var(--muted); font-size: 14px; }
.auth-column .auth-alt a { color: var(--text); }
.auth-column .password-guidance, .auth-column .strength-rules, .auth-column small { color: var(--dim); font-size: 12px; }

.auth-shell { display: flex; flex-direction: column; gap: 24px; margin: 0 auto; padding-top: 0; }
.auth-shell .auth-aside { max-width: none; padding-top: 0; text-align: center; }
.auth-shell .auth-aside h1 { font-size: 28px; letter-spacing: -.035em; }
.auth-shell .auth-aside-lede { margin: 10px auto 0; max-width: 36ch; font-size: 14px; }
.auth-shell .auth-points { justify-content: center; margin: 16px 0 0; text-align: left; font-size: 13px; }
.auth-shell .auth-card { width: 100%; }
@media (max-width: 640px) { .page-auth main { padding-top: 6vh; } }

/* Edit forms: Save sits right under the fields it commits, with no divider. */
.panel .form-action, .upload-form > .form-action { margin: 4px 0 0; padding: 0; border-top: 0; border-radius: 0; background: transparent; justify-content: flex-end; }
.panel .upload-form { padding-bottom: 24px; }

/* Auth backdrop: grid lines brighten softly around the pointer. */
.page-auth main::after {
  content: ""; position: absolute; inset: 0 -10vw; z-index: -1; pointer-events: none; opacity: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px) center top / 64px 64px,
    linear-gradient(90deg, rgba(255, 255, 255, .22) 1px, transparent 1px) center top / 64px 64px;
  -webkit-mask-image: radial-gradient(220px circle at var(--mx, 50%) var(--my, 30%), #000, transparent 70%);
  mask-image: radial-gradient(220px circle at var(--mx, 50%) var(--my, 30%), #000, transparent 70%);
  transition: opacity 300ms ease;
}
.page-auth main.is-pointer-active::after { opacity: 1; }
@media (prefers-reduced-motion: reduce), (hover: none) { .page-auth main::after { display: none; } }

/* ---------- one button size ----------
   Console actions all use the 32px compact size, so a Save under a form, a
   header action and a row action read as the same control. Buttons that sit
   beside a 40px field (filters, date triggers, password toggles) keep their
   own sizes through more specific rules; :where keeps this rule weak. */
button:where(:not(.icon-button, .modal-close, .password-toggle, .row-expand, .copy-button, .expand-toggle, .select-button, [data-tab-target], .linklike, .to-top, .redemption-toggle, .search-submit, .list-toggle, .date-trigger, .flash-close)),
.button { min-height: 32px; height: 32px; padding: 0 12px; gap: 6px; font-size: 13px; line-height: 20px; white-space: nowrap; }
button .ui-icon, .button .ui-icon { width: 15px; height: 15px; }
button, .button { transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 200ms ease, transform 120ms ease; }
button:where(:not(:disabled)):active, .button:active { transform: translateY(.5px) scale(.985); }
.heading-with-action > form { flex: 0 0 auto; margin: 0; }
.heading-with-action > :is(button, .button, form) { margin-top: 2px; }

/* ---------- dialogs ----------
   Every dialog shares one anatomy: head, body and a footer bar, all on the
   same 28px inset. Confirmations and single-field edits are 600px wide;
   creation forms keep the wider modal-form size. */
dialog.modal:not(.modal-form), dialog.modal-form.modal-sm { width: min(600px, calc(100vw - 32px)); }
dialog.modal .modal-head { padding: 22px 28px; gap: 24px; }
dialog.modal .modal-head h3 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
dialog.modal .modal-body { padding: 24px 28px 28px; white-space: normal; text-align: left; }
dialog.modal:not(.modal-form) .modal-body { padding-top: 22px; }
dialog.modal .modal-body > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
dialog.modal .modal-foot { padding: 14px 28px; gap: 8px; background: #0d0d0d; border-top: 1px solid var(--line); }
dialog.modal .modal-head:has(+ .modal-foot) { border-bottom: 0; padding-bottom: 26px; }
dialog.modal::backdrop { background: rgba(0, 0, 0, .62); backdrop-filter: blur(4px); }
@media (max-width: 640px) {
  dialog.modal .modal-head, dialog.modal .modal-body, dialog.modal .modal-foot { padding-inline: 20px; }
}

/* ---------- detail lists ----------
   Expanded rows used a grey box per category. They are now open columns:
   a quiet heading over hairline key/value rows, so the information keeps its
   grouping without a card around every group. */
.evidence-groups { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 8px 56px; margin: 8px 0 4px; }
.evidence-group, .audit-group, .packet-groups > section, .vulnerability-metrics > section { padding: 0; background: transparent; border: 0; border-radius: 0; }
.indicator-card:hover .evidence-group, .audit-event:hover .audit-group,
.audit-event[open]:hover .audit-group, .indicator-card[open]:hover .evidence-group, .indicator-card:has(details[open]):hover .evidence-group { background: transparent; }
.evidence-group h4, .audit-group h4, .packet-groups h4, .vulnerability-metrics h4 { gap: 8px; margin: 0; padding: 0 0 10px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.evidence-group h4 .ui-icon, .audit-group h4 .ui-icon, .packet-groups h4 .ui-icon, .vulnerability-metrics h4 .ui-icon { width: 14px; height: 14px; color: var(--dim); }
.evidence-group .evidence-grid, .audit-group .evidence-grid, .network-detail .packet-groups .evidence-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; }
.evidence-group .evidence-grid > div, .audit-group .evidence-grid > div, .network-detail .packet-groups .evidence-grid > div {
  display: grid; grid-template-columns: minmax(110px, 36%) minmax(0, 1fr); align-items: baseline; gap: 16px;
  min-width: 0; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none;
  transition: background-color 150ms ease;
}
.evidence-group .evidence-grid > div:last-child, .audit-group .evidence-grid > div:last-child, .network-detail .packet-groups .evidence-grid > div:last-child { border-bottom: 0; }
.evidence-group .evidence-grid dt, .audit-group .evidence-grid dt, .network-detail .packet-groups .evidence-grid dt { margin: 0; color: var(--muted); font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.evidence-group .evidence-grid dd, .audit-group .evidence-grid dd, .network-detail .packet-groups .evidence-grid dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
/* Row-sized values (tables, nested records, long lists) stack under their label. */
.evidence-group .evidence-grid > div:has(.evidence-grid, .table-wrap, .evidence-list-wrap, [data-collapsible], table),
.audit-group .evidence-grid > div:has(.evidence-grid, .table-wrap, table) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.evidence-group .evidence-grid .evidence-grid { margin-top: 0; padding-left: 12px; border-left: 1px solid var(--line); }
.packet-groups { gap: 8px 48px; }
.vulnerability-metrics { gap: 20px; }
.finding-evidence { padding: 16px 24px 24px; }
@media (max-width: 760px) {
  .evidence-group .evidence-grid > div, .audit-group .evidence-grid > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ---------- change password ----------
   Fields on the left, requirements beside them, Save across the bottom. */
.password-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 24px 56px; max-width: none; padding: 4px 24px 24px; align-items: start; }
.password-layout .password-fields { display: grid; gap: 20px; min-width: 0; }
.password-layout .form-row-2 { gap: 20px; }
.password-requirements { display: grid; gap: 12px; padding-left: 32px; border-left: 1px solid var(--line); }
.password-requirements h3 { margin: 0; color: var(--text); font-size: 13px; font-weight: 500; }
.password-requirements .strength-rules { gap: 8px; margin: 0; font-size: 13px; }
.password-requirements .password-guidance { margin: 0; color: var(--dim); font-size: 12px; line-height: 1.6; }
.password-layout > .form-action { grid-column: 1 / -1; justify-content: space-between; align-items: center; gap: 16px; margin: 0; }
.password-layout > .form-action small { color: var(--dim); font-size: 12px; }
@media (max-width: 900px) {
  .password-layout { grid-template-columns: minmax(0, 1fr); }
  .password-requirements { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- auth glow ----------
   The title, mark and primary action carry a soft light that strengthens
   while the pointer is over the page, matching the grid spotlight. */
.page-auth h1 { text-shadow: 0 0 32px rgba(255, 255, 255, .16); transition: text-shadow 400ms ease; }
.page-auth .auth-tagline, .page-auth .auth-aside-lede { text-shadow: 0 0 22px rgba(255, 255, 255, .08); }
.page-auth .auth-mark .brand-mark { filter: drop-shadow(0 0 16px rgba(255, 255, 255, .14)); transition: filter 400ms ease; }
.page-auth main button:where(:not(.secondary, .linklike, .password-toggle, .icon-button, .modal-close)) {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 28px -8px rgba(255, 255, 255, .28);
}
.page-auth main button:where(:not(.secondary, .linklike, .password-toggle, .icon-button, .modal-close)):hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 8px 36px -6px rgba(255, 255, 255, .4);
}
.page-auth main button.secondary:hover { box-shadow: 0 0 24px -6px rgba(255, 255, 255, .18); }
.page-auth main.is-pointer-active h1 { text-shadow: 0 0 36px rgba(255, 255, 255, .26); }
.page-auth main.is-pointer-active .auth-mark .brand-mark { filter: drop-shadow(0 0 20px rgba(255, 255, 255, .22)); }

/* ---------- motion and hover ----------
   Small, quick and purposeful: detail rows unfold, panel tints warm on hover,
   metric tiles fold a corner back, and the back link arrow leads the way. */
@property --tint-a { syntax: "<number>"; inherits: true; initial-value: .065; }
.panel, .summary-grid { background: radial-gradient(70% 140% at 100% 0%, rgba(var(--tint), var(--tint-a)), transparent 60%), var(--panel); transition: --tint-a 400ms ease, border-color 200ms ease; }
.panel:hover, .summary-grid:hover { --tint-a: .1; }
tr.evidence-detail:not([hidden]) > td > * { animation: detail-unfold 240ms cubic-bezier(.2, 0, 0, 1) both; }
@keyframes detail-unfold { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.row-expand .detail-chevron { transition: transform 200ms cubic-bezier(.2, 0, 0, 1); }
.back-link .ui-icon { transition: transform 200ms ease; }
.back-link:hover .ui-icon { transform: translateX(-3px); }
.session-row { transition: background-color 150ms ease; }
.session-row:hover { background: rgba(255, 255, 255, .02); }
.evidence-group .evidence-grid > div:hover, .audit-group .evidence-grid > div:hover { background: linear-gradient(90deg, rgba(255, 255, 255, .025), transparent 70%); }
.summary-grid > article { position: relative; overflow: hidden; }
.summary-grid > article::after {
  content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; pointer-events: none;
  background: linear-gradient(225deg, transparent 50%, rgba(var(--tint), .5) 50%, rgba(255, 255, 255, .14));
  border-bottom-left-radius: 4px; box-shadow: -2px 2px 6px rgba(0, 0, 0, .4);
  transition: width 260ms cubic-bezier(.2, 0, 0, 1), height 260ms cubic-bezier(.2, 0, 0, 1);
}
.summary-grid > article:hover::after { width: 18px; height: 18px; }
dialog.modal[open] { animation: overlay-in 220ms cubic-bezier(.2, 0, 0, 1); }
@media (prefers-reduced-motion: reduce) {
  tr.evidence-detail:not([hidden]) > td > *, dialog.modal[open] { animation: none; }
  .summary-grid > article::after { display: none; }
  button:active, .button:active { transform: none; }
  .back-link:hover .ui-icon { transform: none; }
}

/* Detail rows: one height whether or not a value has a copy button. */
.evidence-group .evidence-grid > div, .audit-group .evidence-grid > div { grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); align-items: center; min-height: 41px; padding-block: 8px; }
.evidence-group .copy-button, .audit-group .copy-button { width: 24px; height: 24px; min-height: 24px; padding: 4px; }
dialog.modal-form.modal-sm { width: min(640px, calc(100vw - 32px)); }
/* The console draws its own show/hide control, so hide Edge's built-in one. */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }

/* ---------- change password: Save under the fields it commits ---------- */
.password-layout > .form-action { grid-column: 1; }
@media (max-width: 900px) { .password-layout > .form-action { grid-row: auto; } }

/* ---------- settings rows (passkeys and account changes) ----------
   One anatomy for every row: an icon tile, a title over one muted line, an
   optional status badge, then the action, all centred on the same axis. */
.passkey-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 24px 20px; }
.passkey-status-text { margin: 0; color: var(--muted); font-size: 14px; }
.passkey-status .passkey-message { flex-basis: 100%; }
.settings-subhead { margin: 0; padding: 12px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.settings-list { display: grid; margin: 0; padding: 0; }
.passkey-manager .settings-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--line); background: transparent; }
.settings-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #0f0f0f; color: var(--muted); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.settings-icon .ui-icon { width: 16px; height: 16px; }
.settings-copy { display: grid; gap: 2px; min-width: 0; }
.settings-copy > strong { color: var(--text); font-size: 14px; font-weight: 500; line-height: 20px; }
.settings-copy > span { color: var(--muted); font-size: 13px; line-height: 20px; }
.settings-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--dim); font-size: 12px; line-height: 18px; }
.settings-note .ui-icon { width: 13px; height: 13px; flex: none; }
.settings-copy .passkey-message { margin-top: 8px; }
.passkey-manager .settings-meta { grid-column: 3; }
.passkey-manager .settings-row > .row-actions { grid-column: 4; justify-content: flex-end; }
.passkey-manager .settings-row dialog { grid-column: auto; }
@media (max-width: 760px) {
  .passkey-manager .settings-row { grid-template-columns: 36px minmax(0, 1fr); }
  .passkey-manager .settings-meta, .passkey-manager .settings-row > .row-actions { grid-column: 2; justify-content: flex-start; }
}

/* ---------- filters ----------
   Search, filter fields and their actions share one 32px control height, the
   same as every button. Advanced filters open from a quiet disclosure row
   that reports how many filters are on. */
.search-panel :is(input:not([type="hidden"]), .select-button, .date-trigger),
.filter-grid :is(input:not([type="hidden"]), .select-button, .date-trigger),
.rows-per-page .select-button,
.search-input button, .filter-grid button, .filter-footer :is(button, .button) {
  height: 32px; min-height: 32px; margin: 0;
}
.search-panel input:not([type="hidden"]), .filter-grid input:not([type="hidden"]) { padding: 0 10px; font-size: 13px; }
.search-panel .select-button, .filter-grid .select-button, .rows-per-page .select-button { padding: 0 10px; font-size: 13px; font-weight: 400; }
.search-input { gap: 8px; }
.search-input button { min-width: 0; padding: 0 12px; }
.primary-search > label, .filter-grid label { display: grid; gap: 6px; margin: 0; color: var(--muted); font-size: 13px; font-weight: 500; }
.primary-search { padding: 20px 24px 16px; }
.advanced-filters { border-top: 1px solid var(--line); }
.advanced-filters > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 24px; list-style: none; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: color 150ms ease, background-color 150ms ease; }
.advanced-filters > summary::-webkit-details-marker { display: none; }
.advanced-filters > summary::marker { content: ""; }
.advanced-filters > summary:hover { color: var(--text); background: rgba(255, 255, 255, .02); }
.advanced-filters > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 0; }
.summary-chevron { width: 14px; height: 14px; transition: transform 220ms cubic-bezier(.2, 0, 0, 1); }
details[open] > summary > .summary-chevron { transform: rotate(90deg); }
.advanced-filters .count-badge { margin-left: 2px; }
.advanced-filters .filter-grid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 16px; padding: 4px 24px 0; align-items: end; }
.filter-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 20px 24px; }
.audit-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 16px; align-items: end; }
.audit-filter-grid .filter-actions { gap: 8px; }
@media (max-width: 760px) {
  .audit-filter-grid { grid-template-columns: minmax(0, 1fr); }
  .search-input { flex-direction: row; }
}

/* ---------- native controls ----------
   No browser-default widgets: thin dark scrollbars, no number spinners, no
   search-field clear buttons, no disclosure triangles. */
html { scrollbar-color: #333 #000; }
* { scrollbar-width: thin; scrollbar-color: #333 transparent; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }

/* ---------- calendar ---------- */
.date-trigger.secondary { justify-content: flex-start; gap: 8px; width: 100%; padding: 0 10px; background: var(--panel); border-color: var(--line-strong); color: var(--text); font-size: 13px; font-weight: 400; text-align: left; }
.date-trigger.secondary:hover { border-color: #4a4a4a; background: #111; }
.date-trigger::after { display: none; }
.date-trigger .ui-icon { width: 14px; height: 14px; color: var(--dim); }
.date-trigger .is-placeholder { color: var(--dim); }
.date-calendar { width: 300px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: #0a0a0a; color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 48px rgba(0, 0, 0, .65); }
.date-calendar .calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.date-calendar .calendar-heading button { font-size: 14px; }
.date-calendar .calendar-title { display: inline-flex; align-items: center; gap: 6px; height: 32px; min-height: 32px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font-weight: 500; }
.date-calendar .calendar-title:hover { background: #1a1a1a; }
.date-calendar .calendar-title .ui-icon { width: 14px; height: 14px; color: var(--dim); transition: transform 200ms ease; }
.date-calendar .calendar-title[aria-expanded="true"] .ui-icon { transform: rotate(180deg); }
.date-calendar .calendar-nav { display: flex; gap: 2px; }
.date-calendar .calendar-nav .icon-button { width: 32px; height: 32px; min-height: 32px; padding: 8px; }
.date-calendar .calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: center; height: 30px; margin: 0; color: var(--dim); font-size: 12px; text-align: center; }
.date-calendar .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.date-calendar .calendar-days button { position: relative; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; box-shadow: none; }
.date-calendar .calendar-days button:hover { background: #1f1f1f; border: 0; }
.date-calendar .calendar-days button.is-outside { color: #5c5c5c; }
.date-calendar .calendar-days button[aria-current="date"]::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.date-calendar .calendar-days button[aria-current="date"] { border: 0; color: #fff; font-weight: 600; }
.date-calendar .calendar-days button[aria-pressed="true"] { background: #ededed; color: #0a0a0a; font-weight: 500; }
.date-calendar .calendar-days button:disabled { opacity: .3; cursor: not-allowed; }
.date-calendar .calendar-days button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.date-calendar .calendar-period { padding: 4px 0 0; }
.date-calendar .calendar-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.date-calendar .calendar-month { height: 44px; min-height: 44px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font-size: 13px; font-weight: 400; }
.date-calendar .calendar-month:hover { background: #1f1f1f; }
.date-calendar .calendar-month.is-cursor { box-shadow: inset 0 0 0 1px var(--line-strong); }
.date-calendar .calendar-month[aria-pressed="true"] { background: #ededed; color: #0a0a0a; }
.date-calendar .calendar-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); }
.date-calendar .calendar-presets { display: flex; gap: 4px; }
.date-calendar .calendar-presets button { height: 28px; min-height: 28px; padding: 0 8px; font-size: 12px; }
.date-calendar .calendar-clear { color: var(--muted); font-size: 12px; }
.date-calendar .calendar-clear:hover { color: var(--text); }
.date-calendar.is-year-view .calendar-actions { display: none; }

/* ---------- toasts ----------
   Notifications float over the page instead of pushing it down: a dark
   surface, one coloured icon for the tone, and a quiet close control. */
.toast-region { position: fixed; top: calc(var(--topbar-h, 64px) + 16px); left: 50%; z-index: 1000; display: grid; gap: 8px; width: min(440px, calc(100vw - 32px)); transform: translateX(-50%); pointer-events: none; }
.toast-region:has(.invite) { width: min(520px, calc(100vw - 32px)); }
.toast-region .flash { display: grid; grid-template-columns: 16px minmax(0, 1fr) 24px; align-items: start; gap: 12px; max-height: none; margin: 0; padding: 14px 12px 14px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(17, 17, 17, .94); color: var(--text); font-size: 14px; line-height: 20px; text-align: left; pointer-events: auto; backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 16px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4); animation: toast-in 280ms cubic-bezier(.2, 0, 0, 1) both; transition: opacity 200ms ease, transform 200ms ease; }
.toast-region .flash.success, .toast-region .flash.error, .toast-region .flash.invite { border-color: var(--line-strong); background: rgba(17, 17, 17, .94); }
.toast-region .flash .flash-symbol { width: 16px; height: 16px; margin: 2px 0 0; color: var(--muted); }
.toast-region .flash.success .flash-symbol { color: #45c46b; }
.toast-region .flash.error .flash-symbol { color: #ff6166; }
.toast-region .flash .flash-content { padding: 0; min-width: 0; }
.toast-region .flash .flash-content strong { display: block; font-weight: 500; }
.toast-region .flash .flash-content p { margin: 2px 0 10px; color: var(--muted); }
.toast-region .flash .flash-content small { color: var(--dim); font-size: 12px; }
.toast-region .flash .flash-close { width: 24px; height: 24px; min-height: 24px; margin: -2px 0 0; padding: 4px; }
.toast-region .flash.is-dismissing { opacity: 0; transform: translateY(-6px) scale(.98); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }

/* Inline notes (passkey prompts and status): left aligned with a tone icon. */
.passkey-message { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #0f0f0f; color: var(--text); font-size: 13px; line-height: 20px; text-align: left; }
.passkey-message::before { content: ""; width: 16px; height: 16px; margin-top: 2px; background: var(--dim); -webkit-mask: var(--i-circle-help) center / contain no-repeat; mask: var(--i-circle-help) center / contain no-repeat; }
.passkey-message.is-error { border-color: rgba(255, 97, 102, .3); background: rgba(255, 97, 102, .05); color: var(--text); }
.passkey-message.is-error::before { background: #ff6166; -webkit-mask-image: var(--i-circle-x); mask-image: var(--i-circle-x); }
.passkey-message.is-success { border-color: rgba(69, 196, 107, .3); background: rgba(69, 196, 107, .05); color: var(--text); }
.passkey-message.is-success::before { background: #45c46b; -webkit-mask-image: var(--i-circle-check); mask-image: var(--i-circle-check); }
.passkey-message:empty { display: none; }

/* ---------- passkey and invitation pages ----------
   The same centred column as sign in: mark, title, one line, then the step. */
.auth-center-wide { width: min(440px, 100%); }
.passkey-column .passkey-content { display: grid; gap: 16px; text-align: left; }
.passkey-column .passkey-content > p, .passkey-lede { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.passkey-column .passkey-step-label { margin: 0; color: var(--text); font-size: 13px; font-weight: 500; }
.passkey-column .passkey-setup { display: grid; gap: 20px; }
.passkey-column .passkey-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.passkey-column .passkey-steps > li { flex: 1; display: grid; gap: 8px; padding-top: 10px; border-top: 2px solid var(--line-strong); color: var(--dim); font-size: 12px; transition: border-color 300ms ease, color 300ms ease; }
.passkey-column .passkey-steps > li.is-saved { border-top-color: #45c46b; color: var(--muted); }
.passkey-column .passkey-steps > li.is-current { border-top-color: #ededed; color: var(--text); }
.passkey-column .passkey-step-number { display: none; }
.passkey-column .passkey-saved-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-md); }
.passkey-column .passkey-saved-item { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); background: transparent; }
.passkey-column .passkey-saved-item:first-child { border-top: 0; }
.passkey-column .passkey-saved-item > .ui-icon { width: 16px; height: 16px; color: var(--dim); }
.passkey-column .passkey-saved-item strong { display: block; font-size: 14px; font-weight: 500; }
.passkey-column .passkey-saved-caption { color: var(--muted); font-size: 12px; }
.passkey-column .passkey-saved-state { display: inline-flex; align-items: center; gap: 6px; color: #45c46b; font-size: 12px; }
.passkey-column .passkey-saved-state .ui-icon { width: 14px; height: 14px; }
.passkey-column .passkey-current-step { display: grid; gap: 4px; }
.passkey-column .passkey-current-step h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; outline: 0; }
.passkey-column .passkey-current-step p { margin: 0; color: var(--muted); font-size: 14px; }
.passkey-column .passkey-entry, .passkey-column .approval-form { display: grid; gap: 14px; }
.passkey-column .passkey-content button:not(.linklike):not(.password-toggle), .page-auth .auth-form > button[type="submit"] { width: 100%; height: 40px; min-height: 40px; font-size: 14px; }
.passkey-column .field small, .page-auth .auth-form .field small { display: block; margin-top: 6px; color: var(--dim); font-size: 12px; }
.passkey-column .enrollment-help { margin: 4px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; }
.passkey-column details.enrollment-help > summary { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; cursor: pointer; }
.passkey-column details.enrollment-help > summary:hover { color: var(--text); }
.passkey-column details.enrollment-help[open] > summary { margin-bottom: 12px; }
.passkey-column details.enrollment-help p { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.passkey-points { display: grid; gap: 10px; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); list-style: none; color: var(--muted); font-size: 13px; text-align: left; }
.passkey-points li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; line-height: 20px; }
.passkey-points .ui-icon { width: 14px; height: 14px; margin-top: 3px; color: var(--dim); }
.passkey-column .passkey-cancel { display: block; }
.passkey-column .passkey-cancel > button.linklike { width: auto; min-height: 0; height: auto; padding: 0; color: var(--muted); font-size: 14px; text-decoration: none; }
.passkey-column .passkey-cancel > button.linklike:hover { color: var(--text); }
.auth-note, .auth-feedback { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: left; }
.auth-feedback:empty { display: none; }

/* ---------- light and shadow ----------
   Boxes catch a little light along their top edge and cast a soft shadow
   below. Under the pointer, the surface warms and the border picks up a
   highlight that follows it; rows light up the same way. */
@property --spot-a { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --edge-a { syntax: "<number>"; inherits: false; initial-value: 0; }
.panel, .summary-grid {
  position: relative;
  background:
    radial-gradient(520px circle at var(--px, 50%) var(--py, 0px), rgba(255, 255, 255, var(--spot-a)), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 160px),
    radial-gradient(70% 140% at 100% 0%, rgba(var(--tint), var(--tint-a)), transparent 60%),
    var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 1px 2px rgba(0, 0, 0, .5), 0 24px 48px -30px rgba(0, 0, 0, .9);
  transition: --tint-a 400ms ease, --spot-a 350ms ease, border-color 200ms ease;
}
.panel:hover, .summary-grid:hover { --spot-a: .035; }
.panel::before, .summary-grid::before, .lp-frame::before, .lp-peel::before {
  content: ""; position: absolute; inset: -1px; z-index: 1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--px, 50%) var(--py, 0px), rgba(255, 255, 255, var(--edge-a)), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: --edge-a 350ms ease;
}
.panel:hover::before, .summary-grid:hover::before { --edge-a: .28; }
.lp-frame:hover::before, .lp-peel:hover::before { --edge-a: .45; }
.lp-frame { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(0, 0, 0, .6), 0 40px 120px -48px rgba(255, 255, 255, .14), 0 30px 60px -30px rgba(0, 0, 0, .9); transition: box-shadow 400ms ease; }
.lp-frame:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(0, 0, 0, .6), 0 40px 140px -40px rgba(255, 255, 255, .2), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.lp-peel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 60px -36px rgba(0, 0, 0, .9); }
dialog.modal, .select-menu { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 64px rgba(0, 0, 0, .65); }

/* Rows: a soft light under the pointer, muted text brightens and the main
   text and badges pick up a faint glow. */
.table-wrap table tbody > tr:not(.evidence-detail):not(.organization-group):not(.is-open):not(.evidence-detail tr):not(.finding-evidence tr):is(:hover, :has(:focus-visible)) {
  background: radial-gradient(420px circle at var(--px, 50%) 50%, rgba(255, 255, 255, .06), transparent 70%), #121212;
}
.table-wrap table tbody > tr:not(.evidence-detail):not(.organization-group):not(.is-open):not(.evidence-detail tr):not(.finding-evidence tr):is(:hover, :has(:focus-visible)) > td { background: transparent; }
.table-wrap tbody > tr > td :is(small, .muted, code) { transition: color 150ms ease; }
.table-wrap tbody > tr > td strong, .settings-copy > strong, .session-copy > strong { transition: text-shadow 200ms ease, color 150ms ease; }
.table-wrap tbody > tr:not(.evidence-detail):hover > td :is(small, .muted, code) { color: #d6d6d6; }
.table-wrap tbody > tr:not(.evidence-detail):hover > td strong { color: #fff; text-shadow: 0 0 18px rgba(255, 255, 255, .35); }
.table-wrap tbody > tr:not(.evidence-detail):hover .pill { box-shadow: 0 0 14px -4px currentColor; }
.passkey-manager .settings-row, .session-row { background: radial-gradient(360px circle at var(--px, -400px) 50%, rgba(255, 255, 255, 0), transparent 70%); transition: background-color 150ms ease; }
.passkey-manager .settings-row:hover, .session-row:hover { background: radial-gradient(360px circle at var(--px, 50%) 50%, rgba(255, 255, 255, .045), transparent 70%); }
.settings-row:hover .settings-copy > strong, .session-row:hover .session-copy > strong { color: #fff; text-shadow: 0 0 18px rgba(255, 255, 255, .3); }
.settings-row:hover .settings-copy > span, .session-row:hover .session-copy > span { color: #d6d6d6; }
.settings-row:hover .settings-icon { color: var(--text); border-color: var(--line-strong); }

/* Links and secondary text brighten under the pointer, as in a nav list. */
:is(.section-link, .lp-footer a, .back-link, .heading-help a, .auth-alt a, .topnav a) { transition: color 150ms ease, text-shadow 200ms ease; }
:is(.section-link, .lp-footer a, .back-link, .topnav a):hover { color: #fff; text-shadow: 0 0 16px rgba(255, 255, 255, .25); }

/* Expanded rows animate from script; the earlier keyframe would double up. */
tr.evidence-detail:not([hidden]) > td > * { animation: none; }
details[open] > :not(summary) { animation: detail-unfold 240ms cubic-bezier(.2, 0, 0, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .toast-region .flash, details[open] > :not(summary) { animation: none; }
  .panel::before, .summary-grid::before, .lp-frame::before, .lp-peel::before { display: none; }
}
@media (hover: none) {
  .panel::before, .summary-grid::before, .lp-frame::before, .lp-peel::before { display: none; }
}
.lp-peel::before { inset: 0; }
.password-layout > .password-fields { grid-column: 1; grid-row: 1; }
.password-layout > .password-requirements { grid-column: 2; grid-row: 1 / 3; }
.password-layout > .form-action { grid-column: 1; grid-row: 2; align-self: start; }
@media (max-width: 900px) { .password-layout > .password-fields, .password-layout > .password-requirements, .password-layout > .form-action { grid-column: 1; grid-row: auto; } }
.passkey-column .auth-tagline { max-width: 44ch; }
.passkey-column .passkey-content button, .page-auth .login-alternative > button { font-weight: 500; }
.passkey-column details.enrollment-help > summary { font-weight: 400; }

/* ---------- drifting tint ----------
   Each box's colour wash no longer reacts to the pointer. It clings to the top
   edge and drifts slowly from right to left and back, stretching and
   narrowing as it moves while its area stays the same, like liquid pooled
   on a ceiling. It lives on its own layer behind the content, so only that
   layer repaints. */
@property --tint-x { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tint-w { syntax: "<percentage>"; inherits: false; initial-value: 70%; }
@property --tint-h { syntax: "<percentage>"; inherits: false; initial-value: 140%; }
.panel, .summary-grid {
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 160px), var(--panel);
  transition: border-color 200ms ease;
}
.panel:hover, .summary-grid:hover { --spot-a: 0; --tint-a: .065; }
.panel::before, .summary-grid::before {
  content: ""; position: absolute; inset: 0; z-index: -1; padding: 0; border-radius: inherit; pointer-events: none;
  -webkit-mask: none; mask: none;
  background: radial-gradient(var(--tint-w) var(--tint-h) at var(--tint-x) 0%, rgba(var(--tint), .07), transparent 60%);
  animation: tint-drift 26s ease-in-out infinite alternate;
  will-change: transform;
  transition: none;
}
.panel:nth-of-type(3n + 2)::before { animation-duration: 31s; animation-delay: -9s; }
.panel:nth-of-type(3n)::before { animation-duration: 23s; animation-delay: -17s; }
.summary-grid::before { animation-duration: 34s; animation-delay: -5s; }
@keyframes tint-drift {
  0%   { --tint-x: 100%; --tint-w: 70%; --tint-h: 140%; }
  25%  { --tint-x: 74%;  --tint-w: 84%; --tint-h: 117%; }
  50%  { --tint-x: 46%;  --tint-w: 74%; --tint-h: 132%; }
  75%  { --tint-x: 20%;  --tint-w: 86%; --tint-h: 114%; }
  100% { --tint-x: 0%;   --tint-w: 70%; --tint-h: 140%; }
}
/* An open dropdown has to paint over the box below it. */
.panel:has(.select-menu:not([hidden])), .summary-grid:has(.select-menu:not([hidden])) { z-index: 5; }
@media (prefers-reduced-motion: reduce) {
  .panel::before, .summary-grid::before { display: block; animation: none; }
}
@media (hover: none) {
  .panel::before, .summary-grid::before { display: block; }
}
.date-calendar .calendar-years { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px 0 0; }
.date-calendar .calendar-years .calendar-month[aria-current="date"] { color: #fff; font-weight: 600; }
.date-calendar .calendar-year-view[hidden] { display: none; }

/* Scan profile steps: an ordered run of module tags. The step number sits in
   its own segment so the order reads at a glance; names use the mono face
   because they are module identifiers. */
.step-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.step-chips li { display: inline-flex; align-items: stretch; min-height: 26px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #0d0d0d; color: #d4d4d4; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; line-height: 24px; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease; }
.step-chips li > .step-index { display: inline-grid; place-items: center; min-width: 24px; margin: 0; padding: 0 6px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: rgba(255, 255, 255, .03); color: var(--dim); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.step-chips li { padding-right: 8px; gap: 8px; }
.table-wrap tbody > tr:hover .step-chips li { border-color: var(--line-strong); color: #fff; }
.step-chips li:hover { background: #141414; }
.step-chips li { font-weight: 400; }
.date-calendar .calendar-days button:not([aria-current="date"]):not([aria-pressed="true"]) { font-weight: 400; }

/* ---------- light through coloured liquid ----------
   The console's one visual idea. Each box holds a pool of its own colour
   that clings to the top edge, as if gravity ran upwards:
     - the pool drifts right to left and back, keeping its area while it
       stretches and narrows (tint-drift, defined above);
     - its lower surface ripples: two wave masks of different lengths slide
       in opposite directions, so the edge never repeats the same shape;
     - light passing through it gathers into a brighter caustic that moves
       against the drift;
     - the colour that gets through falls below the box as tinted light,
       under a normal soft shadow.
   Only the pseudo-element repaints; the box and its content stay still. */
@property --wave-a { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --wave-b { syntax: "<length>"; inherits: false; initial-value: 0px; }
:root {
  --liquid-wave-a: url("liquid-wave-a.svg");
  --liquid-wave-b: url("liquid-wave-b.svg");
}
.panel::before, .summary-grid::before, dialog.modal::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 150px; z-index: -1; padding: 0;
  border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; pointer-events: none;
  background:
    radial-gradient(22% 70% at calc(100% - var(--tint-x)) 8%, rgba(255, 255, 255, .07), transparent 70%),
    radial-gradient(var(--tint-w) calc(var(--tint-h) * .9) at var(--tint-x) 0%, rgba(var(--tint), .2), rgba(var(--tint), .07) 45%, transparent 72%);
  -webkit-mask: var(--liquid-wave-a) var(--wave-a) 0 / 600px 100% repeat-x, var(--liquid-wave-b) var(--wave-b) 0 / 900px 100% repeat-x;
  -webkit-mask-composite: source-in;
  mask: var(--liquid-wave-a) var(--wave-a) 0 / 600px 100% repeat-x, var(--liquid-wave-b) var(--wave-b) 0 / 900px 100% repeat-x;
  mask-composite: intersect;
  animation: tint-drift 26s ease-in-out infinite alternate, wave-a 14s linear infinite, wave-b 23s linear infinite;
  will-change: transform;
}
.panel:nth-of-type(3n + 2)::before { animation-duration: 31s, 17s, 27s; animation-delay: -9s, -4s, -11s; }
.panel:nth-of-type(3n)::before { animation-duration: 23s, 12s, 29s; animation-delay: -17s, -7s, -2s; }
.summary-grid::before { height: 100%; animation-duration: 34s, 16s, 25s; animation-delay: -5s, -9s, -13s; }
@keyframes wave-a { to { --wave-a: -600px; } }
@keyframes wave-b { to { --wave-b: 900px; } }

/* Coloured light that made it through, under an ordinary shadow. */
.panel, .summary-grid {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 1px 2px rgba(0, 0, 0, .5),
    0 28px 56px -34px rgba(0, 0, 0, .95),
    0 34px 70px -48px rgba(var(--tint), .45);
}

/* Dialogs hold a clear, colourless pool: light, not colour. */
dialog.modal { --tint: 237, 237, 237; }
dialog.modal::before { height: 120px; opacity: .55; }

/* ---------- toasts: lifted off the page ----------
   A toast floats above the grid, so it casts a deeper shadow, and the
   light through it takes the colour of its tone. */
.toast-region .flash {
  --tone: 160, 160, 160;
  position: relative; isolation: isolate; overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 2px 4px rgba(0, 0, 0, .5),
    0 18px 36px -8px rgba(0, 0, 0, .85),
    0 30px 60px -20px rgba(0, 0, 0, .7),
    0 22px 48px -26px rgba(var(--tone), .55);
}
.toast-region .flash.success { --tone: 69, 196, 107; }
.toast-region .flash.error { --tone: 255, 97, 102; }
.toast-region .flash::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 140% at 0% 0%, rgba(var(--tone), .14), transparent 70%);
  -webkit-mask: var(--liquid-wave-a) var(--wave-a) 0 / 300px 100% repeat-x;
  mask: var(--liquid-wave-a) var(--wave-a) 0 / 300px 100% repeat-x;
  animation: wave-a 9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .panel::before, .summary-grid::before, dialog.modal::before, .toast-region .flash::before { animation: none; }
}

/* Softer liquid surface: the pool thins towards its rippling edge. */
:root {
  --liquid-wave-a: url("liquid-wave-a.svg");
  --liquid-wave-b: url("liquid-wave-b.svg");
}

/* ---------- quieter, irregular liquid ----------
   The surface no longer slides at a constant speed: each wave surges,
   eases back a little, then surges again, at uneven intervals. Every box
   gets its own durations and starting point from script, so no two pools
   move together. The colour itself is fainter. */
@keyframes wave-a {
  0% { --wave-a: 0px; }
  13% { --wave-a: -118px; }
  21% { --wave-a: -84px; }
  38% { --wave-a: -262px; }
  47% { --wave-a: -231px; }
  66% { --wave-a: -398px; }
  74% { --wave-a: -371px; }
  100% { --wave-a: -600px; }
}
@keyframes wave-b {
  0% { --wave-b: 0px; }
  17% { --wave-b: 172px; }
  26% { --wave-b: 139px; }
  49% { --wave-b: 418px; }
  57% { --wave-b: 391px; }
  81% { --wave-b: 702px; }
  88% { --wave-b: 668px; }
  100% { --wave-b: 900px; }
}
@keyframes tint-drift {
  0%   { --tint-x: 100%; --tint-w: 70%; --tint-h: 140%; }
  18%  { --tint-x: 81%;  --tint-w: 80%; --tint-h: 122%; }
  29%  { --tint-x: 86%;  --tint-w: 76%; --tint-h: 129%; }
  52%  { --tint-x: 47%;  --tint-w: 84%; --tint-h: 117%; }
  61%  { --tint-x: 53%;  --tint-w: 73%; --tint-h: 134%; }
  83%  { --tint-x: 17%;  --tint-w: 86%; --tint-h: 114%; }
  100% { --tint-x: 0%;   --tint-w: 70%; --tint-h: 140%; }
}
.panel::before, .summary-grid::before, dialog.modal::before {
  background:
    radial-gradient(22% 70% at calc(100% - var(--tint-x)) 8%, rgba(255, 255, 255, .035), transparent 70%),
    radial-gradient(var(--tint-w) calc(var(--tint-h) * .9) at var(--tint-x) 0%, rgba(var(--tint), .12), rgba(var(--tint), .04) 45%, transparent 72%);
  animation:
    tint-drift var(--liquid-drift, 30s) ease-in-out var(--liquid-drift-delay, 0s) infinite alternate,
    wave-a var(--liquid-a, 22s) ease-in-out var(--liquid-a-delay, 0s) infinite,
    wave-b var(--liquid-b, 34s) ease-in-out var(--liquid-b-delay, 0s) infinite;
}
.panel:nth-of-type(n)::before, .summary-grid::before { animation-duration: var(--liquid-drift, 30s), var(--liquid-a, 22s), var(--liquid-b, 34s); animation-delay: var(--liquid-drift-delay, 0s), var(--liquid-a-delay, 0s), var(--liquid-b-delay, 0s); }
.panel, .summary-grid {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 0 0 1px rgba(255, 255, 255, .015),
    0 1px 2px rgba(0, 0, 0, .5),
    0 28px 56px -34px rgba(0, 0, 0, .95),
    0 34px 70px -50px rgba(var(--tint), .3);
}

/* ---------- translucent boxes ----------
   Boxes are frosted glass over a faint ambient light: the page carries two
   very soft pools of light, and each box blurs whatever lies behind it,
   with a brighter rim along its top where light enters the glass. */
body:not(.page-landing) {
  background:
    radial-gradient(60vw 50vh at 85% -10%, rgba(56, 189, 248, .035), transparent 70%),
    radial-gradient(50vw 50vh at 5% 40%, rgba(139, 92, 246, .03), transparent 70%),
    #000;
  background-attachment: fixed;
}
.panel, .summary-grid {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 160px),
    rgba(12, 12, 12, .62);
  border-color: rgba(255, 255, 255, .09);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
dialog.modal { background: rgba(16, 16, 16, .82); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); border-color: rgba(255, 255, 255, .1); }
.toast-region .flash { background: rgba(18, 18, 18, .72); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border-color: rgba(255, 255, 255, .1); }
/* Boxes and dialogs stay translucent without a backdrop blur: a blur would
   become the containing block for the fixed dropdown menus inside them, which
   then open offset by the box's position and spill scrollbars into a dialog.
   A dialog's frost comes from its own ::backdrop, which holds no menus. */
.panel, .summary-grid, dialog.modal { -webkit-backdrop-filter: none; backdrop-filter: none; }
dialog.modal { background: rgba(16, 16, 16, .94); }
dialog.modal::backdrop { -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); }

/* ---------- colour inside, white light outside ----------
   The liquid's colour stays within its box. What a box casts onto the page
   is plain white light under its shadow, and the page's ambient light is
   neutral. The border highlight that follows the pointer lives on ::after,
   since ::before now holds the liquid. */
.panel, .summary-grid {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 0 0 1px rgba(255, 255, 255, .015),
    0 1px 2px rgba(0, 0, 0, .5),
    0 28px 56px -34px rgba(0, 0, 0, .95),
    0 30px 80px -50px rgba(255, 255, 255, .1);
}
body:not(.page-landing) {
  background:
    radial-gradient(60vw 50vh at 85% -10%, rgba(255, 255, 255, .03), transparent 70%),
    radial-gradient(50vw 50vh at 5% 40%, rgba(255, 255, 255, .02), transparent 70%),
    #000;
  background-attachment: fixed;
}
.toast-region .flash {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 2px 4px rgba(0, 0, 0, .5),
    0 18px 36px -8px rgba(0, 0, 0, .85),
    0 30px 60px -20px rgba(0, 0, 0, .7),
    0 22px 48px -26px rgba(255, 255, 255, .18);
}
.panel::after, .summary-grid::after {
  content: ""; position: absolute; inset: -1px; z-index: 2; padding: 1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--px, 50%) var(--py, 0px), rgba(255, 255, 255, var(--edge-a)), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: --edge-a 350ms ease;
}
.panel:hover::after, .summary-grid:hover::after { --edge-a: .32; }
@media (prefers-reduced-motion: reduce), (hover: none) { .panel::after, .summary-grid::after { display: none; } }

/* ---------- metallic rims ----------
   Every box edge is brushed metal: the top catches the light, the sides
   fall away, and the base picks up a faint reflection. A thin specular
   streak runs along the top edge; it rests in the middle and slides to
   follow the pointer, brightening while the pointer is over the box. */
@property --rim-a { syntax: "<number>"; inherits: false; initial-value: .32; }
.panel::after, .summary-grid::after, .lp-frame::before, .lp-peel::before, .toast-region .flash::after {
  content: ""; position: absolute; inset: -1px; z-index: 2; padding: 1px; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(var(--px, 50%) - 260px), rgba(255, 255, 255, var(--rim-a)) var(--px, 50%), transparent calc(var(--px, 50%) + 260px)) top / 100% 1px no-repeat,
    radial-gradient(200px 70px at var(--px, 50%) var(--py, 0px), rgba(255, 255, 255, var(--edge-a)), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .035) 26%, rgba(255, 255, 255, .015) 70%, rgba(255, 255, 255, .05));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: --rim-a 400ms ease, --edge-a 350ms ease;
}
.panel:hover::after, .summary-grid:hover::after, .lp-frame:hover::before, .lp-peel:hover::before { --rim-a: .85; --edge-a: .22; }
.lp-frame::before, .lp-peel::before { --rim-a: .5; }
.lp-frame:hover::before, .lp-peel:hover::before { --rim-a: 1; --edge-a: .3; }
.lp-peel::before { inset: 0; }
.toast-region .flash::after { inset: 0; --rim-a: .55; }
/* The rim is part of the material, so it stays without motion or hover;
   only the pointer-following streak needs a pointer. */
@media (prefers-reduced-motion: reduce), (hover: none) {
  .panel::after, .summary-grid::after, .lp-frame::before, .lp-peel::before { display: block; transition: none; }
}
/* Panels clip their overflow, so their rim sits on the inner edge of the border. */
.panel::after, .summary-grid::after { inset: 0; }

/* The same metallic rim on every other box: cards, picker tiles, the drop
   zone and dialogs. */
.assessment-card, .picker-card, .dropzone { position: relative; }
.assessment-card::after, .picker-card::after, .dropzone::after, dialog.modal::after {
  content: ""; position: absolute; inset: 0; z-index: 2; padding: 1px; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(var(--px, 50%) - 200px), rgba(255, 255, 255, var(--rim-a)) var(--px, 50%), transparent calc(var(--px, 50%) + 200px)) top / 100% 1px no-repeat,
    radial-gradient(160px 60px at var(--px, 50%) var(--py, 0px), rgba(255, 255, 255, var(--edge-a)), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, .012) 70%, rgba(255, 255, 255, .04));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: --rim-a 400ms ease, --edge-a 350ms ease;
}
.picker-card::after, .dropzone::after { --rim-a: .18; }
.assessment-card:hover::after, .picker-card:hover::after, .dropzone:hover::after, dialog.modal:hover::after { --rim-a: .8; --edge-a: .2; }

/* The specular streak appears only while the pointer is over a box. */
.panel::after, .summary-grid::after, .lp-frame::before, .lp-peel::before, .toast-region .flash::after,
.assessment-card::after, .picker-card::after, .dropzone::after, dialog.modal::after { --rim-a: 0; --edge-a: 0; }
.panel:hover::after, .summary-grid:hover::after, .assessment-card:hover::after, .picker-card:hover::after, .dropzone:hover::after, dialog.modal:hover::after, .toast-region .flash:hover::after { --rim-a: .85; --edge-a: .2; }
.lp-frame:hover::before, .lp-peel:hover::before { --rim-a: 1; --edge-a: .3; }

/* Liquid at the edge of notice: about half the colour, a smaller pool. */
.panel::before, .summary-grid::before, dialog.modal::before {
  height: 120px;
  background:
    radial-gradient(18% 60% at calc(100% - var(--tint-x)) 8%, rgba(255, 255, 255, .018), transparent 70%),
    radial-gradient(calc(var(--tint-w) * .8) calc(var(--tint-h) * .72) at var(--tint-x) 0%, rgba(var(--tint), .065), rgba(var(--tint), .02) 45%, transparent 72%);
}
.summary-grid::before { height: 100%; }

/* ---------- rim light ----------
   One glow centred on the pointer, masked to a 1px ring on the box's border,
   so whichever stretch of edge is nearest lights up: top, sides or bottom.
   The element is added by script and eased towards the pointer. The quiet
   metallic edge underneath is always there; the light shows only on hover. */
.panel::after, .summary-grid::after, .lp-frame::before, .lp-peel::before, .toast-region .flash::after,
.assessment-card::after, .picker-card::after, .dropzone::after, dialog.modal::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 28%, rgba(255, 255, 255, .012) 70%, rgba(255, 255, 255, .045));
  transition: none;
}
.rim-light {
  position: absolute; inset: 0; z-index: 3; padding: 1px; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(240px circle at var(--x, 50%) var(--y, 0px), rgba(255, 255, 255, .9), rgba(255, 255, 255, .28) 35%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 300ms ease;
}
.lp-frame > .rim-light { inset: -1px; }
:is(.panel, .summary-grid, .lp-frame, .lp-peel, .assessment-card, .picker-card, .dropzone, dialog.modal, .toast-region .flash):hover > .rim-light { opacity: 1; }
/* Inside a box, a hovered card takes the light; the box around it dims. */
.panel:has(:is(.assessment-card, .picker-card, .dropzone):hover) > .rim-light { opacity: 0; }
@media (prefers-reduced-motion: reduce), (hover: none) { .rim-light { display: none; } }

/* Colour-coded badges glow faintly in their own colour, like light through
   tinted glass; hovering their row brings the glow up. Neutral badges stay
   unlit. */
.pill:not(.neutral), .invite-status {
  box-shadow: 0 0 14px -4px color-mix(in srgb, currentColor 55%, transparent), inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
  text-shadow: 0 0 10px color-mix(in srgb, currentColor 45%, transparent);
  transition: box-shadow 200ms ease, text-shadow 200ms ease;
}
.table-wrap tbody > tr:not(.evidence-detail):hover :is(.pill:not(.neutral), .invite-status),
.settings-row:hover .pill:not(.neutral), .session-row:hover .pill:not(.neutral) {
  box-shadow: 0 0 18px -3px color-mix(in srgb, currentColor 75%, transparent), inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent);
  text-shadow: 0 0 12px color-mix(in srgb, currentColor 65%, transparent);
}

/* Rim light: brighter, so the 1px edge reads clearly where it meets the border. */
.rim-light { background: radial-gradient(260px circle at var(--x, 50%) var(--y, 0px), #fff, rgba(255, 255, 255, .45) 35%, transparent 72%); }

/* ---------- rims without masks ----------
   On tall boxes the masked 1px ring lost its straight edges, leaving only the
   corners lit. Both the metallic edge and the pointer light now paint four
   1px strips directly: top, bottom, left and right. */
.panel::after, .summary-grid::after, .lp-frame::before, .lp-peel::before, .toast-region .flash::after,
.assessment-card::after, .picker-card::after, .dropzone::after, dialog.modal::after {
  inset: 0; padding: 0; -webkit-mask: none; mask: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .05)) 0 0 / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .015) 35%, rgba(255, 255, 255, .03)) 0 0 / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .015) 35%, rgba(255, 255, 255, .03)) 100% 0 / 1px 100% no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .05) 50%, transparent) 0 100% / 100% 1px no-repeat;
}
.lp-frame::before { inset: 0; }
.rim-light {
  inset: 0; padding: 0; -webkit-mask: none; mask: none;
  --glow: #fff, rgba(255, 255, 255, .45) 35%, transparent 72%;
  background:
    radial-gradient(260px circle at var(--x, 50%) var(--y, 0px), var(--glow)) 0 0 / 100% 1px no-repeat,
    radial-gradient(260px circle at var(--x, 50%) var(--yb, 0px), var(--glow)) 0 100% / 100% 1px no-repeat,
    radial-gradient(260px circle at var(--x, 0px) var(--y, 50%), var(--glow)) 0 0 / 1px 100% no-repeat,
    radial-gradient(260px circle at var(--xr, 0px) var(--y, 50%), var(--glow)) 100% 0 / 1px 100% no-repeat;
}
.lp-frame > .rim-light { inset: 0; }

/* ---------- row light that fades ----------
   Gradient backgrounds cannot transition, so the row light is driven by one
   animatable number. Moving between rows cross-fades: the row you leave
   dims while the next one brightens, along with its text and badges. */
@property --row-a { syntax: "<number>"; inherits: true; initial-value: 0; }
.table-wrap table tbody > tr:not(.evidence-detail) {
  background:
    radial-gradient(420px circle at var(--px, 50%) 50%, rgba(255, 255, 255, calc(var(--row-a) * .06)), transparent 70%),
    rgba(255, 255, 255, calc(var(--row-a) * .045));
  transition: --row-a 260ms ease;
}
.table-wrap table tbody > tr:not(.evidence-detail):not(.organization-group):not(.is-open):not(.evidence-detail tr):not(.finding-evidence tr):is(:hover, :has(:focus-visible)) {
  --row-a: 1;
  background:
    radial-gradient(420px circle at var(--px, 50%) 50%, rgba(255, 255, 255, calc(var(--row-a) * .06)), transparent 70%),
    rgba(255, 255, 255, calc(var(--row-a) * .045));
}
.table-wrap tbody > tr > td { transition: box-shadow 260ms ease, color 260ms ease; }
.table-wrap tbody > tr > td :is(small, .muted, code), .table-wrap tbody > tr > td strong { transition: color 260ms ease, text-shadow 260ms ease; }
.table-wrap tbody > tr :is(.pill:not(.neutral), .invite-status), .table-wrap tbody > tr .step-chips li { transition: box-shadow 260ms ease, text-shadow 260ms ease, border-color 260ms ease, color 260ms ease; }
.passkey-manager .settings-row, .session-row { transition: background-color 260ms ease; }
.passkey-manager .settings-row, .session-row {
  background: radial-gradient(360px circle at var(--px, 50%) 50%, rgba(255, 255, 255, calc(var(--row-a) * .045)), transparent 70%);
  transition: --row-a 260ms ease;
}
.passkey-manager .settings-row:hover, .session-row:hover { --row-a: 1; background: radial-gradient(360px circle at var(--px, 50%) 50%, rgba(255, 255, 255, calc(var(--row-a) * .045)), transparent 70%); }

/* ---------- rim corners ----------
   Each corner gets a 1px arc on the box's own radius, lit to match the edge
   glow at that distance, so the light wraps round instead of stopping where
   the straight edges end. */
.rim-light {
  --arc: transparent calc(var(--rim-r, 12px) - 1.5px), rgba(255, 255, 255, var(--ca)) calc(var(--rim-r, 12px) - 1px), rgba(255, 255, 255, var(--ca)) var(--rim-r, 12px), transparent calc(var(--rim-r, 12px) + .5px);
  background:
    radial-gradient(260px circle at var(--x, 50%) var(--y, 0px), var(--glow)) 0 0 / 100% 1px no-repeat,
    radial-gradient(260px circle at var(--x, 50%) var(--yb, 0px), var(--glow)) 0 100% / 100% 1px no-repeat,
    radial-gradient(260px circle at var(--x, 0px) var(--y, 50%), var(--glow)) 0 0 / 1px 100% no-repeat,
    radial-gradient(260px circle at var(--xr, 0px) var(--y, 50%), var(--glow)) 100% 0 / 1px 100% no-repeat,
    radial-gradient(circle at var(--rim-r, 12px) var(--rim-r, 12px), transparent calc(var(--rim-r, 12px) - 1.5px), rgba(255, 255, 255, var(--c1, 0)) calc(var(--rim-r, 12px) - 1px), rgba(255, 255, 255, var(--c1, 0)) var(--rim-r, 12px), transparent calc(var(--rim-r, 12px) + .5px)) 0 0 / var(--rim-r, 12px) var(--rim-r, 12px) no-repeat,
    radial-gradient(circle at 0 var(--rim-r, 12px), transparent calc(var(--rim-r, 12px) - 1.5px), rgba(255, 255, 255, var(--c2, 0)) calc(var(--rim-r, 12px) - 1px), rgba(255, 255, 255, var(--c2, 0)) var(--rim-r, 12px), transparent calc(var(--rim-r, 12px) + .5px)) 100% 0 / var(--rim-r, 12px) var(--rim-r, 12px) no-repeat,
    radial-gradient(circle at var(--rim-r, 12px) 0, transparent calc(var(--rim-r, 12px) - 1.5px), rgba(255, 255, 255, var(--c3, 0)) calc(var(--rim-r, 12px) - 1px), rgba(255, 255, 255, var(--c3, 0)) var(--rim-r, 12px), transparent calc(var(--rim-r, 12px) + .5px)) 0 100% / var(--rim-r, 12px) var(--rim-r, 12px) no-repeat,
    radial-gradient(circle at 0 0, transparent calc(var(--rim-r, 12px) - 1.5px), rgba(255, 255, 255, var(--c4, 0)) calc(var(--rim-r, 12px) - 1px), rgba(255, 255, 255, var(--c4, 0)) var(--rim-r, 12px), transparent calc(var(--rim-r, 12px) + .5px)) 100% 100% / var(--rim-r, 12px) var(--rim-r, 12px) no-repeat;
}

/* ---------- row bar as light ----------
   The hovered row's left edge is no longer a solid bar clipped square by the
   box's rounded corner. It is a thin line of light that fades out towards
   both ends, with a soft bloom into the row, and it fades with the row. */
.table-wrap table tbody > tr:not(.evidence-detail):not(.organization-group):not(.is-open):not(.evidence-detail tr):not(.finding-evidence tr):is(:hover, :has(:focus-visible)) > td:first-child,
.platform-organization td:first-child { box-shadow: none; }
.table-wrap tbody > tr:not(.evidence-detail) > td:first-child,
.table-wrap table tbody > tr:not(.evidence-detail):not(.organization-group):not(.is-open):not(.evidence-detail tr):not(.finding-evidence tr):is(:hover, :has(:focus-visible)) > td:first-child {
  --bar: max(var(--row-a), var(--bar-rest, 0));
  background:
    linear-gradient(180deg, transparent 8%, rgba(255, 255, 255, calc(var(--bar) * .85)) 38%, rgba(255, 255, 255, calc(var(--bar) * .85)) 62%, transparent 92%) 0 0 / 2px 100% no-repeat,
    radial-gradient(48px 42% at 0 50%, rgba(255, 255, 255, calc(var(--bar) * .1)), transparent 100%) 0 0 / 60px 100% no-repeat;
}
.platform-organization { --bar-rest: .45; }
.audit-event:hover, .audit-event:has(:focus-visible), .management-record-link:hover, .management-record-link:focus-visible {
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, .6), inset 30px 0 30px -26px rgba(255, 255, 255, .1);
}
.audit-event, .management-record-link { transition: box-shadow 260ms ease, background-color 260ms ease; }

/* ---------- badge glow follows the row's fade ----------
   The glow is computed from the row's brightness, which animates, so a
   badge's light rises and falls with its row instead of switching. */
.table-wrap tbody > tr :is(.pill:not(.neutral), .invite-status),
.table-wrap tbody > tr:not(.evidence-detail):hover :is(.pill:not(.neutral), .invite-status),
.settings-row .pill:not(.neutral), .settings-row:hover .pill:not(.neutral),
.session-row .pill:not(.neutral), .session-row:hover .pill:not(.neutral) {
  box-shadow:
    0 0 calc(14px + 6px * var(--row-a)) -4px color-mix(in srgb, currentColor calc(50% + 28% * var(--row-a)), transparent),
    inset 0 0 0 1px color-mix(in srgb, currentColor calc(16% + 12% * var(--row-a)), transparent);
  text-shadow: 0 0 10px color-mix(in srgb, currentColor calc(40% + 28% * var(--row-a)), transparent);
  transition: none;
}

/* ---------- filter actions share the fields' row ----------
   Clear and Apply sit at the end of the last row of fields, bottom aligned
   with the inputs, and only drop below them when the row is too narrow. */
.filter-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 4px 24px 20px; }
.filter-body > .filter-grid, .advanced-filters .filter-body > .filter-grid { flex: 1 1 480px; min-width: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
.filter-body > .filter-footer { flex: none; margin-left: auto; padding: 0; }
.audit-filter-grid .filter-actions { justify-content: flex-end; }
.audit-filter-grid .filter-actions :is(button, .button) { height: 32px; min-height: 32px; margin: 0; }
@media (max-width: 760px) {
  .filter-body > .filter-footer { width: 100%; justify-content: flex-end; }
}

/* ---------- empty table states ----------
   An empty state spans the whole table and is centred, even when it offers a
   button: it is not the row's action column. */
.table-wrap td.empty { text-align: center; padding-block: 40px; }
.table-wrap td.empty > small { display: block; max-width: 52ch; margin: 0 auto; }
.table-wrap td.empty > :is(.button, button) { margin-top: 16px; }

/* ---------- Android scanner ----------
   One app row in the settings-row anatomy, a thin progress strip under it
   while downloading, the three install steps, then the fingerprint check.
   Light, not colour, carries the progress, as it does across the console. */
.scanner-app { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 24px; }
.scanner-app-icon, .artifact-row-icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: linear-gradient(180deg, #1c1c1c, #0b0b0b); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 28px -10px rgba(255, 255, 255, .35);
}
.scanner-app-icon .ui-icon, .artifact-row-icon .ui-icon { width: 20px; height: 20px; }
.scanner-app .settings-copy > strong { font-size: 15px; font-weight: 600; }
.scanner-app .settings-copy time { color: inherit; }

.scanner-panel .download-progress { gap: 8px; margin: -6px 24px 20px 84px; padding: 0; border: 0; background: none; }
.scanner-panel .download-progress-head strong { font-size: 13px; font-weight: 500; }
.scanner-panel .progress-track, .scanner-panel .progress-track::-webkit-progress-bar { height: 4px; background: rgba(255, 255, 255, .08); }
.scanner-panel .progress-track::-webkit-progress-value { background: linear-gradient(90deg, rgba(255, 255, 255, .55), #fff); box-shadow: 0 0 12px rgba(255, 255, 255, .45); }
.scanner-panel .progress-track::-moz-progress-bar { background: linear-gradient(90deg, rgba(255, 255, 255, .55), #fff); }
.scanner-panel .progress-track:not([value]) {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent) 0 0 / 40% 100% no-repeat, rgba(255, 255, 255, .08);
}

.scanner-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.scanner-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 18px 24px; }
.scanner-steps li + li { border-left: 1px solid var(--line); }
.scanner-steps li > div { display: grid; gap: 4px; min-width: 0; }
.scanner-steps strong { color: var(--text); font-size: 14px; font-weight: 500; line-height: 22px; }
.scanner-steps li > div > span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.scanner-step-index {
  display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px;
  border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(255, 255, 255, .03);
  color: var(--muted); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums;
}

.scanner-hashes { display: grid; margin: 0; }
.scanner-hashes > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px 24px; border-top: 1px solid var(--line); }
.scanner-hashes > div[hidden] { display: none; }
.scanner-hashes > div:last-child { padding-bottom: 18px; }
.scanner-hashes dt { color: var(--muted); font-size: 13px; }
.scanner-hashes dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; margin: 0; }
.scanner-hashes .copyable { max-width: 100%; }
.scanner-hashes code { color: #e8e8e8; font-size: 12px; overflow-wrap: anywhere; white-space: normal; }

@media (max-width: 760px) {
  .scanner-app { grid-template-columns: 44px minmax(0, 1fr); padding-inline: 16px; }
  .scanner-app > .button { grid-column: 1 / -1; justify-content: center; }
  .scanner-panel .download-progress { margin-inline: 16px; }
  .scanner-steps { grid-template-columns: minmax(0, 1fr); }
  .scanner-steps li { padding-inline: 16px; }
  .scanner-steps li + li { border-left: 0; border-top: 1px solid var(--line); }
  .scanner-hashes > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-inline: 16px; }
}

/* ---------- one copy confirmation ----------
   Every copy control answers the way the registration codes do: the copy
   glyph gives way to a green check that pops in, with no tinted box. Labelled
   buttons swap their single glyph; icon buttons swap between their two. */
.copy-button.is-copied, .copy-button.is-failed { border-color: transparent; background: transparent; }
.copy-button.is-copied:hover, .copy-button.is-failed:hover { border-color: var(--line); background: rgba(255, 255, 255, .06); }
.copy-button.is-copied { color: var(--green); }
.copy-button .ui-icon { transition: none; }
.copy-button .copy-tick { opacity: 0; transform: none; }
.copy-button.is-copied .copy-icon { opacity: 0; }
.copy-button.is-copied .copy-tick { opacity: 1; animation: copy-confirm .22s ease-out; }
.is-copied:not(.copy-button) > .ui-icon.icon-copy { --icon: var(--i-check); color: var(--green); animation: copy-confirm .22s ease-out; }
.secret-field [data-invite-copy].is-copied .ui-icon { color: var(--green); }
@media (prefers-reduced-motion: reduce) {
  .copy-button.is-copied .copy-tick, .is-copied:not(.copy-button) > .ui-icon.icon-copy { animation: none; }
}

@media (max-width: 760px) {
  .status-notice { grid-template-columns: auto minmax(0, 1fr); }
  .status-notice > small { grid-column: 2; white-space: normal; }
  .status-config { grid-template-columns: 44px minmax(0, 1fr); padding: 16px; }
  .status-config > .pill { grid-column: 2; grid-row: 2; justify-self: start; }
  .status-fix { flex-direction: column; align-items: stretch; }
  .uptime-note { padding: 14px 16px; }
}

/* ---------- panel headings ----------
   One anatomy for every card: a 16px title, a description 6px below it that
   wraps at the same measure everywhere, then a divider before the content.
   An action, when there is one, sits to the right of the title block. The
   create pages' section heads follow the same rules. */
.panel-heading, .create-section-head { padding: 20px 24px; border-bottom: 1px solid var(--line); }
.panel-heading h2, .create-section-head h2, .panel-collapse-heading { margin: 0; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: -.01em; }
.panel-heading .heading-help, .create-section-head p {
  max-width: 72ch; margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 20px; text-align: left;
}
.create-section-body { padding: 20px 24px 24px; }
.passkey-status { padding: 16px 24px; }
.password-layout { padding-top: 20px; }


/* ---------- phones and touch ----------
   Everything below is scoped to phone widths or to touch input, so desktop
   layout is untouched. It follows: no sideways page scroll at 320px (WCAG
   1.4.10); 44px targets for primary controls (WCAG 2.5.5, platform
   guidelines) and at least 24px for the rest (WCAG 2.5.8); 16px form text so
   iOS does not zoom on focus; and as little pinned chrome as possible, so the
   content gets the screen. */
@media (max-width: 760px) {
  /* The header scrolls away; only the tab strip stays pinned, at the top. */
  html { --topbar-h: 0px !important; }
  .topbar { position: relative; }
  .topnav a, .topnav .linklike { min-height: 44px; }
  [data-section], .tab-panel { scroll-margin-top: 64px; }

  /* One sideways-scrolling row of tabs instead of rows that wrap and leave an
     orphan. The fade at the right edge says there is more; the end padding
     lets the last tab scroll clear of it. */
  .workspace-rail .tab-rail {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; padding-inline-end: 28px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .workspace-rail .tab-rail button { flex: 0 0 auto; max-width: none; min-height: 44px; padding: 0 2px; white-space: nowrap; scroll-snap-align: start; }
  .workspace-rail .tab-rail .rail-name { padding: 6px 8px; }

  /* Overview figures two to a row, divided like one card, not a tall stack. */
  .summary-grid, .scan-summary, .account-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .summary-grid > article { min-width: 0; padding: 14px 16px; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .summary-grid > article:nth-child(-n + 2) { border-top: 0; }
  .summary-grid > article:nth-child(even) { border-left: 1px solid var(--line); }
  .summary-grid > article:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .summary-grid > article > span { font-size: 13px; }
  .summary-grid strong { margin-top: 4px; font-size: 22px; }
  .scan-summary strong.summary-text { font-size: 15px; overflow-wrap: anywhere; }
  .summary-grid :is(time, .local-time) { white-space: normal; }

  .back-link { min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; }
}

@media (max-width: 640px) {
  .page-heading h1, .management-page > .page-heading h1 { font-size: 26px; line-height: 1.15; letter-spacing: -.03em; }
  .page-heading { margin-bottom: 20px; }

  /* Landing feature cards: on a phone the angled reveal cut its chips off, so
     the copy and the coloured panel stack instead. */
  .lp-peel { display: flex; flex-direction: column; min-height: 0; }
  .lp-peel .lp-peel-front, .lp-peel:hover .lp-peel-front, .lp-peel:focus-visible .lp-peel-front { position: relative; inset: auto; order: 1; padding: 24px; clip-path: none; }
  .lp-peel-under { position: relative; inset: auto; order: 2; justify-content: flex-start; padding: 20px 24px 24px; }
  .lp-peel-flap { display: none; }
  .lp-chips { justify-items: start; }
  .lp-chips li:nth-child(n) { margin-right: 0; }
}

/* Touch screens: hover never really ends after a tap, so hover-only effects
   stick. Small icon buttons get a larger invisible hit area, not a larger look. */
@media (hover: none) {
  .summary-grid > article::after { display: none; }
  .summary-grid > article:hover { transform: none; }
}
@media (pointer: coarse) {
  .copy-button { position: relative; }
  .copy-button::after { content: ""; position: absolute; inset: -10px; }
}

/* ---------- narrow tables: record grids ----------
   Below 1000px of room a table can no longer be read across. Each record then
   keeps the desktop row's order: the record (first cell) on line one with the
   chevron that opens it, and the remaining columns beneath as label-over-value
   fields in fixed columns, so a value sits in the same place on every record
   the way desktop columns line up. Two columns on a phone, three or four as
   room allows. Buttons that change something get a line of their own.
   Hairlines separate records. Wide desktop tables never match this query. */
@container (max-width: 1000px) {
  .table-wrap > .stack-table > tbody > tr:not(.evidence-detail) {
    --bar: max(var(--row-a, 0), var(--bar-rest, 0));
    display: grid; grid-template-columns: repeat(var(--record-columns, 4), minmax(0, 1fr)); grid-auto-flow: row dense;
    align-items: start; gap: 14px 20px;
    margin: 0; padding: 16px 24px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    background-color: transparent;
    /* The hover light runs down the record's left edge, as on desktop rows. */
    background-image:
      linear-gradient(180deg, transparent 8%, rgba(255, 255, 255, calc(var(--bar) * .85)) 38%, rgba(255, 255, 255, calc(var(--bar) * .85)) 62%, transparent 92%),
      radial-gradient(48px 42% at 0 50%, rgba(255, 255, 255, calc(var(--bar) * .1)), transparent 100%);
    background-size: 2px 100%, 60px 100%; background-position: 0 0, 0 0; background-repeat: no-repeat;
  }
  .table-wrap > .stack-table > tbody > tr:not(.evidence-detail):last-child { border-bottom: 0; }
  .table-wrap table.stack-table tbody > tr:not(.evidence-detail):not(.organization-group):not(.is-open):not(.evidence-detail tr):not(.finding-evidence tr):is(:hover, :has(:focus-visible)) > td:first-child,
  .table-wrap .stack-table tbody > tr:not(.evidence-detail) > td:first-child { background: none; }

  /* A field: its column name above, its value below. */
  .table-wrap > .stack-table > tbody > tr > td {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    width: auto; min-width: 0; padding: 0; border: 0; text-align: left;
    color: var(--text); font-size: 14px; line-height: 20px; overflow-wrap: anywhere;
  }
  .table-wrap > .stack-table > tbody > tr > td::before {
    content: attr(data-label); grid-area: auto; color: var(--dim); font-size: 12px; font-weight: 500; line-height: 16px;
    letter-spacing: 0; text-transform: none;
  }
  .table-wrap > .stack-table > tbody > tr > td > * { grid-column: auto; max-width: 100%; }
  .table-wrap > .stack-table > tbody > tr > td :is(small, .muted) { color: var(--muted); font-size: 12px; line-height: 18px; }
  .table-wrap > .stack-table > tbody > tr > td :is(time, .local-time, code) { white-space: normal; overflow-wrap: anywhere; }

  /* Line one: the record across the full width. */
  .table-wrap > .stack-table > tbody > tr > td:first-child { grid-column: 1 / -1; grid-row: 1; gap: 2px; font-size: 15px; font-weight: 600; }
  .table-wrap > .stack-table > tbody > tr > td:first-child::before { display: none; }
  .table-wrap > .stack-table > tbody > tr > td:first-child :is(time, .local-time, strong, code, a) { white-space: normal; overflow-wrap: anywhere; }
  .table-wrap > .stack-table > tbody > tr > td:first-child :is(small, .muted) { font-weight: 400; }

  /* The way into the record: a single opening link or the disclosure chevron
     sits at the end of line one. The record text keeps clear of it. */
  .table-wrap > .stack-table > tbody > tr > td:last-child:not(:first-child):has(> a.button:only-child, > .row-expand) {
    grid-column: -2 / -1; grid-row: 1; justify-self: end; align-self: start; align-items: flex-end;
    width: auto; inline-size: auto; margin: -8px -8px 0 0;
  }
  .table-wrap > .stack-table > tbody > tr > td:last-child:not(:first-child):has(> a.button:only-child, > .row-expand)::before { display: none; }
  .table-wrap > .stack-table > tbody > tr:has(> td:last-child:not(:first-child) > a.button:only-child) > td:first-child,
  .table-wrap > .stack-table > tbody > tr:has(> td:last-child:not(:first-child) > .row-expand) > td:first-child { padding-right: 48px; }
  /* A link that opens the record becomes the familiar chevron; its text stays
     the accessible name. */
  .table-wrap > .stack-table > tbody > tr > td:last-child > a.button:only-child:has(> .ui-icon) {
    width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; gap: 0; font-size: 0; justify-content: center;
  }
  .table-wrap > .stack-table > tbody > tr > td:last-child > a.button:only-child:has(> .ui-icon) > .ui-icon { --icon: var(--i-chevron-right); width: 18px; height: 18px; }
  .table-wrap > .stack-table > tbody > tr > td:last-child > a.button:only-child:has(> .ui-icon) > .ui-icon ~ .ui-icon { display: none; }
  .table-wrap > .stack-table > tbody > tr > td > .row-expand { width: 40px; height: 40px; }

  /* Buttons that change something (revoke, activate) are not the way in:
     they take a full line after the fields, without a column name. */
  .table-wrap > .stack-table > tbody > tr > td:not(:first-child):has(> form, > button:not(.row-expand, .copy-button), > .row-actions):not(:has(> a.button:only-child)) {
    grid-column: 1 / -1; order: 9; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px;
  }
  .table-wrap > .stack-table > tbody > tr > td:not(:first-child):has(> form, > button:not(.row-expand, .copy-button), > .row-actions):not(:has(> a.button:only-child))::before { display: none; }
  .table-wrap > .stack-table > tbody > tr > td:not(:first-child) > :is(form, .button, form > button) { width: auto; min-height: 36px; }
  /* An action column with nothing to do for this record ("—") says nothing. */
  .table-wrap > .stack-table > tbody > tr > td:not(:first-child):is([data-label="Action"], [data-label="Actions"], [data-label="Management"]):not(:has(a, button, form, input)) { display: none; }

  /* Fields that are lists (profile steps) or carry a copyable identifier or
     hash need the whole width, so names and hashes are not broken mid-word. */
  .table-wrap > .stack-table > tbody > tr > td:not(:first-child):has(> :is(ol, ul, .step-chips)),
  .table-wrap > .stack-table > tbody > tr > td:not(:first-child):has(.copy-button) { grid-column: 1 / -1; }
  .table-wrap > .stack-table > tbody > tr > td.empty { grid-column: 1 / -1; align-items: center; color: var(--muted); font-size: 14px; font-weight: 400; text-align: center; }
  .table-wrap > .stack-table > tbody > tr > td.empty::before { display: none; }

  /* An opened record's details sit under it, inside the same hairlines. */
  .table-wrap > .stack-table > tbody > tr.evidence-detail { margin: 0; padding: 0 24px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
  .table-wrap > .stack-table > tbody > tr.evidence-detail > td { display: block; padding: 0; border: 0; }
  .table-wrap > .stack-table > tbody > tr.evidence-detail > td::before { display: none; }
}
@container (max-width: 760px) {
  .table-wrap > .stack-table > tbody > tr { --record-columns: 3; }
}
@container (max-width: 520px) {
  .table-wrap > .stack-table > tbody > tr { --record-columns: 2; }
}
@container (max-width: 640px) {
  .table-wrap > .stack-table > tbody > tr:not(.evidence-detail), .table-wrap > .stack-table > tbody > tr.evidence-detail { padding-inline: 16px; }
}
@media (max-width: 640px) {
  .panel-heading, .create-section-head { padding-inline: 16px; }
}

/* ---------- status rows at every width ----------
   The uptime strip needs about 360px for 90 checks. When the row is too
   narrow to give it that beside the name and figures, the strip takes its own
   line; on a phone the figures follow it, and the strip shows the latest 60
   checks so the newest are never cut off. Measured on the list itself, so it
   holds for any window size, not only phones. */
.status-components { container: status-list / inline-size; }
@container status-list (max-width: 1000px) {
  .status-legend { display: none; }
  .status-component {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "icon copy figures" "icon strip strip";
    row-gap: 12px; align-items: start;
  }
  .status-component > .status-component-icon { grid-area: icon; }
  .status-component > .settings-copy { grid-area: copy; }
  .status-component > .uptime-strip { grid-area: strip; }
  .status-component > .uptime-figures { grid-area: figures; gap: 20px; }
  .uptime-window { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
@container status-list (max-width: 640px) {
  .status-component {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas: "icon copy" "strip strip" "figures figures";
    padding: 16px;
  }
  .status-component > .uptime-figures { justify-self: start; text-align: left; }
}
@container status-list (max-width: 520px) {
  .uptime-strip > .uptime-tick:nth-child(-n + 30) { display: none; }
}

/* ---------- settings rows on smaller screens ----------
   A passkey keeps one row: icon, name and dates, and its actions at the top
   right, with its storage badge under the name. On a phone the actions become
   icon buttons (their words stay the accessible name). Account-change rows
   keep their worded buttons, placed under the text. */
@media (max-width: 760px) {
  .passkey-manager .settings-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-areas: "icon copy actions" "icon meta meta";
    align-items: start; gap: 10px 14px;
  }
  .passkey-manager .settings-row:not(:has(> .settings-meta)) { grid-template-areas: "icon copy actions"; }
  .passkey-manager .settings-row > .settings-icon { grid-area: icon; }
  .passkey-manager .settings-row > .settings-copy { grid-area: copy; }
  .passkey-manager .settings-row > .settings-meta { grid-area: meta; grid-column: auto; justify-self: start; }
  .passkey-manager .settings-row > .row-actions { grid-area: actions; grid-column: auto; justify-content: flex-end; }
}
@media (max-width: 480px) {
  .passkey-list .settings-row > .row-actions { gap: 6px; }
  .passkey-list .settings-row > .row-actions > button:has(> .ui-icon) {
    width: 36px; min-width: 36px; height: 36px; padding: 0; gap: 0; font-size: 0; justify-content: center;
  }
  .passkey-settings .settings-row, .passkey-settings .settings-row:not(:has(> .settings-meta)) {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas: "icon copy" "icon meta" "icon actions";
  }
  .passkey-settings .settings-row:not(:has(> .settings-meta)) { grid-template-areas: "icon copy" "icon actions"; }
  .passkey-settings .settings-row > .row-actions { justify-content: flex-start; }
}


/* The narrowest phones: the top bar's four links fit by dropping their icons;
   the words stay. */
@media (max-width: 420px) {
  .topnav { gap: 0; width: 100%; justify-content: space-between; }
  .topnav a > .ui-icon, .topnav .linklike > .ui-icon { display: none; }
  .topnav a, .topnav .linklike { padding-inline: 6px; }
}

/* The top bar between phone and tablet: the workspace (organization and
   role) fills the space between the logo and the links instead of leaving a
   gap. The name gives way first, ending in an ellipsis, and the narrowest
   phones need the whole row for the links. A zero basis keeps it from pushing the links onto a new line.
   Where the links share the row and leave the name no useful room, only the
   initial and role show; below 480px the links take a row of their own, so
   the name has room again. */
@media (min-width: 421px) and (max-width: 640px) {
  .topbar-scope { display: inline-flex; flex: 1 1 0; min-width: 0; margin-left: 8px; margin-right: 8px; }
  .topbar-scope > :not(.topbar-org) { flex: none; }
  .topbar-org { flex: 0 1 auto; min-width: 0; }
}
@media (min-width: 481px) and (max-width: 640px) {
  .topbar-org { display: none; }
}