/*
 * policies.highport.space, standalone.
 *
 * The colour tokens are copied from `web/styles/base.css` rather than referenced, and
 * that is forced rather than chosen: the served-site CSP is `default-src 'self'`
 * (`crates/bard/src/config/origin.rs:49`), so a stylesheet on this host cannot reach
 * highport.space for anything. A copy that drifts is the cost; the alternative is a
 * page that loads with no styling at all on somebody else's domain.
 *
 * Only the subset this site uses is carried. `docs/brand/STYLE_GUIDE.md` is the
 * authority for what the values mean, and every `§12 correction` in `base.css` is
 * preserved here — those are measured contrast fixes, not preferences, and a value
 * reverted to the guide's published one fails AA.
 */

@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/display.woff2') format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/body.woff2') format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/body-bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/mono.woff2') format('woff2');
}

:root {
  /* Dark first — §3's ruling, and this order makes dark the answer when the OS
     expresses no preference. */
  color-scheme: dark light;

  --font-display: 'Bungee', 'Trebuchet MS', system-ui, sans-serif;
  --font-ui: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --bg: light-dark(oklch(95% 0.024 88.2), oklch(15.1% 0.004 285.9));
  --surface: light-dark(oklch(91.8% 0.032 87.3), oklch(19.5% 0.022 276.1));
  --surface-raised: light-dark(oklch(100% 0 90), oklch(24% 0.031 275.6));
  --surface-sunk: light-dark(oklch(88% 0.034 87), oklch(17% 0.02 276));

  --text: light-dark(oklch(22.8% 0.022 60.1), oklch(95% 0.024 88.2));
  --text-muted: light-dark(oklch(42.3% 0.036 73.2), oklch(75.9% 0.032 88.4));
  --text-faint: light-dark(oklch(47.7% 0.034 72), oklch(64% 0.03 88));

  --line: light-dark(oklch(80.1% 0.042 88.2), oklch(30.7% 0.037 275.3));
  --line-strong: light-dark(oklch(56.5% 0.042 86.8), oklch(53.8% 0.037 273.6));

  --accent: light-dark(oklch(51.2% 0.137 40.4), oklch(54.4% 0.152 39.3));
  --accent-ink: oklch(95% 0.024 88.2);
  --accent-text: light-dark(oklch(49.2% 0.136 40.5), oklch(64% 0.153 39.6));
  --accent-2: light-dark(oklch(48.3% 0.106 68), oklch(69.9% 0.118 78));

  --link: light-dark(oklch(47.3% 0.096 231.9), oklch(82.3% 0.112 229));
  --focus: var(--link);

  --warning: light-dark(oklch(48.3% 0.102 71.2), oklch(82.3% 0.145 71.6));
  --warning-soft: light-dark(oklch(93.5% 0.045 75), oklch(25% 0.05 72));
  --success: light-dark(oklch(47.3% 0.097 119.7), oklch(82.7% 0.163 159.8));

  --rainbow: linear-gradient(
    90deg,
    oklch(54.4% 0.152 39.3) 0%,
    oklch(69.9% 0.118 78) 22%,
    oklch(55% 0.1 130) 44%,
    oklch(75.1% 0.13 229.3) 68%,
    oklch(52% 0.13 265) 84%,
    oklch(52% 0.14 320) 100%
  );

  --step--1: 0.8rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: clamp(1.563rem, 1.35rem + 1.05vw, 1.953rem);
  --step-4: clamp(1.953rem, 1.6rem + 1.75vw, 2.441rem);

  --leading-body: 1.65;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;

  --radius-sm: 4px;
  --radius: 8px;

  --wrap: 46rem;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: var(--leading-body);
}

/* ── The skip link and focus ─────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--accent);
  color: var(--accent-ink);
  z-index: 10;
}

.skip-link:focus {
  left: var(--space-sm);
  top: var(--space-sm);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Chrome ──────────────────────────────────────────────────────────────────── */

.band {
  height: 3px;
  background: var(--rainbow);
}

.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.masthead-inner,
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.masthead-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  align-items: baseline;
  padding-block: var(--space-sm);
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
}

.wordmark:hover {
  color: var(--accent-text);
}

.masthead-tag {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.masthead-tag a {
  color: inherit;
}

main {
  padding-block: var(--space-xl) var(--space-2xl);
}

.pagefoot {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: var(--space-lg);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.pagefoot p {
  margin: 0 0 var(--space-2xs);
}

.pagefoot p:last-child {
  margin-bottom: 0;
}

/* ── Prose ───────────────────────────────────────────────────────────────────── */

h1 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-xs);
}

h2 {
  font-size: var(--step-2);
  line-height: 1.25;
  margin: var(--space-xl) 0 var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}

h3 {
  font-size: var(--step-1);
  line-height: 1.3;
  margin: var(--space-lg) 0 var(--space-2xs);
}

h4 {
  font-size: var(--step-0);
  margin: var(--space-md) 0 var(--space-3xs);
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--space-sm);
}

li {
  margin-bottom: var(--space-3xs);
}

a {
  color: var(--link);
}

a:hover {
  text-decoration-thickness: 2px;
}

strong {
  font-weight: 700;
}

.lede {
  font-size: var(--step-1);
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.updated {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-sunk);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
  overflow-wrap: anywhere;
}

pre {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-sm);
  overflow-x: auto;
  margin: 0 0 var(--space-sm);
}

pre code {
  background: none;
  padding: 0;
  font-size: var(--step--1);
  overflow-wrap: normal;
}

blockquote {
  margin: 0 0 var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--accent-2);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
}

blockquote > :last-child {
  margin-bottom: 0;
}

blockquote.caution {
  border-left-color: var(--warning);
  background: var(--warning-soft);
}

/* Wide content scrolls inside its own box; the page body never scrolls sideways. */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 var(--space-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--step--1);
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: 1px solid var(--line);
}

th {
  background: var(--surface-sunk);
  font-weight: 700;
}

tr:last-child td {
  border-bottom: none;
}

dt {
  font-weight: 700;
  margin-top: var(--space-2xs);
}

dd {
  margin: 0 0 var(--space-2xs);
}

/* ── The policy index ────────────────────────────────────────────────────────── */

.policy-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
  display: grid;
  gap: var(--space-sm);
}

.policy-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  margin: 0;
}

.policy-card h2 {
  margin: 0 0 var(--space-3xs);
  padding: 0;
  border: none;
  font-size: var(--step-1);
}

.policy-card p {
  margin: 0 0 var(--space-2xs);
  color: var(--text-muted);
}

.policy-card .formats {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-faint);
  margin: 0;
}

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  vertical-align: middle;
  margin-left: var(--space-2xs);
}

/* ── §10's provenance block ──────────────────────────────────────────────────── */

.record-ref {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  margin: 0 0 var(--space-sm);
}

.record-ref dt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--space-xs);
}

.record-ref dt:first-child {
  margin-top: 0;
}

.record-ref dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  overflow-wrap: anywhere;
}

/*
 * A value the script has not resolved yet, and the state it stays in when the fetch
 * fails. It has to *look* unresolved: the whole hazard in §10 is a reader copying a
 * placeholder into a record that then references nothing.
 */
[data-policy-site]:not([data-resolved]) {
  color: var(--text-faint);
  font-style: italic;
}

.record-note {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin: 0 0 var(--space-sm);
}

.record-warning {
  border-left: 3px solid var(--warning);
  background: var(--warning-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--step--1);
  margin: 0 0 var(--space-sm);
}

.copy-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-sm);
}

.copy-button {
  font: inherit;
  font-size: var(--step--1);
  font-family: var(--font-mono);
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--space-3xs) var(--space-xs);
  cursor: pointer;
}

.copy-button[disabled] {
  background: none;
  color: var(--text-faint);
  border-color: var(--line-strong);
  cursor: not-allowed;
}

.copy-status {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--success);
}

/* ── Coming soon ─────────────────────────────────────────────────────────────── */

.pending-note {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.pending-note > :last-child {
  margin-bottom: 0;
}

.backlink {
  font-size: var(--step--1);
  margin-bottom: var(--space-md);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}