/* Adapter for the standalone pages (exams, tools, guides, emergency, FT8).
   Those pages keep their own stylesheet; this file maps their colour and
   font tokens to the brand and puts them in the same frame as the rest of
   the site. Linked after the page's own <style>, and scoped to
   html.hn-legacy (added by scripts/brand-standalone.mjs). The doubled class
   outranks the pages' own :root[data-theme] and :root:not(...) rules. */

:root.hn-legacy.hn-legacy {
  /* exams, tools, guides, emergency */
  --bg: var(--hn-bg);
  --surface: var(--hn-surface);
  --ink: var(--hn-ink);
  --muted: var(--hn-muted);
  --line: var(--hn-line);
  --accent: var(--hn-brand);
  --accent-ink: var(--hn-on-brand);
  --accent-soft: var(--hn-brand-soft);
  --amber: var(--hn-warn);
  --amber-soft: var(--hn-warn-soft);
  --ok: var(--hn-live);
  --ok-soft: var(--hn-live-soft);
  --bad: var(--hn-down);
  --bad-soft: var(--hn-down-soft);
  --f-display: var(--hn-f-sans);
  --f-body: var(--hn-f-sans);
  --f-mono: var(--hn-f-mono);
  --r: var(--hn-r);
  /* FT8 */
  --panel: var(--hn-surface);
  --soft: var(--hn-surface-2);
  --warn: var(--hn-warn);
  --gr: var(--hn-brand);
  --cq: var(--hn-live);
  --me: var(--hn-down);
}

/* ---------- shared frame and type ---------- */
.hn-legacy body { background: var(--hn-bg); color: var(--hn-ink); font-family: var(--hn-f-sans); }
.hn-legacy body > .wrap {
  box-sizing: content-box;
  max-width: var(--hn-maxw);
  margin-inline: auto;
  padding-left: var(--hn-gutter);
  padding-right: var(--hn-gutter-r);
  padding-top: 40px;
}
.hn-legacy body::before { display: none; }
.hn-legacy h1 {
  font-family: var(--hn-f-sans);
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}
.hn-legacy .lede { font-size: 16.5px; color: var(--hn-muted); max-width: 70ch; }
.hn-legacy body > .wrap > footer {
  max-width: 75ch;
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--hn-line);
  color: var(--hn-muted);
  font-size: 13.5px;
}
.hn-legacy body > .wrap > footer:empty { display: none; }

/* ---------- exams ---------- */
[data-hn-page='exetaseis'] header.top {
  padding-block: 0 24px;
  margin-bottom: 28px;
  align-items: flex-end;
  gap: 16px 24px;
}
[data-hn-page='exetaseis'] .brand { gap: 10px; }
[data-hn-page='exetaseis'] .brand b {
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
[data-hn-page='exetaseis'] .brand small { font-size: 16.5px; }

/* ---------- tools ---------- */
[data-hn-page='ergaleia'] header.top { padding-block: 0 20px; display: grid; gap: 10px; }
[data-hn-page='ergaleia'] nav.jump { top: calc(var(--hn-top-h) + env(safe-area-inset-top, 0px)); }

/* ---------- guides and emergency ---------- */
/* Same frame as every page; only running text keeps a readable measure. */
[data-hn-page='odigoi'] #app .list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
[data-hn-page='odigoi'] #app p,
[data-hn-page='ektakti-anagki'] .lede,
[data-hn-page='ektakti-anagki'] .live { max-width: 75ch; }
[data-hn-page='ektakti-anagki'] body > .wrap > h1 + .lede { margin-top: 10px; }
[data-hn-page='ektakti-anagki'] .chk { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; }

/* ---------- FT8 ---------- */
[data-hn-page='ft8'] body { font: 15px/1.5 var(--hn-f-sans); }
[data-hn-page='ft8'] .mono,
[data-hn-page='ft8'] .utc,
[data-hn-page='ft8'] td,
[data-hn-page='ft8'] .kpi b { font-family: var(--hn-f-mono); }
[data-hn-page='ft8'] body > header,
[data-hn-page='ft8'] body > nav.tabs,
[data-hn-page='ft8'] body > main,
[data-hn-page='ft8'] body > footer {
  max-width: none;
  margin-inline: max(var(--hn-gutter), (100% - var(--hn-maxw)) / 2);
  padding-inline: 0;
}
[data-hn-page='ft8'] body > header {
  position: static;
  background: transparent;
  border: 0;
  padding-block: 40px 16px;
  align-items: center;
  flex-wrap: wrap;
}
[data-hn-page='ft8'] body > header .brand span {
  color: var(--hn-ink);
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
[data-hn-page='ft8'] body > header .utc { font-size: 15px; color: var(--hn-muted); }
[data-hn-page='ft8'] body > nav.tabs { background: transparent; }
[data-hn-page='ft8'] body > main { padding-block: 20px 0; }
[data-hn-page='ft8'] body > footer { padding-block: 16px 0; }
/* FT8 has its own clock with seconds, which FT8 timing needs */
[data-hn-page='ft8'] .hn-clock { display: none; }
@media (max-width: 640px) {
  [data-hn-page='ft8'] body > header .brand span { display: inline; }
}