:root{
  --navy:#1c257c; --red:#c71529;
  --bg:#e9ecf1; --panel:#fff; --panel-2:#f7f8fa;
  --line:#d5dae3; --line-2:#e6eaf0;
  --ink:#1b2331; --ink-2:#5b6575; --ink-3:#8791a1;
  --link:#1c47c9;
  --ok:#0f7b45; --ok-bg:#e6f4ec;
  --warn:#8a5a00; --warn-bg:#fdf2dd;
  --bad:#a4142a; --bad-bg:#fbe9ec;
  --pur:#5b3fa8; --pur-bg:#efeafb;
  --sel:#dfe7fb; --sel-line:#9cb4f0;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;
  --row:29px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:12.5px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.app{display:flex;flex-direction:column;height:100vh}

/* topbar */
.topbar{height:42px;flex:0 0 42px;background:var(--navy);color:#fff;display:flex;align-items:center;
  gap:12px;padding:0 10px 0 12px;border-bottom:2px solid var(--red)}
.menu{display:flex;gap:2px}
.menu button{background:none;border:0;color:#ccd4ee;padding:5px 8px;border-radius:3px;font-size:12px}
.menu button:hover{background:#243370;color:#fff}
.entsel{display:flex;align-items:center;gap:6px;background:#0e1946;border:1px solid #2c3a7d;
  border-radius:3px;height:26px;padding:0 8px;font-size:11.5px;color:#c3ccec}
.entsel select{background:none;border:0;color:#fff;outline:none;font-size:11.5px}
.entsel select option{color:#000}
.gsearch{margin-left:auto;display:flex;align-items:center;gap:6px;background:#0e1946;border:1px solid #2c3a7d;
  border-radius:3px;padding:0 8px;height:26px;width:290px;color:#8f9cd0}
.gsearch input{background:none;border:0;outline:none;color:#fff;width:100%;font-size:12px}
.gsearch input::placeholder{color:#7b88be}
.kbd{font:11px/1 var(--mono);border:1px solid #3b4a8f;background:#1a2764;color:#a8b4e0;padding:3px 5px;border-radius:3px}
.tb-btn{background:var(--red);border:1px solid #a50d26;color:#fff;height:26px;padding:0 10px;border-radius:3px;font-weight:600;font-size:11.5px;white-space:nowrap}
.tb-btn.ghost{background:#243370;border-color:#3b4a8f}
.who{display:flex;align-items:center;gap:7px;padding-left:10px;border-left:1px solid #2c3a7d;height:26px}
.avatar{width:22px;height:22px;border-radius:50%;background:#3b4a8f;display:grid;place-items:center;font-size:10px;font-weight:700}
.who b{font-size:11.5px;font-weight:600}
.who span{font-size:10px;color:#a9b4dd;display:block;line-height:1.1}

/* metrics */
.metrics{height:30px;flex:0 0 30px;background:var(--panel);border-bottom:1px solid var(--line);display:flex}
.metric{display:flex;align-items:center;gap:6px;padding:0 12px;border:0;border-right:1px solid var(--line-2);
  font-size:11.5px;color:var(--ink-2);white-space:nowrap;background:none}
.metric:hover{background:var(--panel-2)}
.metric b{font:600 13px/1 var(--mono);color:var(--ink)}
.metric .dot{width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.metric.alert{background:var(--bad-bg)} .metric.alert b{color:var(--bad)} .metric.alert .dot{background:var(--bad)}
.metric.due b{color:var(--warn)} .metric.due .dot{background:#d9a125}
.metric.ok .dot{background:var(--ok)}
.metric.pur .dot{background:var(--pur)}
.metrics .spacer{flex:1;border-right:0}
.metrics .stamp{display:flex;align-items:center;padding:0 12px;font-size:11px;color:var(--ink-3);gap:14px}
.metrics .stamp b{font:600 12px/1 var(--mono);color:var(--ink)}
.pill-live{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--ok);
  background:var(--ok-bg);border:1px solid #c3e3d1;border-radius:10px;padding:2px 8px}
.pill-live i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:block}

.body{flex:1;display:flex;min-height:0}

/* rail */
.rail{width:224px;flex:0 0 224px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;overflow:auto}
.rail .grp{padding:9px 10px 3px;font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.rail a{display:flex;align-items:center;gap:8px;height:26px;padding:0 10px;color:var(--ink);text-decoration:none;
  font-size:12.5px;border-left:2px solid transparent}
.rail a:hover{background:var(--panel-2)}
.rail a.on{background:var(--sel);border-left-color:var(--navy);font-weight:600}
.rail a .ic{width:15px;text-align:center;color:var(--ink-2);font-size:12px}
.rail a.on .ic{color:var(--navy)}
.rail a .ct{margin-left:auto;font:11px/1 var(--mono);color:var(--ink-2);background:var(--line-2);padding:2px 5px;border-radius:8px}
.rail a .ct.hot{background:var(--bad-bg);color:var(--bad);font-weight:700}
.rail a .ct.pur{background:var(--pur-bg);color:var(--pur);font-weight:700}
.rail .foot{margin-top:auto;border-top:1px solid var(--line-2);padding:8px 10px;font-size:11px;color:var(--ink-3)}
.rail .foot b{display:block;color:var(--ink-2);font-weight:600;margin-bottom:3px}
.syncrow{display:flex;justify-content:space-between;padding:1px 0}
.syncrow .g{color:var(--ok);font-weight:600}

/* list */
.list{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line)}
.listbar{height:31px;flex:0 0 31px;display:flex;align-items:center;gap:2px;padding:0 8px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.seg{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#fff}
.seg button{background:#fff;border:0;border-right:1px solid var(--line-2);height:23px;padding:0 9px;font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button .n{font:11px/1 var(--mono);color:var(--ink-3);margin-left:5px}
.seg button.on{background:var(--navy);color:#fff;font-weight:600}
.seg button.on .n{color:#c3ccec}
.seg button.alert.on{background:var(--bad)}
.lb-sep{width:1px;height:18px;background:var(--line);margin:0 7px}
.mini{height:23px;border:1px solid var(--line);background:#fff;border-radius:3px;padding:0 8px;font-size:11.5px;
  color:var(--ink-2);white-space:nowrap;flex:0 0 auto}
.mini.on{background:var(--sel);border-color:var(--sel-line);color:var(--navy);font-weight:600}
.lsearch{display:flex;align-items:center;gap:5px;height:23px;border:1px solid var(--line);border-radius:3px;background:#fff;
  padding:0 7px;width:190px;margin-left:auto;color:var(--ink-3)}
.lsearch input{border:0;outline:none;width:100%;font-size:11.5px}

.gridwrap{flex:1;overflow:auto;min-height:0}
table.grid{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
table.grid thead th{position:sticky;top:0;z-index:2;background:var(--panel-2);text-align:left;font-size:10px;
  letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:0 8px;height:25px;
  border-bottom:1px solid var(--line);white-space:nowrap;user-select:none}
table.grid thead th.sortable:hover{color:var(--ink);cursor:pointer;background:#eef1f6}
table.grid tbody td{padding:0 8px;height:var(--row);border-bottom:1px solid var(--line-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
tbody tr:nth-child(even) td{background:#fbfcfd}
tbody tr:hover td{background:#f0f4fd}
tbody tr.sel td{background:var(--sel)!important}
tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--navy)}
.qid{font:11.5px/1 var(--mono);color:var(--link);font-weight:600}
.sub{font-size:10.5px;color:var(--ink-3)}
.cust{font-weight:600}
.num{font-family:var(--mono);text-align:right}
.mn{font-family:var(--mono);font-size:11px}
.chip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  padding:2px 6px;border-radius:2px;border:1px solid transparent;line-height:1.25}
.c-grey{background:#eceff4;color:#5b6575;border-color:#dde2ea}
.c-blue{background:#e4ecfd;color:#20449e;border-color:#c8d8fa}
.c-amber{background:var(--warn-bg);color:var(--warn);border-color:#f0dcae}
.c-green{background:var(--ok-bg);color:var(--ok);border-color:#c3e3d1}
.c-red{background:var(--bad-bg);color:var(--bad);border-color:#f2c9d1}
.c-pur{background:var(--pur-bg);color:var(--pur);border-color:#d9cff3}
.age{font:11px/1 var(--mono);color:var(--ink-3)}
.age.w{color:var(--warn);font-weight:700}
.age.b{color:var(--bad);font-weight:700}
.own{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#dfe4ee;color:#414c5f;font-size:9.5px;font-weight:700}
.ent{font-size:10px;font-weight:700;letter-spacing:.3px;padding:2px 5px;border-radius:2px}
.ent{white-space:nowrap}
.ent.uk{background:#eef0fa;color:#31408c;border:1px solid #d5dbf2}
.ent.us{background:#fdeef1;color:#93223a;border:1px solid #f4d3da}
.psync{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--ok);font-weight:600}
.psync i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:block}
.psync.off{color:var(--ink-3);font-weight:500}.psync.off i{background:var(--ink-3)}
.psync.q{color:var(--warn)}.psync.q i{background:#d9a125}
.act{font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
.act b{color:var(--ink);font-weight:600}
.rowbtn{border:1px solid var(--line);background:#fff;height:20px;padding:0 7px;border-radius:3px;font-size:11px;color:var(--ink-2);visibility:hidden}
tr:hover .rowbtn,tr.sel .rowbtn{visibility:visible}
.rowbtn.prim{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}

/* detail */
.detail{width:500px;flex:0 0 500px;display:flex;flex-direction:column;background:var(--panel);min-height:0}
.dhead{padding:8px 12px 0;border-bottom:1px solid var(--line);background:var(--panel-2)}
.dtitle{display:flex;align-items:center;gap:8px}
.dtitle h2{margin:0;font-size:14px;font-weight:700}
.dtitle .qn{font:12px/1 var(--mono);color:var(--ink-2)}
.dtitle .sp{margin-left:auto;display:flex;gap:5px}
.dbtn{border:1px solid var(--line);background:#fff;height:23px;padding:0 9px;border-radius:3px;font-size:11.5px;white-space:nowrap}
.dbtn.prim{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.dmeta{display:flex;gap:11px;font-size:11.5px;color:var(--ink-2);margin:5px 0 8px;flex-wrap:wrap}
.dmeta b{color:var(--ink);font-weight:600}
.stepper{display:flex;margin:0 0 8px;overflow:hidden;border:1px solid var(--line);border-radius:3px;background:#fff}
.step{flex:1;min-width:0;padding:4px 4px 4px 7px;font-size:10px;color:var(--ink-3);background:#fff;
  border-right:1px solid var(--line-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step.done{background:#f2f7f4;color:var(--ok)}
.step.now{background:var(--navy);color:#fff;font-weight:700}
.step .i{font:10px/1 var(--mono);opacity:.75;margin-right:3px}
.dtabs{display:flex;padding:0 4px}
.dtabs button{background:none;border:0;border-bottom:2px solid transparent;padding:6px 9px 5px;font-size:12px;color:var(--ink-2)}
.dtabs button.on{border-bottom-color:var(--red);color:var(--navy);font-weight:700}
.dtabs .n{font:10px/1 var(--mono);color:#fff;background:var(--ink-3);border-radius:8px;padding:2px 4px;margin-left:5px}
.dtabs .n.pur{background:var(--pur)}
.dbody{flex:1;overflow:auto;min-height:0;padding:10px 12px 16px}
.dfoot{flex:0 0 auto;border-top:1px solid var(--line);background:var(--panel-2);padding:5px 12px;
  display:flex;align-items:center;gap:12px;font-size:10.5px;color:var(--ink-2)}
.dfoot b{font-weight:600;color:var(--ink)}
.sec{margin-bottom:14px}
.sech{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.7px;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-bottom:5px;padding-bottom:3px;border-bottom:1px solid var(--line-2)}
.sech .a{margin-left:auto;font-size:11px;letter-spacing:0;text-transform:none;color:var(--link);font-weight:500;cursor:pointer}
.kv{display:grid;grid-template-columns:110px 1fr;gap:2px 10px;font-size:12px}
.kv dt{color:var(--ink-3);font-size:11.5px}
.kv dd{margin:0;font-weight:500}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{border:1px solid var(--line);border-radius:3px;padding:7px 9px;background:#fff}
.card h4{margin:0 0 3px;font-size:11.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.card .apt{margin-left:auto;font:10px/1 var(--mono);background:var(--navy);color:#fff;padding:3px 5px;border-radius:2px}
.card p{margin:0;font-size:11.5px;color:var(--ink-2);line-height:1.45}
table.mini-t{width:100%;border-collapse:collapse;font-size:11.5px}
table.mini-t th{text-align:left;font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--line);padding:3px 6px;font-weight:700}
table.mini-t td{padding:3px 6px;border-bottom:1px solid var(--line-2)}
table.mini-t td.n{font-family:var(--mono);text-align:right}
table.mini-t tr.tot td{font-weight:700;border-top:1px solid var(--line);border-bottom:0;background:var(--panel-2)}
table.mini-t input{width:100%;border:1px solid transparent;background:transparent;padding:2px 4px;border-radius:2px;font-size:11.5px}
table.mini-t input:hover{border-color:var(--line-2)}
table.mini-t input:focus{border-color:var(--sel-line);background:#fff;outline:2px solid #e3ebff}
table.mini-t input.n{font-family:var(--mono);text-align:right}
.margin{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-left:3px solid var(--ok);
  border-radius:3px;padding:6px 10px;background:var(--panel-2)}
.margin div{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.margin b{display:block;font:600 14px/1.2 var(--mono);color:var(--ink);letter-spacing:0}
.margin b.g{color:var(--ok)}
.margin .r{margin-left:auto;text-align:right}

/* milestone timeline */
.ms{list-style:none;margin:0;padding:0}
.ms li{display:grid;grid-template-columns:15px 92px 1fr auto;gap:8px;align-items:start;padding:5px 0;
  border-bottom:1px solid var(--line-2);font-size:11.5px}
.ms .bul{width:9px;height:9px;border-radius:50%;background:var(--ok);margin-top:4px}
.ms li.pend .bul{background:#fff;border:1.5px solid var(--line);}
.ms li.pend{color:var(--ink-3)}
.ms li.now .bul{background:var(--navy);box-shadow:0 0 0 3px #dfe7fb}
.ms time{font:10.5px/1.5 var(--mono);color:var(--ink-3)}
.ms b{font-weight:600}
.ms .who2{font-size:10.5px;color:var(--ink-3)}
.tagp{font-size:9.5px;font-weight:700;letter-spacing:.3px;color:var(--pur);background:var(--pur-bg);
  border:1px solid #d9cff3;border-radius:2px;padding:1px 4px;white-space:nowrap}
.tagp.no{color:var(--ink-3);background:#f1f3f7;border-color:var(--line-2)}

/* customer view frame */
.cvframe{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff}
.cvbar{background:#0f1c4d;color:#fff;padding:6px 9px;font-size:11px;display:flex;align-items:center;gap:7px}
.cvbar b{font-size:11.5px}
.cvbar .u{margin-left:auto;font-size:10px;color:#a9b4dd}
.cvbody{padding:9px}
.cvcard{border:1px solid var(--line-2);border-radius:3px;padding:8px;margin-bottom:7px}
.cvcard .t{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.cvcard .t b{font-size:12px}
.cvtrack{display:flex;align-items:center;gap:0;margin:8px 0 4px}
.cvtrack div{flex:1;height:3px;background:var(--line-2);position:relative}
.cvtrack div.on{background:var(--ok)}
.cvlabels{display:flex;font-size:9px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.3px}
.cvlabels span{flex:1}
.cvlabels span.on{color:var(--ok);font-weight:700}
.hid{font-size:10.5px;color:var(--ink-3);border-top:1px dashed var(--line);margin-top:7px;padding-top:6px}
.hid b{color:var(--bad);font-weight:600}

.statusbar{height:23px;flex:0 0 23px;background:var(--panel);border-top:1px solid var(--line);display:flex;
  align-items:center;gap:14px;padding:0 10px;font-size:11px;color:var(--ink-2)}
.statusbar .k{font:10.5px/1 var(--mono);border:1px solid var(--line);background:var(--panel-2);padding:2px 4px;border-radius:2px}
.statusbar .r{margin-left:auto;display:flex;align-items:center;gap:14px}
.statusbar button{border:0;background:none;color:var(--link);font-size:11px;padding:0}

.notes{position:fixed;right:0;top:0;bottom:0;width:430px;background:#fff;border-left:1px solid var(--line);
  box-shadow:-6px 0 20px rgba(20,34,94,.12);transform:translateX(100%);transition:transform .18s;z-index:50;
  display:flex;flex-direction:column}
.notes.open{transform:none}
.notes header{height:36px;background:var(--navy);color:#fff;display:flex;align-items:center;padding:0 10px;font-weight:700;font-size:12.5px}
.notes header button{margin-left:auto;background:none;border:0;color:#c3ccec;font-size:15px}
.notes .inner{overflow:auto;padding:12px 14px 30px;font-size:12px;line-height:1.5}
.notes h5{margin:15px 0 5px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--red)}
.notes h5:first-child{margin-top:0}
.notes ol,.notes ul{margin:0;padding-left:17px}
.notes li{margin-bottom:7px;color:var(--ink-2)}
.notes li b{color:var(--ink)}
.flow{font:11px/1.7 var(--mono);background:var(--panel-2);border:1px solid var(--line);border-radius:3px;padding:9px;white-space:pre;overflow:auto;color:var(--ink-2)}

/* ====== additions for the PHP app ====== */
.menu a{background:none;border:0;color:#ccd4ee;padding:5px 8px;border-radius:3px;font-size:12px;text-decoration:none}
.menu a:hover{background:#243370;color:#fff}
.gsearch{border:1px solid #2c3a7d}
a.tb-btn{display:inline-flex;align-items:center;text-decoration:none}
.who .lo{color:#8f9cd0;font-size:10px;text-decoration:none;margin-left:6px}
.who .lo:hover{color:#fff}
.metric{cursor:default}
.metric b.r{color:var(--bad)}
.pill-off{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--warn);
  background:var(--warn-bg);border:1px solid #f0dcae;border-radius:10px;padding:2px 8px}
.pill-off i{width:6px;height:6px;border-radius:50%;background:#d9a125;display:block}
.rail .foot .am{color:var(--warn);font-weight:600}
.rail .foot .r{color:var(--bad);font-weight:700}
.statusbar a{color:var(--link);text-decoration:none;font-size:11px}

/* single-column page (accounts, partners, sync log) */
.page{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--panel);overflow:hidden}
.pagehead{padding:9px 14px;border-bottom:1px solid var(--line);background:var(--panel-2);display:flex;align-items:center;gap:10px}
.pagehead h1{margin:0;font-size:15px;font-weight:700}
.pagehead p{margin:0;font-size:11.5px;color:var(--ink-3)}
.pagehead .sp{margin-left:auto;display:flex;gap:6px}
.pagebody{flex:1;overflow:auto;padding:12px 14px 24px}
.pagebody.narrow{max-width:1000px}

/* forms */
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px 12px;margin-bottom:10px}
label.f{display:block;font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:3px}
input.t,select.t,textarea.t{width:100%;border:1px solid var(--line);border-radius:3px;padding:4px 7px;
  font-size:12.5px;background:#fff;outline:none}
input.t:focus,select.t:focus,textarea.t:focus{border-color:var(--sel-line);outline:2px solid #e3ebff}
textarea.t{min-height:56px;resize:vertical;font-family:inherit}
.btn{border:1px solid var(--line);background:#fff;height:26px;padding:0 11px;border-radius:3px;font-size:12px;
  text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:5px}
.btn:hover{background:var(--panel-2)}
.btn.prim{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.btn.red{background:var(--red);border-color:#a50d26;color:#fff;font-weight:600}
.btn.sm{height:22px;padding:0 8px;font-size:11.5px}
.flash{margin:0;padding:6px 14px;background:var(--ok-bg);border-bottom:1px solid #c3e3d1;color:var(--ok);
  font-size:11.5px;font-weight:600}
.warnbar{margin:0;padding:6px 14px;background:var(--warn-bg);border-bottom:1px solid #f0dcae;color:var(--warn);font-size:11.5px}

/* ============================ sign in ============================ */
body.login{margin:0;background:#0d1447;min-height:100vh;overflow-x:hidden}

.signin-shell{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);
  min-height:100vh;
}

/* ---------- command panel ---------- */
.cmd{
  position:relative;overflow:hidden;color:#fff;display:flex;align-items:center;
  background:
    radial-gradient(900px 620px at 22% 18%, #33409f 0%, rgba(51,64,159,0) 60%),
    linear-gradient(150deg,#1c257c 0%,#151d64 48%,#0b1140 100%);
}
.cmd::after{           /* faint lattice */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.6) 0 1px, transparent 1px 86px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.4) 0 1px, transparent 1px 86px);
  mask-image:radial-gradient(900px 700px at 30% 45%,#000 0%,transparent 80%);
  -webkit-mask-image:radial-gradient(900px 700px at 30% 45%,#000 0%,transparent 80%);
}
.cmd-inner{position:relative;z-index:1;width:100%;padding:56px 60px}

.cmd-globe{position:absolute;right:-40px;top:50%;transform:translateY(-58%);
  width:500px;max-width:46vw;opacity:.85;pointer-events:none;z-index:0;
  mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 92%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 92%)}
.globe{width:100%;height:auto;display:block}
.globe .limb{fill:none;stroke:rgba(255,255,255,.30);stroke-width:1.1}
.globe .grid ellipse,.globe .grid line{fill:none;stroke:rgba(255,255,255,.16);stroke-width:.9}
.globe .route{
  fill:none;stroke:url(#gArc);stroke-width:1.9;stroke-linecap:round;
  stroke-dasharray:170;stroke-dashoffset:170;
  animation:flow 5.6s cubic-bezier(.55,.1,.35,1) infinite;
}
.globe .r0{animation-delay:0s}     .globe .r1{animation-delay:.7s}
.globe .r2{animation-delay:1.4s}   .globe .r3{animation-delay:2.1s}
.globe .r4{animation-delay:2.8s}   .globe .r5{animation-delay:3.5s}
.globe .r6{animation-delay:4.2s}   .globe .r7{animation-delay:4.9s}
@keyframes flow{
  0%{stroke-dashoffset:170;opacity:0}
  12%{opacity:1}
  60%{stroke-dashoffset:0;opacity:1}
  85%{opacity:0}
  100%{stroke-dashoffset:0;opacity:0}
}
.globe .pulse{fill:#fff}
.globe .halo{fill:none;stroke:#ff8a9b;stroke-width:1.4;transform-origin:center;
  animation:halo 3.4s ease-out infinite}
.globe .h1{animation-delay:.5s} .globe .h2{animation-delay:1s} .globe .h3{animation-delay:1.5s}
.globe .h4{animation-delay:2s}  .globe .h5{animation-delay:2.5s} .globe .h6{animation-delay:3s}
.globe .h7{animation-delay:3.4s}
@keyframes halo{0%{r:3.2;opacity:.9}70%{r:13;opacity:0}100%{r:13;opacity:0}}

.cmd-copy{position:relative;z-index:1;max-width:520px}
.cmd-copy .eyebrow{
  font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.55);
  margin-bottom:18px
}
.cmd-copy h1{
  margin:0;font-size:60px;line-height:.98;font-weight:800;letter-spacing:-1.6px;
  background:linear-gradient(96deg,#fff 20%,#ffc3cc 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cmd-copy .tag{
  margin:12px 0 0;font-size:12.5px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;
  color:#ff8a9b
}
.cmd-copy .blurb{
  margin:20px 0 0;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.74);max-width:430px
}
.offices{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap}
.offices div{border-left:2px solid rgba(255,255,255,.22);padding-left:12px}
.offices b{display:block;font-size:12.5px;font-weight:700;color:#fff}
.offices span{font-size:11px;color:rgba(255,255,255,.5)}

.lanes{position:absolute;left:0;right:0;bottom:0;overflow:hidden;z-index:2;
  border-top:1px solid rgba(255,255,255,.12);padding:12px 0;
  background:linear-gradient(180deg,rgba(11,17,64,0) 0%,rgba(11,17,64,.72) 34%,rgba(11,17,64,.92) 100%);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lanes-track{display:flex;gap:30px;width:max-content;animation:slide 34s linear infinite}
.lanes-track span{
  font:600 11px/1 var(--mono);letter-spacing:2px;color:rgba(255,255,255,.34)
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- auth panel ---------- */
.auth{background:#fff;display:flex;align-items:center;justify-content:center;padding:40px 30px}
.authbox{width:100%;max-width:344px}
.authbrand{margin-bottom:34px}
.authbrand .brandmark{gap:6px}
.authbrand .brandmark img{height:32px}
.authbrand .brandmark .lockup b{font-size:11.5px;letter-spacing:1px}
.authbrand .brandmark .lockup small{font-size:9.5px}

.authbox h2{margin:0 0 3px;font-size:24px;font-weight:800;letter-spacing:-.5px;color:var(--ink)}
.authbox .sub{margin:0 0 26px;font-size:13px;color:var(--ink-3)}

.field{margin-bottom:16px}
.field label{display:block;font-size:11.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field input{
  width:100%;height:42px;border:1px solid var(--line);border-radius:5px;padding:0 13px;
  font-size:14px;background:#fbfcfe;outline:none;
  transition:border-color .13s,box-shadow .13s,background .13s
}
.field input:hover{border-color:#c2cad8}
.field input:focus{border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(28,37,124,.14)}

.signin{
  width:100%;height:44px;border:0;border-radius:5px;color:#fff;font-size:14px;font-weight:700;
  letter-spacing:.3px;margin-top:6px;background:linear-gradient(180deg,#232e94 0%,#1c257c 100%);
  box-shadow:0 2px 0 #141b5c;transition:transform .1s,box-shadow .15s,filter .15s
}
.signin:hover{filter:brightness(1.08);box-shadow:0 6px 18px rgba(28,37,124,.34),0 2px 0 #141b5c}
.signin:active{transform:translateY(1px);box-shadow:0 1px 0 #141b5c}

.err{
  display:flex;gap:9px;align-items:flex-start;background:var(--bad-bg);border:1px solid #f2c9d1;
  color:var(--bad);font-size:12.5px;padding:10px 12px;border-radius:5px;margin-bottom:20px;line-height:1.4
}
.err .x{
  flex:0 0 17px;height:17px;border-radius:50%;background:var(--bad);color:#fff;font-size:11px;
  font-weight:800;display:grid;place-items:center;margin-top:1px
}
.authfoot{margin:24px 0 0;font-size:11px;color:var(--ink-3);line-height:1.5}

@media (max-width:1080px){
  .signin-shell{grid-template-columns:1fr}
  .cmd{min-height:340px}
  .cmd-inner{padding:38px 34px 46px}
  .cmd-copy h1{font-size:44px}
  .cmd-globe{right:-140px;width:420px;opacity:.5}
  .auth{padding:44px 24px 60px}
}
@media (prefers-reduced-motion:reduce){
  .globe .route,.globe .halo,.lanes-track{animation:none}
  .globe .route{stroke-dashoffset:0;opacity:.85}
}

tbody tr.clickable{cursor:pointer}
tbody td .muted{color:var(--ink-3)}
.right{text-align:right}
.tools{display:flex;gap:6px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.mapstat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:2px 6px;border-radius:2px}
.ms-confirmed{background:var(--ok-bg);color:var(--ok);border:1px solid #c3e3d1}
.ms-suggested{background:var(--warn-bg);color:var(--warn);border:1px solid #f0dcae}
.ms-unmapped{background:#f1f3f7;color:var(--ink-3);border:1px solid var(--line-2)}

/* segmented control rendered as links */
.seg a.segbtn{background:#fff;border:0;border-right:1px solid var(--line-2);height:23px;padding:0 9px;
  font-size:11.5px;color:var(--ink-2);white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center}
.seg a.segbtn:last-child{border-right:0}
.seg a.segbtn .n{font:11px/1 var(--mono);color:var(--ink-3);margin-left:5px}
.seg a.segbtn.on{background:var(--navy);color:#fff;font-weight:600}
.seg a.segbtn.on .n{color:#c3ccec}
.seg a.segbtn.alert.on{background:var(--bad)}
a.mini{display:inline-flex;align-items:center;text-decoration:none}
.qid{text-decoration:none}
.empty{padding:26px 10px;text-align:center;color:var(--ink-3);font-size:12px}

/* detail tabs as links */
.dtabs a.dtab{background:none;border:0;border-bottom:2px solid transparent;padding:6px 10px 5px;font-size:12px;
  color:var(--ink-2);text-decoration:none;display:inline-block}
.dtabs a.dtab:hover{color:var(--ink)}
.dtabs a.dtab.on{border-bottom-color:var(--red);color:var(--navy);font-weight:700}
.pagehead .qn{font:12.5px/1 var(--mono);color:var(--ink-2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.grid2>div{min-width:0}
@media(max-width:1100px){.grid2{grid-template-columns:1fr}}
.panel{border:1px solid var(--line);border-radius:3px;background:#fff;margin-bottom:14px}
.panel>h3{margin:0;padding:6px 10px;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;border-bottom:1px solid var(--line-2);background:var(--panel-2);display:flex;align-items:center;gap:8px}
.panel>h3 .a{margin-left:auto;font-size:11px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--link);text-decoration:none}
.panel .pin{padding:9px 10px}
table.data{width:100%;border-collapse:collapse;font-size:12px}
table.data th{text-align:left;font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--line);padding:4px 8px;font-weight:700;background:var(--panel-2)}
table.data td{padding:4px 8px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.data tr.tot td{font-weight:700;background:var(--panel-2);border-top:1px solid var(--line)}
table.data td.n,table.data th.n{font-family:var(--mono);text-align:right}
table.data input.t,table.data select.t{padding:2px 5px;font-size:12px}

/* ====== brand lockup — logo is navy-on-white, never recoloured ====== */
.topbar{padding-left:0}
.brandwrap{
  width:224px;flex:0 0 224px;height:42px;background:#fff;border-right:1px solid var(--line);
  display:flex;align-items:center;padding:0 12px;margin-right:12px
}
.brandmark{display:flex;flex-direction:column;justify-content:center;gap:2px;text-decoration:none;line-height:1}
/* align-self is load-bearing: .brandmark is a column flexbox, whose default
   align-items:stretch was forcing the logo to the container width and
   distorting it. Never remove this without setting an explicit width. */
.brandmark img{
  display:block;height:21px;width:auto;align-self:flex-start;
  max-width:100%;object-fit:contain;aspect-ratio:234/57
}
.brandmark .lockup{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.brandmark .lockup b{
  font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#1c257c
}
.brandmark .lockup small{
  font-size:8.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:#7b8493
}
/* login card: logo sits on a white plate above the navy rule */
.loginbox .lh{background:#fff;border-bottom:2px solid var(--red);padding:14px 16px 12px}

/* ============================ module launcher ============================ */
body.launcher{
  margin:0;min-height:100vh;color:#fff;
  background:
    radial-gradient(900px 600px at 20% 10%, #33409f 0%, rgba(51,64,159,0) 60%),
    linear-gradient(150deg,#1c257c 0%,#151d64 50%,#0b1140 100%);
}
body.launcher::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.6) 0 1px, transparent 1px 86px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.4) 0 1px, transparent 1px 86px);
  mask-image:radial-gradient(900px 700px at 40% 40%,#000 0%,transparent 82%);
  -webkit-mask-image:radial-gradient(900px 700px at 40% 40%,#000 0%,transparent 82%);
}
.launch-shell{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.launch-head{
  display:flex;align-items:center;gap:16px;padding:14px 30px;
  border-bottom:1px solid rgba(255,255,255,.10)
}
.lh-brand{background:#fff;border-radius:5px;padding:8px 14px}
.lh-brand .brandmark img{height:22px}
.lh-brand .brandmark .lockup b{font-size:10px}
.lh-brand .brandmark .lockup small{font-size:8.5px}
.lh-who{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:12px;color:rgba(255,255,255,.62)}
.lh-who a{color:#ff8a9b;text-decoration:none;font-weight:600}
.lh-who a:hover{text-decoration:underline}

.launch-body{flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:1080px;width:100%;margin:0 auto;padding:48px 30px 60px}
.launch-body .greet{margin:0 0 6px;font-size:12.5px;letter-spacing:1.8px;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.launch-body h1{margin:0;font-size:42px;line-height:1.05;font-weight:800;letter-spacing:-1.1px;
  background:linear-gradient(96deg,#fff 30%,#ffc3cc 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.launch-body .lead{margin:14px 0 34px;font-size:14px;color:rgba(255,255,255,.66);max-width:620px}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;align-items:stretch}
.tile{
  display:flex;align-items:stretch;gap:16px;text-decoration:none;color:var(--ink);
  background:#fff;border-radius:8px;padding:20px 22px;border:1px solid transparent;min-height:108px;
  box-shadow:0 12px 32px rgba(6,11,45,.30);
  transition:transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s
}
.tile:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(6,11,45,.42);border-color:#ffb3bf}
.tile .ic{
  flex:0 0 46px;height:46px;align-self:flex-start;border-radius:9px;display:grid;place-items:center;
  font-size:20px;background:linear-gradient(160deg,#232e94,#151d64);color:#fff
}
.tile.t-sales .ic{background:linear-gradient(160deg,#c71529,#8e0d1d)}
.tile.t-tracking .ic{background:linear-gradient(160deg,#0f7b45,#0a5730)}
.tile.t-admin .ic{background:linear-gradient(160deg,#5b3fa8,#3d2a75)}
.tile .tl{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center}
.tile .tl b{display:block;font-size:15px;font-weight:700;letter-spacing:-.2px;margin-bottom:3px}
.tile .tl small{
  font-size:11.5px;color:var(--ink-3);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
.tile .ct{flex:0 0 auto;text-align:right;padding-left:14px;border-left:1px solid var(--line-2);
  display:flex;flex-direction:column;justify-content:center}
.tile .ct b{display:block;font:800 20px/1 var(--mono);color:var(--navy)}
.tile .ct i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--ink-3);margin-top:4px;max-width:92px}

.launch-body .foot{margin:38px 0 0;font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.3px}

@media (max-width:700px){
  .launch-body h1{font-size:30px}
  .tile{flex-wrap:wrap}
  .tile .ct{border-left:0;padding-left:0;text-align:left;width:100%}
}

/* module switcher in the app header */
.modsw{position:relative}
.modsw summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;height:26px;padding:0 9px;
  border-radius:3px;background:#243370;border:1px solid #3b4a8f;color:#ccd4ee;font-size:11.5px;white-space:nowrap
}
.modsw summary::-webkit-details-marker{display:none}
.modsw summary:hover{background:#2c3d80;color:#fff}
.modsw summary b{font-weight:700;color:#fff}
.modsw summary .ic{opacity:.8}
.modsw summary .cv{font-size:9px;opacity:.75}
.modsw[open] summary{background:#2c3d80;color:#fff}

.modmenu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:80;width:314px;background:#fff;
  border:1px solid var(--line);border-radius:6px;overflow:hidden;
  box-shadow:0 14px 40px rgba(6,11,45,.28)
}
.mm-head{
  padding:7px 12px;font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);background:var(--panel-2);border-bottom:1px solid var(--line-2)
}
.modmenu a{
  display:flex;gap:11px;align-items:flex-start;padding:10px 12px;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line-2)
}
.modmenu a:hover{background:#f0f4fd}
.modmenu .mi{
  flex:0 0 28px;height:28px;border-radius:6px;display:grid;place-items:center;font-size:13px;color:#fff;
  background:linear-gradient(160deg,#232e94,#151d64)
}
.modmenu .mi-sales{background:linear-gradient(160deg,#c71529,#8e0d1d)}
.modmenu .mi-tracking{background:linear-gradient(160deg,#0f7b45,#0a5730)}
.modmenu .mi-admin{background:linear-gradient(160deg,#5b3fa8,#3d2a75)}
.modmenu .mt{min-width:0}
.modmenu .mt b{display:block;font-size:12.5px;font-weight:700;margin-bottom:1px}
.modmenu .mt small{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:11px;color:var(--ink-3);line-height:1.4
}
.modmenu .mm-all{
  border-bottom:0;background:var(--panel-2);font-size:11.5px;color:var(--link);
  justify-content:center;padding:9px 12px;font-weight:600
}

/* count badge inside a filter chip */
.mini .qn{font:10.5px/1 var(--mono);color:var(--ink-3);margin-left:4px}
.mini.on .qn{color:var(--navy)}
.listbar{flex-wrap:wrap;height:auto;min-height:31px;padding:4px 8px;row-gap:4px}

/* team performance */
.deskstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:14px}
.deskstats div{background:#fff;border:1px solid var(--line);border-left:3px solid var(--navy);
  border-radius:4px;padding:11px 14px}
.deskstats span{display:block;font-size:10px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-bottom:4px}
.deskstats b{font:800 24px/1 var(--mono);color:var(--ink)}

/* employee administration */
.modgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;margin-top:5px}
.modpick{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:5px;
  padding:9px 11px;background:#fff;cursor:pointer;transition:border-color .12s,background .12s}
.modpick:hover{border-color:var(--sel-line);background:#fbfcff}
.modpick input{margin-top:2px;flex:0 0 auto}
.modpick span{min-width:0}
.modpick b{display:block;font-size:12.5px;font-weight:700;margin-bottom:2px}
.modpick small{display:block;font-size:11px;color:var(--ink-3);line-height:1.4}
.modpick.master{border-color:#e2d8f7;background:#fbf9ff}
.modpick.is-locked{opacity:.55;cursor:not-allowed;background:var(--panel-2)}
.modpick:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 2px rgba(28,37,124,.10)}

/* credit exposure bar */
.creditbar{margin-top:10px}
.cb-track{height:8px;border-radius:4px;background:var(--line-2);overflow:hidden}
.cb-fill{height:100%;background:var(--ok);border-radius:4px}
.cb-fill.near{background:#d9a125}
.cb-fill.over{background:var(--bad)}
.cb-legend{display:flex;justify-content:space-between;margin-top:5px;font-size:11px;color:var(--ink-3)}
.cb-legend b{color:var(--ink)}

/* ============================ watchtower ============================ */
.wt-counters{display:flex;gap:0;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto}
.wt-c{flex:1;min-width:118px;padding:9px 14px;border-right:1px solid var(--line-2);text-decoration:none;
  color:var(--ink-2);display:block}
.wt-c:hover{background:var(--panel-2)}
.wt-c span{display:block;font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);margin-bottom:3px;white-space:nowrap}
.wt-c b{font:800 22px/1 var(--mono);color:var(--ink)}
.wt-c.warn b{color:var(--warn)} .wt-c.bad b{color:var(--bad)}
.wt-c.on{background:var(--sel);box-shadow:inset 0 -2px 0 var(--navy)}

.wt-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--ink-3);
  border-radius:5px;margin-bottom:11px;overflow:hidden}
.wt-card.critical{border-left-color:var(--bad)}
.wt-card.warn{border-left-color:#d9a125}
.wt-card.info{border-left-color:var(--link)}
.wt-card.escalated{box-shadow:0 0 0 2px rgba(164,20,42,.14)}
.wt-head{display:flex;align-items:center;gap:9px;padding:8px 12px;background:var(--panel-2);
  border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.wt-head .qid{font-size:12.5px}
.wt-head .sub{color:var(--ink-2);font-size:11.5px}
.wt-owner{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.wt-body{display:grid;grid-template-columns:1fr 340px;gap:0}
@media(max-width:1100px){.wt-body{grid-template-columns:1fr}}
.wt-flags{padding:9px 12px}
.wt-flag{display:flex;align-items:flex-start;gap:9px;padding:6px 0;border-bottom:1px solid var(--line-2);
  font-size:12px}
.wt-flag:last-child{border-bottom:0}
.wt-flag > span:nth-child(2){flex:1;color:var(--ink-2);line-height:1.45}
.wt-act{display:flex;gap:4px;flex:0 0 auto}
.wt-act form{display:inline}
.wt-side{border-left:1px solid var(--line-2);background:#fcfdfe;padding:9px 12px}
.wt-side .kv{grid-template-columns:82px 1fr;font-size:11.5px;margin-bottom:9px}
.wt-side .kv dt{font-size:10.5px}
.wt-side a{color:var(--link);text-decoration:none}
.wt-si{color:var(--warn);font-weight:600}
.wt-pos{border-top:1px solid var(--line-2);padding-top:9px}
.wt-pos .f{margin-bottom:4px}

/* ============================ calendar ============================ */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:5px;overflow:hidden}
.cal-dow{background:var(--panel-2);padding:6px 8px;font-size:9.5px;letter-spacing:.7px;
  text-transform:uppercase;font-weight:700;color:var(--ink-3);text-align:center}
.cal-cell{background:#fff;min-height:116px;padding:5px 6px}
.cal-cell.out{background:#fafbfc}
.cal-cell.we{background:#fcfcfd}
.cal-cell.out .cal-num{color:var(--line)}
.cal-cell.today{background:#f4f7ff;box-shadow:inset 0 0 0 2px var(--sel-line)}
.cal-num{font:700 12px/1 var(--mono);color:var(--ink-2);margin-bottom:5px;display:flex;
  align-items:center;justify-content:space-between}
.cal-num span{font:700 8.5px/1 var(--pride-font,inherit);letter-spacing:.5px;text-transform:uppercase;
  color:var(--navy);background:var(--sel);padding:2px 4px;border-radius:2px}
.cal-ev{display:flex;align-items:center;gap:5px;text-decoration:none;padding:2px 4px;border-radius:3px;
  margin-bottom:2px;background:var(--panel-2);border-left:2px solid var(--ink-3);overflow:hidden}
.cal-ev:hover{background:#eef2fb}
.cal-ev i{width:5px;height:5px;border-radius:50%;background:var(--ink-3);flex:0 0 auto}
.cal-ev b{font:600 10.5px/1.3 var(--mono);color:var(--ink);white-space:nowrap}
.cal-ev span{font-size:10px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev.late{background:var(--bad-bg);border-left-color:var(--bad)}
.cal-ev.late b{color:var(--bad)}
.cal-more{font-size:10px;color:var(--ink-3);padding:1px 4px}

.k-pickup   i,.cal-key.k-pickup   i{background:#5b3fa8}
.k-eta      i,.cal-key.k-eta      i{background:#1c47c9}
.k-delivery i,.cal-key.k-delivery i{background:var(--ok)}
.k-quote    i,.cal-key.k-quote    i{background:var(--red)}
.cal-ev.k-pickup{border-left-color:#5b3fa8}
.cal-ev.k-eta{border-left-color:#1c47c9}
.cal-ev.k-delivery{border-left-color:var(--ok)}
.cal-ev.k-quote{border-left-color:var(--red)}
.cal-key{display:inline-flex;align-items:center;gap:6px;opacity:.45}
.cal-key.on{opacity:1}
.cal-key i{width:7px;height:7px;border-radius:50%;display:block}

/* three-day horizon */
.hz{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
@media(max-width:1250px){.hz{grid-template-columns:repeat(2,1fr)}}
.hz-col{background:#fff;border:1px solid var(--line);border-radius:5px;overflow:hidden;display:flex;flex-direction:column}
.hz-col.is-today{border-color:var(--sel-line);box-shadow:0 0 0 2px rgba(28,37,124,.08)}
.hz-transit{border-left:3px solid var(--link)}
.hz-head{display:flex;align-items:baseline;gap:7px;padding:7px 10px;background:var(--panel-2);
  border-bottom:1px solid var(--line-2)}
.hz-head b{font-size:12.5px;font-weight:700}
.hz-head span{font-size:10.5px;color:var(--ink-3)}
.hz-head i{margin-left:auto;font:800 13px/1 var(--mono);font-style:normal;color:var(--navy)}
.hz-col.is-today .hz-head{background:var(--sel)}
.hz-body{padding:6px 8px;max-height:270px;overflow:auto;flex:1}
.hz-none{padding:16px 4px;text-align:center;font-size:11px;color:var(--ink-3)}
.hz-grp{font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;color:var(--ink-3);
  margin:6px 0 3px;display:flex;gap:5px}
.hz-grp b{color:var(--ink-2)}
.hz-row{display:block;text-decoration:none;padding:4px 7px;border-radius:3px;margin-bottom:3px;
  border-left:2px solid var(--ink-3);background:var(--panel-2)}
.hz-row:hover{background:#eef2fb}
.hz-row b{display:block;font:600 11px/1.3 var(--mono);color:var(--ink)}
.hz-row span{display:block;font-size:11px;color:var(--ink);font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hz-row em{display:block;font-style:normal;font-size:10px;color:var(--ink-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hz-row.pick{border-left-color:#5b3fa8}
.hz-row.del{border-left-color:var(--ok)}
.hz-row.tr{border-left-color:var(--link)}
.hz-row.warn{background:var(--warn-bg);border-left-color:#d9a125}
.hz-row.late{background:var(--bad-bg);border-left-color:var(--bad)}
.hz-row.late b,.hz-row.late span{color:var(--bad)}

/* load boards */
.boardbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-bottom:14px}
.bb{background:#fff;border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:4px;padding:9px 12px}
.bb.off{border-left-color:var(--line);opacity:.55}
.bb b{display:block;font-size:12.5px;font-weight:700;margin-bottom:2px}
.bb span{font-size:11px;color:var(--ink-3)}

/* desk switcher */
.deskw summary{background:#0e1946;border-color:#3b4a8f}
.deskw[open] summary,.deskw summary:hover{background:#182459}
.deskfix{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:3px;
  background:#0e1946;border:1px solid #2c3a7d;color:#fff;font-size:11.5px;font-weight:700;white-space:nowrap}

/* which desk am I on — said once, clearly */
.desknow{padding:8px 10px;border-bottom:1px solid var(--line-2);background:var(--sel)}
.desknow.both{background:var(--panel-2)}
.dn-k{display:block;font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.desknow b{display:block;font-size:13px;font-weight:800;color:var(--navy);letter-spacing:-.2px;margin:1px 0 2px}
.dn-h{display:block;font-size:10px;color:var(--ink-3);line-height:1.3}

/* ============================================================
   US domestic, appointments, rate book, escalation, presence
   ============================================================ */

/* small print that explains a control without shouting */
.hint{margin:0;font-size:11.5px;line-height:1.45;color:var(--ink-2)}
.hint b{color:var(--ink)}
.warn{margin:8px 0 0;font-size:11.5px;line-height:1.45;color:var(--bad);
  background:var(--bad-bg);border:1px solid #f2c9d1;border-left:3px solid var(--bad);
  border-radius:3px;padding:7px 9px}
.warnpill{display:inline-block;font-size:10.5px;font-weight:700;color:var(--bad);
  background:var(--bad-bg);border:1px solid #f2c9d1;border-radius:3px;padding:1px 5px}

/* tick rows */
.tickrow{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px}
.tick{display:inline-flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap}
.tick.haz{color:var(--bad);font-weight:600}
.hazrow{margin-top:8px}
.hazrow.dim{opacity:.45}

/* appointments — the thing that costs a day when it is missed */
.apptrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.appt{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:4px;
  padding:9px 10px;background:var(--panel-2);cursor:pointer}
.appt.on{background:var(--warn-bg);border-color:#f0dcae}
.appt b{display:block;font-size:12px}
.appt small{display:block;font-size:11px;color:var(--ink-2);margin-top:2px}

.apptgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.apptbox{border:1px solid var(--line);border-radius:4px;padding:10px;background:var(--panel-2)}
.apptbox.needed{background:var(--bad-bg);border-color:#f2c9d1}
.apptbox.booked{background:var(--ok-bg);border-color:#c3e3d1}

.apptpill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
  border-radius:3px;padding:2px 7px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink-2)}
.apptpill.needed{color:var(--bad);background:var(--bad-bg);border-color:#f2c9d1}
.apptpill.booked{color:var(--ok);background:var(--ok-bg);border-color:#c3e3d1}
.apptpill.clock{color:var(--warn);background:var(--warn-bg);border-color:#f0dcae}
.apptpill.esc{color:#fff;background:var(--bad);border-color:#8d1024;text-decoration:none}
.sigrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}

/* accessorials */
.accgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:5px}
.acc{display:flex;align-items:center;gap:6px;font-size:11.5px;border:1px solid var(--line);
  border-radius:3px;padding:5px 8px;background:var(--panel-2);cursor:pointer}
.acc.on{background:var(--sel);border-color:var(--sel-line);font-weight:600}
.acc.static{cursor:default}

/* rate book */
.lanefacts{display:flex;flex-wrap:wrap;gap:0 26px}
.lanefacts>div{display:flex;flex-direction:column;gap:2px}
.lanefacts span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.lanefacts b{font-size:14px}
.panel.contract{border-left:3px solid var(--pur)}
.panel.contract.bad{border-left-color:var(--bad)}
tr.best td{background:var(--pur-bg)}

/* escalation */
.panel.esc{border-left:3px solid var(--warn)}
.panel.esc.critical{border-left-color:var(--bad)}
.panel.esc.info{border-left-color:var(--ink-3)}
.panel.esc.lvl3{box-shadow:0 0 0 1px var(--bad) inset}
.escbar{height:5px;border-radius:3px;background:var(--line-2);overflow:hidden}
.escbar i{display:block;height:100%;background:linear-gradient(90deg,#d9a125,var(--bad))}
.escacts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.escacts form{display:flex;gap:5px;align-items:center;margin:0}
.escresolve{display:flex;gap:6px;align-items:center;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line-2)}
.escresolve .t{flex:1}
.tabct{display:inline-block;min-width:15px;text-align:center;font-size:10px;font-weight:700;
  background:var(--bad);color:#fff;border-radius:8px;padding:0 5px;margin-left:4px}

/* presence */
.presbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:9px 14px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.presnow{display:flex;align-items:center;gap:7px;font-size:12.5px}
.presset{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:0}
.presbtn{border:1px solid var(--line);background:var(--panel-2);border-radius:3px;
  height:26px;padding:0 11px;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.presbtn:hover{border-color:var(--sel-line)}
.presbtn.on{color:#fff;border-color:transparent}
.presbtn.ok.on{background:var(--ok)}
.presbtn.busy.on{background:#b8791a}
.presbtn.away.on{background:var(--ink-2)}
.presbtn.off.on{background:var(--ink)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink-3);
  vertical-align:middle}
.dot.ok{background:var(--ok)}
.dot.busy{background:#d9a125}
.dot.away{background:var(--ink-3)}
.dot.off{background:var(--line)}

/* completed legs read back as settled, not as noise */
tr.done td{opacity:.6}
details summary{cursor:pointer;font-size:11.5px}

/* presence in the top bar — reachable from every screen */
.tb-pres{display:flex;align-items:center;gap:6px;background:#0e1946;border:1px solid #2c3a7d;
  border-radius:3px;height:26px;padding:0 8px;margin:0}
.tb-pres select{background:none;border:0;color:#fff;outline:none;font-size:11.5px}
.tb-pres select option{color:#000}
.tb-pres em{font-style:normal;font-size:11px;color:#8f9cd0;font-variant-numeric:tabular-nums}
.tb-pres .dot{width:7px;height:7px}

/* address-book picker on the party blocks */
.party .lookup{margin-bottom:11px;padding-bottom:11px;border-bottom:1px dashed var(--line)}
.lookrow{display:flex;gap:6px;align-items:center}
.lookrow .t{flex:1}

/* The presence control added a fifth thing to the top bar. Let the search give
   up width rather than pushing Account and Log out off the right edge. */
.gsearch{flex:0 1 260px;min-width:130px;width:auto}
.topbar .tb-btn{flex:0 0 auto}
.tb-pres{flex:0 0 auto}
.who{flex:0 0 auto}
/* Keep everything on one line at 1440 and up: the search and the module
   caption are the two things that can afford to give way. */
.gsearch{flex:0 1 190px}
/* The menu is the only thing here that can be scrolled without losing anything —
   every item is also in the rail. Everything to its right (search, the two
   create buttons, presence, and the account links) must stay visible, because
   a clipped "Log out" is a support call. */
.menu{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu button{white-space:nowrap;padding:5px 7px}
@media (max-width:1820px){
  .who div span{display:none}
  .tb-pres em{display:none}
}
@media (max-width:1360px){
  .gsearch{display:none}
}

/* ------------------------------------------------------------------
   Nothing may fall off the right edge.

   body has overflow:hidden, and the page column is a flex child, so its
   natural width won a fight it should have lost: at a 1200px window the
   filter bar rendered 1480px wide and the last chips — IMDL, "+ Add
   shipment", the search box — were simply not on screen, with no
   scrollbar to reach them. min-width:0 lets the column shrink, which is
   what finally allows the bar to wrap.
   ------------------------------------------------------------------ */
.app > .body > .list,
.app > .body > .page,
.list, .page{min-width:0}
.gridwrap{overflow:auto}

/* flex:0 0 auto matters as much as height:auto here, and is the bit that was
   missing twice. Both bars are children of a column flex container and were
   declared `flex:0 0 31px` — a fixed flex-basis pins the box to one row's
   height no matter what `height` says, so the wrapped second row rendered
   underneath the table and IMDL, "+ Add shipment" and the search box were
   invisible at anything under about 1500px. */
.listbar{flex:0 0 auto;flex-wrap:wrap;height:auto;min-height:31px;row-gap:4px}
.metrics{flex:0 0 auto;flex-wrap:wrap;height:auto;min-height:26px}

/* chain, cargo, forwarders, gaps */
table.chain tr.blank td{background:#fffdf6}
table.chain tr.pd td:first-child{border-left:3px solid var(--pur)}
table.chain tr.legedit{display:none}
table.chain tr.legedit.open{display:table-row}
table.chain tr.legedit td{background:var(--panel-2);padding:12px 14px}
.legform .frow{margin-bottom:8px}
.gaps{margin:0;padding-left:18px;font-size:12px;line-height:1.7}
.gaps li.pd_missing,.gaps li.pd_nocontact{color:var(--bad);font-weight:600}
.gaps li.not_ls{color:var(--warn)}
.panel.warn-panel{border-left:3px solid var(--bad)}
.fwd{margin:10px 0;padding:10px;border:1px solid var(--line);border-radius:4px;background:var(--panel-2)}
td.over{color:var(--bad);font-weight:700}

/* ------------------------------------------------------------------
   The chain, on a board row.

   Six squares in running order: pickup, C1–C4, delivery. Filled is
   solid, filled-but-not-Landstar-approved is amber, a slot this mode
   uses but nobody has covered is a hollow red outline, and a slot the
   mode does not use at all is faint — so an empty C3 on a rail move
   does not read as a problem when it isn't one.
   ------------------------------------------------------------------ */
.chainstrip{display:inline-flex;align-items:center;gap:2px;line-height:1}
.chainstrip i{width:9px;height:9px;border-radius:2px;display:inline-block;
  border:1px solid var(--line-2);background:transparent}
.chainstrip i.pd{width:11px;height:11px;border-radius:3px}
.chainstrip i.on{background:var(--ok);border-color:var(--ok)}
.chainstrip i.on.nols{background:var(--warn);border-color:var(--warn)}
.chainstrip i.gap{border-color:var(--bad);border-style:dashed;background:#fff}
.chainstrip i.na{border-color:var(--line);background:var(--panel-2);opacity:.5}
.chainstrip b{margin-left:4px;font-size:10.5px;color:var(--ink-2);font-weight:600}
.chainwarn{font-size:10.5px;font-weight:600;color:var(--bad);white-space:nowrap}
.chainwarn.amber{color:var(--warn)}
.hazmark{color:var(--bad)}

/* Watchtower: who to ring, on the card, in running order. */
.wt-leg{padding:4px 0;border-top:1px dotted var(--line)}
.wt-leg:first-child{border-top:0}
.wt-leg.pd{border-left:3px solid var(--pur);padding-left:7px}
.wt-legrole{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
.wt-legc{font-size:11.5px;color:var(--ink-2)}

/* Capacity Finder — find a truck for this leg, then take the row back. */
.capbar{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;
  border:1px solid var(--line);border-radius:4px;background:var(--panel-2);flex-wrap:wrap}
.capbar .cappaste{flex:1 1 340px;min-width:220px;font-size:11px}
.capsep{width:1px;height:18px;background:var(--line)}

/* Closeout — the money end. */
.gatebar{display:flex;gap:10px;align-items:baseline;margin-top:10px;padding:8px 10px;border-radius:4px;
  background:var(--bad-bg);border:1px solid #f2c9d1;font-size:12px}
.gatebar b{color:var(--bad);text-transform:uppercase;font-size:10.5px;letter-spacing:.05em}
.gatebar.ok{background:var(--ok-bg);border-color:#c3e3d1}
.gatebar.ok b{color:var(--ok)}
.closerow{display:flex;flex-wrap:wrap;gap:18px;padding:4px 0}
.closerow>div{display:flex;flex-direction:column;gap:2px}
.closerow span{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
.closerow b{font-size:13px}
.busy{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600}
.busy i{width:34px;height:5px;border-radius:3px;background:var(--line-2);display:inline-block;position:relative;overflow:hidden}
.busy i::after{content:'';position:absolute;left:0;top:0;bottom:0;background:var(--ok)}
.busy.light i::after{width:25%} .busy.steady i::after{width:50%;background:#d9a125}
.busy.heavy i::after{width:75%;background:var(--warn)} .busy.swamped i::after{width:100%;background:var(--bad)}
.busy.clear i::after{width:8%}
.okpill{display:inline-block;font-size:10px;font-weight:700;padding:1px 5px;border-radius:3px;
  background:var(--ok-bg);color:var(--ok);border:1px solid #c3e3d1}
.approvebox{margin-top:8px;padding:9px 10px;border:1px dashed var(--warn);border-radius:4px;background:var(--warn-bg)}
.clocks{display:flex;gap:14px;font-size:12px;color:var(--ink-2)}
.clocks b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.hoitem{padding:8px 0;border-bottom:1px dotted var(--line)}
.hoitem.done{opacity:.7}
.hoanswer{margin-top:5px;padding:6px 9px;border-left:3px solid var(--ok);background:var(--ok-bg);border-radius:0 3px 3px 0;font-size:12px}
.hoanswer .sub{display:block;margin-top:2px}

/* Customer picker — two companies, one system. */
.custpick .cpscope{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.custpick .cpbtn{cursor:pointer;font:inherit}

/* Best match — call these first. */
tr.bm-hot td{background:#f2fbf5}
.bm-why,.bm-bad{display:inline-block;font-size:10.5px;padding:1px 5px;margin:1px 3px 1px 0;border-radius:3px;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink-2)}
.bm-bad{background:var(--bad-bg);border-color:#f2c9d1;color:var(--bad);font-weight:600}
.pblink{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border:1px solid var(--line);border-radius:4px;background:var(--panel);
  color:var(--ink-2);text-decoration:none;white-space:nowrap}
.pblink:hover{border-color:var(--pur);color:var(--pur)}
.pblink span{font-size:13px;color:var(--pur)}

/* ------------------------------------------------------------------
   Superspy — hides who and how much, keeps everything needed to work.

   The helpers in lib/spy.php mask the values that matter most. This is
   the second layer: anything carrying a customer name or an amount that
   a helper has not reached yet goes soft until you hover it, so a screen
   opened on a plane is not readable over a shoulder even where the code
   has not caught up. Deliberately blur, not display:none — you can still
   see the shape of your own board.
   ------------------------------------------------------------------ */
body.spy .cust, body.spy .money, body.spy td.n.mn b,
body.spy .lanefacts b, body.spy .metric b{filter:blur(5px);transition:filter .12s}
body.spy .cust:hover, body.spy .money:hover, body.spy td.n.mn b:hover,
body.spy .lanefacts b:hover, body.spy .metric b:hover{filter:none}

.spytog{display:flex;align-items:center;margin:0 4px}
.spytog button{display:flex;align-items:center;gap:5px;background:transparent;border:1px solid rgba(255,255,255,.22);
  color:#dfe4f5;font:600 11px/1 inherit;padding:5px 9px;border-radius:5px;cursor:pointer;white-space:nowrap}
.spytog button:hover{border-color:rgba(255,255,255,.5);color:#fff}
.spytog .eye{font-size:12px}
.spytog.on button{background:#c71529;border-color:#c71529;color:#fff}

/* Watchtower — passing a card to somebody else.
   Collapsed by default: the tower is a scanning surface, and a form open on
   every card turns it into a wall. */
.wt-pass { margin-top:8px; border-top:1px solid var(--line-2); padding-top:8px }
.wt-pass > summary {
  cursor:pointer; font-size:11.5px; font-weight:600; color:var(--ink-2);
  list-style:none; user-select:none;
}
.wt-pass > summary::-webkit-details-marker { display:none }
.wt-pass > summary::before { content:'⇄ '; color:var(--accent) }
.wt-pass > summary:hover { color:var(--ink) }
.wt-pass[open] > summary { color:var(--ink); margin-bottom:4px }
.wt-pass .frow { gap:8px }

/* Cargo lines are edited in place.
   Compact inputs so a line still reads as a row of figures rather than a form,
   and a Save that announces itself the moment anything in that row changes —
   an edit sitting unsaved is the bug this replaced. */
.t.xs { height:26px; padding:2px 6px; font-size:11.5px; width:100% }
select.t.xs { padding:2px 4px }
.t.xs.r { text-align:right }
td.dims { white-space:nowrap; display:flex; gap:4px }
td.dims .t.xs { width:50px }
.cflags { display:flex; gap:6px; align-items:center; margin-top:4px; flex-wrap:wrap }
.cflags .tick { font-size:10.5px; color:var(--ink-2); gap:3px }
.cbtns { white-space:nowrap; display:flex; gap:4px }
tr.cline.dirty { background:var(--warn-bg) }
tr.cline.dirty .csave { box-shadow:0 0 0 2px var(--warn) }

/* Carrier chain — a slot nobody is using should not shout.
   The caret is the only affordance needed: closed points right, open points
   down, and an empty row sits back so the booked legs read first. */
table.chain tr:not(.legedit) { cursor:pointer }
table.chain .legtog {
  display:inline-block; width:9px; margin-right:7px; color:var(--ink-3);
  transition:transform .12s ease;
}
table.chain .legtog::before { content:'\25B8' }          /* ▸ */
table.chain tr.isopen .legtog { transform:rotate(90deg); color:var(--accent) }
table.chain tr.blank:not(.isopen) td { opacity:.62 }
table.chain tr.blank:hover td { opacity:1 }
#chainall { margin-left:10px; vertical-align:middle }

/* Correcting a milestone. Folded away by default — the timeline is for reading,
   and a form under every entry would bury the thing you came to look at. */
.msedit { margin-top:5px }
.msedit > summary {
  cursor:pointer; font-size:10.5px; font-weight:600; color:var(--ink-3);
  list-style:none; user-select:none;
}
.msedit > summary::-webkit-details-marker { display:none }
.msedit > summary::before { content:'✎ ' }
.msedit > summary:hover { color:var(--accent) }
.msedit[open] > summary { color:var(--ink-2) }
.msedit .frow { gap:6px; padding:8px; background:var(--panel-2); border-radius:6px }

/* Milestone times carry their zone. The desk runs across two of them and a
   bare "05:20" is only useful if you already know whose clock it is. */
ul.ms time .tzs { display:block; font-size:9.5px; color:var(--ink-3); letter-spacing:.02em }
.msedit .btn { white-space:nowrap }

/* An overdue internal step should be visible from across the room. */
table.data tr.over > td { background:rgba(199,21,41,.05) }
table.data tr.over > td:first-child { box-shadow:inset 3px 0 0 var(--bad) }

/* Tracking Tools — the answer should be readable from a metre away. */
.t.big{height:46px;font-size:19px;font-weight:600}
.btn.big{height:40px;padding:0 20px;font-size:13.5px}
.panel.verdict .pin{padding:18px}
.panel.verdict.ok   {border-left:5px solid var(--ok)}
.panel.verdict.tight{border-left:5px solid var(--warn);background:var(--warn-bg)}
.panel.verdict.late {border-left:5px solid var(--bad);background:rgba(199,21,41,.06)}
.panel.verdict.ok h2   {color:var(--ok)}
.panel.verdict.tight h2{color:var(--warn)}
.panel.verdict.late h2 {color:var(--bad)}
table.data tr.now > td{background:var(--panel-2);font-weight:600}


/* ===== pride-polish-16aug =========================================
   Interaction states. Additive: adds hover/press/focus, restyles
   nothing. Delete from this marker to the end marker to revert.
   ================================================================ */
.rail a{transition:background-color .12s ease,box-shadow .12s ease,color .12s ease}
.rail a:hover{background:var(--panel-2)}
.rail a:active{background:var(--sel)}
.rail a.on{box-shadow:inset 3px 0 0 var(--navy);font-weight:600}

button,.btn,input[type=submit]{transition:background-color .12s ease,border-color .12s ease,transform .06s ease}
button:hover,.btn:hover{filter:brightness(.97)}
button:active,.btn:active,input[type=submit]:active{transform:translateY(1px);filter:brightness(.92)}
button[disabled],.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;filter:none}

tbody tr:hover,tr[onclick]:hover,tr.clickable:hover{background:var(--panel-2)}
tr[onclick],tr.clickable{cursor:pointer}

a:focus-visible,button:focus-visible,.btn:focus-visible,
select:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--navy);outline-offset:1px;border-radius:3px}

input,select,textarea{transition:border-color .12s ease,box-shadow .12s ease}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,select:focus,textarea:focus{border-color:var(--navy);box-shadow:0 0 0 2px var(--sel);outline:none}

@media (prefers-reduced-motion:reduce){
  .rail a,button,.btn,input,select,textarea{transition:none}
  button:active,.btn:active{transform:none}
}
/* ===== end pride-polish-16aug ==================================== */


/* ===== pride-visible-16aug ========================================
   Changes you can see standing still, not only on hover.
   Delete to the end marker to revert.
   ================================================================ */
/* Column headers stay put while a long board scrolls */
table.grid thead th{
  position:sticky; top:0; z-index:3;
  background:var(--panel);
  box-shadow:inset 0 -1px 0 var(--line), 0 1px 2px rgba(16,32,44,.06);
}
/* Alternating row tint so the eye tracks across a wide row */
table.grid tbody tr:nth-child(even) > td{ background:rgba(16,32,44,.022); }
/* Hover must still beat the stripe */
table.grid tbody tr:hover > td{ background:var(--sel); }
/* A little more air in dense boards */
table.grid tbody td{ padding-top:5px; padding-bottom:5px; }
/* Current rail item: a real marker, not just a tint */
.rail a.on{ border-left-width:3px; }
/* ===== end pride-visible-16aug ==================================== */


/* =====================================================================
   Definition pass — 17 Aug 2026. SITE-WIDE.
   Applies everywhere. Loaded last in desk.css so it wins on equal
   specificity. Revert by deleting from this banner to end of file.
   ===================================================================== */
/* Costs & Sell — definition pass, 17 Aug 2026. Everything is scoped to .ctab,
   which wraps only this tab's body, so no other screen can be affected. */
.panel{box-shadow:0 1px 0 rgba(27,35,49,.04),0 1px 3px rgba(27,35,49,.06)}
.panel h3{background:var(--navy);color:#fff;border-bottom:0;padding:10px 11px;
  font-size:11.5px;letter-spacing:.4px;text-transform:none}
.panel h3 .a{color:#aab3e8;font-weight:500;font-family:var(--mono);font-size:10.5px}
table.data th{background:var(--panel-2);color:var(--ink-2);padding:7px 8px;font-size:9px;
  border-bottom:1px solid var(--line)}
table.data td{padding:3px 6px;border-bottom:1px solid var(--line)}
tbody tr:hover td{background:#fafbfd}
.secrow td{background:#dbe1ea;color:var(--ink);font-size:9.5px;letter-spacing:.9px;
  text-transform:uppercase;font-weight:700;padding:6px 8px 6px 11px;
  border-top:1px solid #c3ccd9;border-bottom:1px solid #c3ccd9;box-shadow:inset 3px 0 0 var(--ink-2)}
.secrow.s-freight td{box-shadow:inset 3px 0 0 var(--navy)}
.secrow:first-child td{border-top:0}
.t{height:24px}
.t.n{font-variant-numeric:tabular-nums;background:#fcfdfe}
.t.label,.t.basis{border-color:transparent;background:transparent}
.t.label{color:var(--ink);font-weight:500}
.t.basis{color:var(--ink-3);font-size:11.5px}
tr:hover .t.label,tr:hover .t.basis{border-color:var(--line);background:#fff}
.t:focus{border-color:var(--sel-line);background:#fff;outline:0}
table.data tr.tot td{background:#dbe1ea;border-top:1px solid var(--ink);box-shadow:inset 0 2px 0 var(--ink);border-bottom:1px solid #c3ccd9;
  padding:7px 6px;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink)}
table.data tr.tot td:first-child{font-family:inherit;font-size:10px;letter-spacing:.9px;text-transform:uppercase}
tr.newline td{background:var(--panel-2)}
.note{padding:8px 10px;background:var(--warn-bg);border-left:3px solid var(--warn);
  border-radius:0 3px 3px 0;font-size:11.5px}
.note.ok{background:var(--ok-bg);border-left-color:var(--ok)}
.tplchipwrap{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:baseline;
  padding:7px 0;border-bottom:1px solid var(--line-2)}
.tplchipwrap:last-child{border-bottom:0}
.tplchipsec{font-size:9.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;text-align:right}
.tplchip{background:var(--panel-2);border-color:var(--line-2);color:var(--ink-2)}
.tplchip:hover{background:#fff;border-color:var(--sel-line);color:var(--ink)}
.delx{color:var(--ink-3)}
.delx:hover{color:var(--bad);border-color:var(--bad)}


/* The two ends of a shipment, side by side. One rule, so every mode gets it —
   the blocks are two includes of views/_party.php and are mode-independent. */
.partypair{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.partypair .frow{grid-template-columns:1fr 1fr}
.partypair .lookrow{gap:8px}
@media (max-width:1280px){
  .partypair{grid-template-columns:1fr}
  .partypair .frow{grid-template-columns:1fr 1fr 1fr}
}

/* =====================================================================
   Liveliness pass — 17 Aug 2026.

   ONE RULE: a hover or focus state may only change properties that
   cannot move a box — background-color, color, border-color,
   box-shadow, opacity, outline. Never padding, margin, border-width,
   font-size, width, height, or a transform on the element the pointer
   is currently on.

   Why: if hovering resizes an element, it slides out from under the
   cursor, the hover drops, it snaps back, and it oscillates. That is
   the shake. Verified here by measuring every menu item at rest and
   while hovered — the boxes are identical to the pixel.

   Revert by deleting from this banner to the end of the file.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* transition:all animates layout properties too. Name them instead. */
.rail a, .menu a, .menu button, .dtabs a.dtab, .btn, button, .modmenu a,
table.data tbody tr, .panel, .tplchip, .t, select, textarea {
  transition: background-color .13s ease, color .13s ease,
              border-color .13s ease, box-shadow .13s ease, opacity .13s ease;
}

@media (hover: hover) {
  /* Left rail. .rail a already reserves a border-left, so colouring it
     costs nothing in layout. */
  .rail a:hover      { background: var(--sel); border-left-color: var(--sel-line); color: var(--ink); }
  .rail a.on:hover   { border-left-color: var(--red); }
  .rail a:active     { background: #d3ddf7; }

  /* Top bar — underline drawn with an inset shadow, not a border. */
  .menu a:hover, .menu button:hover { box-shadow: inset 0 -2px 0 rgba(255,255,255,.55); }

  /* Quote tabs */
  .dtabs a.dtab:hover { background: var(--panel-2); box-shadow: inset 0 -2px 0 var(--sel-line); }

  /* Buttons lift with light rather than with movement. */
  .btn:hover   { box-shadow: 0 1px 2px rgba(27,35,49,.10); }
  .btn:active  { box-shadow: inset 0 1px 2px rgba(27,35,49,.16); }

  /* Panels wake under the pointer. */
  .panel:hover { box-shadow: 0 1px 0 rgba(27,35,49,.05), 0 3px 12px rgba(27,35,49,.08); }

  /* Rows */
  table.data tbody tr:hover td { background: #f4f7fd; }
}

/* Keyboard users get the same signal, plus a ring they can actually see. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--sel-line);
  outline-offset: 1px;
}

/* Content arrives rather than blinking into place. Opacity only, so it
   cannot shift a single pixel of layout. */
@keyframes pl-enter { from { opacity: .4 } to { opacity: 1 } }
.pagebody { animation: pl-enter .14s ease-out both; }

/* ---- Rail colour, 17 Aug 2026 -------------------------------------
   Colour is used to say something, not to decorate: the group accent
   chunks 40 items into 9 blocks, and a zero count stops competing with
   a real one. Red stays reserved for the app’s own hot flag. ---- */

.rail .grp {
  color: var(--grp, var(--ink-3));
  box-shadow: inset 3px 0 0 var(--grp, transparent);
  padding-left: 9px;
}
.rail a .ic { color: var(--grp, var(--ink-3)); opacity: .85; }
.rail a:hover .ic { opacity: 1; }
.rail a.on .ic { color: var(--red); opacity: 1; }

/* A count of zero is information, not an alarm. */
.rail a .ct.z {
  background: transparent;
  border-color: transparent;
  color: #b6bECB;
  font-weight: 400;
}
.rail a:hover .ct.z { color: var(--ink-3); }

/* ---- Site review corrections, 17 Aug 2026 --------------------------
   Both of these are regressions from my own earlier passes, found by
   walking every page rather than the two I had been working on. ---- */

/* 1. Escalation cards are LIST ITEMS, not containers. escalations.php
      renders 139 of them, and a solid navy bar on each turned the page
      into a wall. Severity carries the colour instead; the header goes
      quiet so the 139 can be scanned. */
.panel.esc > h3 {
  background: var(--panel-2);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 4px 0 0 var(--esc, var(--ink-3));
  padding-left: 13px;
}
.panel.esc > h3 .a { color: var(--ink-3); }
.panel.esc.lvl1 { --esc: var(--warn); }
.panel.esc.lvl2 { --esc: #c2410c; }
.panel.esc.lvl3 { --esc: var(--bad); }
.panel.esc.critical > h3 { color: var(--bad); }

/* 2. My definition pass took table column headers from 9.5px to 9px
      site-wide. Nine pixels is below comfortable for a label people
      read all day. Put it back. */
table.data th { font-size: 9.5px; }

/* ---- Quote Desk USA, embedded — 17 Aug 2026 ------------------------
   The frame fills what is left of the viewport under Pride One's chrome.
   Height is set from the frame's own offset so it works whatever the
   metric strip is doing, with a floor so it is never a letterbox. ---- */
.pagebody.deskwrap { padding: 0; }
.deskframe {
  display: block;
  width: 100%;
  height: calc(100vh - 190px);
  min-height: 560px;
  border: 0;
  background: var(--panel);
}

/* ---- Board filter bar, 17 Aug 2026 ---- */
/* The board lives in a flex ROW next to the rail, so the bar and the frame
   must share one column or the bar becomes a third column. */
.boardcol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.boardcol iframe { flex: 1 1 auto; height: auto; min-height: 0; }
.boardfilter {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 7px 14px; font-size: 11.5px; color: var(--ink);
  background: var(--sel); border-bottom: 1px solid var(--sel-line);
}
.boardfilter b { font-weight: 700; }
.boardfilter .btn { margin-left: auto; }
/* ================================================================== *
 * Row housekeeping menu on the Quote Queue — 18 Aug 2026.
 * Copy / Archive / Delete behind a per-row ⋯ so the grid keeps its width.
 * Hover changes background only: nothing here may move a box, or the
 * pointer slides off the element and the menu shakes.
 * ================================================================== */

.rmc { text-align:center; padding:0 2px; }

details.rmenu { position:relative; display:inline-block; }
details.rmenu > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:inline-block; width:22px; line-height:20px; border-radius:4px;
  color:var(--ink-3); font-size:15px; letter-spacing:1px; text-align:center;
  background:transparent;
  transition:background-color .12s ease, color .12s ease;
}
details.rmenu > summary::-webkit-details-marker { display:none; }
@media (hover:hover) {
  details.rmenu > summary:hover { background:var(--row); color:var(--ink); }
}
details.rmenu > summary:focus-visible { outline:2px solid var(--link); outline-offset:1px; }
details.rmenu[open] > summary { background:var(--row); color:var(--ink); }

.rmpop {
  position:absolute; right:0; top:24px; z-index:60;
  min-width:246px; text-align:left;
  background:var(--panel); border:1px solid var(--line);
  border-radius:6px; box-shadow:0 6px 22px rgba(0,0,0,.16);
  padding:4px;
}
.rmhead {
  font-size:10.5px; font-weight:700; letter-spacing:.4px;
  color:var(--ink-3); padding:5px 8px 6px;
  border-bottom:1px solid var(--line);
  margin-bottom:4px;
}
.rmpop form { margin:0; }

button.rmi, summary.rmi {
  display:block; width:100%; box-sizing:border-box;
  text-align:left; cursor:pointer; list-style:none;
  font:inherit; font-size:12px; line-height:1.35;
  padding:7px 8px; border:0; border-radius:4px;
  background:transparent; color:var(--ink);
  transition:background-color .12s ease, color .12s ease;
}
summary.rmi::-webkit-details-marker { display:none; }
@media (hover:hover) {
  button.rmi:hover, summary.rmi:hover { background:var(--row); }
  button.rmdanger:hover, summary.rmdanger:hover { background:var(--bad-bg); }
}
button.rmi:focus-visible, summary.rmi:focus-visible { outline:2px solid var(--link); outline-offset:-2px; }
.rmdanger { color:var(--bad); }

details.rmask { margin:0; }
.rmconfirm {
  border-top:1px solid var(--line);
  margin-top:4px; padding:7px 8px 4px;
}
.rmconfirm p {
  margin:0 0 7px; font-size:11px; line-height:1.45; color:var(--ink-2);
}
.rmconfirm button.rmi {
  background:var(--bad-bg); color:var(--bad); font-weight:600; text-align:center;
}

.rmstamp { color:var(--ink-3); font-style:italic; }

@media (prefers-reduced-motion: reduce) {
  details.rmenu > summary, button.rmi, summary.rmi { transition:none; }
}

/* ------------------------------------------------------------------ *
 * New Quote — action bar at the foot of the form. 18 Aug 2026.
 * The head carries the same pair; on a form this tall you should never
 * have to scroll to find out how to save.
 * ------------------------------------------------------------------ */
.qnbar{
  display:flex; align-items:center; gap:8px;
  margin-top:14px; padding:12px 0 4px;
  border-top:1px solid var(--line);
}
.qnnote{ font-size:11.5px; color:var(--ink-3); }
.qnact{ display:flex; gap:6px; flex:none; }
.qnact .btn{ white-space:nowrap; }

/* ------------------------------------------------------------------ *
 * Charges — standard lines and tap-to-add chips. 18 Aug 2026.
 * Replaces a single flat <select> that offered a domestic truckload an
 * ISF filing. Hover changes background-colour only.
 * ------------------------------------------------------------------ */
.chiprow{ display:flex; flex-wrap:wrap; gap:6px; max-width:100%; }
/* A grid item will not shrink below its content unless told to, so a row of
   chips pushes straight out through the panel edge. */
.chipcell{ min-width:0; max-width:100%; }
.stdchip{
  display:inline-block; padding:3px 10px; border-radius:13px;
  background:var(--panel-2); border:1px solid var(--line-2);
  font-size:12px; font-weight:600; color:var(--ink);
}
button.addchip{
  display:inline-block; padding:5px 11px; border-radius:14px; cursor:pointer;
  background:var(--panel); border:1px solid var(--line-2);
  font:inherit; font-size:12px; color:var(--ink); line-height:1.35;
  transition:background-color .12s ease, border-color .12s ease;
}
@media (hover:hover){ button.addchip:hover{ background:var(--row); } }
button.addchip:focus-visible{ outline:2px solid var(--link); outline-offset:1px; }
button.addchip.on{ background:var(--sel); border-color:var(--sel-line); font-weight:600; }
@media (prefers-reduced-motion: reduce){ button.addchip{ transition:none; } }


/* =====================================================================
   EMPLOYEE ADMIN CENTRE — appended 18 Aug 2026
   Every selector is prefixed .ea / .ea- or scoped under .ea-page, so it
   cannot reach any other screen. Append-only: nothing above was edited.
   ===================================================================== */
.ea-page{--ea-r:7px;--ea-r-sm:5px;
  --ea-sh:0 1px 2px rgba(20,26,36,.05),0 1px 1px rgba(20,26,36,.04);
  --ea-navy100:#e7eaf6;--ea-line:#dfe3ea;--ea-line2:#edeff4;--ea-p3:#fbfcfd}

/* --- KPI strip ------------------------------------------------------- */
.ea-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 12px}
@media (max-width:980px){.ea-kpi{grid-template-columns:repeat(2,1fr)}}
.ea-tile{display:block;background:#fff;border:1px solid var(--ea-line);border-radius:var(--ea-r);
  padding:11px 13px 12px;box-shadow:var(--ea-sh)}
.ea-tile .l{font-size:11.5px;color:var(--ink-2);font-weight:500}
.ea-tile .v{font-size:27px;font-weight:600;letter-spacing:-.8px;line-height:1.15;margin:3px 0 1px}
.ea-tile .c{font-size:11.5px;color:var(--ink-3);line-height:1.4}
.ea-tile .c b{color:var(--ink-2);font-weight:600}
.ea-tile.ea-acc .v{color:var(--navy)}
.ea-tile.ea-warn .v{color:var(--warn)}
.ea-meter{height:4px;border-radius:2px;background:var(--ea-line2);margin:7px 0 0;overflow:hidden}
.ea-meter i{display:block;height:100%;background:var(--navy);border-radius:2px}
.ea-tile.ea-warn .ea-meter i{background:var(--warn)}
.ea-tile.ea-grey .ea-meter i{background:var(--ink-3)}

/* --- master / detail split ------------------------------------------- */
.ea-split{display:grid;grid-template-columns:392px minmax(0,1fr);gap:12px;align-items:start}
@media (max-width:1120px){.ea-split{grid-template-columns:1fr}}

/* --- shared card chrome ---------------------------------------------- */
.ea-page .panel{border-color:var(--ea-line);border-radius:var(--ea-r);
  box-shadow:var(--ea-sh);overflow:hidden}
.ea-page .panel>h3{margin:0;padding:9px 12px;border-bottom:1px solid var(--ea-line2);
  background:var(--ea-p3);font-size:12.5px;font-weight:650;color:var(--ink)}
.ea-page .panel>h3 .a{color:var(--ink-3);font-weight:500}

/* --- the finder ------------------------------------------------------ */
.ea-page .ea-search{padding:9px 10px;border-bottom:1px solid var(--ea-line2);
  position:sticky;top:0;background:#fff;z-index:3}
.ea-page .ea-search input[type=search]{width:100%;border:1px solid var(--ea-line);
  border-radius:var(--ea-r-sm);padding:7px 10px;background:var(--panel-2);font-size:12.5px}
.ea-page .ea-search input[type=search]:focus{outline:0;border-color:var(--sel-line);
  background:#fff;box-shadow:0 0 0 3px var(--sel)}
/* the page's own rule stretches every input in this bar; the checkbox is not a field */
.ea-page .ea-search input[type=checkbox]{flex:0 0 auto;min-width:0;max-width:none;width:auto;margin:0}

/* 24px tall fields clip the descenders on this page's longer option labels. */
.ea-page select.t,.ea-page input.t{min-height:28px;line-height:1.5}
.ea-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.ea-chip{border:1px solid var(--ea-line);background:#fff;border-radius:20px;padding:3px 10px;
  font-size:11.5px;color:var(--ink-2);font-weight:500;white-space:nowrap;text-decoration:none;
  display:inline-block}
.ea-chip:hover{background:var(--panel-2);color:var(--ink)}
.ea-chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.ea-chip .k{font-variant-numeric:tabular-nums;opacity:.72;margin-left:5px}

/* rows: denser, hoverable, avatar in place of the initials chip */
.ea-page table.data{border-collapse:separate;border-spacing:0}
.ea-page table.data th{font-size:10px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;padding:7px 12px;background:var(--ea-p3);
  border-bottom:1px solid var(--ea-line2);position:sticky;top:0;z-index:2}
.ea-page table.data td{padding:8px 12px;border-bottom:1px solid var(--ea-line2);vertical-align:middle}
.ea-page table.data tr:hover td{background:var(--panel-2)}
.ea-page table.data tr.ea-sel td{background:var(--sel)}
.ea-page table.data tr.ea-sel td:first-child{box-shadow:inset 3px 0 0 var(--navy)}
.ea-page .own{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-size:10.5px;font-weight:650;letter-spacing:.2px;color:#fff;
  background:var(--navy);margin-right:9px;vertical-align:middle}
.ea-page .mn{font-family:var(--mono);font-weight:600}

/* --- the record ------------------------------------------------------ */
.ea-page #ea>h3{display:flex;align-items:center;gap:10px;background:var(--ea-p3);
  color:var(--ink);border-bottom:1px solid var(--ea-line2);padding:12px 15px;font-size:16px;
  font-weight:650;letter-spacing:-.25px}
.ea-page .ea-tabs{display:flex;gap:2px;padding:8px 15px 0;border-bottom:1px solid var(--ea-line2)}
.ea-page .ea-tabs a{padding:7px 12px 9px;font-size:12.5px;font-weight:550;color:var(--ink-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none;
  border-radius:var(--ea-r-sm) var(--ea-r-sm) 0 0}
.ea-page .ea-tabs a:hover{color:var(--ink);background:var(--panel-2)}
.ea-page .ea-tabs a.on{color:var(--navy);border-bottom-color:var(--navy);font-weight:650}

/* module checkboxes become selectable cards */
.ea-page .modgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
@media (max-width:1200px){.ea-page .modgrid{grid-template-columns:repeat(2,1fr)}}
.ea-page .modpick{border:1px solid var(--ea-line);border-radius:var(--ea-r);padding:9px 11px;
  background:#fff;display:block;cursor:pointer;transition:background .12s,border-color .12s}
.ea-page .modpick:hover{background:var(--panel-2)}
.ea-page .modpick:has(input:checked){border-color:var(--navy);background:var(--ea-navy100);
  box-shadow:0 0 0 1px var(--navy) inset}
.ea-page .modpick.is-locked{opacity:.6;cursor:default}
.ea-page .modpick b{font-size:12.5px;font-weight:600}
.ea-page .modpick small{display:block;font-size:11px;color:var(--ink-3);line-height:1.45;margin-top:4px}
.ea-page .modpick input{accent-color:var(--navy);margin-right:6px}

/* --- freight roster --------------------------------------------------- */
.ea-scope{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
@media (max-width:900px){.ea-scope{grid-template-columns:1fr}}
.ea-sbox{border:1px solid var(--ea-line);border-radius:var(--ea-r);padding:10px 12px;background:#fff}
.ea-sbox.ea-acc{border-left:3px solid var(--navy)}
.ea-sbox .h{font-size:11.5px;font-weight:650}
.ea-sbox .v{font-size:20px;font-weight:600;margin:4px 0 2px;letter-spacing:-.4px}
.ea-sbox.ea-acc .v{color:var(--navy)}
.ea-sbox .who{font-size:11px;color:var(--ink-3);line-height:1.65}
.ea-sbox .who b{font-family:var(--mono);color:var(--ink-2);font-weight:600}