/* Securelyn Intel styles. Colour tokens come from @securelyn/ui (packages/ui/src/tokens.css), copied here because a static site cannot import
   across packages. Values are HSL triplets used as hsl(var(--name)). Spacing is the @securelyn/ui step (0.25rem) times a whole or half number,
   and type sizes are the @securelyn/ui type scale. Text pairs are checked for WCAG AA by web/pages.test.ts through the contrast helpers of
   packages/ui. No inline styles anywhere (CSP style-src 'self').

   Vertical rhythm: layout uses grid and flex `gap` only, never margins between siblings, so space cannot stack or collapse. Empty regions
   (status lines, empty widget boxes) are display: none. There are no spacer elements. */
:root {
  color-scheme: dark;
  --radius: 0.625rem;
  --background: 222 35% 5%;
  --foreground: 210 20% 92%;
  --card: 222 30% 8%;
  --secondary: 222 25% 14%;
  --muted-foreground: 215 15% 62%;
  --border: 222 20% 22%;
  --control: 215 15% 55%;
  --primary: 175 95% 50%;
  --link: 175 95% 50%;
  --link-foreground: 222 35% 5%;
  --ring: 175 95% 50%;
  --danger: 0 90% 75%;
  --warn: 45 90% 62%;
  --ok: 145 70% 60%;
  --gradient-start: 175 95% 50%;
  --gradient-end: 270 60% 60%;
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* @securelyn/ui spacing step: 0.25rem */
  --s-0-5: 0.125rem;
  --s-1: 0.25rem;
  --s-1-5: 0.375rem;
  --s-2: 0.5rem;
  --s-2-5: 0.625rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  /* @securelyn/ui type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  --gutter: var(--s-4);
  /* Mirrors --section-gap in packages/ui/src/site.css (a static site cannot import across packages) */
  --section-gap: clamp(2rem, 1.25rem + 3vw, 3rem);
  --measure: 42rem;
  --glow: 175 95% 50%;
  --c1: hsl(175 85% 50%); --c2: hsl(265 80% 72%); --c3: hsl(35 95% 62%); --c4: hsl(330 80% 70%);
  --c5: hsl(210 90% 68%); --c6: hsl(95 60% 58%); --c7: hsl(15 85% 65%); --c8: hsl(50 90% 62%);
  --sev-critical: hsl(0 90% 68%); --sev-high: hsl(25 95% 60%); --sev-medium: hsl(45 95% 58%); --sev-low: hsl(175 70% 50%);
  --mono: ui-monospace, "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --glow: 175 90% 52%;
    --c1: hsl(175 85% 50%); --c2: hsl(265 80% 72%); --c3: hsl(35 95% 62%); --c4: hsl(330 80% 70%);
    --c5: hsl(210 90% 68%); --c6: hsl(95 60% 58%); --c7: hsl(15 85% 65%); --c8: hsl(50 90% 62%);
    --sev-critical: hsl(0 90% 68%); --sev-high: hsl(25 95% 60%); --sev-medium: hsl(45 95% 58%); --sev-low: hsl(175 70% 50%);
  }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --background: 210 20% 98%;
    --foreground: 220 25% 10%;
    --card: 0 0% 100%;
    --secondary: 215 25% 93%;
    --muted-foreground: 215 15% 40%;
    --border: 215 20% 88%;
    --control: 215 15% 42%;
    --primary: 190 95% 42%;
    --link: 190 95% 28%;
    --link-foreground: 0 0% 100%;
    --ring: 190 95% 28%;
    --danger: 0 72% 40%;
    --warn: 38 90% 28%;
    --ok: 145 80% 25%;
    --gradient-start: 190 95% 42%;
    --gradient-end: 260 60% 55%;
    --glow: 190 95% 42%;
    --c1: hsl(190 90% 32%); --c2: hsl(265 60% 48%); --c3: hsl(28 90% 40%); --c4: hsl(330 70% 42%);
    --c5: hsl(215 80% 42%); --c6: hsl(110 60% 30%); --c7: hsl(8 75% 44%); --c8: hsl(45 90% 33%);
    --sev-critical: hsl(0 72% 40%); --sev-high: hsl(20 85% 38%); --sev-medium: hsl(40 90% 30%); --sev-low: hsl(175 80% 25%);
  }
}
/* Explicit choice from the header toggle (js/theme.js), same tokens as the main Securelyn site, light */
:root[data-theme="light"] {
    color-scheme: light;
    --background: 210 20% 98%;
    --foreground: 220 25% 10%;
    --card: 0 0% 100%;
    --secondary: 215 25% 93%;
    --muted-foreground: 215 15% 40%;
    --border: 215 20% 88%;
    --control: 215 15% 42%;
    --primary: 190 95% 42%;
    --link: 190 95% 28%;
    --link-foreground: 0 0% 100%;
    --ring: 190 95% 28%;
    --danger: 0 72% 40%;
    --warn: 38 90% 28%;
    --ok: 145 80% 25%;
    --gradient-start: 190 95% 42%;
    --gradient-end: 260 60% 55%;
    --glow: 190 95% 42%;
    --c1: hsl(190 90% 32%); --c2: hsl(265 60% 48%); --c3: hsl(28 90% 40%); --c4: hsl(330 70% 42%);
    --c5: hsl(215 80% 42%); --c6: hsl(110 60% 30%); --c7: hsl(8 75% 44%); --c8: hsl(45 90% 33%);
    --sev-critical: hsl(0 72% 40%); --sev-high: hsl(20 85% 38%); --sev-medium: hsl(40 90% 30%); --sev-low: hsl(175 80% 25%);
}
@media (min-width: 40rem) {
  :root { --gutter: var(--s-6); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s-4); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: hsl(var(--background)); color: hsl(var(--foreground)); font: var(--text-base)/1.6 var(--font); }
