/* Dark by default: this page is used in a reading room, where the lights are off and a
   white panel next to the images is actively unpleasant. The header button switches to a
   light theme for the times the room is lit, and the choice sticks in localStorage --
   but only that button turns it on. The OS preference is deliberately not consulted: a
   workstation set to light everywhere else still wants this page dark.

   Every surface and every tint is a token, and the light theme is those same tokens with
   other values -- no second set of rules to keep in sync. The semantic colours also carry
   an `-rgb` triple, because the translucent tints (a selected tab, the recording halo) are
   mixed with rgba(), and a triple written out in the rule would keep the dark hue on the
   light page. */

:root {
  --bg: #0e1116;
  --card: #161b22;
  --head: #12161d;      /* the sticky header, a shade off the page */
  --raised: #1b212a;    /* chips and the record button: above the card */
  --sunk: #0e1319;      /* inputs, text boxes, tabs: below the card */
  --line: #262d38;
  --fg: #e6edf3;
  --mut: #8b949e;
  --accent: #2f81f7;  --accent-rgb: 47,129,247;
  --ok: #3fb950;      --ok-rgb: 63,185,80;
  --warn: #d29922;    --warn-rgb: 210,153,34;
  --bad: #f85149;     --bad-rgb: 248,81,73;
  --rec: #da3633;     --rec-rgb: 218,54,51;
  --radius: 14px;
  /* Native widgets -- the audio player, scrollbars, the select popup -- follow this.
     Without it the dark page draws a white player under the waveform. */
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f2f4f7;
  --card: #ffffff;
  --head: #ffffff;
  --raised: #f2f4f7;
  --sunk: #f6f8fa;
  --line: #d5dbe2;
  --fg: #1f2328;
  --mut: #59636e;
  /* Darkened so that text in these colours clears 4.5:1 on white -- the dark theme's
     values are chosen against #161b22 and are washed out on a light card. */
  --accent: #0969da;  --accent-rgb: 9,105,218;
  --ok: #1a7f37;      --ok-rgb: 26,127,55;
  --warn: #8a6400;    --warn-rgb: 138,100,0;
  --bad: #cf222e;     --bad-rgb: 207,34,46;
  --rec: #cf222e;     --rec-rgb: 207,34,46;
  color-scheme: light;
}

* { box-sizing: border-box; }

/* `[hidden]` is only `display: none` in the UA stylesheet, so ANY author rule that sets
   display on the same element silently outranks it and the element stays visible. That is
   not hypothetical: `.panel { display: block }` and `.adv { display: grid }` both did it,
   and the symptom is a tab bar that highlights correctly while every panel stays on screen
   at once. Author-level and !important so `el.hidden = true` means hidden, always. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 system-ui, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

h1 { font-size: 17px; margin: 0; letter-spacing: .2px; }
h2 { font-size: 12px; margin: 0 0 8px; color: var(--mut); text-transform: uppercase;
     letter-spacing: .09em; font-weight: 600; }
h2:not(:first-child) { margin-top: 18px; }
h3 { font-size: 12px; margin: 14px 0 6px; color: var(--mut); text-transform: uppercase;
     letter-spacing: .07em; font-weight: 600; }
h3.bad { color: var(--bad); }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  background: var(--head); position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 11px; }
.sub { margin: 2px 0 0; font-size: 12px; color: var(--mut); }
.sub b { color: var(--fg); font-weight: 600; }

.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--warn);
       flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(var(--warn-rgb),.15); }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(var(--ok-rgb),.15); }
.dot.bad { background: var(--bad); box-shadow: 0 0 0 3px rgba(var(--bad-rgb),.15); }

.topright { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modes { display: flex; gap: 6px; flex-wrap: wrap; }

/* The theme switch. It is a chip, not a button-button: it sits among the mode chips and
   must not compete with the one blue button on the page, which is Copy. The icon shows
   the theme you would get, and so does the label. */
