/* Brand palette, in place of Material's built-in named colours (mkdocs.yml
   sets primary/accent to "custom" so these variables are what actually
   apply). One precise yellow ramp — all derived from #fbc117, the exact
   fill used in the logo (docs/assets/img/tamesis_logo.svg) — over flat neutral
   black, rather than several invented gold/bronze/amber shades. Fewer,
   exact tones reads cleaner than a "vintage brass" mix, and a flat black
   keeps it crisp instead of leaning warm/leather.

   IMPORTANT: --md-typeset-a-color (body links, and the current/active item
   in the table-of-contents nav) defaults to var(--md-primary-fg-color) in
   Material's own CSS — i.e. it inherits the *header* colour unless we set
   it explicitly. Left alone, that made active TOC entries render in our
   near-black primary colour, invisible against the dark-mode background.
   Every scheme below sets --md-typeset-a-color itself so links/active-TOC
   are never silently tied to the header colour again.

   Primary (header/nav bar) is identical in both schemes: flat black stays
   put regardless of light/dark toggle (deliberate branding), and the logo
   yellow on it clears WCAG AAA (12.7:1) either way. */
:root {
  --md-primary-fg-color: #000000;
  --md-primary-fg-color--light: #1f1f1f;
  --md-primary-fg-color--dark: #000000;
  --md-primary-bg-color: #fbc117;
  --md-primary-bg-color--light: rgba(251, 193, 23, 0.7);
}

/* Body links / active TOC / hover, light scheme: the brand yellow's hue at
   low lightness, since full-brightness yellow can't read on white at any
   saturation — this is as light/clean as that hue goes and still clears
   AA. Base #826202 on white ≈ 5.7:1; hover deepens further, ≈ 8.8:1. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #826202;
  --md-accent-fg-color: #5f4702;
  --md-accent-fg-color--transparent: rgba(95, 71, 2, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);
}

/* Body links / active TOC / hover, dark scheme, plus --md-hue: Material's
   slate background is normally a *blue*-tinted near-black (--md-hue: 225,
   inherited from the light scheme's default) — independent of our
   primary/accent choices above, and the source of any residual "too blue"
   feel in dark mode even after those are fixed. 45 is the brand yellow's
   own hue (#fbc117 ≈ H45), so the reading surface gets the same faint,
   deliberate warmth as the accent instead of an arbitrary tint.

   --md-hue only controls hue, not saturation — Material's own formula for
   --md-default-bg-color hardcodes 15% saturation, tuned for their default
   blue. The same 15% on a yellow hue reads as muddy olive-brown rather
   than a clean near-black (a real quirk of HSL: yellow's max chroma sits
   at a much higher lightness than blue's, so pushed down to a dark
   background it reads as "dirty" rather than "neutral"). So the page
   background is overridden directly, at a much lower 6% saturation —
   same hue and lightness (barely perceptible warmth), just not muddy.
   Lightness is unchanged, so contrast is unaffected either way.

   Base is the exact logo yellow on that background ≈ 9.3:1; hover lightens
   further, ≈ 10:1. */
[data-md-color-scheme="slate"] {
  --md-hue: 45;
  --md-default-bg-color: hsl(45deg, 6%, 14%);
  --md-default-bg-color--light: hsla(45deg, 6%, 14%, 0.54);
  --md-default-bg-color--lighter: hsla(45deg, 6%, 14%, 0.26);
  --md-default-bg-color--lightest: hsla(45deg, 6%, 14%, 0.07);
  --md-typeset-a-color: #fbc117;
  --md-accent-fg-color: #fccd46;
  --md-accent-fg-color--transparent: rgba(252, 205, 70, 0.1);
  --md-accent-bg-color: #000000;
  --md-accent-bg-color--light: rgba(0, 0, 0, 0.7);
}

/* Row of external link icons in the header (overrides/partials/header.html),
   replacing Material's single GitHub "source" link. Icons reuse Material's
   own .md-header__button/.md-icon classes for consistent sizing, colour and
   hover behaviour with the menu/search buttons either side of them. */
.tr-header-links {
  display: flex;
  align-items: center;
}

/* Logo, larger than Material's default 1.2rem — the header has no fixed
   height, so it grows to fit (2.4rem -> ~3.4rem). Scoped to the header
   specifically so the (already larger) drawer/mobile-nav copy of the logo
   is untouched. */
.md-header .md-logo img {
  height: 2.2rem;
  width: auto;
}

