/* ==========================================================================
   GDS Instruments — Security Trust Centre
   Shared stylesheet. No external requests: no CDN fonts, no third-party CSS.
   All styling lives here so the production CSP needs no 'unsafe-inline'.
   Brand: GDS blue #0F508E, grey #595959 (GDS house style). The token is still
   named --navy: it was #1F3864, sampled from the live site, until the real
   palette turned up. Renaming it touches thirty-odd rules for no visual gain.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  --navy: #0f508e;
  --navy-deep: #0b3a66;
  --grey: #595959;

  --bg: #ffffff;
  --surface: #f6f7f9;
  --surface-2: #eceff4;
  --border: #d7dce4;
  --border-strong: #b9c1cd;

  /* Chevron for the severity select, drawn rather than left to the platform. */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23595959' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");

  --ink: #1b1f26;
  --ink-muted: #595959;
  --ink-faint: #757d8a;

  --link: #0f508e;
  --link-hover: #0b3a66;

  --sev-critical-bg: #fdecea;
  --sev-critical-ink: #8b1d14;
  --sev-critical-line: #eeaaa3;
  --sev-high-bg: #fdf1e4;
  --sev-high-ink: #8a4a06;
  --sev-high-line: #efc48f;
  --sev-medium-bg: #fdf9e3;
  --sev-medium-ink: #6b5300;
  --sev-medium-line: #e5d391;
  --sev-low-bg: #eaf4ea;
  --sev-low-ink: #235b21;
  --sev-low-line: #b2d5b0;

  --ok-bg: #e8f2ea;
  --ok-ink: #1f5b2c;
  --ok-line: #aecdb5;
  --warn-bg: #fdf6e3;
  --warn-ink: #6d5200;
  --warn-line: #e6d493;

  /* The "where we are now" highlight on the CRA timeline. Deliberately not the
     warn tokens: an obligation being in force is not a caution, and amber also
     collides with the severity scale, where it means medium. */
  --next-bg: #eaf1f8;
  --next-ink: #0b3a66;
  --next-line: #b7cde4;

  --ribbon-bg: #fff4d6;
  --ribbon-ink: #5c4600;
  --ribbon-line: #e3ca7d;

  --radius: 6px;
  --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(27, 31, 38, .06), 0 4px 12px rgba(27, 31, 38, .05);

  --font: "Segoe UI", Calibri, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", "Liberation Mono", monospace;

  /* Running-text line length. 74ch was the reading-optimal end of the range;
     84ch trades a little of that to sit closer to the tables beside it. Much
     past this and lines get hard to track back. */
  --measure: 84ch;
  --container: 1360px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171c;
    --surface: #1b1f26;
    --surface-2: #232832;
    --border: #333a46;
    --border-strong: #4a525f;

    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239aa7b8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");

    --ink: #e8eaee;
    --ink-muted: #a7aeb9;
    --ink-faint: #838b97;

    --link: #8ab4f0;
    --link-hover: #a9c8f5;

    --sev-critical-bg: #3a1714;
    --sev-critical-ink: #f6b3ab;
    --sev-critical-line: #6d2b23;
    --sev-high-bg: #33210d;
    --sev-high-ink: #f0c491;
    --sev-high-line: #62401a;
    --sev-medium-bg: #2d2707;
    --sev-medium-ink: #e6d493;
    --sev-medium-line: #574c17;
    --sev-low-bg: #16261a;
    --sev-low-ink: #a9d3ad;
    --sev-low-line: #2e4a33;

    --ok-bg: #16261a;
    --ok-ink: #a9d3ad;
    --ok-line: #2e4a33;
    --warn-bg: #2d2707;
    --warn-ink: #e6d493;
    --warn-line: #574c17;

    --next-bg: #10243a;
    --next-ink: #9dc4ea;
    --next-line: #1e3f63;

    --ribbon-bg: #2e2708;
    --ribbon-ink: #f0dda2;
    --ribbon-line: #574c17;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  }
}

