/* dxtools.russianbards.com
 *
 * An instrument, not a brochure. The page answers one question -- what is on
 * the air that I still need -- so the needed rows are the only loud thing and
 * everything else stays deliberately quiet.
 *
 * Colour carries priority, not decoration. Monospace appears only in columns
 * you read downward (callsign, frequency, band), where character alignment is
 * doing real work.
 */

:root {
  color-scheme: light dark;

  /* Cool paper, like a logbook page -- not warm cream. */
  --bg: #f1f3f1;
  --surface: #ffffff;
  --surface-sunk: #e8ebe8;
  --border: #d3d8d3;
  --border-strong: #b6bdb6;
  --ink: #1b2024;
  --ink-dim: #5f676d;
  --ink-faint: #868e94;

  /* Amber: the dial-illumination accent. Used sparingly -- counts, current
     nav item, focus rings. Never as a background wash. */
  --accent: #a35d00;
  --accent-quiet: #f3e4cc;

  /* Priority ramp: heat means chase it. */
  --p1: #a82b16;   /* never worked          */
  --p2: #8a5300;   /* worked, not confirmed */
  --p3: #5c6112;   /* one band + one mode   */
  --p4: #3d6340;   /* one band only         */
  --p5: #6b7076;   /* confirmed multiband   */

  --warn: #8a5300;
  --focus: #a35d00;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Rack-equipment slate, not a tinted black. */
    --bg: #12161b;
    --surface: #181d23;
    --surface-sunk: #10141a;
    --border: #2b323a;
    --border-strong: #3d4650;
    --ink: #e4e8ea;
    --ink-dim: #99a3ab;
    --ink-faint: #6f7a83;

    --accent: #f0a83c;
    --accent-quiet: #2e2517;

    --p1: #ff7f63;
    --p2: #e5a63f;
    --p3: #bfc45e;
    --p4: #7fbe84;
    --p5: #8b939b;

    --warn: #e5a63f;
    --focus: #f0a83c;
  }
}

:root[data-theme="dark"] {
  --bg: #12161b;
  --surface: #181d23;
  --surface-sunk: #10141a;
  --border: #2b323a;
  --border-strong: #3d4650;
  --ink: #e4e8ea;
  --ink-dim: #99a3ab;
  --ink-faint: #6f7a83;
  --accent: #f0a83c;
  --accent-quiet: #2e2517;
  --p1: #ff7f63;
  --p2: #e5a63f;
  --p3: #bfc45e;
  --p4: #7fbe84;
  --p5: #8b939b;
  --warn: #e5a63f;
  --focus: #f0a83c;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Data columns you read downward. Tabular figures so frequencies line up on
   the decimal without needing right alignment tricks. */
.mono, td.call, td.freq, td.band {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
               "Roboto Mono", "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- header */

header.site {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  flex-wrap: wrap;
  padding: 0.7rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

header.site h1 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  color: var(--ink);
}

header.site h1 .private {
  margin-left: 0.5rem;
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

header.site nav { display: flex; gap: 1.15rem; }

header.site nav a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.92rem;
  padding-bottom: 0.15rem;
  border-bottom: 2px solid transparent;
}

header.site nav a:hover { color: var(--ink); }

header.site nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ------------------------------------------------------------------ main */

main {
  padding: 1.6rem 1.25rem 4rem;
  max-width: 74rem;
  margin: 0 auto;
}

/* The answer line: the page's whole reason for existing, stated in words. */
.answer {
  margin: 0 0 0.3rem;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.answer .count {
  font-weight: 650;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.answer.none { color: var(--ink-dim); }

.meta {
  margin: 0 0 1.4rem;
  color: var(--ink-dim);
  font-size: 0.86rem;
}

h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 2.2rem 0 0.7rem;
}

h2:first-child { margin-top: 0; }

/* --------------------------------------------------------------- filters */

.filters {
  display: flex;
  gap: 1rem 1.4rem;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: 3px;
}

.filters label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.87rem;
  color: var(--ink-dim);
}

select, input[type="checkbox"] {
  font: inherit;
  font-size: 0.87rem;
  accent-color: var(--accent);
}

select {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 0.2rem 0.35rem;
}

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

/* ---------------------------------------------------------------- tables */

.tablewrap {
  overflow-x: auto;                 /* wide tables scroll, the page does not */
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}

thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--ink-faint);
  white-space: nowrap;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--border-strong);
}

tbody td {
  padding: 0.42rem 0.7rem;
  border-bottom: 1px solid var(--border);
  vertical-align: baseline;
}

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

td.num, th.num { text-align: right; }

td.call { font-weight: 600; }

td.info {
  color: var(--ink-dim);
  font-size: 0.85rem;
  max-width: 34rem;
}

/* A left rule means "you need this"; its colour is the tier. Rows you do not
   need carry no rule at all, which is what keeps the page quiet. */
tbody tr td:first-child {
  border-left: 3px solid transparent;
  padding-left: 0.85rem;
}

tr.p1 td:first-child { border-left-color: var(--p1); }
tr.p2 td:first-child { border-left-color: var(--p2); }
tr.p3 td:first-child { border-left-color: var(--p3); }
tr.p4 td:first-child { border-left-color: var(--p4); }
tr.p5 td:first-child { border-left-color: var(--p5); }

.p1 .status { color: var(--p1); font-weight: 600; }
.p2 .status { color: var(--p2); }
.p3 .status { color: var(--p3); }
.p4 .status { color: var(--p4); }
.p5 .status { color: var(--p5); }

tr.inactive td { color: var(--ink-faint); }
tr.inactive td.call { font-weight: 500; }

/* ---------------------------------------------------------------- badges */

.badge {
  display: inline-block;
  padding: 0.02rem 0.34rem;
  border-radius: 2px;
  font-size: 0.72rem;
  line-height: 1.5;
  border: 1px solid currentColor;
  white-space: nowrap;
}

/* An inferred mode is never presented as fact. */
.badge.guess { color: var(--ink-faint); }
.badge.stale { color: var(--warn); }
.badge.soon  { color: var(--ink-dim); }

/* ------------------------------------------------- empty / error states */

.state {
  padding: 1.6rem 0.9rem;
  color: var(--ink-dim);
  font-size: 0.92rem;
}

.state.error { color: var(--p1); }

.state code {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-size: 0.85em;
  color: var(--ink);
}

/* ----------------------------------------------------------------- misc */

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

footer.site {
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 1.25rem 2.5rem;
  color: var(--ink-faint);
  font-size: 0.82rem;
}

@media (max-width: 34rem) {
  main { padding: 1.1rem 0.8rem 3rem; }
  .answer { font-size: 1.18rem; }
  header.site { gap: 0.7rem 1.1rem; padding: 0.6rem 0.8rem; }
  td.info { display: none; }          /* the widest column goes first */
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}