/* Env Dashboard. Every text/background pair is checked by test/contrast.test.js
   (4.5:1 for text, 3:1 for borders and icons). Change a token, run the tests. */
:root {
  --bg: #f4f3ef;            /* warm paper, not grey */
  --surface: #ffffff;
  --ink: #17191c;
  --body: #2b2f33;
  --muted: #5b6168;
  --line: #e3e1db;          /* dividers only, never the only cue */
  --field: #6b7177;         /* input borders: 3:1+ */
  --accent: #0d6b5c;
  --accent-ink: #ffffff;
  --link: #0d6b5c;
  --focus: #0d6b5c;
  /* Level colours: the solid one for marks, bars and text on the surface;
     the tint and its ink for filled pills and board tiles. */
  --ok: #2f7d4f;    --ok-bg: #e3f3e8;    --ok-ink: #1f6b40;
  --warn: #a35d00;  --warn-bg: #fff1b8;  --warn-ink: #7a4a00;
  --crit: #b42318;  --crit-bg: #fde8e6;  --crit-ink: #8c1d13;
  --info: #1d5b9b;  --info-bg: #e3eef9;  --info-ink: #184a7c;
  --off: #5b6168;   --off-bg: #ecebe7;   --off-ink: #3a3f45;
  /* Signal colours: the level itself, as a filled badge (text in --on-*), a bar or a dot. */
  --lvl-green: #2f7d4f; --on-green: #ffffff;
  --lvl-yellow: #f2c230; --on-yellow: #17191c;
  --lvl-red: #b42318;   --on-red: #ffffff;
  --lvl-blue: #1d5b9b;  --on-blue: #ffffff;
  --lvl-grey: #6b7177;  --on-grey: #ffffff;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(23, 25, 28, .04), 0 10px 30px -18px rgba(23, 25, 28, .18);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1012; --surface: #17181b; --ink: #f5f5f4; --body: #d6d7da; --muted: #a3a7ad;
    --line: #2a2c31; --field: #8e9298; --accent: #6fd3b7; --accent-ink: #06201a; --link: #6fd3b7; --focus: #6fd3b7;
    --ok: #6fd49a; --ok-bg: #163424; --ok-ink: #9fe3bb;
    --warn: #f2bf5e; --warn-bg: #3b2a0e; --warn-ink: #f6d28a;
    --crit: #ff8a7a; --crit-bg: #4a1a16; --crit-ink: #ffb3a8;
    --info: #7cc4ff; --info-bg: #0e2a44; --info-ink: #b5dcff;
    --off: #c9ccd2; --off-bg: #2a2c31; --off-ink: #e3e5e8;
    --lvl-red: #ef5350; --on-red: #17191c; --lvl-blue: #4a90d9; --on-blue: #17191c;
    --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1012; --surface: #17181b; --ink: #f5f5f4; --body: #d6d7da; --muted: #a3a7ad;
  --line: #2a2c31; --field: #8e9298; --accent: #6fd3b7; --accent-ink: #06201a; --link: #6fd3b7; --focus: #6fd3b7;
  --ok: #6fd49a; --ok-bg: #163424; --ok-ink: #9fe3bb;
  --warn: #f2bf5e; --warn-bg: #3b2a0e; --warn-ink: #f6d28a;
  --crit: #ff8a7a; --crit-bg: #4a1a16; --crit-ink: #ffb3a8;
  --info: #7cc4ff; --info-bg: #0e2a44; --info-ink: #b5dcff;
  --off: #c9ccd2; --off-bg: #2a2c31; --off-ink: #e3e5e8;
  --lvl-red: #ef5350; --on-red: #17191c; --lvl-blue: #4a90d9; --on-blue: #17191c;
  --shadow: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font: 400 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}
html.kiosk { font-size: 112.5%; } /* rem-sized text scales too */
body.kiosk { font-size: 1rem; }
h1, h2, h3 { color: var(--ink); line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.0625rem; }
p { margin: 0 0 .75rem; }
a { color: var(--link); }
img, svg, video { max-width: 100%; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---- top bar ---- */
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1280px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.brand { font-weight: 700; color: var(--ink); font-size: 1.0625rem; flex: 1 1 auto; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.brand small { font-weight: 400; color: var(--muted); font-size: .9375rem; }
.ctls { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; justify-content: flex-end; }
.ctl { display: inline-flex; align-items: center; gap: 6px; }
.ctl label { margin: 0; font-size: .9375rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.ctls select { width: auto; max-width: min(60vw, 320px); min-height: 44px; padding: 6px 10px; }
.ctls button { min-height: 44px; padding: 0 12px; }
.who { color: var(--muted); font-size: .9375rem; }
.who a.back { min-height: 44px; }
@media (max-width: 720px) {
  .brand { flex-basis: 100%; }
  .ctls { width: 100%; justify-content: flex-start; }
}
nav.tabs { max-width: 1280px; margin: 0 auto; padding: 0 8px; display: flex; gap: 4px; overflow-x: auto; }
nav.tabs a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--body);
  text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap;
}
nav.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.badge-count { margin-left: 6px; background: var(--crit-bg); color: var(--crit-ink); border-radius: 99px; padding: 0 8px; font-size: .875rem; }

main { max-width: 1280px; margin: 0 auto; padding: 16px; }
.banner { border-radius: var(--radius); padding: 12px 14px; margin: 0 0 16px; }
.banner.warn { background: var(--warn-bg); color: var(--warn-ink); }
.banner.crit { background: var(--crit-bg); color: var(--crit-ink); }
.banner.info { background: var(--info-bg); color: var(--info-ink); }
.banner b { color: inherit; }

/* ---- buttons and fields ---- */
button, .btn {
  font: inherit; font-weight: 600; min-height: 44px; padding: 0 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--field); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
}
button.primary, .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.danger { color: var(--crit-ink); background: var(--crit-bg); border-color: var(--crit-ink); }
button:disabled { cursor: not-allowed; background: var(--off-bg); color: var(--off-ink); border-color: var(--field); }
label { display: block; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.hint { color: var(--muted); font-size: .9375rem; font-weight: 400; margin: 2px 0 0; }
input, select, textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--field); border-radius: 10px; min-height: 44px; padding: 8px 12px; width: 100%;
}
textarea { min-height: 88px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--accent); flex: none; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--body); min-height: 44px; padding-top: 10px; }
.check span b { color: var(--ink); }
.field { margin: 0 0 14px; }
/* Shared label/control/help tracks keep wrapped labels and help text aligned. */
.row { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); column-gap:12px; row-gap:0; align-items:start; }
.row > .field { display:grid; grid-template-rows:subgrid; grid-row:span 3; min-width:0; }
.row > .field > label:not(.check) { grid-row:1; align-self:end; }
.row > .field > :is(input,select,textarea,button,.btn) { grid-row:2; align-self:start; }
.row > .field > .hint { grid-row:3; }
.row > .field > .check { grid-row:2 / span 2; }
.row > .field.fit > :is(button,.btn) { justify-self:start; }
.err { color: var(--crit-ink); background: var(--crit-bg); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.okmsg { color: var(--ok-ink); background: var(--ok-bg); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }

/* ---- cards ---- */
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.toolbar .spacer { margin-left: auto; }
.asof { color: var(--muted); font-size: .9375rem; }
.grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.card h3 { margin: 0; font-size: 1.0625rem; overflow-wrap: anywhere; }
.card .sub { color: var(--muted); font-size: .9375rem; margin: 2px 0 10px; }
.reading { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.reading .big { font-size: 2.25rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.reading .big small { font-size: 1.125rem; font-weight: 600; }
.reading .side { color: var(--body); }
.reading .side b { color: var(--ink); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 10px 0 0; font-size: .9375rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--ink); font-weight: 600; }
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 3px 10px; font-size: .9375rem; font-weight: 600; }
.pill.info { background: var(--info-bg); color: var(--info-ink); }
.pill.warning { background: var(--warn-bg); color: var(--warn-ink); }
.pill.critical { background: var(--crit-bg); color: var(--crit-ink); }
.pill.ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill.off { background: var(--off-bg); color: var(--off-ink); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.ruleline { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: .9375rem; }
.ruleline.warning { background: var(--warn-bg); color: var(--warn-ink); }
.ruleline.critical { background: var(--crit-bg); color: var(--crit-ink); }
.ruleline.info { background: var(--info-bg); color: var(--info-ink); }
.ruleline b { color: inherit; }

/* ---- lists and tables ---- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 0 0 16px; box-shadow: var(--shadow); }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 12px 0; border-top: 1px solid var(--line); }
.list > li:first-child { border-top: 0; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink); font-weight: 700; white-space: nowrap; background: var(--surface); }
td { color: var(--body); }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty { color: var(--muted); padding: 16px 0; }

/* ---- settings layout ---- */
.settings { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .settings { grid-template-columns: 220px 1fr; } }
.subnav { display: flex; gap: 4px; overflow-x: auto; }
@media (min-width: 960px) { .subnav { flex-direction: column; } }
.subnav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: var(--body); font-weight: 600; white-space: nowrap; }
.subnav a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }
@media (min-width: 960px) { .subnav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); } }
a.back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.days { display: grid; grid-template-columns: 1fr; gap: 8px; }
.day { display: grid; grid-template-columns: 64px 1fr 1fr; gap: 8px; align-items: center; }
.day b { color: var(--ink); }

