/* RoboAlarms firmware server: the one stylesheet of its public and admin pages (FWS-074), drawn first for the
 * mockups. The RoboAlarms identity as the website, the manual and the Flasher use it: teal #007b7d on
 * light pages and #94eff0 on dark ones, the Segoe UI system stack, 7px buttons, 4px tags and 12px
 * hairline cards. The pages follow the computer's light or dark setting. Nothing flashes, pulses or
 * animates: state is colour, words and symbols. */

:root {
  color-scheme: light;
  --bg: #f7faf9;
  --surface: #ffffff;
  --surface-raised: #edf3f2;
  --soft: #eef4f2;
  --ink: #142b30;
  --muted: #536970;
  --faint: #7a8e92;
  --line: #d3dfdd;
  --line-strong: #b9cac7;
  --accent: #007b7d;
  --accent-strong: #006668;
  --accent-bg: #e0f3ef;
  --button-ink: #ffffff;
  --amber: #865914;
  --amber-bg: #fbf1de;
  --red: #b3261e;
  --red-bg: #fdecea;
  --red-ink: #ffffff;
  --shadow: 0 10px 30px rgb(20 43 48 / 14%);
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --radius: 12px;
  --font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: ui-monospace, 'Cascadia Code', Consolas, 'SF Mono', Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #111719;
    --surface: #172023;
    --surface-raised: #1c282b;
    --soft: #151d20;
    --ink: #f3f7f6;
    --muted: #a5b5b8;
    --faint: #7d8f93;
    --line: #2a373b;
    --line-strong: #3a4b50;
    --accent: #94eff0;
    --accent-strong: #17bec2;
    --accent-bg: #17393b;
    --button-ink: #093335;
    --amber: #f0cf8f;
    --amber-bg: #2c2517;
    --red: #ff8a80;
    --red-bg: #3a1d1b;
    --red-ink: #2a0d0b;
    --shadow: 0 10px 30px rgb(0 0 0 / 45%);
    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #111719;
  --surface: #172023;
  --surface-raised: #1c282b;
  --soft: #151d20;
  --ink: #f3f7f6;
  --muted: #a5b5b8;
  --faint: #7d8f93;
  --line: #2a373b;
  --line-strong: #3a4b50;
  --accent: #94eff0;
  --accent-strong: #17bec2;
  --accent-bg: #17393b;
  --button-ink: #093335;
  --amber: #f0cf8f;
  --amber-bg: #2c2517;
  --red: #ff8a80;
  --red-bg: #3a1d1b;
  --red-ink: #2a0d0b;
  --shadow: 0 10px 30px rgb(0 0 0 / 45%);
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.6 var(--font); color: var(--ink); background: var(--bg); }
a { color: var(--accent); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--bg); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 26px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 17px; line-height: 1.35; font-weight: 650; }
h3 { font-size: 17px; line-height: 1.35; font-weight: 650; margin-bottom: 8px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* App bar: the website's header and wordmark */
.appbar { display: flex; align-items: center; gap: 16px; padding: 10px 20px; min-height: 64px; background: var(--bg); border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--ink); text-decoration: none; }
.wordmark img { width: 32px; height: 32px; object-fit: contain; }
.wordmark b { font-size: 21px; font-weight: 750; letter-spacing: -.055em; }
.wordmark span { color: var(--muted); font-size: 15px; padding-left: 12px; border-left: 1px solid var(--line); }
.who { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.who a { color: var(--ink); font-weight: 650; text-decoration: none; }
.who a:hover { text-decoration: underline; }
.who form { margin: 0; }

/* Side menu and page */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: calc(100vh - 64px); }
.sidemenu { padding: 20px 12px; border-right: 1px solid var(--line); }
.sidemenu .group + .group { margin-top: 20px; }
.sidemenu .label { display: block; padding: 0 10px 4px; font-size: 12.5px; font-weight: 650; color: var(--faint); }
.sidemenu a { display: block; padding: 7px 10px; border-radius: 7px; color: var(--ink); font-size: 14.5px; text-decoration: none; }
.sidemenu a:hover { background: var(--surface-raised); }
.sidemenu a[aria-current='page'] { background: var(--accent-bg); color: var(--accent); font-weight: 650; }
main { padding: 28px 32px 56px; max-width: 1180px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head p { margin-top: 6px; max-width: 64ch; color: var(--muted); }
.footnote { margin-top: 12px; font-size: 13.5px; color: var(--muted); }

/* Buttons: 7px corners */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--ink); font: 600 14px/1.2 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { background: var(--surface-raised); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--button-ink); }
.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.danger { background: var(--red); border-color: var(--red); color: var(--red-ink); }
.btn.small { min-height: 32px; padding: 0 11px; font-size: 13.5px; }