/* Rules and other anchored paragraphs: keep the target clear of the header
   when jumping to it, and briefly highlight it so the reader can see which
   rule the link pointed at. 4.5rem = the taller ~3.4rem header (see the
   logo rule above) plus the original ~1.1rem buffer. */
.md-content :is(p[id], li[id], dd[id]) {
  scroll-margin-top: 4.5rem;
}

.md-content :is(p[id], li[id], dd[id]):target {
  animation: tr-highlight 3s ease-out 1;
  border-radius: 0.1rem;
}

@keyframes tr-highlight {
  0%,
  40% {
    background-color: color-mix(in srgb, var(--md-accent-fg-color) 20%, transparent);
    box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--md-accent-fg-color) 20%, transparent);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

/* The ¶ permalink appended to each anchored rule by assets/anchors.js.
   Mirrors the behaviour of Material's heading permalinks. */
a.tr-rule-anchor {
  margin-left: 0.35em;
  color: var(--md-default-fg-color--lighter);
  opacity: 0;
  transition: opacity 0.125s;
}

.md-content :is(p[id], li[id], dd[id]):hover > a.tr-rule-anchor,
a.tr-rule-anchor:focus {
  opacity: 1;
}

a.tr-rule-anchor:hover {
  color: var(--md-accent-fg-color);
}

/* PDF page size/margins. mkdocs-exporter renders with Chromium's
   prefer_css_page_size, i.e. it reads this @page rule rather than using its
   own default — which, left unset, is US Letter (612x792pt) with Chromium's
   default ~1in margins. These PDFs are mainly read on a screen (emailed,
   opened on a laptop/phone) rather than printed, so A4 (the expected size
   outside the US) with a tighter-than-print margin reads cleanly without
   the wasted border a physical-print margin needs. */
@page {
  size: A4;
  margin: 16mm;
}

/* mkdocs-exporter (PDF generation) prints each page with Chromium's print
   CSS media, so everything in this block only ever applies to PDFs — never
   to the interactive site. */
@media print {
  /* Don't show the interactive permalinks in generated PDFs. */
  a.tr-rule-anchor {
    display: none;
  }

  /* Force every collapsible admonition (e.g. "Controls") open, so a PDF
     always contains the full content rather than just the collapsed
     summary line. Overrides the browser's default closed-<details> styling
     rather than the `open` attribute itself, since Playwright's PDF export
     doesn't fire a real print event that JS could hook to toggle it. */
  details:not([open]) > *:not(summary) {
    display: block !important;
    content-visibility: visible !important;
  }

  details:not([open]) summary {
    cursor: default;
  }
}

/* Risk assessment: "Level of risk" badge and the severity/probability
   matrix table, both driven by risk_matrix.yml via the risk() and
   risk_matrix_table() macros (main.py) so the colours always match. */
.risk-badge {
  display: inline-block;
  padding: 0.15em 0.7em;
  border-radius: 0.25em;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}

.risk-meta {
  font-size: 0.85em;
  color: var(--md-default-fg-color--light);
}

.risk-low {
  background-color: #2e7d32;
}

.risk-moderate {
  background-color: #b8860b;
}

.risk-substantial {
  background-color: #d2691e;
}

.risk-intolerable {
  background-color: #c62828;
}

/* Per-category summary strip injected by risk-summary.js: one coloured
   square per risk below the heading, linking straight to it. */
.risk-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  margin: 0.2em 0 1.2em;
}

.risk-summary-square {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  border-radius: 0.15em;
  transition: transform 0.1s ease;
}

.risk-summary-square:hover,
.risk-summary-square:focus-visible {
  transform: scale(1.3);
}

table.risk-matrix {
  border-collapse: collapse;
}

table.risk-matrix th,
table.risk-matrix td {
  text-align: center;
  padding: 0.5em 0.9em;
  border: 1px solid var(--md-default-fg-color--lightest);
}

table.risk-matrix td {
  color: #fff;
  font-weight: 600;
}

/* Compact key/value layout for risk fields (Hazard, Consequences,
   Residual risk, etc.): label and value share a row instead of each
   stacking on its own line. Scoped to `dl` generically since def_list is
   only used on this page. */
.md-content dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0.75em;
  row-gap: 0.2em;
  margin: 0.5em 0 0.75em;
}

.md-content dl dt {
  font-weight: 600;
  color: var(--md-default-fg-color--light);
}

.md-content dl dd {
  margin: 0;
}