/* Layout: two stacked header bands (L1 tools, L2 context), a slim toolbar, then a full-width table. No side panes. */
/* Colours are set only here, as variables; every screen, Setup, the admin site and the field app use them.
   The logo's three colours (_LogoFiles) are named first; the header band (--l1) is the logo navy. */
:root{
  --brand-navy:#003460; --brand-blue:#0160a9; --brand-green:#42ac48;
  --bg:#f3f4f2; --surface:#ffffff; --surface-2:#f7f8f6; --fg:#1b2220; --muted:#5e6964; --line:#d8ddda; --line-strong:#b9c1bd;
  --l1:var(--brand-navy); --l1-fg:#ffffff; --l1-muted:#b4c6da; --l2:#e6eae8;
  --accent:#b8560f; --accent-soft:#f7e7da; --accent-fg:#ffffff;
  --ok:#2f7a4f; --ok-soft:#dff0e5; --warn:#a86a00; --warn-soft:#fbefd6; --bad:#b3261e; --bad-soft:#f9dedc; --idle:#7b8580; --idle-soft:#eceeed;
  --row-hover:#f1f4f2; --focus:#1d6fd8;
  --f-display:"IBM Plex Sans Condensed","Arial Narrow",sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --shadow:0 8px 28px rgba(20,30,26,.18),0 1px 3px rgba(20,30,26,.12);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121715; --surface:#1a201e; --surface-2:#1f2624; --fg:#e4eae7; --muted:#9aa7a1; --line:#2e3734; --line-strong:#47524e;
  --l1:var(--brand-navy); --l1-fg:#ffffff; --l1-muted:#b4c6da; --l2:#1f2725;
  --accent:#e8873f; --accent-soft:#3b2818; --accent-fg:#1a1208;
  --ok:#6cc690; --ok-soft:#1d3426; --warn:#e5b04f; --warn-soft:#3a2e15; --bad:#f08a80; --bad-soft:#3e1f1c; --idle:#94a09a; --idle-soft:#262e2b;
  --row-hover:#212927; --focus:#7fb2ff; --shadow:0 8px 28px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121715; --surface:#1a201e; --surface-2:#1f2624; --fg:#e4eae7; --muted:#9aa7a1; --line:#2e3734; --line-strong:#47524e;
  --l1:var(--brand-navy); --l1-fg:#ffffff; --l1-muted:#b4c6da; --l2:#1f2725;
  --accent:#e8873f; --accent-soft:#3b2818; --accent-fg:#1a1208;
  --ok:#6cc690; --ok-soft:#1d3426; --warn:#e5b04f; --warn-soft:#3a2e15; --bad:#f08a80; --bad-soft:#3e1f1c; --idle:#94a09a; --idle-soft:#262e2b;
  --row-hover:#212927; --focus:#7fb2ff; --shadow:0 8px 28px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4); color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14px;line-height:1.45}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:50;background:var(--l1)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mono{font-family:var(--f-mono)}
.num{font-variant-numeric:tabular-nums}

/* Header bands */
.bands{position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
.l1{background:var(--l1);color:var(--l1-fg)}
.l1 .in{display:flex;align-items:stretch;gap:24px;min-height:48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:.01em;white-space:nowrap}
/* The standalone PBCO logo, with white P, B and C for the navy band (web/static/web/pbco-logo-header.png,
   made from _LogoFiles/Standalone_PBCO_Logo_Transparent.png; Brad, 2026-11-10). */
.brand-logo{height:24px;width:auto;display:block}
.brand-name{font-weight:600;color:var(--l1-fg)}
.brand-mark{display:grid;grid-template-columns:repeat(4,7px);gap:2px}
.brand-mark i{height:14px;background:var(--l1-muted);border-radius:1px}
.brand-mark i:nth-child(3){background:var(--accent)}
.tools{display:flex;align-items:stretch;gap:2px;flex-wrap:wrap;flex:1;min-width:0}
.tool{background:none;border:0;padding:0 14px;color:var(--l1-muted);font-weight:500;border-bottom:3px solid transparent;min-height:48px}
.tool:hover{color:var(--l1-fg)}
.tool[aria-current="page"]{color:var(--l1-fg);border-bottom-color:var(--accent)}
.who{display:flex;align-items:center;gap:8px;color:var(--l1-muted);font-size:13px}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;font-weight:600;font-size:12px}
.l2{background:var(--l2);border-bottom:1px solid var(--line)}
.l2 .in{display:flex;align-items:center;gap:20px;flex-wrap:wrap;min-height:46px;padding-block:6px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.ctx{display:flex;align-items:center;gap:8px}
.ctx label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ctx select{background:var(--surface);border:1px solid var(--line-strong);border-radius:4px;padding:5px 30px 5px 10px;font-weight:500;max-width:100%}
.ctx .opt{font-size:11px;color:var(--muted);font-style:italic}

/* Main */
main{padding-block:14px 32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;gap:10px;min-width:0}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.toolbar h1{font-family:var(--f-display);font-weight:700;font-size:22px;margin:0 8px 0 0}
.search{position:relative;flex:1 1 220px;max-width:340px}
.search input{width:100%;padding:7px 10px 7px 32px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface)}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line-strong);background:var(--surface);border-radius:4px;font-weight:500;white-space:nowrap}
a.btn{color:inherit;text-decoration:none}
.btn:hover{border-color:var(--fg)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn.ghost{border-color:transparent;background:none;color:var(--muted)}
.btn.ghost:hover{color:var(--fg)}
.spacer{flex:1}
.count{color:var(--muted);font-size:13px}
.count b{color:var(--fg);font-weight:600}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:0}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:999px;padding:3px 4px 3px 10px;font-size:12.5px}
.chip b{font-weight:600}
.chip button{border:0;background:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.chip button:hover{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--fg)}
.linkbtn{border:0;background:none;color:var(--accent);font-weight:500;font-size:12.5px;padding:3px 6px}

/* Grid */
.gridwrap{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:auto;max-height:calc(100vh - 230px);min-height:260px}
table.grid{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:13.5px}
.grid th,.grid td{border-bottom:1px solid var(--line);padding:0;text-align:left;white-space:nowrap}
.grid thead th{position:sticky;top:0;z-index:2;background:var(--surface-2);border-bottom:1px solid var(--line-strong)}
.grid th + th,.grid td + td{border-left:1px solid var(--line)}
.hbtn{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;padding:9px 10px;font-weight:600;font-size:12px;letter-spacing:.03em;color:var(--muted);text-transform:uppercase;text-align:left}
.hbtn:hover,.hbtn[aria-expanded="true"]{color:var(--fg);background:color-mix(in srgb,var(--line) 50%,transparent)}
.hbtn .lbl{flex:1}
.hbtn .ic{display:inline-flex;gap:2px;align-items:center;color:var(--accent)}
.hbtn .ic svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.hbtn .caret{width:12px;height:12px;stroke:var(--muted);fill:none;stroke-width:2;opacity:.6}
.hbtn.filtered .lbl{color:var(--accent)}
.custom-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.7;margin-left:4px;vertical-align:middle}
.grid td{padding:7px 10px}
.grid tbody tr:hover td{background:var(--row-hover)}
.grid td.tagno a{font-family:var(--f-mono);font-weight:500;color:var(--fg);text-decoration:none;border-bottom:1px dashed var(--line-strong)}
.grid td.tagno a:hover{color:var(--accent);border-color:var(--accent)}
.grid td.dim{color:var(--muted)}
.grid td.code{font-family:var(--f-mono);font-size:13px}
.empty{padding:40px 16px;text-align:center;color:var(--muted)}

/* Row selection: checkbox column and the bar above the table */
.grid th.selcol,.grid td.selcol{width:38px;padding:0 11px;text-align:center;cursor:pointer}
.grid .selcol input{width:16px;height:16px;margin:0;vertical-align:middle;accent-color:var(--accent);cursor:pointer}
.grid .selcol input:disabled{cursor:default}
.grid tbody tr.sel td{background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.grid tbody tr.sel:hover td{background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.selbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line-strong);border-left:4px solid var(--accent);border-radius:6px;padding:6px 8px 6px 12px}
.selbar.empty{border-left-color:var(--line-strong)}
.selbar.empty .n{color:var(--muted)}
.linkbtn:disabled{opacity:.45;cursor:default;text-decoration:none}
.selbar .n{font-size:13.5px}
.selbar .n b{font-weight:600}
.selbar .hid{color:var(--muted);font-size:12.5px}
.selbar .sep{flex:1}
.selbar .btn:disabled{opacity:.55;cursor:progress}
@media (max-width:640px){.selbar .sep{flex-basis:100%;height:0}}

/* Status pills */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:500;border:0}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.idle{background:var(--idle-soft);color:var(--idle)}
.ind{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);background:var(--surface);border-radius:4px;padding:2px 8px 2px 6px;font-size:12.5px}
.ind:hover{border-color:var(--accent)}
.ind .bar{width:38px;height:5px;background:var(--idle-soft);border-radius:3px;overflow:hidden}
.ind .bar i{display:block;height:100%;background:var(--ok)}
.ind .n{font-weight:600;font-variant-numeric:tabular-nums}
.defs{display:inline-flex;gap:4px}
.defs span{min-width:22px;text-align:center;border-radius:3px;font-size:12px;font-weight:600;padding:1px 5px;font-variant-numeric:tabular-nums}
.defs .A{background:var(--bad-soft);color:var(--bad)}
.defs .B{background:var(--warn-soft);color:var(--warn)}
.defs .C{background:var(--idle-soft);color:var(--idle)}

/* Popovers */
.pop{position:fixed;z-index:40;background:var(--surface);border:1px solid var(--line-strong);border-radius:6px;box-shadow:var(--shadow);width:280px;max-width:calc(100vw - 24px);display:grid;font-size:13.5px}
.pop[hidden]{display:none}
.pop section{padding:8px;border-bottom:1px solid var(--line);display:grid;gap:4px}
.pop section:last-child{border-bottom:0}
.pop h4{margin:2px 4px 2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mi{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:6px 8px;border-radius:4px;text-align:left}
.mi:hover{background:var(--row-hover)}
.mi svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.8;flex:none}
.mi.on{color:var(--accent);font-weight:500}
.mi.on svg{stroke:var(--accent)}
.mi:disabled{opacity:.4;cursor:default;background:none}
/* Dragging a column header to move the column: an accent line shows where it will land. */
.grid th.dragging{opacity:.45}
.grid th.drop-before{box-shadow:inset 3px 0 0 var(--accent)}
.grid th.drop-after{box-shadow:inset -3px 0 0 var(--accent)}
.pop input[type=text]{width:100%;padding:6px 8px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface)}
.vlist{max-height:220px;overflow:auto;display:grid;border:1px solid var(--line);border-radius:4px;padding:4px 0}
.vlist label{display:flex;align-items:center;gap:8px;padding:4px 10px;cursor:pointer}
.vlist label:hover{background:var(--row-hover)}
.vlist .c{margin-left:auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.vlist .all{border-bottom:1px solid var(--line);margin-bottom:2px;font-weight:500}
.vlist .none{color:var(--muted);padding:8px 10px}
.popfoot{display:flex;gap:8px;justify-content:flex-end;padding:8px}
.hint{font-size:12px;color:var(--muted);margin:0 4px}
.colpop{width:300px}
.colpop .vlist{max-height:340px}
.colpop .grp{padding:6px 10px 2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* Dialog */
.scrim{position:fixed;inset:0;background:rgba(10,16,14,.45);z-index:45;display:grid;place-items:start center;overflow:auto;padding-block:max(32px,env(safe-area-inset-top,0px)) 32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.scrim[hidden]{display:none}
.dlg{background:var(--surface);border-radius:8px;box-shadow:var(--shadow);width:min(980px,100%);display:grid;min-width:0}
.dlg header{display:flex;align-items:flex-start;gap:16px;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.dlg header .t{flex:1;min-width:0;display:grid;gap:2px}
.dlg header h2{margin:0;font-family:var(--f-mono);font-weight:500;font-size:22px}
.dlg header p{margin:0;color:var(--muted)}
.dlg .x{border:0;background:none;width:34px;height:34px;border-radius:6px;font-size:20px;color:var(--muted)}
.dlg .x:hover{background:var(--row-hover);color:var(--fg)}
.dlg .body{padding:16px 20px 22px;display:grid;gap:22px;min-width:0}
.dlg h3{margin:0 0 8px;font-family:var(--f-display);font-weight:600;font-size:16px;display:flex;align-items:baseline;gap:8px}
.dlg h3 small{font-family:var(--f-body);font-weight:400;font-size:12.5px;color:var(--muted)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.kv div{padding:8px 12px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);display:grid;gap:1px;min-width:0}
.kv dt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
/* Device data on the asset page (D1b): section headings, where each value came from (hover: its history). */
#devdata h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#devdata h3 .btn{margin-left:auto}
#devdata .devsec{margin:12px 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
#devdata .devfrom{display:block;font-size:11px;color:var(--muted);cursor:help}
#devdata .devacts{margin-top:10px;text-align:right}
#devcard .devsec{margin:14px 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.kv dd{margin:0;overflow-wrap:anywhere}
.tbl{border:1px solid var(--line);border-radius:6px;overflow-x:auto}
.tbl table{border-collapse:collapse;width:100%;min-width:560px;font-size:13.5px}
.tbl th,.tbl td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--surface-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl .muted{color:var(--muted)}
.prog{display:inline-flex;align-items:center;gap:8px}
.prog .bar{width:70px;height:6px;background:var(--idle-soft);border-radius:3px;overflow:hidden}
.prog .bar i{display:block;height:100%;background:var(--ok)}
.note{font-size:12.5px;color:var(--muted);border-left:3px solid var(--line-strong);padding:2px 10px}
.placeholder{background:var(--surface);border:1px dashed var(--line-strong);border-radius:8px;padding:28px 24px;display:grid;gap:10px;max-width:760px}
.placeholder h1{font-family:var(--f-display);font-weight:700;font-size:24px;margin:0}
.placeholder p{margin:0;color:var(--muted);max-width:62ch}
.mockflag{font-size:11.5px;color:var(--muted);text-align:right}
@media (max-width:640px){.who span,.who .whoname{display:none}.gridwrap{max-height:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* Views, checksheet form, deficiency details */
.viewbtn{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 12px;border:1px solid var(--line-strong);background:var(--surface);border-radius:4px;max-width:260px}
.viewbtn:hover,.viewbtn[aria-expanded="true"]{border-color:var(--fg)}
.viewbtn .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.viewbtn .v{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewbtn .mod{font-size:11.5px;color:var(--accent);font-weight:500;white-space:nowrap}
.viewbtn svg{width:12px;height:12px;stroke:var(--muted);fill:none;stroke-width:2;flex:none}
.viewpop{width:340px}
.vitem{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:8px;width:100%;border:0;background:none;padding:7px 8px;border-radius:4px;text-align:left}
.vitem:hover{background:var(--row-hover)}
.vitem .chk{color:var(--accent);font-weight:700}
.vitem .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vitem .meta{display:flex;gap:4px}
.tagl{font-size:10.5px;letter-spacing:.04em;padding:1px 6px;border-radius:3px;background:var(--idle-soft);color:var(--muted);white-space:nowrap}
.tagl.def{background:var(--accent-soft);color:var(--accent)}
.form{display:grid;gap:10px;padding:10px}
.form label.f{display:grid;gap:4px;font-size:12.5px;font-weight:500}
.form fieldset{border:0;padding:0;margin:0;display:grid;gap:4px}
.form legend{font-size:12.5px;font-weight:500;margin-bottom:2px}
.form .opt{display:flex;align-items:center;gap:8px;font-size:13.5px}
.form .err{color:var(--bad);font-size:12.5px}
.lock{display:flex;gap:10px;align-items:flex-start;background:var(--warn-soft);color:var(--fg);border-radius:6px;padding:10px 12px;font-size:13.5px}
.lock svg{width:18px;height:18px;stroke:var(--warn);fill:none;stroke-width:2;flex:none;margin-top:1px}
.lock b{color:var(--warn)}
.tasks td.loc{font-size:12px}
.tasks tr.locked td{color:var(--muted)}
.tasks tr.locked td.txt{opacity:.75}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:4px;overflow:hidden}
.seg button{border:0;background:var(--surface);padding:3px 10px;font-size:12.5px;font-weight:500}
.seg button + button{border-left:1px solid var(--line-strong)}
.seg button[aria-pressed="true"]{background:var(--ok);color:#fff}
.seg button[aria-pressed="true"].na{background:var(--idle);color:#fff}
.seg button:disabled{cursor:not-allowed;opacity:.55}
.val{width:90px;padding:3px 6px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface)}
.val:disabled{opacity:.6}
.locpill{font-size:11.5px;border-radius:3px;padding:1px 6px;background:var(--idle-soft);color:var(--muted);white-space:nowrap}
.locpill.cr{background:color-mix(in srgb,var(--focus) 15%,transparent);color:var(--focus)}
.crit{display:inline-block;min-width:24px;text-align:center;border-radius:3px;font-weight:700;font-size:12px;padding:1px 6px}
.crit.A{background:var(--bad-soft);color:var(--bad)}
.crit.B{background:var(--warn-soft);color:var(--warn)}
.crit.C{background:var(--idle-soft);color:var(--idle)}
.idcell{font-family:var(--f-mono);font-size:13px}
.idcell a{color:var(--fg);text-decoration:none;border-bottom:1px dashed var(--line-strong)}
.idcell a:hover{color:var(--accent);border-color:var(--accent)}
.held{font-size:12.5px;white-space:nowrap}
.held svg{width:12px;height:12px;stroke:var(--warn);fill:none;stroke-width:2.2;vertical-align:-1px;margin-right:3px}
.idrule{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.idrule code{font-family:var(--f-mono);font-size:12.5px;background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:1px 6px;color:var(--fg)}

/* Real app additions */
.tool{display:flex;align-items:center;text-decoration:none}
.tool[aria-disabled="true"]{opacity:.45;cursor:default}
.tool[aria-disabled="true"]:hover{color:var(--l1-muted)}
.who a{color:var(--l1-muted);text-decoration:none}
.who a:hover{color:var(--l1-fg)}
.who form{margin:0}
.signout{background:none;border:1px solid color-mix(in srgb,var(--l1-muted) 50%,transparent);color:var(--l1-muted);border-radius:4px;padding:3px 9px;font-size:12.5px}
.signout:hover{color:var(--l1-fg);border-color:var(--l1-fg)}
.loading{color:var(--muted)}
.toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:9px 16px;border-radius:6px;font-size:13.5px;z-index:60;box-shadow:var(--shadow)}
.toast.err{background:var(--bad);color:#fff}
.pop .err{color:var(--bad);font-size:12.5px}
a.brand{color:inherit;text-decoration:none}
.who a[aria-current="page"]{color:var(--l1-fg);font-weight:600}

/* Tag page actions, the add / edit tag form and the delete warning */
.hact{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn:disabled{opacity:.55;cursor:default}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
#tagform,#csform,#dlg > #devform{display:grid;min-width:0}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 14px}
#tagform label.f,#csform label.f,#devform label.f{display:grid;gap:4px;font-size:12.5px;font-weight:500;color:var(--muted);align-content:start}
#tagform input[type=text],#tagform select,#csform select,#devform input[type=text]{width:100%;padding:7px 9px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);color:var(--fg);font-size:14px;font-weight:400}
#tagform select:disabled,#csform select:disabled{opacity:.5}
/* Import from Excel popup (Tags screen). */
#importform{display:grid;min-width:0}
.dlg:has(#importform){width:min(680px,100%)}
#importform .body{display:grid;gap:12px;padding:16px 20px}
#importform label.f{display:grid;gap:4px;font-size:12.5px;font-weight:500;color:var(--muted)}
#importform #impresult{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:6px}
#importform #impresult h3{margin:0;font-size:14px}
#importform #impresult p{margin:0}
#importform .bad{color:var(--bad)}
/* Type-to-filter picker (pick.js): a text box over a hidden <select>; the list floats above the popup. */
.pick{display:block;min-width:0}
.pick input{width:100%;padding:7px 30px 7px 9px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;border:1px solid var(--line-strong);border-radius:4px;background-color:var(--surface);color:var(--fg);font:inherit;font-size:14px;font-weight:400}
.picklist{position:fixed;z-index:80;max-height:280px;overflow:auto;margin:0;padding:4px 0;list-style:none;background:var(--surface);border:1px solid var(--line-strong);border-radius:6px;box-shadow:var(--shadow);font-size:13.5px;font-weight:400;color:var(--fg)}
.picklist li{padding:6px 10px;cursor:pointer}
.picklist li.on{background:var(--accent-soft)}
.picklist li[aria-selected=true]{font-weight:600}
.picklist li.grp{padding:8px 10px 3px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:default}
.picklist li.off,.picklist li.none{color:var(--muted);cursor:default}
#csform .fgrid{grid-template-columns:minmax(0,420px)}
.dlg .err{color:var(--bad);font-size:12.5px;font-weight:400}
#formerr{background:var(--bad-soft);padding:8px 12px;border-radius:4px}
.dlgfoot{display:flex;gap:8px;align-items:center;padding:12px 20px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--surface);border-radius:0 0 8px 8px}
.warnbox{background:var(--warn-soft);border-left:3px solid var(--warn);padding:10px 14px;border-radius:4px;display:grid;gap:8px}
.warnbox p{margin:0}
.warnbox[hidden]{display:none}
.dlist{margin:0;padding-left:20px;max-height:160px;overflow:auto}

/* ---------- Checksheet page (/checksheets/<id>/) ---------- */
.l2 .back{font-weight:600;color:var(--accent);text-decoration:none}
.l2 .ctx span{font-weight:500}
.cspage{max-width:1400px}
.cspage .muted{color:var(--muted)}
.cspage .card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 16px;display:grid;gap:10px;min-width:0}
.cspage .card h2{margin:0;font-family:var(--f-display);font-size:16px;font-weight:700}
.cshead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px}
.cshead h1{margin:0;font-size:22px;font-weight:500}
.cshead p{margin:2px 0 0}
.cshead .facts{display:flex;align-items:center;gap:14px}
.cskv{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.cstasks{width:100%;border-collapse:collapse}
.cstasks td{vertical-align:middle;white-space:normal}
.cstasks td.num{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)}
.cstasks td.task{min-width:260px}
.cstasks .where{display:block;font-size:12px;color:var(--muted)}
.cstasks tr.sec td{background:var(--surface-2);font-weight:600;font-size:12.5px;padding-block:6px}
.cstasks .tick{display:inline-block;width:14px;margin-right:4px;color:var(--ok);font-weight:700}
.cstasks tr.done .tick::before{content:"✓"}
.cstasks input[type=text]{width:100%;min-width:120px;padding:5px 8px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);color:var(--fg)}
.cstasks input:disabled{background:var(--surface-2);color:var(--muted)}
.cstasks td.last{font-size:12px;white-space:nowrap}
.segs{display:inline-flex;border:1px solid var(--line-strong);border-radius:4px;overflow:hidden}
.seg{border:0;background:var(--surface);padding:5px 12px;font-weight:500}
.seg + .seg{border-left:1px solid var(--line-strong)}
.seg[aria-pressed="true"]{background:var(--ok-soft);color:var(--ok)}
.seg[data-ans="na"][aria-pressed="true"]{background:var(--idle-soft);color:var(--fg)}
.seg:disabled{cursor:default;opacity:.7}
.val{display:inline-flex;align-items:center;gap:6px}
.cstasks .val input[type=text]{width:110px;min-width:0}
.val .u{font-size:12px;color:var(--muted)}
.slots{display:grid;gap:8px}
.slot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;border:1px solid var(--line);border-radius:6px;padding:10px 14px}
.slot.is-signed{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:color-mix(in srgb,var(--ok-soft) 50%,var(--surface))}
.slot .nm{display:grid;gap:1px}
.slot .lvl{font-size:12px;color:var(--muted)}
.slot .st{display:flex;align-items:center;gap:12px}
.slot .signed{color:var(--ok);font-weight:500}
.signbox{display:inline-flex;align-items:center;gap:8px;font-weight:500;cursor:pointer}
.signbox input{width:18px;height:18px;accent-color:var(--accent)}

/* ---------- Sign in ---------- */
.envband{background:var(--warn-soft);color:var(--fg);border-bottom:1px solid var(--warn);padding:5px 16px;font-size:12.5px;text-align:center}
.signin p.muted{margin:0;font-size:13px}
.signin{justify-self:center;width:100%;max-width:380px;margin-top:6vh;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px 24px;display:grid;gap:14px}
.signin h1{margin:0;font-family:var(--f-display);font-size:22px}
.signin label.f{display:grid;gap:4px;font-size:12.5px;font-weight:500;color:var(--muted)}
.signin input[type=text],.signin input[type=password]{padding:8px 10px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);color:var(--fg);font-size:14px}
.signin .btn{justify-self:start}
.cspage .cardhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cstasks td.defcol{width:1%;text-align:right}
.cstasks td.defcol .btn{padding:5px 8px}
/* Signed out soon without use (web/static/web/idle.js) */
.idlebar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:60;display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--warn);border-radius:8px;box-shadow:var(--shadow);padding:10px 14px}
/* The red ! on Documents › Uploads while a report waits for review, like Get support's badge. */
.btn.hasbadge{position:relative}
.btn.hasbadge .badge{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;line-height:17px;text-align:center}
/* The upload report's popup: label, box, then what was read under it (Brad, 2026-11-11). */
#rowform label.f,#typeform label.f{display:grid;gap:4px;font-size:12.5px;font-weight:500;color:var(--muted);align-content:start}
#rowform label.f small{font-weight:400;color:var(--muted)}
#rowform label.f input,#rowform label.f select,#rowform label.f textarea{width:100%}
/* Licence notices for client administrators (design-decisions "Platform databases", 2026-11-10). */
.licband{background:var(--surface);border-bottom:1px solid var(--warn);color:var(--fg);font-size:13px;padding:6px 16px}
.licband div::before{content:"\26A0  ";color:var(--warn)}
/* The task's deficiency button: a bigger warning icon (Brad, 2026-11-10). */
.cstasks td.defcol .btn svg{width:22px;height:22px;stroke-width:2}
#defadd svg{width:18px;height:18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Bulk sign-off popup (Checksheets screen) ---------- */
.dlg:has(.bulk){width:min(1200px,calc(100vw - 32px));max-width:none}
.bulk th{vertical-align:bottom}
.bulk .bcol{display:grid;gap:4px;justify-items:start;text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--fg)}
.bulk .bcol .muted{color:var(--muted);font-weight:400}
.bulk td.signed{color:var(--ok);font-size:12.5px}
.bulk td.dim{color:var(--muted);font-size:12.5px;white-space:normal;min-width:120px}
.bulk td input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
.okbox{background:var(--ok-soft);border-left:3px solid var(--ok);padding:10px 14px;border-radius:4px;display:grid;gap:8px}
.okbox p{margin:0}
/* Fixed column widths, so answering a task (which fills "Last change") never resizes
   the table; a narrow window scrolls the table sideways in its box instead. */
.tbl table.cstasks{table-layout:fixed;width:max(100%,1240px);min-width:0}
.cstasks col.c-num{width:64px}.cstasks col.c-by{width:130px}.cstasks col.c-ans{width:124px}
.cstasks col.c-val{width:150px}.cstasks col.c-cmt{width:220px}.cstasks col.c-last{width:170px}.cstasks col.c-def{width:52px}
.cstasks td.last{overflow:hidden;text-overflow:ellipsis}
.cstasks td.task{min-width:0}

/* ---------- Deficiencies ---------- */
.crit{display:inline-grid;place-items:center;min-width:22px;height:20px;border-radius:3px;font-size:12px;font-weight:700;font-family:var(--f-mono)}
.crit-A{background:var(--bad);color:#fff}.crit-B{background:var(--warn);color:#fff}.crit-C{background:var(--idle-soft);color:var(--fg)}
.tbl td.wrap{white-space:normal;min-width:240px}
#defform,#defview{display:grid;min-width:0}
#defform .body,#defview .body{display:grid;gap:12px}
#defform label.f,#defview label.f{display:grid;gap:4px;font-size:12.5px;font-weight:500;color:var(--muted)}
#defform select,#defform textarea,#defview select,#defview textarea,#defview input[type=text]{width:100%;padding:7px 9px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);color:var(--fg);font:inherit;font-size:14px}
#defform .hint{font-weight:400;font-size:11.5px}
.crits{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.crits legend{font-size:12.5px;font-weight:500;color:var(--muted);margin-bottom:4px;padding:0}
.critpick{display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px}
.critpick input{accent-color:var(--accent)}
.critpick:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.photos-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.thumbs{display:flex;flex-wrap:wrap;gap:6px}
.thumb{position:relative}
.thumb img{width:64px;height:64px;object-fit:cover;border-radius:4px;border:1px solid var(--line)}
.thumb button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:0;background:var(--fg);color:var(--bg);font-size:12px;line-height:20px;padding:0}
.photogrid{display:flex;flex-wrap:wrap;gap:8px}
.photogrid img{width:110px;height:110px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
#defview .desc{margin:0;white-space:pre-wrap}
#defview h3{margin:0 0 6px;font-size:13px}
.history{margin:0;padding-left:18px;display:grid;gap:3px;font-size:13px}
#bulkdef{display:grid;min-width:0}
#bulkdef .body{display:grid;gap:12px}
#bulkdef label.f{display:grid;gap:4px;font-size:12.5px;font-weight:500;color:var(--muted)}
#bulkdef input[type=text]{width:100%;padding:7px 9px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);color:var(--fg);font-size:14px}
.voicebox{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.voicebox audio{height:34px;max-width:100%}
.voicebox .hint{flex-basis:100%;font-size:12px;color:var(--muted)}
#vrec.recording{border-color:var(--bad);color:var(--bad);font-weight:600}
.voicebox .consent{flex-basis:100%;font-size:13px}
.voicebox .consent p{margin:0}
/* Long text in the main tables (e.g. deficiency descriptions): wrap within half the
   window and show at most 3 lines, so the table doesn't grow wider and wider. */
.grid td.wrap{white-space:normal;min-width:220px;max-width:50vw}
.grid td.wrap .clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
/* Column resize handle at the right edge of each heading (grid.js). */
.grid thead th .rz{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;z-index:3;touch-action:none}
.grid thead th .rz:hover,.grid thead th .rz.active{background:color-mix(in srgb,var(--accent) 45%,transparent)}
.defs .crit{min-width:auto;padding:0 6px;font-family:var(--f-body);font-weight:600}
a.ind{text-decoration:none;color:inherit}
/* Row number column (#) at the far left of the shared table. */
.grid th.rownum,.grid td.rownum{width:44px;padding:0 8px 0 10px;text-align:right;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.grid th.rownum{font-weight:600}

/* ---------- Project status report (/reports/progress/) ----------
   Checksheet status: one blue scale, light = not started, dark = complete
   (checked with the colour validator for light and dark surfaces). */
.report{--st-not:#86b6ef;--st-prog:#5598e7;--st-field:#256abf;--st-done:#104281;max-width:1200px}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .report{--st-not:#184f95;--st-prog:#2a78d6;--st-field:#5598e7;--st-done:#9ec5f4}}
:root[data-theme="dark"] .report{--st-not:#184f95;--st-prog:#2a78d6;--st-field:#5598e7;--st-done:#9ec5f4}
.report .muted{color:var(--muted)}
.report .card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px 18px;display:grid;gap:12px;min-width:0}
.report .card h2{margin:0;font-family:var(--f-display);font-size:17px}
.report .card h3{margin:6px 0 0;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.rhead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.rhead h1{margin:0;font-family:var(--f-display);font-size:24px}
.rhead p{margin:2px 0 0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 16px;display:grid;gap:4px;align-content:start}
.kpi .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kpi .hero{font-family:var(--f-display);font-size:48px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
.kpi .defs .crit{min-width:auto;padding:0 6px;font-family:var(--f-body)}
.st-not_started{background:var(--st-not)}.st-in_progress{background:var(--st-prog)}
.st-field_complete{background:var(--st-field)}.st-complete{background:var(--st-done)}
.tallbar{display:flex;gap:2px;height:28px}
.tallbar .seg{display:grid;place-items:center;border-radius:4px;color:#fff;font-size:12px;min-width:4px}
.tallbar .seg.st-not_started b{color:#0b1f3a}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px}
.legend li{display:flex;align-items:center;gap:6px}
.legend .sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.bars{display:grid;gap:6px}
.brow{display:grid;grid-template-columns:minmax(120px,220px) 1fr 110px;align-items:center;gap:12px;font-size:13px}
.bname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar{display:flex;gap:2px;height:18px;background:var(--idle-soft);border-radius:0 4px 4px 0}
.bar.ranked{background:none}
.bar .fill{display:flex;gap:2px;height:100%}
.bar .seg{height:100%;min-width:3px}
.bar .seg:last-child,.bar .fill .seg:last-child{border-radius:0 4px 4px 0}
.bar .seg.crit-A{background:var(--bad)}.bar .seg.crit-B{background:var(--warn)}.bar .seg.crit-C{background:var(--idle)}
.report .seg.on{outline:2px solid var(--fg);outline-offset:1px}
.bval{font-variant-numeric:tabular-nums;white-space:nowrap}
.astable summary{cursor:pointer;font-size:12.5px;color:var(--accent)}
.astable .tbl{margin-top:6px}
.tip{position:fixed;z-index:70;background:var(--fg);color:var(--bg);padding:6px 10px;border-radius:6px;font-size:12.5px;pointer-events:none;box-shadow:var(--shadow);max-width:320px}
@media (max-width:640px){.brow{grid-template-columns:1fr 70px}.brow .bar{grid-column:1 / -1;order:3}}
@media print{.bands,.rhead .btn,.astable summary,.tip{display:none}.report .card,.kpi{break-inside:avoid;border-color:#999}.astable[open] .tbl{display:block}}
/* Burn-up chart: phase colours are the validated categorical slots, stepped for dark mode. */
.report{--ph-1:#2a78d6;--ph-2:#eb6834;--ph-3:#1baf7a;--ph-4:#eda100;--ph-5:#e87ba4;--ph-6:#008300}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .report{--ph-1:#3987e5;--ph-2:#d95926;--ph-3:#199e70;--ph-4:#c98500;--ph-5:#d55181;--ph-6:#008300}}
:root[data-theme="dark"] .report{--ph-1:#3987e5;--ph-2:#d95926;--ph-3:#199e70;--ph-4:#c98500;--ph-5:#d55181;--ph-6:#008300}
.ph-1{background:var(--ph-1)}.ph-2{background:var(--ph-2)}.ph-3{background:var(--ph-3)}.ph-4{background:var(--ph-4)}.ph-5{background:var(--ph-5)}.ph-6{background:var(--ph-6)}
.legend .sw.dash{background:none;border-top:2px dashed var(--muted);height:0;border-radius:0}
.burnup{width:100%;min-height:300px}
.burnup svg{display:block;overflow:visible}
.burnup .grid{stroke:var(--line);stroke-width:1}
.burnup .ax{fill:var(--muted);font-size:11px;font-family:var(--f-body)}
.burnup .line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.burnup .target{stroke-width:1.5;stroke-dasharray:4 4;opacity:.45}
.burnup .end{fill:var(--fg);font-size:12px;font-family:var(--f-body)}
.burnup .cross{stroke:var(--muted);stroke-width:1}
.burnup .mark{stroke:var(--surface);stroke-width:2}
.burnup .hit{fill:transparent;cursor:crosshair}
.tip .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}
.tip div{margin-top:2px}

/* ---------- Help (?) and Get support (headset) (web/static/web/help.js) ---------- */
.hsbtn{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--l1-muted);background:none;color:var(--l1-fg);font-weight:700;font-size:14px;padding:0}
.hsbtn:hover{border-color:var(--l1-fg)}
.hsbtn .badge{position:absolute;top:-5px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;line-height:17px;text-align:center}
.hsbtn .badge.pulse{animation:hspulse 1.2s ease-out 2}
@keyframes hspulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 70%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
@media (prefers-reduced-motion:reduce){.hsbtn .badge.pulse{animation:none}}
.hsgroup{display:inline-flex;gap:4px;align-self:center}
.hsmini{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);font-weight:700;font-size:13px;padding:0}
.hsmini:hover{color:var(--fg);border-color:var(--fg)}
.scrim.hslayer{z-index:55}
.hslayer .dlg{width:min(760px,100%)}
.hslayer h2.plain{font-family:var(--f-display);font-weight:700;font-size:20px}
.hslayer .body{padding:16px 20px;display:grid;gap:12px}
.hslayer .muted{color:var(--muted)}
.hslayer label.f{display:grid;gap:4px;font-size:12.5px;font-weight:500;color:var(--muted)}
.hslayer textarea{width:100%;padding:7px 9px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);color:var(--fg);font:inherit;font-size:14px}
.hslayer .hskind{display:grid;gap:4px;margin:4px 0 8px}
.hslayer .demo{background:var(--idle-soft);border-left:3px solid var(--idle);padding:8px 12px;border-radius:4px;font-size:12.5px}
.hslayer .ctxbox summary,.hslayer .req summary{cursor:pointer;font-size:12.5px;color:var(--accent)}
.hslayer .ctxbox .kv{margin-top:8px}
.helpbody section h3{margin:4px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.helpbody p{margin:0}
.helpdl{margin:0;display:grid;gap:6px}
.helpdl div{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:12px}
.helpdl dt{font-weight:600}
.helpdl dd{margin:0}
@media (max-width:640px){.helpdl div{grid-template-columns:1fr;gap:0}}
.req{border:1px solid var(--line);border-radius:6px;padding:10px 14px;display:grid;gap:6px}
.req p{margin:0}
.reqhead{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.reply{background:var(--surface-2);border-radius:6px;padding:8px 12px;display:grid;gap:6px}
.reply ul{margin:0;padding-left:20px}
#hsrec.recording{border-color:var(--bad);color:var(--bad);font-weight:600}
/* Long help topics scroll inside the popup; its title and buttons stay in view. */
.hslayer .dlg{max-height:calc(100dvh - 64px);grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
.hslayer .body{overflow:auto}
/* The Get support form wraps header, body and footer: let them be the popup's own rows,
   so the body scrolls and Send stays in view. */
.hslayer .dlg>form{display:contents}
.hslayer .dlgfoot{position:static}
.voiceline{margin:0}

/* ---------- Documents ---------- */
#docform,#docview,#linkdocform{display:grid;min-width:0}
#docform .body,#docview .body,#linkdocform .body{display:grid;gap:12px;padding:16px 20px}
#docform label.f,#docview label.f,#linkdocform label.f{display:grid;gap:4px;font-size:12.5px;font-weight:500;color:var(--muted)}
#docform input[type=text],#docform input[type=date],#docform select,#docform textarea,#docview input[type=text],#docview input[type=date],#docview select,#linkdocform select{width:100%;padding:7px 9px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);color:var(--fg);font:inherit;font-size:14px}
#docview h3{margin:0 0 6px;font-size:13px}
#docview header .btn{align-self:center}
.dlg h2.plain{font-family:var(--f-display);font-weight:700;font-size:20px}
.newrev summary{cursor:pointer;color:var(--accent);font-size:13px;margin-top:8px}
.newrev .fgrid{margin-top:8px}
.taglist{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.taglist li{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:4px;padding:2px 4px 2px 8px;font-size:13px}
.addtags{display:flex;gap:8px}
.addtags input{flex:1}
.paperclip{display:inline-flex;align-items:center;gap:4px;color:var(--fg);text-decoration:none}
.paperclip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* Link to document (Tags): type filter, search, and a pick list. */
.dlg:has(#linkdocform) { width: min(820px, 100%); }
#linkdocform .ldfilter { display: grid; grid-template-columns: 220px 1fr; gap: 12px; }
#linkdocform .ldlist { max-height: 50vh; overflow: auto; }
#linkdocform .ldlist tbody tr { cursor: pointer; }
#linkdocform .ldlist tbody tr:has(input:checked) { background: var(--accent-soft); }
@media (max-width: 600px) { #linkdocform .ldfilter { grid-template-columns: 1fr; } }

/* MOC page: stage bar (done / here / still to do) and the move buttons. */
.stagebar{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.stagebar li{flex:1 1 110px;min-width:0;padding:8px 10px;border-radius:6px;background:var(--surface-2);color:var(--muted);font-size:13px;font-weight:500;border:1px solid var(--line);text-align:center}
.stagebar li.done{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.stagebar li.done span::before{content:"✓ "}
.stagebar li.here{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:600}
.mocmoves{display:flex;flex-wrap:wrap;gap:8px}
.mocpage h3.sub{margin:4px 0 4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mocpage .mocdesc{margin:0;white-space:pre-wrap}
#mocform,#mocdetails,#mocmove,#mocdocform,#mocrevform,#mocstage,#moclink,#mocmarkup,#mocrm,#mocfile{display:grid;min-width:0}
.dlg:has(#mocform,#mocdetails,#mocmove,#mocdocform,#mocrevform,#mocmarkup,#mocrm){width:min(720px,100%)}
/* The closing screen and Link documents need room for their tables */
.dlg:has(#mocstage,#moclink,#mocfile){width:min(1000px,100%)}
:is(#mocform,#mocdetails,#mocmove,#mocdocform,#mocrevform,#mocstage,#moclink,#mocmarkup,#mocrm,#mocfile) .body{display:grid;gap:12px;padding:16px 20px}
:is(#mocform,#mocdetails,#mocmove,#mocdocform,#mocrevform,#mocstage,#mocaddtags,#moclink,#mocmarkup) label.f{display:grid;gap:4px;font-size:12.5px;font-weight:500;color:var(--muted)}
:is(#mocform,#mocdetails,#mocmove,#mocdocform,#mocrevform,#mocstage,#mocaddtags,#moclink,#mocmarkup) :is(input[type=text],input[type=date],input[type=search],select,textarea){width:100%;padding:7px 9px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);color:var(--fg);font:inherit;font-size:14px}
/* MOC page tabs: Details and history, Tags, Documents. */
.tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line-strong)}
.tabs :is(button,a){border:0;background:none;padding:9px 14px;font:inherit;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;text-decoration:none}
.tabs :is(button,a):hover{color:var(--fg)}
.tabs :is(button[aria-selected=true],a[aria-current=page]){color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
/* The MOC heading above an MOC's Checksheets and Deficiencies tables: spaced like <main>. */
.mochead{padding:14px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));display:grid;gap:10px;min-width:0}
.tabs .n{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:var(--surface-2);font-size:12px;text-align:center;font-variant-numeric:tabular-nums}
.mocaddtags{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:10px;align-items:end}
@media (max-width:600px){.mocaddtags{grid-template-columns:1fr}}
/* RFI forms: labels above their boxes; a step's text box fills the popup. */
:is(#rfiform,#rfistep,#rfieditform,#rfiadd,#defrfiform) label.f{display:grid;gap:4px;font-size:12.5px;font-weight:500;color:var(--muted)}
:is(#rfiform,#rfistep,#rfieditform,#rfiadd,#defrfiform) :is(input[type=text],select,textarea){width:100%;padding:7px 9px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);color:var(--fg);font:inherit;font-size:14px}
:is(#rfiform,#rfistep,#rfieditform) textarea{min-height:16em;resize:vertical}
:is(#rfilink,#rfiasset,#rfifile) label.f{display:grid;gap:4px;font-size:12.5px;font-weight:500;color:var(--muted)}
:is(#rfilink,#rfiasset,#rfifile) :is(input[type=text],input[type=search],select){width:100%;padding:7px 9px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);color:var(--fg);font:inherit;font-size:14px}
:is(#rfilink,#rfiasset,#moclink) .ldfilter{display:grid;grid-template-columns:220px 1fr;gap:12px}
#rfistep textarea.short{min-height:5em}
:is(#rfistep,#mocstage,#mocfile) .filing input[type=text]{min-width:5em}
:is(#rfistep,#mocstage,#mocfile) .filing tr:has(input:checked){background:var(--accent-soft)}
/* Start an MOC: in the Close popup and the Start MOC popup */
#rfistep .mocstart{margin-top:12px}
#rfistep .mocstart-tick{display:flex;gap:8px;align-items:center;font-weight:600}
#rfistep .mocstart-tick input{width:18px;height:18px;accent-color:var(--accent)}
#rfistep .mocstart select{max-width:100%}
:is(#rfilink,#rfiasset,#moclink) .ldlist{max-height:50vh;overflow:auto}
:is(#rfilink,#rfiasset,#moclink) .ldlist tbody tr{cursor:pointer}
:is(#rfilink,#rfiasset,#moclink) .ldlist tbody tr:has(input:checked){background:var(--accent-soft)}
@media (max-width:600px){:is(#rfilink,#rfiasset,#moclink) .ldfilter{grid-template-columns:1fr}}
td.nowrap{white-space:nowrap}
.mocpage .tbl select{padding:3px 6px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);color:var(--fg);font:inherit;font-size:13px}
.revlist{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:13px}
.stagebar li.stopped{background:var(--bad-soft);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent);font-weight:600}

/* View only (2026-11-12): the header says so, and buttons that change things are hidden. The server
   refuses the changes anyway (core.middleware.ViewOnly); pages with their own "can change" flags
   (checksheet, deficiency, RFI, MOC) get them switched off from the server. */
.vochip{background:#FFF4D6;color:#5A4500;border-radius:10px;padding:2px 9px;font-size:12px;font-weight:600}
body.viewonly :is(#importxl,#addtag,#seladdcs,#sellinkdoc,#addonassets,#selbulk,#selassign,#selrelease,#seldelete,
  #selclear2,#selverify,#uploaddocs,#adddoc,#addmoc,#addrfi,#devedit,#devsave,#mocstagebtn,[data-edit],[data-del],
  #revsave,#detsave,#tagsadd,[data-untag],#defadd,[data-defitem]){display:none !important}

/* Load as you scroll (2026-11-12): the table dims while the server works out a new search, filter or
   sort; the last row says more are coming. */
.gridwrap.loading tbody{opacity:.55;transition:opacity .15s}
#grid tbody tr.loadmore td{color:var(--muted);font-style:italic;text-align:center;padding:10px}

/* Table screens fill the window exactly (Brad, 2026-11-12): the page never scrolls, only the table
   inside its box, so the header bands, the toolbar, the filter chips and the selection bar stay in
   place like the header. Phones keep scrolling the whole page (no room to fix it all). */
@media (min-width:641px){
  body:has(#main > .gridwrap){height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
  body:has(#main > .gridwrap) > #main{flex:1 1 auto;min-height:0;grid-template-rows:auto auto auto minmax(0,1fr);padding-bottom:14px}
  body:has(#main > .gridwrap) .gridwrap{max-height:none;min-height:0}
}