/* Tags: 4px corners, always words, never colour alone */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--soft); color: var(--muted); font-size: 12.5px; font-weight: 600; line-height: 22px; white-space: nowrap; }
.tag.good { background: var(--accent-bg); border-color: transparent; color: var(--accent); }
.tag.warn { background: var(--amber-bg); border-color: transparent; color: var(--amber); }
.tag.bad { background: var(--red-bg); border-color: transparent; color: var(--red); }

/* Cards: 12px hairline */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.dialog { padding: 20px 22px; }
.dialog p + p, .dialog p + .linkbox, .dialog .linkbox + p { margin-top: 10px; }
.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* Lists */
.list { width: 100%; border-collapse: collapse; }
.list th { padding: 11px 18px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.list td { padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.list tbody tr:last-child td { border-bottom: 0; }
.list td small { display: block; color: var(--faint); font-size: 12.5px; }
.list .row-actions { width: 1%; text-align: right; white-space: nowrap; }
.person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.person b { display: flex; align-items: center; gap: 8px; font-weight: 650; }
.person small { color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }
.avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); font-weight: 700; }

/* Menus: <details>, so they need no script */
.menu { position: relative; display: inline-block; text-align: left; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; min-width: 236px; padding: 6px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow); }
.menu-list a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--ink); font-size: 14px; text-decoration: none; }
.menu-list a:hover { background: var(--surface-raised); }
.menu-list a.danger { color: var(--red); }
.menu-list hr { margin: 6px 0; border: 0; border-top: 1px solid var(--line); }

/* Forms */
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 14px; font-weight: 650; }
.field input, .field select { height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--ink); font: 15px var(--font); }
.field select { padding: 0 8px; min-width: 0; }
.field > input, .field > select, .field > textarea { width: 100%; min-width: 0; }
.field .hint { font-size: 13px; color: var(--muted); }
.linkbox { padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--soft); font: 13px/1.5 var(--mono); overflow-wrap: anywhere; user-select: all; }

/* Notices */
.notice { padding: 12px 16px; border-radius: 10px; font-size: 14.5px; }
.notice.warn { background: var(--amber-bg); }
.notice.warn b { color: var(--amber); }

/* Public download page (FWS-060): one column, no side menu */
main.site { max-width: 960px; margin: 0 auto; padding: 28px 16px 48px; }
.site .lede { margin-top: 6px; color: var(--muted); }
.finder { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 16px; align-items: end; margin-top: 20px; padding: 18px 20px; }
.finder .field { margin: 0; }
.site .help { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.results-head { margin: 28px 0 12px; }
.release { padding: 16px 20px 8px; }
.release + .release { margin-top: 14px; }
.release-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.release-head h3 { margin: 0 6px 0 0; font-size: 20px; }
.release-date { margin-left: auto; color: var(--muted); font-size: 14px; }
.release-notes { margin-top: 6px; color: var(--muted); }
.files { margin-top: 12px; }
.files h4 { margin: 0 0 2px; font-size: 12.5px; font-weight: 650; color: var(--faint); }
.file { display: flex; align-items: center; gap: 10px 14px; padding: 9px 0; border-top: 1px solid var(--line); }
.file-main { flex: 1; min-width: 0; }
.file-main .tag { margin-left: 6px; }
.file-main small { display: block; color: var(--faint); overflow-wrap: anywhere; }
.file-size { color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A version's Firmware and Language packs tabs: radio buttons, so they need no script */
.vtabs { display: flex; flex-wrap: wrap; margin-top: 12px; }
.vtabs input { position: absolute; opacity: 0; pointer-events: none; }
.vtabs label { padding: 8px 12px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14.5px; font-weight: 650; cursor: pointer; }
.vtabs label:hover { color: var(--ink); }
.vtabs input:checked + label { border-bottom-color: var(--accent); color: var(--accent); }
.vtabs input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 4px; }
.vtabs .count { margin-left: 4px; padding: 0 6px; border-radius: 4px; background: var(--soft); color: var(--muted); font-size: 12.5px; }
.vpanel { display: none; flex-basis: 100%; min-width: 0; border-top: 1px solid var(--line); }
.vtabs input:first-of-type:checked ~ .vpanel-fw, .vtabs input:last-of-type:checked ~ .vpanel-lang { display: block; }
.vpanel .file:first-child { border-top: 0; }

/* Tabs that split a busy admin page into its parts: radio buttons and labels, so they work without
 * JavaScript. The server also gives each tab its own address (?tab=email), so a Save returns to it. */
.tabs { display: flex; flex-wrap: wrap; gap: 0 2px; margin-top: 4px; }
.tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.tabs > label { position: relative; z-index: 1; margin-bottom: -1px; padding: 9px 14px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 15px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.tabs > label:hover { color: var(--ink); }
.tabs > input:checked + label { border-bottom-color: var(--accent); color: var(--accent); }
.tabs > input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 4px; }
.tabs .count { margin-left: 4px; padding: 0 6px; border-radius: 4px; background: var(--soft); color: var(--muted); font-size: 12.5px; }
.tabs .count.warn { background: var(--amber-bg); color: var(--amber); }
.tab-panel { display: none; flex-basis: 100%; min-width: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.tabs > input:nth-of-type(1):checked ~ .tab-panel:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ .tab-panel:nth-of-type(2),
.tabs > input:nth-of-type(3):checked ~ .tab-panel:nth-of-type(3),
.tabs > input:nth-of-type(4):checked ~ .tab-panel:nth-of-type(4),
.tabs > input:nth-of-type(5):checked ~ .tab-panel:nth-of-type(5) { display: block; }
.tab-panel > .card + .card, .tab-panel > .card + .section, .tab-panel > .notice + .card { margin-top: 16px; }
.choices { display: grid; gap: 8px; }
.choices .check { margin: 0; font-weight: 600; }
.choices .check small { font-weight: 400; }
.choices .inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.choices .inline input[type='date'] { width: auto; height: auto; margin: 0; }
.choices .inline input[type='radio'] { margin: 0; }
.preview { margin-top: 16px; padding: 12px 14px; border-radius: 8px; background: var(--soft); font-size: 14.5px; }
.preview b { font-variant-numeric: tabular-nums; }
.more-filters { grid-column: 1 / -1; }
.more-filters > summary { color: var(--accent); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.more-filters[open] > summary { margin-bottom: 12px; }
.more-filters > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 16px; }
.vempty { padding: 12px 0; color: var(--muted); font-size: 14px; }
.empty { padding: 18px 20px; color: var(--muted); }
.empty .btn { margin-top: 10px; }
.site-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; }

/* Sign-in pages: one card, no menu */
.auth { max-width: 420px; margin: 0 auto; padding: 48px 16px 40px; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px; color: var(--ink); text-decoration: none; }
.auth-brand img { width: 36px; height: 36px; }
.auth-brand b { font-size: 23px; font-weight: 750; letter-spacing: -.055em; }
.auth-brand span { color: var(--muted); padding-left: 12px; border-left: 1px solid var(--line); }
.auth .card { padding: 26px 24px; }
.auth h1 { font-size: 22px; margin-bottom: 6px; }
.auth .lead { margin-bottom: 18px; color: var(--muted); }
.btn.block { width: 100%; min-height: 42px; }
.or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--faint); font-size: 13px; }
.or::before, .or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 14px; font-size: 14px; }
.auth-foot { margin-top: 18px; font-size: 13px; color: var(--muted); text-align: center; }
.code-input { font: 600 24px/1 var(--mono) !important; letter-spacing: .3em; text-align: center; }
.notice.bad { background: var(--red-bg); }
.notice.bad b { color: var(--red); }
.notice.info { background: var(--accent-bg); }
.notice + .card, .notice + form { margin-top: 12px; }

