/*
 * Vitals by DATA HIT components: design/components/components.css, ported for
 * the Worker's string-rendered pages (src/ui/components.ts). Rules from the
 * design file are kept as they are, minus its Google Fonts import line (the fonts
 * are self-hosted: /static/vitals/fonts.css). Additions for this repo are at
 * the end, under "Added for the site", and use tokens only.
 */
/* Vitals by DATA HIT components. Static markup, styled only through tokens.css.
   Plus Jakarta Sans for reading text (--font-sans); Satoshi for display headlines (--font-display). */

.mon {
  font-family: var(--font-sans, 'Plus Jakarta Sans', Arial, sans-serif);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.mon *, .mon *::before, .mon *::after { box-sizing: border-box; }
.mon :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Severity label: a badge. Critical is filled (loudest); warning and info are tinted. The word is always shown. */
.mon-sev {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-xs);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mon-sev--critical { background: var(--sev-critical-bg, #9c1a2e); color: var(--sev-critical-on, #ffffff); }
.mon-sev--warning { background: var(--sev-warning-bg, #ffe7c7); color: var(--sev-warning-on, #8a4300); }
.mon-sev--info { background: var(--sev-info-bg, #eef1f5); color: var(--sev-info-on, var(--ink-secondary)); }

/* Finding card: explanation on the left, evidence recessed on the right. The two wrap onto
   separate rows by themselves when the card is narrower than about 620px (no media query).
   Severity shows as the 4px left edge (brief requirement) and the badge. */
.mon-finding {
  display: flex;
  flex-wrap: wrap;
  background: var(--surface);
  border-left: 4px solid var(--info);
  border-radius: var(--radius-finding, 14px);
  box-shadow: var(--shadow-card, 0 1px 3px rgba(10,20,40,0.08), 0 16px 40px -12px rgba(10,20,40,0.18));
  overflow: hidden;
  min-width: 0;
}
[data-theme="dark"] .mon-finding { box-shadow: 0 0 0 1px var(--border), var(--shadow-card, 0 16px 40px -12px rgba(0,0,0,0.5)); }
.mon-finding--critical { border-left-color: var(--critical); }
.mon-finding--warning { border-left-color: var(--warning); }
.mon-finding--info { border-left-color: var(--info); }
.mon-finding__main { flex: 11 1 340px; display: flex; flex-direction: column; gap: 14px; padding: var(--space-lg); min-width: 0; }
.mon-finding__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-secondary);
}
.mon-finding__category { font-weight: 600; color: var(--ink); }
.mon-finding__headline {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.mon-finding--summary .mon-finding__headline { font-size: 18px; }
.mon-finding__body { margin: 0; font-size: 14px; line-height: 1.6; max-width: 65ch; color: var(--ink-secondary); }
.mon-finding__fix { margin: 0; font-size: 14px; line-height: 1.6; max-width: 65ch; }
.mon-finding__fix strong { font-weight: 700; }
.mon-finding__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: auto; padding-top: 6px; }

/* Evidence: a recessed panel of literal path and value lines, never summarised. */
.mon-evidence {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: var(--space-lg) 20px;
  background: var(--panel, #f5f7fb);
  font-family: var(--font-mono);
  min-width: 0;
}
.mon-evidence--standalone { border-radius: var(--radius-control); }
/* Inside a card: both edges are drawn and pulled 1px outwards, so whichever edge meets the card's own edge is clipped. */
.mon-finding > .mon-evidence {
  flex: 9 1 280px;
  margin: -1px 0 0 -1px;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-panel-inset, inset 6px 0 12px -10px rgba(10,20,40,0.25));
}
.mon-evidence__label {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.mon-evidence__line {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  min-width: 0;
}
.mon-evidence__path { font-size: 11.5px; line-height: 1.45; color: var(--ink-secondary); overflow-wrap: anywhere; }
.mon-evidence__value { font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.mon-evidence__value--fail { color: var(--critical-text); }
/* Figures: numeric evidence as tiles, path kept in full above the number. */
.mon-evidence--figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-content: center; }
.mon-evidence--figures .mon-evidence__label { grid-column: 1 / -1; }
.mon-evidence--figures .mon-evidence__value { font-size: 22px; font-variant-numeric: tabular-nums; }

/* Stat tile: one figure, its label, and what it was. */
.mon-stat {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  min-width: 0;
}
.mon-stat__label {
  font-family: var(--font-mono);
  font-size: 11.2px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.mon-stat__value {
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 1.1;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.mon-stat__value--critical { color: var(--critical-text); }
.mon-stat__note { font-size: 13px; line-height: 1.5; color: var(--ink-secondary); }

/* Change log: GTM, GA4 and crawl events in one dated timeline. */
.mon-log { list-style: none; margin: 0; padding: 0; display: grid; }
.mon-log__item {
  display: grid;
  grid-template-columns: 7.5em 4.5em minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.5;
}
.mon-log__item:first-child { border-top: 0; }
.mon-log__date { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.mon-log__source {
  justify-self: start;
  padding: 0 var(--space-2xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-tag);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
}
.mon-log__text { min-width: 0; }
@media (max-width: 480px) {
  .mon-log__item { grid-template-columns: auto minmax(0, 1fr); }
  .mon-log__text { grid-column: 1 / -1; }
}

/* Read-only notice: states the access level wherever access is shown. */
.mon-readonly {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
  padding: var(--space-xs) var(--space-sm);
  background: var(--accent-dim);
  border-radius: var(--radius-control);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.mon-readonly__key {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  white-space: nowrap;
}

/* Buttons: one primary per view. */
.mon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.mon-btn--primary { background: var(--accent); color: var(--on-accent); }
.mon-btn--primary:hover { background: var(--accent-hover); }
.mon-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--border); }
.mon-btn--secondary:hover { border-color: var(--ink-secondary); }
/* Website size: 48px high, 16px label. */
.mon-btn--lg { min-height: 48px; padding: var(--space-sm) var(--space-lg); font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .mon-btn { transition: none; } }

/* ---------- Website ---------- */

.mon-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-md); }
@media (min-width: 768px) { .mon-container { padding: 0 var(--space-xl); } }

.mon-eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

/* Site navigation: compact lockup, a few links, one primary action. */
.mon-site-nav { background: var(--bg); border-bottom: 1px solid var(--border); }
.mon-site-nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-xl);
  min-height: 72px;
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}
.mon-site-nav__brand { display: inline-flex; flex-shrink: 0; }
.mon-site-nav__brand img { display: block; width: 168px; height: auto; }
.mon-site-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-lg);
  margin: 0 auto 0 0;
  padding: 0;
  list-style: none;
}
.mon-site-nav__links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-secondary);
  text-decoration: none;
}
.mon-site-nav__links a:hover, .mon-site-nav__links a[aria-current="page"] { color: var(--ink); }
.mon-site-nav__actions { display: flex; gap: var(--space-xs); align-items: center; }
.mon-site-nav__actions .mon-btn { white-space: nowrap; }

