/* Same tokens as the emulator page (web/style.css). The web font link is left
   out because a stylesheet link holds up the first paint on a weak signal, and
   this page is used outdoors. */
:root {
  --bg: #f4f4f2;
  --panel: #ffffff;
  --text: #1b1b1b;
  --muted: #5a5a5a;
  --line: #8a8a86;
  --accent: #0072b3;
  --accent-text: #ffffff;
  --accent-fill: #0072b3;
  --rec: #c81d25;
  --focus: #0092e5;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121212;
    --panel: #1c1c1c;
    --text: #ececec;
    --muted: #a6a6a6;
    --line: #6e6e6e;
    --accent: #0092e5;
    --rec: #ff6b70;
  }
}
:root[data-theme="dark"] {
  --bg: #121212;
  --panel: #1c1c1c;
  --text: #ececec;
  --muted: #a6a6a6;
  --line: #6e6e6e;
  --accent: #0092e5;
  --rec: #ff6b70;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); color: var(--text); }
body {
  margin: 0;
  background: var(--bg);
  font: 15px/1.45 "Atkinson Hyperlegible Next", system-ui, sans-serif;
}
main { max-width: 26rem; margin: 0 auto; padding: 16px; }
h1 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }

/* The time is what every recorder receives, so it is large enough to compare with
   a watch, but the send button stays the main thing on the page. Tabular figures
   stop it moving as the seconds change. */
.clock { margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.clock .label { display: block; color: var(--muted); font-size: 13px; }
.clock .time { display: block; font-size: clamp(36px, 11vw, 44px); line-height: 1.05; font-weight: 600; }
.clock .date { display: block; }

/* Selection is shown by colour and a bar, so the labels keep their width. */
.tabs { display: flex; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
.tabs button {
  flex: 1;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent); }
.tabs button:focus-visible,
.send:focus-visible,
.command:focus-visible,
.plain:focus-visible,
input:focus-visible,
select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.fields.one { grid-template-columns: 1fr; }
.fields label { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-width: 0; }
/* 16 px text stops iOS zooming the page when a field gets focus. */
input[type="text"], select {
  width: 100%;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
input::placeholder { color: var(--muted); opacity: 1; }
/* The error message names the field. The inset shadow thickens the border without moving anything. */
[aria-invalid="true"] { border-color: var(--rec); box-shadow: inset 0 0 0 1px var(--rec); }
.hint { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.hint.result { color: var(--text); font-variant-numeric: tabular-nums; }
.check { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }

/* A quiet control for filling in a field. Only the send button is filled. */
.plain {
  min-height: 44px;
  margin: -4px 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

/* The send button stays in view while the person scrolls through the fields. The
   band of page colour keeps the scrolled text clear of the button. */
.send-bar { position: sticky; bottom: 0; z-index: 1; padding: 8px 0; background: var(--bg); }
/* The X8 tab has no fields to scroll past, and a stuck button would sit over the remote's section. */
.send-bar.in-flow { position: static; }
.send {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  background: var(--accent-fill);
  color: var(--accent-text);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}
/* Fields are locked during a run and during a location lookup, and the send button
   during a lookup and a chirp. All locked controls look the same. */
input:disabled, select:disabled, .plain:disabled, .send:disabled, .command:disabled { opacity: 0.6; cursor: default; }

/* Reserved lines keep the text below in place when the status changes. */
.status { min-height: calc(2 * 1.45em); margin: 4px 0 20px; font-variant-numeric: tabular-nums; }
.status.tall { min-height: calc(4 * 1.45em); }
.status.error { color: var(--rec); font-weight: 600; }
.status .latest { white-space: nowrap; }

h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
/* The X8 tab's other commands are outlined, so Set X8 clock is its one filled button. */
.command {
  min-height: 48px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
/* Two buttons of equal weight: which one is wanted depends on what the recorder is doing. */
.remote-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 16px; }
/* The X8's own mode names, in the order of its mode buttons. */
.mode-buttons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mode-buttons + .status { margin-top: 8px; }

.note { margin: 0 0 16px; }
/* What the reader would not assume: the recorder can't use the sound yet, or nobody has tested it. */
.note.exception { font-weight: 600; }
.help { margin: 0 0 16px; padding: 0; list-style: none; }
.help li { margin-bottom: 8px; }
.help ul { margin: 4px 0 0; padding-left: 16px; list-style: none; }
.help ul li { margin-bottom: 2px; }
code { font-family: ui-monospace, "Atkinson Hyperlegible Mono", monospace; font-size: 0.95em; }

footer { color: var(--muted); font-size: 13px; }
footer p { margin: 0 0 4px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }