/* Plain, readable admin styles. Light and dark follow the system. */
:root {
  color-scheme: light dark;
  --bg: light-dark(#e8e6e1, #12161a);
  --surface: light-dark(#dad7d0, #1a1f25);
  --text: light-dark(#1a1c1f, #e6e3db);
  --muted: light-dark(#4e5258, #98a0a8);
  --primary: light-dark(#2d6180, #77acce);
  --error: light-dark(#b3372f, #e0766f);
  --warning: light-dark(#8a5a00, #e0b04f);
  --radius: 6px;
}
* { box-sizing: border-box; }
body.admin { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.6 system-ui, sans-serif; }
a { color: var(--primary); }
.admin-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; padding: 0.75rem 1rem; background: var(--surface); }
.admin-brand { font-weight: 600; white-space: nowrap; }
.admin-nav { display: flex; gap: 1rem; margin-right: auto; }
.admin-header .link-button { white-space: nowrap; }
.admin-main { max-width: 52rem; margin: 2rem auto; padding: 0 1rem; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 1rem; }
h2 { font-size: 1.125rem; margin: 2rem 0 0.5rem; }
h3 { font-size: 1rem; margin: 0; }
h4 { font-size: 0.9rem; margin: 1rem 0 0.25rem; color: var(--muted); }
.stack { display: grid; gap: 1rem; margin: 1rem 0; max-width: 32rem; }
.stack.note-form { max-width: none; }
.field { display: grid; gap: 0.25rem; }
.field-check { grid-template-columns: auto 1fr; align-items: center; column-gap: 0.5rem; justify-content: start; }
.field-check .hint { grid-column: 1 / -1; }
.field-error { margin: 0; color: var(--error); font-size: 0.9rem; }
input[type="email"], input[type="password"], input[type="text"], input[type="number"], input[type="url"], input[type="datetime-local"], textarea, select {
  font: inherit; padding: 0.5rem 0.75rem; border: 1px solid var(--muted); border-radius: var(--radius); background: var(--bg); color: var(--text);
}
input[type="number"] { max-width: 8rem; }
input[type="file"] { font: inherit; max-width: 100%; }
select { justify-self: start; max-width: 100%; }
textarea, .note-form input[type="text"], .bed-form input[type="text"], .bed-form input[type="url"] { width: 100%; }
textarea { resize: vertical; }
.stack.bed-form { max-width: 40rem; }
fieldset { margin: 0; padding: 0.75rem 1rem 1rem; border: 1px solid var(--muted); border-radius: var(--radius); }
fieldset.stack { max-width: none; }
legend { padding: 0 0.25rem; font-weight: 600; }
legend + .hint { margin: 0; }
input[type="submit"], button, .button { font: inherit; padding: 0.5rem 1rem; border: 0; border-radius: var(--radius); background: var(--primary); color: var(--bg); cursor: pointer; }
a.button { display: inline-block; color: var(--bg); text-decoration: none; }
.button-danger { background: var(--error); }
.link-button { background: none; color: var(--text); text-decoration: underline; padding: 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin: 0.75rem 0; }
.actions form, .actions p { margin: 0; }
.actions .link-button { color: var(--primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius); }
.flash { padding: 0.5rem 0.75rem; border-radius: var(--radius); background: var(--surface); }
.flash-alert { border-left: 4px solid var(--error); }
.flash-warning { border-left: 4px solid var(--warning); }
.hint { color: var(--muted); font-size: 0.9rem; }
.secret, code { font-family: ui-monospace, monospace; }
.qr img { display: block; width: 12rem; height: 12rem; background: #fff; padding: 0.5rem; border-radius: var(--radius); }
.codes { columns: 2; }
.token { font-size: 1.1rem; overflow-wrap: anywhere; }
.recovery { margin-top: 2rem; }
.events { padding-left: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--surface); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }

dl.credits, dl.counts, dl.release { display: grid; gap: 0.25rem; margin: 0.5rem 0; }
dl.credits div, dl.counts div, dl.release div { display: flex; gap: 0.75rem; }
dl.credits dt, dl.counts dt, dl.release dt { min-width: 7rem; color: var(--muted); }
dl.credits dd, dl.counts dd, dl.release dd { margin: 0; }
dl.release ul { margin: 0; padding-left: 1rem; }
dl.release ul.release-notes { padding-left: 0; list-style: none; }
.release-notes input { margin: 0 0.5rem 0 0; }
.release-warnings { margin: 0.5rem 0; padding-left: 1.75rem; border-left: 4px solid var(--warning); }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.75rem 0; }
.inline-form + .hint { margin-top: 0; }
form.inline { display: inline; }
.release-waiting { padding-left: 1rem; }
.release-history { margin: 0; padding: 0; list-style: none; }
.release-history > li { margin: 1rem 0; padding: 1rem; border-radius: var(--radius); background: var(--surface); }
.release-history p { margin: 0.25rem 0; }
.release-history .flash { background: var(--bg); }

.badge { display: inline-block; padding: 0 0.5rem; border: 1px solid var(--muted); border-radius: 999px; font-size: 0.85rem; font-weight: 400; }
.badge-chosen { background: var(--primary); border-color: var(--primary); color: var(--bg); }
.badge-failed { border-color: var(--error); color: var(--error); }
.note-text { margin: 0.5rem 0; padding: 0.75rem 1rem; border-radius: var(--radius); background: var(--surface); font: inherit; white-space: pre-wrap; }

.list-warnings { margin: 1rem 0; padding: 0.5rem 0.75rem 0.5rem 1.75rem; border-left: 4px solid var(--warning); border-radius: var(--radius); background: var(--surface); }
.issue-preview { white-space: normal; }
.issue-preview p { margin: 0 0 0.75rem; }
.issue-preview hr { border: 0; border-top: 1px solid var(--muted); }

.take { margin: 1rem 0; padding: 1rem; border-radius: var(--radius); background: var(--surface); }
.take .hint { margin: 0.25rem 0; }
.take .flash { background: var(--bg); }
audio { display: block; width: 100%; max-width: 28rem; margin: 0.5rem 0; }
.words { margin: 0.5rem 0; line-height: 2; }
/* The words are buttons (keyboard access) that look like the running text. */
.word { margin: 0 -0.1rem; padding: 0.1rem; border: 0; border-radius: 3px; background: none; color: inherit; font: inherit; cursor: pointer; }
.word:hover { background: var(--bg); }
.word.is-current { background: var(--primary); color: var(--bg); }
.peaks { display: block; width: 100%; max-width: 14rem; height: auto; margin: 0.5rem 0; color: var(--primary); }
.peaks path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }