/* SW Logbook - receiver faceplate theme
   Shares the instrument-panel look of swdb / hamlog / swmp3. */

:root {
  --case:      #14171b;   /* cabinet */
  --face:      #1d2228;   /* panel face */
  --face-hi:   #232931;   /* raised panel */
  --bezel:     #333b45;   /* trim lines */
  --amber:     #ffb454;   /* dial lamps / digits */
  --amber-dim: #8a6430;
  /* Recording waveform colors. Change these three values to retheme the
     custom player without regenerating any waveform PNG files. */
  --waveform-played:   var(--amber);
  --waveform-unplayed: #6f747a;
  --waveform-playhead: #ffe0ad;
  --green:     #62d98f;   /* QSL LED */
  --blue:      #8cc6f0;   /* recording LED - cool, so it reads apart from the amber flags */
  --red:       #e0705f;
  --text:      #d8dee5;
  --muted:     #8d97a1;
  --mono: "Share Tech Mono", "Courier New", monospace;
  --disp: "Michroma", "Arial Black", sans-serif;
  --body: "Segoe UI", system-ui, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--case);
  background-image:
    radial-gradient(1100px 420px at 50% -160px, #232a33 0%, transparent 70%);
  color: var(--text);
  font: 16.5px/1.6 var(--body);
}
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px 48px; }