/* --- Reset / base ------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; color: var(--ink); margin: 0 0 .5em; }
h1 { font-size: 2.1rem; letter-spacing: -.015em; }
h2 { font-size: 1.45rem; margin-top: 2.2em; }
h3 { font-size: 1.12rem; margin-top: 1.8em; }
h4 { font-size: 1rem; margin-top: 1.5em; }

p, ul, ol, dl, table, pre, blockquote { margin: 0 0 1.05em; }
ul, ol { padding-left: 1.35em; }
li { margin-bottom: .35em; }
li > ul, li > ol { margin-top: .35em; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
  border-radius: 3px;
}

code, kbd, samp { font-family: var(--mono); font-size: .88em; }
code:not(pre code) {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .08em .35em;
}
pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font-size: .9rem;
  line-height: 1.55;
}

hr { border: 0; border-top: 1px solid var(--border); margin: 2.4em 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--bg);
  color: var(--link);
  padding: .7rem 1.1rem;
  border: 2px solid var(--link);
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }

/* --- Mockup ribbon ------------------------------------------------------ */

.ribbon {
  background: var(--ribbon-bg);
  color: var(--ribbon-ink);
  border-bottom: 1px solid var(--ribbon-line);
  font-size: .85rem;
}
.ribbon[hidden] { display: none; }
.ribbon__inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .6rem 1.5rem;
  max-width: var(--container);
  margin: 0 auto;
}
.ribbon__text { flex: 1; margin: 0; }
.ribbon__text strong { font-weight: 600; }
.ribbon__close {
  flex: none;
  background: transparent;
  border: 1px solid var(--ribbon-line);
  color: inherit;
  font: inherit;
  line-height: 1;
  padding: .3rem .55rem;
  border-radius: 4px;
  cursor: pointer;
}
.ribbon__close:hover { background: rgba(0, 0, 0, .06); }

/* --- Header ------------------------------------------------------------- */

.site-header {
  background: var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--navy-deep);
}
.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: .85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: #fff; }
.brand:hover { color: #fff; }

/* The GDS logo is navy and grey artwork on transparency, so it needs a light
   tile to read against the navy bar. Intrinsic size 221x72; width/height are on
   the element so the header does not shift as the image loads. */
.brand__logo {
  flex: none;
  display: block;
  height: 40px;
  width: auto;
  background: #fff;
  padding: .3rem .5rem;
  border-radius: 4px;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__sub {
  font-size: .88rem;
  font-weight: 500;
  color: #dbe3f0;
}

.site-nav { margin-left: auto; }
.site-nav ul {
  list-style: none;
  display: flex;
  gap: .35rem;
  margin: 0;
  padding: 0;
  align-items: center;
  flex-wrap: wrap;
}
.site-nav a {
  color: #dbe3f0;
  text-decoration: none;
  font-size: .93rem;
  padding: .45rem .65rem;
  border-radius: 4px;
  display: block;
}
.site-nav a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.site-nav a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, .16);
  font-weight: 600;
}
.site-nav .btn-report {
  background: #fff;
  color: var(--navy);
  font-weight: 600;
  padding: .45rem .85rem;
}
.site-nav .btn-report:hover { background: #e6ecf6; color: var(--navy-deep); }

.nav-toggle { display: none; }

/* --- Hero --------------------------------------------------------------- */

.hero {
  background: linear-gradient(170deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: 3.2rem 0 3rem;
}
.hero h1 { color: #fff; max-width: 24ch; font-size: 2.5rem; }
.hero__lead {
  color: #d3dcec;
  font-size: 1.12rem;
  max-width: 62ch;
  margin-bottom: 0;
}
.hero__meta {
  margin-top: 1.6rem;
  font-size: .87rem;
  color: #b8c5db;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* --- Page head (sub-pages) --------------------------------------------- */

.page-head {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 1.9rem 0 2.1rem;
}
.page-head h1 { margin-bottom: .35rem; }
.page-head__lead {
  color: var(--ink-muted);
  font-size: 1.06rem;
  max-width: var(--measure);
  margin: 0;
}

.breadcrumb { font-size: .85rem; color: var(--ink-faint); margin-bottom: .9rem; }
.breadcrumb ol { list-style: none; display: flex; gap: .5rem; flex-wrap: wrap; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--border-strong); }
.breadcrumb a { color: var(--ink-muted); }

/* --- Layout with sidebar ------------------------------------------------ */

.layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  padding: 2.6rem 0 4rem;
}
.layout--wide { grid-template-columns: minmax(0, 1fr); }

.sidebar { position: sticky; top: 1.5rem; font-size: .92rem; }
.sidebar h2 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-faint);
  margin: 0 0 .6rem;
  font-weight: 700;
}
.sidebar ul { list-style: none; margin: 0 0 1.8rem; padding: 0; }
.sidebar li { margin: 0; }
/* The left rule stays here: it groups the section and marks the current page,
   so it is carrying information rather than decorating. */
.sidebar a {
  display: block;
  padding: .4rem .7rem;
  color: var(--ink-muted);
  text-decoration: none;
  border-left: 2px solid var(--border);
  border-radius: 0 3px 3px 0;
}
.sidebar a:hover { background: var(--surface); color: var(--ink); }
.sidebar a[aria-current="page"] {
  border-left-color: var(--navy);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .sidebar a[aria-current="page"] { border-left-color: var(--link); }
}

/* Running text is held to a readable measure, but tables, card grids and
   controls take the full content column. Capping the whole column forced wide
   data tables into a horizontal scroller while the page still had room. */
.prose { max-width: none; }
.prose > :first-child { margin-top: 0; }
.prose h2:first-child { margin-top: 0; }

.prose > p,
.prose > h2,
.prose > h3,
.prose > h4,
.prose > ul,
.prose > ol,
.prose > dl,
.prose > pre,
.prose > blockquote,
.prose > .callout {
  max-width: var(--measure);
}

/* --- Cards -------------------------------------------------------------- */

/* 340px min yields three columns at the full container width, so the six-card
   grid forms a clean 3x2 instead of 4 + 2 with two empty cells. min(…,100%)
   stops the track exceeding a narrow viewport and forcing the page sideways. */
.card-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  margin: 0 0 1.05em;
  padding: 0;
  list-style: none;
}

/* The grid items are the list items, so they already stretch to the row height.
   The card is their child and would otherwise be content-sized, leaving cards
   in the same row visibly unequal. */
.card-grid > li { display: flex; }

.card {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.3rem;
  margin: 0;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
}
a.card:hover {
  border-color: var(--border-strong);
  color: inherit;
  transform: translateY(-1px);
  transition: transform .12s ease, border-color .12s ease;
}
.card h3 { margin: 0 0 .4rem; font-size: 1.04rem; color: var(--navy); }
@media (prefers-color-scheme: dark) { .card h3 { color: var(--link); } }
.card p { margin: 0; color: var(--ink-muted); font-size: .93rem; }

/* Pushed to the bottom so the call-to-action lines up across a row of cards,
   which is what makes the equal heights read as deliberate. */
.card__more {
  margin-top: auto;
  padding-top: .95rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--link);
}

/* --- Status strip ------------------------------------------------------- */

.strip { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 2.2rem 0; }
.strip h2 { margin-top: 0; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.timeline li {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0;
}
.timeline__date { display: block; font-weight: 700; color: var(--navy); font-size: 1.02rem; }
@media (prefers-color-scheme: dark) { .timeline__date { color: var(--link); } }
.timeline__what { display: block; color: var(--ink-muted); font-size: .92rem; margin-top: .2rem; }
.timeline li.is-next { border-color: var(--next-line); background: var(--next-bg); }
.timeline li.is-next .timeline__date { color: var(--next-ink); }
.timeline li.is-next .timeline__what { color: var(--next-ink); }
.timeline__flag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .35rem;
  color: var(--next-ink);
}

/* --- Tables ------------------------------------------------------------- */

.table-wrap { overflow-x: auto; margin: 0 0 1.05em; }

/* A callout sitting directly above the filter bar and the advisory table has to
   match them, or three stacked boxes come out at two different widths. Running
   text keeps the measure; this is furniture over a data table, not prose. */
.prose > .callout--wide { max-width: none; }

table { border-collapse: collapse; width: 100%; font-size: .93rem; }
caption { text-align: left; color: var(--ink-faint); font-size: .87rem; padding-bottom: .6rem; }
th, td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th {
  background: var(--surface);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-muted);
  border-bottom: 2px solid var(--border-strong);
  white-space: nowrap;
}
tbody tr:hover { background: var(--surface); }
td.nowrap, th.nowrap { white-space: nowrap; }
.table--fixed { table-layout: auto; min-width: 640px; }

