:root{
  color-scheme: light;
  --surface-1:#fcfcfb; --page:#f4f4f1; --panel:#ffffff;
  --ink:#0b0b0b; --ink-2:#52514e; --muted:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7; --ring:rgba(11,11,11,.10);
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --crit:#d03b3b;
  --good-ink:#006300; --warn-ink:#8a5c00; --ser-ink:#a2451c; --crit-ink:#a52020;
  --s1:#2a78d6; --s3:#1baf7a;
  --brand:#00a1dd;
  --nav:#12212f; --nav-ink:#c9d4de;
  --r:10px;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --surface-1:#1a1a19; --page:#0d0d0d; --panel:#1a1a19;
  --ink:#ffffff; --ink-2:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --axis:#383835; --ring:rgba(255,255,255,.10);
  --good-ink:#0ca30c; --warn-ink:#fab219; --ser-ink:#ec835a; --crit-ink:#e66767;
  --s1:#3987e5; --s3:#199e70; --nav:#0b1620;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--page);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--s1)}
code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.92em;background:rgba(11,11,11,.05);padding:1px 5px;border-radius:4px}
:root[data-theme="dark"] code{background:rgba(255,255,255,.08)}

/* minmax(0,1fr), not 1fr.
 *
 * A grid track defaults to min-width:auto, which means it refuses to shrink
 * below the widest thing inside it — so a nine-column table did not scroll
 * inside its own box, it pushed the whole page sideways and took the menu with
 * it. Every list screen in the app did this, and it is worst on a phone. */
.shell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}
.nav{background:var(--nav);color:var(--nav-ink);padding:16px 0;display:flex;flex-direction:column}
.brand{padding:0 18px 15px;display:block;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px;text-decoration:none}
/* The wordmark, not a coloured square with initials in it. The nav is always
   dark, so the white-lettered file is the right one here in both themes. */
.brand .logo{display:block;width:112px;margin:0 0 11px}
.brand .logo img{width:100%;height:auto;display:block}
.brand b{color:#fff;font-size:15px;display:block;line-height:1.2}
.brand span{font-size:11px;color:#7d8f9e}
.navgrp{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:#6d8092;padding:14px 18px 5px}
.nav a.item{display:flex;align-items:center;gap:10px;padding:8px 18px;color:var(--nav-ink);text-decoration:none;font-size:13.5px;border-left:3px solid transparent}
.nav a.item:hover{background:rgba(255,255,255,.05);color:#fff}
.nav a.item.on{background:rgba(42,120,214,.18);border-left-color:#3987e5;color:#fff;font-weight:600}
.nav .ic{width:17px;text-align:center;opacity:.85}
.nav .pill{margin-left:auto;background:var(--crit);color:#fff;border-radius:20px;font-size:10.5px;padding:1px 7px;font-weight:700}
.navfoot{margin-top:auto;padding:14px 18px 0;border-top:1px solid rgba(255,255,255,.08);font-size:11.5px;color:#6d8092}
.navfoot button{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#dfe7ee;border-radius:6px;padding:4px 9px;font-size:11.5px;cursor:pointer;margin-top:8px}
.navfoot button+button{margin-left:6px}
.whoami{margin-top:8px;line-height:1.35}
.whoami b{display:block;color:#dfe7ee;font-size:12px}
.whoami span{font-size:11px;color:#6d8092}

.main{padding:22px 26px 70px;max-width:1500px;min-width:0;overflow-x:hidden}
h1{font-size:21px;margin:0 0 3px;letter-spacing:-.2px}
.sub{color:var(--ink-2);margin:0 0 20px;font-size:13.5px}
h2{font-size:15px;margin:26px 0 11px}
h3{font-size:12.5px;margin:0 0 10px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em;font-weight:650}

.card{background:var(--panel);border:1px solid var(--ring);border-radius:var(--r);padding:16px 18px}
.card.flush{padding:16px 0 4px}
.card.flush h3{padding:0 18px}
.grid{display:grid;gap:14px}
.grid>*{min-width:0}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
/* Fits as many as the width allows rather than a fixed count, so a five-tile
   summary does not leave one orphan on its own row. */
.gauto{grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.g2{grid-template-columns:1fr 1fr}
.g21{grid-template-columns:1.6fr 1fr}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3,.g2,.g21{grid-template-columns:1fr}}
/* The phone menu.
 *
 * It used to become a wrapping row of twenty-six links — roughly 430px of
 * undifferentiated blue text above the page, with the group headings that would
 * have given it structure being the one thing hidden. Sign out was hidden too,
 * on the device most likely to be handed from one man to the next, and it is
 * the button that clears the last man's cached answers.
 *
 * Now: a 52px bar with a Menu button, and the full list as an overlay. */
.navbar{display:none}
.navtoggle{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#fff;
  border-radius:8px;min-height:44px;padding:0 14px;font-size:14.5px;font-family:inherit;cursor:pointer}
@media(max-width:760px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .main{padding:16px 14px 60px}
  .navbar{display:flex;align-items:center;gap:10px;padding:6px 12px}
  .nav{position:sticky;top:0;z-index:30;padding:0}
  /* Closed: the bar and nothing else.
   *
   * Written as `.nav:not(.open) X` rather than `.nav > *:not(.navbar)`, because
   * `.nav a.item` at the top of this file is the more specific selector and won
   * — so the menu was permanently open and the page began 430px down. */
  .nav:not(.open) .brand,
  .nav:not(.open) .navgrp,
  .nav:not(.open) .navfoot,
  .nav:not(.open) a.item{display:none}
  .nav.open{position:fixed;inset:0;overflow-y:auto;padding-bottom:24px}
  .nav.open .brand{display:flex;gap:10px;align-items:center;padding:6px 14px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav.open .brand .logo{width:64px;margin:0}
  .nav.open a.item{min-height:48px}
  body.nav-open{overflow:hidden}
}

.tile{background:var(--panel);border:1px solid var(--ring);border-radius:var(--r);padding:14px 16px;position:relative;overflow:hidden;text-decoration:none;color:inherit;display:block}
a.tile:hover{border-color:var(--s1)}
.tile .lbl{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.tile .val{font-size:31px;font-weight:660;letter-spacing:-1px;margin-top:5px;line-height:1}
.tile .foot{font-size:11.5px;color:var(--muted);margin-top:5px}
.tile .bar{position:absolute;left:0;top:0;bottom:0;width:4px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.b-good{background:var(--good)}.b-warn{background:var(--warn)}.b-crit{background:var(--crit)}.b-ser{background:var(--serious)}.b-s1{background:var(--s1)}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:650;padding:0 10px 8px;border-bottom:1px solid var(--grid);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--grid);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(42,120,214,.045)}
.card.flush th:first-child,.card.flush td:first-child{padding-left:18px}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px}
.aid{color:var(--s1);font-weight:640;font-family:ui-monospace,Menlo,monospace;font-size:12px;text-decoration:none;white-space:nowrap}
.aid:hover{text-decoration:underline}
.right{text-align:right}
.muted{color:var(--muted)}
.crit{color:var(--crit)}
.nowrap{white-space:nowrap}

.badge{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:2px 9px;font-size:11.5px;font-weight:640;white-space:nowrap;border:1px solid transparent}
.bg-good{background:rgba(12,163,12,.10);color:var(--good-ink);border-color:rgba(12,163,12,.28)}
.bg-warn{background:rgba(250,178,25,.16);color:var(--warn-ink);border-color:rgba(250,178,25,.45)}
.bg-crit{background:rgba(208,59,59,.10);color:var(--crit-ink);border-color:rgba(208,59,59,.3)}
.bg-ser{background:rgba(236,131,90,.14);color:var(--ser-ink);border-color:rgba(236,131,90,.4)}
.bg-neut{background:rgba(11,11,11,.05);color:var(--ink-2);border-color:var(--ring)}
:root[data-theme="dark"] .bg-neut{background:rgba(255,255,255,.07)}

.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.inp{border:1px solid var(--ring);background:var(--panel);border-radius:7px;padding:6px 11px;font-size:13px;color:var(--ink)}
.btn{border:1px solid var(--ring);background:var(--panel);border-radius:7px;padding:6px 12px;font-size:13px;cursor:pointer;text-decoration:none;color:inherit;display:inline-block}
.btn:hover{background:var(--page)}
.btn.pri{background:var(--s1);border-color:var(--s1);color:#fff}
.btn.pri:hover{filter:brightness(1.08);background:var(--s1)}
.btn.dang{background:var(--crit);border-color:var(--crit);color:#fff}
.btn.sm{padding:3px 9px;font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.disabled{opacity:.45;pointer-events:none}
button.tile{font:inherit;width:100%}
.spacer{margin-left:auto}

.note{background:rgba(42,120,214,.06);border:1px solid rgba(42,120,214,.22);border-left:3px solid var(--s1);border-radius:8px;padding:11px 14px;font-size:12.5px;color:var(--ink-2);margin:14px 0}
.note b{color:var(--ink)}
.note.amber{background:rgba(250,178,25,.09);border-color:rgba(250,178,25,.35);border-left-color:var(--warn)}
.note.red{background:rgba(208,59,59,.06);border-color:rgba(208,59,59,.25);border-left-color:var(--crit)}
.note.green{background:rgba(12,163,12,.07);border-color:rgba(12,163,12,.25);border-left-color:var(--good)}

.fld{margin-bottom:13px}
.fld label{display:block;font-size:11.5px;color:var(--ink-2);margin-bottom:4px;font-weight:600}
.fld .req{color:var(--crit)}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--ring);border-radius:7px;padding:7px 10px;font-size:13px;background:var(--surface-1);color:var(--ink);font-family:inherit}
.fld .hint{font-size:11px;color:var(--muted);margin-top:3px}
.fld.bad input,.fld.bad select{border-color:var(--crit)}

.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:12.5px;margin:0}
.kv dd{overflow-wrap:anywhere}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:560}

.hbar{display:grid;grid-template-columns:170px 1fr 46px;gap:10px;align-items:center;margin-bottom:9px;font-size:12.5px}
.hbar .track{background:var(--grid);border-radius:4px;height:19px;display:flex;overflow:hidden;gap:2px}
.hbar .seg{height:19px;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff;min-width:0}
.hbar .name{color:var(--ink-2);text-align:right}
.hbar .pct{font-variant-numeric:tabular-nums;font-weight:640;text-align:right}
.legend{display:flex;gap:16px;font-size:12px;color:var(--ink-2);margin:4px 0 14px;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:6px}

.cal{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;align-items:end;height:132px;margin-top:6px}
.cal .col{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.cal .num{font-size:10px;font-variant-numeric:tabular-nums;color:var(--muted);text-align:center;margin-bottom:3px;font-weight:640}
.cal .blk{border-radius:3px 3px 0 0;background:var(--s1);min-height:2px}
.callab{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;font-size:10px;color:var(--muted);margin-top:6px;text-align:center;font-variant-numeric:tabular-nums}

.tl{border-left:2px solid var(--grid);margin-left:7px;padding-left:16px}
.tlr{position:relative;padding-bottom:14px;font-size:12.5px}
.tlr::before{content:"";position:absolute;left:-22px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--s1);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--grid)}
.tlr.ok::before{background:var(--good)}.tlr.bad::before{background:var(--crit)}
.tlr time{color:var(--muted);font-size:11px;display:block}

/* Status inks. These lived in kpi.html's own <style>, so outages.html used
   .v-poor for "not carded — £4,300 exposure" and got plain bold text: the one
   figure on the page that had to look like a warning did not. They belong here,
   with the badge colours, where every page can reach them. */
.v-good{color:var(--good-ink)}
.v-watch{color:var(--warn-ink)}
.v-poor{color:var(--crit-ink)}
.v-not_held{color:var(--muted);font-weight:500}

.empty{text-align:center;padding:44px 20px;color:var(--muted)}
.empty h4{color:var(--ink);font-size:15px;margin:0 0 6px}
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--grid);border-top-color:var(--s1);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

.toast{position:fixed;right:18px;bottom:18px;background:var(--nav);color:#fff;padding:11px 16px;border-radius:9px;font-size:13px;box-shadow:0 8px 26px rgba(0,0,0,.24);z-index:99;max-width:420px}
.toast.bad{background:var(--crit)}
.toast.good{background:#0f7a3a}

dialog{border:1px solid var(--ring);border-radius:12px;padding:0;max-width:560px;width:calc(100% - 32px);background:var(--panel);color:var(--ink)}
dialog::backdrop{background:rgba(11,11,11,.42)}
dialog .dlg-h{padding:14px 18px;border-bottom:1px solid var(--grid);font-weight:640}
dialog .dlg-b{padding:16px 18px}
dialog .dlg-f{padding:12px 18px;border-top:1px solid var(--grid);display:flex;gap:8px;justify-content:flex-end}

.checkline{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--grid);font-size:12.5px}
.checkline:last-child{border-bottom:none}
.checkline .t{flex:1;min-width:0}
/* Wide content scrolls inside its own container. `max-width:100%` is what
   actually stops it dragging the page along with it. */
.scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.card{min-width:0}
.card.flush>.scroll>table{min-width:640px}


/* Left-edge stripes.
 *
 * These lived only inside field.html, so `class="card stripe warn"` on the
 * incidents screen did nothing at all and an overdue corrective action looked
 * exactly like a finished one. */
.stripe{border-left:3px solid var(--axis)}
.stripe.good{border-left-color:var(--good)}
.stripe.warn{border-left-color:var(--warn)}
.stripe.crit{border-left-color:var(--crit)}

/* Rows that need doing, marked on the row and not only in a badge two-thirds of
   the way across a nine-column table. */
tr.row-overdue{background:rgba(208,59,59,.05)}
tr.row-overdue td:first-child{box-shadow:inset 3px 0 0 var(--crit)}
tr.row-due{background:rgba(250,178,25,.07)}
tr.row-due td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
tr.row-none td:first-child{box-shadow:inset 3px 0 0 var(--axis)}

/* A visible focus ring, so the keyboard is usable against the dark menu too. */
:focus-visible{outline:2px solid var(--s1);outline-offset:2px}
.nav :focus-visible{outline-color:#8fc0ff}

/* Sortable column headings. */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--ink)}
th.sortable .arrow{opacity:.45;font-size:10px;margin-left:3px}
th.sortable.on .arrow{opacity:1}

/* Selection footer for the register. */
.selbar{position:sticky;bottom:0;z-index:15;background:var(--panel);border-top:1px solid var(--grid);
  padding:10px 14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  box-shadow:0 -6px 18px var(--ring)}
.selbar b{font-size:13.5px}