/* ---------------- faceplate header ---------------- */
header.plate {
  margin: 18px 0 14px;
  border: 1px solid var(--bezel);
  border-radius: 10px;
  background:
    linear-gradient(180deg, #262d36 0%, #1c2127 55%, #181d22 100%);
  box-shadow: 0 3px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 16px 20px 0;
}
.plate-top { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.badge-title { min-width: 240px; }
.badge-title h1 {
  margin: 0;
  font-family: var(--disp);
  font-size: 22px;
  letter-spacing: .16em;
  color: #e8edf2;
  text-shadow: 0 1px 0 #000;
}
.badge-title h1 a { color: inherit; }
.badge-title .sub {
  color: var(--muted); font-size: 13px; letter-spacing: .08em; margin-top: 3px;
}

/* glowing counters */
.readouts { display: flex; gap: 12px; margin-left: auto; flex-wrap: wrap; }
.readout {
  background: #0c0e10;
  border: 1px solid #000;
  border-radius: 6px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05);
  padding: 6px 14px 7px;
  text-align: center;
  min-width: 96px;
}
.readout b {
  display: block;
  font-family: var(--mono);
  font-size: 26px;
  color: var(--amber);
  text-shadow: 0 0 8px rgba(255,180,84,.55);
  letter-spacing: .06em;
}
.readout span {
  display: block; font-size: 11px; letter-spacing: .16em;
  color: var(--muted); text-transform: uppercase; margin-top: 2px;
}

/* nav row engraved into the plate */
nav.controls {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 12px -8px 0;
  border-top: 1px solid var(--bezel);
  padding: 8px 8px;
}
nav.controls a {
  padding: 8px 14px;
  border-radius: 6px;
  color: var(--text);
  font-size: 14.5px;
  letter-spacing: .05em;
}
nav.controls a:hover { background: #262d36; text-decoration: none; }
nav.controls a.on {
  background: #0d0f11; color: var(--amber);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.8);
}
nav.controls .spacer { margin-left: auto; }
/* Highlight the top-of-page "+ New Entry" action with an amber border so it
   reads as the primary create action, distinct from the plain nav links. */
nav.controls a.new-entry {
  border: 1px solid var(--amber-dim);
  color: var(--amber);
}
nav.controls a.new-entry:hover { border-color: var(--amber); background: #262d36; }

/* ---------------- band dial strip ---------------- */
.dial {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
  border: 1px solid var(--bezel);
  border-radius: 8px;
  background: #101317;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.75);
  padding: 8px 10px;
  margin: 0 0 14px;
}
.dial .lbl {
  font-size: 11px; letter-spacing: .2em; color: var(--muted);
  text-transform: uppercase; margin-right: 4px;
}
.dial a {
  font-family: var(--mono);
  font-size: 14.5px;
  color: var(--amber-dim);
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.dial a:hover { color: var(--amber); text-decoration: none; }
.dial a.on {
  color: var(--amber);
  border-color: var(--amber-dim);
  text-shadow: 0 0 7px rgba(255,180,84,.6);
  background: rgba(255,180,84,.06);
}

/* ---------------- panels & forms ---------------- */
.panel {
  border: 1px solid var(--bezel);
  border-radius: 10px;
  background: var(--face);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.panel h2 {
  margin: 0 0 12px;
  font-family: var(--disp);
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #aeb8c2;
}
/* The New/Edit entry form title in amber, so the current action is obvious. */
.panel h2.entry-head { color: var(--amber); }

form.search { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
input[type=text], input[type=search], input[type=number], input[type=date],
select, textarea {
  background: #0e1114;
  border: 1px solid #363e48;
  border-radius: 6px;
  color: var(--text);
  padding: 9px 11px;
  font: 15.5px var(--body);
}
textarea { font-family: var(--body); }
input:focus, select:focus, textarea:focus {
  border-color: var(--amber-dim);
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,180,84,.15);
}
.q-main { width: 320px; max-width: 100%; font-family: var(--mono); }

button, .btn {
  background: linear-gradient(180deg, #333b45, #262d35);
  border: 1px solid #48525d;
  border-radius: 6px;
  color: var(--text);
  padding: 9px 17px;
  font: 600 14.5px var(--body);
  letter-spacing: .05em;
  cursor: pointer;
}
button:hover, .btn:hover { border-color: var(--amber-dim); color: var(--amber); text-decoration: none; }
.btn.warm { color: var(--amber); border-color: var(--amber-dim); }
.btn.danger { color: var(--red); border-color: #6d3a33; }
.btn.quiet { background: none; border-color: transparent; color: var(--muted); }

/* Add entry / Save changes -- green primary action. Fills with the QSL green
   and brightens on hover. */
.primary-save {
  color: #0d1712;
  background: linear-gradient(180deg, #6fe39a, #4bbf78);
  border: 1px solid #3f9e63;
  text-shadow: none;
}
.primary-save:hover {
  background: linear-gradient(180deg, #86f0ad, #5fd189);
  border-color: #62d98f;
  color: #0d1712;
}

/* Delete -- red danger action, filled and right-aligned in the actions row.
   Brightens on hover like the save button. */
button.danger, .btn.danger {
  color: #fff;
  background: linear-gradient(180deg, #d9614f, #b8442f);
  border: 1px solid #a53b28;
}
button.danger:hover, .btn.danger:hover {
  background: linear-gradient(180deg, #ec7361, #cf5540);
  border-color: var(--red);
  color: #fff;
}
/* push the delete button to the far right of the actions row */
.actions .danger { margin-left: auto; }

details.more { width: 100%; }
details.more summary {
  cursor: pointer; color: var(--muted); font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; user-select: none;
}
details.more[open] summary { color: var(--amber); }
.more-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* ---------------- results table ---------------- */
.meta-line { color: var(--muted); font-size: 14.5px; margin: 4px 2px 10px; }
.meta-line b { color: var(--amber); font-family: var(--mono); }

.tblwrap { overflow-x: auto; border: 1px solid var(--bezel); border-radius: 10px; }
table.log { border-collapse: collapse; width: 100%; min-width: 760px; background: var(--face); table-layout: fixed; }
/* Fixed column widths so the grid stays put across band/filter changes instead
   of re-flowing to fit each result set. Proportions match the reference layout;
   over-long values (station, site, country) wrap rather than widen the column. */
table.log th:nth-child(1) { width: 10%; }  /* Date           */
table.log th:nth-child(2) { width: 7%;  }  /* UTC            */
table.log th:nth-child(3) { width: 22%; }  /* Station        */
table.log th:nth-child(4) { width: 21%; }  /* Country / Site */
table.log th:nth-child(5) { width: 10%; }  /* kHz            */
table.log th:nth-child(6) { width: 13%; }  /* Language       */
table.log th:nth-child(7) { width: 17%; }  /* Flags          */
table.log th {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); text-align: left;
  background: #161a1f;
  padding: 9px 10px;
  border-bottom: 1px solid var(--bezel);
  white-space: nowrap;
}
table.log th a { color: inherit; }
table.log th a.on { color: var(--amber); }
table.log td {
  padding: 10px 11px;
  border-bottom: 1px solid #262c34;
  vertical-align: top;
}
table.log tr:hover td { background: #22282f; }
td.num, .khz { font-family: var(--mono); }
.khz { color: var(--amber); white-space: nowrap; }
td.date { white-space: nowrap; font-family: var(--mono); font-size: 14.5px; }
/* Main log table: show Date, Time (UTC) and Frequency in the readable body
   face, matching the Language column. Share Tech Mono (var(--mono)) draws a
   dotted/slashed zero that reads oddly here; the body face has a plain zero.
   Frequency keeps its amber colour (from .khz above); this only swaps the
   typeface. Scoped to table.log so the mono readouts elsewhere are untouched. */
table.log td.date,
table.log td.num,
table.log td.khz { font-family: var(--body); }
table.log td.date { font-size: inherit; }
td.sta a { color: var(--text); font-weight: 600; }
td.sta a:hover { color: var(--amber); }
.dim { color: var(--muted); font-size: 13.5px; }

/* LED flags */
.led {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid #333;
  background: #0d0f11;
  margin-right: 4px;
  letter-spacing: .05em;
  white-space: nowrap;
}
.led.g { color: var(--green); border-color: #2c5940; text-shadow: 0 0 6px rgba(98,217,143,.5); }
.led.a { color: var(--amber); border-color: #5c4522; text-shadow: 0 0 6px rgba(255,180,84,.5); }
.led.r { color: var(--red);   border-color: #5c322c; }
.led.b { color: var(--blue);  border-color: #3d637d; text-shadow: 0 0 7px rgba(140,198,240,.6); }
a.led.b.play:hover { color: #b3dcff; border-color: #5a86a4; }
td.sta a.unid { color: var(--muted); font-style: italic; font-weight: 400; }
td.sta a.unid:hover { color: var(--amber); }

/* pagination */
.pager { display: flex; gap: 6px; align-items: center; margin: 14px 2px; flex-wrap: wrap; }
.pager a, .pager span.cur {
  font-family: var(--mono); font-size: 14.5px;
  padding: 5px 10px; border-radius: 5px; border: 1px solid var(--bezel);
}
.pager span.cur { color: var(--amber); border-color: var(--amber-dim); }
.pager .gap { color: var(--muted); }

/* ---------------- record detail ---------------- */
/* Detail box: a fixed 4 columns on desktop (the clean layout), stepping down
   to 2 on phones and 1 on very narrow screens. Fixed counts rather than
   auto-fit so a wide desktop never packs in a 5th column and breaks the
   4-across grouping. Only the column COUNT changes per breakpoint; the
   vertical gap (first value) stays 10px throughout. */
.rec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; }
@media (max-width: 640px) {
  .rec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Badge rows (Flags, QSL firsts) need the whole width: two LEDs side by side
     are wider than a half-width cell, so in a 2-column grid they would wrap
     onto separate lines even though the screen has room. */
  .rec-grid .rec-item.wide { grid-column: 1 / -1; }
}
@media (max-width: 380px) { .rec-grid { grid-template-columns: 1fr; } }
.rec-item .k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.rec-item .v { font-size: 16.5px; margin-top: 2px; }
/* The amber readout values (Date, Time, Frequency; and the QSL dates) in the
   readable body face, matching the Site/Country/Power/Language values -- only
   the amber colour sets them apart. Share Tech Mono (var(--mono)) draws a
   dotted/slashed zero, so it's the body face here for a plain zero. */
.rec-item .v.mono { font-family: var(--body); color: var(--amber); }
.remarks {
  margin-top: 14px; padding: 12px 14px;
  background: #14181d; border: 1px solid #2a313a; border-radius: 8px;
  white-space: pre-wrap;
}
/* Panel accent stripes. Each one repeats the colour of the badge that leads
   you here, so the Flags row and the panel below read as the same thing:
   QSL green (amber while a reply is still outstanding), recording blue. The
   blue is --blue, the same variable .led.b uses -- change one and both move.
   The station panel takes the dial-lamp amber -- it has no badge pointing at
   it, being the entry itself, so it carries the logbook's own colour. */
.sta-card { border-left: 3px solid var(--amber); }
.qsl-card { border-left: 3px solid var(--green); }
.qsl-card.pending { border-left-color: var(--amber); }
.rec-card { border-left: 3px solid var(--blue); }
/* Landing room for a badge click, so the panel's top edge and its heading
   aren't flush against the top of the viewport when the scroll settles. */
.qsl-card, .rec-card { scroll-margin-top: 14px; }

/* --- QSL scan: one thumbnail in the panel, full images in a lightbox ------ */
.qsl-scans { margin-top: 14px; padding-top: 12px; border-top: 1px solid #262c34; }
.qsl-thumb {
  display: inline-block; padding: 0; border: 1px solid #2c333c; border-radius: 4px;
  background: #0d1116; cursor: zoom-in; line-height: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.qsl-thumb:hover, .qsl-thumb:focus-visible {
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(89,180,120,.16); outline: none;
}
/* Cap the on-screen size; the generated thumbnail is ~400px on its long edge,
   so it stays crisp on a high-DPI screen at this display size. */
.qsl-thumb img { display: block; max-width: 210px; max-height: 210px; border-radius: 3px; }
.qsl-thumb-cap { margin-top: 6px; font-size: 13px; color: var(--muted); }

.qsl-lb[hidden] { display: none; }
.qsl-lb {
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px;
}
.qsl-lb-bg { position: absolute; inset: 0; background: rgba(6,9,12,.88); cursor: zoom-out; }
/* The viewport the strip slides inside. pan-y + pinch-zoom leaves vertical
   scrolling and zooming to the browser while horizontal drags stay ours. */
.qsl-lb-stage {
  position: relative; z-index: 1;
  width: 100%; max-width: 1100px; overflow: hidden;
  touch-action: pan-y pinch-zoom;
}
.qsl-lb-track {
  display: flex; align-items: center;
  will-change: transform;                   /* keep the drag on the compositor */
}
.qsl-lb-slide {
  flex: 0 0 100%; display: flex; align-items: center; justify-content: center;
  padding: 0 6px;
}
.qsl-lb-slide img {
  max-width: 100%; max-height: calc(100vh - 150px);
  border-radius: 4px; box-shadow: 0 18px 50px rgba(0,0,0,.6);
  -webkit-user-drag: none; user-select: none;   /* dragging pans, not ghost-drags */
}
.qsl-lb-cap {
  position: relative; z-index: 1;
  margin-top: 12px; font-size: 14px; color: var(--muted);
}
.qsl-lb-btn {
  position: absolute; z-index: 2; border: 1px solid #3a434e; border-radius: 6px;
  background: rgba(20,25,31,.9); color: var(--text); cursor: pointer;
  line-height: 1; padding: 6px 12px; font-size: 26px;
}
.qsl-lb-btn:hover:not(:disabled) { border-color: var(--green); color: #fff; }
.qsl-lb-btn:disabled { opacity: .3; cursor: default; }
.qsl-lb-close { top: 18px;  right: 18px; font-size: 22px; padding: 4px 12px; }
.qsl-lb-prev  { left: 18px;  top: 50%; transform: translateY(-50%); }
.qsl-lb-next  { right: 18px; top: 50%; transform: translateY(-50%); }
/* Freeze the page behind the lightbox so a scroll gesture moves the overlay,
   not the record underneath it. */
body.qsl-lb-on { overflow: hidden; }
@media (max-width: 520px) {
  .qsl-lb { padding: 12px; }
  .qsl-lb-prev { left: 6px; }
  .qsl-lb-next { right: 6px; }
  .qsl-lb-slide img { max-height: calc(100vh - 130px); }
  .qsl-thumb img { max-width: 150px; max-height: 150px; }
}
.actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; align-items: center; }

/* ---------------- totals ---------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat {
  background: #0d0f11; border: 1px solid #000; border-radius: 8px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.85);
  text-align: center; padding: 12px 8px 10px;
}
.stat b { display:block; font-family: var(--mono); font-size: 28px; color: var(--amber);
          text-shadow: 0 0 9px rgba(255,180,84,.5); }
.stat.grn b { color: var(--green); text-shadow: 0 0 9px rgba(98,217,143,.5); }
.stat span { display:block; font-size: 11px; letter-spacing: .16em; color: var(--muted);
             text-transform: uppercase; margin-top: 3px; }

table.mini { border-collapse: collapse; width: 100%; }
table.mini th, table.mini td { padding: 8px 9px; border-bottom: 1px solid #262c34; text-align: left; font-size: 15px; }
table.mini th { color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
table.mini td.num { text-align: right; font-family: var(--mono); color: var(--amber); }

.chart svg { width: 100%; height: auto; display: block; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .cols-2 { grid-template-columns: 1fr; } }

/* ---------------- edit form ---------------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid textarea { width: 100%; min-height: 110px; }
.form-grid input, .form-grid select { width: 100%; }
.checks { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.checks label { display: flex; gap: 6px; align-items: center; font-size: 15px; color: var(--text);
                text-transform: none; letter-spacing: 0; }
/* Keep a set of related checkboxes on one line, evenly spaced.
   flex-direction must be stated: these divs also carry .fld, which sets
   column, and without this they stack. */
.checks.row {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  gap: 34px; align-items: center;
}
.checks.row label { white-space: nowrap; }
@media (max-width: 640px) { .checks.row { flex-wrap: wrap; gap: 12px 22px; } }

/* NASWA country tucked in beside the New Country checkbox */
.naswa-row { gap: 34px; }
.naswa-inline { display: flex; align-items: center; gap: 8px; }
.naswa-inline label {
  color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
  font-size: 13px; white-space: nowrap;
}
.naswa-inline input { width: 200px; }
@media (max-width: 640px) {
  .naswa-inline { flex-basis: 100%; margin-top: 4px; }
  .naswa-inline input { flex: 1; width: auto; }
}

/* muted hint text inside a field label, e.g. Frequency "(mode notes OK)" */
.hint { color: var(--muted); font-weight: 400; font-size: 12.5px; letter-spacing: 0; }

.notice { border-left: 3px solid var(--green); }
.notice.err { border-left-color: var(--red); }

/* ---------------- recordings ---------------- */
.rec-list { display: flex; flex-direction: column; gap: 8px; }
.led.play { cursor: pointer; }
.led.play:hover { color: var(--amber); border-color: var(--amber-dim); text-shadow: 0 0 6px rgba(255,180,84,.5); }

footer.foot {
  margin-top: 26px; color: var(--muted); font-size: 13px;
  text-align: center; letter-spacing: .06em;
}
footer.foot .tick { color: var(--amber-dim); }

@media (max-width: 640px) {
  .readout b { font-size: 19px; }
  .badge-title h1 { font-size: 17px; }
}
@media print {
  body { background: #fff; color: #000; }
  header.plate, .dial, .panel form, .actions, nav.controls, footer.foot { display: none !important; }
  .tblwrap, table.log, .panel { border: none; box-shadow: none; background: #fff; color: #000; }
  table.log td, table.log th { color: #000; border-color: #999; }
  .khz, td.date { color: #000; }
}

/* inline recording player */
.rec-item-full {
  background: #0e1114; border: 1px solid #2a313a; border-radius: 8px; padding: 12px 14px;
}
.rec-item-full + .rec-item-full { margin-top: 12px; }

.rec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.rec-fn {
  font-family: var(--mono); font-size: 13.5px; color: var(--amber-dim);
  word-break: break-all; flex: 1 1 auto;
}
.rec-tools { display: flex; gap: 4px; flex: none; }
.ico-btn {
  display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  background: #161b21; border: 1px solid #333b45; border-radius: 6px;
  color: var(--muted); cursor: pointer; text-decoration: none;
}
.ico-btn:hover { color: var(--amber); border-color: var(--amber-dim); text-decoration: none; }
.ico-btn.ok { color: var(--green); border-color: #2c5940; }

/* "Recordings from the archive" heading with an inline external-link button
   sitting just to its right, opening the swmp3 archive in a new window. */
.rec-title { display: flex; align-items: center; gap: 10px; }
.ico-btn.ext { width: 26px; height: 26px; }

/* Date-adjustment note above the player. Inherits .dim for muted colour and
   size (matching the "flagged as taped" notice); this only adds spacing. */
.rec-adjust { margin: 0 0 10px; }

/* UTC clock riding along with the audio -- a lit dial readout */
.rec-clock {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: #07090b; border: 1px solid #000; border-radius: 6px;
  box-shadow: inset 0 2px 9px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.04);
  padding: 5px 12px 6px; margin: 0 0 9px;
}
.rec-clock .rc-lamp {
  width: 7px; height: 7px; border-radius: 50%;
  background: #3a2f1d; border: 1px solid #000; flex: none;
  align-self: center; transition: background .15s, box-shadow .15s;
}
.rec-clock.running .rc-lamp {
  background: var(--amber); box-shadow: 0 0 7px rgba(255,180,84,.85);
}
/* Clock readout font: NOT var(--mono). Share Tech Mono draws a dotted/slashed
   zero, and no CSS can undo a font's own zero glyph -- the only fix is a font
   whose default zero is plain. This stack (Menlo on Mac, Courier New on
   Windows, generic monospace elsewhere) keeps the tabular, amber readout look
   with an unslashed zero. All three clock spans share it so the digits, the
   "UTC" suffix and the day counter stay visually of a piece. Best-effort
   across platforms, as with any system-font stack. */
.rec-clock .rc-time {
  font-family: Menlo, "Courier New", Courier, monospace; font-size: 23px; line-height: 1;
  color: var(--amber); letter-spacing: .07em;
  text-shadow: 0 0 9px rgba(255,180,84,.5);
  font-variant-numeric: tabular-nums;
}
.rec-clock .rc-suffix {
  font-family: Menlo, "Courier New", Courier, monospace; font-size: 11px; color: var(--amber-dim);
  letter-spacing: .16em;
}
.rec-clock .rc-day {
  font-family: Menlo, "Courier New", Courier, monospace; font-size: 11px; color: var(--green);
  letter-spacing: .08em;
}

/* Native audio transport. Recordings without a generated waveform still use
   the browser player. When a waveform exists, record.php emits .wfp-audio with
   no controls; it is always hidden and controlled by the custom transport. */
.rec-item-full audio:not(.wfp-audio),
.rec-item-full noscript audio {
  display: block;
  width: 100%;
  height: 46px;
  margin: 0 0 12px;
  color-scheme: dark;
  background: #15191d;
  border-radius: 6px;
}
.wfp-audio { display: none !important; }

/* ---------------- custom waveform transport ----------------
   One responsive row: Play | Waveform | elapsed/total | Mute | Volume.
   On phones the volume slider is omitted; the waveform remains visible. */
.wfp-player {
  --wfp-progress: 0%;
  width: 100%;
  margin: 0 0 12px;
}
.wfp-controls[hidden] { display: none; }
.wfp-controls {
  display: grid;
  grid-template-columns: 44px minmax(140px, 1fr) auto 44px 92px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.wfp-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #3b4550;
  border-radius: 50%;
  background: linear-gradient(180deg, #2d353e, #20262d);
  color: var(--text);
  cursor: pointer;
}
.wfp-button:hover {
  border-color: var(--waveform-played);
  color: var(--waveform-played);
}
.wfp-button:active { transform: translateY(1px); }
.wfp-icon {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.wfp-icon-pause,
.wfp-icon-muted { display: none; }
.wfp-player.is-playing .wfp-icon-play,
.wfp-player.is-muted .wfp-icon-volume { display: none; }
.wfp-player.is-playing .wfp-icon-pause,
.wfp-player.is-muted .wfp-icon-muted { display: block; }

.wfp-waveform {
  position: relative;
  min-width: 0;
  height: 52px;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
}

/* Conventional seek-bar fallback. It is always present underneath the canvas
   and remains visible if Canvas or waveform decoding is unavailable. */
.wfp-waveform::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--waveform-played) 0 var(--wfp-progress),
    var(--waveform-unplayed) var(--wfp-progress) 100%
  );
}
.wfp-player.has-waveform .wfp-waveform::before { opacity: 0; }

/* One transparent canvas only. There are no HTML/SVG image elements, so a
   failed waveform cannot create Android's giant white broken-image surface. */
.wfp-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  background: transparent !important;
  border: 0;
  pointer-events: none;
}
.wfp-canvas[hidden] { display: none; }

.wfp-playhead {
  position: absolute;
  z-index: 2;
  top: 2px;
  bottom: 2px;
  left: var(--wfp-progress);
  width: 3px;
  background: var(--waveform-playhead);
  box-shadow: 0 0 3px rgba(0,0,0,.85);
  transform: translateX(-1.5px);
  pointer-events: none;
}

/* The transparent native range input covers the waveform, retaining native
   mouse, touch, keyboard and accessibility behavior without a box outline. */
.wfp-seek {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  touch-action: none;
}
.wfp-waveform:focus-within,
.wfp-seek:focus,
.wfp-seek:focus-visible {
  outline: none;
  box-shadow: none;
}
.wfp-waveform:has(.wfp-seek:focus-visible) .wfp-playhead {
  width: 5px;
  transform: translateX(-2.5px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.75), 0 0 6px rgba(0,0,0,.9);
}

.wfp-time {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  color: var(--text);
  font: 15px Menlo, "Courier New", Courier, monospace;
  font-variant-numeric: tabular-nums;
}
.wfp-separator { color: var(--muted); }
.wfp-volume {
  width: 92px;
  min-width: 0;
  margin: 0;
  accent-color: var(--waveform-played);
  cursor: pointer;
}

@media (max-width: 700px) {
  .wfp-controls {
    grid-template-columns: 40px minmax(64px, 1fr) auto 40px;
    gap: 6px;
  }
  .wfp-button {
    width: 40px;
    height: 40px;
  }
  .wfp-icon { width: 20px; height: 20px; }
  .wfp-waveform { height: 44px; }
  .wfp-time { font-size: 13px; gap: 3px; }

  /* Phone hardware buttons handle volume; keep only the mute toggle. */
  .wfp-volume { display: none; }
}

@media (max-width: 400px) {
  .wfp-controls {
    grid-template-columns: 38px minmax(48px, 1fr) auto 38px;
    gap: 4px;
  }
  .wfp-button { width: 38px; height: 38px; }
  .wfp-waveform { height: 42px; }
  .wfp-time { font-size: 12px; gap: 2px; }
}

/* label-free readout, straight off the filename */
.rec-info { line-height: 1.5; }
.ri-station { font-size: 19px; font-weight: 600; color: var(--text); }
.ri-country { font-size: 16px; color: var(--muted); margin-top: 1px; }
/* Aligned readout: Date | Time | Frequency, with Language under Date and
   Power under Time on the second row. Three equal columns keep the second
   row's values sitting directly beneath the first. Uses the body font (like
   the Site/Country lines above), not the mono readout face -- only the colour
   sets these apart: amber for Date/Time/Frequency, muted for Language/Power. */
.ri-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  gap: 4px 18px;
  font-family: var(--body); font-size: 16px; color: var(--amber);
  margin-top: 6px;
}
.ri-grid .ri-cell { white-space: nowrap; }
/* second-row items (Language, Power) share the body font but a quieter shade */
.ri-grid .ri-sub { font-family: var(--body); color: var(--muted); font-size: 16px; }
@media (max-width: 520px) {
  /* on narrow phones let the columns collapse rather than overflow */
  .ri-grid { grid-template-columns: repeat(2, minmax(0, max-content)); }
}
.ri-comment {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid #262c34;
  font-size: 15.5px; color: var(--text);
}

/* station name in the same gold as the Date/Time/Frequency readouts */
.panel h2.sta-name { color: var(--amber); margin: 0; }
.sta-line { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.ico-btn.sm { width: 26px; height: 26px; flex: none; }

/* comments box gets its own copy button, tucked bottom-right */
.remarks { position: relative; padding-right: 44px; }
.remarks-copy { position: absolute; right: 10px; bottom: 10px; }

/* receiving QTH, just above the log number */
.rec-qth {
  margin-top: 12px; font-size: 11.5px; color: var(--muted);
  letter-spacing: .04em; font-weight: 400;
}
.rec-qth + .rec-id { margin-top: 2px; }

/* a continent we inferred rather than read from the file */
.derived {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  border: 1px solid #333b45; border-radius: 3px; padding: 0 5px;
  margin-left: 5px; vertical-align: 2px; cursor: help;
}

/* "What's On Now" -- a secondary action beside Search, deliberately quieter */
.btn-now {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 18px; padding: 7px 13px;
  background: #1b2129; border: 1px solid var(--bezel); border-radius: 6px;
  color: var(--muted); font: 600 13px var(--body); text-decoration: none;
  white-space: nowrap;
}
.btn-now svg { color: #6f7b87; flex: none; }          /* dim clock, not a beacon */
.btn-now:hover { color: var(--amber); border-color: var(--amber-dim); text-decoration: none; }
.btn-now:hover svg { color: var(--amber-dim); }

/* note above results explaining a non-obvious search mode */
.search-note {
  margin-bottom: 7px; padding: 7px 11px;
  background: #171d24; border-left: 3px solid var(--amber-dim); border-radius: 4px;
  font-size: 13.5px; color: var(--muted);
}
.search-note b { color: var(--text); }
.search-note .khz { color: var(--amber); font-family: var(--mono); }

/* QSL readouts in the same green the totals page uses */
.readout.grn b { color: var(--green); text-shadow: 0 0 9px rgba(98,217,143,.4); }

/* Small screens: the faceplate flourishes cost more than they give. Drop the
   subtitle, the scoreboard and the band dial, and let the log itself have the
   width.

   Two conditions, because width alone doesn't identify a phone. The scoreboard
   wraps to two rows from ~660px down, so 820px covers that with room to spare;
   and `pointer: coarse` catches any touch device up to tablet width, including
   a phone turned landscape (~900px), which no sane width rule would reach
   without also hitting real laptops. */
@media (max-width: 820px), (pointer: coarse) and (max-width: 1024px) {
  .badge-title .sub { display: none; }
  .readouts        { display: none; }
  .dial            { display: none; }
  .plate-top       { display: block; }
  .badge-title h1  { font-size: 19px; }
  .btn-now         { margin-left: 0; margin-top: 8px; }
}

/* a country we simply don't know */
.unknown { color: var(--muted); font-style: italic; }

/* prefix-matching autocomplete (native datalist matches anywhere in the
   string, so "Voi" would offer "Radio Voice" -- this only matches the start) */
.ac-wrap { position: relative; }
.ac-list {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  margin-top: 3px; max-height: 240px; overflow-y: auto;
  background: #0e1114; border: 1px solid #48525d; border-radius: 6px;
  box-shadow: 0 10px 26px rgba(0,0,0,.6); display: none;
}
.ac-list.open { display: block; }
.ac-list div {
  padding: 7px 11px; font-size: 15px; color: var(--text); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-list div b { color: var(--amber); font-weight: 700; }
.ac-list div.sel, .ac-list div:hover { background: #232b34; }

/* small entry id, bottom-left of the detail box */
.rec-id {
  margin-top: 12px; font-family: var(--mono); font-size: 11.5px;
  color: #5c666f; letter-spacing: .08em;
}

a.led.play { text-decoration: none; }
a.led.play:hover { color: var(--amber); border-color: var(--amber-dim); text-shadow: 0 0 6px rgba(255,180,84,.5); }
table.mini tr.totrow td { border-top: 1px solid var(--bezel); border-bottom: none; padding-top: 8px; }
table.mini tr.totrow td.num b { color: var(--amber); }
table.mini tr.dim td { color: var(--muted); }

/* "exact date unknown" note beside a partial recording date (month and/or day
   missing from the filename, e.g. 19820700 or 19790000). Smaller and muted so
   the year/month stays the prominent value. */
.ri-grid .date-approx { font-size: 12.5px; color: var(--muted); font-weight: 400; }

/* a partial-date cell carries that trailing note; let it wrap rather than
   force the Date | Time | Frequency row wider on a narrow screen */
.ri-grid .ri-cell.ri-approx { white-space: normal; }

/* Add MP3 Overlay */
.rec-ov { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex;
          align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 200; overflow:auto; }
.rec-ov-box { background: var(--face); border: 1px solid var(--bezel); border-radius: 10px;
              max-width: 640px; width: 100%; padding: 20px 22px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.rec-ov-box h3 { margin: 0 0 4px; font-family: var(--disp); letter-spacing: .1em; color: #e8edf2; }
.rec-ov-sub { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.rec-ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.rec-ov-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 11px;
                     letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rec-ov-grid input { font: 15px var(--body); }
.rec-ov-full { grid-column: 1 / -1; }
.rec-ov-file { margin: 14px 0 8px; }
.rec-ov-name { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.rec-ov-name code { color: var(--amber); font-family: var(--mono); }
.rec-ov-msg { min-height: 20px; font-size: 14px; margin-bottom: 10px; }
.rec-ov-msg.ok  { color: var(--green); }
.rec-ov-msg.ok code, .rec-ov-msg code { color: var(--amber); font-family: var(--mono); }
.rec-ov-msg.err { color: var(--red); }
.rec-ov-actions { display: flex; gap: 10px; }
.rec-ov[hidden] { display: none !important; }
@media (max-width: 560px) { .rec-ov-grid { grid-template-columns: 1fr; } }


/* Add Recording and Add QSL action accents. Match the panels they create:
   recording blue, QSL green. The faint tinted fill keeps the colour visible
   even when the button is not being hovered. */
.rec-add-btn {
  border-color: #3d637d; color: var(--blue);
  background: linear-gradient(180deg, rgba(140,198,240,.10), rgba(61,99,125,.08));
}
.rec-add-btn:hover {
  border-color: var(--blue); color: #b3dcff;
  background: linear-gradient(180deg, rgba(140,198,240,.18), rgba(61,99,125,.13));
}

/* Add QSL overlay and missing-scan states */
.qsl-add-btn {
  border-color: #2c5940; color: var(--green);
  background: linear-gradient(180deg, rgba(98,217,143,.09), rgba(44,89,64,.08));
}
.qsl-add-btn:hover {
  border-color: var(--green); color: #86f0ad;
  background: linear-gradient(180deg, rgba(98,217,143,.17), rgba(44,89,64,.13));
}

.qsl-ov-box { max-width: 720px; }
.qsl-ov-context {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px; padding: 10px 12px; margin-bottom: 10px;
  background: #14181d; border: 1px solid #2a313a; border-radius: 7px;
}
.qsl-ov-context div { min-width: 0; }
.qsl-ov-context span {
  display: block; color: var(--muted); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
}
.qsl-ov-context b {
  display: block; margin-top: 1px; font-size: 14.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qsl-received-date { max-width: 270px; margin: 0 0 12px; }
.qsl-received-date input { width: 100%; }
.qsl-received-date .hint { display: block; margin-top: 3px; line-height: 1.35; }
.qsl-ov-warning {
  margin: 0 0 10px; padding: 7px 10px;
  border-left: 3px solid var(--amber-dim); background: #171d24;
  border-radius: 4px; color: var(--muted); font-size: 13px;
}
.qsl-ov-prefix { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.qsl-ov-prefix code, .qsl-file-row code {
  color: var(--amber); font-family: var(--mono); overflow-wrap: anywhere;
}
.qsl-ov-files { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.qsl-file-row {
  padding: 10px 12px; border: 1px solid #2f3741; border-radius: 7px;
  background: #111519;
}
.qsl-file-row.uploaded { border-color: #2c5940; }
.qsl-file-label {
  margin-bottom: 2px; color: var(--text); font-size: 14px; font-weight: 600;
}
.qsl-file-help {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  margin-bottom: 8px;
}
.qsl-file-row input[type=file] { width: 100%; color: var(--text); }
.qsl-file-name, .qsl-file-status {
  margin-top: 5px; color: var(--muted); font-size: 12.5px;
}
.qsl-file-status.existing { color: var(--green); }

/* Upload confirmation: filenames stay amber, while the follow-through action
   gets its own row and a filled green button so it cannot disappear into them. */
.qsl-upload-result { font-weight: 700; }
.qsl-upload-files { margin-top: 3px; line-height: 1.55; }
.qsl-upload-view { margin-top: 10px; }
.qsl-view-btn {
  display: inline-flex; align-items: center;
  color: #0d1712 !important;
  background: linear-gradient(180deg, #6fe39a, #4bbf78);
  border-color: #3f9e63;
  padding: 7px 13px;
}
.qsl-view-btn:hover {
  color: #0d1712 !important;
  background: linear-gradient(180deg, #86f0ad, #5fd189);
  border-color: var(--green);
}
.qsl-upload-warning { margin-top: 8px; }

.qsl-missing {
  margin-top: 14px; padding: 9px 12px; border-left: 3px solid var(--amber);
  border-radius: 5px; background: #171d24; color: var(--muted); font-size: 14px;
}
.qsl-missing b { color: var(--text); }
.qsl-missing a { margin-left: 4px; }

.qsl-pdf-tile {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 210px; min-height: 130px; padding: 12px;
  border: 1px solid #2c333c; border-radius: 4px; background: #0d1116;
  color: var(--text); gap: 10px; text-decoration: none;
}
.qsl-pdf-tile:hover {
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(89,180,120,.16);
  text-decoration: none;
}
.qsl-pdf-tile img { display: block; max-width: 210px; max-height: 210px; border-radius: 3px; }
.qsl-pdf-icon {
  display: grid; place-items: center; width: 52px; height: 64px;
  border: 1px solid #6d3a33; border-radius: 4px; color: var(--red);
  font-family: var(--mono); font-weight: 700; letter-spacing: .05em;
  background: #171012;
}
.qsl-thumb-cap a { color: var(--green); }

@media (max-width: 560px) {
  .qsl-ov-context { grid-template-columns: 1fr; }
  .qsl-pdf-tile { min-width: 150px; min-height: 100px; }
  .qsl-pdf-tile img { max-width: 150px; max-height: 150px; }
}

/* Narrow desktop / tablet log table: give non-wrapping Date, UTC and kHz
   values enough room so they do not run into the following columns. The
   tighter horizontal padding keeps all seven columns usable at this width. */
/* The list supplies both date forms. Desktop shows the complete date; the
   shorter month-year form is reserved for the mobile breakpoint below. */
.date-mobile { display: none; }

@media (max-width: 900px) {
  table.log th:nth-child(1) { width: 12%; }  /* Date (short on mobile) */
  table.log th:nth-child(2) { width: 8%;  }  /* UTC                    */
  table.log th:nth-child(3) { width: 21%; }  /* Station                */
  table.log th:nth-child(4) { width: 24%; }  /* Country / Site         */
  table.log th:nth-child(5) { width: 13%; }  /* kHz                    */
  table.log th:nth-child(6) { width: 12%; }  /* Language               */
  table.log th:nth-child(7) { width: 10%; }  /* Flags                  */

  table.log th,
  table.log td {
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* Mobile log table, revision 2026-08-04e.
   Use explicit pixel widths rather than percentages. With table-layout:fixed,
   this guarantees that Country / Site begins much farther left on phones. */
@media (max-width: 820px), (pointer: coarse) and (max-width: 1024px) {
  table.log {
    width: 660px !important;
    min-width: 660px !important;
  }

  table.log th:nth-child(1) { width: 72px !important; }  /* Date           */
  table.log th:nth-child(2) { width: 46px !important; }  /* UTC            */
  table.log th:nth-child(3) { width: 135px !important; } /* Station        */
  table.log th:nth-child(4) { width: 165px !important; } /* Country / Site */
  table.log th:nth-child(5) { width: 78px !important; }  /* kHz            */
  table.log th:nth-child(6) { width: 92px !important; }  /* Language       */
  table.log th:nth-child(7) { width: 72px !important; }  /* Flags          */

  table.log th,
  table.log td {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  table.log th:nth-child(-n+3),
  table.log td:nth-child(-n+3) {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  table.log td:nth-child(1),
  table.log td:nth-child(2) {
    font-size: 14px;
  }

  table.log td:nth-child(3) {
    overflow-wrap: anywhere;
  }

  /* Hide the gray meter-band label beside the frequency on mobile. */
  table.log td.khz .dim { display: none !important; }

  table.log .date-full   { display: none; }
  table.log .date-mobile { display: inline; }
}