/* LastSeen, "Bench Instrument" (docs/design/README.md): a lab instrument
   panel. Dense and precise; calm when everything is healthy, and trouble
   unmistakable (colour, row tint and words, never colour alone).
   One stylesheet for the app and the admin portal. The CSP allows no inline
   styles: anything that varies at runtime is a class (.badge.down, tr.down). */

/* ---------- Fonts (self-hosted, SIL OFL 1.1: fonts/OFL-*.txt) ---------- */
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(fonts/barlow-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(fonts/barlow-400-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(fonts/barlow-500.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(fonts/barlow-500-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(fonts/barlow-600.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(fonts/barlow-600-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url(fonts/barlow-700.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url(fonts/barlow-700-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-display: swap; src: url(fonts/barlow-semi-condensed-500.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-display: swap; src: url(fonts/barlow-semi-condensed-500-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap; src: url(fonts/barlow-semi-condensed-600.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap; src: url(fonts/barlow-semi-condensed-600-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap; src: url(fonts/barlow-semi-condensed-700.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap; src: url(fonts/barlow-semi-condensed-700-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-400-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url(fonts/jetbrains-mono-500.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url(fonts/jetbrains-mono-500-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url(fonts/jetbrains-mono-700.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url(fonts/jetbrains-mono-700-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --bg: #eceef0; --pn: #fbfbfc; --pn2: #f3f4f6; --rs: #f4f5f7; --ln: #d5d9dd; --ln2: #e5e8eb; --ct: #c2c8ce;
  --fg: #14171a; --mu: #535b63; --dm: #646c74; --so: #363d44; --ac: #136d79; --onac: #ffffff; --in: #ffffff;
  --late: #f0a64a; --lateOn: #1a1206; --lateTx: #8f4506;
  --down: #d0342a; --downOn: #ffffff; --downTx: #b3261c; --dnBd: #e3a7a2;
  --rowD: rgba(208, 52, 42, .07); --rowL: rgba(240, 166, 74, .13);
  --pb: #14171a; --pf: #ffffff; --beat: #9aa3ab; --miss: #d5d9dd; --neutralBd: #b9c0c6; --snzBg: #e8ebee;
  --valBd: #8fbcc3; --grid: #e0e3e6; --code: #14171a; --codeFg: #e6e8ea; --splash: #d5dade;
  --sans: "Barlow", system-ui, sans-serif;
  --cond: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pad: 24px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0f1113; --pn: #15181b; --pn2: #1a1e22; --rs: #1c2024; --ln: #262b30; --ln2: #22272c; --ct: #333a41;
    --fg: #e6e8ea; --mu: #99a0a7; --dm: #737b83; --so: #c3c8cd; --ac: #7fd4e0; --onac: #0f1113; --in: #0b0d0e;
    --lateTx: #f0b46a; --down: #ff6b5e; --downOn: #1a0706; --downTx: #ff8a80; --dnBd: #5a2622;
    --rowD: rgba(255, 107, 94, .09); --rowL: rgba(240, 166, 74, .07);
    --pb: #e6e8ea; --pf: #0f1113; --beat: #4d5963; --miss: #2a3036; --neutralBd: #3a4047; --snzBg: #20252a;
    --valBd: #3d6a72; --grid: #1d2125; --code: #0b0d0e; --splash: #262c31;
  }
}
@media (max-width: 640px) { :root { --pad: 16px; } }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg); font: 14px/1.45 var(--sans); }
a { color: var(--ac); text-underline-offset: 2px; }
a:hover { opacity: .85; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
h1, h2, h3 { margin: 0; }
h1 { font: 600 24px/1.2 var(--mono); margin: 0 0 14px; }
h2 { font: 600 11px/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); margin: 24px 0 8px; }
p { margin: 0 0 12px; }
code, pre, kbd, .mono { font-family: var(--mono); }
code { font-size: 12px; }
pre { font: 12px/1.5 var(--mono); background: var(--in); border: 1px solid var(--ln); border-radius: 3px; padding: 10px 12px; overflow-x: auto; margin: 0 0 12px; }
.muted { color: var(--mu); }
.dim { color: var(--dm); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.bad { color: var(--downTx); }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
[hidden] { display: none !important; }

/* ---------- App header ---------- */
.appbar { display: flex; align-items: center; gap: 22px; padding: 0 var(--pad); height: 48px; background: var(--pn2); border-bottom: 1px solid var(--ln); }
.appbar form { margin: 0; }
.brand { font: 700 15px/1 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--fg); text-decoration: none; }
.appnav { display: flex; align-self: stretch; margin-right: auto; font: 600 12px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.appnav a { display: flex; align-items: center; padding: 0 14px; color: var(--mu); text-decoration: none; }
.appnav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--ac); }
.appnav a:hover { color: var(--fg); opacity: 1; }
.orgswitch { display: flex; gap: 4px; align-items: center; }
.orgswitch select { font-size: 13px; padding: 4px 8px; min-height: 0; }
.orgswitch button { padding: 0 10px; min-height: 28px; font-size: 11px; }
.appbar .org { font-size: 13px; }
.appbar .who { font: 12px var(--mono); color: var(--mu); }
.appbar .signout button { font: 600 11px var(--cond); letter-spacing: .08em; text-transform: uppercase; border: 0; background: none; padding: 0; min-height: 0; color: var(--mu); cursor: pointer; white-space: nowrap; }
.appbar .signout button:hover { color: var(--fg); }
@media (max-width: 640px) {
  .appbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 10px; height: auto; padding: 0; }
  .appbar .brand { padding: 0 0 0 16px; line-height: 48px; }
  .appbar .orgswitch, .appbar .org { min-width: 0; max-width: 180px; }
  .appbar .org { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .appbar .who { display: none; }
  .appbar .signout { padding-right: 16px; }
  .appbar .signout button { min-height: 44px; }
  .appnav { grid-column: 1 / -1; order: 9; margin: 0; overflow-x: auto; border-top: 1px solid var(--ln2); }
  .appnav a { flex: none; min-height: 44px; padding: 0 12px; white-space: nowrap; }
}

/* ---------- Page ---------- */
main { padding: 22px var(--pad) 28px; }
main > :last-child { margin-bottom: 0; }
.narrow { max-width: 460px; }
.narrow.wide-text { max-width: 720px; }

/* A list page's title: small caps, then a count. */
.pagehead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.pagehead h1, h1.list { font: 600 13px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--mu); margin: 0; }
.pagehead h1 .count { font-family: var(--mono); letter-spacing: 0; color: var(--fg); margin-left: 4px; }
.pagehead .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
/* A menu of links behind a button (the kinds of check): no script, a details element. */
details.addmenu { position: relative; }
details.addmenu > summary { list-style: none; cursor: pointer; }
details.addmenu > summary::-webkit-details-marker { display: none; }
details.addmenu > summary::after { content: " ▾"; }
details.addmenu .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: flex; flex-direction: column; min-width: 220px;
  background: var(--pn); border: 1px solid var(--ct); border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 4px 0; }
details.addmenu .menu a { padding: 9px 14px; text-decoration: none; color: var(--fg); white-space: nowrap; }
details.addmenu .menu a:hover, details.addmenu .menu a:focus-visible { background: var(--rs); }
@media (max-width: 640px) { details.addmenu .menu { left: 0; right: auto; } }
/* Older screens' title bars, until each is redone. */
.titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.titlebar h1 { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 16px; }

/* Message strips under the header: done, a warning, an error. */
.banner, .flash, .warn, .error { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; padding: 10px 12px; border: 1px solid; border-radius: 3px; margin: 0 0 14px; font-size: 14px; }
.flash { border-color: var(--ac); }
.warn { border-color: var(--late); background: var(--rowL); }
.error { border-color: var(--down); background: var(--rowD); }
.banner .tag { flex: none; font: 700 11px var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.banner .text { flex: 1 1 240px; }
.flash .tag { color: var(--ac); }
.warn .tag { color: var(--lateTx); }
.error .tag { color: var(--downTx); }

/* ---------- Panels and cards ---------- */
.card, .panel { background: var(--pn); border: 1px solid var(--ln); border-radius: 4px; padding: 14px; margin: 0 0 12px; }
.panel { padding: 0; }
.panel > .title, .card > .title { padding: 8px 14px; border-bottom: 1px solid var(--ln); background: var(--pn2); font: 600 11px/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
.card > .title { margin: -14px -14px 14px; border-radius: 4px 4px 0 0; }
.panel > .body { padding: 14px; }
.card > :last-child { margin-bottom: 0; }
/* Stat groups: a gap-1px grid over the border colour draws hairlines. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--ln); border: 1px solid var(--ln); border-radius: 4px; overflow: hidden; margin: 0 0 12px; }
.stats > * { background: var(--pn); padding: 10px 14px; margin: 0; border: 0; border-radius: 0; }
.stats .n { font: 500 28px/1.2 var(--mono); }
@media (max-width: 640px) { .stats .n { font-size: 19px; } }

/* ---------- Controls ---------- */
button, .button, details.adder > summary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 12px;
  font: 600 12px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; text-decoration: none;
  border: 1px solid var(--ct); border-radius: 3px; background: var(--rs); color: var(--fg); cursor: pointer;
}
button:hover, .button:hover { opacity: 1; border-color: var(--mu); }
button.primary, .button.primary, details.adder > summary.primary { font-weight: 700; border-color: var(--pb); background: var(--pb); color: var(--pf); }
button.danger, .button.danger { font-weight: 700; border-color: var(--down); background: var(--down); color: var(--downOn); }
button.link { min-height: 0; padding: 0; border: 0; background: none; color: var(--ac); font: inherit; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 2px; }
a.button { margin: 0; }
input, select, textarea { font: 14px/1.4 var(--sans); color: var(--fg); background: var(--in); border: 1px solid var(--ct); border-radius: 3px; padding: 7px 10px; }
input:not([type=checkbox]):not([type=radio]), textarea { display: block; width: 100%; margin-top: 4px; }
textarea { min-height: 10em; resize: vertical; }
label { display: block; margin: 12px 0; font-size: 13px; color: var(--so); }
label select { display: block; margin-top: 4px; }
label.check { display: flex; gap: 8px; align-items: center; margin: 6px 0; font-size: 14px; color: var(--fg); }
label.check input { width: auto; margin: 0; }
fieldset { border: 0; border-top: 1px solid var(--ln); margin: 16px 0 0; padding: 12px 0 0; }
legend { font: 600 11px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); padding: 0; }
form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
form.row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
/* Add forms stay closed behind their button until asked for (<details>, no script). */
details.adder { margin: 12px 0; }
details.adder > summary { list-style: none; }
details.adder > summary::-webkit-details-marker { display: none; }
details.adder[open] > summary { margin-bottom: 10px; }
@media (max-width: 640px) {
  button, .button, details.adder > summary, .appnav a { min-height: 44px; }
  button.link { min-height: 0; }
}

/* ---------- Badges: always words; colour and border style say how bad ---------- */
.badge { display: inline-block; font: 700 11px/18px var(--cond); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  padding: 0 6px; border-radius: 2px; border: 1px solid var(--neutralBd); color: var(--mu); background: transparent; }
.badge.late { background: var(--late); border-color: var(--late); color: var(--lateOn); }
.badge.degraded { color: var(--lateTx); border-color: var(--late); }
.badge.down, .badge.failing { background: var(--down); border-color: var(--down); color: var(--downOn); }
.badge.new { color: var(--ac); border-color: var(--ac); }
.badge.unstable, .badge.tripped, .badge.awaiting, .badge.needs-reply, .badge.note { color: var(--lateTx); border: 1px dashed var(--late); }
.badge.snoozed { background: var(--snzBg); border-style: dashed; }
.badge.idle, .badge.closed { border-style: dashed; }
.badge.value, .badge.staff { color: var(--ac); border-color: var(--valBd); }
.badges { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- Tables ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--ln); border-radius: 4px; background: var(--pn); margin: 0 0 12px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--pn); }
main > table, .card > table { border: 1px solid var(--ln); margin: 0 0 12px; }
th { text-align: left; font: 600 11px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); background: var(--pn2); padding: 8px 12px; border-bottom: 1px solid var(--ln); white-space: nowrap; }
td { padding: 7px 12px; border-bottom: 1px solid var(--ln2); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
th.r, td.r { text-align: right; }
td.mono { font: 13px/20px var(--mono); white-space: nowrap; }
tr.down { background: var(--rowD); }
tr.late { background: var(--rowL); }
tr.down .reason, tr.down .ago { color: var(--downTx); }
tr.late .reason, tr.late .ago { color: var(--lateTx); }
/* Phones: a table scrolls within itself, never the page. */
@media (max-width: 640px) { main table:not(.monitors) { display: block; overflow-x: auto; } }
table.sortable th a { color: inherit; text-decoration: none; }
table.sortable th a:hover { color: var(--fg); }
td.value, .n.value { max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Chips ---------- */
/* Status filters: a strip of counts; the active one underlined. */
.statusbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--ln); border: 1px solid var(--ln); border-radius: 4px; overflow: hidden; }
.statusbar a { display: block; padding: 10px 14px; background: var(--pn); text-decoration: none; color: var(--fg); }
.statusbar a:hover { opacity: 1; background: var(--rs); }
.statusbar a.active { background: var(--rs); box-shadow: inset 0 -2px 0 var(--ac); }
.statusbar .label { display: block; font: 600 11px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
.statusbar .n { display: block; font: 500 26px/1.2 var(--mono); margin-top: 6px; }
.statusbar .down .n { color: var(--downTx); }
.statusbar .late .n, .statusbar .degraded .n { color: var(--lateTx); }
.statusbar .new .n { color: var(--ac); }
.statusbar .zero .n { color: var(--dm); }
@media (max-width: 640px) { .statusbar a { padding: 8px 10px; } .statusbar .n { font-size: 20px; } }
.tags, .filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 14px; }
.tags > .label { font: 600 11px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--dm); margin-right: 4px; }
.chip { font: 12px/1.4 var(--mono); padding: 3px 8px; border: 1px solid var(--ct); border-radius: 3px; color: var(--so); text-decoration: none; }
.chip.active { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.filters .sep { width: 1px; height: 18px; background: var(--ln); margin: 0 4px; }
.tags .clear, .filters .clear { font-size: 13px; margin-left: 6px; }
.tag { font: 12px var(--mono); color: var(--dm); }

/* ---------- Monitors ---------- */
table.monitors td.monitor > a { font-weight: 600; color: var(--fg); text-decoration: none; }
table.monitors td.monitor > a:hover { text-decoration: underline; }
table.monitors .reason { font-size: 13px; color: var(--mu); }
table.monitors td.ago { text-align: right; font: 13px/20px var(--mono); white-space: nowrap; color: var(--mu); }
table.monitors td.value { text-align: right; font: 13px/20px var(--mono); max-width: 12em; }
table.monitors td.key { font: 12px/20px var(--mono); color: var(--dm); white-space: nowrap; }
table.monitors td.key code { font-size: 12px; }
table.monitors tr.down .reason, table.monitors tr.down td.ago { color: var(--downTx); }
table.monitors tr.late .reason, table.monitors tr.late td.ago { color: var(--lateTx); }
.spark { display: block; }
.spark polyline { fill: none; stroke: var(--ac); stroke-width: 1.5; }
tr.down .spark polyline { stroke: var(--dnBd); }
/* Phones: each row becomes a block. Line 1: badges, then how long ago;
   line 2: the name and tags; the reason; then "value · key". */
@media (max-width: 640px) {
  .tablewrap.monitors-wrap { overflow: hidden; }
  table.monitors thead { display: none; }
  table.monitors, table.monitors tbody { display: block; }
  table.monitors tr { display: flex; flex-wrap: wrap; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--ln2); }
  table.monitors tbody tr:last-child { border-bottom: 0; }
  table.monitors td { display: block; padding: 0; border: 0; }
  table.monitors td.status { order: 1; flex: 1 1 auto; }
  table.monitors td.ago { order: 2; flex: none; font-size: 12px; }
  table.monitors td.monitor { order: 3; flex: 1 1 100%; margin-top: 5px; }
  table.monitors td.monitor > a { font-size: 15px; }
  table.monitors td.value { order: 4; flex: 0 1 auto; text-align: left; font-size: 12px; color: var(--mu); margin-top: 3px; max-width: 60%; }
  table.monitors td.key { order: 5; flex: 1 1 0; min-width: 0; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; }
  table.monitors td.key::before { content: "\00a0· "; }
  table.monitors td.spark-cell { display: none; }
}
.export { font: 12px var(--mono); color: var(--dm); margin: 14px 0 0; }
.export b { font-weight: 400; letter-spacing: .06em; }

/* No monitors yet: the two ways to start. */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; padding: 14px; }
.choice { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; border: 1px solid var(--ct); border-radius: 4px; }
.choice .kind { font: 600 11px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ac); }
.choice h2 { font: 600 18px/1.25 var(--sans); letter-spacing: 0; text-transform: none; color: var(--fg); margin: 0; }
.choice p { margin: 0; color: var(--mu); }
.choice code { display: block; font-size: 12px; color: var(--so); padding: 8px 10px; background: var(--in); border: 1px solid var(--ln); border-radius: 3px; overflow-x: auto; white-space: nowrap; }
.choice .button { align-self: flex-start; margin-top: 4px; }
.panel > .intro { margin: 0; padding: 14px 14px 0; max-width: 64ch; color: var(--so); }

/* ---------- Monitor page ---------- */
.backlink { font: 600 11px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); text-decoration: none; }
.backlink:hover { color: var(--fg); }
/* An object page's title: the name in mono, its badges, its tags. */
.objhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 16px; }
.objhead h1 { margin: 0; line-height: 1.1; overflow-wrap: anywhere; }
.objhead .badge { font-size: 12px; line-height: 20px; padding: 0 8px; }
.detail { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.detail-main, .detail-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.detail-main > *, .detail-side > * { margin: 0; }
@media (max-width: 640px) { .detail { grid-template-columns: minmax(0, 1fr); } }

.stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats > div { padding: 12px 14px; }
.stats .label { font: 600 11px/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
.stats .n { line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats .sub { font: 11px/1.4 var(--mono); color: var(--dm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .stats .sub { white-space: normal; } }
.stats.down .ago { color: var(--downTx); }
.stats.late .ago { color: var(--lateTx); }

.panel > h2.title { margin: 0; }
.panel > .title.split { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; }
.panel > .title .mono { font: 11px/1.3 var(--mono); letter-spacing: 0; text-transform: none; }
.panel p.body { margin: 0; padding: 12px 14px; }
.panel > .body { padding: 12px 14px; }
.panel .error { margin: 12px 14px 0; }
/* The trend: the value line over a 30px grid, heartbeats below it. */
.chart { height: 120px; background-image: linear-gradient(var(--grid) 1px, transparent 1px); background-size: 100% 30px; }
.chart .spark { width: 100%; height: 120px; }
.chart .spark polyline { vector-effect: non-scaling-stroke; }
.beats { display: flex; align-items: flex-end; gap: 2px; height: 12px; margin-top: 10px; }
.beats span { flex: 1; height: 3px; background: var(--miss); }
.beats .heard { height: 12px; background: var(--beat); }
.beats .before { height: 2px; }
.beats .trail { height: 12px; }
.beats.down .trail { background: var(--down); }
.beats.late .trail { background: var(--late); }
.axis { display: flex; justify-content: space-between; gap: 8px; font: 11px var(--mono); color: var(--dm); margin-top: 6px; }

/* Value rules: one line each, then the "Alert when" bar. */
.rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 14px; border-bottom: 1px solid var(--ln2); }
.rule .name { font-weight: 600; }
.rule .expr { font-size: 13px; color: var(--ac); overflow-wrap: anywhere; }
.rule .short { flex: 1; font: 12px var(--mono); color: var(--dm); }
.rule .full { flex-basis: 100%; }
button.quiet { min-height: 0; padding: 0; border: 0; background: none; font-size: 11px; color: var(--dm); }
button.quiet:hover { color: var(--downTx); }
details.adder.body { margin: 0; }
.alertwhen { display: flex; flex-wrap: wrap; border: 1px solid var(--ac); border-radius: 3px; overflow: hidden; }
.alertwhen label { display: flex; align-items: center; margin: 0; padding: 0 10px; background: var(--rs); font: 600 11px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); white-space: nowrap; }
.alertwhen input:not([type=checkbox]) { display: block; width: auto; margin: 0; border: 0; border-radius: 0; padding: 9px 10px; }
.alertwhen #rule-expr { flex: 1 1 200px; min-width: 0; font-family: var(--mono); }
.alertwhen #rule-name { flex: 1 1 100px; min-width: 0; border-left: 1px solid var(--ct); }
.alertwhen #rule-readings { flex: none; width: 52px; font-family: var(--mono); border-left: 1px solid var(--ct); }
.alertwhen button { border: 0; border-radius: 0; background: var(--ac); color: var(--onac); font-weight: 700; padding: 0 14px; }
.presets { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 8px; }
.presets .preset { min-height: 0; padding: 3px 8px; font: 12px var(--sans); letter-spacing: 0; text-transform: none; color: var(--so); }
.presets .help { margin-left: auto; font-size: 12px; color: var(--dm); }
.presets .help summary { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.presets .help[open] { flex-basis: 100%; margin: 6px 0 0; color: var(--so); font-size: 13px; }
.presets .help ul { margin: .4em 0; padding-left: 1.2em; }

/* History (and recent checks): time, badges, what happened. */
.histrow { display: grid; grid-template-columns: 118px 150px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 14px; border-bottom: 1px solid var(--ln2); }
.histrow:last-child { border-bottom: 0; }
.histrow .at { font: 12px/20px var(--mono); color: var(--dm); white-space: nowrap; }
.histrow .badges { flex-wrap: nowrap; align-items: center; gap: 5px; }
.histrow .arrow { color: var(--dm); }
.histrow .what { font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.histrow .what:only-child { grid-column: 1 / -1; }
@media (max-width: 640px) { .histrow { grid-template-columns: minmax(0, 1fr); gap: 3px; } }

/* The side column: small cards with a label. */
.card > h2.label { margin: 0 0 8px; }
.controls { display: flex; flex-direction: column; gap: 10px; }
.controls > * { margin: 0; }
.controls .snooze { display: flex; gap: 4px; }
.controls .snooze select { flex: 1; min-width: 0; font-size: 13px; padding: 6px 8px; }
.trio { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.trio > * { padding: 0 4px; font-size: 11px; }
.button.bad { color: var(--downTx); border-color: var(--dnBd); }
.keycard code.key { display: block; font: 14px var(--mono); letter-spacing: .02em; padding: 8px 10px; background: var(--in); border: 1px solid var(--ln); border-radius: 3px; overflow-x: auto; white-space: nowrap; }
.keycard .trio { margin-top: 6px; }
.keycard p { margin: 8px 0 0; font-size: 12px; }
.pairrow { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--ln2); font-size: 13px; }
.pairrow a { font-weight: 600; text-decoration: none; }
.pairrow > span { color: var(--so); text-align: right; }
.alertrow { padding: 6px 0; border-bottom: 1px solid var(--ln2); font-size: 13px; }
.alertrow .line { display: flex; justify-content: space-between; gap: 8px; }
.alertrow .what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alertrow .state { flex: none; font: 600 11px var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--dm); }
.alertrow .state.bad { font-weight: 700; color: var(--downTx); }
.alertrow .sub { font: 11px var(--mono); color: var(--dm); overflow-wrap: anywhere; }
.pairrow:last-child, .alertrow:last-child { border-bottom: 0; }

/* ---------- Forms, the new key, confirming ---------- */
.page-form { max-width: 720px; }
.page-key { max-width: 820px; }
.page-confirm { max-width: 640px; }
.page-form > *, .page-key > * { margin-top: 0; }
h1.formtitle { margin: 8px 0 6px; overflow-wrap: anywhere; }
.lead { color: var(--mu); max-width: 70ch; margin: 0 0 16px; }
/* A form's fields: small-caps labels over mono inputs, hints under them. */
form.bench .fields { display: grid; gap: 16px; padding: 16px 14px; margin: 0; }
form.bench label:not(.check) { margin: 0; font: 600 11px/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
form.bench input:not([type=checkbox]), form.bench select { padding: 9px 10px; font: 14px var(--sans); letter-spacing: 0; text-transform: none; }
form.bench input.mono { font-family: var(--mono); }
form.bench label > select { display: block; width: 100%; margin-top: 4px; }
form.bench .hint { display: block; margin-top: 4px; font: 12px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--mu); }
form.bench .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; }
form.bench .cols.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
form.bench .cols:has(.span2) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 640px) { form.bench .cols:has(.span2) { grid-template-columns: minmax(0, 1fr); } }
form.bench .summary { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 9px 12px; background: var(--pn2); border: 1px dashed var(--ct); border-radius: 3px; font: 12px var(--mono); color: var(--so); }
form.bench .summary[hidden] { display: none; }
form.bench .card.flush { padding: 0; gap: 0; }
form.bench .fieldset { display: grid; gap: 16px; padding: 16px 14px; }
form.bench .checks { display: grid; gap: 4px; }
form.bench label.check { min-height: 28px; margin: 0; }
form.bench label.check input { accent-color: var(--ac); width: 16px; height: 16px; flex: none; }
/* "More options": a full-width strip along the bottom of the card. */
details.more > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-top: 1px solid var(--ln); background: var(--pn2);
  font: 600 11px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); cursor: pointer; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "+"; width: 10px; font-family: var(--mono); }
details.more[open] > summary::before { content: "−"; }
details.more:last-child > summary { border-radius: 0 0 4px 4px; }
details.more > .fieldset { border-top: 1px solid var(--ln); }
.note { margin: 12px 0 0; font-size: 13px; color: var(--mu); max-width: 70ch; }
.formactions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 14px 0 0; }
.formactions button { min-height: 40px; padding: 0 16px; }
a.cancel { font: 600 12px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--mu); text-decoration: none; }
a.cancel:hover { color: var(--fg); }

/* The new key: in an accent-bordered panel, then how to send with it. */
.page-key .panel { margin: 0 0 12px; }
.keypanel { border-color: var(--ac); }
.keyrow { display: flex; gap: 10px; align-items: center; padding: 16px 14px; }
.keyrow code.key { flex: 1; min-width: 0; overflow-x: auto; font: 500 24px/1.2 var(--mono); letter-spacing: .06em; user-select: all; }
@media (max-width: 640px) { .keyrow code.key { font-size: 16px; } }
.keyrow button { min-height: 40px; padding: 0 16px; }
.example { padding: 12px 14px; border-bottom: 1px solid var(--ln2); }
.example > p { margin: 0 0 6px; font-size: 13px; color: var(--so); }
.example .copyline { margin: 0; }
.example pre { font-size: 13px; }
a.onward { display: inline-block; margin-top: 4px; font: 700 12px var(--cond); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }

/* Confirming something that can't be undone. */
.panel.danger { margin-top: 10px; border-color: var(--dnBd); }
.panel.danger > .title { border-color: var(--dnBd); color: var(--downTx); }
.panel.danger > .body { padding: 18px 16px; }
.panel.danger h1 { font: 600 22px/1.25 var(--sans); margin: 0 0 8px; overflow-wrap: anywhere; }
.panel.danger p { color: var(--so); margin: 0 0 18px; }
.panel.danger .formactions { margin: 0; }

/* ---------- Channels ---------- */
table.channels td.state { width: 1%; white-space: nowrap; }
table.channels .type { font: 12px var(--mono); color: var(--dm); }
table.channels .reason { font-size: 13px; color: var(--mu); }
table.channels tr.down .reason { color: var(--downTx); }
table.channels td.target { font: 12px/20px var(--mono); color: var(--so); overflow-wrap: anywhere; }
table.channels .secret { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; font: 12px var(--sans); color: var(--mu); }
table.channels .secret code { color: var(--fg); }
table.channels .secret button:not(.link) { min-height: 0; padding: 3px 6px; font-size: 10px; }
table.channels td.acts { text-align: right; white-space: nowrap; }
table.channels td.acts > * { vertical-align: middle; }
table.channels td.acts button { min-height: 0; padding: 6px 10px; font-size: 11px; }
a.quietlink { margin-left: 10px; font: 600 11px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--dm); text-decoration: none; }
a.quietlink:hover { color: var(--downTx); }
/* Phones: each channel becomes a block: state, name and type; the target; then the actions. */
@media (max-width: 640px) {
  .tablewrap.list-wrap { overflow: hidden; }
  table.channels thead { display: none; }
  table.channels, table.channels tbody { display: block; }
  table.channels tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px; border-bottom: 1px solid var(--ln2); }
  table.channels tbody tr:last-child { border-bottom: 0; }
  table.channels td { display: block; padding: 0; border: 0; }
  table.channels td.state { width: auto; }
  table.channels td.channel { flex: 1 1 auto; }
  table.channels td.target { flex: 1 1 100%; }
  table.channels td.acts { flex: 1 1 100%; text-align: left; margin-top: 4px; }
  table.channels td.acts button { min-height: 36px; padding: 0 12px; }
}
/* The type: one of six segments (three a row on phones), the chosen one in the accent. */
fieldset.typepick { border: 0; margin: 0 0 12px; padding: 0; }
fieldset.typepick legend { margin-bottom: 6px; }
.segments { display: flex; flex-wrap: wrap; gap: 1px; background: var(--ct); border: 1px solid var(--ct); border-radius: 3px; overflow: hidden; }
form.bench .segments label { position: relative; display: block; flex: 1 1 0; min-width: 0; margin: 0; background: var(--pn); color: var(--so); font: 600 12px var(--cond); letter-spacing: .06em; cursor: pointer; }
@media (max-width: 640px) { form.bench .segments label { flex-basis: calc(33.333% - 1px); } }
.segments input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segments span { display: block; padding: 9px 4px; text-align: center; white-space: nowrap; }
form.bench .segments label:has(input:checked) { background: var(--ac); color: var(--onac); }
form.bench .segments label:hover:not(:has(input:checked)) { background: var(--rs); }
.segments label:has(input:focus-visible) { outline: 2px solid var(--ac); outline-offset: -4px; }
.channel-form { max-width: 760px; }
/* A website check's regions (D48): checkboxes in a row that wraps. */
fieldset.regionpick { border: 0; margin: 12px 0 0; padding: 0; min-width: 0; }
fieldset.regionpick legend { margin-bottom: 6px; }
fieldset.certpick { border: 0; margin: 4px 0 12px; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
fieldset.certpick textarea { width: 100%; margin-top: 4px; font-size: 12px; }
.regionlist { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.regionlist label.check { margin: 0; }
.channel-form .hint { margin: 10px 0 14px; font-size: 13px; max-width: 72ch; }

/* ---------- Notification profiles ---------- */
.profiles { display: flex; flex-direction: column; gap: 8px; }
.profile { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.4fr) 140px; gap: 1px; background: var(--ln); border: 1px solid var(--ln); border-radius: 4px; overflow: hidden; }
.profile > div { background: var(--pn); padding: 10px 14px; min-width: 0; }
.profile .pname { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 15px; }
.profile .pname a { font-weight: 700; color: var(--fg); text-decoration: none; }
.profile .pname a:hover { text-decoration: underline; }
.profile .covers, .profile .timing { font: 12px/1.5 var(--mono); color: var(--mu); overflow-wrap: anywhere; }
.profile .label { font: 600 11px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--dm); }
.profile .acts { display: flex; gap: 12px; align-items: center; }
.profile .acts .button { min-height: 0; padding: 6px 10px; font-size: 11px; }
@media (max-width: 640px) { .profile { grid-template-columns: minmax(0, 1fr); } .profile .acts .button { min-height: 36px; } }

/* The profile form: two columns of small panels (one on phones). */
.page-profile { max-width: 1000px; }
.twocol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 12px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stack > * { margin: 0; }
.stack > .card { padding: 12px 14px; }
fieldset.panel { display: block; min-width: 0; margin: 0; padding: 0; border: 1px solid var(--ln); }
fieldset.panel > legend.title { float: left; width: 100%; margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--ln); background: var(--pn2); border-radius: 4px 4px 0 0; }
fieldset.panel > legend + * { clear: both; }
.ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; padding: 10px 14px; }
.ticks.one { grid-template-columns: minmax(0, 1fr); }
.ticks.mono label.check { font: 13px var(--mono); }
.ticks label.check { padding: 4px 0; }
.ticks .note { font: 11px var(--mono); color: var(--dm); }
.ticks > p { grid-column: 1 / -1; margin: 0; }
fieldset.panel .foot { margin: 0; padding: 0 14px 10px; font-size: 12px; color: var(--mu); }
fieldset.panel .body { padding: 12px 14px; }
form.bench .cols.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-bottom: 4px; }

/* Maintenance windows (D52): the form shows the fields for "once" or "every
   week", whichever is picked; the list reuses the profile rows. */
.window-form .body > .ticks { padding: 0 0 8px; }
.window-form .once-fields, .window-form .weekly-fields { margin-bottom: 10px; }
.window-form .ticks.days { grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0 0 8px; }
.window-form:has(#w-once:checked) .weekly-fields, .window-form:has(#w-weekly:checked) .once-fields { display: none; }
@media (max-width: 640px) { .window-form .ticks.days { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
form.bench .unit { display: block; margin-top: 3px; font: 11px var(--mono); letter-spacing: 0; text-transform: none; color: var(--dm); }
.quiet { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 10px; margin: 8px 0 10px; }
@media (max-width: 640px) { .quiet { grid-template-columns: 1fr 1fr; } .quiet .tz { grid-column: 1 / -1; } form.bench .cols.three { grid-template-columns: minmax(0, 1fr); } }
fieldset.panel .hint { margin: 8px 0 0; font-size: 12px; }
.formactions.end { justify-content: flex-end; margin: 0; }

/* ---------- Organization ---------- */
.page-org { max-width: 1000px; }
.page-org > .panel, .page-org > .stats, .page-org > .pair { margin: 0 0 12px; }
.stats .n .of { font-size: 14px; color: var(--dm); }
.stats.plan .n { font-size: 24px; }
.stats .over .n, .stats .over .sub { color: var(--lateTx); }
.stats .over progress::-webkit-progress-value { background: var(--late); }
.stats .over progress::-moz-progress-bar { background: var(--late); }
@media (max-width: 640px) { .stats.plan .n { font-size: 19px; } }
progress { display: block; width: 100%; height: 4px; margin-top: 6px; border: 0; appearance: none; background: var(--ln2); color: var(--ac); }
progress::-webkit-progress-bar { background: var(--ln2); }
progress::-webkit-progress-value { background: var(--ac); }
progress::-moz-progress-bar { background: var(--ac); }
table.members td { vertical-align: middle; padding: 8px 14px; }
table.members td.who { overflow-wrap: anywhere; }
table.members td.role select { font-size: 13px; padding: 5px 8px; }
table.members td.role button { min-height: 0; padding: 6px 10px; font-size: 11px; }
table.members td.role .mono { font-size: 12px; }
table.members td.since { width: 150px; font: 12px var(--mono); color: var(--dm); white-space: nowrap; }
table.members td.acts { width: 70px; text-align: right; }
table.members.invites td.role { width: 90px; }
@media (max-width: 640px) {
  table.members, table.members tbody { display: block; }
  table.members tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--ln2); }
  table.members td { display: block; padding: 0; border: 0; width: auto !important; }
  table.members td.since { grid-column: 1; }
}
.invite { padding: 12px 14px; background: var(--pn2); border-top: 1px solid var(--ln2); border-radius: 0 0 4px 4px; }
.invite .label { display: block; margin: 0 0 6px; font: 600 11px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
.invite .bar { display: flex; max-width: 620px; border: 1px solid var(--ct); border-radius: 3px; overflow: hidden; }
.invite .bar input { flex: 1; min-width: 0; margin: 0; border: 0; border-radius: 0; padding: 9px 10px; }
.invite .bar select { border: 0; border-left: 1px solid var(--ct); border-radius: 0; font-size: 13px; padding: 0 8px; }
.invite .bar button { border: 0; border-radius: 0; padding: 0 14px; }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.pair > .card { padding: 12px 14px; margin: 0; }
.pair .hint { margin: 6px 0 0; font-size: 12px; color: var(--mu); }
.inlinebar { display: flex; flex-wrap: wrap; gap: 4px; }
.inlinebar input { flex: 1 1 200px; min-width: 0; margin: 0; padding: 8px 10px; }
.inlinebar button { min-height: 0; padding: 0 12px; }
@media (max-width: 640px) { .inlinebar button, .invite .bar button { min-height: 44px; } }
.dangerzone { margin-top: 0; }
.dangerzone > .title { margin: 0; }
.dangerzone .split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1px; background: var(--ln2); border-radius: 0 0 4px 4px; overflow: hidden; }
.dangerzone .split > form { background: var(--pn); padding: 12px 14px; margin: 0; }
.dangerzone .split > form:only-child { grid-column: 1 / -1; }
.dangerzone .split p { margin: 0 0 8px; font-size: 13px; }
.dangerzone .leave { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.dangerzone .leave button { align-self: flex-start; }
button.bad { color: var(--downTx); border-color: var(--dnBd); font-weight: 700; }
@media (max-width: 640px) { .dangerzone .split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Support ---------- */
.page-support { max-width: 860px; }
.page-support .panel { margin: 0 0 12px; }
.newticket { margin-top: 0; }
.newticket textarea { font: 14px/1.5 var(--sans); }
.newticket .hint code { font-size: 13px; padding: 1px 5px; background: var(--pn2); border: 1px solid var(--ln); border-radius: 3px; overflow-wrap: anywhere; }
.panel > .title .filters { margin: 0; gap: 4px; letter-spacing: 0; text-transform: none; }
.panel > .title .chip { padding: 1px 7px; font-size: 11px; }
table.tickets td { vertical-align: middle; }
table.tickets td.id, table.tickets td.when, table.tickets td.count { font: 12px var(--mono); color: var(--mu); white-space: nowrap; }
table.tickets td.subject a { font-weight: 600; color: var(--fg); text-decoration: none; }
table.tickets td.subject a:hover { text-decoration: underline; }
table.tickets td.kind, table.tickets td.from { font-size: 13px; color: var(--so); }
@media (max-width: 640px) {
  table.tickets thead { display: none; }
  table.tickets, table.tickets tbody { display: block; }
  table.tickets tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 14px; border-bottom: 1px solid var(--ln2); }
  table.tickets td { display: block; padding: 0; border: 0; }
  table.tickets td.subject { order: 1; flex: 1 1 60%; }
  table.tickets td.state { order: 2; }
  table.tickets td.id { order: 3; }
  table.tickets td.kind, table.tickets td.from { order: 4; font-size: 12px; }
  table.tickets td.when { order: 5; margin-left: auto; }
  table.tickets td.count { display: none; }
}
/* A ticket: its thread of messages, then the reply box. */
.tickethead h1 { font: 600 22px/1.25 var(--sans); margin: 8px 0 4px; overflow-wrap: anywhere; }
.tickethead h1 .badge { vertical-align: 3px; margin-left: 4px; }
.meta { margin: 0 0 16px; font: 12px var(--mono); color: var(--mu); overflow-wrap: anywhere; }
.thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.message { background: var(--pn); border: 1px solid var(--ln); border-radius: 4px; }
.message.from-us { border-color: var(--valBd); }
.message header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 14px; border-bottom: 1px solid var(--ln2); }
.message header b { overflow-wrap: anywhere; }
.message .when { margin-left: auto; font: 12px var(--mono); color: var(--mu); white-space: nowrap; }
.message .text { padding: 12px 14px; font-size: 15px; line-height: 1.55; max-width: 75ch; }
.reply > .body { padding: 12px 14px; }
.reply > .body .hint { margin: 8px 0 0; font-size: 13px; color: var(--mu); }
.reply > .title label { display: inline; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.reply textarea { margin: 0; font: 14px/1.5 var(--sans); }
.reply .formactions { gap: 8px; margin-top: 10px; }
/* Operators' internal notes: dashed amber, and the Reply / Internal note switch that makes them. */
.message.note { border: 1px dashed var(--late); background: var(--rowL); }
.badge.note { color: var(--lateTx); border-color: var(--late); }
.reply .modes { display: flex; gap: 4px; margin: 0; padding: 0 14px; border: 0; border-bottom: 1px solid var(--ln2); }
.reply .modes label { position: relative; margin: 0; cursor: pointer; }
.reply .modes input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.reply .modes span { display: block; padding: 10px 8px 8px; font: 600 12px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--mu); border-bottom: 2px solid transparent; }
.reply .modes label:has(input:checked) span { color: var(--fg); border-bottom-color: var(--ac); }
.reply .modes label.for-note:has(input:checked) span { border-bottom-color: var(--late); }
.reply .modes label:has(input:focus-visible) { outline: 2px solid var(--ac); outline-offset: -2px; }
.reply:has(input[value=note]:checked) { border-color: var(--late); border-style: dashed; }
.reply .as-note, .reply:has(input[value=note]:checked) .as-reply { display: none; }
.reply:has(input[value=note]:checked) .as-note { display: revert; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Public pages: alert links, email verification, /bot ---------- */
.publicbar { background: var(--pn2); border-bottom: 1px solid var(--ln); }
.publicbar > div { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; height: 56px; padding: 0 var(--pad); }
.publicbar .brand { font-size: 16px; }
main.centred { display: flex; justify-content: center; padding: 64px var(--pad) 80px; }
.publiccard { width: 100%; max-width: 460px; margin: 0; }
.publiccard > .body { padding: 20px 18px; }
.publiccard h1 { font: 600 24px/1.2 var(--sans); margin: 0 0 8px; overflow-wrap: anywhere; }
.publiccard p { color: var(--so); margin: 0 0 18px; }
.publiccard p:last-child { margin: 0; }
.publiccard button { min-height: 40px; padding: 0 16px; }
/* A page of text (/bot): one readable column. */
main.prose { max-width: 720px; margin: 0 auto; padding: 40px var(--pad) 64px; font-size: 16px; line-height: 1.6; }
main.prose h1 { font: 600 30px/1.2 var(--mono); margin: 0 0 14px; }
main.prose h2 { font: 600 12px var(--cond); letter-spacing: .14em; margin: 36px 0 10px; }
main.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
main.prose p { margin: 0 0 12px; }
main.prose code { font-size: 13px; padding: 1px 5px; background: var(--pn2); border: 1px solid var(--ln); border-radius: 3px; overflow-wrap: anywhere; }

/* ---------- Sign-in (and the other auth pages): one card on graph paper ---------- */
body.authpage { position: relative; display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px; background-position: -1px -1px; }
.authbar { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; }
.authbar .brand { font-size: 16px; }
svg.splash { position: absolute; left: 28px; top: 50%; width: calc(100% - 56px); height: 56px; transform: translateY(-50%); opacity: .9; }
svg.splash .beat { fill: var(--splash); }
svg.splash .miss { fill: var(--miss); }
svg.splash .now { fill: var(--ac); }
.authmain { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.authcard { width: 100%; max-width: 400px; background: var(--pn); border: 1px solid var(--ln); border-radius: 4px; box-shadow: 0 0 0 8px var(--bg); }
.authcard > .title { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--ln); background: var(--pn2);
  border-radius: 4px 4px 0 0; font: 600 11px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
.authcard > .title .live { width: 6px; height: 6px; background: var(--ac); }
.authcard > .body { padding: 26px 22px 24px; }
.authcard h1 { font: 600 28px/1.15 var(--sans); letter-spacing: -.01em; margin: 0 0 8px; overflow-wrap: anywhere; }
.authcard .lead { font-size: 15px; margin: 0 0 22px; }
.authcard .button.big, .authcard button.big { display: flex; width: 100%; min-height: 0; padding: 14px 16px; font: 700 13px/1 var(--cond); letter-spacing: .1em;
  border-color: var(--ac); background: var(--ac); color: var(--onac); }
.authcard .hint { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--mu); }
.authcard .devsignin { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--ln2); }
.authcard .devsignin .hint { margin: 0 0 8px; text-align: left; }
.authcard .devsignin label { margin: 0 0 10px; }
.authfoot { position: relative; padding: 18px 28px; font: 11px var(--mono); color: var(--dm); text-align: center; }
@media (max-width: 640px) { .authbar, .authfoot { padding-left: 16px; padding-right: 16px; } svg.splash { left: 16px; width: calc(100% - 32px); } }

/* ---------- Admin portal ---------- */
/* Its header: the app's, with the red ADMIN badge; eleven sections wrap on desktop, scroll on phones. */
.adminbar .brand { display: inline-flex; align-items: center; gap: 8px; }
.adminbar .brand .badge { font-size: 10px; line-height: 16px; }
@media (min-width: 641px) {
  .appbar.adminbar { height: auto; min-height: 48px; }
  .adminbar .appnav { flex: 1 1 0; min-width: 0; flex-wrap: wrap; }
  .adminbar .appnav a { min-height: 40px; padding: 0 10px; }
  .adminbar .who { white-space: nowrap; }
}
body.admin main > h1.list { margin-bottom: 14px; }
body.admin h1.list .since { font: 11px var(--mono); letter-spacing: 0; text-transform: none; color: var(--dm); margin-left: 6px; }
body.admin main > .backlink { display: inline-block; margin-bottom: 8px; }
body.admin main > h1:not(.list) { overflow-wrap: anywhere; }
body.admin main > form.row { margin: 0 0 12px; }
body.admin main > form.row input { width: auto; flex: 1 1 260px; max-width: 420px; margin: 0; }
body.admin main > table { border-radius: 4px; }
body.admin main > .panel.danger { margin-top: 24px; max-width: 640px; }
body.admin main > .panel.danger > .body label { margin: 12px 0; }
/* The overview: seven counts, the troubled ones in their colour. */
.stats.overview { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.stats.overview > * { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; color: var(--fg); text-decoration: none; }
.stats.overview > a:hover { background: var(--rs); opacity: 1; }
.stats.overview .n { font-size: 26px; }
.stats.overview .bad .n { color: var(--downTx); }
.stats.overview .warn .n { color: var(--lateTx); }
.stats.overview .sub { white-space: normal; }
@media (max-width: 640px) {
  .stats.overview .n { font-size: 20px; }
  .stats.overview > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Older screens, until each is redone ---------- */
code.key { font-size: 20px; letter-spacing: .05em; user-select: all; }
.copyline { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 8px 0; }
.copyline pre, .copyline code { flex: 1 1 20em; min-width: 0; margin: 0; overflow-x: auto; }
.copyline button { flex: none; }

/* ---------- Public status pages (D53) ---------- */
.statuspage main { max-width: 860px; margin: 0 auto; padding: 24px var(--pad) 40px; display: flex; flex-direction: column; gap: 16px; }
.statusbanner { border: 1px solid var(--ln); border-left: 4px solid var(--ac); background: var(--pn); border-radius: 4px; padding: 16px 20px; }
.statusbanner h1 { margin: 0; font-size: 20px; }
.statusbanner.down { border-left-color: var(--down); background: var(--rowD); }
.statusbanner.degraded, .statusbanner.maintenance { border-left-color: var(--late); background: var(--rowL); }
.statuspage .panel > .title.split { display: flex; justify-content: space-between; gap: 12px; }
.system { padding: 12px 16px; border-top: 1px solid var(--ln2); }
.system:first-of-type { border-top: 0; }
.system .line, .incident { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.system .label, .incident .label { font-weight: 600; }
.system .state { font: 600 12px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
.system .state.down { color: var(--downTx); }
.system .state.degraded, .system .state.maintenance { color: var(--lateTx); }
.system .days { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; margin: 8px 0 4px; height: 28px; }
.system .day { border-radius: 2px; background: var(--beat); }
.system .day.none { background: var(--miss); }
.system .day.some { background: var(--late); }
.system .day.down { background: var(--down); }
.system .range { display: flex; justify-content: space-between; font-size: 11px; color: var(--dm); }
.incident { padding: 10px 16px; border-top: 1px solid var(--ln2); }
.incident:first-of-type { border-top: 0; }
.incident .when { font-size: 12px; color: var(--mu); }
.statusfoot { margin: 0; text-align: center; font-size: 12px; color: var(--dm); }
.statuspick .pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 4px 0; }
.okline { margin: 0 0 12px; }
.statuspage .publicbar > div { max-width: 860px; }