/* Morse Code Translator
   Square-cornered radio-dial design: warm dark palette with one amber accent, telegram-paper light theme.
   Hierarchy comes from borders, spacing, weight and colour; no rounded UI, no shadows.
   The only round shapes are content: Morse dots.
   Mobile first: each section's breakpoints sit right after its base rules, smallest first;
   forced-colours and print rules come last.
   Fonts: IBM Plex Sans (400, 600, 700) and IBM Plex Mono (500), self-hosted from @fontsource 5.3.0,
   latin subset, SIL OFL (licences in fonts/). */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

/* The Plex latin subsets have no arrows; draw → (as in "Text → Morse") from Arial instead of Courier New */
@font-face {
  font-family: "Arrow Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  unicode-range: U+2190-2193;
}

/* Metric-matched fallbacks (measured against Plex in Chromium) so the swap barely moves text */
@font-face {
  font-family: "IBM Plex Sans Fallback";
  font-weight: 400;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 99.8%;
  ascent-override: 102.7%;
  descent-override: 27.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "IBM Plex Sans Fallback";
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
  size-adjust: 95.9%;
  ascent-override: 107.5%;
  descent-override: 29.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "IBM Plex Sans Fallback";
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
  size-adjust: 96.8%;
  ascent-override: 106.4%;
  descent-override: 28.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "IBM Plex Mono Fallback";
  font-weight: 500;
  src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono");
  size-adjust: 100%;
  ascent-override: 102.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  /* Dial (dark) */
  --bg: #17130e;
  --panel: #201a13;
  --well: #110e0a;
  --ink: #f1e7d5;
  --muted: #b5a68e;
  --line: #3d3326;
  --line-strong: #7f6e57;
  --accent: #f0a63a;        /* amber: fills, slider needle */
  --accent-ink: #f0a63a;    /* amber used as text or thin marks */
  --on-accent: #1b140c;

  --sans: "IBM Plex Sans", "IBM Plex Sans Fallback", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Arrow Fallback", "IBM Plex Mono Fallback", "Courier New", monospace;

  /* Type scale */
  --text-xs: 0.75rem;     /* labels, table heads, small caps */
  --text-sm: 0.875rem;    /* buttons, notices, captions, footer */
  --text-base: 1.0625rem; /* body */
  --text-md: 1.125rem;    /* codes in tables, Morse marks on phones */
  --text-lg: 1.25rem;     /* H2 on phones, Morse marks on wider screens */
  --text-xl: 1.625rem;    /* H1 on phones, H2, text result */
  --text-2xl: 2.75rem;    /* H1 on wider screens */

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  /* Vertical rhythm: large space BEFORE a section, tight inside it.
     --section-gap is the only large gap: above every top-level section, ad slot, divider and the footer.
     48px on phones and tablets, 64px at 1024px, 80px from 1280px. */
  --section-gap: clamp(var(--space-7), 6.25vw, var(--space-9));

  /* Page layout, same values and names as Gamedev Quick Tools (redesign-toffee, style.css:36, :61, :76-79):
     a content column capped at --content-max with --gutter side padding (18px at 700px and below);
     from 1700px the two outer columns each keep --rail-width + --rail-gap free for side rail ads. */
  --content-max: 1280px;
  --rail-width: 160px;
  --rail-gap: 50px;
  --gutter: 32px;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    /* Telegram paper (light) */
    --bg: #f3ecdf;
    --panel: #fbf7ef;
    --well: #fffdf8;
    --ink: #241b12;
    --muted: #66573f;
    --line: #d9cdb8;
    --line-strong: #8c7a60;
    --accent: #e39a2d;
    --accent-ink: #8a4f00;
    --on-accent: #241b12;
    color-scheme: light;
  }
}

@media (max-width: 700px) { :root { --gutter: 18px; } }

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

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  /* Page grid: [side area] [content] [side area] */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--content-max)) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
}
body > .site-header, body > main, body > .site-footer {
  grid-column: 2;
  min-width: 0;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
@media (min-width: 1700px) {
  body {
    grid-template-columns:
      minmax(calc(var(--rail-width) + var(--rail-gap)), 1fr)
      minmax(0, var(--content-max))
      minmax(calc(var(--rail-width) + var(--rail-gap)), 1fr);
  }
}

a { color: var(--accent-ink); text-underline-offset: 0.15em; }
a:hover, a:active { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

code, .code { font-family: var(--mono); font-weight: 500; }
code { font-size: 0.94em; letter-spacing: 0.04em; }
.nowrap { white-space: nowrap; }
::placeholder { color: var(--muted); opacity: 1; }

/* Native controls: no browser rounding or default styling */
button, input, textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* Square scrollbars (Chromium/Safari); Firefox gets matching colours */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid var(--bg); border-radius: 0; }
::-webkit-scrollbar-corner { background: var(--bg); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--line-strong) var(--bg); }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Header ---------- */
.site-header .wrap {
  height: 45px; /* 44px content + 1px rule */
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.site-name {
  display: inline-flex;
  align-items: center;
  align-self: stretch; /* full 44px header height: a 44px tap target where it is a link */
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
/* A dot and a dash: the letter A */
.key-mark { display: inline-flex; gap: 3px; }
.key-mark::before, .key-mark::after { content: ""; height: 6px; background: var(--accent); }
.key-mark::before { width: 6px; border-radius: 50%; }   /* Morse dot: content, stays round */
.key-mark::after { width: 18px; }

/* ---------- Headings ---------- */
h1 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
}
h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
}
h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (min-width: 600px) {
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
}

/* Heading beside its short intro on wider screens, so the line runs to the right edge */
.page-head { margin: var(--space-3) 0; }
.intro { margin: var(--space-1) 0 0; color: var(--muted); line-height: 1.45; }
.section-head { margin-bottom: var(--space-4); }
.section-head h2 { margin: 0; }
.lead { margin: var(--space-2) 0 0; color: var(--muted); }

@media (min-width: 760px) {
  .page-head, .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    column-gap: var(--space-7);
    align-items: end;
  }
  .page-head { margin: var(--space-6) 0 var(--space-4); }
  .intro, .lead { margin: 0; }
}

/* ---------- Translator ---------- */
.translator {
  padding: var(--space-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-strong);
}

/* Small uppercase labels share one style */
.field-label, .speed label, .code-table thead th {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.field-label { display: block; margin-bottom: var(--space-2); }

textarea {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--text-base);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--well);
  border: 1px solid var(--line-strong);
  resize: vertical;
  overflow-wrap: anywhere;
}

.counter {
  margin: var(--space-1) 0 0;
  font-family: var(--mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
}

.direction-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-2);
}
.direction {
  flex: 1;
  margin: 0;
  font-family: var(--mono);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* The result box: the visual focus of the tool */
.output {
  min-height: 5rem;
  padding: var(--space-2) var(--space-3);
  background: var(--well);
  border: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1.6;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Morse drawn as marks, to scale with 1 unit = 0.3em: dot 1 unit, dash 3, 1 unit inside a letter,
   3 between letters (0.6em space + 0.3em word-spacing) and about 7 around the word slash.
   The marks use a smaller font size than text output: dot about 5–6px, dash about 16–18px. */
.output.is-morse { font-size: var(--text-md); letter-spacing: 0; word-spacing: 0.3em; line-height: 1.8; }
.output .g, .output .gw { white-space: nowrap; } /* .gw = letter group + its word slash */
.output i, .output b {
  display: inline-block;
  vertical-align: middle;
  width: 0.3em;
  height: 0.3em;
  margin-right: 0.3em;
  overflow: hidden;
  background: var(--ink);
  color: transparent;
}
.output i { border-radius: 50%; }   /* Morse dot: content, stays round */
.output b { width: 0.9em; }         /* Morse dash: square ends */
.output .g > :last-child { margin-right: 0; }
.output .w {
  display: inline-block;
  vertical-align: middle;
  width: 2px;
  height: 0.9em;
  margin: 0 0.1em;
  overflow: hidden;
  background: var(--muted);
  color: transparent;
  transform: skewX(-18deg);
}
.output i::selection, .output b::selection, .output .w::selection { color: transparent; }

.notice {
  margin: var(--space-3) 0 0;
  font-family: var(--mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
  overflow-wrap: anywhere;
}
.notice:empty { margin: 0; }

/* Controls: one row on wide screens, two rows (Play + Speed, Copy + Clear) on phones */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
}

/* Buttons: hover = amber border, active = 2px inset ink ring, focus = amber outline, disabled = dashed */
.btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-4);
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--accent-ink); }
.btn:active:not(:disabled) { box-shadow: inset 0 0 0 2px var(--ink); }
.btn-primary { color: var(--on-accent); background: var(--accent); border: 2px solid var(--accent); }
.btn-primary:hover:not(:disabled) { border-color: var(--ink); }
.btn-quiet { padding: 0 var(--space-3); border-color: transparent; color: var(--accent-ink); }
.btn-quiet:hover:not(:disabled) { border-color: var(--line-strong); }
.btn-fixed { min-width: 6em; }
.btn:disabled { color: var(--muted); background: transparent; border: 1px dashed var(--line); cursor: not-allowed; }