body > main { flex: 1 0 auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
a { color: hsl(var(--link)); text-underline-offset: var(--s-0-5); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid hsl(var(--ring)); outline-offset: 2px; }
p, li, dd, dt, summary, td, th, h1, h2, h3, a, .notice { overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; padding: var(--s-2) var(--s-4); background: hsl(var(--link)); color: hsl(var(--link-foreground)); }
.skip:focus { left: 0; }

/* Containers */
.wrap { width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: var(--gutter); }
.wrap.wide { max-width: 80rem; }
main.wrap { display: grid; align-content: start; gap: var(--section-gap); padding-block: var(--section-gap); }
main.wrap > * { min-width: 0; }

/* Header and footer (the same family as the other Securelyn sites) */
header.site { background: hsl(var(--background)) linear-gradient(90deg, hsl(var(--gradient-start)), hsl(var(--gradient-end))) no-repeat top / 100% 3px; border-bottom: 1px solid hsl(var(--border)); }
header.site .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-6); padding-block: var(--s-2) var(--s-1); }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; font-weight: 700; color: hsl(var(--foreground)); text-decoration: none; }
.brand svg { width: var(--s-6); height: var(--s-6); flex: none; color: hsl(var(--link)); }
nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); list-style: none; padding: 0; }
@media (max-width: 40rem) { nav ul { gap: 0 var(--s-3); } }
nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: var(--s-0-5); color: hsl(var(--foreground)); text-decoration: none; border-bottom: 2px solid transparent; }
nav a:hover { border-bottom-color: hsl(var(--control)); }
nav a[aria-current="page"] { font-weight: 700; border-bottom-color: hsl(var(--link)); }
.who-box { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); margin-inline-start: auto; }
.who { color: hsl(var(--muted-foreground)); font-size: var(--text-sm); }
footer.site { margin-top: auto; border-top: 1px solid hsl(var(--border)); padding-block: var(--section-gap); color: hsl(var(--muted-foreground)); font-size: var(--text-sm); }
footer.site .wrap { display: grid; gap: var(--s-2); }
footer.site ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); list-style: none; padding: 0; }
footer.site ul a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; }

/* Type */
h1 { font-size: var(--text-3xl); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: var(--text-xl); line-height: 1.4; font-weight: 700; }
h3 { font-size: var(--text-lg); line-height: 1.4; font-weight: 700; }
@media (min-width: 48rem) {
  h1 { font-size: var(--text-4xl); line-height: 1.15; }
  .hero h1 { font-size: var(--text-5xl); line-height: 1.1; }
  h2 { font-size: var(--text-2xl); line-height: 1.35; }
}
.lead { max-width: var(--measure); font-size: var(--text-lg); line-height: 1.6; color: hsl(var(--muted-foreground)); }
.muted { color: hsl(var(--muted-foreground)); }
.meta { color: hsl(var(--muted-foreground)); font-size: var(--text-sm); }
strong { font-weight: 700; }
code, .marker { font-family: var(--mono); font-size: 0.9em; background: hsl(var(--secondary)); padding: var(--s-0-5) var(--s-1); border-radius: var(--s-1); }
.marker { white-space: nowrap; }

