/* EXTRACTED by build/extract-css.mjs from
 * prototypes/permit-simplified-platform-153.html.
 * Do not edit. Run `pnpm --filter permit-platform css` and commit the result.
 * PLAYBOOK.md §3.1 — a generated file is never hand-edited, and CI proves it. */
/* ============================================================
   CYANOTYPE — PermitSimplified plan review portal
   Palette derived from blueprint reprographics + Chicago flag
   ============================================================ */
:root{
  --ink:        #08203F;
  --ink-2:      #0E2E56;
  --ink-3:      #17406F;
  --flag-blue:  #41B6E6;
  --flag-red:   #E4002B;
  --paper:      #EEF1F5;
  --surface:    #FFFFFF;
  --line:       #D2DAE4;
  --line-soft:  #E5EAF0;
  --text:       #10243D;
  --muted:      #5E708A;
  --green:      #12735A;
  --green-bg:   #E4F2ED;
  --amber:      #A85A10;
  --amber-bg:   #FCEEDC;
  --red-bg:     #FCE6EA;
  --blue-bg:    #E4F1FB;
  --grey-bg:    #EDF0F4;
  --radius:     3px;
  --shadow:     0 1px 2px rgba(8,32,63,.08), 0 8px 24px -12px rgba(8,32,63,.22);
  --rail:       244px;
  --display:    "Saira Condensed", "Arial Narrow", Impact, sans-serif;
  --body:       "IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --mono:       "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--text);
  font-family:var(--body);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--ink-3)}
:focus-visible{outline:2px solid var(--flag-blue);outline-offset:2px}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}