/* Admin sections: a card per group, saved on its own */
.section { padding: 20px 22px; }
.section + .section, .section + .danger, .card + .section { margin-top: 16px; }
.section-head { margin-bottom: 16px; }
.section-head p { margin-top: 4px; color: var(--muted); font-size: 14.5px; max-width: 70ch; }
.section-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.section-foot .muted { margin-right: auto; font-size: 13.5px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.field textarea { min-height: 140px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--ink); font: 14px/1.55 var(--mono); resize: vertical; }
.field input[readonly] { background: var(--soft); color: var(--muted); }
.check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 14.5px; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.check small { display: block; color: var(--muted); font-size: 13px; }
.danger { padding: 18px 22px; border-color: var(--red-bg); }
.danger h2 { color: var(--red); }
.danger-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.danger-row + .danger-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.danger-row p { max-width: 62ch; color: var(--muted); font-size: 14.5px; }
dl.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; font-size: 14.5px; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.hash { font: 12.5px/1.5 var(--mono); overflow-wrap: anywhere; color: var(--muted); }

.crumbs { margin-bottom: 4px; font-size: 14px; color: var(--muted); }
.publish { display: flex; flex-wrap: wrap; gap: 8px; }
.publish select { height: 38px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--ink); font: 14px var(--font); }
fieldset.field { margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 6px; }
fieldset.field > legend:not(.hint) { font-size: 14px; font-weight: 650; }
fieldset.field .check { margin-bottom: 6px; }
.page-head h1 .tag { vertical-align: 5px; margin-left: 6px; }
pre.cmd { margin: 6px 0 0; padding: 10px 12px; border-radius: 7px; background: var(--soft); border: 1px solid var(--line); font: 13px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Filters shown as a row of choices, each a link */
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.seg a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.seg a:hover { background: var(--surface-raised); }
.seg a[aria-current='page'] { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.seg .n { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.list td.num, .list th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Upload */
.dropzone { display: grid; place-items: center; gap: 6px; padding: 26px 16px; border: 2px dashed var(--line-strong); border-radius: 10px; background: var(--soft); text-align: center; color: var(--muted); }
.dropzone b { color: var(--ink); }
.checklist { margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.checklist li { display: flex; gap: 10px; padding: 6px 0; }
.checklist .mark { flex: none; width: 20px; text-align: center; font-weight: 700; }
.checklist .ok .mark { color: var(--accent); }
.checklist .no .mark { color: var(--amber); }
.timeline { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.timeline li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.timeline li:first-child { border-top: 0; }
.timeline time { color: var(--muted); font-variant-numeric: tabular-nums; }
.two-col { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }

/* Audit entries: a line that opens to its details */
.entries { overflow: hidden; }
.entry-line, .entries-head { display: grid; grid-template-columns: 160px 130px minmax(0, 1.2fr) minmax(0, 1.4fr) 90px; gap: 12px; align-items: center; padding: 10px 18px; font-size: 14px; }
.entries-head { border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12.5px; font-weight: 650; }
.entry { border-bottom: 1px solid var(--line); }
.entry:last-child { border-bottom: 0; }
.entry > summary { list-style: none; cursor: pointer; }
.entry > summary::-webkit-details-marker { display: none; }
.entry > summary:hover { background: var(--surface-raised); }
.entry[open] > summary { background: var(--soft); }
.entry-line > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-line time { font-variant-numeric: tabular-nums; color: var(--muted); }
.entry-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px 28px; padding: 14px 18px 18px; background: var(--soft); }
.entry-body h4 { margin: 0 0 8px; font-size: 12.5px; color: var(--faint); font-weight: 650; }
.diff { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.diff th, .diff td { padding: 5px 8px; border: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.diff th { color: var(--muted); font-weight: 650; }
.diff th:first-child, .diff td:first-child { overflow-wrap: normal; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 14px; color: var(--muted); }

/* Stats: charts drawn on the server as SVG, each with its table */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { padding: 14px 18px; }
.tile small { display: block; color: var(--muted); font-size: 13px; }
.tile b { display: block; margin-top: 2px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile span { font-size: 13px; color: var(--muted); }
.chart { padding: 18px 20px 14px; }
.chart + .chart, .chart-grid + .chart, .chart + .chart-grid { margin-top: 16px; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.chart-grid > .chart { margin-top: 0; }
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; }
.chart-head p { color: var(--muted); font-size: 13.5px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.plot { overflow-x: auto; }
.chart svg text { fill: var(--muted); font: 12px var(--font); }
.chart .grid line { stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.chart .area-fill { fill: var(--accent); opacity: .1; }
.chart .end { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.chart text.end-label { fill: var(--ink); font-weight: 650; }
.chart .mark-line { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .hit { fill: transparent; }
.chart .s1 { fill: var(--s1); } .chart .s2 { fill: var(--s2); } .chart .s3 { fill: var(--s3); }
.chart .s0 { fill: var(--faint); } .chart .s-accent { fill: var(--accent); }
.chart text.flag { fill: var(--amber); font-weight: 650; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.table-view { margin-top: 10px; font-size: 13.5px; }
.table-view summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.table-view .list td, .table-view .list th { padding: 6px 10px; }
.bars-h { display: grid; gap: 8px; font-size: 13.5px; }
.bars-h div { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr) 44px; gap: 10px; align-items: center; }
.bars-h span:nth-child(2) { height: 10px; border-radius: 0 4px 4px 0; background: var(--accent); }
.bars-h span:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.mix-group + .mix-group { margin-top: 16px; }
.mix-group h4 { margin: 0 0 8px; font-size: 12.5px; color: var(--faint); font-weight: 650; }

/* Profile */
.qr { display: block; width: 148px; height: 148px; padding: 8px; border-radius: 8px; background: #fff; }
.secret { font: 600 14px/1.5 var(--mono); letter-spacing: .08em; overflow-wrap: anywhere; }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 14px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--soft); font: 14px/1.6 var(--mono); }
.setup-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 22px; align-items: start; }

@media (max-width: 720px) {
  .plot svg { min-width: 600px; }
}
@media (max-width: 560px) {
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .setup-grid { grid-template-columns: minmax(0, 1fr); }
  .section, .danger, .chart { padding: 16px; }
  .auth { padding-top: 28px; }
  .auth .card { padding: 22px 18px; }
  .page-head .btn { width: 100%; }
  .section-foot .btn { flex: 1; }
  .file { flex-wrap: wrap; }
  .file-main { flex-basis: 100%; }
  .file .btn { margin-left: auto; }
  .tabs > label { padding: 9px 10px; font-size: 14.5px; }
}
@media (max-width: 900px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .entry-line, .entries-head { grid-template-columns: 136px minmax(0, 1fr) 80px; }
  .entry-line .who, .entry-line .target, .entries-head .who, .entries-head .target { display: none; }
  .entry-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .sidemenu { display: flex; gap: 4px; padding: 8px 16px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .sidemenu .group { display: contents; }
  .sidemenu .label { display: none; }
  main { padding: 22px 16px 48px; }
}
@media (max-width: 720px) {
  .appbar { padding: 8px 16px; gap: 10px; }
  .wordmark span, .who-label { display: none; }
  .list thead { display: none; }
  .list, .list tbody, .list tr, .list td { display: block; width: 100%; }
  .list tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .list tbody tr:last-child { border-bottom: 0; }
  .list td { padding: 3px 0; border: 0; }
  .list td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--faint); }
  .list td:first-child::before { display: none; }
  .list .row-actions { width: auto; padding-top: 10px; text-align: left; }
  .menu-list { left: 0; right: auto; }
}

/* Server additions: what the pages need beyond the mockups' stylesheet (docs/mockup/site.css, which stays
 * the design source and is copied above unchanged). The mockups' inline styles live here as classes,
 * because the pages' Content-Security-Policy allows no inline style. */
.auth .card > p + p { margin-top: 10px; }
.auth .card > p + .field, .auth .card > .muted + .field { margin-top: 14px; }
.auth .card .notice { margin-bottom: 16px; }
.auth .card .btn + .btn { margin-top: 10px; }
.auth .codes { margin: 4px 0 18px; }
.auth .secret { margin: 8px 0 14px; }
.code-input.long { font-size: 17px !important; letter-spacing: .06em; }
.linkbutton { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.notice.page-notice { margin-bottom: 18px; }
.notice a { color: inherit; }
.release-head h1 { margin: 0 6px 0 0; }
.site .crumbs { margin-bottom: 6px; }
.site .section { margin-top: 18px; }
.site .section + .help { margin-top: 14px; }
.prose { overflow-wrap: anywhere; }
.prose > * + * { margin-top: 12px; }
.prose h2, .prose h3, .prose h4 { margin-top: 22px; }
.prose > :first-child { margin-top: 0; }
.prose h4 { font-size: 15px; font-weight: 650; }
.prose ul, .prose ol { margin-bottom: 0; padding-left: 22px; }
.prose li + li { margin-top: 4px; }
.prose code { padding: 1px 5px; border-radius: 4px; background: var(--soft); font: 13px var(--mono); }
.prose pre { margin-bottom: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--soft); overflow-x: auto; font: 13px/1.5 var(--mono); }
.prose pre code { padding: 0; background: none; }
.prose dl.kv { margin-top: 12px; }
.prose hr { height: 0; margin: 20px 0 0; border: 0; border-top: 1px solid var(--line); }
/* The passkey step's button stays disabled until the passkey script enables it. */
.btn:disabled { opacity: .5; cursor: not-allowed; }
.auth .card [data-passkey-error] { margin: 0 0 14px; }
/* Styles of the audit admin pages, served after site.css (static.go). */

/* audit.html: the mockup's inline styles as classes */
.aud-actions { margin: 0; justify-content: flex-start; }
.aud-entries { margin-top: 16px; }
.aud-narrowed { margin-top: 12px; font-size: 14px; color: var(--muted); }
.aud-next { margin-top: 14px; }
.aud-why { font-size: 14px; overflow-wrap: anywhere; }
.aud-entries .entry-body dd.hash { font-size: 12.5px; }

@media (max-width: 560px) {
  .aud-actions .btn { flex: 1; }
}
/* Styles of the catalogue admin pages, served after site.css (static.go). */

/* Boards and peripherals (boards.html): the mockup's inline margins as classes */
dl.kv.cat-kv { margin-top: 14px; }
.cat-head { margin-top: 32px; }
.cat-sub { margin: 18px 0 8px; font-size: 14px; font-weight: 650; }
.cat-none { font-size: 14px; }
.cat-links { margin-top: 12px; font-size: 14px; }
.cat-boot .hash { display: inline-block; max-width: 34ch; }
.cat-problems { margin: 6px 0 0; padding-left: 20px; }
.cat-problems li + li { margin-top: 2px; }
.cat-cr { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.cat-form fieldset.field + fieldset.field { margin-top: 14px; }
.cat-danger { margin-top: 16px; }

/* Signing keys (keys.html) */
.cat-flasher { margin-top: 4px; }
.cat-flasher .hash { font-size: 11.5px; }
.cat-confirm { max-width: 560px; }
.cat-confirm-title { margin-bottom: 10px; font-size: 20px; }

@media (max-width: 560px) {
  .cat-cr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cat-cr > .field:first-child { grid-column: 1 / -1; }
}
/* Styles of the profile admin pages, served after site.css (static.go). */

/* The tabs (profile.html's): links, each tab its own address, drawn as the mockup's radio tabs */
.pro-tabs { display: flex; flex-wrap: wrap; gap: 0 2px; margin-top: 4px; border-bottom: 1px solid var(--line); }
.pro-tabs a { margin-bottom: -1px; padding: 9px 14px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 15px; font-weight: 650; white-space: nowrap; text-decoration: none; }
.pro-tabs a:hover { color: var(--ink); }
.pro-tabs a[aria-current='page'] { border-bottom-color: var(--accent); color: var(--accent); }
.pro-tabs .count { margin-left: 4px; padding: 0 6px; border-radius: 4px; background: var(--soft); color: var(--muted); font-size: 12.5px; }
.pro-panel { padding-top: 20px; }
.pro-panel > .card + .card { margin-top: 16px; }
.pro-panel .field-row > .field { align-content: start; }

/* A page of one question: the mockup's other states */
.pro-dialog { max-width: 620px; }
.pro-dialog h1 { margin-bottom: 10px; font-size: 20px; }
.pro-dialog p + .field, .pro-dialog p + fieldset, .pro-dialog p + .pro-confirm { margin-top: 14px; }
.pro-dialog .secret { margin: 8px 0 6px; }
.pro-dialog .codes { margin-top: 12px; }
.pro-dialog .setup-grid { margin-top: 6px; }
.pro-dialog .setup-grid .field { margin-top: 14px; }
.pro-dialog .setup-grid p + p { margin-top: 0; }

/* Second step and signed-in browsers */
.pro-nostep { margin-bottom: 14px; }
.pro-browsers h2 + .danger-row { margin-top: 12px; }
.pro-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.danger-row form { margin: 0; }

/* API tokens */
.pro-card-head { padding: 18px 18px 0; }
.pro-none { padding: 4px 18px 18px; color: var(--muted); }
.menu-list form { margin: 0; }
.menu-list .pro-menu-button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: 14px var(--font); text-align: left; cursor: pointer; }
.menu-list .pro-menu-button:hover { background: var(--surface-raised); }
.menu-list .pro-menu-button.danger { color: var(--red); }

/* The authenticator's QR code, here and on the sign-in's enrol page: a white box in both themes, since a
 * scanner needs dark modules on a light ground; its quiet zone is drawn inside the SVG. */
svg.qr { width: 200px; height: 200px; padding: 0; border-radius: 4px; }
.auth svg.qr { margin: 2px auto 6px; }

@media (max-width: 560px) {
  .pro-tabs a { padding: 9px 10px; font-size: 14.5px; }
  .pro-card-head { padding: 16px 16px 0; }
  .pro-none { padding: 4px 16px 16px; }
}
/* Styles of the releases admin pages, served after site.css (static.go). */

/* A release's tabs (release.html): links, one address each, drawn as the mockup's tabs */
.rel-tabs { display: flex; flex-wrap: wrap; gap: 0 2px; margin-top: 4px; border-bottom: 1px solid var(--line); }
.rel-tabs > a { position: relative; margin-bottom: -1px; padding: 9px 14px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 15px; font-weight: 650; white-space: nowrap; text-decoration: none; }
.rel-tabs > a:hover { color: var(--ink); }
.rel-tabs > a[aria-current='page'] { border-bottom-color: var(--accent); color: var(--accent); }
.rel-tabs .count { margin-left: 4px; padding: 0 6px; border-radius: 4px; background: var(--soft); color: var(--muted); font-size: 12.5px; }
.rel-panel { padding-top: 20px; }
.rel-panel > .card + .card, .rel-panel > .card + .section, .rel-panel > .footnote + .card { margin-top: 16px; }

/* Notices above the tabs, one per refused file */
.rel-notices { margin-bottom: 18px; }
.rel-notices > .notice + .notice { margin-top: 10px; }

/* Boot parts waiting for approval (FWS-012) */
.rel-parts { margin-bottom: 18px; padding-left: 0; padding-right: 0; padding-bottom: 6px; }
.rel-parts .section-head { padding: 0 22px; }
.rel-parts th { white-space: nowrap; }
.rel-parts td small.hash { margin-top: 2px; font-size: 11.5px; color: var(--muted); }
@media (min-width: 1000px) { .rel-parts td small.hash { white-space: nowrap; } }
.rel-parts .row-actions form { display: inline; }

/* Files */
.rel-panel .list td.num { white-space: nowrap; }
.rel-footnote { padding: 0 18px 16px; }
.rel-upload .dropzone input { max-width: 100%; margin-top: 6px; font: 14px var(--font); color: var(--ink); }
.rel-upload .dropzone label { cursor: pointer; }
.rel-rules { margin-top: 12px; }
.rel-rules .field-row { margin-top: 12px; }
.rel-rules > .hint { color: var(--muted); }

/* Details */
.rel-notes { margin-top: 10px; font-size: 15px; }
.rel-danger { margin-top: 16px; }
.rel-danger-row { margin-top: 8px; }

/* New release, confirmations and rules: the mockup's dialogs as pages */
.rel-dialog { max-width: 640px; }
.rel-dialog-title { margin-bottom: 10px; font-size: 20px; }
.rel-dialog .field textarea { min-height: 110px; }
.rel-checklist { margin: 10px 0 12px; }
.rel-checklist small.hash { display: block; font-size: 11.5px; }
.rel-path { margin-bottom: 14px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .rel-tabs > a { padding: 9px 10px; font-size: 14.5px; }
  .rel-parts .section-head { padding: 0 16px; }
}
/* Styles of the settings admin pages, served after site.css (static.go). */

/* The tabs (settings.html's): links, each tab its own address, drawn as the mockup's radio tabs */
.set-tabs { display: flex; flex-wrap: wrap; gap: 0 2px; margin-top: 4px; border-bottom: 1px solid var(--line); }
.set-tabs a { margin-bottom: -1px; padding: 9px 14px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 15px; font-weight: 650; white-space: nowrap; text-decoration: none; }
.set-tabs a:hover { color: var(--ink); }
.set-tabs a[aria-current='page'] { border-bottom-color: var(--accent); color: var(--accent); }
.set-panel { padding-top: 20px; }
.set-panel > .card + .card, .set-panel > form + .card { margin-top: 16px; }
.set-panel > .notice + .notice { margin-top: 10px; }
.set-panel > .notice + .card { margin-top: 16px; }
.set-panel .section > .muted { margin: 0; }
.set-panel .section .footnote { margin-top: 12px; }
#email-test { display: none; }
/* Fields side by side start level, whatever hints they carry */
.set-panel .field-row > .field { align-content: start; }

@media (max-width: 560px) {
  .set-tabs a { padding: 9px 10px; font-size: 14.5px; }
}
/* Styles of the stats admin pages, served after site.css (static.go). */

/* The chart colours (FWS-068), checked with the dataviz palette validator against the card surface in
 * both themes: --s1, --s2 and --s3 pass every pair for colour-blind and normal vision; the gray of
 * "the rest" (older versions, checks not counted) passes with them but is below 3:1 against the card,
 * which each chart's table view relieves. Single-series marks use --s1. */
:root { --st-rest: #b0bec1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --st-rest: #4a5a5f; }
}
:root[data-theme='dark'] { --st-rest: #4a5a5f; }

.stats .chart .line { stroke: var(--s1); }
.stats .chart .area-fill { fill: var(--s1); opacity: .1; }
.stats .chart .end { fill: var(--s1); stroke: var(--surface); stroke-width: 2; }
.stats .chart .st-pt { fill: var(--s1); }
.stats .chart .st-today { fill: var(--surface); stroke: var(--s1); stroke-width: 2; }
.stats .chart .st-rest { fill: var(--st-rest); }
.stats .chart .st-sofar { opacity: .55; }
/* A surface halo keeps the marks' labels readable where a grid line or the data line passes. */
.stats .chart text.st-mark, .stats .chart text.end-label { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.stats .legend i.s1 { background: var(--s1); }
.stats .legend i.s2 { background: var(--s2); }
.stats .legend i.s3 { background: var(--s3); }
.stats .legend i.st-rest { background: var(--st-rest); }
.stats .st-key { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border: 2px solid var(--s1); border-radius: 50%; vertical-align: -1px; }

/* stats.html: the mockup's inline styles as classes */
.stats .st-seg { margin: 0; }
.stats .st-grid { margin-top: 16px; }
.stats .st-flag { margin-top: 10px; }
.stats .st-inline { display: inline; }

/* Horizontal bars: HTML words, an SVG bar sized by its attributes (no style attribute) */
.st-bars { display: grid; gap: 8px; font-size: 13.5px; }
.st-bars > div { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr) 44px; gap: 10px; align-items: center; }
.st-bars > div > span:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.stats .chart svg.st-bar { display: block; width: 100%; height: 10px; overflow: visible; }
.st-bar .s1 { fill: var(--s1); }
.st-bar .st-rest { fill: var(--st-rest); }

/* Days left out */
.stats .st-days { margin-top: 16px; }
.stats .st-days .list { margin-bottom: 14px; }
.stats .st-leave { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; margin-top: 14px; }
.stats .st-leave .field { margin: 0; }
.stats .st-leave input[type='date'] { width: auto; }
/* Styles of the users admin pages, served after site.css (static.go). */

.usr-after { margin-top: 12px; }
.usr-dialog { max-width: 620px; }
.usr-dialog h1 { margin-bottom: 10px; font-size: 20px; }
.usr-dialog p + .field, .usr-dialog .muted + .pro-confirm, .usr-dialog p + .pro-confirm { margin-top: 14px; }
.usr-check { margin-top: 14px; }
.usr-check code { font: 12.5px var(--mono); }