/* Hallmark · v2.0.0 (ideas and rules from github.com/cybrcops/hallmark, applied by hand; its scripts were not run)
   theme: brand (the CYBR family: cybrmission.com and cybrcops.com), composition kept from the Wayfind build
   shape: index-first · hero: Index (the live board is the hero, the head small above it) · nav: slab · footer: statement
   signature: the live duty board set as a departures board, next-run times in brand cyan
   sections: hero (board) · rules (head beside rows) · footer (the 24-hour dial was removed at the owner's request)
   material: real: the roster, the schedules, live status.json, the three authority tiers, the emblem · absent: metrics, quotes, logos, photographs
   brand: tokens read from cybrmission-site/assets/css/site.css and data-removal-service/public/style.css (navy #060a13, blue #2f8cff, cyan, Inter, 14px panels, silver and blue wordmark)
   critique: the board leads because it is the reason to come; the family's faint blueprint grid and one soft bloom carry the colour
   waive 1: Inter is the family's chosen face, not a default
   waive 29: one fixed top bloom, kept to match the sister sites
   waive 63: the tier swatches are colour keys for the authority levels, not status dots */

:root {
  /* CYBR family palette */
  --color-paper: #060a13;
  --color-paper-2: #08101c;
  --color-plate: #0a1322;
  --color-signal: #0f2f6e;
  --color-ink: #eef4ff;
  --color-ink-2: #b4c3d8;
  --color-muted: #8a9cb6;
  --color-rule: #172540;
  --color-rule-strong: #20365a;
  --color-line-hi: #2b5a8f;
  --color-accent: #2f8cff;
  --color-accent-2: #4fd2ff;
  --color-figure: #8fdcff;
  --color-on-amber: #0b1424;
  --color-focus: #4fd2ff;
  --color-trail: rgba(47, 140, 255, 0.16);
  --color-bloom: rgba(32, 110, 220, 0.2);
  --color-grid: rgba(70, 120, 200, 0.045);
  --color-silver-1: #f2f5fa;
  --color-silver-2: #9daabd;
  --color-blue-1: #5bb8ff;
  --color-blue-2: #2f7bff;
  --color-line-green: #2fe0a0;
  --color-line-yellow: #ffb54d;
  --color-line-red: #ff6b7a;

  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-wordmark: "Orbitron", "Inter Tight", system-ui, sans-serif;
  --radius: 14px;
  --radius-sm: 8px;
  --rule-hair: 1px;
  --rule-bar: 1px;
  --tracking-display: -0.025em;

  --text-display: clamp(2.5rem, 4.2vw, 3.75rem);
  --text-section: clamp(2.125rem, 3.4vw, 3.25rem);
  --text-figure: clamp(1.5rem, 2.2vw, 2rem);
  --text-title: 1.5625rem;
  --text-lead: clamp(1.0625rem, 1.3vw, 1.25rem);
  --text-md: 1rem;
  --text-sm: 0.875rem;

  --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px;
  --section-gap-s: 120px; --section-gap: 144px;

  --container: 1440px;
  --gutter: clamp(16px, 4.4vw, 64px);
  --dur-micro: 120ms;
  color-scheme: dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font: 400 var(--text-md)/1.55 var(--font-body);
  font-variant-numeric: tabular-nums;
  font-synthesis: none;
}
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-display); line-height: 0.98; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--color-ink); text-decoration-thickness: var(--rule-bar); text-underline-offset: 0.2em; transition: color var(--dur-micro) steps(1); }
a:hover { color: var(--color-accent); }
a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
::selection { background: var(--color-accent-2); color: var(--color-on-amber); }
.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.lead { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 46ch; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-sm); top: -80px; z-index: 300; padding: var(--space-sm) var(--space-md); background: var(--color-plate); color: var(--color-ink); border: var(--rule-bar) solid var(--color-line-hi); }
.skip:focus { top: var(--space-sm); }

/* Nav: a slab, the wordmark and the live clock at opposite edges */
.nav { border-bottom: var(--rule-bar) solid var(--color-line-hi); background: var(--color-plate); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); text-decoration: none; font: 700 1.375rem/1 var(--font-display); letter-spacing: -0.02em; }
.brand img { width: 52px; height: auto; flex-shrink: 0; }
.clock { display: flex; align-items: baseline; gap: var(--space-xs) var(--space-sm); flex-wrap: wrap; justify-content: flex-end; font-size: var(--text-sm); color: var(--color-muted); }
.live { color: var(--color-accent); font-weight: 500; }
.clock-time { font: 700 1.5rem/1 var(--font-display); color: var(--color-ink); }

/* Hero: the board is the visual */
.hero { padding: var(--space-lg) 0 var(--section-gap-s); }
.hero-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg) var(--space-2xl); align-items: end; margin-bottom: var(--space-lg); }
.hero h1 { font-size: var(--text-display); margin-bottom: var(--space-md); max-width: 16ch; }

/* The sign: one figure in a bordered plate */
.sign { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: var(--rule-bar) solid var(--color-line-hi); background: var(--color-plate); }
.sign > div { padding: var(--space-sm) var(--space-md); }
.sign > div + div { border-top: var(--rule-hair) solid var(--color-rule); }
.sign > div:last-child { border-left: var(--rule-hair) solid var(--color-rule); }
.sign-main { grid-column: 1 / -1; }
.sign dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.sign dd { margin: 2px 0 0; font-weight: 700; }
.sign-main dd { font-size: var(--text-figure); line-height: 1.1; color: var(--color-figure); }
.sign .soon { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }

/* The departures board */
.board { border: var(--rule-bar) solid var(--color-line-hi); background: var(--color-plate); }
.departures { width: 100%; border-collapse: collapse; }
.departures th { padding: var(--space-sm) var(--space-md); text-align: left; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); border-bottom: var(--rule-bar) solid var(--color-line-hi); white-space: nowrap; }
.departures td { padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.departures th:first-child { width: 50%; }
.departures tbody tr:last-child td { border-bottom: 0; }
.departures .num { text-align: right; }
.departures .end { text-align: right; }
.departures tr { transition: background-color var(--dur-micro) steps(1); }
.departures tbody tr:hover, .departures tbody tr.active { background: var(--color-paper); }
.departures tbody tr:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.agent-name { display: block; font-weight: 700; font-size: 1.125rem; }
.agent-role { display: block; margin-top: 2px; font-size: var(--text-sm); line-height: 1.45; color: var(--color-muted); max-width: 64ch; }
.cadence, .last { font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; }
.next-time { display: block; font-weight: 700; font-size: var(--text-figure); line-height: 1.05; color: var(--color-figure); white-space: nowrap; }
.next-in { display: block; margin-top: 4px; font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.state { display: inline-block; padding: 4px var(--space-xs); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; border: var(--rule-bar) solid transparent; }
.state.ok { color: var(--color-ink); border-color: var(--color-rule-strong); }
.state.idle { color: var(--color-muted); border-color: var(--color-rule); }
.state.warn { background: var(--color-line-yellow); color: var(--color-on-amber); }
.state.fail { background: var(--color-line-red); color: var(--color-on-amber); }
.board-note { padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }


/* Rules: head beside full-width rows */
.rules { padding: var(--section-gap) 0 var(--section-gap-s); }
.rules-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl) var(--space-2xl); align-items: start; }
.rules h2 { font-size: var(--text-section); margin-bottom: var(--space-lg); max-width: 12ch; }
.tiers { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-line-hi); }
.tier { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-sm) var(--space-xl); padding: var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.tier h3 { display: flex; align-items: baseline; gap: var(--space-sm); font-size: 1.375rem; line-height: 1.15; }
.tier p { color: var(--color-ink-2); max-width: 60ch; }
.swatch { flex-shrink: 0; width: 14px; height: 14px; background: var(--color-muted); transform: translateY(1px); }
.tier-green .swatch { background: var(--color-line-green); }
.tier-yellow .swatch { background: var(--color-line-yellow); }
.tier-red .swatch { background: var(--color-line-red); }

/* Footer: a statement */
.foot { padding: var(--space-3xl) 0 var(--space-2xl); background: var(--color-plate); border-top: var(--rule-bar) solid var(--color-line-hi); }
.foot-statement { font: 700 clamp(1.375rem, 2.4vw, 2rem)/1.2 var(--font-display); letter-spacing: -0.02em; max-width: 34ch; }
.foot-legal { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }

/* CYBR family finish: the sister sites' blueprint grid, rounded panels, chrome wordmark */
body {
  background:
    radial-gradient(900px 520px at 78% -8%, var(--color-bloom), transparent 70%),
    linear-gradient(var(--color-grid) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--color-paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.08; }
.nav { background: var(--color-paper-2); border-bottom-color: var(--color-rule); }
.board, .sign { border-radius: var(--radius); overflow: hidden; border-color: var(--color-rule-strong); }
.state { border-radius: var(--radius-sm); }
.tiers { border-top-color: var(--color-rule-strong); }
.swatch { border-radius: 4px; }
.foot { background: var(--color-paper-2); border-top-color: var(--color-rule); }
.departures th { border-bottom-color: var(--color-rule-strong); }
a { text-decoration-thickness: 1px; }
.foot a { color: var(--color-figure); }

.brand { gap: var(--space-sm); }
.wordmark { display: grid; gap: 3px; }
.wordmark-name { font: 700 1.5rem/1 var(--font-wordmark); letter-spacing: 0.04em; white-space: nowrap; }
.wordmark-a { background: linear-gradient(180deg, var(--color-silver-1), var(--color-silver-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wordmark-b { background: linear-gradient(180deg, var(--color-blue-1), var(--color-blue-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wordmark-tag { font: 600 0.625rem/1 var(--font-body); letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-muted); white-space: nowrap; }

/* Under 60rem: everything stacks in reading order */
@media (max-width: 60rem) {
  .hero-head, .rules-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-head { align-items: start; }
  .tier { grid-template-columns: minmax(0, 1fr); }
  .rules { padding: var(--space-3xl) 0; }
}
/* Phones: each board row becomes a labelled block */
@media (max-width: 44rem) {
  .hero { padding: var(--space-lg) 0 var(--space-3xl); }
  .departures thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .departures, .departures tbody, .departures tr, .departures td { display: block; }
  .departures tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-md); padding: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .departures td { padding: 0; border: 0; }
  .departures td.who { grid-column: 1 / -1; }
  .departures td.num, .departures td.end { text-align: left; }
  .departures td[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
  .departures td.end { grid-column: 1 / -1; }
  .clock-zone { display: none; }
  .wordmark-name { font-size: 1.125rem; }
  .wordmark-tag { display: none; }
  .brand img { width: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}