/* ---------- left rail ---------- */
.rail{
  overscroll-behavior:contain;
  /* flat, like the sign-in panel — no drawing grid behind the navigation */
  background:var(--ink);
  color:#C9D8E8;
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.brand{padding:20px 18px 18px;border-bottom:1px solid rgba(255,255,255,.09)}
/* ---------- brand ---------- */
.pslogo{display:inline-block;vertical-align:middle;color:currentColor}
.wordmark{font-family:var(--display);letter-spacing:.01em;white-space:nowrap}
.wordmark b{font-weight:700}
.wordmark span{font-weight:400;opacity:.78}
.brand-row{display:flex;align-items:center;gap:10px;color:#fff;margin-bottom:9px}
.brand-name{font-size:19px;color:#fff;line-height:1}
.brand-name .wordmark span{color:#8FB6D6;opacity:1}
.gate-logo{display:block;color:#fff;flex:none;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
.gate-org .o1 .wordmark{text-transform:none;letter-spacing:.01em;font-size:30px}
.gate-org .o1 .wordmark span{color:#8FB6D6;opacity:1}
.edition{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ed{display:flex;flex-direction:column;gap:3px;text-align:left;padding:9px 12px;border:1.5px solid var(--line);
  border-radius:var(--radius);background:#fff;cursor:pointer;transition:.12s}
.ed:hover{border-color:#A9BDD4;background:#F8FBFD}
.ed.on{border-color:var(--ink-3);background:var(--blue-bg);box-shadow:0 0 0 3px rgba(65,182,230,.16)}
.ed .t{font-family:var(--display);font-size:14px;font-weight:600;color:var(--ink)}
.ed .d{font-size:11px;color:var(--slate);line-height:1.35}
.acct.owner .seal{background:var(--green)}
.opt{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--radius);
  background:#fff;cursor:pointer;transition:.12s}
.opt:hover{border-color:#A9BDD4}
.opt.on{border-color:var(--ink-3);background:var(--blue-bg)}
.opt input{margin-top:3px;flex:none}
.opt b{display:block;font-size:14px;color:var(--ink)}
.opt small{display:block;font-family:var(--mono);font-size:11px;color:var(--slate);margin-top:2px}
.inp.bad{border-color:var(--flag-red)}
.err{color:var(--flag-red);font-size:12px;margin-top:5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
@media (max-width:700px){.grid2{grid-template-columns:1fr}}
.paper-preview{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--paper)}
.pp-stamp{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:7px 14px;border:2.5px solid #0E6249;border-radius:4px;
  color:#0E6249;transform:rotate(-4deg);background:#fff}
.pp-stamp b{font-family:var(--display);font-size:15px;letter-spacing:.08em}
.pp-stamp span{font-family:var(--mono);font-size:9px;color:var(--ink)}
.pp-note{font-size:12.5px;color:var(--slate)}
.acct.contractor.gc .seal{background:#C87A2A}
.acct-grp{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin:9px 0 4px}
.acct-grp:first-child{margin-top:0}
.acct-grp span{text-transform:none;letter-spacing:0;opacity:.8}
.acct-grp + .acct{margin-top:0}
.gate-cards{display:flex;flex-direction:column;gap:8px}
.gcard{display:flex;gap:11px;align-items:flex-start;padding:10px 12px 10px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.gcard.on{border-color:var(--ink-3);background:var(--blue-bg);box-shadow:0 0 0 3px rgba(65,182,230,.16)}
.gcard .seal{width:34px;height:34px;flex:none;border-radius:3px;display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;font-weight:600;color:#fff;background:var(--ink-3);margin-top:2px}
.gcard.owner .seal{background:var(--green)}
.gcard.contractor .seal{background:#C87A2A}
.gcard .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.gcard .t{font-size:13.5px;font-weight:600;line-height:1.25}
.gcard .b{font-size:11.5px;color:var(--muted);line-height:1.4}
.gcard .gsel{margin-top:3px;font-size:13px;padding:7px 9px}
.gcard .c{font-family:var(--mono);font-size:10px;color:var(--muted)}
.ddots{display:inline-flex;align-items:center;gap:3px;margin-top:4px}
.ddot{width:9px;height:9px;border-radius:50%;background:#C5CFDB;display:inline-block}
.ddot.approved{background:var(--green)} .ddot.revisions{background:var(--amber)} .ddot.review{background:#7A5BD6} .ddot.waiting{background:#41B6E6}
.dsum{display:flex;flex-wrap:wrap;gap:6px 22px;padding:10px 16px 11px;font-size:12.5px;border-bottom:1px solid var(--line-soft)}
.dsum-i b{font-family:var(--mono);font-size:16px;margin-right:5px;font-weight:600}
.dsum-i.ok b{color:var(--green)} .dsum-i.no b{color:var(--amber)} .dsum-i.wait b{color:#2D8FC4}
.dst{font-weight:600;font-size:12.5px;white-space:nowrap} .dst.approved{color:var(--green)} .dst.returned{color:var(--amber)} .dst.pending{color:#2D8FC4}
.depts .tbl td{vertical-align:top}
.lband{display:flex;justify-content:space-between;align-items:center;background:#E9EEF4;border-left:3px solid #2D8FC4;padding:7px 11px;margin:16px 0 6px;font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.lband.approved{border-left-color:var(--green)} .lband.returned{border-left-color:var(--amber)}
.lband .dst{text-transform:none;letter-spacing:0;font-size:12px}
.inrow{padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.trow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:7px 10px;border:1px solid var(--line-soft);border-radius:var(--radius);background:#F9FAFC}
@media (max-width:640px){
  .trow{flex-direction:column;align-items:stretch}
  .trow select[data-tsel]{min-width:0 !important;max-width:none !important;width:100% !important}
  .inrow .spread{flex-wrap:wrap}
  .inrow .spread > .row{width:100%;justify-content:flex-start}
}
.check.off{opacity:.55} .check.off .t small{font-weight:400;color:var(--amber)}
.deptcard{border-left:3px solid #2D8FC4}
.deptcard.approved{border-left-color:var(--green)} .deptcard.returned{border-left-color:var(--amber)}
.deptcard details summary{list-style:none} .deptcard details summary::-webkit-details-marker{display:none}
.deptcard details summary::before{content:'▸ ';font-size:11px} .deptcard details[open] summary::before{content:'▾ '}
.note{padding:11px 14px;background:#F6F8FB;border:1px solid var(--line);border-radius:var(--radius);font-size:12.5px;line-height:1.5}
.catgrp{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.catgrp + .catgrp{margin-top:6px}
.catgrp-hd{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 13px;background:none;border:0;cursor:pointer;font:inherit;font-weight:600;font-size:13px;text-align:left;color:inherit}
.catgrp-hd:hover{background:#F6F8FB}
.catgrp.open .catgrp-hd{border-bottom:1px solid var(--line-soft)}
.catrow{display:flex;gap:12px;align-items:center;padding:9px 13px;border-top:1px solid var(--line-soft);cursor:pointer}
.catrow:first-child{border-top:0}
.catrow:hover,.catrow:focus{background:var(--blue-bg);outline:none}
.catrow.exempt{cursor:default} .catrow.exempt:hover{background:none}
.qrow{display:flex;gap:14px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.steps{display:flex;gap:8px;flex-wrap:wrap}
.step{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--slate);padding:5px 10px 5px 5px;border:1px solid var(--line);border-radius:14px;background:#fff}
.step b{width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:10.5px;font-family:var(--mono)}
.tag.deptpick{appearance:auto;cursor:pointer;padding-right:6px;background:#fff}
.prog{display:flex;flex-direction:column;gap:5px}
.prog-bar{height:8px;border-radius:5px;background:var(--paper);border:1px solid var(--line);overflow:hidden}
.prog-fill{height:100%;background:var(--flag-blue);transition:width .3s}
.prog-fill.done{background:var(--green)}
.prog-lbl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--slate)}
tr.mytrack td{background:var(--blue-bg)}
.jobcard:hover{border-color:var(--ink-3)}
.tradetag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:8px;
  background:var(--paper);border:1px solid var(--line);color:var(--slate);margin-left:6px;vertical-align:middle}
@media (max-width:560px){.edition{grid-template-columns:1fr}}

.brand-stars{display:flex;gap:5px;margin-bottom:11px}
.brand-stars svg{width:13px;height:13px;fill:var(--flag-red)}
.brand-city{
  font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:.055em;
  text-transform:uppercase;color:#fff;line-height:1.05;
}
.brand-unit{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--flag-blue);margin-top:6px;
}
.nav{padding:14px 10px;flex:1;overflow-y:auto;overscroll-behavior:contain}
.nav-label{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#6E88A6;padding:12px 8px 7px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;text-align:left;cursor:pointer;
  padding:8px 10px;border-radius:var(--radius);color:#C9D8E8;font-size:13.5px;
  border-left:2px solid transparent;
}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.is-active{background:rgba(65,182,230,.14);color:#fff;border-left-color:var(--flag-blue)}
.nav-item.is-action{background:none;color:#C9D8E8;font-weight:500}
.nav-item.is-action:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.is-action.is-active{background:rgba(65,182,230,.14);border-left-color:var(--flag-blue);color:#fff}
.nav-item .plus{font-family:var(--mono);font-size:15px;line-height:1;color:var(--flag-blue);margin-right:-2px}
.nav-item .ct{
  margin-left:auto;font-family:var(--mono);font-size:11px;color:#8FA8C4;
}
.nav-item.is-active .ct{color:var(--flag-blue)}
.rail-foot{padding:14px 18px;border-top:1px solid rgba(255,255,255,.09);font-size:11px;color:#6E88A6;font-family:var(--mono);line-height:1.6}

/* ---------- top bar ---------- */
.top{
  position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;padding:11px 26px;
  min-width:0;
}
.top > div:not(.top-right){min-width:0}
.top h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-right{flex:none}
.top h1{
  font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:.035em;
  text-transform:uppercase;margin:0;
}
.top .crumb{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.top-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.roleswitch{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.roleswitch button{
  background:none;border:0;padding:6px 12px;cursor:pointer;font-size:12px;
  font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
}
.roleswitch button.on{background:var(--ink);color:#fff}
.who{display:flex;align-items:center;gap:9px;padding-left:12px;border-left:1px solid var(--line)}
.avatar{
  width:31px;height:31px;border-radius:50%;background:var(--ink-3);color:#fff;
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.03em;
}
.who-name{font-size:12.5px;font-weight:600;line-height:1.2}
.who-role{font-size:11px;color:var(--muted);line-height:1.2}

/* ---------- layout bits ---------- */
.main{min-width:0}
.page{padding:24px 26px 64px;max-width:1420px}
.stack{display:flex;flex-direction:column;gap:18px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-hd{padding:13px 16px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.card-hd h2{
  font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;margin:0;
}
.card-bd{padding:16px}
.card-hd .right{margin-left:auto;display:flex;gap:8px;align-items:center}

.eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
}
.h-lg{font-family:var(--display);font-size:29px;font-weight:600;letter-spacing:.02em;margin:4px 0 0;line-height:1.1}
.sub{color:var(--muted);font-size:13px;margin:6px 0 0;max-width:62ch}

/* ---------- pipeline (review queue stages) ---------- */
.pipe{display:grid;grid-template-columns:repeat(var(--pipe-n,5),minmax(0,1fr));border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.pipe-stage{padding:14px 15px 15px;border-right:1px solid var(--line-soft);position:relative;cursor:pointer;background:none;text-align:left;border-top:0;border-bottom:0;border-left:0}
.pipe-stage:last-child{border-right:0}
.pipe-stage:hover{background:var(--grey-bg)}
.pipe-stage.on{background:var(--blue-bg)}
.pipe-stage::after{
  content:"";position:absolute;right:-5px;top:50%;width:9px;height:9px;
  transform:translateY(-50%) rotate(45deg);background:var(--surface);
  border-top:1px solid var(--line-soft);border-right:1px solid var(--line-soft);z-index:2;
}
.pipe-stage:last-child::after{display:none}
.pipe-n{font-family:var(--display);font-size:32px;font-weight:600;line-height:1;letter-spacing:.01em}
.pipe-l{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:7px;line-height:1.4}
.pipe-sub{font-size:11.5px;color:var(--muted);margin-top:3px}
.pipe-stage .bar{height:3px;border-radius:2px;margin-bottom:12px;width:34px}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse}
.tbl th{
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:9px 14px;border-bottom:1px solid var(--line);
  white-space:nowrap;background:#F7F9FB;font-weight:500;
}
.tbl th.sortable{cursor:pointer;user-select:none}
.tbl th.sortable:hover{color:var(--ink-3)}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover{background:#F6F9FC}
.tbl tbody tr:last-child td{border-bottom:0}
.pid{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.pname{font-weight:600;font-size:13.5px}
.paddr{color:var(--muted);font-size:12px;margin-top:1px}
.num{font-family:var(--mono);font-size:12.5px}
.dim{color:var(--muted)}

.tbl tr.grp{cursor:default}
.tbl tr.grp td{background:#EEF2F7;border-bottom:1px solid var(--line);padding:7px 14px}
.tbl tr.grp .gl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--text)}
.tbl tr.grp .gs{font-size:11.5px;color:var(--muted);margin-left:10px}
.tbl tr.grp .gc{float:right;font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--surface);padding:1px 8px;border-radius:9px}

/* ---------- chips / badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:2px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  white-space:nowrap;font-weight:500;
}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.b-draft{background:var(--grey-bg);color:#4C5C70}
.b-submitted{background:var(--blue-bg);color:#155E8C}
.b-review{background:#E9E4FA;color:#4A3A8C}
.b-revise{background:var(--amber-bg);color:var(--amber)}
.b-resub{background:var(--blue-bg);color:#155E8C}
.b-noted{background:var(--green-bg);color:var(--green)}
.b-approved{background:var(--green-bg);color:var(--green)}
.b-archive{background:#E7EBF1;color:#4A5A70}
.b-lapsed{background:#F0EAE1;color:#7A6242}
/* the half-hour grid: a dense strip of slots per day */
.strip{display:flex;flex-wrap:wrap;gap:4px}
.halves{display:flex;flex-direction:column;gap:9px}
.half{display:flex;align-items:flex-start;gap:10px}
.halflbl{
  flex:none;width:64px;padding-top:5px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
@media (max-width:860px){.half{flex-direction:column;gap:4px}.halflbl{width:auto;padding-top:0}}
.sl{
  border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);
  padding:5px 7px;min-width:62px;text-align:left;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;line-height:1.25;color:var(--text);
}
.sl .slt{display:block;font-weight:500}
.sl .sln{display:block;color:var(--muted);font-size:9.5px}
.sl:hover{border-color:var(--flag-blue)}
.sl.part{background:#EAF3FB;border-color:#9CC9E8}
.sl.full{background:var(--blue-bg);border-color:var(--ink-3);color:var(--ink-3)}
.sl.shut{background:repeating-linear-gradient(135deg,#F3EFE8,#F3EFE8 5px,#EAE4DA 5px,#EAE4DA 10px);
  border-color:#D9CEBC;color:#8A6A3A;cursor:default}
.sl.shut .sln{color:#A88C63}
.sl.pick{background:var(--ink);border-color:var(--ink);color:#fff}
.sl.pick .sln{color:#9FC8E6}
/* the day chips carry two lines so the number is never bare */
.dayc{
  border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);
  padding:6px 8px;text-align:left;cursor:pointer;color:var(--text);min-width:0;
}
.dayc:hover{border-color:var(--flag-blue)}
.dayc .dct{display:block;font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dayc .dcs{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dayc.on{background:var(--ink);border-color:var(--ink);color:#fff}
.dayc.on .dcs{color:#9FC8E6}
.dayc.tight .dcs{color:var(--amber)}
.dayc.none{opacity:.45;cursor:default}
.dayc.none .dcs{color:var(--muted)}
.wklbl{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:10px 0 6px;
}
.wklbl:first-child{margin-top:0}
/* a working week reads as a week: five to a row, aligned down the columns */
.weekrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
/* the bar list is a window onto the files, not the whole roll of them */
.barwin{max-height:560px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
/* month columns: filed against closed, drawn side by side */
.trend{display:flex;align-items:flex-end;gap:10px;height:172px;padding:0 2px}
.tcol{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;height:100%}
.tcol .tbars{display:flex;align-items:flex-end;justify-content:center;gap:3px;flex:1}
.tcol .tb{
  width:11px;border-radius:2px 2px 0 0;min-height:2px;position:relative;
  transition:opacity .12s ease;
}
.tcol .tb.filed{background:#41B6E6}   /* PHASE.submitted */
.tcol .tb.done{background:#12735A}    /* PHASE.approved  */
.tcol .tb.shut{background:var(--ink)}
.tcol:hover .tb{opacity:.82}
.tcol .tlab{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--muted);
  text-align:center;white-space:nowrap;
}
.tcol.now .tlab{color:var(--ink-3);font-weight:600}
.tline{display:flex;align-items:flex-end;gap:10px;height:64px;padding:0 2px;margin-top:2px}
.tline .lc{flex:1;min-width:0;display:flex;align-items:flex-end;justify-content:center;height:100%}
.tline .lb{width:100%;max-width:26px;background:var(--ink-3);opacity:.28;border-radius:2px 2px 0 0;min-height:2px}
.tline .lb.over{background:var(--amber);opacity:.6}
.yoy{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(118px,1fr);gap:10px;
  overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:2px;
}
/* one bar, the whole cycle, cut by the stage that consumed each part */
.spend{display:flex;height:38px;border-radius:var(--radius);overflow:hidden;background:var(--grey-bg)}
.spend .sg{
  height:100%;display:grid;place-items:center;min-width:2px;
  font-family:var(--mono);font-size:10px;color:#fff;white-space:nowrap;overflow:hidden;
}
.spendkey{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:9px;margin-top:13px}
.spendkey .sk{display:flex;gap:8px;align-items:flex-start}
.spendkey .sk i{width:9px;height:9px;border-radius:2px;flex:none;margin-top:4px}
.spendkey .sk .n{display:block;font-size:12px;font-weight:600;line-height:1.3}
.spendkey .sk .v{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:2px}

.yoycell{
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:10px 11px;background:var(--surface);
  min-width:0;
}
.yoycell .yk{
  font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  line-height:1.35;min-height:2.7em;display:block;
}
.yoycell .yv{font-family:var(--display);font-size:22px;font-weight:600;line-height:1.1;margin-top:3px}
.yoycell .yd{font-family:var(--mono);font-size:10px;margin-top:3px;line-height:1.35;overflow-wrap:anywhere}
@media (max-width:1180px){ .yoycell .yk{min-height:0} }
.yoycell .yd.up{color:var(--green)} .yoycell .yd.dn{color:var(--flag-red)} .yoycell .yd.flat{color:var(--muted)}
/* what became of everything filed: each step a share of the one before */
.funnel{display:flex;flex-direction:column;gap:7px}
.fstep{display:flex;align-items:center;gap:12px}
.fstep .fn{flex:none;width:150px;font-size:12.5px}
.fstep .ftrack{flex:1;height:26px;background:var(--grey-bg);border-radius:var(--radius);overflow:hidden;position:relative}
.fstep .ffill{height:100%;border-radius:var(--radius);display:flex;align-items:center;padding-left:9px}
.fstep .ffill span{font-family:var(--mono);font-size:10.5px;color:#fff;white-space:nowrap}
.fstep .fpc{flex:none;width:118px;text-align:right;font-family:var(--mono);font-size:11px;color:var(--muted)}
.bargrp{
  position:sticky;top:0;z-index:2;background:var(--surface);
  display:flex;align-items:baseline;gap:9px;padding:9px 2px 7px;margin-top:4px;
  border-bottom:1px solid var(--line-soft);
}
.bargrp:first-child{margin-top:0}
.bargrp .g-n{font-family:var(--display);font-size:13px;font-weight:600}
.bargrp .g-m{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-left:auto}
.tfbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tfbar .sel{width:auto;min-width:0;padding:5px 8px;font-size:12px}
.tflab{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
@media (max-width:720px){.weekrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* captured paperwork: a contact sheet of what the inspector brought back */
.papers{display:flex;flex-wrap:wrap;gap:8px}
.paper{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  width:126px;overflow:hidden;text-align:left;cursor:pointer;padding:0;
}
.paper:hover{border-color:var(--flag-blue)}
.paper .pthumb{
  display:block;width:100%;height:88px;object-fit:cover;background:var(--grey-bg);
  border-bottom:1px solid var(--line-soft);
}
.paper .pfile{
  display:flex;align-items:center;justify-content:center;height:88px;background:var(--grey-bg);
  border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:10px;color:var(--muted);
}
.paper .pmeta{display:block;padding:6px 7px}
.paper .pn{display:block;font-size:10.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paper .pd{display:block;font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:2px}
.capture{
  border:1px dashed var(--line);border-radius:var(--radius);background:#FBFCFD;
  padding:14px;text-align:center;
}
.closerow{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line-soft);
  border-radius:var(--radius);background:var(--surface)}
.closerow .cr-t{font-weight:600;font-size:13px;display:block}
.closerow .cr-d{font-family:var(--mono);font-size:11px;color:var(--muted);display:block;margin-top:2px}
.tag{
  display:inline-block;padding:2px 7px;border:1px solid var(--line);border-radius:2px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted);background:#FAFCFD;
}
.sev{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:2px;font-weight:600}
.sev-code{background:var(--red-bg);color:#A5122C}
.sev-clar{background:var(--amber-bg);color:var(--amber)}
.sev-note{background:var(--blue-bg);color:#155E8C}

/* ---------- controls ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:13px;font-weight:500;
  white-space:nowrap;
}
.btn:hover{border-color:#B7C3D2;background:#F8FAFC}
.btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-primary:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn-approve{background:var(--green);border-color:var(--green);color:#fff}
.btn-approve:hover{background:#0E6249;border-color:#0E6249}
.btn-revise{background:var(--amber);border-color:var(--amber);color:#fff}
.btn-revise:hover{background:#8F4B0C;border-color:#8F4B0C}
.btn-sm{padding:4px 10px;font-size:12px}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn-ghost{background:none;border-color:transparent}
.btn-ghost:hover{background:var(--grey-bg);border-color:transparent}

.field{display:flex;flex-direction:column;gap:5px}
.field > label{
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}
.field .hint{font-size:11.5px;color:var(--muted)}
.inp,select.sel,.ta{
  width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);font-size:13.5px;
}
.inp:focus,select.sel:focus,.ta:focus{border-color:var(--flag-blue);outline:none;box-shadow:0 0 0 3px rgba(65,182,230,.16)}
.ta{min-height:82px;resize:vertical;font-family:var(--body)}
.inp.err,select.sel.err{border-color:var(--flag-red);background:#FFF8F9}
.errmsg{color:#A5122C;font-size:11.5px;font-family:var(--mono)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.check{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:var(--surface)}
.check:hover{background:#F8FAFC}
.check.on{border-color:var(--ink-3);background:var(--blue-bg)}
.check input{margin-top:2px;accent-color:var(--ink-3)}
.check .t{font-size:13px;font-weight:600}
.check .d{font-size:11.5px;color:var(--muted);font-family:var(--mono)}

.search{position:relative;flex:1;min-width:190px;max-width:340px}
.search .inp{padding-left:31px}
.search svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:2}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.fchip{
  padding:5px 11px;border:1px solid var(--line);background:var(--surface);border-radius:20px;
  font-size:12px;cursor:pointer;color:var(--muted);
}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- drop zone ---------- */
.drop{
  border:1.5px dashed #A9BDD4;border-radius:var(--radius);padding:26px;text-align:center;
  background:#FAFCFE;
  cursor:pointer;
}
.drop:hover,.drop.over{border-color:var(--flag-blue);background-color:#F2F9FE}
.drop .big{font-family:var(--display);font-size:16px;letter-spacing:.05em;text-transform:uppercase}
.filelist{display:flex;flex-direction:column;gap:6px;margin-top:11px}
.filerow{display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-size:12.5px}
.filerow .fn{font-family:var(--mono);font-size:12px}
.filerow .fs{margin-left:auto;color:var(--muted);font-family:var(--mono);font-size:11px}

/* ---------- project detail ---------- */
.phead{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.phead-top{padding:17px 20px;display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.phead h2{font-family:var(--display);font-size:25px;letter-spacing:.02em;margin:5px 0 0;font-weight:600}
.pmeta{display:flex;gap:22px;flex-wrap:wrap;margin-top:11px}
.pmeta div{min-width:0}
.pmeta .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pmeta .v{font-size:13px;margin-top:2px}
.pactions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tabs{display:flex;gap:0;border-top:1px solid var(--line-soft);padding:0 12px;overflow-x:auto;overscroll-behavior-x:contain}
.tab{
  background:none;border:0;padding:11px 14px;cursor:pointer;font-size:13px;color:var(--muted);
  border-bottom:2px solid transparent;white-space:nowrap;
}
.tab:hover{color:var(--text)}
.tab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--flag-red)}
.tab .n{font-family:var(--mono);font-size:11px;background:var(--grey-bg);padding:1px 5px;border-radius:8px;margin-left:5px}
.tab.on .n{background:var(--red-bg);color:#A5122C}

.split{display:grid;grid-template-columns:minmax(0,1fr) var(--split-aside,356px);gap:16px;align-items:start}
.split > *{min-width:0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.cols > *{min-width:0}
.tbl-wrap{width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.tbl-compact th{padding:8px 12px}
.tbl-compact td{padding:8px 12px}
.tbl-compact .avatar{width:25px;height:25px;font-size:9.5px}
.nowrap{white-space:nowrap}
@media (max-width:1040px){ .cols{grid-template-columns:1fr} }

/* ---------- SIGNATURE: blueprint sheet viewer ---------- */
.sheetwrap{background:var(--ink);border:1px solid var(--ink-2);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.sheetbar{
  display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--ink-2);
  border-bottom:1px solid rgba(255,255,255,.1);color:#C9D8E8;flex-wrap:wrap;
}
.sheetbar .sname{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;color:#fff}
.sheetbar .right{margin-left:auto;display:flex;gap:7px;align-items:center}
.sbtn{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#D6E4F2;
  padding:4px 10px;border-radius:2px;cursor:pointer;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.07em;text-transform:uppercase;
}
.sbtn:hover{background:rgba(255,255,255,.16);color:#fff}
.sbtn.on{background:var(--flag-red);border-color:var(--flag-red);color:#fff}
.sheettabs{display:flex;gap:5px;padding:8px 12px;background:#0A2647;border-bottom:1px solid rgba(255,255,255,.08);overflow-x:auto;overscroll-behavior-x:contain}
.stab{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#A9C2DC;
  padding:5px 11px;border-radius:2px;cursor:pointer;font-family:var(--mono);font-size:10.5px;white-space:nowrap;
}
.stab:hover{color:#fff}
.stab.on{background:var(--flag-blue);border-color:var(--flag-blue);color:var(--ink)}
.stab .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--flag-red);margin-left:6px;vertical-align:middle}

/* ---------- takeoff and measurement ---------- */
.tkbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 12px;
  background:#081E36;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.tkgrp{display:flex;align-items:center;gap:0;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);overflow:hidden}
.tktool{background:none;border:0;color:#9FC8E6;padding:6px 11px;font-size:12px;min-height:32px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}
.tktool+.tktool{border-left:1px solid rgba(255,255,255,.14)}
.tktool:hover{background:rgba(255,255,255,.07);color:#fff}
.tktool.on{background:var(--flag-blue);color:#fff}
.tktool[disabled]{opacity:.4;cursor:not-allowed}
.tktool svg{width:14px;height:14px;flex:none}
.tkscale{font-family:var(--mono);font-size:11px;color:#7FA8C8;display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);min-height:32px}
.tkscale b{color:#8FE0C8;font-weight:500}
.tkscale.unset b{color:#FFD98A}
.tkhint{font-size:11.5px;color:#9FC8E6;margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono)}
.tkhint kbd{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:3px;
  padding:1px 5px;font-family:var(--mono);font-size:10px}
.stage{position:relative}
.stage svg.sheet{display:block;width:100%;height:auto}
.tkover{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.tkover .hit,.tkover rect{pointer-events:all}
.tkover.armed{cursor:crosshair}
.tkover .hit{cursor:pointer}
.tk-l{fill:none}
.tk-f{fill-opacity:.14}
.tk-v{fill:#fff}
.tk-lab{font-family:var(--mono);font-weight:600;paint-order:stroke;
  stroke:#05162B;stroke-linejoin:round}
.tk-cnt{font-family:var(--mono);font-weight:600;fill:#fff;text-anchor:middle;dominant-baseline:central}
.tkrow{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.tkrow:last-child{border-bottom:0}
.tkrow .sw{width:10px;height:10px;border-radius:2px;flex:none}
.tkrow .nm{flex:1;min-width:0;font-size:12.5px}
.tkrow .nm small{display:block;color:var(--muted);font-size:11px;font-family:var(--mono)}
.tkrename{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:text;
  border-bottom:1px dashed transparent}
.tkrename:hover{border-bottom-color:var(--muted)}
.tkrow .vv{font-family:var(--mono);font-size:12.5px;font-weight:600;white-space:nowrap}
.tkrow .x{background:none;border:0;color:var(--muted);font-size:15px;line-height:1;padding:0 3px;cursor:pointer}
.tkrow .x:hover{color:var(--flag-red)}
.tkrow.sel{background:var(--paper);margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:3px}
.tktot{display:flex;align-items:baseline;gap:8px;padding:9px 0 0;margin-top:4px;border-top:1px solid var(--line)}
.tktot b{font-family:var(--display);font-size:20px}
.tkstampg{cursor:grab;pointer-events:all}
.tkstampg.dragging{cursor:grabbing}
.tkstampg text{user-select:none;-webkit-user-select:none}
@media (max-width:640px){
  .tkbar{padding:7px 10px;gap:5px}
  .tktool{padding:6px 9px;font-size:11.5px}
  .tkhint{display:none}
}


/* ---------- zoom, pan and the full-screen review ---------- */

/* ---------- the drawings tab, as a set of files ---------- */
.setgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:15px}
.setcard{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;text-align:left;
  width:100%;padding:0;cursor:pointer;transition:.12s}
.setcard:hover{border-color:var(--ink-3);transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(8,32,63,.45)}
.setcard .thumb{position:relative;aspect-ratio:4/3;background:var(--ink);overflow:hidden;
  border-bottom:1px solid var(--line);display:grid;place-items:center}
.setcard .thumb img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.setcard .thumb .none{font-family:var(--mono);font-size:10.5px;color:#5E7898;letter-spacing:.1em}
.setcard .thumb .pagecount{position:absolute;right:8px;bottom:8px;background:rgba(8,24,42,.82);
  color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:3px 8px;border-radius:10px}
.setcard .thumb .open{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  background:rgba(8,32,63,.55);transition:.12s;color:#fff;font-family:var(--display);
  font-size:15px;letter-spacing:.07em;text-transform:uppercase}
.setcard:hover .thumb .open{opacity:1}
.setcard .body{padding:11px 13px;display:flex;flex-direction:column;gap:3px;flex:1}
.setcard .fname{font-family:var(--mono);font-size:12px;color:var(--ink);word-break:break-all;line-height:1.35}
.setcard .meta{font-size:11.5px;color:var(--muted)}
.setcard .chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.setcard .chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:2px 7px;border-radius:9px;background:var(--paper);color:var(--slate);border:1px solid var(--line)}
.setcard .chip.open{background:rgba(212,69,31,.1);color:var(--flag-red);border-color:rgba(212,69,31,.28)}
.setcard .chip.rev{background:rgba(200,122,42,.12);color:#8A5216;border-color:rgba(200,122,42,.3)}
.dropzone{border:1.5px dashed var(--line);border-radius:var(--radius);background:var(--paper);
  padding:26px 20px;text-align:center}
.dropzone.on{border-color:var(--ink-3);background:var(--signal-bg)}
.dropzone b{display:block;font-family:var(--display);font-size:17px;margin-bottom:4px}
.dropzone p{color:var(--slate);font-size:13px;margin:0 auto 14px;max-width:48ch}

.sheetport{position:relative;overflow:hidden;background:var(--ink);touch-action:none}
.tkfull .sheetport{aspect-ratio:auto}
.sheetport.grab{cursor:grab}
.sheetport.grabbing{cursor:grabbing}
.sheetport.placing{cursor:crosshair}
.stage{position:relative;transform-origin:0 0}
.zoomgrp{display:flex;align-items:center;gap:0;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);overflow:hidden}
.zoomgrp button{background:none;border:0;color:#9FC8E6;padding:6px 10px;font-size:12px;min-height:32px;cursor:pointer;
  font-family:var(--mono);display:inline-flex;align-items:center;gap:5px}
.zoomgrp button+button{border-left:1px solid rgba(255,255,255,.14)}
.zoomgrp button:hover{background:rgba(255,255,255,.07);color:#fff}
.zoomgrp .lvl{min-width:52px;justify-content:center;color:#7FA8C8}
.zoomgrp .lvl:hover{color:#fff}
/* the expanded review — the sheet gets the whole platform */
.tkfull{position:fixed;inset:0;z-index:90;background:var(--ink);display:flex;flex-direction:column}
.tkfull-hd{display:flex;align-items:center;gap:14px;padding:10px 16px;background:#081E36;
  border-bottom:1px solid rgba(255,255,255,.1);flex:none;flex-wrap:wrap}
.tkfull-hd .nm{font-family:var(--display);font-size:17px;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.tkfull-hd .sub{font-family:var(--mono);font-size:11px;color:#7FA8C8;margin:0}
.tkfull-hd .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.tkfull .sheetport{flex:1;min-height:0}
.tkfull .tkbar{flex:none}
.tkfull-tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 16px;background:#061A2E;
  border-bottom:1px solid rgba(255,255,255,.08);flex:none}
.esc-chip{font-family:var(--mono);font-size:10.5px;color:#7FA8C8;display:inline-flex;align-items:center;gap:6px}
.esc-chip kbd{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:3px;padding:1px 5px;font-size:10px}
body.tkfull-on{overflow:hidden}
@media (max-width:640px){
  .tkfull-hd{padding:8px 11px;gap:9px}
  .tkfull-hd .nm{font-size:14px}
  .tkfull-hd .sub,.esc-chip{display:none}
  /* wrapping the toolbar cost four rows and most of a phone screen — one
     scrolling row gives the drawing back the space it needs */
  .tkbar{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tkbar::-webkit-scrollbar{display:none}
  .tkgrp,.zoomgrp,.tkscale,.tktool{flex:none}
}

.canvas{position:relative;background:var(--ink);padding:12px}
.canvas.placing{cursor:crosshair}
.canvas svg.sheet{display:block;width:100%;height:auto}
.pin{
  position:absolute;width:16px;height:16px;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--flag-red);color:#fff;border:1.5px solid #fff;
  display:grid;place-items:center;font-family:var(--mono);font-size:8.5px;font-weight:600;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.45);padding:0;
}
.pin:hover{filter:brightness(1.15)}
.pin{transform-origin:center}
.pin.resolved{background:var(--green)}
.pin.sel{box-shadow:0 0 0 5px rgba(65,182,230,.55),0 2px 8px rgba(0,0,0,.45);z-index:5}
.placing-hint{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);
  background:var(--flag-red);color:#fff;padding:5px 13px;border-radius:2px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;z-index:6;
}

/* ---------- notifications ---------- */
.bellwrap{position:relative}
.bell{position:relative;width:34px;height:34px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--surface);cursor:pointer;display:grid;place-items:center;padding:0}
.bell:hover{border-color:#B7C3D2;background:#F8FAFC}
.bell.on{background:var(--ink);border-color:var(--ink)}
.bell svg{width:17px;height:17px;fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bell.on svg{stroke:#fff}
.bell-n{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--flag-red);color:#fff;font-family:var(--mono);font-size:10px;font-weight:600;
  display:grid;place-items:center;border:2px solid var(--paper)}
.notif{position:absolute;right:0;top:42px;width:min(380px,88vw);z-index:60;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 18px 44px -14px rgba(8,32,63,.45);overflow:hidden}
.notif-hd{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--line-soft);font-size:13px}
.notif-hd .btn{margin-left:auto}
.notif-bd{max-height:62vh;overflow-y:auto;overscroll-behavior:contain}
.notif-grp{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding:10px 13px 5px;background:#F7F9FB}
.notif-row{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:10px 13px;
  border:0;border-bottom:1px solid var(--line-soft);background:none;cursor:pointer}
.notif-row:hover{background:#F6F9FC}
.nb{width:7px;height:7px;border-radius:50%;flex:none;margin-top:5px}
.nt{display:block;font-size:12.5px;font-weight:600;line-height:1.35}
.nd{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.nw{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:3px}
.notif-empty{padding:26px 14px;text-align:center;font-size:12.5px;color:var(--muted)}

/* ---------- message thread ---------- */
.thread{display:flex;flex-direction:column;gap:12px}
.msg{max-width:76%;align-self:flex-start}
.msg.mine{align-self:flex-end}
.msg-hd{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}
.msg-hd span{margin-left:8px;opacity:.8}
.msg.mine .msg-hd{text-align:right}
.msg-b{background:var(--grey-bg);border:1px solid var(--line);border-radius:3px 10px 10px 10px;
  padding:10px 13px;font-size:13.5px;line-height:1.55;white-space:pre-wrap}
.msg.mine .msg-b{background:var(--blue-bg);border-color:#BEDCF3;border-radius:10px 3px 10px 10px}
.msg-r{font-family:var(--mono);font-size:9.5px;color:var(--muted);text-align:right;margin-top:4px}
.composer{border-top:1px solid var(--line-soft);padding-top:14px}

/* ---------- staff roster ---------- */
.staff-cell{min-width:238px}
.staff{display:flex;gap:11px;align-items:flex-start;flex-wrap:nowrap}
.staff .avatar{flex:none;margin-top:1px}
.staff-i{min-width:0}
.staff-n{display:flex;align-items:center;gap:7px;flex-wrap:wrap;row-gap:4px}
.staff-n .nm{font-size:13.5px;font-weight:600;line-height:1.35}
.staff-n .tag{flex:none}
.staff-t{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
.staff-t span{white-space:nowrap}

table.roster{table-layout:auto}
table.roster th{white-space:nowrap}
.roster .staff-cell{min-width:210px;width:26%}
.roster .staff-t .adm{color:var(--ink-3);font-weight:600}
.roster .staff-t .off{color:var(--amber);font-weight:600}
.roster .rowacts{text-align:right;white-space:nowrap;width:1%}
.roster .rowacts .btn{padding:3px 9px;font-size:11.5px}
.loadcell{display:flex;align-items:center;gap:9px;min-width:96px}
.loadcell .progress{flex:1;min-width:46px;height:4px}

/* ---------- settings ---------- */
.setrow{display:flex;gap:14px;align-items:flex-start;padding:13px 14px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface)}
.setrow.on{border-color:#B7CBDE;background:#F8FBFD}
.setrow .st{display:block;font-size:13.5px;font-weight:600}
.setrow .sd{display:block;font-size:12px;color:var(--muted);margin-top:3px;max-width:62ch}
.toggle{width:42px;height:24px;border-radius:12px;border:1px solid var(--line);background:var(--grey-bg);
  position:relative;cursor:pointer;flex:none;padding:0;transition:background .15s,border-color .15s}
.toggle .knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(8,32,63,.3);transition:transform .15s}
.toggle.on{background:var(--green);border-color:var(--green)}
.toggle.on .knob{transform:translateX(18px)}
.toggle[disabled]{opacity:.4;cursor:not-allowed}

/* ---------- inspection calendar ---------- */
/* one day, one bounded block: a header band naming the date and a body
   holding its half hours, so nothing reads as belonging to the day above */
.dayblock{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.dayblock.today{border-color:var(--flag-blue);box-shadow:0 0 0 2px rgba(65,182,230,.14)}
.dayblock.shut{background:#FBFAF7;border-color:#E4DCCD}
.dayblock.off{background:var(--paper);border-style:dashed}
.dayhd{
  display:flex;align-items:baseline;gap:10px;padding:8px 12px;
  background:var(--grey-bg);border-bottom:1px solid var(--line-soft);
}
.dayblock.today .dayhd{background:var(--blue-bg)}
.dayblock.shut .dayhd{background:#F3EEE3;border-bottom-color:#E4DCCD}
.dayhd .dw{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.dayhd .dd{font-family:var(--display);font-size:16px;font-weight:600;line-height:1;letter-spacing:.02em}
.dayhd .dc{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-left:auto}
.dayhd .dtoday{
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:#fff;border-radius:999px;padding:2px 7px;
}
.daybd{padding:10px 12px}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px}
.slot{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:9px}
.slot.full{background:#F7F9FB}
.slot-hd{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.07em;color:var(--muted);margin-bottom:7px}
.slot-hd .cap{margin-left:auto;background:var(--grey-bg);padding:1px 7px;border-radius:9px}
.slot-hd .cap.full{background:var(--red-bg);color:#A5122C}
.slot-free{font-size:11.5px;color:var(--muted);padding:5px 2px}
.bk{display:block;width:100%;text-align:left;border:1px solid var(--line);border-left:3px solid var(--flag-blue);
  border-radius:2px;background:#FAFCFE;padding:7px 9px;cursor:pointer}
.bk + .bk{margin-top:6px}
.bk:hover{border-color:#A9BDD4}
.bk.pending{border-left-color:var(--amber);background:#FFFCF7}
.bk-t{display:block;font-size:12.5px;font-weight:600}
.bk-m{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:2px}
.bk-s{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.bk-s.pend{color:var(--amber);font-weight:600}
@media (max-width:700px){ .dayhd{flex-wrap:wrap} .dayhd .dc{margin-left:0;width:100%} }

.steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.step{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);
  padding:5px 11px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.step b{width:17px;height:17px;border-radius:50%;background:var(--grey-bg);color:var(--muted);
  display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:600}
.step.on{border-color:var(--ink-3);color:var(--text);font-weight:600}
.step.on b{background:var(--ink-3);color:#fff}
.step.done b{background:var(--green-bg);color:var(--green)}

/* ---------- month calendar ---------- */
.mgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.mhd{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:2px 4px}
.mcell{display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-height:92px;padding:7px 8px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);cursor:pointer;text-align:left}
.mcell:hover{border-color:#A9BDD4;background:#F8FBFD}
.mcell.out{opacity:.4}
.mcell.closed{background:#F4F6F9}
.mcell.today{border-color:var(--flag-blue);box-shadow:0 0 0 2px rgba(65,182,230,.18)}
.mnum{font-family:var(--display);font-size:15px;font-weight:600;line-height:1}
.mcap{font-family:var(--mono);font-size:10px;color:var(--muted);background:var(--grey-bg);padding:1px 6px;border-radius:8px}
.mcap.full{background:var(--red-bg);color:#A5122C}
.mfree{font-family:var(--mono);font-size:10px;color:var(--muted)}
.mchip{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--mono);font-size:9.5px;padding:1px 5px;border-radius:2px;background:var(--blue-bg);color:#155E8C}
.mchip.pend{background:var(--amber-bg);color:var(--amber)}
.mmore{font-size:10px;color:var(--muted)}
@media (max-width:760px){ .mgrid{grid-template-columns:repeat(7,minmax(46px,1fr))} .mcell{min-height:64px;padding:5px} .mchip,.mmore{display:none} }

/* ---------- inspections ---------- */
.insp{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);flex-wrap:wrap}
.insp .ibar{width:3px;align-self:stretch;border-radius:2px;background:var(--line);flex:none}
.insp.requested .ibar{background:var(--flag-blue)}
.insp.scheduled .ibar{background:#7A5BD6}
.insp.passed .ibar{background:var(--green)}
.insp.failed .ibar{background:var(--amber)}
.insp.passed{background:#FAFDFB}
.insp .it{display:block;font-size:13.5px;font-weight:600}
.insp .ih{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.insp .ischeduled{display:block;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:5px}
.insp .inote{display:block;font-size:12px;margin-top:7px;padding:7px 10px;border-radius:0 2px 2px 0}
.insp .inote.failed{background:var(--amber-bg);border-left:2px solid var(--amber);color:#7A4409}
.defs{margin-top:9px;display:flex;flex-direction:column;gap:7px}
.def{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line-soft);
  border-radius:var(--radius);background:var(--surface)}
.def.cleared{opacity:.62}
.def .dn{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10.5px;font-weight:600;color:#fff;background:var(--amber)}
.def.answered .dn{background:var(--flag-blue)}
.def.cleared .dn{background:var(--green)}
.def .dt{display:block;font-size:12.5px;line-height:1.45}
.def .dr{display:block;margin-top:6px;padding:7px 9px;background:var(--blue-bg);border-radius:var(--radius);
  font-size:12px;color:var(--ink-2)}
.def .dc{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;color:var(--green)}
.def .dm{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:4px}
.defacts{flex:none;display:flex;flex-direction:column;gap:5px;align-items:stretch}
/* the scope grids: a row per thing, a chip per system it applies to */
/* the company's people: a card each, roles and notices as chips */
.perrow{display:flex;gap:13px;align-items:flex-start;padding:12px 13px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.perrow.off{opacity:.5}
.perrow .seal{
  width:34px;height:34px;flex:none;border-radius:2px;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:600;color:#fff;background:var(--ink-3);
}
.perrow .pn{display:block;font-weight:600;font-size:13.5px}
.perrow .pt{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.perrow .pc{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:4px}
.chiprow{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.rchip{
  border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:3px 9px;cursor:pointer;font-family:var(--mono);font-size:10px;color:var(--muted);
}
.rchip:hover{border-color:var(--flag-blue)}
.rchip.on{background:var(--blue-bg);border-color:var(--ink-3);color:var(--ink-3);font-weight:600}
.rchip.get.on{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.scoperow{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;
  border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--surface)}
.scoperow.off{opacity:.5}
.scoperow .sr-t{display:block;font-weight:600;font-size:13px}
.scoperow .sr-d{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.syschips{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.syschip{
  border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:3px 9px;cursor:pointer;font-family:var(--mono);font-size:10px;color:var(--muted);
}
.syschip:hover{border-color:var(--flag-blue)}
.syschip.on{background:var(--blue-bg);border-color:var(--ink-3);color:var(--ink-3);font-weight:600}
.syschip:disabled{cursor:default;opacity:.6}
@media (max-width:640px){.def{flex-wrap:wrap}.defacts{flex-direction:row;width:100%}}
.insp .inote.passed{background:var(--green-bg);border-left:2px solid var(--green);color:#0C4F3C}

/* ---------- supporting documents ---------- */
.docrow{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);flex-wrap:wrap}
.docrow .dbar{width:3px;align-self:stretch;border-radius:2px;background:var(--line);flex:none}
.docrow.accepted .dbar{background:var(--green)}
.docrow.pending .dbar{background:var(--flag-blue)}
.docrow.rejected .dbar{background:var(--amber)}
.docrow .dn{display:block;font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink-3);word-break:break-all}
.docrow .dm{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.docrow .dnote{display:block;font-size:12px;margin-top:7px;padding:7px 10px;background:var(--amber-bg);
  border-left:2px solid var(--amber);border-radius:0 2px 2px 0;color:#7A4409}
.reqrow{display:flex;gap:10px;align-items:flex-start}
.reqrow .rq{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--mono);font-size:11px;font-weight:600;margin-top:1px}
.reqrow .rq.ok{background:var(--green-bg);color:var(--green)}
.reqrow .rq.wait{background:var(--blue-bg);color:#155E8C}
.reqrow .rq.no{background:var(--red-bg);color:#A5122C}
.reqrow .rq-t{display:block;font-size:13px;font-weight:600}
.reqrow .rq-d{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}

/* ---------- comments ---------- */
.cmt{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:12px;cursor:pointer}
.cmt + .cmt{margin-top:9px}
.cmt:hover{border-color:#B7C3D2}
.cmt.sel{border-color:var(--flag-blue);box-shadow:0 0 0 3px rgba(65,182,230,.16)}
.cmt.resolved{background:#F8FAFB}
.cmt-hd{display:flex;gap:8px;align-items:center;margin-bottom:7px;flex-wrap:wrap}
.cmt-n{
  width:20px;height:20px;border-radius:50%;background:var(--flag-red);color:#fff;
  display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;font-weight:600;flex:none;
}
.cmt.resolved .cmt-n{background:var(--green)}
.cmt-code{font-family:var(--mono);font-size:11px;color:var(--ink-3);font-weight:500}
.cmt-origin{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--muted);margin:5px 0 3px}
.cmt-await{margin-top:8px;padding:9px 11px;border-left:2px solid var(--flag-blue);background:var(--blue-bg);
  border-radius:0 var(--radius) var(--radius) 0;font-size:12.5px;color:var(--ink-2)}
.cmt-ok{margin-top:8px;padding:9px 11px;border-left:2px solid var(--green);background:var(--green-bg);
  border-radius:0 var(--radius) var(--radius) 0;font-size:12.5px;color:var(--green)}
.cmt-back{margin-top:8px;padding:9px 11px;border-left:2px solid var(--amber);background:var(--amber-bg);
  border-radius:0 var(--radius) var(--radius) 0;font-size:12.5px;color:var(--amber)}
.cmt-ok .who,.cmt-back .who,.cmt-await .who{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  opacity:.75;margin-bottom:4px}
.cmt-body{font-size:13px;line-height:1.5}
.cmt-foot{display:flex;gap:8px;align-items:center;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line-soft);flex-wrap:wrap}
.cmt-meta{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.cmt-reply{margin-top:9px;padding:9px 11px;background:var(--blue-bg);border-left:2px solid var(--ink-3);font-size:12.5px;border-radius:0 2px 2px 0}
.cmt-reply .who{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px;border:0;padding:0;display:block}

/* ---------- dashboard ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:13px 15px;text-align:left;cursor:pointer}
.kpi:hover{border-color:#B7C3D2;background:#FAFCFE}
.kpi .n{font-family:var(--display);font-size:29px;font-weight:600;line-height:1;letter-spacing:.01em;margin-top:6px}
.kpi .s{font-size:11.5px;color:var(--muted);margin-top:4px}
.kpi .rule{height:3px;width:30px;border-radius:2px;margin-bottom:10px}
.todo{display:flex;gap:12px;align-items:center;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.todo + .todo{margin-top:8px}
.todo .mark{width:7px;height:26px;border-radius:2px;flex:none}
.todo .t{font-size:13px;font-weight:600}
.todo .d{font-size:11.5px;color:var(--muted);margin-top:2px}
.todo .go{margin-left:auto}

/* ---------- due columns ---------- */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
.cols3 > *{min-width:0}
@media (max-width:940px){ .cols3{grid-template-columns:1fr} }
.duecol .card-hd{gap:8px}
.duecol .card-hd .n{font-family:var(--display);font-size:20px;font-weight:600;line-height:1}
.duecol .card-bd{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto;overscroll-behavior:contain;overscroll-behavior:contain}
.due{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);cursor:pointer;text-align:left;width:100%}
.due:hover{border-color:#A9BDD4;background:#F8FBFD}
.due .bar{width:3px;align-self:stretch;border-radius:2px;flex:none}
.due .id{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-3)}
.due .nm{font-size:12.5px;margin-top:1px;line-height:1.3}
.due .what{font-size:11.5px;color:var(--muted);margin-top:3px}
.due .when{margin-left:auto;text-align:right;font-family:var(--mono);font-size:11px;white-space:nowrap}
.due .when b{display:block;font-size:13px;font-weight:600}
.duecol .none{padding:18px 8px;text-align:center;font-size:12px;color:var(--muted)}

/* ---------- view toggle ---------- */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.seg button{background:none;border:0;padding:6px 13px;cursor:pointer;font-size:12px;font-family:var(--mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.seg button.on{background:var(--ink);color:#fff}

/* ---------- kanban ---------- */
.board{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 4*12px)/5);
  gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  padding-bottom:8px;align-items:start;scroll-snap-type:x proximity;
}
.bcol{scroll-snap-align:start}
@media (max-width:1180px){ .board{grid-auto-columns:calc((100% - 3*12px)/4)} }
@media (max-width:900px){  .board{grid-auto-columns:calc((100% - 2*12px)/3)} }
@media (max-width:680px){  .board{grid-auto-columns:minmax(232px,1fr)} }
.bcol{background:#E7ECF2;border:1px solid var(--line);border-radius:var(--radius);min-height:120px}
.bcol.over{background:var(--blue-bg);border-color:var(--flag-blue)}
.bcol-hd{padding:10px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;position:sticky;top:0;background:#E7ECF2;border-radius:var(--radius) var(--radius) 0 0;z-index:2}
.bcol-hd .dot{width:8px;height:8px;border-radius:2px;flex:none}
.bcol-hd .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;line-height:1.35}
.bcol-hd .c{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--surface);padding:1px 7px;border-radius:9px}
.bcol-hint{padding:0 12px 8px;font-size:11px;color:var(--muted)}
.bcol-body{
  padding:10px;display:flex;flex-direction:column;gap:9px;
  max-height:772px;overflow-y:auto;overscroll-behavior:contain;
}
/* the month grid: one cell a day, dots for what is booked */
.iamon{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.iadow{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding-bottom:2px;
}
.iacell{
  border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--surface);
  min-height:74px;padding:6px 7px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;
}
.iacell:hover{border-color:var(--flag-blue)}
.iacell.out{opacity:.38;cursor:default}
.iacell.shut{background:#F7F3EC;border-color:#E4DCCD;cursor:default}
.iacell.on{border-color:var(--ink);box-shadow:0 0 0 2px rgba(8,32,63,.12)}
.iacell.now .iad{color:var(--flag-blue)}
.iacell .iad{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-3)}
.iacell .ian{font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:auto}
.iadots{display:flex;flex-wrap:wrap;gap:3px}
.iadot{width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.iadot.pend{background:var(--flag-blue)}
.iadot.done{background:var(--green)}
.iadot.late{background:var(--amber)}
.iaweek{display:flex;flex-direction:column;gap:10px}
.iawday{border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden}
.iawday .hd{
  display:flex;align-items:baseline;gap:9px;padding:7px 11px;background:var(--grey-bg);
  border-bottom:1px solid var(--line-soft);
}
.iawday.now .hd{background:var(--blue-bg)}
.iawday.shut .hd{background:#F3EEE3}
.iawday .hd .w{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.iawday .hd .dt{font-family:var(--display);font-size:14px;font-weight:600}
.iawday .hd .ct{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.iawday .bd{padding:8px;display:flex;flex-direction:column;gap:7px}
.bcol-more{
  padding:7px 12px 10px;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted);
}
.bcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:11px;cursor:pointer;box-shadow:0 1px 2px rgba(8,32,63,.06)}
.bcard:hover{border-color:#A9BDD4}
.bcard.drag{opacity:.45}
.bcard .id{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-3)}
.bcard .nm{font-size:13px;font-weight:600;margin-top:3px;line-height:1.3}
.bcard .fm{font-size:11.5px;color:var(--muted);margin-top:2px}
.bcard .ft{display:flex;align-items:center;gap:7px;margin-top:9px;padding-top:8px;border-top:1px dashed var(--line-soft);flex-wrap:wrap}
.bcard .ft .tag,.bcard .ft .sev{flex:0 0 auto}
.bcard .bwho{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  background:var(--ink-3);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;font-weight:600;line-height:1;
  letter-spacing:0;text-transform:uppercase;
  padding:0;margin:0;border:0;gap:0;
}
.bcard .age{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.bcol-empty{padding:16px 12px;text-align:center;font-size:11.5px;color:var(--muted)}

/* ---------- phase bars ---------- */
.barrow{display:grid;grid-template-columns:210px 1fr 78px;gap:14px;align-items:center;cursor:pointer;padding:3px 0}
.barrow:hover .bartrack{box-shadow:0 0 0 2px rgba(65,182,230,.28)}
.barlabel{min-width:0}
.barmeta{text-align:right}
.bartrack{display:flex;height:15px;border-radius:2px;overflow:hidden;background:var(--line-soft);min-width:60px}
.barseg{display:block;height:100%;border-right:1px solid rgba(255,255,255,.75)}
.barseg:last-child{border-right:0}
.barseg.open{background-image:linear-gradient(135deg,rgba(255,255,255,.28) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 75%,transparent 75%);background-size:9px 9px}
.phdot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;vertical-align:middle}
@media (max-width:760px){ .barrow{grid-template-columns:1fr 62px;gap:8px} .barrow .bartrack{grid-column:1/-1} }

/* ---------- timeline ---------- */
.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:6px;top:5px;bottom:5px;width:1px;background:var(--line)}
.tl-item{position:relative;padding-bottom:16px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-19px;top:4px;width:9px;height:9px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line);
}
.tl-item.hi::before{border-color:var(--flag-red);background:var(--flag-red)}
.tl-when{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.05em}
.tl-what{font-size:13px;margin-top:2px}
.tl-what b{font-weight:600}
.tl-note{font-size:12px;color:var(--muted);margin-top:3px;padding-left:9px;border-left:2px solid var(--line-soft)}

/* ---------- SIGNATURE: approval stamp ---------- */
.stampwrap{display:grid;place-items:center;padding:14px}
.stamp{
  border:2.5px solid var(--green);border-radius:4px;padding:12px 18px;
  color:var(--green);transform:rotate(-3.2deg);text-align:center;
  box-shadow:inset 0 0 0 1.5px var(--green);background:rgba(255,255,255,.55);
  max-width:330px;
}
.stamp.noted{border-color:var(--amber);color:var(--amber);box-shadow:inset 0 0 0 1.5px var(--amber)}
.stamp-stars{display:flex;gap:6px;justify-content:center;margin-bottom:7px}
.stamp-stars svg{width:12px;height:12px;fill:currentColor;opacity:.85}
.stamp-t1{font-family:var(--display);font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.stamp-t2{font-family:var(--display);font-size:23px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;line-height:1.05;margin:3px 0 5px}
.stamp-rule{height:1.5px;background:currentColor;opacity:.55;margin:6px 0}
.stamp-meta{font-family:var(--mono);font-size:10px;letter-spacing:.05em;line-height:1.75;text-align:left}
.stamp-meta span{display:inline-block;width:74px;opacity:.72}
.stamp-on-sheet{position:absolute;right:26px;bottom:30px;z-index:4;background:rgba(255,255,255,.9);transform:rotate(-6deg) scale(.8);transform-origin:bottom right}

/* ---------- modal ---------- */
.veil{position:fixed;inset:0;background:rgba(8,32,63,.55);z-index:100;display:grid;place-items:center;padding:22px;overflow-y:auto;overscroll-behavior:contain}
.modal{background:var(--surface);border-radius:var(--radius);width:min(620px,100%);box-shadow:0 24px 60px -12px rgba(8,32,63,.5);max-height:90vh;display:flex;flex-direction:column;margin:auto}
.modal-hd{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.modal-hd h3{font-family:var(--display);font-size:17px;letter-spacing:.05em;text-transform:uppercase;margin:0;font-weight:600}
.modal-bd{padding:20px;overflow-y:auto;overscroll-behavior:contain}
.modal-ft{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;background:#FAFCFD}
.x{margin-left:auto;background:none;border:0;cursor:pointer;font-size:19px;color:var(--muted);line-height:1;padding:2px 6px}
.x:hover{color:var(--text)}

/* ---------- letter (printable) ---------- */
.letter{font-size:13px;line-height:1.65;color:#111}
.letter h4{font-family:var(--display);font-size:17px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 3px}
.letter .lhead{border-bottom:2px solid var(--ink);padding-bottom:11px;margin-bottom:15px}
.letter .lmono{font-family:var(--mono);font-size:11.5px}
.letter ol{padding-left:19px;margin:9px 0}
.letter li{margin-bottom:9px}
.letter .lcode{font-family:var(--mono);font-size:11px;color:var(--ink-3);display:block}

/* ---------- misc ---------- */
.empty{padding:44px 20px;text-align:center;color:var(--muted)}
.empty .big{font-family:var(--display);font-size:17px;letter-spacing:.05em;text-transform:uppercase;color:var(--text)}
.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:200;
  background:var(--ink);color:#fff;padding:11px 19px;border-radius:var(--radius);
  font-size:13px;box-shadow:0 12px 30px -8px rgba(8,32,63,.6);
  display:flex;align-items:center;gap:10px;animation:pop .22s ease-out;
}
@keyframes pop{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.toast .ok{width:6px;height:6px;border-radius:50%;background:var(--flag-blue)}
.divider{height:1px;background:var(--line-soft);margin:4px 0}
.kv{display:grid;grid-template-columns:126px 1fr;gap:8px 12px;font-size:13px}
.kv dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.kv dd{margin:0}
.progress{height:4px;background:var(--line-soft);border-radius:2px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--flag-blue)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.legend b{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}

/* ---------- sign-in gate ---------- */
/* An even split, with a floor under the form: its content plus padding needs
   520px, so at the narrower two-column widths the panel yields rather than
   letting the cards be squeezed. */
.gate{display:grid;grid-template-columns:1fr minmax(520px, 56%);min-height:100vh}
.gate-art{
  /* One flat navy. No grid, no gradient, no light source — the panel is a
     field for the seal and the type to sit on, and nothing else. */
  background:#0D2B50;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:40px 44px;min-height:100vh;
}
.gate-art > *{position:relative;z-index:2}
.gate-art::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
  background:linear-gradient(90deg, var(--flag-red) 0 34%, var(--flag-blue) 34% 100%);
}
.gate-foot{flex:none;position:relative;z-index:2;margin-top:auto;padding-top:44px}
.gate-badge{filter:none}
/* Every block in the panel sits in the same centred column, so at a very
   wide viewport the content reads as composed rather than pushed into a
   corner of an empty field. */
.gate-art > *{width:min(580px,100%);margin-inline:auto}
.gate-mast{
  flex:none;position:relative;z-index:2;display:flex;align-items:center;gap:19px;
  margin-bottom:clamp(34px, 7vh, 72px);
}
.gate-badge{
  width:118px;height:auto;flex:none;display:block;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
}
.gate-org{display:flex;flex-direction:column;gap:3px;min-width:0}
.gate-org .o1{
  font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:.06em;
  white-space:nowrap;
  text-transform:uppercase;color:#fff;line-height:1;
}
.gate-org .o2{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;
  color:#8FB6D6;padding-top:6px;border-top:1px solid rgba(143,182,214,.32);
}
.gate-say{position:relative;z-index:2;margin-block:0}
.gate-stars{display:flex;gap:9px;margin-bottom:20px}
.gate-stars svg{width:19px;height:19px;fill:var(--flag-red)}
.gate-line{
  font-family:var(--display);font-size:clamp(26px,2.4vw,32px);font-weight:600;line-height:1.2;
  letter-spacing:.005em;color:#fff;margin:0;
}
.gate-line em{font-style:normal;font-weight:400;color:#8FB6D6}
.gate-lede{
  margin:16px 0 0;max-width:34em;font-size:14px;line-height:1.75;color:#A9C2DA;
}
.gate-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8FB6D6;margin-bottom:12px}
.gate-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:36em}
.gate-list li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.6;color:#C9D8E8}
.gate-list li b{color:#fff;font-weight:600}
.gate-list li::before{content:'';position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:#41B6E6}
/* a hairline under the mast, tying the block to the field */
.gate-say .gate-line{position:relative}
.gate-meta{
  display:flex;flex-wrap:wrap;gap:6px 20px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.16);
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#93AEC9;
}
.gate-form{display:flex;align-items:center;justify-content:center;padding:18px 30px;background:var(--paper);overflow:auto}
.gate-inner{width:min(560px,100%)}
.gate-inner.stack{gap:11px}
.gate-inner .card .card-bd.stack{gap:9px;padding:12px 14px}
.gate-inner .field label{margin-bottom:3px}
.gate-h{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:.02em;margin:4px 0 0}
.gate-inner .sub{font-size:12.5px;margin-top:4px !important}
.acct{
  display:flex;gap:11px;align-items:center;width:100%;text-align:left;cursor:pointer;
  padding:8px 11px 8px 9px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  transition:border-color .12s ease, background .12s ease;
}
.acct + .acct{margin-top:6px}
.acct:hover{border-color:#A9BDD4;background:#F8FBFD}
.acct.on{border-color:var(--ink-3);background:var(--blue-bg);box-shadow:0 0 0 3px rgba(65,182,230,.16)}
.acct .seal{
  width:34px;height:34px;flex:none;border-radius:3px;display:grid;place-items:center;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.03em;color:#fff;background:var(--ink-3);
}
.acct.contractor .seal{background:var(--flag-red)}
.acct .body{flex:1;min-width:0}
/* these were inline, so name, role and credentials ran together as prose */
.acct .t{display:inline;font-size:13.5px;font-weight:600;line-height:1.25}
.acct .d{display:inline;font-size:11.5px;color:var(--ink-3);margin-left:7px;line-height:1.35}
.acct .b{display:none;font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.45}
.acct.on .b{display:block}
.acct .c{
  display:block;font-family:var(--mono);font-size:10px;color:var(--muted);
  margin-top:3px;
}
.acct .c b{font-weight:500;color:var(--ink-3)}
.acct .tick{
  flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:transparent;font-size:10px;line-height:1;margin-top:2px;
}
.acct.on .tick{background:var(--ink-3);border-color:var(--ink-3);color:#fff}
.gate-note{
  font-family:var(--mono);font-size:10px;line-height:1.6;color:var(--muted);
  border-top:1px solid var(--line);padding-top:9px;margin-top:4px;
}
.gate-err{
  background:var(--red-bg);border-left:3px solid var(--flag-red);padding:9px 12px;
  border-radius:0 2px 2px 0;font-size:12.5px;color:#8E1024;
}

/* the panel is narrower now, so the full-size wordmark runs out of column
   sooner — step it down before it overflows rather than after */
@media (max-width:1460px){
  .gate-badge{width:82px}
  .gate-org .o1{font-size:17px}
}
@media (max-width:1100px){
  .gate{grid-template-columns:1fr 1fr}
  .gate-art{padding:28px 30px;gap:18px}
  .gate-badge{width:82px}
  .gate-org .o1{font-size:17px}
  .gate-lede{font-size:13px}
}
@media (max-width:860px){
  .gate{grid-template-columns:1fr}
  .gate-art{min-height:300px;padding:22px 20px;gap:16px}
  .gate-mast{margin-bottom:0}
  .gate-foot{padding-top:0}
  .gate-badge{width:64px}
  .gate-say{max-width:none}
  .gate-stars{margin-bottom:14px;gap:7px}
  .gate-stars svg{width:16px;height:16px}
  .gate-lede{display:none}
  .gate-meta{display:none}
  .gate-form{padding:26px 18px}
}

@media (max-width:1180px){
  .split{grid-template-columns:1fr}
  .pipe{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pipe-stage::after{display:none}
}
/* =========================================================================
   PHONES
   The top bar was the one thing that could not shrink: a page title, the
   bell, a role switch and a name-and-title block will not fit across 390px,
   and being sticky it pushed every view sideways. Below a phone width it
   keeps only what cannot be got elsewhere — the title is already the first
   thing in the page body, and the signed-in name is on the account page.
   ========================================================================= */
@media (max-width:640px){
  .card-hd{flex-wrap:wrap;row-gap:4px}
  /* a header's right-hand cluster is often two or three buttons; on a narrow
     screen they need to wrap rather than run past the card */
  .card-hd .right{margin-left:0;width:100%;text-align:left;
    display:flex;flex-wrap:wrap;gap:6px;min-width:0}
  .split,.cols,.cols3{grid-template-columns:minmax(0,1fr)}
  .split > *,.cols > *,.cols3 > *,.stack > *{min-width:0}
  /* the funnel's fixed label column and percentage column leave the bar
     nothing to occupy on a narrow screen */
  .fstep{flex-wrap:wrap;row-gap:4px}
  .fstep .fn{width:auto;flex:1 1 auto}
  .fstep .fpc{width:auto;text-align:left}
  .fstep .ftrack{flex:1 0 100%;order:3}
  .top{gap:10px;padding:9px 14px}
  .top h1{font-size:15px;letter-spacing:.03em}
  /* the file number and stage are the first thing in the page below */
  .top .crumb{display:none}
  .top-right{gap:8px}
  .who{padding-left:9px;gap:0}
  .who-name,.who-role{display:none}
  /* the org label repeats what the rail already says, and every view opens
     with its own title two lines below — in the bar it only truncates */
  .top > .top-right > .tag{display:none}
  .top h1{display:none}
  .top{justify-content:flex-end}
  .top [data-nav]{margin-right:auto}
  /* anchored to the bell, the panel hung off the left edge of the screen */
  .notif{
    position:fixed;top:calc(var(--topbar,58px) + 2px);left:8px;right:8px;
    width:auto;max-width:none;border-radius:var(--radius);
  }
  .notif-bd{max-height:70vh}
  .roleswitch button{padding:6px 9px;font-size:11px}
  /* a person's chips will not sit beside their name on a phone */
  .perrow{flex-wrap:wrap}
  .perrow > *{min-width:0}
  /* a finger is not a cursor: nothing tappable under 40px */
  /* the rail is a horizontal strip here; the brand does not need three lines */
  .brand{padding:10px 12px}
  .brand-city{font-size:15px}
  .brand-unit{display:none}
  .btn{padding:9px 14px;min-height:40px}
  .btn-sm{padding:8px 12px;min-height:38px}
  .inp,.sel{padding:11px 12px;min-height:44px}
  .nav-item{padding:10px 12px;min-height:40px}
  .acct{padding:14px}
  .tab{padding:12px 13px}
  .fchip,.syschip{padding:9px 13px;min-height:40px}
  .sl{min-height:40px;padding:7px 9px}
  .dayc{min-height:44px}
  .kpi{padding:12px 13px}
  /* wide tables scroll on their own; say so rather than clipping silently */
  .tbl-wrap{-webkit-overflow-scrolling:touch}
  .tbl th,.tbl td{padding:10px 11px}
  .tbl-compact th,.tbl-compact td{padding:8px 9px}
  /* squeezed into 390px a project name breaks over six lines; better to keep
     every cell on one line and let the table itself scroll sideways */
  .tbl th,.tbl td{white-space:nowrap}
  .tbl .pname,.tbl .paddr{white-space:nowrap}
  /* four KPIs across a phone leaves each one too narrow to read */
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pipe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pipe-stage{padding:12px 13px}
}
@media (max-width:900px){
  .top .crumb{display:none}
  .top > .top-right > .tag{display:none}
  .who-role{display:none}
  .top h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;height:auto;flex-direction:row;align-items:center;overflow-x:auto;min-width:0}
  .nav{min-width:0}
  .brand{border-bottom:0;border-right:1px solid rgba(255,255,255,.09);padding:12px 14px;flex:none}
  .brand-stars{display:none}
  .nav{display:flex;padding:8px;gap:5px;flex:1}
  .nav-label,.rail-foot{display:none}
  .nav-item{white-space:nowrap;width:auto}
  .nav-item.is-action{margin:0}
  .page{padding:16px 14px 60px}
  .top{padding:10px 14px}
  .grid-2,.grid-3,.checks{grid-template-columns:1fr}
  .pipe{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media print{
  .rail,.top,.no-print{display:none!important}
  .veil{position:static;background:none;padding:0;display:block}
  .modal{box-shadow:none;max-height:none;width:100%}
  .modal-hd,.modal-ft{display:none}
  body{background:#fff}
}
/* Not the prototype’s: shows the page the <head> hid until now. */
body{visibility:visible}