/* Blocks: headings, then their content, with one gap size per level */
.page-head, .hero { display: grid; gap: var(--s-3); }
.hero { gap: var(--s-4); }
main.wrap section, .prose { display: grid; align-content: start; gap: var(--s-3); }
.prose { gap: var(--s-6); max-width: var(--measure); }
.prose p, .prose li { max-width: 65ch; }
.prose ul, .prose ol, .refs { display: grid; gap: var(--s-2); padding-inline-start: var(--s-6); }
.refs { list-style: disc; }
.plain { list-style: none; padding: 0; display: grid; gap: var(--s-1); }
.ticks { display: grid; gap: var(--s-2); padding-inline-start: var(--s-5); }
.ticks li::marker { color: hsl(var(--link)); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); }
.section-head a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.stack { display: grid; align-content: start; gap: var(--s-4); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Breadcrumb */
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); list-style: none; padding: 0; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.crumbs li + li::before { content: "/"; margin-inline-end: var(--s-2); }
.crumbs a { display: inline; min-height: 0; padding: 0; border: 0; color: hsl(var(--link)); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: var(--s-2) var(--s-5); font: inherit; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; border-radius: var(--radius); border: 2px solid hsl(var(--link)); background: hsl(var(--link)); color: hsl(var(--link-foreground)); }
.btn:hover { text-decoration: none; background: hsl(var(--link) / 0.88); }
.btn.secondary { background: transparent; color: hsl(var(--link)); }
.btn.secondary:hover { background: hsl(var(--secondary)); }
.btn.danger { background: hsl(var(--danger)); border-color: hsl(var(--danger)); color: hsl(var(--background)); }
.btn.small { min-height: 2.5rem; padding: var(--s-1-5) var(--s-3); font-size: var(--text-sm); }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.linklike { min-height: 2.75rem; padding: 0 var(--s-1); font: inherit; background: none; border: 0; color: hsl(var(--link)); text-decoration: underline; text-underline-offset: var(--s-0-5); cursor: pointer; }
@media (prefers-reduced-motion: no-preference) { .btn, nav a, .card.adv { transition: background-color 0.15s, border-color 0.15s; } }
@media (max-width: 30rem) { .actions .btn { flex: 1 1 100%; } }

/* Cards, chips, panels */
.card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: var(--s-4); }
@media (min-width: 40rem) { .card { padding: var(--s-5); } }
main.wrap section.card { gap: var(--s-3); }
.advisory-list { display: grid; gap: var(--s-3); list-style: none; padding: 0; }
.card.adv { position: relative; display: grid; gap: var(--s-2); }
.card.adv a { color: hsl(var(--foreground)); text-decoration: none; }
.card.adv a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card.adv .read-more { color: hsl(var(--link)); font-weight: 600; }
.card.adv:hover { border-color: hsl(var(--link)); }
.card.adv:hover a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: var(--s-1); }
.card.adv a:focus-visible { outline: none; }
.card.adv:has(a:focus-visible) { outline: 3px solid hsl(var(--ring)); outline-offset: 2px; }
.panel { background: hsl(var(--secondary)); border-radius: var(--radius); padding: var(--s-5); }
@media (min-width: 40rem) { .panel { padding: var(--s-6); } }
.empty { padding: var(--s-5); border: 1px dashed hsl(var(--control)); border-radius: var(--radius); color: hsl(var(--muted-foreground)); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-1-5); list-style: none; padding: 0; }
.chip { display: inline-flex; align-items: center; padding: var(--s-0-5) var(--s-2-5); font-size: var(--text-sm); font-weight: 600; line-height: 1.5; border-radius: 99px; border: 1px solid hsl(var(--control)); background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.chip-danger, .chip-high { border-color: hsl(var(--danger)); background: hsl(var(--danger) / 0.1); color: hsl(var(--danger)); }
.chip-moderate, .chip-draft { border-color: hsl(var(--warn)); background: hsl(var(--warn) / 0.1); color: hsl(var(--foreground)); }
.chip-draft { border-style: dashed; }
.chip-ok, .chip-low { border-color: hsl(var(--ok)); background: hsl(var(--ok) / 0.1); color: hsl(var(--ok)); }
.pill { display: inline-block; padding: var(--s-0-5) var(--s-2); font-size: var(--text-sm); font-weight: 600; border-radius: 99px; border: 2px solid hsl(var(--control)); background: hsl(var(--card)); white-space: nowrap; }
.pill.s-published, .pill.s-approved, .pill.s-active { border-color: hsl(var(--ok)); }
.pill.s-draft, .pill.s-pending { border-color: hsl(var(--warn)); border-style: dashed; }
.pill.s-retired, .pill.s-unsubscribed { border-style: dashed; }

/* Notices */
.notice { padding: var(--s-3) var(--s-4); border: 1px solid hsl(var(--border)); border-left: 6px solid hsl(var(--control)); border-radius: var(--radius); background: hsl(var(--secondary)); }
.notice.error { border-left-color: hsl(var(--danger)); }
.notice.warn, .notice.draft { border-left-color: hsl(var(--warn)); }
.notice.ok { border-left-color: hsl(var(--ok)); }
.status-line:empty, #turnstile:empty { display: none; }
.status-line { display: grid; gap: var(--s-2); }

/* Facts */
dl.facts { display: grid; gap: var(--s-3); }
dl.facts dt { font-size: var(--text-sm); font-weight: 600; color: hsl(var(--muted-foreground)); }
dl.facts dd { margin-top: var(--s-0-5); }

/* Advisory layout */
.adv-layout { display: grid; gap: var(--section-gap); align-items: start; }
.side { display: grid; gap: var(--s-4); align-content: start; }
.side h2 { font-size: var(--text-lg); line-height: 1.4; }
.side .card .btn { width: 100%; }
@media (min-width: 56rem) { .adv-layout { grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--s-8); } }
.split { display: grid; gap: var(--section-gap); align-items: start; }
@media (min-width: 48rem) { .split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }

/* Forms */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-1-5); }
label, legend { font-weight: 600; }
input[type=text], input[type=email], input[type=url], input[type=number], input[type=date], select, textarea { width: 100%; min-height: 2.75rem; padding: var(--s-2-5) var(--s-3); font: inherit; color: inherit; background: hsl(var(--card)); border: 2px solid hsl(var(--control)); border-radius: var(--radius); }
textarea { min-height: 7rem; resize: vertical; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: hsl(var(--danger)); }
.hint { color: hsl(var(--muted-foreground)); font-size: var(--text-sm); }
.err { color: hsl(var(--danger)); font-weight: 600; font-size: var(--text-sm); }
.check { display: flex; align-items: flex-start; gap: var(--s-3); }
.check input { flex: none; width: var(--s-5); height: var(--s-5); margin: var(--s-0-5) 0 0; accent-color: hsl(var(--link)); }
.check label { font-weight: 400; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.grid2 { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.keybox { font-family: var(--mono); font-size: var(--text-lg); letter-spacing: 0.08em; user-select: all; }
.codes { columns: 2 12rem; list-style: none; padding: 0; font-family: var(--mono); }
.qr { display: block; width: 100%; max-width: 15rem; height: auto; padding: var(--s-2); background: #fff; border-radius: var(--radius); }
.qr path { fill: #000; }
fieldset { border: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-3); }

/* Staff tables and lists */
.tablewrap { overflow-x: auto; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); }
table.queue { border-collapse: collapse; width: 100%; min-width: 40rem; }
table.queue th, table.queue td { padding: var(--s-2-5) var(--s-3); text-align: left; vertical-align: top; border-bottom: 1px solid hsl(var(--border)); }
table.queue tbody tr:last-child > * { border-bottom: 0; }
table.queue th { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); background: hsl(var(--secondary)); }
.metrics { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.metric { display: grid; gap: var(--s-0-5); }
.stat { font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; }
.stat-label { color: hsl(var(--muted-foreground)); font-size: var(--text-sm); }
details { border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); }
details > summary { padding: var(--s-2) var(--s-3); font-weight: 600; cursor: pointer; }
details > :not(summary) { padding: 0 var(--s-3) var(--s-3); }

/* Phase Y: metrics, charts, rank tables, filters, reference lists */
ul.metrics { list-style: none; padding: 0; }
.metric.card { padding: var(--s-4); }
.chart { display: grid; gap: var(--s-2); max-width: 40rem; }
.chart svg { display: block; width: 100%; height: auto; }
.chart figcaption { color: hsl(var(--muted-foreground)); font-size: var(--text-sm); }
.chart .bar { fill: hsl(var(--link)); }
.chart .axis { stroke: hsl(var(--control)); stroke-width: 1; }
.chart text { fill: hsl(var(--foreground)); font: 10px/1 var(--font); }
.chart .bar-label { fill: hsl(var(--muted-foreground)); }
meter { width: 6rem; max-width: 100%; height: 0.75rem; accent-color: hsl(var(--link)); vertical-align: middle; }
.row-au > * { background: hsl(var(--warn) / 0.1); }
table.queue td { white-space: nowrap; }
table.queue td:last-child { white-space: normal; }
.filters { display: grid; gap: var(--s-1); }
.filters ul.row { gap: var(--s-1) var(--s-4); }
.filters a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.filters a[aria-current="page"] { font-weight: 700; }
.e8, .glossary { display: grid; gap: var(--s-3); }
.e8 { padding-inline-start: var(--s-6); }
.glossary dt { color: hsl(var(--foreground)); font-size: var(--text-base); }
.crumbs a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.tablewrap { max-width: 100%; }
.tablewrap:focus-visible { outline-offset: -3px; }
/* Visually hidden text and data tables are absolutely positioned. Without a positioned, clipping parent they stick out past the page edge and make the whole page scroll sideways on a phone. */
.tablewrap, .chart { position: relative; }
.chart { overflow: hidden; }
.stack > .card { min-width: 0; }

@media print {
  header.site nav, footer.site, .skip, .actions { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
  .card, .notice { border-color: #000; background: #fff; }
}

/* ===== Securelyn theme layer: dark navy, cyan glow, glass ===== */
body { background: hsl(var(--background)) radial-gradient(60rem 30rem at 50% -10rem, hsl(var(--glow) / 0.10), transparent 70%) no-repeat; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { letter-spacing: -0.02em; }
h1 { background: linear-gradient(90deg, hsl(var(--foreground)), hsl(var(--foreground)) 60%, hsl(var(--gradient-start))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
::selection { background: hsl(var(--primary) / 0.3); }

/* Sticky translucent header, CSS-only mobile menu */
header.site { position: sticky; top: 0; z-index: 50; background: hsl(var(--background) / 0.78) linear-gradient(90deg, hsl(var(--gradient-start)), hsl(var(--gradient-end))) no-repeat top / 100% 2px; -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid hsl(var(--border) / 0.8); }
.brand { letter-spacing: -0.01em; }
.brand svg { filter: drop-shadow(0 0 8px hsl(var(--glow) / 0.55)); }
header.site nav a { border-radius: var(--s-2); border-bottom: 0; font-size: var(--text-sm); font-weight: 500; padding-inline: var(--s-2-5); color: hsl(var(--muted-foreground)); }
header.site nav a:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
header.site nav a[aria-current="page"] { background: hsl(var(--primary) / 0.14); color: hsl(var(--link)); font-weight: 600; }
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nav-btn { display: none; align-items: center; min-height: 2.75rem; padding: 0 var(--s-3); border: 1px solid hsl(var(--border)); border-radius: var(--s-2); font-size: var(--text-sm); font-weight: 600; cursor: pointer; color: hsl(var(--foreground)); background: hsl(var(--card) / 0.6); }
.nav-toggle:focus-visible + .nav-btn { outline: 3px solid hsl(var(--ring)); outline-offset: 2px; }
@media (max-width: 62rem) {
  .nav-btn { display: inline-flex; margin-inline-start: auto; }
  header.site nav { display: none; flex-basis: 100%; }
  .nav-toggle:checked ~ nav { display: block; padding-bottom: var(--s-2); }
  header.site nav ul { flex-direction: column; gap: var(--s-0-5); }
  header.site nav a { width: 100%; }
  .who-box { margin-inline-start: 0; }
}
@media (min-width: 62.01rem) { header.site .wrap { flex-wrap: nowrap; } header.site nav ul { gap: 0 var(--s-0-5); flex-wrap: nowrap; } header.site .wrap:not(.wide) { max-width: 76rem; } }

/* Hero: CSS-only glow and grid */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(2rem, 1rem + 5vw, 4.5rem) clamp(1.25rem, 0.5rem + 4vw, 3rem); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * 2); background:
  radial-gradient(36rem 20rem at 85% -10%, hsl(var(--gradient-end) / 0.28), transparent 70%),
  radial-gradient(34rem 18rem at 10% 0%, hsl(var(--glow) / 0.22), transparent 70%),
  linear-gradient(hsl(var(--foreground) / 0.045) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
  linear-gradient(90deg, hsl(var(--foreground) / 0.045) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
  hsl(var(--card)); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 55%, hsl(var(--card) / 0.85)); pointer-events: none; }
.hero .lead { font-size: var(--text-xl); }
.hero h1 { max-width: 20ch; }

/* Buttons */
.btn { border-width: 1px; border-radius: var(--s-2-5); background: linear-gradient(135deg, hsl(var(--gradient-start)), hsl(var(--gradient-start) / 0.85)); border-color: hsl(var(--gradient-start)); color: hsl(var(--link-foreground)); box-shadow: 0 6px 20px -8px hsl(var(--glow) / 0.6); }
.btn:hover { background: linear-gradient(135deg, hsl(var(--gradient-start)), hsl(var(--gradient-end))); border-color: transparent; }
.btn.secondary { background: hsl(var(--card) / 0.5); border-color: hsl(var(--control)); color: hsl(var(--foreground)); box-shadow: none; }
.btn.secondary:hover { border-color: hsl(var(--link)); background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.btn.danger { background: hsl(var(--danger)); box-shadow: none; }

/* Glass cards and panels */
.card, .panel { background: linear-gradient(180deg, hsl(var(--card) / 0.92), hsl(var(--card) / 0.7)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * 1.4); box-shadow: 0 1px 0 hsl(var(--foreground) / 0.04) inset, 0 12px 32px -18px hsl(0 0% 0% / 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.card.adv:hover { border-color: hsl(var(--link) / 0.7); box-shadow: 0 0 0 1px hsl(var(--link) / 0.25), 0 14px 36px -16px hsl(var(--glow) / 0.45); }
@media (prefers-reduced-motion: no-preference) { .card.adv { transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; } .card.adv:hover { transform: translateY(-2px); } .btn { transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; } }
section.panel { background: hsl(var(--secondary) / 0.55); }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.panel-head h2, .panel-head h3 { font-size: var(--text-base); }
.dash-grid .panel { display: grid; align-content: start; gap: var(--s-3); min-width: 0; padding: var(--s-4); }
.notice { background: hsl(var(--secondary) / 0.7); }

/* Dashboard utilities */
.dash-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.dash-grid > * { grid-column: span 12; min-width: 0; }
@media (min-width: 48rem) { .dash-grid > .span-6, .dash-grid > .half { grid-column: span 6; } .dash-grid > .span-4, .dash-grid > .third { grid-column: span 4; } .dash-grid > .span-8 { grid-column: span 8; } .dash-grid > .span-3 { grid-column: span 3; } }
.kpi-row { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.kpi-row:empty { display: none; }
.kpi { display: grid; gap: var(--s-0-5); padding: var(--s-4); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * 1.2); background: linear-gradient(180deg, hsl(var(--card) / 0.9), hsl(var(--card) / 0.6)); position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, hsl(var(--gradient-start)), hsl(var(--gradient-end))); opacity: 0.8; }
.kpi .kpi-value, .kpi .stat { font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.kpi .kpi-label, .kpi .stat-label { color: hsl(var(--muted-foreground)); font-size: var(--text-sm); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.toolbar > .grow { flex: 1 1 12rem; }
.seg { display: inline-flex; flex-wrap: wrap; padding: var(--s-0-5); gap: var(--s-0-5); border: 1px solid hsl(var(--border)); border-radius: var(--s-2-5); background: hsl(var(--secondary) / 0.6); }
.seg button, .seg a, .seg label { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 var(--s-3); font: inherit; font-size: var(--text-sm); font-weight: 600; color: hsl(var(--muted-foreground)); background: none; border: 0; border-radius: var(--s-2); cursor: pointer; text-decoration: none; }
.seg button:hover, .seg a:hover { color: hsl(var(--foreground)); }
.seg [aria-pressed="true"], .seg [aria-selected="true"], .seg [aria-current], .seg .on { background: hsl(var(--primary) / 0.16); color: hsl(var(--link)); box-shadow: 0 0 0 1px hsl(var(--primary) / 0.4) inset; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-0-5) var(--s-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.5; border-radius: 99px; border: 1px solid hsl(var(--control)); background: hsl(var(--secondary)); color: hsl(var(--foreground)); white-space: nowrap; }
.badge::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.badge.sev-critical { color: var(--sev-critical); border-color: var(--sev-critical); background: hsl(var(--background)); }
.badge.sev-high { color: var(--sev-high); border-color: var(--sev-high); background: hsl(var(--background)); }
.badge.sev-medium { color: var(--sev-medium); border-color: var(--sev-medium); background: hsl(var(--background)); }
.badge.sev-low { color: var(--sev-low); border-color: var(--sev-low); background: hsl(var(--background)); }
.badge.kev { color: hsl(var(--danger)); border-color: hsl(var(--danger)); background: hsl(var(--background)); }
.badge.kev::before { content: none; }

/* Tables */
.tablewrap { background: hsl(var(--card) / 0.8); border-radius: calc(var(--radius) * 1.2); }
table.queue thead th { text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--text-xs); }
/* Row headers (often a linked name or ID) read as normal text: only column headers are small caps */
table tbody th, table.queue tbody th { text-transform: none; letter-spacing: normal; font-size: inherit; font-weight: 600; color: hsl(var(--foreground)); background: none; }
table.queue tbody tr:hover > * { background: hsl(var(--primary) / 0.06); }
table.queue td, .stat { font-variant-numeric: tabular-nums; }

/* Forms */
/* Every text-like input looks the same, including search, password, tel and the date/time kinds */
input[type=text], input[type=email], input[type=url], input[type=number], input[type=date], input[type=search], input[type=password], input[type=tel], input[type=time], input[type=datetime-local], input[type=month], input:not([type]), select, textarea { width: 100%; min-height: 2.75rem; padding: var(--s-2-5) var(--s-3); font: inherit; color: hsl(var(--foreground)); background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
input[type=search] { -webkit-appearance: none; appearance: none; }
input[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground)); opacity: 1; }
input:hover:not(:focus-visible):not([type=checkbox]):not([type=radio]), select:hover:not(:focus-visible), textarea:hover:not(:focus-visible) { border-color: hsl(var(--control)); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.25); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: hsl(var(--danger)); }
input[type=checkbox], input[type=radio] { width: 1.125rem; height: 1.125rem; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: hsl(var(--primary)); cursor: pointer; vertical-align: middle; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { box-shadow: none; outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.check input { width: 1.125rem; height: 1.125rem; margin-top: 0.2em; accent-color: hsl(var(--primary)); }

/* Footer with columns */
footer.site { background: linear-gradient(180deg, transparent, hsl(var(--card) / 0.6)); }
footer.site .wrap { grid-template-columns: 1fr; gap: var(--s-4); }
footer.site .wrap > p { max-width: 36rem; }
/* Compact link grid: 2 columns on phones, 4 from tablets; links keep a 24px+ target with a small row gap */
footer.site ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); margin: 0; }
@media (min-width: 40rem) { footer.site ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
footer.site ul a { justify-content: flex-start; min-width: 0; min-height: 1.75rem; color: hsl(var(--muted-foreground)); text-decoration: none; }
footer.site ul a:hover { color: hsl(var(--link)); text-decoration: underline; }
@media (min-width: 56rem) { footer.site .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; } }

@media print { .nav-btn, .nav-toggle { display: none !important; } header.site { position: static; } h1 { -webkit-text-fill-color: #000; background: none; } }

/* Theme toggle (sun in dark, moon in light), as on the main Securelyn site */
.theme-btn { order: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex: none; padding: 0; border: 1px solid hsl(var(--border)); border-radius: var(--s-2); background: hsl(var(--card) / 0.6); color: hsl(var(--muted-foreground)); cursor: pointer; }
.theme-btn[hidden] { display: none; }
.theme-btn:hover { color: hsl(var(--foreground)); background: hsl(var(--secondary)); }
.theme-btn svg { width: 1.125rem; height: 1.125rem; }
.theme-btn .i-moon { display: none; }
:root[data-theme="light"] .theme-btn .i-sun { display: none; }
:root[data-theme="light"] .theme-btn .i-moon { display: block; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .theme-btn .i-sun { display: none; } :root:not([data-theme]) .theme-btn .i-moon { display: block; } }
@media (max-width: 62rem) { .theme-btn { order: 0; margin-inline-start: auto; } header.site .theme-btn ~ .nav-btn { margin-inline-start: var(--s-2); } header.site nav { order: 5; } }

/* ===== Visual QA pass ===== */
/* Headings: one solid colour. A left-to-right text gradient tinted only the end of the first line, which read as one accented word. */
h1 { background: none; -webkit-text-fill-color: currentColor; color: hsl(var(--foreground)); }
.hero h1 { background: linear-gradient(180deg, hsl(var(--foreground)) 40%, hsl(var(--foreground) / 0.78)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* Breadcrumb: the link is a 44px tap target, so centre the separator and current page on it */
.crumbs ol { align-items: center; }
.crumbs li { display: inline-flex; align-items: center; }
/* Dashboard panels use the card surface in both themes, with a softer shadow */
section.panel, .dash-grid .panel { background: linear-gradient(180deg, hsl(var(--card) / 0.95), hsl(var(--card) / 0.75)); box-shadow: 0 1px 0 hsl(var(--foreground) / 0.04) inset, 0 10px 28px -20px hsl(222 40% 8% / 0.45); }
/* Charts in panels fill the panel; each chart kind caps its own size (charts.css). Under a panel heading the figure caption is a quiet subtitle (it often names the unit). */
.panel .chart { max-width: none; }
.panel-head ~ .chart > .chart-title, .panel-head ~ * .chart > .chart-title { margin: 0 0 var(--s-2); font-size: var(--text-xs); font-weight: 500; color: hsl(var(--muted-foreground)); }
/* Footer: first link row lines up with the first line of the blurb */
@media (min-width: 56rem) { footer.site ul { margin-top: calc((1.6em - 1.75rem) / 2); } }

/* A section laid out as a grid sizes its one column to its widest child (a table, a chart), which made phones scroll sideways; cap the column at the section width and let tables scroll inside their own wrapper. */
main section { grid-template-columns: minmax(0, 1fr); }
.more-claims { overflow-x: auto; }

/* ===== Definition lists (dl.facts): label | value grid with row separators; one column on phones ===== */
dl.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
dl.facts > dt, dl.facts > dd { margin: 0; padding: var(--s-2) 0; min-width: 0; }
dl.facts > dt { font-size: 0.875rem; font-weight: 500; color: hsl(var(--muted-foreground)); padding-block-end: 0; }
dl.facts > dd { color: hsl(var(--foreground)); padding-block-start: var(--s-0-5); border-bottom: 1px solid hsl(var(--border)); }
dl.facts > dd:last-child { border-bottom: 0; }
dl.facts dd ul.plain { margin: 0; }
@media (min-width: 40rem) {
  dl.facts { grid-template-columns: 12rem minmax(0, 1fr); column-gap: var(--s-4); }
  dl.facts > dt, dl.facts > dd { padding-block: var(--s-2); border-bottom: 1px solid hsl(var(--border)); }
  dl.facts > dt:nth-last-child(2), dl.facts > dd:last-child { border-bottom: 0; }
  /* Narrow side cards: a shorter label column */
  .side dl.facts { grid-template-columns: minmax(5rem, 40%) minmax(0, 1fr); column-gap: var(--s-3); }
}

/* ===== Score gauges (advisory side card, static and live CVE pages): compact half-circle arcs ===== */
.adv-scores { display: grid; gap: var(--s-3); }
.adv-scores .gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 16rem)); gap: var(--s-3); }
.adv-gauge { margin: 0; display: grid; gap: var(--s-1); justify-items: center; align-content: start; text-align: center; }
.adv-gauge svg { width: 100%; max-width: 10rem; height: auto; }
.gauge-track { stroke: hsl(var(--secondary)); stroke-linecap: round; }
.gauge-fill { stroke: hsl(var(--primary)); stroke-linecap: round; }
.gauge-fill.sev-critical { stroke: var(--sev-critical); }
.gauge-fill.sev-high { stroke: var(--sev-high); }
.gauge-fill.sev-medium { stroke: var(--sev-medium); }
.gauge-fill.sev-low { stroke: var(--sev-low); }
.gauge-num { fill: hsl(var(--foreground)); font-size: 7px; font-weight: 700; font-variant-numeric: tabular-nums; }
.adv-gauge figcaption { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
.adv-gauge figcaption strong { display: block; color: hsl(var(--foreground)); font-size: var(--text-sm); }

/* Tables scroll inside .tablewrap, so a row or column header never needs to break a word ("cmdorganiz / ation"). */
table th, table th a, .group-card h3 a { overflow-wrap: normal; word-break: normal; }

/* Button labels never wrap mid-word; a table that gets too wide scrolls inside its wrapper instead. */
.btn, button, td .btn, td button { white-space: nowrap; }

/* Bottom line of the footer: the copyright on the left, the policy link on the right. */
footer.site .legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-4); margin-top: var(--s-1); padding-top: var(--s-3); border-top: 1px solid hsl(var(--border)); font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
footer.site .legal p { margin: 0; }
footer.site .legal a { display: inline-flex; align-items: center; min-height: 2.75rem; color: hsl(var(--muted-foreground)); text-decoration: none; }
footer.site .legal a:hover { color: hsl(var(--link)); text-decoration: underline; }

/* The footer is one slim line. */
footer.site { padding-block: var(--s-1); background: none; }
footer.site .wrap { display: block; }
footer.site .legal { margin-top: 0; padding-top: 0; border-top: 0; }

/* One shell width for every Securelyn site (website, Intel, Scan): 72rem with 1.5rem gutters, so the header, the page and the footer share their edges. */
.wrap, header.site .wrap:not(.wide), footer.site .wrap:not(.wide) { max-width: 72rem; padding-inline: 1.5rem; }
.wrap.wide, header.site .wrap.wide, footer.site .wrap.wide { max-width: 80rem; padding-inline: 1.5rem; }

/* Links never break inside a word; when the bar is too narrow for everything on one line, the links move to a second line instead. */
header.site nav a { white-space: nowrap; }
@media (min-width: 62.01rem) and (max-width: 76rem) { header.site .wrap { flex-wrap: wrap; } }

header.site .brand { white-space: nowrap; flex: none; }
@media (min-width: 62.01rem) { header.site .wrap { gap: var(--s-1) var(--s-3); } }

/* The top bar: links on the left, then the free tool, the theme button and the consultation button, all on one centre line. */
header.site .head-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; margin-inline-start: auto; }
header.site .tool-pill { display: inline-flex; align-items: center; gap: var(--s-1); height: 2.25rem; padding: 0 var(--s-3); border: 1px solid hsl(var(--link) / 0.35); border-radius: 999px; background: hsl(var(--link) / 0.07); color: hsl(var(--link)); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; text-decoration: none; }
header.site .tool-pill:hover { background: hsl(var(--link) / 0.14); }
header.site .head-sep { width: 1px; height: 1.5rem; background: hsl(var(--border)); }
header.site .head-cta { height: 2.25rem; min-height: 0; padding: 0 var(--s-4); display: inline-flex; align-items: center; font-size: var(--text-sm); white-space: nowrap; }
header.site .theme-btn { order: 0; }
header.site nav li.nav-tool-m { display: none; }
@media (max-width: 62rem) {
  header.site .tool-pill, header.site .head-sep { display: none; }
  header.site nav li.nav-tool-m { display: list-item; }
  header.site .head-actions { margin-inline-start: 0; }
}
@media (min-width: 62.01rem) { header.site .wrap { flex-wrap: nowrap; } header.site nav { flex: 1 1 auto; min-width: 0; } header.site nav ul { justify-content: flex-start; } }

/* The Securelyn logo and wordmark, as on securelyn.com: the shield image, then SECURELYN in capitals with wide letter spacing, then the product name. */
.brand .brand-logo { width: 2rem; height: 2rem; flex: none; object-fit: contain; }
.brand-text { display: inline-flex; align-items: baseline; gap: 0.35em; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.brand-sub { text-transform: none; letter-spacing: 0; font-weight: 500; color: hsl(var(--muted-foreground)); }

/* Desktop top bar: one row (brand, links, then the free tool, theme and consultation buttons) when the shared 72rem width has room; below that the links drop to a second row so nothing overlaps. */
@media (min-width: 62.01rem) {
  header.site nav a { padding-inline: var(--s-2); }
}
@media (min-width: 62.01rem) and (max-width: 74rem) {
  header.site .wrap { flex-wrap: wrap; row-gap: 0; }
  header.site .wrap > .brand { order: 1; }
  header.site .wrap > .head-actions { order: 2; margin-inline-start: auto; }
  header.site .wrap > nav { order: 3; flex: 1 1 100%; }
  header.site nav ul { flex-wrap: wrap; justify-content: flex-start; }
}
@media (min-width: 74.01rem) {
  header.site .wrap { flex-wrap: nowrap; }
  header.site .wrap > nav { flex: 1 1 auto; min-width: 0; }
  header.site nav ul { flex-wrap: nowrap; justify-content: flex-start; gap: 0; }
}