/* --- Table cell composition --------------------------------------------
   Advisory rows carry more than one fact per cell — a release date with a
   last-modified date under it, or a CVE with the coordinating body's own
   identifier. Stacking inside the cell keeps the column count scannable.   */

.cell-stack { display: flex; flex-direction: column; gap: .1rem; }
.cell-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-faint);
  font-weight: 700;
}
/* The dates themselves must not break mid-value, but the revision note beside
   them must wrap — nowrap on the whole cell made the table wider than its
   column and reintroduced a scroller. */
.cell-dates .cell-stack span:not(.cell-label) { white-space: nowrap; }
.cell-note {
  display: block;
  max-width: 20rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-muted);
  margin-top: .4rem;
  white-space: normal;
}
.refs { display: flex; flex-direction: column; gap: .25rem; }
.refs span, .refs a { font-family: var(--mono); font-size: .82rem; }
.refs .refs__body { font-family: var(--font); font-size: .72rem; color: var(--ink-faint); }

/* --- Subscribe form -----------------------------------------------------
   Collecting addresses makes this the only page that would hold personal data,
   so consent is an explicit unticked box and the purpose is stated next to it
   rather than buried in a policy.                                          */

.subscribe {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem 1.25rem;
  margin: 1.4em 0;
  max-width: var(--measure);
}
.subscribe .field { margin-bottom: .9rem; }
.subscribe input[type="email"] {
  width: 100%;
  max-width: 24rem;
  font: inherit;
  font-size: .95rem;
  padding: .45rem .6rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}
.subscribe input[type="email"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.subscribe fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 .9rem;
}
.subscribe legend {
  padding: 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .45rem;
}
.check-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: .92rem;
  color: var(--ink-muted);
  cursor: pointer;
}
.check input { margin: .2em 0 0; flex: none; }
.check--consent {
  align-items: flex-start;
  font-size: .92rem;
  color: var(--ink);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.subscribe__privacy {
  font-size: .85rem;
  color: var(--ink-faint);
  margin: .9rem 0 0;
}
.subscribe__result {
  margin: .9rem 0 0;
  padding: .7rem .85rem;
  border-radius: 4px;
  border: 1px dashed var(--ribbon-line);
  background: var(--ribbon-bg);
  color: var(--ribbon-ink);
  font-size: .9rem;
}

/* --- Badges ------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .78rem;
  font-weight: 600;
  padding: .16em .55em;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-muted);
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
/* Severity is carried by the label text and marker shape as well as colour,
   so it survives greyscale printing and colour-vision deficiency. */
.badge--critical { background: var(--sev-critical-bg); color: var(--sev-critical-ink); border-color: var(--sev-critical-line); }
.badge--critical::before { border-radius: 0; transform: rotate(45deg); }
.badge--high { background: var(--sev-high-bg); color: var(--sev-high-ink); border-color: var(--sev-high-line); }
.badge--high::before { border-radius: 1px; }
.badge--medium { background: var(--sev-medium-bg); color: var(--sev-medium-ink); border-color: var(--sev-medium-line); }
.badge--low { background: var(--sev-low-bg); color: var(--sev-low-ink); border-color: var(--sev-low-line); }
.badge--ok { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
.badge--warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.badge--plain::before { display: none; }

/* --- [TO CONFIRM] marker ----------------------------------------------- */

/* Some of these markers carry a full sentence of explanation. They must wrap
   and must never exceed their container: nowrap here forced the whole page
   wider than a phone viewport, which zoomed every page out. */
.tbc,
.tbc-example {
  display: inline-block;
  max-width: 100%;
  font-family: var(--mono);
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.45;
  background: var(--ribbon-bg);
  color: var(--ribbon-ink);
  border: 1px dashed var(--ribbon-line);
  border-radius: 3px;
  padding: .05em .3em;
  margin-left: .3em;
  white-space: normal;
  overflow-wrap: break-word;
  scroll-margin-top: 6rem;
}

/* The marker shows its own number, so a reviewer can cite TBC-015 rather than
   describe where on the page they mean, and a row in the sign-off sheet can link
   straight to /cra/#tbc-015. Rendered from the id rather than repeated in the
   markup, so the label and the anchor cannot drift apart.
   Numbers are assigned by docs/number-tbc-markers.ps1 and never reused. */
.tbc[id]::after {
  content: " · " attr(id);
  text-transform: uppercase;
  opacity: .7;
}

/* Following a link from the sheet should make it obvious which claim was meant.
   .tbc--found is set by site.js when the fragment matched in a different case,
   where :target cannot fire. Same treatment either way. */
.tbc:target,
.tbc--found {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  opacity: 1;
}

/* --- Callouts ----------------------------------------------------------- */

/* No left accent bar. Type is carried by the tinted background and the bold
   title, which is enough and reads less like decoration. */
.callout {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 1.6em 0;
}
.callout > :last-child { margin-bottom: 0; }
.callout__title { font-weight: 700; font-size: .95rem; margin: 0 0 .35rem; }
.callout--info { border-color: var(--border-strong); }
.callout--warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); }
.callout--warn .callout__title { color: var(--warn-ink); }
.callout--ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); }
.callout--ok .callout__title { color: var(--ok-ink); }

