/* radiocompanion.app. Layout after shortwaveatlas.org (hero, how-it-works strip, story rows, "and also" grid), in Radio
   Companion's palette (app/src/palettes.ts in the app repo): navy by night, cool paper by day, sky blue for the brand, amber
   for "you". Text ≥ 7:1 in both themes. Sizes in rem, so the page follows the reader's text size.
   Light and dark: every colour is light-dark(<day>, <night>), picked by color-scheme. That follows the system, and the header's
   switch (a checkbox) flips it. /theme.js, the site's one script, remembers the pick from page to page; without it the
   switch still flips the page you're on. */
@font-face {
  font-family: "Plex"; src: url("/fonts/ibm-plex-sans-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex"; src: url("/fonts/ibm-plex-sans-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --bg: light-dark(#f3f6f9, #070d15); --card: light-dark(#ffffff, #0c1520);
  --fg: light-dark(#0b1622, #e2ebf5); --dim: light-dark(#2e3f52, #b1c4d8);
  --line: light-dark(#d3dbe4, #1e2c3c); --outline: light-dark(#6f8296, #5a7390);
  --link: light-dark(#0a4482, #8cc5ff); --accent: #6cb4ff; --on-accent: #000000;
  --good: light-dark(#0a5a4a, #4fc8a4); --you: light-dark(#b86a00, #ffb33f);
  --soft: light-dark(rgba(10, 68, 130, 0.07), rgba(108, 180, 255, 0.1));
  --glow: radial-gradient(ellipse 80% 55% at 70% 0%, light-dark(rgba(10, 68, 130, 0.07), rgba(108, 180, 255, 0.12)), transparent 70%),
    radial-gradient(ellipse 55% 45% at 5% 5%, light-dark(transparent, rgba(255, 179, 63, 0.06)), transparent 70%);
  /* The hop drawing */
  --earth-top: light-dark(#e3eaf1, #0e1c2c); --earth-line: light-dark(#6f8eb0, #5a87b5); --iono: light-dark(#8a9bad, #5a7390);
  --hop: light-dark(#2f7fd6, #6cb4ff); --hop-faint: light-dark(rgba(47, 127, 214, 0.25), rgba(108, 180, 255, 0.28));
  --glint: light-dark(#0a4482, #eaf4ff); --tx: light-dark(#0a4482, #d4e8ff); --star: light-dark(transparent, rgba(226, 235, 245, 0.5));
  --gutter: 16px; --max: 70rem; --read: 42rem; --radius: 14px;
}
@media (prefers-contrast: more) {
  :root {
    --fg: light-dark(#0b1622, #ffffff); --dim: light-dark(#1a2836, #d0dce8); --line: light-dark(#8a9bad, #3a4f66);
    --outline: light-dark(#45576b, #8aa3bd); --link: light-dark(#08386a, #8cc5ff);
  }
}
/* The switch: checked = the other theme from the system's. <html data-theme> is the remembered theme, which theme.js sets
   until the switch exists and then hands over to it. */
@media (prefers-color-scheme: dark) { :root:is(:has(#theme:checked), [data-theme="light"]) { color-scheme: light; } }
@media (prefers-color-scheme: light) { :root:is(:has(#theme:checked), [data-theme="dark"]) { color-scheme: dark; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background-color: var(--bg); background-image: var(--glow); background-repeat: no-repeat; color: var(--fg);
  font: 400 1.125rem/1.6 "Plex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 0.15em; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.4em; overflow-wrap: break-word; text-wrap: balance; }
strong { font-weight: 600; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 8px; z-index: 10; background: var(--card); padding: 8px 12px; border-radius: 8px; }

/* Small capitals over a heading */
.kicker {
  display: inline-block; margin-bottom: 14px; color: var(--link);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.14em;
}

/* Buttons */
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0.5rem 1.4rem; border-radius: 999px;
  border: 1px solid var(--outline); color: var(--fg); font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none;
}
.btn:hover { border-color: var(--fg); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { border-color: var(--fg); }
/* Apple's App Store badge, used as Apple draws it (public/badges/): black in both themes, its grey edge shows on navy.
   Sized in rem so it follows the system's text size; 3rem matches a .btn (Apple asks for 40px at least). */
.badge { display: inline-flex; align-items: center; border-radius: 9px; }
.badge img { display: block; height: 3rem; width: auto; }

/* Header */
.top { border-bottom: 1px solid var(--line); }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; min-height: 64px; padding-block: 8px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 600; font-size: 1.125rem; padding-block: 8px; }
.brand img { width: 28px; height: 28px; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.nav a { color: var(--dim); text-decoration: none; font-size: 1rem; padding: 10px 0; }
.nav a:hover { color: var(--fg); text-decoration: underline; }

/* The theme switch: a checkbox inside its label. It shows the theme you'd switch to (sun by night, moon by day). Its name
   follows the system only ("Light theme" when the system is dark), so "on" always means what it says. */
.theme {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--outline); color: var(--dim); cursor: pointer;
}
.theme:hover { color: var(--fg); border-color: var(--fg); }
.theme:has(input:focus-visible) { outline: 3px solid var(--link); outline-offset: 3px; }
.theme input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.theme svg { width: 20px; height: 20px; pointer-events: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.theme .sun, .theme .n-light { display: none; }
:root:is(:has(#theme:checked), [data-theme="dark"]) .theme .moon { display: none; }
:root:is(:has(#theme:checked), [data-theme="dark"]) .theme .sun { display: block; }
@media (prefers-color-scheme: dark) {
  .theme .moon, .theme .n-dark { display: none; }
  .theme .sun, .theme .n-light { display: block; }
  :root:is(:has(#theme:checked), [data-theme="light"]) .theme .sun { display: none; }
  :root:is(:has(#theme:checked), [data-theme="light"]) .theme .moon { display: block; }
}
@supports not selector(:has(*)) { .theme { display: none; } } /* without :has() it couldn't flip anything */

/* Hero */
.hero { padding-block: 56px 0; text-align: center; }
.hero h1 { font-size: clamp(2.25rem, 6.5vw, 4.25rem); max-width: 15em; margin-inline: auto; }
.lede { text-wrap: pretty; max-width: 40rem; margin: 0 auto 28px; color: var(--dim); font-size: clamp(1.125rem, 2.2vw, 1.25rem); }
.store { margin: 0 0 16px; }
.soon {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 6px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); font-size: 1rem; font-weight: 600;
}
.soon::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--you); box-shadow: 0 0 0 4px var(--soft); }
.facts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 24px 0 0; padding: 0; list-style: none;
  color: var(--dim); font-size: 0.9375rem;
}
.facts .ok, .extras .ok h3 { color: var(--good); }

/* The hop over the Earth, drawn in the page's colours (decorative) */
.sky { margin: 40px calc(var(--gutter) * -1) 0; }
.sky svg { width: 100%; }
.sky .earth { fill: url(#earth); }
.sky .earth-top { stop-color: var(--earth-top); }
.sky .earth-bottom { stop-color: var(--bg); }
.sky .ground { fill: none; stroke: var(--earth-line); stroke-width: 9; }
.sky .iono { fill: none; stroke: var(--iono); stroke-width: 4; stroke-dasharray: 18 14; stroke-linecap: round; }
.sky .far { fill: none; stroke: var(--hop-faint); stroke-width: 5; stroke-linecap: round; }
.sky .glow { fill: none; stroke: var(--hop-faint); stroke-width: 26; stroke-linecap: round; }
.sky .hop { fill: none; stroke: var(--hop); stroke-width: 10; stroke-linecap: round; }
.sky .tx { fill: var(--tx); }
.sky .you { fill: var(--you); }
.sky .ring { fill: none; stroke: var(--you); stroke-width: 5; }
.sky .star { fill: var(--star); }
/* The signal, as in the app's launch mark (app/src/LaunchMark.tsx): a bright dash crosses the hop in 0.8 s, "you" rings,
   then it rests and goes again every 6 s. Still with Reduce Motion: the drawing stays as it is. */
.sky .glint, .sky .pulse { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .sky .glint {
    display: inline; fill: none; stroke: var(--glint); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 0.14 2;
    stroke-dashoffset: 0.14; animation: sky-glint 6s 0.6s infinite;
  }
  .sky .pulse {
    display: inline; fill: none; stroke: var(--you); stroke-width: 5; vector-effect: non-scaling-stroke;
    transform-box: fill-box; transform-origin: center; opacity: 0; animation: sky-pulse 6s 0.6s infinite;
  }
}
@keyframes sky-glint {
  0% { stroke-dashoffset: 0.14; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); }
  13.33%, 100% { stroke-dashoffset: -1; }
}
@keyframes sky-pulse {
  0%, 11.33% { transform: scale(1); opacity: 0; }
  11.34% { transform: scale(1); opacity: 0.8; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  18.83%, 100% { transform: scale(3); opacity: 0; }
}

.section { padding-block: 80px 0; }
.section > h2, .closing h2 { font-size: clamp(2rem, 4.5vw, 3rem); text-align: center; margin-bottom: 36px; }

/* How it works: three numbered steps in a strip */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; border-block: 1px solid var(--line); }
.strip li { display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 6px 16px; padding: 24px 24px 24px 0; }
.strip li + li { border-left: 1px solid var(--line); padding-left: 24px; }
.strip .n { grid-row: span 2; font-size: 2.5rem; font-weight: 600; line-height: 1; color: var(--link); }
.strip h3 { font-size: 1.375rem; margin: 0; }
.strip p { margin: 0; color: var(--dim); font-size: 1rem; }

/* Story rows: the heading and its words beside the details */
.rows { display: grid; }
.row { display: grid; grid-template-columns: 5fr 6fr; gap: 12px 56px; padding-block: 40px; border-top: 1px solid var(--line); }
.row:last-child { border-bottom: 1px solid var(--line); }
.row h3 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
.row p { margin: 0; color: var(--dim); }
.row .ticks { align-self: end; }
.ticks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 22px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* A row with a screenshot: the phone beside the words, sides alternating */
.row.has-media { grid-template-columns: 5fr 4fr; grid-template-areas: "text media" "ticks media"; row-gap: 24px; }
.row.has-media > div { grid-area: text; align-self: end; } /* the words and the list meet in the middle, beside the phone */
.row.has-media .ticks { grid-area: ticks; align-self: start; }
.row.has-media .phone { grid-area: media; }
.row.has-media:nth-child(even) { grid-template-columns: 4fr 5fr; grid-template-areas: "media text" "media ticks"; }
/* A handset around the capture: dark in both themes, like the device */
.phone {
  justify-self: center; width: min(100%, 300px); margin: 0; padding: 9px; border-radius: 42px;
  background: #02060c; border: 1px solid var(--outline); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.phone img { width: 100%; border-radius: 33px; }

/* And also: the smaller features */
.extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 40px; margin: 0; padding: 0; list-style: none; }
.extras li { padding: 18px 0; border-top: 1px solid var(--line); }
.extras h3 { margin: 0 0 6px; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--link); }
.extras p { margin: 0; color: var(--dim); font-size: 1rem; }

/* For broadcasters */
.note { max-width: var(--read); margin: 0 auto; padding: 20px 24px; border-left: 4px solid var(--you); border-radius: 0 var(--radius) var(--radius) 0; background: var(--card); }
.note p { margin: 0; }

/* Closing */
.closing { text-align: center; padding-block: 88px 0; }
.closing p { max-width: 36rem; margin: 0 auto 24px; color: var(--dim); }

@media (max-width: 52rem) {
  .row { grid-template-columns: 1fr; gap: 20px; }
  .row.has-media, .row.has-media:nth-child(even) { grid-template-columns: 1fr; grid-template-areas: "text" "media" "ticks"; }
}
@media (max-width: 46rem) {
  .nav .sec { display: none; } /* on a phone the page itself is the menu; the languages stay */
  .strip { grid-template-columns: 1fr; }
  .strip li { padding: 20px 0; }
  .strip li + li { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .hero { padding-top: 40px; }
  .section { padding-top: 64px; }
}

/* New to shortwave: the home teaser's link under its grid */
.extras + .ctas { margin-top: 32px; }

/* What is shortwave (/shortwave): a long read for newcomers, in the reading column */
.nav a[aria-current="page"] { color: var(--fg); }
.learn .hero { padding-bottom: 8px; }
.toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; max-width: 44rem; margin: 0 auto; padding: 0; list-style: none; font-size: 1rem; }
.toc a { display: inline-block; padding: 10px 0; }
.part { max-width: var(--read); padding-block: 64px 0; }
.part h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 20px; }
.part p { margin: 0 0 16px; }
.part > .ticks { margin-bottom: 16px; }
.part .extras { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.part .fine { color: var(--dim); font-size: 0.9375rem; }

/* Day and night, side by side: the hop drawing's look in two small panels (decorative; the words carry it) */
.diagram { margin: 28px 0; }
.diagram .panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.diagram .panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.diagram svg { width: 100%; }
.diagram .panel p { margin: 0; padding: 4px 16px 16px; color: var(--dim); font-size: 1rem; }
.diagram .panel strong { display: block; color: var(--fg); }
.diagram .earth { fill: var(--earth-top); }
.diagram .ground { fill: none; stroke: var(--earth-line); stroke-width: 4; }
.diagram .f { fill: none; stroke: var(--iono); stroke-width: 3; stroke-dasharray: 10 8; stroke-linecap: round; }
.diagram .d { fill: var(--hop-faint); }
.diagram .high, .diagram .low { fill: none; stroke: var(--hop); stroke-width: 5; stroke-linecap: round; }
.diagram .low { stroke-dasharray: 12 10; }
.diagram .tx { fill: var(--tx); }
.diagram .you { fill: var(--you); }
.diagram .star { fill: var(--star); }
.diagram .sun-i { color: var(--you); }
.diagram .moon-i { color: var(--tx); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--dim); font-size: 1rem; }
.legend li { display: flex; align-items: center; gap: 10px; }
.legend .sw { flex: none; width: 14px; height: 14px; border-radius: 50%; }
.legend .sw.tx { background: var(--tx); }
.legend .sw.you { background: var(--you); }
.legend .sw.high, .legend .sw.low { width: 32px; height: 0; border-radius: 0; border-top: 4px solid var(--hop); }
.legend .sw.low { border-top-style: dashed; }

/* A short history */
.timeline { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 22px 24px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -8px; top: 0.4em; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--link);
}
.timeline .when { display: block; color: var(--link); font-weight: 600; }
.timeline p { margin: 0; }

/* Your first night: numbered steps, and the bands to start on */
.steps { display: grid; gap: 14px; margin: 0 0 32px; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-left: 46px; counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 1.75em; height: 1.75em; border-radius: 50%;
  border: 1px solid var(--outline); color: var(--link); font-weight: 600; font-size: 0.9375rem; line-height: 1.65em; text-align: center;
}
.bands { width: 100%; margin: 0 0 12px; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums; }
.bands caption { text-align: left; font-weight: 600; padding-bottom: 8px; }
.bands th, .bands td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); }
.bands thead th { color: var(--dim); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; }
.bands tbody th, .bands td:nth-child(2) { white-space: nowrap; }
.bands td:last-child { color: var(--dim); padding-right: 0; }

/* Words you'll hear */
.glossary { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: 0 24px; margin: 0; }
.glossary dt, .glossary dd { padding: 12px 0; border-top: 1px solid var(--line); }
.glossary dt { font-weight: 600; max-width: 12rem; }
.glossary dd { margin: 0; color: var(--dim); }

@media (max-width: 46rem) {
  .diagram .panels { grid-template-columns: 1fr; }
  .glossary { grid-template-columns: 1fr; }
  .glossary dt { max-width: none; }
  .glossary dd { border-top: 0; padding-top: 0; }
  .part { padding-top: 48px; }
}

/* Reading pages: privacy, terms, not found */
.doc { max-width: var(--read); padding-block: 8px 0; }
.doc h1 { font-size: 2rem; line-height: 1.2; margin: 32px 0 8px; overflow-wrap: anywhere; }
.doc h2 { font-size: 1.3rem; line-height: 1.3; margin: 36px 0 8px; }
.doc p, .doc ul { margin: 0 0 16px; }
.doc ul { padding-left: 1.4em; }
.doc ul ul { margin: 6px 0 0; }
.doc li { margin: 0 0 6px; }
.doc .meta { color: var(--dim); }
.lost { text-align: center; padding-block: 96px 0; }
.lost h1 { font-size: clamp(2.25rem, 7vw, 4rem); }
.lost p { color: var(--dim); }

/* Footer */
.foot { border-top: 1px solid var(--line); margin-top: 96px; color: var(--dim); font-size: 1rem; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px; padding-block: 20px 28px; }
.foot p { margin: 0; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
.foot nav a { display: inline-block; padding: 10px 0; }
.foot .credit { flex-basis: 100%; font-size: 0.875rem; }

/* Print (mostly privacy and terms): ink on paper, no chrome, the addresses written out */
@media print {
  :root, :root:is(:has(#theme:checked), [data-theme]) { color-scheme: light; }
  body { background: #ffffff; color: #000000; font-size: 11pt; }
  .skip, .nav, .foot nav, .sky, .ctas, .store, .soon { display: none; }
  .top, .foot { border: 0; }
  .foot { margin-top: 24pt; }
  a { color: inherit; }
  .doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.9em; }
  h1, h2, h3 { break-after: avoid; }
  li, .row, .extras li, .diagram .panel, .bands tr { break-inside: avoid; }
  .toc { display: none; }
}