/* ---- dialog ---- */
dialog { border: 1px solid var(--line); border-radius: var(--radius); padding: 0; max-width: min(560px, calc(100vw - 32px)); width: 100%; background: var(--surface); color: var(--body); }
dialog::backdrop { background: rgba(15, 23, 42, .55); }
dialog .dlg { padding: 18px; }
dialog .actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }

/* ---- sign-in ---- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.auth .box { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); }
.auth h1 { margin-bottom: 4px; }
.auth .lead { color: var(--muted); margin-bottom: 18px; }
.auth button.primary { width: 100%; margin-top: 6px; }

/* ---- utilities (no inline styles: the CSP forbids them) ---- */
.line { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1 1 220px; min-width: 0; }
.row > .field.fit, .field.fit { flex: 0 0 auto; }
.mt { margin-top: 12px; }
.mt-s { margin-top: 6px; margin-bottom: 0; }
.mb { margin: 0 0 6px; }
.m0 { margin: 0; }
select.auto { width: auto; max-width: 100%; }
ul.rules { margin: 4px 0 6px; padding-left: 1.2em; color: var(--body); }
ul.rules li { margin: 2px 0; }
@media (max-width: 480px) { nav.tabs a { padding: 0 10px; } }

/* ---- sensors list view ---- */
.seg { display: inline-flex; border: 1px solid var(--field); border-radius: 10px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; min-height: 44px; background: var(--surface); color: var(--ink); }
.seg button + button { border-left: 1px solid var(--field); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
table.sensors td b { color: var(--ink); }
table.sensors td .pill { white-space: normal; }
.panel.scroll-x { padding: 0; }
.panel.scroll-x table { font-size: 1rem; }
.panel.scroll-x th, .panel.scroll-x td { padding: 10px 12px; }
/* ---- platform page ---- */
.orgs { display: grid; gap: 12px; }
.card.org h3 { font-size: 1.125rem; }
.card.org details { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.card.org summary { cursor: pointer; font-weight: 600; color: var(--ink); min-height: 44px; display: flex; align-items: center; }
.card.org h4 { margin: 8px 0 4px; font-size: 1rem; color: var(--ink); }
.checks { display: grid; gap: 4px; }
table.sensors td:nth-last-child(2) { min-width: 240px; }
table.sensors td:first-child { min-width: 140px; }
/* ---- menu permissions dialog ---- */
.perm-list { display: grid; gap: 6px; margin: 8px 0; }
.perm-list .check { min-height: 40px; padding-top: 6px; }

/* ---- rule chips and bubbles ---- */
.pill.chip { cursor: pointer; border: 0; font: inherit; font-size: .9375rem; font-weight: 600; min-height: 44px; padding: 6px 12px; gap: 8px; text-align: left; white-space: normal; }
.pill.chip .chip-i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; font-size: .8125rem; font-weight: 700; font-style: italic; flex: none; }
.pill.chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.bubble { position: fixed; z-index: 50; background: var(--surface); color: var(--body); border: 1px solid var(--field); border-radius: 12px; padding: 14px 40px 12px 14px; box-shadow: 0 8px 24px rgba(15, 23, 42, .18); font-size: 1rem; line-height: 1.45; max-height: calc(100vh - 24px); overflow: auto; }
.bubble .b-title { margin: 0 0 2px; font-weight: 700; color: var(--ink); }
.bubble .b-cite { margin: 0 0 8px; color: var(--muted); font-size: .9375rem; }
.bubble .b-sub { margin: 8px 0 4px; font-weight: 600; color: var(--ink); font-size: .9375rem; }
.bubble blockquote { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--field); color: var(--body); }
.bubble cite { font-style: normal; color: var(--muted); white-space: nowrap; }
.bubble .b-reading { margin: 8px 0 0; color: var(--ink); font-weight: 600; }
.bubble .b-close { position: absolute; top: 4px; right: 4px; min-height: 44px; min-width: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 1.5rem; line-height: 1; }
/* ---- sparkline ---- */
.spark { margin: 8px 0 2px; position: relative; }
.spark .hint { font-size: .9375rem; }
.spark-svg { display: block; width: 100%; height: 56px; }
.spark-area { fill: var(--accent); fill-opacity: .12; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-guide { stroke: var(--crit-ink); stroke-width: 1.5; stroke-dasharray: 4 4; }
.spark-end { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.spark-read { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; color: var(--muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.spark-hover { position: absolute; top: 0; right: 0; background: var(--ink); color: var(--surface); border-radius: 8px; padding: 2px 8px; font-size: .9375rem; font-variant-numeric: tabular-nums; pointer-events: none; }
/* ---- the Heat rules page ---- */
.reg .regmain { max-width: 860px; margin: 0 auto; padding: 16px 16px 48px; min-width: 0; }
/* Inside the app the plan sits in a grid cell: let its wide tables scroll in their box instead of widening the page. */
.dashboard-app main .reg, .dashboard-app main .reg .note, .dashboard-app main .reg .regtext { min-width: 0; max-width: 100%; }
.reg .two > *, .reg section, .reg .scroll-x { min-width: 0; max-width: 100%; }
.reg .regmain { overflow-wrap: anywhere; } /* the plan's verbatim blank lines ("______") and long URLs must not widen a phone page */
.dashboard-app main .reg .regmain { padding-left: 0; padding-right: 0; }
.reg .lead { font-size: 1.0625rem; max-width: 70ch; }
.reg .note { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 16px 0; }
.reg .note p { max-width: 72ch; }
.reg .two { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .reg .two { grid-template-columns: 1fr 1fr; } }
.reg .toc { list-style: none; margin: 0; padding: 0; }
.reg .toc li { padding: 4px 0; }
.reg .toc a { display: inline-flex; align-items: center; min-height: 44px; }
.reg .note table { font-size: 1rem; min-width: 640px; }
.reg th { white-space: normal; position: static; }
.reg .note th, .reg .note td { vertical-align: top; }
.reg .regtext { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 16px 0; }
.reg .regtext h2 { font-size: 1.3rem; margin: 0 0 12px; scroll-margin-top: 16px; }
.reg .regtext p { margin: 0 0 8px; scroll-margin-top: 16px; max-width: 80ch; }
.reg .regtext .l1 { margin-top: 18px; font-weight: 600; color: var(--ink); }
.reg .regtext .l2 { padding-left: 1.5rem; }
.reg .regtext .l3 { padding-left: 3rem; }
.reg .regtext .l4 { padding-left: 4.5rem; }
.reg .regtext .l0 { padding-left: 1.5rem; color: var(--body); }
.reg .regtext .lab { font-weight: 700; color: var(--ink); text-decoration: none; }
.reg .regtext .lab:hover, .reg .regtext .lab:focus-visible { text-decoration: underline; }
.reg .regtext :target { background: var(--warn-bg); color: var(--warn-ink); border-radius: 6px; }
.reg .regtext .meta { font-size: 1rem; margin: 16px 0 4px; color: var(--muted); }
.reg .regfoot { color: var(--muted); font-size: 1rem; max-width: 80ch; }

/* ---- measured vs calculated ---- */
.bigwrap { display: grid; gap: 2px; }
.reading .side > div { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mlabel { color: var(--body); }
.mtag { display: inline-flex; align-items: center; font-size: .875rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.bigwrap .mtag { margin-top: -2px; }
button.mtag.calc { position: relative; background: var(--info-bg); color: var(--info-ink); border: 0; border-radius: 6px; padding: 1px 7px; min-height: 24px; cursor: pointer; font: inherit; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
button.mtag.calc:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* ---- summary strip ---- */
.stats { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin: 0 0 14px; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.stat.warn { border-color: var(--warn-ink); }
.stat-v { font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.15; }
.stat-l { color: var(--body); font-weight: 600; }
.stat-s { color: var(--muted); font-size: .9375rem; overflow-wrap: anywhere; }
#theme-btn { min-height: 44px; }

/* ---- sticky tabs on phones (the nav sits outside the header so it can stick) ---- */
nav.tabs { background: var(--surface); border-bottom: 1px solid var(--line); }
@media (max-width: 720px) {
  nav.tabs { position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
}
/* ---- card accents by state ---- */
.card { border-left: 4px solid transparent; }
.card.state-critical { border-left-color: var(--crit-ink); }
.card.state-warning { border-left-color: var(--warn-ink); }
.card.state-silent { border-left-color: var(--field); }
.card.state-silent h3 { color: var(--body); }
/* ---- card sizes: board (a dozen at once), compact, full ---- */
.grid.size-board { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.grid.size-compact { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tile { display: grid; gap: 2px; min-width: 0; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }
.tile.ok { background: var(--ok-bg); color: var(--ok-ink); border-color: transparent; }
.tile.warning { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; }
.tile.critical { background: var(--crit-bg); color: var(--crit-ink); border-color: transparent; }
.tile.off { background: var(--off-bg); color: var(--off-ink); border-color: transparent; }
.tile:hover, .tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.tile-name { font-weight: 700; font-size: .9375rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-v { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile-v small { font-size: 1rem; font-weight: 600; }
.tile-s { font-size: .875rem; min-height: 1.3em; }
.tile-l { font-size: .875rem; font-weight: 700; overflow-wrap: anywhere; }
.card.compact { padding: 12px 14px; }
.card.compact h3.sensor-name { font-size: 1rem; padding-bottom: 8px; margin-bottom: 6px; }
.card.compact .sensor-freshness { margin: 4px 0 8px; }
.card.compact .reading { margin: 8px 0; }
.card.compact .reading .big { font-size: 1.75rem; }
.card.compact .band { padding: 6px 10px; margin-top: 6px; }
.card.compact .band .band-name { font-size: 1rem; }
.levels-today { margin: 8px 0 0; font-size: .875rem; color: var(--body); }
.report-preview { background: var(--bg); padding: 14px; border-radius: 6px; max-height: 420px; overflow: auto; }
/* ---- posted level (rule sets with GREEN / YELLOW / RED levels) ---- */
.band { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; width: 100%; margin: 10px 0 0; padding: 10px 12px; border: 0; border-radius: 10px; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.band.ok { background: var(--ok-bg); color: var(--ok-ink); }
.band.warning { background: var(--warn-bg); color: var(--warn-ink); }
.band.critical { background: var(--crit-bg); color: var(--crit-ink); }
.band .band-name { font-size: 1.25rem; font-weight: 800; letter-spacing: .04em; }
.band .band-when { font-weight: 600; }
.band .band-since { margin-left: auto; font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.band .chip-i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; font-size: .8125rem; font-weight: 700; font-style: italic; flex: none; }
.band:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pill.band-pill .band-name { font-weight: 800; letter-spacing: .04em; }
.pills.m0 { margin: 0; }
.kiosk .band .band-name { font-size: 1.5rem; }
/* ---- toasts ---- */
.toasts { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); border-radius: 10px; padding: 12px 16px; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); animation: toast-in .18s ease-out; }
.toast.err { background: var(--crit-ink); color: var(--crit-bg); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* ---- skeleton placeholders ---- */
.skel { background: var(--line); border-radius: 8px; animation: skel 1.2s ease-in-out infinite; }
.skel-card { display: grid; gap: 10px; }
.skel-card .skel:nth-child(1) { height: 20px; width: 55%; }
.skel-card .skel:nth-child(2) { height: 44px; width: 70%; }
.skel-card .skel:nth-child(3) { height: 56px; }
.skel-card .skel:nth-child(4) { height: 28px; width: 40%; }
.skel-row { height: 52px; margin: 10px 0; }
@keyframes skel { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .skel, .toast { animation: none; } }

/* ---- tooltip anchors ---- */
.tipb { position: relative; font: inherit; color: inherit; background: none; border: 0; padding: 0; min-height: 0; cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; text-align: inherit; }
/* Inline tip anchors keep their size on screen but take a 44 px touch area. */
.tipb::before, button.mtag.calc::before { content: ''; position: absolute; inset: -10px -6px; }
.tipb.pill { text-decoration: none; cursor: pointer; }
.tipb.mtag { text-decoration: underline dotted; }
.tipb:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.stat-l .tipb { font-weight: 600; }
th .tipb { font-weight: 700; }
/* ---- message wording ---- */
.ph-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.ph { font: inherit; font-size: .9375rem; font-family: ui-monospace, Menlo, monospace; min-height: 44px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--field); background: var(--surface); color: var(--ink); cursor: pointer; }
.msg-cols { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .msg-cols { grid-template-columns: 1fr 1fr; } }
.msg-group { margin: 0 0 16px; }
.msg-group h3 { margin: 0 0 8px; }
.msg-group textarea { min-height: 140px; font-family: ui-monospace, Menlo, monospace; font-size: 16px; }
.msg-group input { font-family: ui-monospace, Menlo, monospace; font-size: 16px; }
.previews { display: grid; gap: 14px; }
.preview { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.preview h4 { margin: 0 0 6px; font-size: 1rem; color: var(--ink); }
.pv-label { margin: 8px 0 4px; font-weight: 600; color: var(--muted); font-size: .9375rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pv { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 15px/1.45 ui-monospace, Menlo, monospace; background: var(--bg); border-radius: 8px; padding: 8px 10px; color: var(--body); }

/* ---- sensor page ---- */
.cardlink, .rowlink { color: var(--ink); text-decoration: none; }
.cardlink:hover, .rowlink:hover, .cardlink:focus-visible, .rowlink:focus-visible { text-decoration: underline; }
.rowlink { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.charts { display: grid; gap: 14px; }
.chart { position: relative; }
.chart-svg { display: block; width: 100%; height: auto; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-lab { fill: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.chart-lab.guide { fill: var(--crit-ink); font-size: 13px; }
.chart-cross { stroke: var(--field); stroke-width: 1; stroke-dasharray: 2 3; }
.diff-bad { color: var(--crit-ink); }
.facts dd { overflow-wrap: anywhere; }

/* Operations overview shell: quiet surfaces, clear metrics, persistent health. */
.dashboard-app .top-in { max-width: none; padding: 10px 24px; }
.dashboard-app .brand { font-size: 1rem; }
.dashboard-app .brand small { display: none; }
.app-shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.app-rail { background: var(--surface); border-right: 1px solid var(--line); padding: 24px 12px; position: sticky; top: 0; align-self: start; min-height: calc(100vh - 66px); }
.app-mark { display: flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; padding: 0 10px 24px; color: var(--link); font-size: 1rem; }
.app-mark img { width: 24px; height: 24px; }
.app-rail nav.tabs { display: grid; gap: 6px; padding: 0; background: transparent; border: 0; overflow: visible; }
.app-rail nav.tabs a { border: 0; border-radius: 8px; padding: 8px 12px; font-weight: 500; }
.app-rail nav.tabs a[aria-current="page"] { background: var(--bg); color: var(--link); box-shadow: inset 3px 0 0 var(--accent); }
.rail-note { color: var(--muted); font-size: .8125rem; padding: 24px 10px 0; }
.app-content { min-width: 0; }
.dashboard-app main { padding: 24px; max-width: 1400px; }
.health-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: .875rem; color: var(--muted); }
.health-banner.has-error { background: var(--warn-bg); color: var(--warn-ink); }
.health-banner .notify-state { margin-left: auto; }
.health-banner a { font-weight: 600; }
.setup-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 0; margin-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .9375rem; }
.setup-strip a { font-weight: 600; }
.stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 20px 0; }
.stat { padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.stat-v { font-size: 2rem; margin: 6px 0; font-variant-numeric: tabular-nums; }
.stat-l { font-weight: 500; color: var(--muted); font-size: .875rem; }
.stat-s { font-size: .8125rem; }
.stat.warn { border-bottom-color: var(--warn-ink); }
/* One tight row, left to right: View, Find (grows), Show, More options; each with a label above (owner, 2026-10-24). */
.sensor-controls { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0 20px; }
.ctl-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ctl-field.grow { flex: 1 1 240px; }
.ctl-field label { font-size: .9375rem; font-weight: 600; color: var(--body); }
.ctl-field input { width: 100%; min-width: 0; }
.ctl-field select { flex: 0 1 auto; }
/* Controls that do not apply to the current view stay in place, dimmed and inert; the text keeps a readable contrast. */
.sensor-controls [disabled] { background: var(--bg); color: var(--body); border-color: var(--line); cursor: not-allowed; }
.sensor-controls input[disabled]::placeholder { color: var(--body); }
.grid { gap: 16px; }
.card { padding: 18px; border-radius: 10px; }
.card .sub { font-size: .875rem; }
.card .reading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin: 14px 0; }
.card .reading .big { font-size: 2.5rem; font-variant-numeric: tabular-nums; }
.card .reading .side { display: grid; gap: 6px; }
.card .reading .side > div { justify-content: space-between; gap: 4px 8px; font-size: .875rem; }
.mtag { font-size: .75rem; letter-spacing: 0; text-transform: none; font-weight: 400; }
button.mtag.calc { font-size: .75rem; font-weight: 500; letter-spacing: 0; text-transform: none; background: none; color: var(--muted); padding: 0; }
.pill { font-size: .8125rem; font-weight: 500; }
.pill.chip { font-size: .8125rem; min-height: 36px; line-height: 1.4; }
.pill.chip .chip-i { width: 18px; height: 18px; }
.spark-read { font-size: .75rem; }
.panel { border-radius: 10px; padding: 20px; }
.detail-section { margin: 0 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.detail-section > summary { display: flex; align-items: center; min-height: 48px; padding: 12px 18px; color: var(--ink); font-weight: 600; cursor: pointer; }
.detail-section > summary::before { content: '›'; margin-right: 10px; }
.detail-section[open] > summary::before { content: '⌄'; }
.detail-section > .panel { border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; }
.chart-plot { position: relative; }
.chart-lab { font-size: 12px; }
.chart-lab.guide { font-size: 12px; }
.chart-data { margin-top: 8px; }
.chart-data summary { min-height: 44px; display: flex; align-items: center; color: var(--link); cursor: pointer; font-size: .9375rem; }
.msg-cols { align-items: start; }
.msg-cols textarea { min-height: 120px; }
.msg-cols textarea[id$="_body"] { min-height: 220px; }
.preview { min-width: 0; }
.preview h3 { margin-bottom: 14px; }
.ph-chips { gap: 5px; }
.ph { min-height: 36px; font-size: .8125rem; padding: 0 8px; }
@media (min-width: 960px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .app-shell { display: block; }
  .app-rail { position: sticky; top: 0; z-index: 20; min-height: 0; padding: 6px 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .app-mark, .rail-note { display: none; }
  .app-rail nav.tabs { display: flex; flex-wrap: wrap; gap: 2px; box-shadow: none; position: static; }
  .app-rail nav.tabs a { font-size: .8125rem; padding: 4px 8px; }
  .app-rail nav.tabs a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
  .dashboard-app .top-in { padding: 10px 16px; }
  .dashboard-app main { padding: 18px 16px; }
  .health-banner { padding: 10px 16px; gap: 6px 12px; }
  .health-banner .notify-state { margin-left: 0; }
  .card .reading .big { font-size: 2.25rem; }
}
@media (max-width: 480px) {
  .stats { gap: 10px; }
  .stat-v { font-size: 1.625rem; }
  .stat-l, .stat-s { font-size: .75rem; }
  .card { padding: 16px; }
  .msg-cols { display: block; }
  .preview { margin-top: 20px; }
}
@media (pointer: coarse) { .ph, .pill.chip { min-height: 44px; } }

/* Message composition: one channel at a time, with a matching recipient preview. */
button, .btn, input, select, textarea, .panel, .card, .subnav a { border-radius: 6px; }
.dashboard-app h1 { font-size: 1.875rem; letter-spacing: -.035em; }
.settings > * { min-width: 0; }
.message-workspace { max-width: 1120px; min-width: 0; }
.message-header { padding: 4px 0 24px; }
.message-header h1 { margin-bottom: 8px; }
.message-eyebrow { color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; margin: 0 0 10px; }
.message-selector { padding: 20px 0; border-top: 1px solid var(--line); }
.message-selector .field { margin: 0; max-width: 680px; }
.message-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); }
.message-tabs button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; padding: 12px 4px; color: var(--muted); }
.message-tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.message-channel { background: var(--surface); padding: 28px; border: 1px solid var(--line); border-top: 0; }
.message-channel h2 { font-size: 1.375rem; letter-spacing: -.025em; margin-bottom: 16px; }
.message-placeholders { margin-bottom: 20px; }
.message-placeholders summary { min-height: 44px; padding: 10px 0; color: var(--link); cursor: pointer; font-size: .9375rem; font-weight: 600; }
.message-placeholders .ph-chips { margin-top: 12px; }
.message-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.message-columns > * { min-width: 0; }
.message-columns textarea { min-height: 200px; line-height: 1.6; }
.message-columns textarea[id$="_body"] { min-height: 300px; }
.message-preview { background: var(--bg); padding: 20px; border-radius: 4px; }
.message-preview .hint { font-size: .8125rem; }
.message-copy { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .9375rem; line-height: 1.65; margin: 0; }
.sms-preview { margin: 20px 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px 14px 14px 2px; padding: 16px; }
.email-preview { margin-top: 20px; background: var(--surface); border: 1px solid var(--line); padding: 18px; }
.email-preview .pv-label { font-size: .75rem; margin: 0 0 4px; }
.email-subject { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.message-test { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px; }
.message-test > .field { max-width: 380px; }
.message-test-channel { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 16px; margin-top: 20px; }
.message-test-channel .field { flex: 1 1 260px; max-width: 480px; }
.message-test-channel button { margin-top: 28px; }
.message-combined { padding: 20px 0; }
.message-combined > .hint { margin: 8px 0 16px; max-width: 70ch; }
.message-combined > button { background: var(--surface); color: var(--ink); border-color: var(--field); }
.message-save { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; border-top: 1px solid var(--line); padding: 20px 0 12px; }
.sensor-name { text-transform: uppercase; letter-spacing: .035em; overflow-wrap: anywhere; }
.card h3.sensor-name { font-size: 1.25rem; font-weight: 750; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 2px solid var(--line); }
.sensor-heading { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 2px solid var(--line); }
.dashboard-app h1.sensor-title { font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: .025em; }
.sensor-heading .sub { margin: 6px 0 0; }
@media (max-width: 600px) {
  .message-channel { padding: 20px 16px; }
  .message-preview { padding: 14px; }
  .message-test-channel button { margin-top: 0; }
  .message-save .line { width: 100%; }
  .message-save button { width: 100%; }
}
/* Keep settings navigation in one horizontal row instead of a second sidebar. */
.settings { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.settings > .subnav { flex-direction: row; gap: 20px; border-bottom: 1px solid var(--line); }
.settings > .subnav a { border-radius: 0; padding: 8px 0; box-shadow: none; border-bottom: 3px solid transparent; }
.settings > .subnav a[aria-current="page"] { background: transparent; box-shadow: none; border-bottom-color: var(--accent); }
@media (min-width: 900px) { .message-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Account identity belongs in a dropdown, with a compact header trigger. */
.account-dropdown { position: relative; flex: none; }
.ctls .account-toggle { border: 0; background: transparent; padding: 4px 6px; gap: 10px; font-size: .9375rem; }
.account-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--off-bg); color: var(--off-ink); font-size: .8125rem; font-weight: 700; }
.account-chevron { color: var(--muted); font-size: 1rem; }
.account-panel { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; width: 292px; max-width: calc(100vw - 32px); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 12px 32px rgb(0 0 0 / .14); padding: 6px; }
.account-identity { display: grid; gap: 3px; padding: 12px 10px 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; font-size: .875rem; }
.account-identity strong { color: var(--ink); font-size: .9375rem; }
.account-identity .hint { font-size: .8125rem; }
.account-panel .account-action { width: 100%; display: flex; align-items: center; justify-content: flex-start; min-height: 44px; padding: 10px; border: 0; background: transparent; border-radius: 4px; color: var(--ink); font-size: .9375rem; font-weight: 500; text-decoration: none; }
.account-panel .account-action:hover { background: var(--bg); }
.account-panel .account-signout { border-top: 1px solid var(--line); border-radius: 0; margin-top: 6px; }
.account-preview { padding: 10px; border-top: 1px solid var(--line); }
.account-preview label { font-size: .8125rem; }
.account-preview select { width: 100%; max-width: none; }
.card-history { width: 100%; margin-top: 18px; }
.card-history-heading { font-size: .8125rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.card-history-svg { display: block; width: 100%; height: auto; }
.card-history .spark-read { margin-top: 4px; font-size: .8125rem; }
@media (max-width: 720px) {
  .dashboard-app .top-in { flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
  .dashboard-app .brand { flex: 1 1 auto; min-height: 44px; align-items: center; }
  .dashboard-app .ctls { width: auto; justify-content: flex-end; flex: 0 1 auto; gap: 8px; }
  .ctls .ctl { flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
  .ctls .ctl select { max-width: 170px; }
  #account-name { display: none; }
}
@media (max-width: 720px) {
  .dashboard-app .top-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .dashboard-app .ctls { display: contents; }
  .account-dropdown { grid-column: 2; grid-row: 1; }
  #org-pick-wrap { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; flex-wrap: nowrap; gap: 10px; }
  #org-pick-wrap select { flex: 1; max-width: none; min-width: 0; }
}
/* Monitoring workflows and records. */
.workflow-nav { display: flex; gap: 20px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.workflow-nav a { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; }
.workflow-nav a[aria-current="page"] { border-color: var(--accent); color: var(--ink); }
.notification-row h2 { font-size: 1rem; overflow-wrap: anywhere; }
.notification-content { margin-top: 12px; }
.notification-content summary { min-height: 44px; padding: 10px 0; cursor: pointer; color: var(--link); font-weight: 600; }
.notification-content pre { background: var(--bg); padding: 16px; border-radius: 4px; }
.pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 20px 0; }
.pagination > p { flex: 1; }
.saved-view-controls { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 24px; }
.saved-view-controls select { flex:1 1 180px; }
.area-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin:24px 0 16px; padding-bottom:10px; }
.area-heading h2 { margin:0; font-size:1.125rem; }
.sensor-area-group { margin-bottom:24px; }
.sensor-freshness { display:flex; gap:7px; align-items:center; font-size:.8125rem; color:var(--muted); margin:8px 0 16px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none; }
.status-dot.reporting { background:var(--accent); }
.status-dot.offline { background:var(--crit-ink); }
.card .reading { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items:start; }
.card .reading .side { padding-left:18px; border-left:1px solid var(--line); }
.card .reading .side > div { display:grid; grid-template-columns:1fr auto; }
.card .reading .side .mtag { grid-column:1 / -1; }
@media(max-width:480px) { .saved-view-controls button{flex:1 1 auto;} .card .reading .side{padding-left:12px;} }

/* ---- cards: a quieter layout (owner, 2026-10-15) — these come last so they win ---- */
.card .card-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.card .card-head h3 { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.card h3.sensor-name { font-size: 1.0625rem; font-weight: 700; text-transform: none; letter-spacing: 0; border: 0; padding: 0; margin: 2px 0 0; }
.card .card-head .pill { flex: none; }
.card .sub { margin: 4px 0 10px; font-size: .9375rem; color: var(--muted); }
.card .reading { display: flex; align-items: baseline; gap: 10px 16px; flex-wrap: wrap; margin: 4px 0 6px; }
.card .reading .big { font-size: 2rem; font-weight: 700; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.card .reading .big small { font-size: 1rem; font-weight: 600; margin-left: 1px; }
.card .reading .side { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0; border: 0; font-size: .9375rem; color: var(--body); }
.card .reading .side > span { display: inline-flex; align-items: baseline; gap: 4px; }
.card .reading .side b { color: var(--ink); }
.level-line { margin: 2px 0 0; font-weight: 700; font-size: .9375rem; }
.level-line.warning { color: var(--warn-ink); }
.level-line.critical { color: var(--crit-ink); }
.level-line.ok { color: var(--ok-ink); }
.card-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 10px; font-size: .9375rem; color: var(--body); }
.card-foot a { font-weight: 600; }
.card.compact { padding: 14px 16px; }
.card.compact .reading .big { font-size: 1.75rem; }
.card .pills { margin-top: 8px; }
.pill.chip { text-decoration: underline dotted; text-underline-offset: 3px; }
.pill.band-pill .band-name { font-weight: 800; letter-spacing: .04em; }
/* ---- legend under the cards ---- */
.legend { margin: 20px 0 0; }
.legend-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.legend .pill { font-size: 1rem; padding: 6px 12px; min-height: 36px; }
.legend-row .pill b { margin-right: 6px; }
.legend-note { color: var(--body); font-size: 1rem; }
.legend-more { margin-top: 6px; }
.legend-more summary { min-height: 44px; display: flex; align-items: center; color: var(--link); font-weight: 600; cursor: pointer; font-size: 1rem; }
.legend-detail { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.legend-detail table { font-size: 1rem; }
.legend-detail td p { margin: 0 0 4px; }
.legend-item { padding: 10px 0; border-top: 1px solid var(--line); }
.legend-item:first-child { border-top: 0; }
.legend-item b { color: var(--ink); }
.legend-item blockquote { margin: 6px 0; padding: 4px 10px; border-left: 3px solid var(--field); color: var(--body); }
.legend-item cite { font-style: normal; color: var(--muted); }
/* ---- readability: nothing meaningful below 14 px ---- */
.pill { font-size: .9375rem; }
.mtag, button.mtag.calc { font-size: .875rem; }
.sensor-freshness, .stat-s, .rail-note, .spark-read, .card-history-heading { font-size: .875rem; }
.chart-lab, .chart-lab.guide { font-size: 14px; }
@media (max-width: 800px) { .app-rail nav.tabs a { font-size: .9375rem; } }

/* ---- cards v3: one hero number, a level mark, aligned facts (owner, 2026-10-15) ---- */
.card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 12px; border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--line); }
.card.lvl-ok::before { background: var(--ok); }
.card.lvl-warning::before { background: var(--warn); }
.card.lvl-critical::before { background: var(--crit); }
.card.lvl-info::before { background: var(--info); }
.card.lvl-off::before { background: var(--off); }
.card.state-critical, .card.state-warning, .card.state-silent { border-left-color: var(--line); }
.card.state-silent h3 { color: var(--ink); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: nowrap; min-height: 44px; }
.card-top > .lvl, .card-top > .band { flex: 0 1 auto; min-width: 0; white-space: normal; text-wrap: balance; text-align: right; line-height: 1.25; height: auto; letter-spacing: .02em; padding-left: 9px; padding-right: 9px; }
.card-top h3.sensor-name { flex: 1 0 auto; min-width: 0; max-width: 70%; margin: 0; font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; text-transform: none; border: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .meta { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.45; }
.card-meta { margin-top: -6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvl { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; margin: 0; padding: 0 2px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: .875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; cursor: pointer; text-decoration: none; }
.lvl::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.lvl.ok { color: var(--ok); } .lvl.warning { color: var(--warn); } .lvl.critical { color: var(--crit); } .lvl.info { color: var(--info); } .lvl.off { color: var(--off); }
span.lvl { cursor: default; }
.lvl:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.card-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; margin-top: 2px; }
.hero { display: flex; align-items: baseline; line-height: 1; }
.hero-n { font-size: 2.625rem; font-weight: 650; letter-spacing: -.025em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hero-u { margin-left: 3px; font-size: 1.125rem; font-weight: 600; color: var(--muted); }
.hero-l { margin-left: 10px; font-size: .875rem; color: var(--muted); }
.mini { display: grid; grid-template-columns: auto auto; gap: 4px 14px; margin: 0; font-size: .9375rem; }
.mini > div { display: contents; }
.mini dt { color: var(--muted); display: inline-flex; align-items: baseline; gap: 6px; }
.mini dd { margin: 0; text-align: right; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.since { margin: 0; font-size: .9375rem; font-weight: 650; }
.since.ok { color: var(--ok); } .since.warning { color: var(--warn); } .since.critical { color: var(--crit); }
.linklike { border: 0; background: none; padding: 0; min-height: 0; font: inherit; color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.linklike:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--muted); }
.card-foot a { font-weight: 650; color: var(--link); text-decoration: none; }
.card-foot a:hover, .card-foot a:focus-visible { text-decoration: underline; }
.card.compact { padding: 16px 16px 10px; gap: 8px; }
.card.compact .hero-n { font-size: 2.25rem; }
.card .spark { margin: 0; }
.card .pills { margin: 0; }
/* board tiles v3 */
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 14px 14px 12px; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
.tile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--line); }
.tile.ok::before { background: var(--ok); } .tile.warning::before { background: var(--warn); } .tile.critical::before { background: var(--crit); } .tile.off::before { background: var(--off); }
.tile.ok, .tile.warning, .tile.critical, .tile.off { border-color: var(--line); }
.tile-name { font-size: .9375rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
.tile-v { font-size: 1.875rem; font-weight: 650; letter-spacing: -.02em; }
.tile-v small { font-size: .9375rem; font-weight: 600; opacity: 1; }
.tile-s { font-size: .875rem; }
.tile-l { display: flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tile-l::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.tile.plain .tile-l::before { display: none; }
/* pills: quieter */
.pill { border-radius: 8px; padding: 4px 10px; font-weight: 650; }
.pill.chip { border-radius: 8px; }
.stat.warn { border-bottom-color: var(--warn); }
.spark-guide { stroke: var(--crit); }
.chart-lab.guide { fill: var(--crit); }
.status-dot.offline { background: var(--off); }

/* ---- level badges: the level's own colour as a fill, text on it in black or white;
   black text on the tinted board tiles (owner, 2026-10-15: "the yellow cards are brown") ---- */
.lvl { gap: 0; min-height: 28px; padding: 3px 10px; border-radius: 999px; font-size: .875rem; letter-spacing: .05em; }
.lvl::before { display: none; }
.lvl.ok { background: var(--lvl-green); color: var(--on-green); }
.lvl.warning { background: var(--lvl-yellow); color: var(--on-yellow); }
.lvl.critical { background: var(--lvl-red); color: var(--on-red); }
.lvl.info { background: var(--lvl-blue); color: var(--on-blue); }
.lvl.off { background: var(--lvl-grey); color: var(--on-grey); }
.card.lvl-ok::before { background: var(--lvl-green); }
.card.lvl-warning::before { background: var(--lvl-yellow); }
.card.lvl-critical::before { background: var(--lvl-red); }
.card.lvl-info::before { background: var(--lvl-blue); }
.card.lvl-off::before { background: var(--lvl-grey); }
.since { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.since::before { content: ''; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--line); }
.since.ok, .since.warning, .since.critical { color: var(--ink); }
.since.ok::before { background: var(--lvl-green); }
.since.warning::before { background: var(--lvl-yellow); }
.since.critical::before { background: var(--lvl-red); }
.tile.ok::before { background: var(--lvl-green); } .tile.warning::before { background: var(--lvl-yellow); } .tile.critical::before { background: var(--lvl-red); } .tile.off::before { background: var(--lvl-grey); }
.tile.ok, .tile.warning, .tile.critical, .tile.off, .tile.plain { color: var(--ink); }
.tile.ok { background: var(--ok-bg); } .tile.warning { background: var(--warn-bg); } .tile.critical { background: var(--crit-bg); } .tile.off { background: var(--off-bg); }
.tile-s, .tile-v small { color: var(--ink); }
.tile-l { display: grid; justify-items: start; gap: 4px; margin-top: auto; padding-top: 6px; letter-spacing: 0; text-transform: none; font-weight: 650; }
.tile-for { min-height: 1.3em; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile .reading-basis { margin: 0; }
.tile-l::before { display: none; }
.tile-l .lvl { min-height: 26px; padding: 2px 9px; max-width: 100%; white-space: normal; text-align: left; line-height: 1.25; }
.tile.ok .tile-l, .tile.warning .tile-l, .tile.critical .tile-l, .tile.off .tile-l { color: var(--ink); }
.pill.warning, .ruleline.warning, .banner.warn, .health-banner.has-error { color: var(--ink); }
.stat.warn { border-bottom-color: var(--lvl-yellow); }
.legend-row > span { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--ink); }
.legend-row .lvl { margin: 0; }

/* Review fixes: actionable summaries and a shorter path to readings on phones. */
.stat > span { display: block; }
button.stat { display: block; text-align: left; color: var(--ink); font: inherit; cursor: pointer; min-width: 0; }
button.stat:hover, button.stat[aria-pressed="true"] { background: var(--surface); border-bottom-color: var(--accent); }
button.stat:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.stats-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.active-filters, .setup-next { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.active-filters { font-size: .875rem; color: var(--body); }
.rules-notice, .reading-basis { font-size: .875rem; line-height: 1.4; color: var(--body); margin: 0 0 10px; }
.card .reading-basis, .tile .reading-basis { margin: 0; }
.setup-next { padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.work-schedule { display: grid; gap: 14px; margin: 16px 0; }
.work-schedule[hidden] { display: none; }
.work-day { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.day-periods { display: grid; gap: 8px; }
.work-period { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.work-period input { width: 145px; flex: 1 1 110px; min-width: 0; }
.work-period button { flex: none; }
@media (max-width: 600px) {
  .dashboard-app .top-in { padding: 8px 12px; }
  .app-rail nav.tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding: 0 8px; }
  .app-rail nav.tabs a { flex: none; padding: 8px; }
  .dashboard-app main { padding: 14px 12px; }
  .health-banner { padding: 8px 12px; gap: 4px 12px; }
  .health-banner:not(.has-error) > span:first-child { display: none; }
  .health-banner .notify-state { margin-left: 0; }
  .toolbar { margin-bottom: 8px; gap: 4px 8px; }
  .toolbar h1 { font-size: 1.5rem; }
  .toolbar .asof { font-size: .875rem; }
  .stats, .stats-four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 10px 0; }
  .stat { padding-bottom: 6px; }
  .stat-v { font-size: 1.25rem; margin: 2px 0; }
  .stat-s { display: none !important; }
  .stat-l { font-size: .875rem; }
  /* Phone: two per row (View + Show, then Find full width, then More options full width). */
  .sensor-controls { gap: 8px; }
  .ctl-field { flex: 1 1 calc(50% - 4px); }
  .ctl-field.grow { flex-basis: 100%; order: 2; }
  .ctl-field:last-child { flex-basis: 100%; order: 3; }
  .ctl-field:last-child .ctl-spacer { display: none; }
  .ctl-field select, .ctl-field button { width: 100%; max-width: none; }
  .work-day { grid-template-columns: minmax(0, 1fr) auto; }
  .day-periods { grid-column: 1 / -1; grid-row: 2; }
  .work-day > button { grid-column: 2; grid-row: 1; }
}

/* ---- operating-day timeline and shift editor ---- */
.daybar { display: block; width: 100%; height: 60px; margin: 6px 0 6px; }
.daybar-tick { stroke: var(--muted); stroke-width: 1; }
.daybar-hour { fill: var(--body); font-size: 12px; font-weight: 600; }
.daybar-now { stroke: var(--ink); stroke-width: 2; }
.daybar-rest { fill: var(--line); }
.daybar-ok { fill: var(--lvl-green); }
.daybar-warning { fill: var(--lvl-yellow); }
.daybar-critical { fill: var(--lvl-red); }
.daybar-off { fill: var(--field); }
.daybar-shift { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.daybar-lab { fill: var(--body); font-size: 11px; font-weight: 600; }
.shifts { display: grid; gap: 8px; margin: 6px 0; }
.shift-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.shift-row input { width: auto; flex: 1 1 120px; }
.shift-row input[type="time"] { flex: 0 1 130px; }

/* ---- level board: "post the level", readable across the room ---- */
.board-level { display: grid; gap: 6px; margin: 12px 0 20px; padding: 24px 28px; border-radius: 16px; }
.board-level.ok { background: var(--lvl-green); color: var(--on-green); }
.board-level.warning { background: var(--lvl-yellow); color: var(--on-yellow); }
.board-level.critical { background: var(--lvl-red); color: var(--on-red); }
.board-level.off { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.board-kicker { font-size: 1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.board-name { font-size: clamp(3rem, 12vw, 7rem); font-weight: 800; line-height: 1; letter-spacing: -.01em; overflow-wrap: anywhere; }
.board-when { font-size: clamp(1.125rem, 2.5vw, 1.5rem); font-weight: 600; }
.board-since { font-size: clamp(1rem, 2.2vw, 1.375rem); font-weight: 600; font-variant-numeric: tabular-nums; }
.board-do { margin-top: 10px; font-size: clamp(1rem, 2vw, 1.25rem); }
.board-do-title { font-weight: 700; }
.board-do ul { margin: 4px 0 0; padding-left: 1.3em; }
.board-do li { margin: 4px 0; }
.kiosk .board-name { font-size: clamp(4rem, 16vw, 11rem); }
.kiosk .board-do { font-size: 1.375rem; }
/* The compact band at the top of every Sensors view. */
.board-level.compact { padding: 14px 20px 16px; gap: 2px; margin: 10px 0 16px; }
.board-top { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; }
.board-day { font-size: 1rem; font-weight: 600; }
.board-main { display: flex; align-items: center; gap: 6px 24px; flex-wrap: wrap; }
.compact .board-name { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.05; }
.board-meta { display: grid; gap: 2px; min-width: 0; }
.compact .board-when { font-size: 1.125rem; }
.compact .board-since { font-size: 1rem; }
.board-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.board-count { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 2px 10px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .9375rem; font-weight: 500; }
.board-count b { font-weight: 700; }
.board-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.board-dot.ok { background: var(--lvl-green); }
.board-dot.warning { background: var(--lvl-yellow); }
.board-dot.critical { background: var(--lvl-red); }
.board-dot.off { background: var(--line); }
.compact .board-do { margin-top: 8px; font-size: 1rem; }
.compact .board-do li { margin: 2px 0; }
.board-rows { display: grid; gap: 10px; }
.board-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 1fr) minmax(0, 3fr); gap: 8px 16px; align-items: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.board-row .daybar { margin: 0 0 4px; }
.board-row-name { font-size: 1.125rem; font-weight: 700; }
.board-row-sub, .board-row-tot { font-size: 1rem; color: var(--body); }
.board-row-lvl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.board-row-lvl .board-row-sub { line-height: 1.3; }
.board-row-lvl .lvl { font-size: 1rem; min-height: 32px; }
.kiosk .board-row-name { font-size: 1.375rem; }
.kiosk .board-row-lvl .lvl { font-size: 1.125rem; }
@media (max-width: 720px) {
  .board-level { padding: 18px 16px; }
  .board-row { grid-template-columns: minmax(0, 1fr) auto; }
  .board-row > :last-child { grid-column: 1 / -1; }
}

/* ---- monthly record: one page per work area for the binder ---- */
.record-title h2 { margin-bottom: 4px; }
.record-title p { margin: 0 0 6px; color: var(--body); }
.record-area { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.record-head h2 { margin-bottom: 2px; }
.record-sub { margin: 0 0 8px; color: var(--body); }
.record-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; font-size: 1rem; color: var(--body); }
.record-sum b { color: var(--ink); }
.record-table { width: 100%; font-size: 1rem; }
.record-table th, .record-table td { padding: 6px 8px; }
.record-table tfoot th, .record-table tfoot td { font-weight: 700; border-top: 2px solid var(--line); }
.record-empty td { color: var(--body); }
@media print {
  header.top, .app-rail, .health-banner, .no-print, .toasts, nav.tabs, #dlg { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  .app-shell, .app-content, main { display: block; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .record, .record * { color: #000 !important; background: transparent !important; border-color: #777 !important; }
  .record-area.page { break-before: page; }
  .record-area { border-top: 0; }
  .scroll-x { overflow: visible !important; }
  .record-table th, .record-table td { padding: 3px 6px; }
  a { text-decoration: none; }
}

/* Neighbours in a row share one height, so pinned footers and badges line up across the row. */
.grid.size-board, .grid.size-compact, .grid.size-full { align-items: stretch; }
.grid > .tile, .grid > .card { align-self: stretch; }

/* ---- who gets notified ---- */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; }
.flow-step { display: flex; gap: 12px; align-items: flex-start; }
.flow-n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 1rem; }
.flow-t { color: var(--body); font-size: 1rem; line-height: 1.45; margin-top: 2px; }
.contact-detail { color: var(--body); font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere; }
.contact-sensors { max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px; margin: 4px 0 8px; }
.contact-sensors .check { min-height: 40px; padding-top: 6px; }

/* Notifications: a readable, linear settings document. */
.notifications-page { max-width: 1120px; }
.notifications-heading { display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-bottom:24px; }
.notifications-heading h1 { margin:0 0 8px; }
.notification-controls { padding:0; margin:0; border:0; min-width:0; }
.notification-section { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:28px 32px; margin-bottom:20px; }
.notification-section > header { margin-bottom:24px; max-width:760px; }
.notification-section h2 { font-size:1.35rem; margin:4px 0 8px; }
.notification-step { color:var(--muted); font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; margin:0; }
.notification-section .field { max-width:560px; }
.notification-section .row .field { flex:1; }
.notification-day { font-weight:600; }
.notification-detail { border-top:1px solid var(--line); padding:18px 0 4px; margin-top:20px; }
.notification-detail > summary { cursor:pointer; font-weight:650; }
.notification-detail[open] > summary { margin-bottom:18px; }
.notification-shift { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:12px; align-items:end; margin:12px 0; }
.notification-shift .field { margin:0; }
.notification-workday { border-bottom:1px solid var(--line); padding:14px 0; }
.notification-workday .work-period { align-items:end; }
.notification-workday .field { margin:0; }
.notification-people { width:100%; min-width:660px; }
.notification-people td { vertical-align:top; }
.notification-people .hint { max-width:280px; overflow-wrap:anywhere; }
.notification-check { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.notification-overview { margin:20px 0; padding:4px 20px; border-left:3px solid var(--accent); }
.notification-save { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:24px; }
.notification-save .hint { margin:0; }
.notification-report { max-height:520px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
.notifications-page .message-workspace { margin-top:16px; }
.notifications-page .message-channel { border-radius:4px; }
@media (max-width:700px) {
  .notifications-heading { display:block; }
  .notification-section { padding:20px 16px; }
  .notification-shift { grid-template-columns:1fr 1fr; }
  .notification-shift .field:first-child { grid-column:1/-1; }
  .notification-check { flex-direction:column; align-items:stretch; }
  .notification-workday .work-period { flex-wrap:wrap; }
}
.dlg input[type="radio"] { width:22px; height:22px; min-height:0; padding:0; margin:0; accent-color:var(--accent); flex:none; }
@media (max-width:1100px) {
  .notification-people { min-width:0; display:block; }
  .notification-people thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .notification-people tbody, .notification-people tr, .notification-people td { display:block; width:100%; }
  .notification-people tr { padding:16px 0; border-bottom:1px solid var(--line); }
  .notification-people td { padding:5px 0; border:0; }
  .notification-people td[data-label]::before { content:attr(data-label) ": "; font-weight:600; }
  .notification-people .hint { max-width:none; }
}

.notification-plan { border-top:1px solid var(--line); padding-top:20px; margin-top:24px; }
.notification-plan h3 { margin:0 0 12px; }
.notification-plan p { max-width:760px; }
.notification-plan li { padding:4px 0; }

.notification-summary-test { border-top:1px solid var(--line); margin-top:24px; padding-top:20px; }
.notification-summary-test > .hint { margin-bottom:16px; }
.notification-summary-test > .field { margin-top:20px; }
.notification-summary-test h3 { margin:0 0 8px; }
.notification-section [role="group"] + .hint { margin:8px 0 20px; }

.notification-weekly-schedule { align-items:flex-start; }

.notification-jumps { display:flex; flex-wrap:wrap; gap:8px 16px; margin:20px 0 28px; }
.notification-jumps button { padding:6px 0; border:0; background:transparent; color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
.notification-draft { border-left:3px solid var(--accent); padding:12px 20px; margin-bottom:24px; }
.notification-draft button { margin:4px 12px 4px 0; }
.notification-section { scroll-margin-top:24px; }

.notifications-heading > a { flex-shrink:0; white-space:nowrap; }
.notification-sensor-status:not(:empty) { margin:12px 0 20px; }

.notification-enabled-settings:not([hidden]) { margin-top:20px; }

#n-report-settings { margin-bottom:24px; }

/* Dashboard summary values share tracks even when labels or help wrap. */
.stats > .stat { display:grid; grid-template-rows:subgrid; grid-row:span 3; row-gap:6px; align-content:start; align-items:start; }
.stats { row-gap:6px; }

/* ---- notifications: coverage grid ---- */
.coverage { border-collapse: collapse; font-size: 1rem; }
.coverage th, .coverage td { padding: 8px 10px; border-top: 1px solid var(--line); text-align: center; white-space: nowrap; }
.coverage thead th { border-top: 0; font-size: .9375rem; }
.coverage th[scope="row"] { text-align: left; font-weight: 650; }
/* Many people: the box scrolls sideways and the sensor column stays put. */
.coverage th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.coverage .cov { font-weight: 700; }
.coverage .cov-none { color: var(--body); font-weight: 400; }
.coverage .cov-warning { background: var(--warn-bg); color: var(--warn-ink); }
.coverage .cov-critical { background: var(--crit-bg); color: var(--crit-ink); }
.coverage .cov-info { background: var(--info-bg); color: var(--info-ink); }
.coverage .cov-on { background: var(--ok-bg); color: var(--ok-ink); }
.coverage-report th[scope="row"] { color: var(--body); font-weight: 600; }

/* Access log (platform administrator) */
.access-log { border-collapse: collapse; font-size: 1rem; min-width: 760px; }
.access-log th, .access-log td { padding: 8px 10px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.access-log thead th { border-top: 0; font-size: .9375rem; }
.access-log .nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
.access-log tr.access-bad td:nth-child(2) { color: var(--crit-ink); font-weight: 600; }