:root{--bg:#0f1117;--surf:#1a1d27;--brd:#2c3040;--txt:#e2e8f0;--muted:#8b93ad;
  --accent:#4f9cf9;--orange:#f97316;--green:#22c55e;--red:#ef4444;
  --gutter:28px}
@media (max-width:640px){:root{--gutter:16px}}
*{box-sizing:border-box;margin:0;padding:0}
/* One rule for every [hidden] element. Author display rules (flex chips, the
   inline-flex REC badge, the flex clip bar) beat the UA's [hidden] otherwise —
   the REC badge used to show on every row that way. */
[hidden]{display:none !important}
body{background:var(--bg);color:var(--txt);font:15px/1.5 system-ui,sans-serif}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;padding:8px 14px;background:var(--accent);
  color:#000;border-radius:0 0 4px 4px;text-decoration:none;font-weight:600;z-index:30}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#page-title:focus,#days:focus{outline:none}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}

header{padding:16px var(--gutter);border-bottom:1px solid var(--brd);
  display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
header h1{font-size:20px;font-weight:600}
#subtitle{color:var(--muted)}
#storage-info{color:var(--muted);font-size:13px;margin-right:auto}

button{cursor:pointer;border:1px solid var(--brd);background:var(--surf);color:var(--txt);
  padding:6px 12px;border-radius:6px;font:inherit;font-size:13px;white-space:nowrap;min-height:32px}
button:hover{background:var(--brd)}
button:disabled,button[aria-disabled=true]{opacity:.55;cursor:default}
input{font:inherit;font-size:14px;background:var(--bg);border:1px solid var(--brd);
  color:var(--txt);padding:5px 8px;border-radius:5px;min-height:32px}
input[type=date]{color-scheme:dark}
input[type=radio]{min-height:0;accent-color:var(--accent)}

/* settings */
#settings{border-bottom:1px solid var(--brd);background:var(--surf)}
#settings summary{padding:10px var(--gutter);cursor:pointer;color:var(--muted);font-size:14px}
#settings summary:hover{color:var(--txt)}
.settings-grid{display:grid;grid-template-columns:max-content 90px 1fr;gap:8px 12px;
  align-items:center;padding:4px var(--gutter) 14px}
.settings-grid label{font-size:14px}
.hint{font-size:12px;color:var(--muted)}
@media (max-width:640px){
  .settings-grid{grid-template-columns:1fr 90px}
  .settings-grid .hint{grid-column:1 / -1;margin-top:-6px}
}

/* filters */
.filter-bar{display:flex;align-items:center;gap:8px 10px;padding:10px var(--gutter);
  border-bottom:1px solid var(--brd);flex-wrap:wrap}
.filter-bar label{font-size:14px;color:var(--muted)}
#filter-name{width:200px}

/* days */
#days{padding:20px var(--gutter)}
.day-section{margin-bottom:18px}
.day-heading-bar{background:var(--surf);padding:6px 10px;border:1px solid var(--brd);
  border-radius:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.day-heading-bar.open{border-radius:8px 8px 0 0}
h2.day-heading{font-size:inherit;font-weight:inherit;flex:1 1 auto}
.day-toggle{background:none;border:none;color:var(--txt);font-size:15px;font-weight:600;
  padding:4px 0;display:inline-flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap;text-align:left;white-space:normal}
.day-toggle:hover{background:none;color:var(--accent)}
.day-meta{color:var(--muted);font-size:13px;font-weight:400}
.day-arrow{font-size:10px}
button.day-hl{color:var(--green);border-color:#166534;background:#052e16}
button.day-hl:hover{background:#0a3d1f}
.day-hl-status{opacity:.8}
.day-hl-container{border:1px solid var(--brd);border-top:none;padding:10px 12px 12px}

/* recordings table; scrolls sideways on narrow screens instead of the page */
.table-wrap{overflow-x:auto;border:1px solid var(--brd);border-top:none}
table{width:100%;border-collapse:collapse}
th,td{padding:9px 10px;border-bottom:1px solid var(--brd);vertical-align:middle;text-align:left}
thead th{color:var(--muted);font-weight:500;font-size:13px;white-space:nowrap}
th.when{font-weight:600;white-space:nowrap}
tr.data-row:hover>*{background:var(--surf)}
td.file{color:var(--muted);font-size:12px;white-space:nowrap}
.fn{font-family:ui-monospace,monospace}
.badge{display:inline-block;padding:1px 6px;border-radius:3px;font-size:10px;
  font-weight:700;border:1px solid}
.badge-wav{color:var(--green);border-color:#166534;background:#052e16}
.badge-mp3{color:var(--accent);border-color:#1e40af;background:#0c1a40}
.badge-ogg{color:#c084fc;border-color:#6b21a8;background:#2d1157}
.badge-flac{color:#fb923c;border-color:#7c2d12;background:#2c0e04}
.badge-aac,.badge-opus{color:var(--muted);border-color:var(--brd);background:var(--surf)}
.badge-rec{display:inline-flex;align-items:center;padding:1px 6px;border-radius:3px;
  font-size:11px;font-weight:700;color:var(--red);border:1px solid #7f1d1d;background:#2d0808;
  animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.badge-rec{animation:none}}
.actions{display:flex;gap:6px;align-items:center}
a.dl{color:var(--accent);text-decoration:none;font-size:13px;padding:6px 4px}
a.dl:hover{text-decoration:underline}
button.del{color:var(--red);border-color:#7f1d1d}
button.del:hover:not(:disabled){background:#2d0808}
button.cut{color:var(--accent);border-color:#1e40af;background:#0c1a40}
button.cut:hover:not(:disabled){background:#1e3a8a}

/* analysis */
td.loudness{min-width:200px}
.wbox{background:var(--surf);border:1px solid var(--brd);border-radius:6px;padding:8px 10px}
.analysis-meta{font-size:12px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{background:#431407;color:var(--orange);border:1px solid #7c2d12;border-radius:5px;
  padding:4px 9px;font-size:12px;font-family:ui-monospace,monospace;min-height:30px}
.chip:hover{background:#6c1f08;border-color:#9a3412}
.chip-toggle{margin-top:8px}
button.reanalyse-btn{margin-top:8px;font-size:12px;color:var(--muted);background:transparent}
.quiet{color:var(--muted);font-size:13px}
.quiet+.quiet{margin-top:6px}
.prog-bar{height:4px;background:var(--brd);border-radius:2px;margin:6px 0 4px;overflow:hidden}
.prog-fill{height:100%;width:0;background:var(--accent);transition:width .15s ease}
@media (prefers-reduced-motion:reduce){.prog-fill{transition:none}}
.prog-file{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty{text-align:center;padding:60px 16px;color:var(--muted)}

/* full-file player cell, options cell */
audio{width:100%;height:40px;display:block;color-scheme:dark;accent-color:var(--accent)}
td.player audio{width:300px;margin-top:6px}
.cut-panel{display:flex;align-items:center;gap:8px 12px;margin-top:8px;flex-wrap:wrap}
.cut-field{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.cut-time{width:110px;font-family:ui-monospace,monospace}

/* clip player bar */
#clip-bar{position:fixed;bottom:0;left:0;right:0;z-index:20;background:var(--surf);
  border-top:1px solid var(--brd);padding:8px var(--gutter);display:flex;flex-direction:column;gap:6px}
.clip-row{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
#clip-label{flex:1 1 240px;font-family:ui-monospace,monospace;font-size:13px;min-width:0}
#clip-audio{flex:1 1 260px;min-width:200px;width:auto}
#clip-adv{border:none;display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap}
#clip-adv legend{float:left;font-size:12px;color:var(--muted);margin-right:4px}
#clip-adv label{font-size:13px;display:flex;align-items:center;gap:5px;cursor:pointer}
body.clip-open{padding-bottom:130px}