/* Speed: a tuning scale with a square amber needle, a tick every 5 WPM */
.speed {
  flex: 1 1 160px;
  max-width: 460px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3);
}
.speed label { grid-column: 1; line-height: 1.2; }
/* Play length at the current speed, on the label row above the WPM value */
.play-length {
  grid-column: 2;
  justify-self: end;
  font-family: var(--mono);
  font-size: var(--text-xs);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.speed input[type="range"] { grid-column: 1; }
.wpm-value {
  min-width: 4.5em;
  text-align: right;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.speed input[type="range"] {
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.speed input[type="range"]::-webkit-slider-runnable-track {
  height: 20px;
  border-radius: 0;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px calc(100% / 7)) 0 0 / calc(100% - 1px) 100% no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 100% 0 / 1px 100% no-repeat;
}
.speed input[type="range"]::-moz-range-track {
  height: 20px;
  border-radius: 0;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px calc(100% / 7)) 0 0 / calc(100% - 1px) 100% no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 100% 0 / 1px 100% no-repeat;
}
.speed input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 30px;
  margin-top: -5px;
  border: 0;
  border-radius: 0;
  background: var(--accent-ink);
}
.speed input[type="range"]::-moz-range-thumb {
  width: 6px;
  height: 30px;
  border: 0;
  border-radius: 0;
  background: var(--accent-ink);
}
.speed input[type="range"]::-moz-range-progress { background: transparent; }

@media (min-width: 600px) {
  .translator { padding: var(--space-4) var(--space-5) var(--space-5); }
  .output.is-morse { font-size: var(--text-lg); }
}

/* Input left, result right; controls along the bottom */
@media (min-width: 900px) {
  .translator {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    grid-template-areas:
      "input dir"
      "input out"
      "input notice"
      "ctl   ctl";
    grid-template-rows: auto 1fr auto auto;
    column-gap: var(--space-5);
  }
  .input-side { grid-area: input; display: flex; flex-direction: column; }
  .input-side textarea { flex: 1; min-height: 11rem; }
  .input-side .field-label { line-height: 44px; }
  .direction-row { grid-area: dir; margin-top: 0; }
  .output { grid-area: out; min-height: 9rem; }
  .notice { grid-area: notice; }
  .controls { grid-area: ctl; }
}

/* ---------- Ad slots: fixed height, no layout shift ---------- */
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 280px;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Space between top-level blocks ----------
   Every section and ad slot in main starts with one --section-gap (margin-top only). The tool follows the page
   heading directly, so it keeps the small page-head gap instead. */
main > section, main > aside { margin-top: var(--section-gap); }
main > .page-head + .translator { margin-top: 0; }

/* ---------- Alphabet: three tables side by side on wide screens ---------- */
.code-tables { display: grid; gap: var(--space-5) var(--space-7); }
.code-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
/* 12px rows; 8px side padding on phones (six columns must fit 320px), 16px from 600px */
.code-table th, .code-table td { padding: var(--space-2) var(--space-3) var(--space-2) 0; text-align: left; border-bottom: 1px solid var(--line); }
.code-table thead th { border-bottom: 2px solid var(--line-strong); letter-spacing: 0.03em; }
.code-table tbody th { width: 1.6em; font-family: var(--mono); font-weight: 500; font-size: var(--text-base); color: var(--ink); }
.code-table .code { font-size: var(--text-base); letter-spacing: 0.06em; white-space: nowrap; }
.code-table td:not(.code) { font-size: var(--text-sm); color: var(--muted); }

@media (min-width: 600px) {
  .code-table th, .code-table td { padding-right: var(--space-4); }
  .code-table thead th { letter-spacing: 0.09em; }
  .code-table .code { font-size: var(--text-md); letter-spacing: 0.18em; }
}

@media (min-width: 1000px) {
  /* Letters across the full width, digits and punctuation side by side below it */
  .code-tables { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .letters-block { grid-column: 1 / -1; }
  /* Each column pair after the first starts with space and a rule, so a code never runs into the next letter */
  .code-table.pairs tbody td + th, .code-table.pairs thead th:nth-child(odd):not(:first-child) { padding-left: var(--space-4); border-left: 1px solid var(--line); }
}
@media (min-width: 1280px) {
  /* All three tables side by side once the column is at its full 1216px */
  .code-tables { grid-template-columns: 1.7fr 1fr 1.1fr; }
  .letters-block { grid-column: auto; }
}

/* ---------- How to read: text beside a to-scale timing diagram ---------- */
.timing p { margin: 0 0 var(--space-4); }
/* The example sits on its own line so no sentence punctuation follows a Morse code */
.timing code.example { display: block; margin-top: var(--space-2); }
.timing-figure { margin: 0; }
.timing-figure svg { display: block; width: 100%; height: auto; }
.timing-figure .signal rect, .timing-figure .signal ellipse { fill: var(--ink); }
.timing-figure .tick { fill: var(--line-strong); }
/* The SVG scales with its width (viewBox 640 wide, 16 units = 1 Morse unit), so label sizes are set
   in viewBox units per layout width to render at 12 CSS px or more on phones and about 13px at full width.
   Below 760px the figure is full width; from 760px it sits beside the text. */
.timing-figure text { font-family: var(--mono); font-size: 24px; font-variant-numeric: tabular-nums; text-anchor: middle; }
.timing-figure .letter-label text { fill: var(--muted); }
.timing-figure .gap path { fill: none; stroke: var(--accent-ink); stroke-width: 1.5; }
.timing-figure .gap text { fill: var(--accent-ink); }
.timing-figure figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--muted); }

@media (min-width: 480px) { .timing-figure text { font-size: 18px; } }
@media (min-width: 600px) { .timing-figure text { font-size: 15px; } }
@media (min-width: 760px) {
  .timing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-7); align-items: start; }
  .timing p { margin: 0; }
  .timing-figure text { font-size: 22px; }
}
@media (min-width: 900px) { .timing-figure text { font-size: 18px; } }
@media (min-width: 1100px) { .timing-figure text { font-size: 15px; } }
@media (min-width: 1280px) { .timing-figure text { font-size: 13px; } }

/* ---------- Phrases: one full-width table; on phones each row stacks (phrase + Load, then the code) ---------- */
.phrase-table { width: 100%; border-collapse: collapse; }
.phrase-table th, .phrase-table td { padding: var(--space-2) var(--space-4) var(--space-2) 0; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.phrase-table thead th {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--line-strong);
}
.phrase-text { font-weight: 600; white-space: nowrap; }
.phrase-code code { font-size: var(--text-md); letter-spacing: 0.12em; }
.phrase-table .phrase-action { padding-right: 0; text-align: right; width: 1%; }
.phrase-load { min-width: 6em; }

@media (max-width: 599px) {
  .phrase-table thead { display: none; }
  .phrase-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--line);
  }
  .phrase-table tbody tr:first-child { border-top: 2px solid var(--line-strong); }
  .phrase-table td { display: block; padding: 0; border: 0; }
  .phrase-table .phrase-text { grid-column: 1; grid-row: 1; }
  .phrase-table .phrase-action { grid-column: 2; grid-row: 1 / span 2; width: auto; }
  .phrase-table .phrase-code { grid-column: 1; grid-row: 2; }
  .phrase-code code { font-size: var(--text-base); letter-spacing: 0.06em; }
}