/* --- Definition lists -------------------------------------------------- */

.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .55rem 1.4rem; margin: 0 0 1.4em; }
.facts dt { font-weight: 600; color: var(--ink-muted); font-size: .88rem; }
.facts dd { margin: 0; }

/* A fingerprint broken across two lines is hard to compare against a key, which
   is the only thing it is for. Never wrap it; on a narrow screen let the one
   line scroll instead, the same trick .table-wrap uses for wide tables. */
.fingerprint { display: block; white-space: nowrap; overflow-x: auto; max-width: 100%; }

/* A run of badge-led definitions inside a <dd>. As one paragraph the badges run
   together and the reader has to parse where each meaning ends. */
.facts__list { margin: 0; padding-left: 1.1em; display: grid; gap: .35rem; }
.facts__list li { margin: 0; }

/* --- Buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  padding: .6rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--link); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface); color: var(--link-hover); border-color: var(--link); }
.btn-row { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.4em 0; }

@media (prefers-color-scheme: dark) {
  .btn { background: var(--link); border-color: var(--link); color: #10161f; }
  .btn:hover { background: var(--link-hover); border-color: var(--link-hover); color: #10161f; }
}

/* --- Filter bar (advisory index) --------------------------------------- */

.filter-bar {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.4rem;
}
.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-size: .82rem; font-weight: 600; color: var(--ink-muted); }

/* The search box carries a longer placeholder, so give it the spare width and
   leave the severity picker at its natural size. Fixed 190px truncated the
   placeholder mid-word. */
.filter-bar .field:has(input[type="search"]) { flex: 1 1 17rem; }
.filter-bar .field:has(select) { flex: 0 0 auto; }

.field input, .field select {
  font: inherit;
  font-size: .93rem;
  padding: .45rem .6rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
.field input:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* A native select draws itself with the platform widget, which on Windows comes
   out light against the dark theme however the background is set. Reset the
   appearance and draw the chevron ourselves so it matches the input beside it. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right .65rem center;
  background-size: .65rem;
  cursor: pointer;
}

/* The count has no label above it, so left alone it floats above the controls
   it describes. Stretch it to the full height of the bar, then pad the top by
   exactly one label plus the field gap: what remains is the height of the
   input beside it, and centring in that puts the text on the control's line.
   Derived from the label metrics rather than nudged with a pixel value, so it
   survives a change of font size. */
.filter-count {
  font-size: .87rem;
  color: var(--ink-faint);
  margin: 0 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-top: calc(.82rem * 1.65 + .3rem);
}
tr[hidden] { display: none; }

/* --- Footer ------------------------------------------------------------ */

.site-footer {
  background: var(--navy-deep);
  color: #c3cee2;
  font-size: .9rem;
  padding: 2.6rem 0 2rem;
  margin-top: auto;
}
.site-footer a { color: #dbe3f0; }
.site-footer a:hover { color: #fff; }
.site-footer h2 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #94a5c4;
  margin: 0 0 .7rem;
  font-weight: 700;
}
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .35rem; }
.footer-legal {
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: #94a5c4;
  font-size: .84rem;
}
.footer-legal p { margin: 0 0 .4rem; }

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