/* Hero: left-aligned headline, lead, actions, and a real product preview. */
.mon-hero { background: var(--bg); padding: var(--space-3xl) 0; }
@media (min-width: 768px) { .mon-hero { padding: var(--space-4xl) 0; } }
.mon-hero__grid { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 960px) { .mon-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.mon-hero__copy { display: grid; gap: var(--space-lg); justify-items: start; }
.mon-hero__pulse { display: block; width: 168px; height: auto; color: var(--brand-blue); }
.mon-hero__title {
  margin: 0;
  font-family: var(--font-display, Satoshi, Arial, sans-serif);
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.mon-hero__lead { margin: 0; max-width: 34em; font-size: 20px; line-height: 1.5; color: var(--ink-secondary); }
.mon-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.mon-hero__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-secondary); }
.mon-hero__preview {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--elevated);
  border-radius: var(--radius-panel);
  min-width: 0;
}

/* Pulse draw: the only animation the brand allows. */
@keyframes mon-pulse-draw { 0% { stroke-dashoffset: 290; } 55%, 100% { stroke-dashoffset: 0; } }
.mon-pulse-draw { stroke-dasharray: 290; animation: mon-pulse-draw 2.6s cubic-bezier(.6, 0, .2, 1) 1 both; }
@media (prefers-reduced-motion: reduce) { .mon-pulse-draw { animation: none; stroke-dasharray: none; } }

/* Site footer: dark band, reversed lockup, DATA HIT named as the company. */
.mon-site-footer { background: var(--header); color: var(--on-header); padding: var(--space-3xl) 0 var(--space-xl); }
.mon-site-footer__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 768px) { .mon-site-footer__grid { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); } }
.mon-site-footer__brand img { display: block; width: 200px; height: auto; }
.mon-site-footer__text { margin: var(--space-md) 0 0; max-width: 36em; font-size: 14px; line-height: 1.55; color: var(--on-header-secondary); }
.mon-site-footer__heading {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: 11.2px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-header-secondary);
}
.mon-site-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.mon-site-footer__links a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  font-size: 14px;
  color: var(--on-header);
  text-decoration: none;
}
.mon-site-footer__links a:hover { text-decoration: underline; }
.mon-site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(195, 204, 219, 0.25);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--on-header-secondary);
}
.mon-site-footer :focus-visible { outline-color: var(--on-header); }