/* ---------- FAQ: heading above one list of full-width ruled rows ---------- */
.faq h2 { margin-bottom: var(--space-3); }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 44px;
  padding: var(--space-3) 0;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary h3 {
  flex: 1;
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
/* + when closed, − when open (shape changes, not just colour) */
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--accent-ink), var(--accent-ink)) center / 14px 2px no-repeat,
    linear-gradient(var(--accent-ink), var(--accent-ink)) center / 2px 14px no-repeat;
}
.faq details[open] summary::after {
  background: linear-gradient(var(--accent-ink), var(--accent-ink)) center / 14px 2px no-repeat;
}
.faq summary:hover h3, .faq summary:active h3 { color: var(--accent-ink); }
.faq summary:focus-visible { outline-offset: -2px; }
.faq details[open] summary { padding-bottom: var(--space-2); }
.faq details p { margin: 0 var(--space-6) var(--space-4) 0; }

/* ---------- Footer ---------- */
.site-footer { margin-top: var(--section-gap); font-size: var(--text-sm); color: var(--muted); }
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-5);
  padding: var(--space-5) 0 var(--space-6);
  border-top: 1px solid var(--line);
}
.site-footer p { margin: 0; line-height: 44px; }
/* Footer links are 44px-tall tap targets */
.site-footer a { display: inline-block; min-height: 44px; }

/* ---------- Privacy page: one full-width column, each topic under a ruled heading ---------- */
.prose h1 { margin: var(--space-6) 0 var(--space-3); }
.prose h1:has(+ .updated) { margin-bottom: var(--space-2); }
.updated { margin: 0; font-size: var(--text-sm); color: var(--muted); }
/* The policy is one section: its first topic opens after the single section gap (main > section rule),
   every later topic is a subsection 32px below the previous one, with no divider */
.prose > section + section { margin-top: var(--space-6); }
/* Topic headings use the subheading size: bold, smaller than the H1, 8px above their text */
.prose section h2 { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: 700; letter-spacing: 0; }
.prose p { margin: 0; }
.prose p + p { margin-top: 0.75em; }
.prose ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.prose ul + p { margin-top: var(--space-2); }
.prose li + li { margin-top: var(--space-1); }

/* ---------- Forced colours (Windows high contrast) ----------
   Backgrounds and gradients are dropped in this mode, so: Morse shows its real characters,
   the slider, the FAQ +/− and the timing diagram are drawn in system colours. */
@media (forced-colors: active) {
  .output i, .output b, .output .w {
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    background: none;
    color: CanvasText;
    transform: none;
    vertical-align: baseline;
    font-style: normal;
    font-weight: inherit;
  }
  .output i::selection, .output b::selection, .output .w::selection { color: HighlightText; background: Highlight; }

  .speed input[type="range"] { forced-color-adjust: none; }
  .speed input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: CanvasText; }
  .speed input[type="range"]::-moz-range-track { height: 2px; background: CanvasText; }
  .speed input[type="range"]::-webkit-slider-thumb { margin-top: -14px; background: Highlight; border: 1px solid CanvasText; }
  .speed input[type="range"]::-moz-range-thumb { background: Highlight; border: 1px solid CanvasText; }

  .faq summary::after {
    forced-color-adjust: none;
    background:
      linear-gradient(CanvasText, CanvasText) center / 14px 2px no-repeat,
      linear-gradient(CanvasText, CanvasText) center / 2px 14px no-repeat;
  }
  .faq details[open] summary::after {
    background: linear-gradient(CanvasText, CanvasText) center / 14px 2px no-repeat;
  }

  .timing-figure svg { forced-color-adjust: none; }
  .timing-figure .signal rect, .timing-figure .signal ellipse, .timing-figure .tick,
  .timing-figure .letter-label text, .timing-figure .gap text { fill: CanvasText; }
  .timing-figure .gap path { stroke: CanvasText; }
}

/* ---------- Print: black on white, no ads, header, footer or controls ---------- */
@media print {
  :root {
    --bg: #fff;
    --panel: #fff;
    --well: #fff;
    --ink: #000;
    --muted: #333;
    --line: #999;
    --line-strong: #000;
    --accent: #000;
    --accent-ink: #000;
    --on-accent: #fff;
    color-scheme: light;
  }
  .site-header, .site-footer, .ad-slot, .controls, .direction-row .btn, .counter, .faq summary::after, .phrase-action, .phrase-table thead th:last-child { display: none; }
  .translator:has(.output:empty) { display: none; }
  .output i, .output b, .output .w { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; }
  h2, h3 { break-after: avoid; }
  tr, figure { break-inside: avoid; }
}