/* --- Admin (phase-2 concept screens) ---------------------------------- */

.admin-shell { background: var(--surface); min-height: 100%; padding: 2.4rem 0 4rem; }

.login-card {
  max-width: 430px;
  margin: 3.5rem auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 2.1rem 2rem;
}
.login-card h1 { font-size: 1.4rem; }
.login-card .btn { width: 100%; justify-content: center; }
.login-card__note { font-size: .85rem; color: var(--ink-faint); margin-bottom: 0; }

.admin-bar {
  background: var(--navy-deep);
  color: #fff;
  padding: .7rem 0;
  font-size: .92rem;
}
.admin-bar__inner { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.admin-bar__who { margin-left: auto; color: #c3cee2; font-size: .87rem; }

.admin-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow);
}
.panel h2 { margin-top: 0; font-size: 1.05rem; }
.panel--span { grid-column: 1 / -1; }

.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.8rem 1.2rem;
  text-align: center;
  color: var(--ink-muted);
  font-size: .92rem;
}
.dropzone strong { display: block; color: var(--ink); margin-bottom: .25rem; }

.pending {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .95rem;
  background: var(--warn-bg);
  color: var(--warn-ink);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  font-size: .9rem;
  margin-bottom: 1.1rem;
}
.pending strong { font-weight: 700; }

/* --- Utilities ---------------------------------------------------------
   A deliberately small set, so pages need no inline style attributes and the
   production CSP can omit style-src 'unsafe-inline'.                       */

/* Vertical longhands only. The padding shorthand here would reset the
   horizontal padding of .container on the same element, pushing the section
   flush against the viewport edge. */
.section { padding-top: 2.8rem; padding-bottom: 1rem; }
.section--top { padding-top: 2.6rem; }
.section--bottom { padding-bottom: 3.4rem; }
.section--offset { margin-top: 1.4rem; }

.flush-top { margin-top: 0; }
.flush-bottom { margin-bottom: 0; }
.stack-sm { margin-top: .4rem; }
.note-after { margin-top: 1.3rem; margin-bottom: 0; }

.text-muted { color: var(--ink-muted); }
.measure { max-width: var(--measure); }

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; padding-top: 1.8rem; }
  .sidebar { position: static; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
  .sidebar ul { margin-bottom: 1rem; }
  .hero h1 { font-size: 2rem; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  h1 { font-size: 1.7rem; }
  .hero { padding: 2.4rem 0 2.2rem; }
  .hero h1 { font-size: 1.8rem; }

  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
    font: inherit;
    font-size: .9rem;
    padding: .4rem .7rem;
    border-radius: 4px;
    cursor: pointer;
  }
  .site-nav { margin-left: 0; flex-basis: 100%; }
  .site-nav[data-collapsed="true"] { display: none; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: .15rem; padding-top: .6rem; }
  .site-nav .btn-report { text-align: center; margin-top: .4rem; }

  .facts { grid-template-columns: minmax(0, 1fr); gap: .1rem .5rem; }
  .facts dt { margin-top: .6rem; }
  .filter-count { margin-left: 0; flex-basis: 100%; padding-top: 0; }
  .field input, .field select { min-width: 0; width: 100%; }
  .field { flex: 1 1 100%; }
}

/* --- Print ------------------------------------------------------------- */

@media print {
  .ribbon, .site-nav, .nav-toggle, .sidebar, .filter-bar, .btn-row { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .site-header, .hero { background: #fff !important; color: #000 !important; border-bottom: 2px solid #000; }
  .hero h1, .brand, .brand__sub, .hero__lead, .hero__meta { color: #000 !important; }
  .brand__logo { background: #fff; padding: 0; }
  .site-footer { background: #fff; color: #000; border-top: 1px solid #000; }
  .site-footer a, .site-footer h2, .footer-legal { color: #000; }
  .layout { grid-template-columns: 1fr; }
  .card, .panel, .timeline li { box-shadow: none; break-inside: avoid; }
  a { text-decoration: underline; }
  .prose { max-width: none; }
}