*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:14px/1.45 "Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:#1a1a1a;background:#f5f5f5}
.hidden{display:none !important}
h1,h2,h3{margin:0;font-weight:700}

/* ---------- sign in ---------- */
:root{--sv-bg:url("../img/signin-map.png")}
.auth{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:#eef0f1 var(--sv-bg) center/cover no-repeat}
.auth-panel{width:100%;max-width:360px;background:rgba(20,20,20,.86);padding:32px 28px 24px;
  border-top:3px solid #007bff;color:#fff}
.auth-logo{display:block;width:180px;height:auto;margin:0 auto 18px}
.auth-title{font-size:24px;text-align:center;letter-spacing:.5px}
.auth-sub{margin:4px 0 22px;text-align:center;font-size:12px;color:#9aa4b2;text-transform:uppercase;letter-spacing:1.5px}
.auth-form label{display:block;margin:0 0 4px;font-size:12px;font-weight:600;color:#c9d1d9}
.auth-form input{width:100%;margin:0 0 14px;padding:10px;border:1px solid #3a3a3a;background:#101010;color:#fff;font-size:15px}
.auth-form input:focus{outline:none;border-color:#007bff}
.auth-switch{margin:14px 0 0;text-align:center;font-size:13px;color:#9aa4b2}
.auth-switch a{color:#4da3ff}
.msg{margin:12px 0 0;text-align:center;font-size:13px;min-height:18px;color:#ff8080}
.msg.ok{color:#5ddc84}

/* ---------- buttons ---------- */
.btn{border:none;padding:9px 16px;font:600 13px/1 "Segoe UI",system-ui,sans-serif;color:#fff;background:#5a6470;cursor:pointer}
.btn:hover{filter:brightness(1.12)}
.btn-primary{background:#007bff}
.btn-green{background:#28a745}
.btn-red{background:#dc3545}
.btn-block{width:100%;padding:12px;font-size:15px}
.linkbtn{background:none;border:none;color:#8ab4f8;cursor:pointer;padding:0;font-size:12px}

/* ---------- app chrome ---------- */
.app{display:flex;min-height:100dvh}
.sidebar{width:230px;flex:0 0 230px;background:#2b2b2b;color:#ddd;display:flex;flex-direction:column}
.brand{height:64px;display:flex;align-items:center;justify-content:center;background:#1a1a1a;
  color:#fff;font-size:18px;font-weight:700;letter-spacing:.5px}
.menu{flex:1;overflow-y:auto;padding:6px 0}
.mi{display:flex;align-items:center;gap:10px;width:100%;padding:11px 18px;background:none;border:none;
  color:#ddd;font-size:14px;text-align:left;cursor:pointer;border-left:3px solid transparent}
.mi:hover{background:#353535}
.mi.active{background:#3a3a3a;color:#fff;border-left-color:#007bff}
.mi .ico{width:18px;text-align:center;flex:0 0 18px}
.mi.sub{padding-left:40px;font-size:13px;background:#242424}
.mi.sub:hover{background:#2f2f2f}
.side-foot{padding:12px 18px;border-top:1px solid #1a1a1a;font-size:12px;color:#9aa4b2;
  display:flex;justify-content:space-between;align-items:center;gap:8px}
.content{flex:1;min-width:0;padding:22px 26px 60px;overflow-x:hidden}
.nav-toggle{display:none}
.scrim{display:none}

/* ---------- page furniture ---------- */
.page-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;justify-content:flex-start}
.page-head h2{font-size:21px}
.page-head .spacer{display:none}   /* buttons sit by the title, on the left */
.page-head h2{margin-right:6px}
.bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 14px;background:#fff;border:1px solid #dee2e6;margin:0 0 16px}
.f{display:flex;align-items:center;gap:7px}
.f label{font-size:12px;font-weight:700;color:#444;white-space:nowrap}
input[type=text],input[type=date],input[type=time],input[type=number],textarea{
  padding:7px 8px;border:1px solid #ccc;background:#fff;font:14px "Segoe UI",system-ui,sans-serif;color:#1a1a1a}
input:focus,textarea:focus{outline:none;border-color:#007bff}
.w-date{width:150px}.w-time{width:110px}.w-loc{width:210px}.w-code{width:130px}.w-num{width:80px}.w-period{width:150px}
textarea{width:100%;max-width:820px;resize:vertical;min-height:56px}
.lbl{display:block;font-size:12px;font-weight:700;color:#444;margin:0 0 5px}
.section{margin:0 0 24px}
.section h3{font-size:15px;margin:0 0 8px}
.hint{font-size:12px;color:#666;margin:6px 0 0}
.empty{padding:26px;background:#fff;border:1px solid #dee2e6;color:#666;text-align:center}

/* ---------- tables ---------- */
.tw{overflow-x:auto;background:#fff;border:1px solid #ccc}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{border:1px solid #e0e0e0;padding:6px 8px;text-align:left;white-space:nowrap}
thead th{background:#f0f0f0;font-weight:700;border-bottom:2px solid #ccc;position:sticky;top:0}
tbody tr:nth-child(even){background:#fafafa}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:#eaf3ff}
td.rowhead,th.rowhead{background:#f0f0f0;font-weight:700;position:sticky;left:0;z-index:1}
td input{width:100%;min-width:74px;border:1px solid transparent;background:transparent;padding:4px}
td input:focus{border-color:#007bff;background:#fff}
td.calc{background:#f7f9fc;color:#333;font-variant-numeric:tabular-nums}
tr.weights td{background:#fff8e1;font-weight:700}
.tbl-actions{display:flex;gap:8px;margin:8px 0 0;flex-wrap:wrap}

/* ---------- dashboard ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:#dee2e6;border:1px solid #dee2e6}
.stat{background:#fff;padding:18px 20px}
.stat .n{font-size:30px;font-weight:700;line-height:1}
.stat .t{font-size:12px;color:#666;text-transform:uppercase;letter-spacing:.6px;margin-top:6px}

/* ---------- mobile ---------- */
@media (max-width:820px){
  .nav-toggle{display:block;position:fixed;top:10px;left:10px;z-index:40;width:42px;height:42px;
    background:#1a1a1a;color:#fff;border:none;font-size:20px;cursor:pointer}
  .sidebar{position:fixed;inset:0 auto 0 0;z-index:50;transform:translateX(-100%);transition:transform .2s}
  .sidebar.open{transform:none}
  .scrim.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:45}
  .content{padding:62px 14px 60px}
  .bar{gap:10px}
  .f{width:100%}
  .f label{flex:0 0 78px;width:78px}
  /* fill the rest of the row without pushing past it */
  .f input,.f select,.f .btn{flex:1 1 auto;min-width:0;width:auto}
  .w-loc,.w-date,.w-code,.w-time,.w-period,.w-num{width:auto}
}

select{padding:6px 8px;border:1px solid #ccc;background:#fff;font:14px "Segoe UI",system-ui,sans-serif;color:#1a1a1a;max-width:100%}
select:focus{outline:none;border-color:#007bff}
td select{border-color:transparent;background:transparent}
td select:focus{border-color:#007bff;background:#fff}
.bar strong{font-size:15px}
.side-foot #whoami{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkbtn{white-space:nowrap}
td .btn{padding:5px 10px;font-size:12px}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:2px solid #ccc;margin:0 0 -1px}
.tab{padding:9px 22px;background:#f0f0f0;border:1px solid #ccc;border-bottom:none;
  font:600 13px "Segoe UI",system-ui,sans-serif;color:#444;cursor:pointer}
.tab.on{background:#fff;color:#1a1a1a;border-bottom:1px solid #fff}

/* ---------- dialog ---------- */
.ovl{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;display:flex;
  align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.dlg{background:#fff;width:100%;max-width:660px;border-top:3px solid #007bff}
.dlg-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #dee2e6}
.dlg-head h3{font-size:17px;flex:1}
.dlg-body{padding:16px 18px}
.dlg-body .frow{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.dlg-body .frow > label{flex:0 0 150px;font-size:12px;font-weight:700;color:#444;padding-top:8px}
.dlg-body .frow > input,.dlg-body .frow > select,.dlg-body .frow > textarea{flex:1 1 220px;min-width:0}
.dlg-foot{display:flex;gap:8px;justify-content:flex-end;padding:14px 18px;border-top:1px solid #dee2e6}
.req{color:#dc3545}
.plist{margin:0;padding:6px 0 0 18px;font-size:13px;color:#333}
.plist li{margin:0 0 2px}
.dl{margin:0;font-size:13px}
.dl dt{font-weight:700;color:#444;margin:10px 0 2px;font-size:12px}
.dl dd{margin:0;white-space:pre-wrap}
@media (max-width:820px){
  .dlg-body .frow > label{flex:0 0 100%;padding-top:0}
  .ovl{padding:16px 10px}
}
.w-incident{width:600px;max-width:100%}

/* ---------- select an incident ---------- */
.picker{position:relative;min-height:100dvh;background:#eceff1;padding:0 0 70px}
/* the map from the sign-in screen, whispered underneath, so the page has a face */
.picker::before{content:"";position:fixed;inset:0;background:url("../img/signin-map.png") center/cover no-repeat;
  opacity:.17;pointer-events:none;z-index:0}
.picker > *{position:relative;z-index:1}

/* everything lines up in one centred column instead of running wall to wall */
.pk-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}

.pk-top{background:#14202f;color:#fff;border-bottom:3px solid #007bff}
.pk-topwrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
.pk-logo{width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:#fff}
.pk-id{flex:1;min-width:0}
.pk-title{font-size:21px;font-weight:700;letter-spacing:.3px;line-height:1.15}
.pk-org{font-size:11px;color:#8fa8c4;text-transform:uppercase;letter-spacing:1.4px;margin-top:3px}
.pk-actions{display:flex;gap:8px;flex-wrap:wrap}

.pk-tabband{background:#fff;border-bottom:1px solid #d6dade}
.pk-tabs{display:flex;gap:26px}
.pk-tab{display:flex;align-items:center;gap:8px;padding:14px 2px;background:none;border:none;
  border-bottom:3px solid transparent;margin-bottom:-1px;cursor:pointer;
  font:600 14px "Segoe UI",system-ui,sans-serif;color:#5a6470}
.pk-tab:hover{color:#1a1a1a}
.pk-tab.on{color:#0d1b2a;border-bottom-color:#007bff}
.pk-badge{display:inline-block;min-width:22px;padding:1px 7px;border-radius:11px;background:#e3e7eb;
  color:#5a6470;font-size:12px;font-weight:700;text-align:center}
.pk-tab.on .pk-badge{background:#007bff;color:#fff}

.pk-body{padding-top:20px}
.pk-search{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.pk-search input{flex:0 1 460px;padding:10px 12px;border:1px solid #c8ced4;background:#fff;
  font:14px "Segoe UI",system-ui,sans-serif;color:#1a1a1a}
.pk-search input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px rgba(0,123,255,.13)}
.pk-count{font-size:12px;color:#66707a;text-transform:uppercase;letter-spacing:.7px;font-weight:600}

/* one incident per row */
.pk-list{display:flex;flex-direction:column;gap:8px}
.pk-row{display:block;background:#fff;border:1px solid #dbe0e5;
  border-left:4px solid #b8c0c8;cursor:pointer;transition:border-color .12s,transform .12s}
.pk-main{display:flex;align-items:center}
.pk-row:hover{border-color:#007bff;transform:translateX(2px)}
.pk-row.acc-active{border-left-color:#28a745}
.pk-row.acc-monitoring{border-left-color:#17a2b8}
.pk-row.acc-standby{border-left-color:#ff9800}
.pk-row.acc-closed,.pk-row.acc-resolved{border-left-color:#98a2ac}
.pk-row.acc-training{border-left-color:#dc3545}

.pk-row.pk-head{background:none;border:none;cursor:default;padding:0 0 2px}
.pk-row.pk-head:hover{transform:none;border:none}
.pk-row.pk-head .pk-c{padding:0 14px 4px;font-size:11px;font-weight:700;color:#7a838c;
  text-transform:uppercase;letter-spacing:.8px}

.pk-c{padding:14px;min-width:0;font-size:14px;color:#3c4650;white-space:nowrap}
.pk-c0{flex:2 1 240px;white-space:normal;overflow:visible}
.pk-c1{flex:0 0 auto;min-width:150px;overflow:visible;text-overflow:clip}
.pk-c2{flex:0 0 150px}
.pk-c3{flex:0 0 110px}
.pk-c4{flex:1 1 150px;white-space:normal;overflow:visible;text-overflow:clip}
.pk-c5{flex:0 0 180px;white-space:normal}
.pk-c6{flex:0 0 96px;text-align:right}
.pk-name{font-weight:700;font-size:16px;color:#121a24;white-space:normal}
.pk-sub{font-size:12px;color:#7a838c;margin-top:2px;white-space:normal}
.pk-mono{font-variant-numeric:tabular-nums;letter-spacing:.2px;white-space:nowrap}
.pk-desc{padding:0 14px 13px;margin-top:-4px;font-size:13px;line-height:1.5;color:#5b646d;
  border-top:1px solid #f0f2f4;padding-top:10px;white-space:normal}

.pill{display:inline-block;padding:3px 9px;font-size:10px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:#fff;background:#5a6470;margin:0 4px 2px 0}
.pill-active{background:#28a745}
.pill-monitoring{background:#17a2b8}
.pill-standby{background:#ff9800}
.pill-resolved,.pill-closed{background:#7d868f}
.pill-training{background:#dc3545}

.picker .empty{background:#fff;border:1px solid #dbe0e5;color:#6b747d}

@media (max-width:820px){
  .pk-wrap{padding:0 14px}
  .pk-topwrap{gap:12px}
  .pk-logo{width:38px;height:38px;flex:0 0 38px}
  .pk-title{font-size:18px}
  .pk-tabs{gap:18px;overflow-x:auto}
  .pk-search{flex-wrap:wrap;gap:8px}
  .pk-search input{flex:1 1 100%}
  .pk-row{padding:10px 0}
  .pk-main{flex-wrap:wrap}
  .pk-desc{padding:10px 14px 4px;margin-top:6px}
  .pk-row.pk-head{display:none}
  .pk-c{flex:1 1 auto;padding:2px 14px;white-space:normal;font-size:13px}
  .pk-c0{flex:1 1 100%}
  .pk-c1,.pk-c2,.pk-c3,.pk-c4{flex:0 0 auto;color:#6b747d}
  .pk-c1{min-width:0}
  .pk-c1:not(:empty)::before{content:"No. "}
  .pk-c2:not(:empty)::before{content:"Started "}
  .pk-c3:not(:empty)::before{content:"Ended "}
  .pk-c5{flex:1 1 100%;padding-top:8px}
  .pk-c6{flex:1 1 100%;text-align:left;padding-bottom:4px}
}

/* ---------- define the incident: a full page, not a modal ---------- */
.wizard{padding-bottom:96px}
.wz-steps{display:flex;gap:26px;overflow-x:auto}
.wz-step{display:flex;align-items:center;gap:8px;padding:14px 2px;
  font:600 13px "Segoe UI",system-ui,sans-serif;color:#8a939c;white-space:nowrap;
  border-bottom:3px solid transparent;margin-bottom:-1px}
.wz-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:#e3e7eb;color:#69737d;font-size:12px}
.wz-step.on{color:#0d1b2a;border-bottom-color:#007bff}
.wz-step.on .wz-num{background:#007bff;color:#fff}
.wz-step.done{color:#3f4a55}
.wz-step.done .wz-num{background:#28a745;color:#fff}

.wz-page{padding-top:22px}
.wz-title h2{font-size:23px;color:#121a24}
.wz-sub{margin:6px 0 20px;font-size:14px;color:#5b646d;line-height:1.5;max-width:78ch}

/* everything on screen at once, no scrolling list */
.wz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:10px}
.wz-grid-2{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
.wz-tile{position:relative;display:block;text-align:left;padding:15px 15px 15px 46px;background:#fff;
  border:1px solid #dbe0e5;border-left:4px solid #c4ccd4;cursor:pointer;
  font-family:"Segoe UI",system-ui,sans-serif;transition:border-color .12s}
.wz-tile:hover{border-color:#9dc4ea;border-left-color:#9dc4ea}
.wz-tile.on{border-color:#007bff;border-left-color:#007bff;background:#f4f9ff}
.wz-check{position:absolute;left:14px;top:15px;width:20px;height:20px;border:1px solid #b6bfc8;
  background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;line-height:1}
.wz-tile.on .wz-check,.wz-subtile.on .wz-check{background:#007bff;border-color:#007bff}
.wz-tile-name{display:block;font-size:15px;font-weight:700;color:#121a24}
.wz-tile-desc{display:block;font-size:12.5px;color:#6b747d;margin-top:3px;line-height:1.45}

/* step 2 */
.wz-detail{display:flex;flex-direction:column;gap:22px}
.wz-dhead{font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:#4a545e;
  padding-bottom:7px;border-bottom:1px solid #dbe0e5;margin-bottom:10px}
.wz-dsubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.wz-subtile{position:relative;display:block;text-align:left;padding:12px 12px 12px 42px;background:#fff;
  border:1px solid #dbe0e5;cursor:pointer;font-family:"Segoe UI",system-ui,sans-serif}
.wz-subtile:hover{border-color:#9dc4ea}
.wz-subtile.on{border-color:#007bff;background:#f4f9ff}
.wz-subtile .wz-check{left:12px;top:12px;width:18px;height:18px}

.wz-spine{margin-top:26px;padding:15px;background:#f1f4f6;border:1px solid #e2e6ea}
.wz-spine h3{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:#4a545e;margin-bottom:10px}
.wz-chips{display:flex;flex-wrap:wrap;gap:6px}
.wz-chip{display:inline-block;padding:4px 10px;background:#fff;border:1px solid #d3d9df;
  font-size:12px;color:#4a545e}
.wz-chip-cat{background:#14202f;border-color:#14202f;color:#fff;font-weight:600}

/* step 4 */
.wz-summary{margin:0 0 20px;padding:14px 15px;background:#f1f4f6;border:1px solid #e2e6ea}
.wz-form{background:#fff;border:1px solid #dbe0e5;padding:18px 20px;max-width:760px}
.wz-form .frow{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.wz-form .frow > label{flex:0 0 176px;font-size:12px;font-weight:700;color:#444;padding-top:8px}
.wz-form .frow > input,.wz-form .frow > select,.wz-form .frow > textarea{flex:1 1 240px;min-width:0}
.wz-form h3{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:#4a545e;
  margin:20px 0 12px;padding-top:16px;border-top:1px solid #eef1f4}
.wz-form h3:first-child{margin-top:0;padding-top:0;border-top:none}

/* footer sits at the bottom of the window, always reachable */
.wz-footbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #d6dade;z-index:3}
.wz-footwrap{display:flex;align-items:center;gap:10px;justify-content:flex-end;padding-top:12px;padding-bottom:12px}
.wz-count{margin-right:auto;font-size:12px;font-weight:600;color:#66707a;
  text-transform:uppercase;letter-spacing:.7px}

@media (max-width:820px){
  .wz-steps{gap:16px}
  .wz-step span:not(.wz-num){display:none}
  .wz-step.on span:not(.wz-num){display:inline}
  .wz-grid,.wz-grid-2,.wz-dsubs{grid-template-columns:1fr}
  .wz-form .frow > label{flex:0 0 100%;padding-top:0}
  .wz-form{padding:14px}
}


/* heading with the training toggle beside it */
.wz-titleline{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.wz-tg{display:flex;align-items:center;gap:9px}
.switch{position:relative;flex:0 0 44px;width:44px;height:24px;border-radius:12px;border:none;
  background:#c4ccd4;cursor:pointer;padding:0;transition:background .15s}
.switch.on{background:#dc3545}
.switch-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:left .15s}
.switch.on .switch-knob{left:23px}
.wz-tg-label{font-size:13px;font-weight:600;color:#5b646d}
.switch.on + .wz-tg-label{color:#dc3545}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- maps ---------- */
/* One professional linear row that fits without scrolling: the bar and its
   groups do not wrap and there is no sideways scroll. Buttons are compact, the
   two label toggles collapse into one "Labels" dropdown, and the opacity and
   segment sliders are small percentage boxes, so the whole set sits on one line. */
.map-bar{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;margin:0 0 12px}
.map-bar .btn{padding:5px 10px;font-size:12px}
.map-bar .spacer{flex:1 1 auto;min-width:8px}

/* the professional two-row top bar: a context row over an actions row, on a
   soft panel so the whole thing reads as one toolbar rather than loose buttons */
/* Kevin: "the background, I'd like it darker, to match our left nav menu - the
   same color there. Be careful of the text, we need the contrasting text." So
   the bar is the nav's charcoal (#2b2b2b), and the plain text sitting on it -
   the small labels and the slider readouts - is turned light to stay readable.
   The white controls (dropdowns, search box, chips, the action icons Kevin
   asked to keep as they are, and the blue Publish) carry their own text and
   read fine on the dark. */
.map-bar.map-bar-2{flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;
  background:#2b2b2b;border:1px solid #202020;border-radius:8px;padding:7px 10px}
.map-bar-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-height:34px}
.map-bar-row + .map-bar-row{margin-top:6px;padding-top:7px;border-top:1px solid #3a3a3a}
/* the bar's bare text, turned light for the dark background */
.map-bar-2 .map-view-name{color:#e6e6e6}
.map-bar-2 .map-op-l{color:#c2c8ce}
.map-bar-2 .map-op-v{color:#e9ecef}
.map-bar-2 .map-bar-sep{background:#4a4a4a}
/* icon action button: one flat symbol, square, in the button's own color */
.map-ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:30px;
  padding:0;background:#fff;border:1px solid #cdd4db;border-radius:5px;color:#41505f;
  cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.map-ic svg{display:block}
.map-ic:hover{background:#eef4fb;border-color:#9dc2ee;color:#12467e}
.map-ic:focus-visible{outline:2px solid #1976d2;outline-offset:1px}
.map-ic.on{background:#007bff;border-color:#0060d0;color:#fff}
/* the three deletes: neutral until hovered, then clearly destructive */
.map-ic-del:hover{background:#fdecec;border-color:#e39a9a;color:#c0392b}
/* the compact percentage box that replaced each slider */
.map-pct{width:52px;padding:4px 5px;border:1px solid #c8ced4;background:#fff;font-size:12px}
/* the Labels dropdown */
.map-labels{position:relative;display:inline-flex}
.map-labels-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:50;background:#fff;
  border:1px solid #c8ced4;border-radius:4px;padding:6px 8px;display:flex;flex-direction:column;
  gap:5px;box-shadow:0 4px 14px rgba(0,0,0,.16);white-space:nowrap}
.map-labels-menu.hidden{display:none}
.map-labels-opt{display:flex;align-items:center;gap:6px;font-size:12px;color:#33404d;cursor:pointer}
/* below a narrow width, drop the small control labels rather than scroll */
@media (max-width:1180px){ .map-bar .map-op-l{display:none} }
.map-layers{display:flex;gap:1px;background:#c8ced4;border:1px solid #c8ced4}
.map-layer{padding:8px 16px;background:#fff;border:none;cursor:pointer;
  font:600 13px "Segoe UI",system-ui,sans-serif;color:#5a6470}
.map-layer:hover{background:#f0f4f8}
.map-layer.on{background:#007bff;color:#fff}
.map-flag{font-size:12px;font-weight:600;color:#28a745;letter-spacing:.4px;min-width:70px}
.map-flag.bad{color:#dc3545}
.map-hint{font-size:12px;color:#78828c;margin-left:auto}
.map-wrap{position:relative;border:1px solid #ccc;background:#eef0f1;
  height:calc(100dvh - 210px);min-height:420px}
.map-frame{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:820px){
  .map-hint{display:none}
  .map-wrap{height:calc(100dvh - 230px);min-height:340px}
}


/* dashboard prose */
.dash-text{margin:0;padding:14px 16px;background:#fff;border:1px solid #dee2e6;
  font-size:14px;line-height:1.55;color:#3c4650;white-space:pre-wrap;max-width:900px}

/* ICS 201 briefing */
.brief{display:flex;flex-direction:column;gap:1px;background:#dee2e6;border:1px solid #dee2e6;max-width:900px}
.brief-block{display:flex;gap:14px;background:#fff;padding:12px 16px}
.brief-no{flex:0 0 26px;font:700 12px "Segoe UI",system-ui,sans-serif;color:#8b949d;padding-top:2px}
.brief-body{flex:1;min-width:0}
.brief-title{font-size:11px;font-weight:700;color:#6b747d;text-transform:uppercase;letter-spacing:.7px}
.brief-value{font-size:14px;color:#1a1a1a;margin-top:3px;white-space:pre-wrap;line-height:1.5}

/* ---------- the bar across the top of the incident ---------- */
.tb{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:0 26px;height:48px;
  background:#14202f;color:#fff;border-bottom:2px solid #007bff;flex:0 0 auto}
.tb.training{border-bottom-color:#dc3545}
.tb-name{font-size:15px;font-weight:700;letter-spacing:.2px}
.tb-num{margin-left:10px;font-weight:400;font-size:13px;color:#8fa8c4;font-variant-numeric:tabular-nums}
.tb-flag{padding:3px 9px;background:#dc3545;font-size:10px;font-weight:700;letter-spacing:.8px}
.tb-status{padding:3px 9px;background:#20304a;font-size:11px;font-weight:600;color:#cfe0f2;
  text-transform:uppercase;letter-spacing:.6px}
.tb-clock{font-size:12px;color:#8fa8c4;font-variant-numeric:tabular-nums}
.tb-slots{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.tb-cell{display:flex;flex-direction:column;line-height:1.15}
.tb-k{font-size:8.5px;text-transform:uppercase;letter-spacing:.8px;color:#7d94ad}
.tb-v{font-size:12px;color:#dbe6f2;font-variant-numeric:tabular-nums}
.tb-cell.tb-soon .tb-v{color:#ffc75f;font-weight:700}
.tb-change{margin-left:auto;background:none;border:none;color:#8ab4f8;cursor:pointer;
  font:600 12px "Segoe UI",system-ui,sans-serif}
.tb-change:hover{color:#fff}

/* the app sits below the bar */
.app{display:flex;min-height:100dvh}
/* the frame is the full window: top bar, then sidebar and content filling
   what is left. The sidebar stays full height however short the menu gets. */
.app-col{display:flex;flex-direction:column;min-height:100dvh}
.app-body{display:flex;flex:1 1 auto;min-height:0;align-items:stretch}
.app-body .sidebar{align-self:stretch}

/* ---------- sidebar sections, collapsible ---------- */
.mi-section{display:flex;align-items:center;gap:7px;width:100%;padding:15px 18px 6px;
  background:none;border:none;cursor:pointer;text-align:left;
  font:700 10.5px "Segoe UI",system-ui,sans-serif;color:#7c8896;
  text-transform:uppercase;letter-spacing:1.1px}
.mi-section:hover{color:#c9d1d9}
.mi-caret{font-size:9px;line-height:1;opacity:.8}
.mi-section.shut{padding-bottom:10px}

@media (max-width:820px){
  .tb{padding:0 14px;height:auto;padding-top:8px;padding-bottom:8px;gap:8px}
  .tb-clock,.tb-status{display:none}
  .tb-slots{gap:12px}
  .tb-slots .tb-cell:nth-child(n+3){display:none}
}

/* ---------- command: operational period bar ---------- */
.op-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 14px;
  background:#fff;border:1px solid #dee2e6;margin:0 0 16px}
.op-pick{padding:7px 8px;border:1px solid #ccc;background:#fff;font:600 13px "Segoe UI",system-ui,sans-serif}
.op-when{font-size:12px;color:#666}
.op-bar .spacer{flex:1}
.op-text{max-width:820px;margin:0 0 14px}

/* ---------- command: notes and section headings ---------- */
.note{padding:11px 14px;border:1px solid #dee2e6;background:#fff;margin:0 0 16px;font-size:13px}
.note.ok{border-left:4px solid #28a745}
.note.warn{border-left:4px solid #e0a800;background:#fffdf5}
.note ul{margin:6px 0 0 18px}
.note li{margin:2px 0}
.sec-head{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:#444;
  margin:18px 0 7px;padding-bottom:4px;border-bottom:1px solid #dee2e6}

/* ---------- objectives ---------- */
.obj-table td.obj-text{white-space:normal;min-width:320px}
.obj-table td.drag{cursor:grab;color:#999;text-align:center;width:26px;user-select:none}
.obj-table td.num{width:34px;font-weight:700}
.obj-table td.right{text-align:right}
.obj-table td.right .btn{margin-left:6px}
.obj-table tr[draggable=true]{background:#fff}
.tag{display:inline-block;margin-left:8px;padding:1px 6px;background:#eef3fb;color:#31659c;
  font-size:11px;border:1px solid #d3e0f2}
.flag{color:#c00;font-weight:700}
.obj-bar{height:5px;background:#e9ecef;margin-top:5px;width:120px}
.obj-fill{height:5px;background:#28a745}

/* ---------- log ---------- */
tbody tr.sig td{background:#fffdf5}
td .why{font-size:12px;color:#555;margin-top:3px;white-space:normal}
td.nowrap{white-space:nowrap}

/* ---------- approvals and signatures ---------- */
.sig-k{display:block;font-size:12px;font-weight:700;color:#444;margin:10px 0 4px}
.sig-name{width:100%;max-width:420px}
.sig-write{width:100%;max-width:420px;font-family:"Segoe Script","Brush Script MT",cursive;font-size:19px}
.pick{display:flex;align-items:flex-start;gap:9px;padding:6px 0;font-size:13px;cursor:pointer}
.pick input{margin-top:3px}

/* ---------- organization ---------- */
.tabs + .tw, .tabs + div > .tw{margin-top:0}
tr.vacant td{color:#888;background:#fcfcfc}
.vacant-tag{display:inline-block;padding:1px 7px;background:#fdeded;color:#a3272c;
  border:1px solid #f2c6c6;font-size:11px;font-weight:700}
.org-chart{background:#fff;border:1px solid #ccc;padding:14px 16px}
.org-node{border-left:3px solid #007bff;padding:7px 11px;margin:4px 0;background:#f7f9fc;cursor:grab}
.org-node.org-vacant{border-left-color:#c8ccd0;background:#fbfbfb}
.org-pos{font-weight:700;font-size:13px}
.org-who{font-size:12px;color:#555}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 18px;
  background:#fff;border:1px solid #dee2e6;padding:14px 16px;margin:0 0 16px;max-width:1000px}
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:12px;font-weight:700;color:#444}
td.wrap{white-space:normal;min-width:220px}

/* ---------- the commander's dashboard ---------- */
.dash{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;align-items:start}
.w{background:#fff;border:1px solid #dee2e6;border-top:3px solid #007bff;padding:0 0 12px}
.w.w-wide{grid-column:1 / -1}
.w.w-alert{border-top-color:#dc3545}
.w.w-act{border-top-color:#e0a800}
.w-head{display:flex;align-items:center;gap:10px;padding:11px 14px 8px;border-bottom:1px solid #eee}
.w-head h3{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:#444;flex:1}
.w-open{background:none;border:none;color:#007bff;font:600 12px "Segoe UI",system-ui,sans-serif;cursor:pointer}
.w-open:hover{text-decoration:underline}
.w-note{padding:12px 14px;font-size:12.5px;color:#666;line-height:1.45}
.w-list{padding:4px 0}
.w-line{display:flex;gap:12px;padding:6px 14px;font-size:13px;border-bottom:1px solid #f4f4f4}
.w-line:last-child{border-bottom:none}
.w-l{color:#666;flex:0 0 auto;min-width:96px;font-variant-numeric:tabular-nums}
.w-v{color:#1a1a1a;flex:1}
.w-line.w-hot .w-v{color:#c0392b;font-weight:700}
.w-bigs{display:flex;gap:6px;padding:10px 8px 4px;flex-wrap:wrap}
.w-big{padding:6px 14px;min-width:96px}
.w-n{font-size:27px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.w-t{font-size:11px;color:#666;text-transform:uppercase;letter-spacing:.5px;margin-top:5px}
.w-quote{padding:10px 14px;font-size:13px;color:#333;border-left:3px solid #dee2e6;margin:8px 14px;background:#fafbfc}
.w-map{display:block;width:100%;padding:26px 14px;background:#f3f6fa;border:none;border-top:1px solid #eee;
  color:#31659c;font:600 13px "Segoe UI",system-ui,sans-serif;cursor:pointer}
.w-map:hover{background:#e9f0f9}
.w-todo{display:block;width:100%;text-align:left;padding:10px 14px;background:none;border:none;
  border-bottom:1px solid #f4f4f4;font:13px "Segoe UI",system-ui,sans-serif;color:#1a1a1a;cursor:pointer}
.w-todo:hover{background:#fff8e6}

/* attention rows */
.att{display:flex;align-items:center;gap:11px;width:100%;padding:9px 14px;background:none;border:none;
  border-bottom:1px solid #f4f4f4;text-align:left;cursor:pointer;font:13px "Segoe UI",system-ui,sans-serif}
.att:hover{background:#fdf2f2}
.att-sev{flex:0 0 auto;padding:2px 7px;font-size:9.5px;font-weight:700;letter-spacing:.7px;color:#fff}
.att-critical .att-sev{background:#c0392b}
.att-warning .att-sev{background:#d19a00}
.att-text{flex:1;color:#1a1a1a}

/* objectives on the dashboard */
.obj-row{display:flex;align-items:baseline;gap:10px;padding:7px 14px;border-bottom:1px solid #f4f4f4;font-size:13px}
.obj-n{font-weight:700;min-width:16px}
.obj-t{flex:1}
.obj-s{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#666}
.obj-met{color:#1e7e34;font-weight:700}
.obj-in_progress{color:#31659c}
.obj-not_met{color:#c0392b;font-weight:700}
.obj-a{font-size:11px;color:#888;min-width:76px;text-align:right}

/* timeline */
.tl{position:relative;height:34px;margin:14px;background:linear-gradient(#dee2e6,#dee2e6) left 50%/100% 2px no-repeat}
.tl-dot{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
  background:#007bff;border:2px solid #fff;box-shadow:0 0 0 1px #b9c6d4}
.tl-dot.tl-period{background:#6c757d}
.tl-dot.tl-transfer{background:#e0a800}
.tl-dot.tl-decision{background:#28a745}
.tl-dot.tl-safety{background:#dc3545}
.tl-scale{display:flex;justify-content:space-between;padding:0 14px 6px;font-size:11px;color:#888}

/* wall mode: a projector at base, read from across the room */
body.wall .sidebar{display:none}
body.wall .page-head .btn{display:none}
/* the way out of wall mode is never hidden by wall mode */
body.wall .page-head .btn.wall-toggle{display:inline-block;background:#dc3545;padding:12px 22px;font-size:16px}
body.wall .page-head{position:sticky;top:0;z-index:5;background:#eef0f1;padding:8px 0}
body.wall .page-head h2{font-size:26px}
body.wall .content{padding:14px}
body.wall .dash{grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:18px}
body.wall .w-head h3{font-size:15px}
body.wall .w-line,body.wall .att,body.wall .obj-row{font-size:17px;padding:10px 16px}
body.wall .w-n{font-size:42px}
body.wall .w-t{font-size:13px}
.ro{font-size:14px;padding:7px 0;border-bottom:1px solid #eee;color:#1a1a1a}

/* ---------- safety and public information ---------- */
td.risk{font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.5px}
.risk-low{color:#1e7e34}
.risk-moderate{color:#8a6d00}
.risk-high{color:#c0392b}
.risk-extreme{color:#fff;background:#c0392b;text-align:center}
.pill{display:inline-block;padding:2px 8px;font-size:11px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;border:1px solid #dee2e6;background:#f4f6f8;color:#444}
.pill-draft{background:#f4f6f8;color:#555}
.pill-pending{background:#fff4d6;color:#8a6d00;border-color:#f0d99b}
.pill-approved{background:#e8f6ec;color:#1e7e34;border-color:#bfe3ca}
.pill-published{background:#e8f0fb;color:#31659c;border-color:#c3d7f2}

/* ---------- dashboard placeholders ---------- */
.w.w-waiting{border-top-color:#b9c1c9;background:#fbfcfd}
.w-tag{padding:2px 7px;background:#eceff2;color:#6b7681;font-size:9.5px;font-weight:700;
  letter-spacing:.7px;text-transform:uppercase;border:1px solid #dde2e7}
.w-waiting{padding:10px 14px 4px}
.w-waiting p{font-size:12.5px;color:#5c6670;line-height:1.5;margin:0 0 9px}
.w-waiting p:first-child{color:#1a1a1a;font-weight:600}

/* ---------- weather ---------- */
.wx-alert{display:flex;gap:10px;align-items:baseline;padding:8px 14px;font-size:12.5px;
  border-bottom:1px solid #f4f4f4;background:#fff8e6}
.wx-alert.wx-severe,.wx-alert.wx-extreme{background:#fdeded}
.wx-alert-k{flex:0 0 auto;font-weight:700;text-transform:uppercase;font-size:10px;
  letter-spacing:.6px;color:#a3272c}
.wx-foot{padding:9px 14px 2px;font-size:11px;color:#8a939c;border-top:1px solid #f4f4f4;margin-top:6px}
.wx-foot.stale{color:#a3272c;font-weight:600}

/* ---------- operations: the assignment pipeline ---------- */
.pipe{display:flex;gap:1px;background:#dee2e6;border:1px solid #dee2e6;margin:0 0 16px;overflow-x:auto}
.pipe-cell{flex:1 1 0;min-width:96px;background:#fff;border:none;padding:12px 10px;cursor:pointer;
  text-align:left;font:inherit}
.pipe-cell:hover{background:#f2f7fd}
.pipe-cell.on{background:#e8f0fb;box-shadow:inset 0 -3px 0 #007bff}
.pipe-cell.zero{color:#aab2bb}
.pipe-n{display:block;font-size:22px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.pipe-t{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:#666;margin-top:6px}
.pipe-cell.zero .pipe-t{color:#b7bec6}

/* assignment states */
.pill-drafted{background:#f4f6f8;color:#555}
.pill-assigned{background:#e8f0fb;color:#31659c;border-color:#c3d7f2}
.pill-briefed{background:#eef3fb;color:#31659c;border-color:#c3d7f2}
.pill-deployed{background:#e8f6ec;color:#1e7e34;border-color:#bfe3ca}
.pill-in_progress{background:#e8f6ec;color:#1e7e34;border-color:#bfe3ca}
.pill-returning{background:#fff4d6;color:#8a6d00;border-color:#f0d99b}
.pill-returned{background:#fff4d6;color:#8a6d00;border-color:#f0d99b}
.pill-debriefed{background:#eef3fb;color:#31659c;border-color:#c3d7f2}
.pill-closed{background:#f4f6f8;color:#777}
.pill-suspended{background:#fdeded;color:#a3272c;border-color:#f2c6c6}
.pill-cancelled{background:#f4f6f8;color:#999}
.pill-released,.pill-airborne,.pill-on_station{background:#e8f6ec;color:#1e7e34;border-color:#bfe3ca}
.pill-taxi,.pill-landed{background:#fff4d6;color:#8a6d00;border-color:#f0d99b}

/* field reports: big targets, because this is used one handed with gloves on */
.report-pad{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 18px}
.report-btn{display:flex;flex-direction:column;gap:4px;padding:18px 14px;background:#fff;
  border:1px solid #ccd3da;border-left:4px solid #007bff;cursor:pointer;text-align:left;font:inherit}
.report-btn:hover{background:#f2f7fd}
.report-l{font-size:15px;font-weight:700}
.report-r{font-size:11px;color:#777;text-transform:uppercase;letter-spacing:.5px}
.report-clue,.report-sighting{border-left-color:#28a745}
.report-hazard{border-left-color:#dc3545}
.report-request{border-left-color:#e0a800}

/* ---------- planning: the worksheet grids ---------- */
table.ws td.rowhead{min-width:230px;white-space:normal}
table.ws td.rowhead .ws-line{display:inline-block;min-width:30px;font-weight:700;color:#31659c;
  font-variant-numeric:tabular-nums}
table.ws td.rowhead .ws-unit{margin-left:7px;font-size:11px;color:#777;font-weight:400}
table.ws td.rowhead .ws-manual{margin-left:8px;padding:1px 6px;background:#fff4d6;color:#8a6d00;
  border:1px solid #f0d99b;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
table.ws td.calc{background:#f7f9fc;font-variant-numeric:tabular-nums}
table.ws td.calc.off{background:#fdeded;color:#a3272c;font-weight:700}
table.ws td.psr{background:#eef3fb;font-weight:700}
td.calc{font-variant-numeric:tabular-nums}

/* ---------- incident briefing: the captured map ---------- */
.brief-capture{background:#fff;border:1px solid #dee2e6;padding:10px;margin:0 0 14px;max-width:900px}
.brief-capture img{display:block;width:100%;height:auto;border:1px solid #e6e6e6}
.brief-capture .hint{margin-top:8px}

/* ---- the organization chart, ICS 207 and ICS 201 block 9 ---- */
.oc-wrap{overflow-x:auto;padding:14px 0 4px;margin:0 0 12px}
.oc{display:inline-block;min-width:100%;text-align:center;white-space:nowrap}
.oc-branch{display:inline-block;vertical-align:top;position:relative;padding:22px 8px 0}
.oc-branch::before,.oc-branch::after{content:'';position:absolute;top:0;width:50%;height:22px;
  border-top:2px solid #c8ccd0}
.oc-branch::before{right:50%;border-right:2px solid #c8ccd0}
.oc-branch::after{left:50%}
.oc-branch:only-child::before,.oc-branch:only-child::after{display:none}
.oc-branch:first-child::before,.oc-branch:last-child::after{border-top:0}
.oc > .oc-branch{padding-top:0}
.oc > .oc-branch::before,.oc > .oc-branch::after{display:none}
.oc-kids{position:relative;padding-top:22px;white-space:nowrap}
.oc-kids::before{content:'';position:absolute;top:0;left:50%;height:22px;
  border-left:2px solid #c8ccd0}
.oc-box{display:inline-block;min-width:150px;max-width:230px;white-space:normal;
  border:1px solid #adb5bd;border-top:3px solid #007bff;background:#fff;
  padding:7px 10px;text-align:left;cursor:grab;vertical-align:top}
.oc-box.oc-empty{border-top-color:#c8ccd0;background:#fbfbfb}
.oc-box.oc-target{outline:2px solid #28a745;outline-offset:2px}
.oc-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#333}
.oc-desig{display:inline-block;margin-left:6px;font-weight:400;text-transform:none;
  letter-spacing:0;color:#31659c}
.oc-who{font-size:13px;color:#111;margin-top:3px}
.oc-who.oc-vacant{color:#a3272c;font-style:italic}
.oc-span{margin-top:4px;font-size:11px;color:#a06800}
.tag.tag-red{background:#fdeded;color:#a3272c}

/* ---- safety reporting, on the incident bar, on every screen ---- */
.sf-bar{display:flex;gap:6px;margin:0 12px 0 0}
.sf-btn{font:600 11px/1 -apple-system,Segoe UI,sans-serif;text-transform:uppercase;
  letter-spacing:.5px;padding:7px 11px;border:1px solid transparent;cursor:pointer;
  border-radius:0;white-space:nowrap}
.sf-btn:hover{filter:brightness(1.08)}
.sf-stop{background:#c62828;color:#fff;border-color:#8e1f1f}
.sf-injury{background:#fff;color:#a3272c;border-color:#a3272c}
.sf-hazard{background:#fff;color:#8a6100;border-color:#c99a2e}
@media (max-width:900px){
  .sf-bar{gap:4px;margin-right:6px}
  .sf-btn{padding:8px 8px;font-size:10px}
}
.link-btn{background:none;border:0;padding:0;color:#31659c;text-decoration:underline;
  cursor:pointer;font:inherit;text-align:left}
.link-btn:hover{color:#1c4a7d}

/* ---------- the incident map, MapLibre in the page ---------- */
.map-host{position:absolute;inset:0}
.ml-canvas{position:absolute;inset:0;width:100%;height:100%}
/* the cursor tool is an ordinary arrow; only a live drawing tool gets a crosshair */
.ml-canvas:not(.sv-drawing) .maplibregl-canvas{cursor:default !important}
.map-sep{align-self:center;padding:0 10px;font-size:11px;text-transform:uppercase;
  letter-spacing:.6px;color:#8a949e;background:#fff}
.map-op{display:flex;align-items:center;gap:8px}
.map-op-k{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#66707a}
.map-op-slider{width:110px}
.map-fmt{font-size:12px;padding:6px 8px}
.map-readout{position:absolute;left:0;bottom:0;z-index:2;pointer-events:none;
  background:rgba(255,255,255,.92);border-top:1px solid #d5dae0;border-right:1px solid #d5dae0;
  padding:5px 12px;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#333}
.map-coverage{display:none}
.map-coverage.on{display:block;position:absolute;left:50%;top:12px;transform:translateX(-50%);
  z-index:3;background:#fffdf5;border:1px solid #e0c37a;border-left:4px solid #e0a800;
  padding:8px 14px;font-size:12px;color:#5c4a12;max-width:70%;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.map-pick{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;gap:12px;background:#eaf2fd;border:1px solid #9dc2ee;
  border-left:4px solid #007bff;padding:8px 14px;font-size:13px;color:#1c4a7d;
  box-shadow:0 2px 8px rgba(0,0,0,.12)}
.map-pick.hidden{display:none}
.maplibregl-ctrl-attrib{font-size:10px}
.maplibregl-ctrl-bottom-left{margin-bottom:26px}

/* ---------- the map: tools, panels, labels ---------- */
.map-shell{display:grid;grid-template-columns:124px 1fr 320px;gap:0;
  border:1px solid #ccc;height:calc(100dvh - 200px);min-height:460px}
/* a map with no drawing has no tools column, so the map takes the width the
   tools would have had */
.map-shell.map-shell-read{grid-template-columns:1fr 320px}
.map-view-name{font:600 12px/1 system-ui,sans-serif;color:#33404d;letter-spacing:.3px}
/* what a published view is showing, said on the map rather than in a menu */
.map-pub{position:absolute;left:10px;bottom:34px;z-index:3;max-width:520px;
  background:rgba(255,255,255,.94);border-left:3px solid #1565c0;padding:6px 10px;
  font:12px/1.45 system-ui,sans-serif;color:#25303a;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.map-pub.warn{border-left-color:#e65100;background:rgba(255,248,240,.96);color:#8a4b00}
.map-shell .map-wrap{position:relative;border:0;border-left:1px solid #ccc;
  border-right:1px solid #ccc;height:auto;min-height:0}
.map-tools{display:flex;flex-direction:column;background:#f4f6f8;overflow-y:auto;padding:6px}
.map-tool{display:block;width:100%;padding:9px 6px;margin:0 0 3px;background:#fff;
  border:1px solid #d5dae0;cursor:pointer;font-size:11px;text-transform:uppercase;
  letter-spacing:.4px;color:#3a4650}
.map-tool:hover{background:#eaf2fd;border-color:#9dc2ee}
.map-tool.on{background:#007bff;border-color:#0060d0;color:#fff}
.map-tool-sep{height:1px;background:#d5dae0;margin:6px 2px}
.map-side{background:#fff;overflow-y:auto;display:flex;flex-direction:column}
.map-side-tabs{display:flex;border-bottom:1px solid #d5dae0;position:sticky;top:0;
  background:#fff;z-index:2}
.map-side-tab{flex:1;padding:10px 6px;background:#f4f6f8;border:0;border-right:1px solid #d5dae0;
  cursor:pointer;font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:#5a656f;
  white-space:nowrap}
.map-side-tab.on{background:#fff;color:#111;font-weight:700;box-shadow:inset 0 -2px 0 #007bff}
.map-measure{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #9dc2ee;
  border-left:4px solid #2196f3;padding:8px 14px;font-size:13px;
  box-shadow:0 2px 8px rgba(0,0,0,.14)}
.map-measure.hidden{display:none}
.map-measure-legs{color:#66707a;font-size:12px}
.sv-panel{padding:12px}
.sv-panel-empty{padding:20px 12px;color:#78828c;font-size:13px}
.sv-panel-head{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.sv-panel-title{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.sv-panel-sub{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#5a656f;
  border-bottom:1px solid #e3e7eb;padding-bottom:4px;margin:16px 0 8px}
.sv-panel-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.sv-w{width:100%}
.sv-facts{background:#f7f9fb;border:1px solid #e3e7eb;padding:8px 10px;margin:10px 0}
.sv-fact{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:2px 0}
.sv-fact-k{color:#66707a}
.sv-fact-v{font-weight:600;text-align:right}
.sv-swatches{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 4px}
.sv-swatch{width:24px;height:24px;border:2px solid #d5dae0;cursor:pointer;padding:0}
.sv-swatch.on{border-color:#111;box-shadow:0 0 0 2px #fff inset}
.sv-swatch-none{background:#fff;color:#a3272c;font-weight:700;line-height:1}
.sv-range{width:100%}
.sv-list{display:flex;flex-direction:column;min-height:0}
.sv-list-bar{display:flex;gap:4px;padding:8px;border-bottom:1px solid #e3e7eb;flex-wrap:wrap}
.sv-search{flex:1;min-width:110px;font-size:12px;padding:5px 7px}
.sv-filter{font-size:12px;padding:5px}
.sv-list-body{overflow-y:auto}
.sv-list-bulk{display:none}
.sv-list-bulk.on{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px;
  background:#eaf2fd;border-top:1px solid #9dc2ee;font-size:12px}
.sv-folder{display:flex;align-items:center;gap:8px;padding:7px 8px;background:#f4f6f8;
  border-top:1px solid #e3e7eb;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:#5a656f}
.sv-folder-name{font-weight:700}
.sv-folder-count{margin-left:auto;color:#8a949e}
.sv-row{display:flex;align-items:center;gap:6px;padding:6px 8px;border-top:1px solid #f0f2f4;
  cursor:pointer}
.sv-row:hover{background:#f7f9fb}
.sv-row.on{background:#eaf2fd}
.sv-row-pick{margin:0}
.sv-row-eye{border:0;background:none;cursor:pointer;font-size:10px;text-transform:uppercase;
  letter-spacing:.4px;color:#2e7d32;padding:2px 4px}
.sv-row-eye.off{color:#a3272c;text-decoration:line-through}
.sv-row-main{flex:1;min-width:0}
.sv-row-title{font-size:13px;font-weight:600;color:#111;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-row-sub{font-size:11px;color:#78828c;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.sv-row-acts{display:flex;flex-direction:column}
.sv-row-move{border:0;background:none;cursor:pointer;font-size:9px;color:#8a949e;padding:0 3px}
.sv-row-move:hover{color:#007bff}
.sv-map-label{background:rgba(255,255,255,.86);border:1px solid #c8ced4;padding:1px 5px;
  font:600 11px system-ui,sans-serif;color:#111;white-space:nowrap;pointer-events:none;
  border-radius:2px}
.sv-map-label.on{border-color:#007bff;box-shadow:0 0 0 2px rgba(0,123,255,.25)}
.sv-map-text{background:none;border:0;padding:0;box-shadow:none}
@media (max-width:1100px){
  .map-shell{grid-template-columns:118px 1fr;height:calc(100dvh - 190px)}
  .map-shell.map-shell-read{grid-template-columns:1fr}
  .map-side{display:none}
}
.w-map-thumb{display:block;width:100%;height:auto;border:1px solid #d5dae0;cursor:pointer}
.w-map-when{font-size:11px;color:#78828c;margin:6px 0 8px}
.map-flash{display:none}
.map-flash.on{display:block;position:absolute;left:50%;bottom:70px;transform:translateX(-50%);
  z-index:5;background:#111;color:#fff;padding:7px 16px;font-size:12px;letter-spacing:.3px;
  border-radius:2px;opacity:.92;pointer-events:none}
.map-snap{padding:7px 12px;background:#fff;border:1px solid #c8ced4;cursor:pointer;
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#5a656f}
.map-snap.on{background:#2e7d32;border-color:#1f5c23;color:#fff}
/* One toggle switch for the ground map / air map, in place of two buttons. */
.map-kind-toggle{position:relative;display:inline-flex;align-items:stretch;padding:2px;
  border:1px solid #c8ced4;background:#eef1f4;cursor:pointer;border-radius:14px;
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;line-height:1;
  -webkit-user-select:none;user-select:none}
.map-kind-toggle .mkt-label{position:relative;z-index:1;flex:1 1 0;min-width:52px;
  padding:6px 12px;text-align:center;color:#5a656f;transition:color .15s}
.map-kind-toggle .mkt-knob{position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);
  background:#2e7d32;border-radius:12px;transition:transform .15s;z-index:0}
.map-kind-toggle.air .mkt-knob{transform:translateX(100%)}
.map-kind-toggle:not(.air) .mkt-ground{color:#fff}
.map-kind-toggle.air .mkt-air{color:#fff}
.sv-icons{border:1px solid #e3e7eb;background:#fafbfc;padding:6px;margin:2px 0 6px}
.sv-icons-bar{display:flex;gap:4px;margin-bottom:6px}
.sv-icon-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;
  max-height:150px;overflow-y:auto}
.sv-icon{background:#fff;border:1px solid #e3e7eb;cursor:pointer;font-size:16px;
  line-height:1;padding:5px 0;text-align:center}
.sv-icon:hover{background:#eaf2fd;border-color:#9dc2ee}
.sv-icon.on{background:#007bff;border-color:#0060d0}
.sv-map-icon{font-size:16px;line-height:1;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
  cursor:pointer}
.sv-map-icon.on{filter:drop-shadow(0 0 3px #007bff)}
.sv-nudge{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 8px}
.sv-nudge-b{padding:5px 9px;background:#fff;border:1px solid #d5dae0;cursor:pointer;
  font-size:11px;color:#3a4650}
.sv-nudge-b:hover{background:#eaf2fd;border-color:#9dc2ee}
.sv-types{display:flex;flex-wrap:wrap;gap:3px;padding:7px 8px;border-bottom:1px solid #e3e7eb;
  background:#fafbfc}
.sv-type{padding:3px 7px;background:#fff;border:1px solid #d5dae0;cursor:pointer;
  font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:#3a4650}
.sv-type.off{background:#f0f2f4;color:#a8b0b8;text-decoration:line-through}
.sv-grid-label{background:rgba(255,255,255,.82);padding:0 3px;
  font:600 10px ui-monospace,SFMono-Regular,Menlo,monospace;color:#33404d;
  pointer-events:none;border-radius:2px}
.map-grid-ctl{display:flex;gap:3px;align-items:center}
.sv-zoom{display:flex;flex-direction:column;align-items:stretch}
.sv-zoom-b{width:29px;height:29px;border:0;background:#fff;cursor:pointer;
  font:600 16px/1 system-ui,sans-serif;color:#33404d;padding:0}
.sv-zoom-b:hover{background:#f0f4f8}
.sv-zoom-level{font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#66707a;text-align:center;padding:3px 0;border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;background:#fafbfc}

/* ---------------------------------------------------------- Quick Actions */
.qa{position:relative;display:inline-block}
.qa-btn{padding:5px 11px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  color:#fff;cursor:pointer;font-size:12px;font-weight:600;letter-spacing:.2px}
.qa-btn:hover{background:rgba(255,255,255,.24)}
.qa-list{position:absolute;top:100%;right:0;margin-top:4px;z-index:400;min-width:260px;
  background:#fff;border:1px solid #c8ced4;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.qa-group{padding:6px 11px 3px;font:600 10px/1.4 system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.7px;color:#7b858f;background:#f6f8fa;
  border-bottom:1px solid #edf0f3}
.qa-item{display:block;width:100%;text-align:left;padding:8px 11px;background:#fff;
  border:0;border-bottom:1px solid #f0f2f4;cursor:pointer;font-size:13px;color:#25303a}
.qa-item:hover{background:#eaf2fd}
.qa-item .qa-l{display:block}
.qa-item .qa-h{display:block;font-size:11px;color:#818b95;margin-top:1px}
.qa-stop .qa-l{color:#c62828;font-weight:600}

/* -------------------------------------------------------------- the queue */
.q-badge{padding:4px 9px;background:#f9a825;border:0;color:#241c00;cursor:pointer;
  font-size:11px;font-weight:700;letter-spacing:.2px}
.q-badge.q-bad{background:#e53935;color:#fff}
.q-badge.hidden{display:none}
.q-panel{max-height:52vh;overflow:auto}
.q-top{display:flex;gap:9px;align-items:baseline;padding:7px 0 9px;border-bottom:1px solid #e6e9ec}
.q-n{font:700 20px/1 system-ui,sans-serif;color:#25303a}
.q-conn{margin-left:auto;font-size:11px;color:#7b858f}
.q-row{display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;padding:7px 0;
  border-bottom:1px solid #f0f2f4;font-size:12px}
.q-state{min-width:66px;font-weight:600;font-size:10px;text-transform:uppercase;
  letter-spacing:.5px;color:#66707a}
.q-uploading .q-state{color:#1565c0}
.q-failed .q-state{color:#c62828}
.q-label{font-weight:600;color:#25303a}
.q-urgent{background:#c62828;color:#fff;padding:0 5px;font-size:10px;font-weight:700}
.q-when,.q-size,.q-tries{color:#818b95;font-size:11px}
.q-err{color:#c62828;font-size:11px;flex-basis:100%}
.q-ask{font-size:14px;font-weight:600;color:#25303a;padding:2px 0 7px}

/* ------------------------------------------------------ coordinate control */
.cc{border:1px solid #dde2e7;background:#fbfcfd}
.cc-tabs{display:flex;border-bottom:1px solid #dde2e7;background:#f2f5f8}
.cc-tab{flex:1;padding:7px 6px;background:transparent;border:0;border-right:1px solid #e3e7eb;
  cursor:pointer;font-size:12px;color:#5a6570}
.cc-tab:last-child{border-right:0}
.cc-tab.on{background:#fff;color:#1565c0;font-weight:600;box-shadow:inset 0 -2px 0 #1565c0}
.cc-panel{padding:9px}
.cc-row{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.cc-lab{min-width:96px;font-size:11px;font-weight:600;color:#5a6570;
  text-transform:uppercase;letter-spacing:.4px}
.cc-group{display:flex;gap:4px;align-items:center}
.cc-deg{width:62px}
.cc-min{width:78px}
.cc-sec{width:70px}
.cc-dd{width:120px}
.cc-hemi{width:58px}
.cc-zone{width:70px}
.cc-sq{width:60px}
.cc-en{width:96px}
.cc-fmt{margin-bottom:8px}
.cc-confirm{padding:9px;border-top:1px solid #e6e9ec;background:#fff}
.cc-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:#7b858f;margin-bottom:5px}
.cc-empty{font-size:12px;color:#98a1aa;font-style:italic}
.cc-formats{display:grid;grid-template-columns:auto 1fr;gap:2px 12px}
.cc-fname{font-size:11px;color:#818b95}
.cc-fval{font:600 12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#25303a}
.cc-frow{display:contents}
.cc-primary .cc-fval{color:#1565c0}
.cc-meta{display:flex;gap:12px;margin-top:7px;font-size:11px;color:#7b858f}
.cc-acc{font-weight:600;color:#5a6570}
.cc-status{padding:7px 0;font-size:12px;color:#5a6570}
.cc-status.cc-ok{color:#2e7d32}
.cc-status.cc-bad{color:#c62828}
.cc-alt{display:flex;gap:6px;margin:6px 0}
.cc-addr{width:100%;max-width:420px}
.cc-preview{margin-top:7px}

/* --------------------------------------------------------- section inbox */
.ib-bar{display:flex;flex-wrap:wrap;gap:11px;align-items:center;padding:8px 0;
  border-bottom:1px solid #e3e7eb}
.ib-title{font-weight:700;font-size:13px;color:#25303a}
.ib-count{font-size:11px;color:#7b858f}
.ib-count.hot{background:#e53935;color:#fff;padding:1px 7px;font-weight:700}
.ib-views{margin-left:auto;display:flex}
.ib-view{padding:4px 11px;background:#fff;border:1px solid #d5dae0;cursor:pointer;font-size:12px}
.ib-view.on{background:#1565c0;border-color:#1565c0;color:#fff}
.ib-row{padding:9px 0;border-bottom:1px solid #f0f2f4}
.ib-row.ib-urgent{border-left:3px solid #c62828;padding-left:8px}
.ib-row.ib-closed{opacity:.62}
.ib-head{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.ib-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:1px 6px}
.ib-new{background:#e53935;color:#fff}
.ib-ack{background:#f9a825;color:#241c00}
.ib-done{background:#e8eaed;color:#5a6570}
.ib-kind{font-weight:600;color:#25303a}
.ib-when{font-size:11px;color:#7b858f}
.ib-flag{background:#c62828;color:#fff;padding:0 5px;font-size:10px;font-weight:700}
.ib-body{margin:4px 0;font-size:13px;color:#25303a}
.ib-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:#7b858f}
.ib-pos{cursor:pointer;color:#1565c0;text-decoration:underline;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ib-reason{color:#c62828}
.ib-actions{display:flex;gap:6px;margin-top:6px}
.ib-map{display:block}
.ib-map-side{max-height:52vh;overflow:auto}
.ib-map-actions{margin-top:7px}
.rp-delayed{display:inline-block;margin-left:7px;background:#fff3e0;color:#b26a00;
  padding:0 5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}

/* --------------------------------------------------------- field reports */
.fr-owed{display:flex;gap:9px;align-items:center;padding:7px 10px;margin-bottom:9px;
  background:#f2f5f8;border-left:3px solid #b9c2cb;font-size:12px;color:#5a6570}
.fr-owed.hot{background:#fdecea;border-left-color:#e53935;color:#8a1f1a}
.fr-owed-n{font:700 17px/1 system-ui,sans-serif}
.fr-queue{display:flex;gap:9px;align-items:center;padding:6px 10px;margin-bottom:9px;
  background:#fff8e1;border-left:3px solid #f9a825;font-size:12px;color:#6b5200}
.fr-queue-n{font:700 16px/1 system-ui,sans-serif}
.fr-filters{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:9px 0}
.fr-fl{font-size:11px;font-weight:600;color:#7b858f;text-transform:uppercase;letter-spacing:.4px}
.fr-state{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:1px 6px;white-space:nowrap}
.st-new{background:#e53935;color:#fff}
.st-part{background:#fb8c00;color:#fff}
.st-ack{background:#f9a825;color:#241c00}
.st-done{background:#e8f5e9;color:#2e7d32}
.st-log{background:#eceff1;color:#5a6570}
.fr-person{display:flex;gap:6px;align-items:center}
.fr-files{margin:6px 0}
.fr-filerow{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:5px 0;
  border-bottom:1px solid #f0f2f4;font-size:12px}
.fr-fn{font-weight:600}
.fr-fs,.fr-fl,.fr-fp{font-size:11px;color:#818b95}
.fr-cap{min-width:160px}
.fr-open-state{display:flex;gap:9px;align-items:center;margin-bottom:7px}
.fr-when{font-size:12px;color:#7b858f}
.fr-body{margin:7px 0;font-size:14px;color:#25303a}
.fr-pairs{margin:7px 0}
.fr-pair{display:flex;gap:11px;padding:2px 0;font-size:12px}
.fr-pk{min-width:130px;color:#7b858f}
.fr-pv{color:#25303a;font-weight:500}
.fr-routes{margin-top:9px;border-top:1px solid #e6e9ec;padding-top:7px}
.fr-route{display:flex;gap:9px;font-size:12px;padding:2px 0}
.fr-rd{min-width:90px;font-weight:600;color:#25303a}
.fr-atts{margin:7px 0}
.fr-att{display:flex;gap:9px;align-items:center;padding:4px 0;font-size:12px}
.fr-thumb{width:64px;height:48px;object-fit:cover;border:1px solid #dde2e7}

/* ------------------------------------------------------- approval pattern */
.appr-bar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:8px 10px;
  background:#f6f8fa;border:1px solid #e3e7eb;margin-bottom:11px}
.appr-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:2px 7px}
.st-draft{background:#eceff1;color:#5a6570}
.st-pending{background:#f9a825;color:#241c00}
.st-approved{background:#2e7d32;color:#fff}
.st-superseded{background:#cfd8dc;color:#546e7a}
.st-withdrawn{background:#e8eaed;color:#78848f}
.appr-v{font-size:11px;font-weight:600;color:#5a6570}
.appr-who{font-size:11px;color:#7b858f}
.appr-none{font-size:12px;color:#98a1aa;font-style:italic}
.appr-actions{margin-left:auto;display:flex;gap:6px}
.appr-hist{max-height:44vh;overflow:auto}
.appr-hrow{display:flex;gap:9px;align-items:center;padding:7px 0;border-bottom:1px solid #f0f2f4}

/* ------------------------------------------------------- navigation groups */
.mi-group{display:flex;align-items:center;gap:6px;width:100%;text-align:left;
  padding:6px 12px 6px 16px;background:transparent;border:0;cursor:pointer;
  font:600 10px/1.4 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.8px;
  color:#8d97a1}
.mi-group:hover{color:#cfd8e0}
.mi-caret{font-size:9px;width:9px}
.mi-gl{flex:1}
/* a heading inside a section: labels a run of items, opens nothing. Same
   treatment as a section heading, because it is the same kind of thing. */
.mi-head{padding:14px 18px 5px;font:700 10.5px "Segoe UI",system-ui,sans-serif;
  color:#7c8896;text-transform:uppercase;letter-spacing:1.1px}
.mi-badge{background:#e53935;color:#fff;border-radius:9px;padding:0 6px;
  font:700 10px/16px system-ui,sans-serif;min-width:17px;text-align:center}
.mi-l{flex:1;text-align:left}
.mi{display:flex;align-items:center;gap:7px}

/* the period screen */
.w-period{width:210px}
.w-small{width:80px}
.w-name{width:240px}
.w-sig{width:240px}
.check{display:flex;align-items:center;gap:6px;margin:6px 0;font-size:12px;color:#5a6570}

/* --------------------------------------------------- operations organization */
.oo-counts{display:flex;gap:20px;margin:9px 0}
.oo-count{display:flex;flex-direction:column;cursor:default}
.oo-count.hot .oo-n{color:#c62828}
.oo-n{font:700 24px/1 system-ui,sans-serif;color:#25303a}
.oo-l{font-size:11px;color:#7b858f;text-transform:uppercase;letter-spacing:.4px}
.oo-chart{border:1px solid #e3e7eb;background:#fbfcfd;padding:11px;overflow-x:auto}
.oo-node{border:1px solid #d5dae0;background:#fff;padding:8px 10px;margin-bottom:7px}
.oo-chief{background:#25303a;color:#fff;border-color:#25303a;display:inline-block;min-width:240px}
.oo-chief .oo-who{color:#c9d3dc}
.oo-branches{display:flex;gap:14px;flex-wrap:wrap;margin-top:11px}
.oo-branch{min-width:270px;flex:1}
.oo-btitle{font:600 12px/1.5 system-ui,sans-serif;color:#1565c0;cursor:pointer;
  padding-bottom:5px;border-bottom:2px solid #1565c0;margin-bottom:7px;
  display:flex;justify-content:space-between}
.oo-bn{font-weight:400;color:#7b858f;font-size:11px}
.oo-direct .oo-btitle{color:#5a6570;border-bottom-color:#b9c2cb}
.oo-kids{display:flex;flex-direction:column}
.oo-group{cursor:pointer}
.oo-group.on{border-color:#1565c0;box-shadow:0 0 0 2px #cfe2fb}
.oo-title{display:flex;gap:6px;align-items:center;font-weight:600;color:#25303a}
.oo-caret{background:none;border:0;cursor:pointer;font-size:10px;color:#7b858f;padding:0}
.oo-gname{flex:1}
.oo-gkind{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#7b858f;font-weight:400}
.oo-who{font-size:12px;color:#5a6570;margin-top:2px}
.oo-vacant{color:#c62828;font-style:italic}
.oo-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px;font-size:11px;color:#818b95}
.oo-ok{color:#2e7d32}
.oo-warn{color:#ef6c00;font-weight:600}
.oo-span{margin-top:5px;font-size:11px;color:#ef6c00;font-weight:600}
.oo-badge-hot{margin-top:5px;font-size:11px;color:#c62828;font-weight:700}
.oo-resources{margin-top:6px;border-top:1px solid #f0f2f4;padding-top:5px}
.oo-res{display:flex;gap:8px;align-items:center;padding:3px 0;font-size:12px}
.oo-res.hot{background:#fdecea;margin:0 -4px;padding:3px 4px}
.oo-rname{font-weight:600;color:#25303a;min-width:110px}
.oo-rlead{color:#7b858f;font-size:11px}
.oo-x{margin-left:auto;background:none;border:0;color:#7b858f;cursor:pointer;font-size:11px}
.oo-x:hover{color:#c62828}
.oo-none{font-size:11px;color:#98a1aa;font-style:italic;padding:3px 0}
.oo-tray{margin-top:12px;border:1px solid #e3e7eb;padding:9px;background:#fafbfc}
.oo-tray.full{border-color:#f9a825;background:#fffdf5;border-left:4px solid #f9a825}
.oo-tray-head{display:flex;gap:9px;align-items:baseline;font-weight:700;color:#25303a}
.oo-tray-n{background:#f9a825;color:#241c00;padding:0 8px;font-size:12px}
.oo-tray-list{margin-top:6px}
.oo-detail{margin:11px 0;border:1px solid #1565c0;background:#fff}
.oo-dhead{display:flex;justify-content:space-between;align-items:center;
  padding:8px 11px;background:#eaf2fd;border-bottom:1px solid #cfe2fb}
.oo-dtitle{font-weight:700;color:#0d47a1}
.oo-log{max-height:240px;overflow:auto}
.oo-logrow{display:flex;gap:9px;padding:3px 0;font-size:12px;border-bottom:1px solid #f5f7f8}
.oo-boundary{display:flex;flex-wrap:wrap;gap:7px;align-items:center}

/* ------------------------------------------------------------ status board */
.sb-pill{display:inline-block;padding:1px 7px;color:#fff;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.sb-alarm{animation:sbpulse 2.4s ease-in-out infinite}
@keyframes sbpulse{0%,100%{opacity:1}50%{opacity:.62}}
.sb-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:6px 0;
  border-bottom:1px solid #f0f2f4}
.sb-row.sb-hot{background:#fdecea;padding-left:6px;border-left:3px solid #c62828}
.sb-ident{min-width:190px;cursor:pointer}
.sb-name{font-weight:600;color:#25303a;display:block}
.sb-kind{font-size:11px;color:#7b858f}
.sb-meta{display:flex;gap:12px;font-size:11px;color:#7b858f;flex:1}
.sb-late{color:#c62828;font-weight:600}
.sb-actions{display:flex;gap:5px}
.sb-band{border:2px solid #c62828;background:#fdecea;padding:9px;margin:9px 0}
.sb-band-head{font-weight:700;color:#8a1f1a;margin-bottom:5px}
.sb-band-clear{padding:6px 9px;margin:9px 0;background:#f2f5f8;color:#5a6570;
  font-size:12px;border-left:3px solid #b9c2cb}
.sb-pos{font-size:12px;color:#5a6570}

/* ----------------------------------------------------------- resource status */
.rs-counters{display:flex;gap:22px;margin:11px 0}
.rs-counter{display:flex;flex-direction:column;cursor:pointer;padding:4px 8px;
  border:1px solid transparent}
.rs-counter:hover{border-color:#d5dae0;background:#fafbfc}
.rs-counter.on{border-color:#1565c0;background:#eaf2fd}
.rs-n{font:700 22px/1 system-ui,sans-serif;color:#25303a}
.rs-big .rs-n{font-size:38px;color:#0d47a1}
.rs-l{font-size:11px;color:#7b858f;text-transform:uppercase;letter-spacing:.4px}
.rs-list{margin-bottom:9px}
.rs-gap{margin:11px 0;border:1px solid #e3e7eb;padding:9px;background:#fafbfc}
.rs-quiet{font-size:12px;color:#7b858f;font-style:italic}
.rs-gaprow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:6px 0;
  border-bottom:1px solid #f0f2f4;font-size:12px}
.rs-gk{font-weight:600;color:#25303a;min-width:150px}
.rs-gn{color:#7b858f}
.rs-gs{color:#c62828;font-weight:700}

/* ------------------------------------------------------------ staging areas */
.sa-card{border:1px solid #d5dae0;background:#fff;padding:10px;margin-bottom:9px}
.sa-closed{opacity:.66;background:#f6f8fa}
.sa-at_capacity{border-left:4px solid #f9a825}
.sa-top{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.sa-sym{font-size:17px;color:#1565c0}
.sa-name{font-weight:700;font-size:15px;color:#25303a}
.sa-type{font-size:11px;color:#7b858f;text-transform:uppercase;letter-spacing:.4px}
.sa-status{font-size:10px;font-weight:700;text-transform:uppercase;padding:1px 6px;
  letter-spacing:.4px}
.sa-st-open{background:#e8f5e9;color:#2e7d32}
.sa-st-closed{background:#eceff1;color:#5a6570}
.sa-st-at_capacity{background:#fff8e1;color:#8a6100}
.sa-occ{margin-left:auto;font-weight:600;color:#25303a}
.sa-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:5px;font-size:12px;color:#5a6570}
.sa-av{display:flex;flex-wrap:wrap;gap:14px;margin-top:5px;font-size:11px;color:#7b858f;
  border-top:1px dashed #e3e7eb;padding-top:5px}
.sa-access{margin-top:5px;font-size:12px;color:#5a6570;background:#f6f8fa;padding:7px}
.sa-access.hidden{display:none}
.sa-acts{display:flex;gap:6px;margin-top:7px}
.sa-held{margin-top:7px;border-top:1px solid #e6e9ec;padding-top:6px}
.sa-res{display:flex;gap:9px;align-items:center;padding:4px 0;font-size:12px;
  border-bottom:1px solid #f5f7f8}
.sa-avbox{border-top:1px solid #e6e9ec;margin-top:9px;padding-top:7px}

/* ------------------------------------------------- briefing and debriefing */
.bd-queues{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.bd-col{flex:1;min-width:340px;border:1px solid #e3e7eb;background:#fff}
.bd-head{display:flex;gap:9px;align-items:center;padding:9px 11px;background:#f2f5f8;
  border-bottom:1px solid #e3e7eb}
.bd-title{font-weight:700;color:#25303a}
.bd-n{font:700 15px/1 system-ui,sans-serif;color:#7b858f}
.bd-n.hot{background:#c62828;color:#fff;padding:2px 8px}
.bd-clear{padding:14px 11px;font-size:12px;color:#7b858f;font-style:italic}
.bd-blocking{padding:7px 11px;background:#fff8e1;font-size:12px;color:#6b5200;
  border-bottom:1px solid #f0e5c0}
.bd-hot{color:#c62828;font-weight:600}
.bd-row{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;
  border-bottom:1px solid #f0f2f4}
.bd-row.bd-warn{background:#fff8e1;border-left:3px solid #f9a825}
.bd-row.bd-urgent{background:#fdecea;border-left:3px solid #c62828}
.bd-main{flex:1}
.bd-res{font-weight:600;color:#25303a}
.bd-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:#7b858f;margin-top:2px}
.bd-elapsed{font-size:13px;font-weight:700;color:#25303a;margin-top:3px}
.bd-urgent .bd-elapsed{color:#c62828}
.bd-warn .bd-elapsed{color:#b26a00}
.bd-last{font-size:11px;color:#c62828;font-weight:600;margin-top:2px}
.bd-carried{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:#6a1b9a;margin-bottom:2px}
.bd-acts{display:flex;flex-direction:column;gap:4px}
.bd-specifics{margin-top:9px;border-top:1px solid #e6e9ec;padding-top:7px}
.bd-spec{padding:6px 0;border-bottom:1px solid #f5f7f8}
.bd-specbits{margin-left:22px;font-size:11px;color:#7b858f}

/* ---------------------------------------------------------------- branches */
.br-card{border:1px solid #d5dae0;background:#fff;padding:11px;margin-bottom:9px}
.br-top{display:flex;gap:9px;align-items:center}
.br-name{font-weight:700;font-size:16px;color:#25303a}
.br-code{font-size:11px;color:#7b858f;border:1px solid #d5dae0;padding:0 5px}
.br-top .btn{margin-left:auto}
.br-who{display:flex;gap:14px;margin-top:4px;font-size:12px;color:#5a6570}
.br-counts{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;font-size:11px;color:#7b858f}
.br-cn{color:#5a6570}
.br-hot{margin-top:6px;color:#c62828;font-weight:600;font-size:12px}
.br-short{display:flex;flex-wrap:wrap;gap:14px;padding:8px 11px;margin:9px 0;
  background:#f2f5f8;font-size:12px;color:#5a6570}
.br-short.hot{background:#fdecea;color:#8a1f1a;border-left:3px solid #c62828}
.br-sb{font-weight:600}
.br-task{border:1px solid #e3e7eb;background:#fff;padding:9px;margin-bottom:7px}
.br-unfilled{border-left:4px solid #f9a825;background:#fffdf5}
.br-tt{display:flex;flex-wrap:wrap;gap:9px;align-items:baseline}
.br-tn{font-weight:700;color:#0d47a1}
.br-title{font-weight:600;color:#25303a}
.br-need{font-size:11px;color:#8a6100;background:#fff8e1;padding:0 6px}
.br-tm{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:5px;font-size:12px}
.br-res{font-weight:600;color:#25303a}
.br-none{color:#c62828;font-style:italic;font-size:12px}
.br-acts{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.br-ci,.br-ac,.br-ch,.br-area,.br-haz{display:flex;flex-wrap:wrap;gap:11px;
  align-items:center;padding:6px 0;border-bottom:1px solid #f0f2f4;font-size:12px}
.br-log{max-height:340px;overflow:auto}
.br-outstanding{margin:7px 0;font-size:13px}
.br-gap,.br-duty{margin:5px 0}

/* ------------------------------------------------------------ unified command */
.uc-card{border:1px solid #d5dae0;background:#fff;padding:11px;margin-bottom:9px}
.uc-gone{opacity:.6;background:#f6f8fa}
.uc-top{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.uc-agency{font-weight:700;font-size:15px;color:#25303a}
.uc-atype{font-size:11px;color:#7b858f;text-transform:uppercase;letter-spacing:.4px}
.uc-departed{font-size:11px;color:#8a6100;background:#fff8e1;padding:0 6px}
.uc-top .btn{margin-left:auto}
.uc-signed{margin-top:7px;padding:5px 8px;background:#e8f5e9;color:#2e7d32;font-size:12px}
.uc-pri{display:flex;gap:9px;align-items:baseline;padding:5px 0;
  border-bottom:1px solid #f0f2f4;font-size:13px}
.uc-rank{font-weight:700;color:#0d47a1;min-width:22px}
.uc-obj{border:1px solid #e3e7eb;padding:9px;margin-bottom:7px;background:#fff}
.uc-onum{font-weight:700;color:#0d47a1;min-width:24px}
.uc-agree{display:flex;flex-wrap:wrap;gap:14px;margin-top:7px}
.uc-acell{display:flex;flex-direction:column;gap:2px;font-size:11px;
  border-left:2px solid #e3e7eb;padding-left:7px}
.uc-aname{font-weight:600;color:#25303a}
.uc-yes{color:#2e7d32;font-weight:600}
.uc-no{color:#c62828;font-weight:600}
.uc-pending{color:#8a6100;font-style:italic}
.uc-flag{margin-top:6px;font-size:11px;color:#ef6c00;font-weight:600}
.uc-stances{margin-top:7px;border-top:1px solid #e6e9ec;padding-top:6px}
.uc-stance{display:flex;gap:9px;padding:3px 0;font-size:12px}
.uc-dissent{background:#fdecea;padding:3px 5px;margin:0 -5px}
.uc-stanceform{margin-top:9px;border-top:1px solid #e6e9ec;padding-top:7px}
.uc-sfrow{display:flex;gap:7px;align-items:center;margin-bottom:5px}
.uc-guest{display:flex;gap:11px;align-items:center;padding:5px 0;
  border-bottom:1px solid #f0f2f4;font-size:12px}
.uc-revoked{opacity:.6}
.uc-level{font-size:10px;text-transform:uppercase;letter-spacing:.4px;
  background:#eaf2fd;color:#0d47a1;padding:1px 6px;font-weight:700}

/* -------------------------------------------------------------- messaging */
.msg-owed{padding:7px 10px;margin:9px 0;background:#f2f5f8;border-left:3px solid #b9c2cb;
  font-size:12px;color:#5a6570}
.msg-owed.hot{background:#fff8e1;border-left-color:#f9a825;color:#6b5200;font-weight:600}
.msg-filters{display:flex;gap:5px;margin:9px 0}
.msg-card{border:1px solid #d5dae0;background:#fff;padding:10px;margin-bottom:9px}
.msg-urgent{border-left:4px solid #c62828}
.msg-retracted{opacity:.62;background:#f6f8fa}
.msg-top{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:12px}
.msg-from{font-weight:700;color:#25303a}
.msg-arrow{color:#98a1aa}
.msg-to{font-weight:600;color:#0d47a1}
.msg-when{margin-left:auto;color:#7b858f;font-size:11px}
.msg-ackflag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  background:#fff8e1;color:#8a6100;padding:1px 6px}
.msg-retract{margin:5px 0;padding:5px 8px;background:#fdecea;color:#8a1f1a;font-size:12px}
.msg-body{margin:7px 0;font-size:14px;color:#25303a;white-space:pre-wrap}
.msg-states{margin-top:7px;border-top:1px solid #f0f2f4;padding-top:5px}
.msg-state{display:flex;gap:9px;align-items:center;padding:3px 0;font-size:11px}
.msg-sname{font-weight:600;color:#25303a;min-width:130px}
.msg-ok{color:#2e7d32;font-weight:600}
.msg-sent{color:#7b858f}
.msg-waiting{color:#8a6100}
.msg-undelivered{color:#c62828;font-weight:700;letter-spacing:.4px}
.msg-acts{display:flex;gap:6px;margin-top:7px}
.msg-addrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.msg-chosen{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0;min-height:22px}
.msg-chip{display:inline-flex;align-items:center;gap:5px;background:#eaf2fd;color:#0d47a1;
  padding:2px 7px;font-size:12px;font-weight:600}
.msg-x{background:none;border:0;color:#0d47a1;cursor:pointer;font-size:14px;
  line-height:1;padding:0}
.msg-x:hover{color:#c62828}

/* the pending approvals tile on the command dashboard */
.dash-pending{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;padding:4px 0;
  border-bottom:1px solid #f0f2f4;font-size:12px}
.dash-pf{font-weight:700;color:#0d47a1;min-width:66px}

/* ------------------------------------------------------------ tool palette */
.tp{display:flex;flex-direction:column;gap:9px;padding:7px 5px}
.tp-group{display:flex;flex-direction:column;gap:2px}
.tp-gl{font:600 9px/1.3 system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.7px;color:#8d97a1;padding-left:2px}
/* one tool per line: the icon, then what it is called. Hovering to find out
   what a button does is time somebody does not have. */
.tp-row{display:flex;flex-direction:column;gap:2px}
.tp-btn{width:100%;min-height:26px;display:flex;align-items:center;gap:7px;
  padding:0 7px;text-align:left;
  background:#fff;border:1px solid #d5dae0;cursor:pointer}
.tp-btn:hover{background:#eaf2fd;border-color:#9dc2ee}
.tp-btn.on{background:#1565c0;border-color:#1565c0}
.tp-btn.on .tp-glyph{color:#fff}
.tp-btn:disabled{opacity:.35;cursor:default}
.tp-glyph{font:15px/1 system-ui,sans-serif;color:#33404d;width:16px;text-align:center;flex:0 0 16px}
.tp-name{font:12px/1.2 system-ui,sans-serif;color:#33404d;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.tp-btn.on .tp-name{color:#fff}

/* ------------------------------------------------------------- view tabs */
.mv{display:flex;gap:2px;align-items:center}
.mv-tab{padding:5px 12px;background:#fff;border:1px solid #d5dae0;cursor:pointer;
  font-size:12px;color:#5a6570}
.mv-tab.on{background:#25303a;border-color:#25303a;color:#fff;font-weight:600}

/* Planning / Historical toggle - one switch in place of two tabs */
.mv-toggle{display:inline-flex;align-items:center;gap:8px}
.mv-toggle-opt{background:none;border:0;padding:0;cursor:pointer;font-size:12px;
  color:#8a95a0;font-weight:600}
.mv-toggle-opt.on{color:#25303a}
.mv-toggle-track{position:relative;width:40px;height:20px;border-radius:20px;
  background:#25303a;border:1px solid #25303a;cursor:pointer;flex:0 0 auto}
.mv-toggle-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#fff;transition:left .15s ease}
.mv-toggle.hist .mv-toggle-knob{left:22px}

.map-bar-sep{width:1px;height:22px;background:#d5dae0;margin:0 4px}

/* --------------------------------------------------------- basemap row */
.map-bases{display:flex;gap:2px}
.map-base{padding:5px 11px;background:#fff;border:1px solid #d5dae0;cursor:pointer;
  font-size:12px;color:#5a6570}
.map-base.on{background:#1565c0;border-color:#1565c0;color:#fff}
.map-base-select{padding:5px 9px;background:#fff;border:1px solid #d5dae0;cursor:pointer;
  font-size:12px;color:#5a6570}
.map-opacity{display:flex;gap:6px;align-items:center;margin-left:9px}
.map-op-l{font-size:10px;color:#7b858f;text-transform:uppercase;letter-spacing:.4px}
.map-op{width:60px}
.map-op-v{font-size:11px;color:#5a6570;min-width:34px;text-align:right}
/* the map-opacity / segment-opacity sliders, back by request, with their % beside */
.map-op-set{display:inline-flex;align-items:center;gap:6px}
.map-op-slider{width:96px;height:16px;cursor:pointer;accent-color:#1976d2}
/* the ground/air chooser, a plain dropdown rather than a sliding switch */
.map-kind-select{padding:6px 10px;background:#fff;border:1px solid #cdd4db;border-radius:5px;
  font:600 12px "Segoe UI",system-ui,sans-serif;color:#33404d;cursor:pointer}

/* --------------------------------------------------------- map objects */
.mo{display:flex;flex-direction:column;height:100%}
.mo-filters{display:flex;flex-wrap:wrap;gap:4px;padding:7px;border-bottom:1px solid #e3e7eb}
.mo-search{flex:1;min-width:120px}
.mo-f{font-size:11px}
.mo-count{padding:4px 8px;font-size:11px;color:#7b858f}
.mo-group{display:flex;align-items:center;gap:6px;width:100%;text-align:left;
  padding:6px 8px;background:#f2f5f8;border:0;border-top:1px solid #e3e7eb;
  cursor:pointer;font:600 11px/1.3 system-ui,sans-serif;color:#3a4650}
.mo-caret{font-size:9px;color:#7b858f}
.mo-gname{flex:1;text-transform:uppercase;letter-spacing:.4px}
.mo-gn{background:#d5dae0;color:#3a4650;border-radius:8px;padding:0 6px;font-size:10px}
.mo-list{display:flex;flex-direction:column}
.mo-row{display:flex;gap:7px;align-items:flex-start;padding:6px 8px;
  border-bottom:1px solid #f0f2f4;cursor:pointer}
.mo-row:hover{background:#f6f8fa}
.mo-row.on{background:#eaf2fd;box-shadow:inset 3px 0 0 #1565c0}
.mo-row.off{opacity:.5}
.mo-row.dragging{opacity:.4;background:#eaf2fd}
/* the row controls: tick, eye, padlock. Drawn icons rather than characters,
   because ◉ and ○ were being read as a radio button, which is what they look
   like. */
.mo-tick{margin:2px 0 0;flex:0 0 auto;cursor:pointer}
.mo-eye,.mo-lockbtn{background:none;border:0;cursor:pointer;color:#5a6570;padding:0;
  display:flex;align-items:center;margin-top:1px;flex:0 0 auto}
.mo-eye:hover,.mo-lockbtn:hover{color:#1565c0}
.mo-eye.off{color:#aab3bb}
/* locked is the ordinary state, so it is quiet; unlocked is the exception and
   is the one worth noticing */
.mo-lockbtn.on{color:#8d97a1}
.mo-lockbtn:not(.on){color:#e65100}

/* what to do with several at once */
.mo-acts{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:6px 8px;
  background:#eaf2fd;border-bottom:1px solid #cfe0f6}
.mo-acts-n{font:600 11px/1 system-ui,sans-serif;color:#0d47a1;margin-right:3px}
.mo-acts .btn{padding:3px 8px;font-size:11px}
.mo-acts-hint{padding:4px 8px;background:#f3f7fd;border-bottom:1px solid #dce6f3;
  font:10.5px/1.4 system-ui,sans-serif;color:#5a6570}
/* shift clicking a tick should not paint the rows blue as a text selection */
.mo-row{user-select:none}
.mo-swatch{width:11px;height:11px;border:1px solid rgba(0,0,0,.25);margin-top:2px;
  flex:0 0 auto}
.mo-main{flex:1;min-width:0}
.mo-name{display:block;font-size:12px;color:#25303a;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-meta{display:flex;flex-wrap:wrap;gap:7px;font-size:10px;color:#818b95;margin-top:1px}
.mo-role{background:#eaf2fd;color:#0d47a1;padding:0 5px;font-weight:600}
.mo-lock{background:#eceff1;color:#5a6570;padding:0 5px;font-weight:600}
.mo-flag{background:#fff3e0;color:#b26a00;padding:0 5px;font-weight:700}

/* ---------------------------------------------------- coordinates, all */
.ca{border:1px solid #dde2e7;background:#fbfcfd;padding:9px}
.ca-map{display:flex;gap:9px;align-items:center;padding-bottom:8px;
  border-bottom:1px solid #e6e9ec;margin-bottom:8px}
.ca-set{padding:6px 0;border-bottom:1px solid #f0f2f4}
.ca-head{display:flex;gap:10px;align-items:baseline}
.ca-title{font:600 11px/1.4 system-ui,sans-serif;color:#3a4650;
  text-transform:uppercase;letter-spacing:.4px}
.ca-eg{font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#98a1aa}
.ca-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:4px}
.ca-lab{font-size:11px;color:#7b858f;min-width:26px}
.ca-dd{width:104px}
.ca-deg{width:58px}
.ca-min{width:78px}
.ca-sec{width:64px}
.ca-hemi{width:52px}
.ca-zone{width:64px}
.ca-sq{width:60px}
.ca-en{width:84px}
.ca-readout{margin-top:8px;display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.ca-none{font-size:12px;color:#98a1aa;font-style:italic}
.ca-ok{font-size:11px;color:#7b858f;text-transform:uppercase;letter-spacing:.4px}
.ca-val{font:600 14px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#0d47a1}
.ca-datum{font-size:11px;color:#98a1aa}

/* ------------------------------------------------------------- measuring */
.map-measure-loud{background:#0d47a1;color:#fff;font-size:14px;font-weight:600;
  padding:9px 14px;box-shadow:0 3px 14px rgba(0,0,0,.3)}
.map-measure-loud .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);
  color:#fff}

/* --------------------------------------------------------- grid labels */
.sv-grid-labels{position:absolute;inset:0;pointer-events:none;z-index:3}
.sv-grid-label{position:absolute;background:rgba(255,255,255,.86);
  font:600 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#33404d;
  padding:0 3px;border-radius:2px;white-space:nowrap}
.sv-grid-top{transform:translateX(-50%)}
.sv-grid-left{transform:translateY(-50%)}
.sv-grid-cell{transform:translate(-50%,-50%);font-weight:700;color:#1565c0}

/* --------------------------------------------------------- combine help */
.map-explain{background:#f6f8fa;border-left:3px solid #1565c0;padding:7px 10px;
  margin:6px 0}
.map-explain-what{font-size:13px;color:#25303a;font-weight:500}
.map-explain-eg{font-size:12px;color:#5a6570;margin-top:4px;font-style:italic}

/* ------------------------------------------------------------- transfer */
.map-file{margin:6px 0}
.map-import-found{margin:7px 0;max-height:190px;overflow:auto}
.map-import-n{font-weight:600;color:#25303a;margin-bottom:4px}
.map-import-row{display:flex;gap:9px;padding:3px 0;font-size:12px;
  border-bottom:1px solid #f5f7f8}
.map-import-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* -------------------------------------------------------------- history */
.map-history{max-height:44vh;overflow:auto}
.map-hrow{display:flex;flex-wrap:wrap;gap:9px;align-items:baseline;padding:5px 0;
  border-bottom:1px solid #f0f2f4;font-size:12px}
.map-hwhen{color:#818b95;font-size:11px;min-width:140px}
.map-hwhat{font-weight:600;color:#25303a;text-transform:capitalize}
.map-hwho{color:#5a6570}
.map-harea{color:#b26a00;font-weight:600}

/* ------------------------------------------------------- panel additions */
/* the actions for the selected object. Not pinned: the panel is short and a
   row that follows you down a short panel is just a row in the way. */
.sv-panel-acts{display:flex;flex-wrap:wrap;gap:4px;padding:8px;background:#f6f8fa;
  border-bottom:1px solid #e3e7eb}
.sv-panel-role{display:flex;gap:8px;align-items:center;padding:8px 8px 0}
.sv-panel-views{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:6px 8px}

/* the grid weight controls */
.map-grid-weight{display:flex;gap:5px;align-items:center}
.sl{padding:6px 0}
.sl-head{font:600 11px/1.4 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.5px;color:#0d47a1}
.sl-figs{display:flex;flex-wrap:wrap;gap:16px;margin:7px 0;padding:8px;background:#f6f8fa}
.sl-fig{display:flex;flex-direction:column}
.sl-fk{font-size:10px;color:#7b858f;text-transform:uppercase;letter-spacing:.4px}
.sl-fv{font:600 15px/1.3 system-ui,sans-serif;color:#25303a}
.sl-locked{font-size:12px;color:#2e7d32;font-weight:600;margin:5px 0}
.sl-acts{display:flex;gap:6px;margin-top:7px}
.tk{padding:6px 0}
.tk-compare{border:1px solid #e3e7eb;padding:9px;margin-bottom:8px;background:#fff}
.tk-head{font-weight:700;color:#25303a}
.tk-bits{display:flex;flex-wrap:wrap;gap:11px;font-size:11px;color:#7b858f;margin-top:3px}
.tk-figs{display:flex;flex-wrap:wrap;gap:16px;margin:8px 0;padding:8px;background:#f6f8fa}
.tk-fig{display:flex;flex-direction:column}
.tk-fk{font-size:10px;color:#7b858f;text-transform:uppercase;letter-spacing:.4px}
.tk-fv{font:600 14px/1.3 system-ui,sans-serif;color:#25303a}
.tk-acts{display:flex;gap:6px;margin-top:7px}

/* the vocabulary editor */
.vocab{max-height:44vh;overflow:auto}
.vocab-row{display:flex;gap:9px;align-items:center;padding:5px 0;border-bottom:1px solid #f0f2f4;font-size:12px}
.vocab-v{font-weight:600;color:#25303a;min-width:130px}
.vocab-d{flex:1;color:#7b858f;font-size:11px}
.vocab-seed{font-size:10px;color:#98a1aa;text-transform:uppercase;letter-spacing:.4px}
.vocab-mine{font-size:10px;color:#0d47a1;text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.vocab-add{display:flex;gap:6px;align-items:center;margin-top:9px;padding-top:9px;border-top:1px solid #e6e9ec}

/* ------------------------------------------------- auto segment proposals */
.as-size{display:grid;grid-template-columns:auto 90px auto 90px;gap:6px 10px;align-items:center;margin:6px 0}
.as-target{font:600 12.5px/1.4 system-ui,sans-serif;color:#0d47a1;background:#eaf2fd;padding:6px 9px;margin:6px 0}
.as-kinds{display:flex;flex-wrap:wrap;gap:10px 16px;margin:6px 0}

/* the bar that appears when segments are gathered with control and click */
.map-gather{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;z-index:30;
  display:flex;align-items:center;gap:10px;background:#1a1a1a;color:#fff;
  padding:9px 14px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.map-gather .mg-what{font:600 13px "Segoe UI",system-ui,sans-serif;white-space:nowrap}

/* finding a city on the ground map, or an airport by identifier on the air map */
.map-find{position:relative;display:flex;align-items:center;gap:6px}
.map-find input{width:190px;padding:6px 9px;border:1px solid #c8ced4;background:#fff;
  font:13px/1.2 system-ui,sans-serif}
.map-find input:focus{outline:2px solid #1976d2;outline-offset:-1px}
.map-find-out{position:absolute;top:calc(100% + 4px);left:0;z-index:40;background:#fff;
  border:1px solid #c8ced4;min-width:330px;max-height:300px;overflow:auto;
  box-shadow:0 8px 20px rgba(0,0,0,.18)}
.map-find-row{display:block;width:100%;text-align:left;padding:7px 10px;border:0;
  border-bottom:1px solid #eef1f4;background:#fff;cursor:pointer;
  font:13px/1.35 system-ui,sans-serif;color:#1d2733}
.map-find-row:last-child{border-bottom:0}
.map-find-row:hover,.map-find-row:focus{background:#eaf3ff}
.map-find-row b{font-weight:700}
.map-find-row span{display:block;color:#5a6673;font-size:12px}
.map-find-note{padding:8px 10px;color:#5a6673;font:12px/1.35 system-ui,sans-serif}

/* a section heading in the map objects list: shrink it on the left, hide the
   whole section on the right */
.mo-ghead{flex:1;display:flex;align-items:center;gap:6px;background:none;border:0;
  padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.mo-ghead:hover .mo-gname{color:#1565c0}

/* which operational period the map is showing */
.map-period{display:flex;align-items:center;gap:6px}

/* restricted airspace, named on the map */
.sv-airspace-label{background:#ef6c00;color:#fff;padding:3px 7px;border-radius:2px;
  font:700 11px/1.2 system-ui,sans-serif;text-align:center;white-space:nowrap;
  box-shadow:0 1px 4px rgba(0,0,0,.45);letter-spacing:.3px}
.sv-airspace-label.hard{background:#0066ff}
.sv-airspace-label span{display:block;font-weight:400;font-size:9px;opacity:.95}

/* picking the colour of each area before the segments are made */
.as-colors{display:flex;flex-direction:column;gap:6px;margin:4px 0 8px}
.as-color-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.as-chip{width:16px;height:16px;border:1px solid #9aa3ab;flex:0 0 auto}

/* the map top bar, in groups rather than a row of loose buttons */
.map-bar-group{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;flex:0 0 auto}

/* clearing one kind of thing off the map in one go */
.mo-clear{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:7px 8px;
  border-bottom:1px solid #e3e7eb;background:#fbfcfd}
.mo-clear-k{font:700 10px/1 system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.5px;color:#7b858f}

/* the colour bar along the bottom: the program's blue, and every control named */
.map-series{background:#007bff;gap:16px;align-items:flex-end;padding:10px 14px}
.map-series .ms-title{display:flex;flex-direction:column;gap:2px;margin-right:4px}
.map-series .ms-title strong{font:700 13px/1.2 system-ui,sans-serif;color:#fff}
.map-series .ms-title span{font:11px/1.2 system-ui,sans-serif;color:#dceaff}
.map-series .ms-field{display:flex;flex-direction:column;gap:4px}
.map-series .ms-k{font:700 11px/1 "Segoe UI",system-ui,sans-serif;color:#fff}
/* the palette in the blue bar is a condensed 3-wide square grid rather than a
   long wrapping row: eight colours fill it 3x3 (the fill page's No-fill tile
   takes the ninth cell exactly) */
.map-series .sv-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  align-self:center}
.map-series .sv-swatch{width:18px;height:18px;border-color:#0059b8}
.map-series .sv-swatch.on{outline:2px solid #fff;outline-offset:1px}
.map-series input[type=number]{width:64px;padding:4px 6px;border:1px solid #0059b8}
.map-series input[type=number].ms-width{width:56px}
.map-series .btn{align-self:center}


/* the one search box: wide enough to read what it asks for, and a heading per kind of answer */
.map-find input.map-find-in{width:170px}
.map-find-head{padding:6px 10px 4px;font:700 12px/1.2 "Segoe UI",system-ui,sans-serif;
  color:#444;background:#f4f6f8;border-bottom:1px solid #e3e7eb}


/* the standard incident symbols are pictures, not characters */
.sv-map-icon.sv-map-icon-img{background:none;border:0;box-shadow:none;padding:0;line-height:0}
.sv-map-icon.sv-map-icon-img img{display:block}
.sv-icon img{display:block;margin:auto}


/* plain symbols for markers: the marker's color on a white disc */
.sv-map-icon.sv-map-icon-svg{background:#fff;border:1.5px solid currentColor;border-radius:50%;
  padding:3px;line-height:0;text-shadow:none;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.sv-map-icon-svg svg{display:block}
.sv-icon svg{display:block;margin:auto;color:#1d2733}
.sv-icon.on svg{color:#fff}


/* the pop-up on a new marker: its label and its icon */
.mk-pop{width:340px;font:13px/1.3 "Segoe UI",system-ui,sans-serif}
.mk-pop .sig-k{margin:4px 0 4px}
.mk-pop input.mk-pop-name{width:220px;padding:6px 8px;border:1px solid #c8ced4}
.mk-pop .sv-icons{margin:0}
.mk-pop .sv-icon-grid{max-height:210px;overflow-y:auto}
.mk-pop-acts{display:flex;justify-content:flex-end;margin-top:8px}

/* a route of flight typed as airport identifiers */
.re{width:560px;max-width:100%}
.re input.re-idents{width:320px;padding:6px 8px;font:14px/1.3 ui-monospace,Consolas,monospace;text-transform:uppercase}
.re .hint,.re .note{margin:6px 0}
.re-legs{display:grid;gap:0;margin-top:6px;max-height:300px;overflow-y:auto}
.re-row{display:grid;grid-template-columns:24px 64px 1fr 64px 72px;gap:8px;padding:4px 2px;border-bottom:1px solid #e3e7eb;align-items:baseline}
.re-head{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#5a6670;border-bottom-color:#c8ced4}
.re-n{color:#5a6670}
.re-id{font-family:ui-monospace,Consolas,monospace;font-weight:600}
.re-num{text-align:right;font-variant-numeric:tabular-nums}
.re-bad .re-name{color:#c62828}

/* live aircraft on the air map, and the Track aircraft dialog */
.sv-aircraft{position:relative;color:#0b57d0;line-height:0;pointer-events:auto;cursor:default}
.sv-aircraft svg{display:block;transform-origin:50% 50%;
  filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.sv-aircraft-tag{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:2px;
  white-space:nowrap;font:700 11px/1.2 "Segoe UI",system-ui,sans-serif;color:#0b3ea8;
  background:rgba(255,255,255,.85);border-radius:3px;padding:1px 4px;
  text-shadow:0 1px 0 #fff}
.ac-entry{display:flex;gap:8px;align-items:center;margin:2px 0 4px}
.ac-entry input{flex:1;min-width:160px}
/* the following list fills the side of the page rather than a tiny scroll box.
   Kevin: "it puts them into this really teeny tiny scroll box instead of filling
   up that side of the page." So no inner cap - the whole panel scrolls. */
.ac-list{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.ac-row{display:flex;flex-direction:column;gap:6px;
  padding:7px 9px;border:1px solid #dbe0e5;border-radius:5px;background:#fff}
.ac-row.ac-cold{background:#f6f7f8;border-color:#e3e7eb}
.ac-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ac-open{cursor:pointer;padding:2px 4px;margin:-2px -4px;border-radius:4px}
.ac-open:hover{background:#eef4fb}
.ac-opts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ac-icons{display:inline-flex;gap:3px}
.ac-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:26px;
  padding:0;background:#fff;border:1px solid #cdd4db;border-radius:5px;color:#41505f;cursor:pointer}
.ac-ic:hover{background:#eef4fb;border-color:#9dc2ee;color:#12467e}
.ac-ic.on{background:#0b57d0;border-color:#0949ae;color:#fff}
.ac-ic svg{display:block}
.ac-track{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#33404d;cursor:pointer}
.ac-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.ac-reg{font:700 13px "Segoe UI",system-ui,sans-serif;color:#1d2733;letter-spacing:.3px}
.ac-tele{font-size:12px;color:#5a6673;font-variant-numeric:tabular-nums}
.ac-acts{display:flex;gap:6px;flex:0 0 auto}

/* the Live Tracking tab panel */
.ac-panel{padding:10px 11px;display:flex;flex-direction:column;gap:2px}
.ac-panel .sig-k{margin-top:8px}
.ac-panel .ac-entry{margin:2px 0 6px}
.ac-panel .note{margin-bottom:6px}

/* the Track size slider above the Following list */
.ac-panel .ac-size{margin:6px 0 10px;margin-left:0;flex-wrap:wrap}
.ac-panel .ac-size .map-op-set{flex:1;min-width:140px}
.ac-panel .ac-size .map-op-slider{width:100%}

/* sub-areas in the search areas box */
.as-subareas{display:grid;gap:4px;margin:4px 0 8px}
.as-subareas .pick{display:flex;gap:6px;align-items:center}
.as-split-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.as-split-row input.as-split-typed{width:140px;padding:5px 7px}

/* an open search carries its own screens at the top of its pages */
.search-tabs{margin:0 0 14px;border-bottom:1px solid #d5dae0;padding-bottom:8px}
.search-tabs-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.search-tabs-name{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:#5a6670}
.search-tabs-row{display:flex;flex-wrap:wrap;gap:4px}
.search-tab{background:#fff;border:1px solid #d5dae0;padding:5px 10px;cursor:pointer;
  font-size:12px;color:#25313c}
.search-tab:hover{background:#eaf2fd;border-color:#9dc2ee}
.search-tab.on{background:#25313c;border-color:#25313c;color:#fff}

/* A ground search on one screen.

   Kevin: "You made everything fit, but it is more like you squeezed it together."
   So: one rhythm of spacing, rows that breathe by a couple of pixels, numbers
   aligned on their decimals, headings that separate the four parts, and buttons
   that read as actions. Still one screen, no scrolling. */
.gw-strip{display:flex;gap:28px;flex-wrap:wrap;align-items:center;background:#25313c;color:#fff;
  padding:10px 14px;margin:0 0 16px;border-radius:2px}
.gw-strip .gw-cell{display:flex;flex-direction:column;gap:3px}
.gw-strip .gw-label{color:#93a6b4;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.gw-strip .gw-value{color:#fff;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.gw-strip .gw-tally{color:#dce6ec;font-size:14px}
.gw-strip .gw-tally.flag{color:#ff9b9b;font-weight:600}
.gw-strip input{padding:3px 6px;border:1px solid #47535f;background:#fff;font-size:13px;height:24px;
  border-radius:2px}
.gw-strip input:focus{outline:2px solid #6aa6e8;outline-offset:0}

.gw-top{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
.gw-panel{margin:0 0 16px;min-width:0}
.gw-panel .sec-head{margin:0 0 6px;padding-bottom:3px;border-bottom:1px solid #dfe4e8}
.gw-panel .hint{margin:0 0 6px;font-size:11px;color:#6b7680}

.gw-table{border-collapse:separate;border-spacing:0;font-size:12.5px}
.gw-table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.07em;
  color:#7a848c;font-weight:600;padding:4px 8px;border-bottom:1px solid #d7dde2;white-space:nowrap}
.gw-table td{padding:3px 8px;border-bottom:1px solid #eef1f3;vertical-align:middle;white-space:nowrap}
.gw-table tr:last-child td{border-bottom:0}
.gw-table input.gw-num,.gw-table input.gw-text{padding:3px 6px;border:1px solid #cfd6dc;
  border-radius:2px;font-size:12.5px;height:24px;background:#fff}
.gw-table input:focus{outline:2px solid #6aa6e8;outline-offset:-1px;border-color:#6aa6e8}
.gw-table input.gw-num{text-align:right;font-variant-numeric:tabular-nums}
.gw-table input.gw-frommap{background:#f2f5f7;color:#48555f}
.gw-calc{background:#f7f9fa;text-align:right;font-variant-numeric:tabular-nums;color:#1f2a33}
.gw-psr{font-weight:600;background:#eef3f7}

.gw-grid{display:block;overflow-x:auto;max-width:100%;padding-bottom:2px}
.gw-grid .gw-rowhead{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 #e3e7eb}
.gw-rowhead{white-space:nowrap;color:#39454e}
.gw-line{display:inline-block;min-width:24px;color:#9aa4ac;font-size:10px;font-variant-numeric:tabular-nums}
.gw-unit{color:#9aa4ac;font-size:10px;margin-left:5px}

.gw-actions{text-align:right;white-space:nowrap}
.gw-add{margin:7px 0 0}
.btn-sm{padding:3px 10px;font-size:11.5px}

.gw-panel .note{margin:8px 0 0;font-size:11.5px;padding:6px 10px;color:#3a4650}

/* Known aircraft crash sites, from the AFRCC database. */
.sv-crash-pop{font-size:12px;line-height:1.45;color:#1f2a33}
.sv-crash-pop b{display:block;margin-bottom:4px;color:#b3302a}
.sv-crash-pop div{display:flex;gap:6px}
.sv-crash-pop div span{color:#7a848c;min-width:82px;flex:0 0 auto}
.sv-crash-pop .src{display:block;margin-top:5px;padding-top:4px;border-top:1px solid #e3e7eb;color:#9aa4ac;font-size:10.5px}

/* Clicking a worksheet row name for its definition, and the readout saying
   why the searchers went where they went. */
.gw-def{border:0;background:none;padding:0;font:inherit;color:#2c4a63;cursor:help;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.gw-def:hover{color:#1a6fb5}
.gw-note-pop{position:fixed;z-index:9000;max-width:390px;background:#fff;color:#1f2a33;
  border:1px solid #c6ced5;border-radius:3px;box-shadow:0 6px 24px rgba(20,30,40,.22);padding:11px 13px}
.gw-note-head{display:flex;gap:8px;align-items:baseline;margin-bottom:6px}
.gw-note-line{color:#7a848c;font-size:10px;letter-spacing:.07em;text-transform:uppercase;flex:0 0 auto}
.gw-note-title{font-weight:600;font-size:13.5px}
.gw-note-formula{font-family:Consolas,Menlo,monospace;font-size:11.5px;background:#f2f5f7;
  border-left:2px solid #9bb3c4;padding:5px 8px;margin-bottom:7px;color:#31414e}
.gw-note-text{font-size:12.5px;line-height:1.5}
.gw-note-aside{margin-top:7px;font-size:11.5px;line-height:1.5;color:#5a6873;
  border-top:1px solid #e8ecef;padding-top:6px}
.gw-note-src{margin-top:8px;font-size:10px;color:#9aa4ac}
.gw-why{margin:9px 0 0;font-size:12px;color:#31414e}
.gw-why-head{font-weight:600;margin-bottom:5px}
.gw-why-rows{display:flex;flex-direction:column;gap:2px}
.gw-why-row{display:flex;gap:9px}
.gw-why-row b{flex:0 0 92px;font-variant-numeric:tabular-nums}
.gw-why-row span{color:#5a6873}
.gw-why-foot{margin-top:5px;color:#5a6873}

/* The explanation page, and the floor lines in the allocation readout. */
.gw-actions-row{margin:0 0 10px}
.gw-why-row.drop b{color:#8a5a00}
.gw-why-row.drop span{color:#6b5326}
.gw-why-warn{margin-top:6px;padding:6px 10px;background:#fff6e5;border-left:3px solid #d08a1a;color:#5c451a}
.hiw{position:fixed;inset:0;z-index:9500;background:#fff;display:flex;flex-direction:column}
.hiw-bar{display:flex;align-items:center;gap:14px;padding:10px 18px;background:#25313c;color:#fff;flex:0 0 auto}
.hiw-title{margin:0;font-size:15px;font-weight:600;color:#fff}
.hiw-body{flex:1 1 auto;overflow-y:auto;padding:22px 26px 60px;max-width:820px;width:100%;
  box-sizing:border-box;line-height:1.62;color:#25313c;font-size:13.5px}
.hiw-body p{margin:0 0 11px}
.hiw-h{margin:26px 0 9px;font-size:14.5px;font-weight:600;color:#16212b;
  border-bottom:1px solid #dfe4e8;padding-bottom:4px}
.hiw-h:first-child{margin-top:0}
.hiw-formula{font-family:Consolas,Menlo,monospace;font-size:12px;background:#f2f5f7;
  border-left:2px solid #9bb3c4;padding:7px 10px;margin:0 0 11px;color:#31414e}
.hiw-note{margin:0 0 11px;padding:7px 11px;background:#f5f8fa;border-left:2px solid #c6ced5;
  color:#4a5763;font-size:12.5px}
.hiw-list{margin:0 0 11px;padding-left:20px}
.hiw-list li{margin-bottom:5px}
.hiw-tablewrap{overflow-x:auto;margin:0 0 6px}
.hiw-table{border-collapse:collapse;font-size:12.5px;min-width:100%}
.hiw-table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:#7a848c;font-weight:600;padding:5px 10px;border-bottom:1px solid #d7dde2;white-space:nowrap}
.hiw-table td{padding:4px 10px;border-bottom:1px solid #eef1f3;white-space:nowrap}
.hiw-table td.num{font-variant-numeric:tabular-nums}
.hiw-src{font-size:11px;color:#8b959d;margin:0 0 13px}

/* Successive searches of the same ground, as a tab strip.

   Kevin: "I do like the idea of making them look like angled tabs along the top.
   So search one would look like an angled tab, and then the new search next to
   it, kind of like how it looked in Search Manager." So: trapezoids sitting on a
   rule, the active one raised and joined to the work below it. */
.gw-actions-row{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;
  border-bottom:1px solid #b9c2c9;margin:0 0 14px;padding-bottom:0}
.gw-actions-row > .btn{margin-bottom:7px}
.gw-searches{display:inline-flex;align-items:flex-end;gap:2px;margin-bottom:-1px}
.gw-searches-label{color:#7a848c;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  margin:0 7px 8px 0;align-self:flex-end}

.gw-searchtab{position:relative;border:0;background:none;padding:0;cursor:pointer;
  font-size:13px;color:#4a5763;height:29px;line-height:29px;padding:0 19px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* the tab body, skewed at the sides only - the label stays upright */
.gw-searchtab::before{content:'';position:absolute;inset:0;z-index:-1;
  background:#e6eaed;border:1px solid #b9c2c9;border-bottom:0;
  border-radius:4px 4px 0 0;transform:perspective(7px) rotateX(1.1deg);
  transform-origin:bottom center}
.gw-searchtab:hover{color:#1f2a33}
.gw-searchtab:hover::before{background:#eff3f5}
.gw-searchtab.on{color:#16212b;font-weight:600;height:33px;line-height:33px}
.gw-searchtab.on::before{background:#fff;border-color:#b9c2c9;box-shadow:0 -1px 2px rgba(0,0,0,.05)}
/* the active tab joins the page below it, the way a real tab strip does */
.gw-searchtab.on::after{content:'';position:absolute;left:3px;right:3px;bottom:-1px;
  height:2px;background:#fff}
.gw-searchtab.add{color:#2c6e3f;font-weight:600}
.gw-searchtab.add::before{background:#eef6f0;border-color:#a8c9b3;border-style:dashed;border-bottom:0}
.gw-searchtab.add:hover::before{background:#e2f0e7;border-color:#2c6e3f}
.gw-searchtab:focus-visible{outline:2px solid #6aa6e8;outline-offset:1px}

/* ISRID subject rings on the map. */
.map-rings{display:inline-flex;align-items:center;gap:5px}
.map-rings-label{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#7a848c}
.map-rings-pick{font-size:12px;padding:2px 4px;border:1px solid #cfd6dc;border-radius:2px;background:#fff}
.sv-ring-label{background:rgba(255,255,255,.94);border:1px solid #999;border-left-width:3px;
  padding:1px 5px;font-size:10.5px;white-space:nowrap;color:#25313c;border-radius:2px;
  font-variant-numeric:tabular-nums;pointer-events:auto}

/* The map page has no heading and does not scroll.

   Kevin: "The map title at the top of the map page needs to just go away. It is
   pretty obvious this is a map, and it is annoying that the page scrolls. That
   grey toolbar can just be stuck up at the top and the map directly below it."
   So the content column loses its padding and its scroll, and the map shell
   takes whatever height is left under the toolbar. */
/* The whole column has to be pinned to the viewport, not just the content.
   appScreen carries min-height:100dvh so its children can grow the page - which
   is right everywhere else and wrong here, where the map has to take the space
   that is left rather than make more of it. */
body.on-map{overflow:hidden}
body.on-map .app-col{height:100dvh;min-height:0;overflow:hidden}
body.on-map .app-body{flex:1 1 auto;min-height:0;overflow:hidden}
body.on-map .content{padding:0;overflow:hidden;display:flex;flex-direction:column;
  min-height:0;height:auto;flex:1 1 auto}
body.on-map #mapBar{flex:0 0 auto}
body.on-map .map-shell{flex:1 1 auto;height:auto;min-height:0;
  border-left:0;border-right:0;border-bottom:0}
body.on-map .search-tabs{flex:0 0 auto}

/* The length and baseline drawn over a segment, to be checked by eye. */
.sv-dim-label{background:rgba(255,255,255,.95);border:1px solid #999;border-left-width:3px;
  padding:2px 6px;font:600 11px/1.2 system-ui,sans-serif;white-space:nowrap;
  color:#25313c;border-radius:2px;font-variant-numeric:tabular-nums;
  box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sv-dim-label.len{border-left-color:#c1121f}
.sv-dim-label.base{border-left-color:#1565c0}

/* Ticking a terrain line as a segment edge in the Auto Segment dialog. */
.as-pick{display:flex;align-items:center;gap:7px;cursor:pointer}
.as-pick input{margin:0}