/* ---------- Added for the site ---------- */

html, body { margin: 0; background: var(--bg); }
:where(.mon main a:not([class])) { color: var(--accent-text); }

/* The light lockup on light grounds, the reversed one on dark (DESIGN.md, Logo):
   both are in the markup and the theme shows one. */
img.mon-logo--dark { display: none; }
[data-theme="dark"] img.mon-logo--light { display: none; }
[data-theme="dark"] img.mon-logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.mon-logo--light { display: none; }
  :root:not([data-theme="light"]) img.mon-logo--dark { display: block; }
}

/* Button states the styleguide shows. Disabled keeps its colours and reads as unavailable. */
.mon-btn:disabled, .mon-btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; }
.mon-btn--primary:disabled:hover, .mon-btn--primary[aria-disabled="true"]:hover { background: var(--accent); }
.mon-btn--secondary:disabled:hover, .mon-btn--secondary[aria-disabled="true"]:hover { border-color: var(--border); }
/* The primary action on the dark (header) band. */
.mon-btn--inverse { background: var(--on-header); color: var(--header); }
.mon-btn--inverse:hover { background: var(--on-header-secondary); }
/* Touch targets: 44px on the website (DESIGN.md, SiteNav). */
.mon-btn--touch { min-height: 44px; }

/* Site navigation below 768px: links and "Sign in" move into a disclosure menu;
   the lockup shrinks towards the compact minimum (120px) so the primary action
   stays beside it. */
.mon-site-nav__brand { flex: 0 1 168px; min-width: 120px; min-height: 44px; align-items: center; }
.mon-site-nav__brand img { max-width: 100%; }
.mon-site-nav__menu { display: none; position: relative; }
.mon-site-nav__menu > summary { list-style: none; min-height: 44px; }
.mon-site-nav__menu > summary::-webkit-details-marker { display: none; }
.mon-site-nav__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-xs));
  z-index: 10;
  display: grid;
  gap: var(--space-2xs);
  min-width: 220px;
  padding: var(--space-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.mon-site-nav__panel ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mon-site-nav__panel a:not(.mon-btn) {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-control);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.mon-site-nav__panel a:not(.mon-btn):hover { background: var(--accent-dim); }
.mon-site-nav__panel a[aria-current="page"] { color: var(--accent-text); }
.mon-site-nav__panel .mon-btn { margin-top: var(--space-2xs); }
@media (max-width: 767.98px) {
  .mon-site-nav__inner { flex-wrap: nowrap; gap: var(--space-xs); justify-content: space-between; }
  .mon-site-nav__links, .mon-site-nav__signin { display: none; }
  .mon-site-nav__menu { display: block; }
}

/* Site footer on elevated, with the light lockup, when the closing call to
   action takes the page's one dark band (DESIGN.md, SiteFooter). */
.mon-site-footer--light { background: var(--elevated); color: var(--ink); }
.mon-site-footer--light .mon-site-footer__text,
.mon-site-footer--light .mon-site-footer__heading,
.mon-site-footer--light .mon-site-footer__base { color: var(--ink-secondary); }
.mon-site-footer--light .mon-site-footer__links a { color: var(--ink); }
.mon-site-footer--light .mon-site-footer__base { border-top-color: var(--border); }
.mon-site-footer--light :focus-visible { outline-color: var(--focus-ring); }
.mon-site-footer__brand a { display: inline-flex; }

/* Finding detail on request (findings in layers, approved 10 November 2026):
   the explanation and fix open under the headline, and the evidence panel
   shows with them. Where :has() is unsupported the evidence always shows. */
.mon-finding__more > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-text);
}
.mon-finding__more > summary::-webkit-details-marker { display: none; }
.mon-finding__more[open] .mon-finding__more-show, .mon-finding__more:not([open]) .mon-finding__more-hide { display: none; }
.mon-finding__more-body { display: flex; flex-direction: column; gap: 14px; }
.mon-finding:has(> .mon-finding__main > .mon-finding__more:not([open])) > .mon-evidence { display: none; }

/* Footer links: 44px touch targets (the design's 32px is under the minimum). */
.mon-site-footer__links { gap: 0; }
.mon-site-footer__links a { min-height: 44px; }