.theme {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; font-size: 12px; font-weight: 600;
  background: var(--raised); color: var(--mut);
  border: 1px solid var(--line); border-radius: 999px;
}
.theme:hover { color: var(--fg); border-color: var(--mut); }
.theme svg {
  width: 14px; height: 14px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.theme .moon { display: none; }
:root[data-theme="light"] .theme .sun { display: none; }
:root[data-theme="light"] .theme .moon { display: block; }

.chip {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  border: 1px solid var(--line); color: var(--mut); background: var(--raised);
}
.chip.ok   { color: var(--ok);   border-color: rgba(var(--ok-rgb),.35);  background: rgba(var(--ok-rgb),.10); }
.chip.warn { color: var(--warn); border-color: rgba(var(--warn-rgb),.35); background: rgba(var(--warn-rgb),.10); }
.chip.bad  { color: var(--bad);  border-color: rgba(var(--bad-rgb),.35);  background: rgba(var(--bad-rgb),.10); }
.chip.info { color: var(--accent); border-color: rgba(var(--accent-rgb),.35); background: rgba(var(--accent-rgb),.10); }

main { max-width: 720px; margin: 0 auto; padding: 16px; display: grid; gap: 14px; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}

select, input[type=text], input:not([type]) {
  width: 100%; background: var(--sunk); color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 12px; font: inherit; appearance: none;
}
select:focus-visible, input:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.studymeta { margin: 8px 0 0; font-size: 13px; color: var(--mut); }

.seg { display: flex; gap: 8px; }
.seg button {
  flex: 1; padding: 12px 8px; font: inherit; font-weight: 600;
  background: var(--sunk); color: var(--mut);
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.seg button.on { background: rgba(var(--accent-rgb),.14); color: var(--fg); border-color: var(--accent); }

/* ---- capture ---- */

.capture { display: grid; justify-items: center; gap: 10px; }

.rec {
  width: 112px; height: 112px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--line); background: var(--raised);
  display: grid; place-items: center; transition: background .15s, border-color .15s;
}
.rec .ico { width: 30px; height: 30px; border-radius: 50%; background: var(--rec); transition: all .18s; }
.rec:disabled { opacity: .45; cursor: not-allowed; }
.rec.on { border-color: var(--rec); background: rgba(var(--rec-rgb),.16); animation: pulse 1.4s ease-out infinite; }
.rec.on .ico { border-radius: 5px; width: 26px; height: 26px; }
.rec.busy { border-color: var(--accent); background: rgba(var(--accent-rgb),.12); }
.rec.busy .ico { background: var(--accent); border-radius: 5px; animation: blink .9s ease-in-out infinite; }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--rec-rgb),.45); }
                   100% { box-shadow: 0 0 0 22px rgba(var(--rec-rgb),0); } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .rec.on, .rec.busy .ico { animation: none; }
}

.reclabel { margin: 0; font-size: 13px; color: var(--mut); }

.meterrow { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 320px; }
.meter { flex: 1; height: 6px; background: var(--sunk); border-radius: 3px;
         border: 1px solid var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0%; background: var(--ok); transition: width .06s linear; }
.timer { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--mut); min-width: 56px;
         text-align: right; }

.hint { margin: 0; font-size: 12px; color: var(--mut); text-align: center; min-height: 18px; }

.row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; }

button, .filebtn {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--accent); color: #fff; border: 1px solid transparent;
  border-radius: 10px; padding: 10px 16px;
}
button.ghost, .filebtn {
  background: var(--sunk); color: var(--fg); border-color: var(--line);
}
.filebtn input { display: none; }
.filebtn.off { opacity: .45; pointer-events: none; }

.adv { width: 100%; display: grid; gap: 10px; padding-top: 12px;
       border-top: 1px solid var(--line); }
.chk { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; }
.chk input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.chk em { color: var(--mut); font-style: normal; }
.txt { display: grid; gap: 6px; font-size: 13px; color: var(--mut); }