/* =====================================================================================================
   DOC standard (4 Nov 2026, Aswin: "make a standard"). One way to do each thing, on every page. Loaded last;
   rolling back = dropping its <link>. The written standard is in "Drone Operation Console.md".

   Colour     accent blue only for the main action and what is selected; green, amber, red only for status.
   Selected   one look everywhere: pale accent background, accent text and border.
   Buttons    primary (one a screen), secondary, ghost, danger. 40 px on a computer, 44 px by finger; 8 px apart.
   Text       12 px at the smallest for words a person must read; 15 px page text on a phone.
   Phone      one bar on top, five places at most along the bottom, forms rise from the bottom, a map or tool fills the screen.
   ===================================================================================================== */
:root,:root[data-theme="light"]{--sel-bg:#E8F0FE;--sel-ink:#0B4FC4;--sel-line:#A9C6FB}
:root[data-theme="dark"]{--sel-bg:#17284A;--sel-ink:#B5CFFF;--sel-line:#35558F}

/* ---- selected: one look ---- */
.chips button.on,.seg button.on,.view-toggle button.on{background:var(--sel-bg)!important;color:var(--sel-ink)!important;border-color:var(--sel-line)!important}
.seg button.on{box-shadow:inset 0 0 0 1px var(--sel-line)}
.tabs button.on,:root[data-theme="dark"] .tabs button.on{color:var(--sel-ink);border-bottom-color:var(--accent)}
.sh-tab.on{border-bottom-color:var(--accent)}
.sh-tab.on em{background:var(--sel-bg);color:var(--sel-ink)}

/* ---- buttons: one shape, and an answer to every touch ---- */
.btn{transition:background .12s,border-color .12s,color .12s,transform .08s}
.btn.primary{box-shadow:none}
.btn[disabled],.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.sm{border-radius:10px}
.seg,.view-toggle{border-radius:10px}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.gnav a:focus-visible,.gnav button:focus-visible{outline-color:#8FB8FF}

/* ---- cards and words ---- */
.card,.pcard,.kpi .k,.tools .tile,.toolcard,.wing,.empty.card,.mcard{border-radius:14px}
.ws-rail .rl-cap{font-size:10.5px}
.ws-rail .rl-n{font-size:10.5px}
.hprog-m{font-size:10.5px!important}
.pcard .th{aspect-ratio:16/7}
.note.notif-perm{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;line-height:1.45}
.note.notif-perm b{font-weight:600}


/* ---- Delete in a layer's menu: last of the actions, red ---- */
.lyr-menu button.lm-del,.lyr-menu button.lm-del svg{color:var(--bad)}
.lyr-menu button.lm-del{margin-top:4px}
.lyr-menu button.lm-del:hover:not(:disabled){background:var(--bad-soft)}
.lyr-menu button.lm-del:disabled{cursor:not-allowed}

/* ---- the Academy's checklist: a table of seven columns that fits the page ---- */
.ck-bar{flex-wrap:wrap;gap:10px}
.ck-bar .search{flex:1 1 220px;min-width:0}
.ck-sel{height:36px;max-width:190px;min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:0 8px;font:inherit;font-size:13px}
.ck-tbl{table-layout:fixed;width:100%}
.ck-tbl th{white-space:normal;line-height:1.25}
.ck-tbl th:nth-child(1){width:74px}.ck-tbl th:nth-child(2){width:21%}.ck-tbl th:nth-child(4){width:13%}.ck-tbl th:nth-child(5),.ck-tbl th:nth-child(6){width:128px}
.ck-tbl td{vertical-align:top;overflow-wrap:anywhere}
.ck-row{cursor:pointer}
.ck-row:hover td{background:var(--surface-2)}
.ck-row.alert td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.ck-no{white-space:nowrap}
.ck-no>span{vertical-align:middle;font-variant-numeric:tabular-nums}
.ck-tick{display:inline-grid;place-items:center;width:26px;height:26px;margin:-3px 4px 0 -4px;vertical-align:middle;cursor:pointer}
.ck-tick input{width:18px;height:18px;margin:0;accent-color:var(--good);cursor:inherit}
.ck-topic b{display:block;font-weight:600}
.ck-topic .pill{display:inline-block;margin-top:4px;font-size:11.5px}
.ck-row.done .ck-topic b{text-decoration:line-through;color:var(--ink-2);font-weight:500}
.ck-text{white-space:pre-wrap;color:var(--ink-2)}
.ck-bad{color:var(--bad);font-weight:600}
.ck-none{color:var(--warn);font-weight:600}
.ck-empty-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.ck-hl{display:block;font-size:13px;font-weight:600;color:var(--ink-2)}
.ck-hist{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.ck-h{padding:8px 10px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2)}
.ck-ht{font-size:13.5px;overflow-wrap:anywhere;white-space:pre-wrap}
.ck-hw{margin-top:2px;font-size:12px;color:var(--ink-2)}
.ck-read{display:flex;flex-direction:column;gap:10px}
.ck-kv span{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.ck-kv b{display:block;font-weight:500;overflow-wrap:anywhere;white-space:pre-wrap}
.ck-tg{margin-bottom:10px}
.ck-tg>b{display:block;margin-bottom:4px;font-size:13.5px}
.ck-tg .check{display:flex;align-items:center;gap:8px;min-height:32px}
.ck-front{display:flex;flex-direction:column}
.ck-fr{display:flex;flex-direction:column;gap:1px;padding:10px 20px;border-top:1px solid var(--line-2);color:inherit;text-decoration:none}
.ck-fr:hover{background:var(--surface-2);text-decoration:none}
.ck-fr b{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.wf-go{display:flex;flex-wrap:wrap;gap:8px}
#page-mgmt .card.strip{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.mt-tbl{table-layout:fixed;width:100%}
.mt-tbl td{overflow-wrap:anywhere}
.mt-tbl th:last-child:empty{width:84px}
@media (max-width:900px){
  .ck-sel{height:40px;flex:1 1 140px;max-width:none;font-size:16px}
  .ck-tg .check{min-height:44px}
  .ck-tick{width:44px;height:44px;margin:-10px 2px -10px -10px}
}

/* ---- the project's More list ---- */
.more-row em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;min-width:22px;height:20px;line-height:20px;padding:0 7px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);text-align:center}
.more-row.on{background:var(--sel-bg);color:var(--sel-ink)}
.more-row.on svg{color:var(--sel-ink)}
.ws-rail .rl.rl-more{display:none}

/* ======================= by finger: a phone or tablet ======================= */
@media (max-width:900px),(pointer:coarse){
  .btn{min-height:44px}
  .btn.sm{min-height:40px}
  .icon-btn{min-width:44px;min-height:44px}
  .ws-ib{width:40px;height:40px}
  .seg button{min-height:40px}
  .lyr-menu button{min-height:44px}
}
@media (max-width:900px){
  /* one bar on top: a mark that can be read, not a wordmark too small to read */
  .gnav-row{height:52px;padding:0 8px 0 12px;gap:6px}
  .gnav .mark{display:none!important}
  .gnav .doc-brand{display:flex!important;gap:8px;margin-right:auto}
  .gnav .doc-mark{width:30px;height:30px;border-radius:9px;background:#1767F0;color:#fff}
  .gnav .doc-name{color:#fff;font-size:16px;letter-spacing:.06em}
  .gnav .doc-sub{display:none}
  .gnav-right{flex:0 0 auto}
  .gnav .tb-search{background:transparent;border:0;height:44px;flex:0 0 44px!important;width:44px;color:#fff}
  .gnav .tb-search svg{width:20px;height:20px}
  .tb-right{gap:2px}
  .topbar{padding:12px 12px 4px!important}
  .topbar h1{font-size:20px}

  /* every sub-page shown, none hidden off the edge */
  html body .tabs{flex-wrap:wrap;overflow:visible;gap:6px;border-bottom:0;margin:10px 0 14px}
  html body .tabs button{min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:999px;margin:0;background:var(--surface);color:var(--ink-2);font-size:13px;font-weight:600}
  html body .tabs button.on{background:var(--sel-bg);color:var(--sel-ink);border-color:var(--sel-line)}

  /* page text a little larger, filter buttons easy to hit */
  .chips button{min-height:40px;padding:0 14px;font-size:13px}
  .view-toggle button{min-width:40px;min-height:40px}
  .tbl td{font-size:14.5px}

  /* Home: figures at a glance, the three areas without a long scroll */
  .hero-banner{padding:20px 16px 76px!important}
  .hero-banner h1{font-size:24px}
  .hero-banner p{font-size:14px;margin-top:4px}
  .mcards{margin-top:-60px;gap:10px}
  #wings .mcard{grid-template-columns:48px minmax(0,1fr) auto 28px;gap:0 12px;padding:12px 14px;align-items:center}
  #wings .mcard .mi{grid-row:1/3;grid-column:1;width:48px;height:48px;border-radius:12px;box-shadow:none}
  #wings .mcard .mi svg{width:24px;height:24px}
  #wings .mcard .mt{grid-column:2;grid-row:1;font-size:15px;align-self:end}
  #wings .mcard .ml{grid-column:2;grid-row:2;font-size:12.5px;margin:0;align-self:start}
  #wings .mcard .mv{grid-column:3;grid-row:1/3;font-size:24px;margin:0;align-self:center}
  #wings .mcard .mgo{grid-column:4;grid-row:1/3;position:static;width:28px;height:28px;align-self:center}
  #wings .mcard .ms,#wings .mcard .mx{display:none}

  /* forms rise from the bottom, and stay above the phone's own bars and keyboard */
  html body .drawer{max-height:92dvh!important}
  html body .drawer-head{touch-action:none;cursor:grab}
  html body .drawer.dragging{transition:none!important}
  .drawer-foot .btn{flex:1 1 auto}
  .drawer-foot .left{flex:0 1 auto}
  .dialog .btn{flex:1}
  #toasts{left:12px!important;right:12px!important;transform:none!important}
  #toasts>*{max-width:none}

  /* ---- a project: the map takes the screen. One title bar, one bar of places along the bottom, like the rest of the app ---- */
  body.pmap-mode .gnav{display:none}
  body.pmap-mode .topbar{padding:8px 10px!important;padding-top:calc(8px + env(safe-area-inset-top))!important}
  #ws .ws-rail{background:var(--surface);border-top:1px solid var(--line);overflow:hidden;padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  #ws .ws-rail .rl{flex:1 1 0;min-width:0;min-height:52px;color:var(--ink-3);justify-content:center}
  #ws .ws-rail .rl:hover{background:none;color:var(--ink-3)}
  #ws .ws-rail .rl.on,#ws .ws-rail .rl.on:hover{background:none;color:var(--navy)}
  #ws .ws-rail .rl.on::before{display:none}
  #ws .ws-rail .rl-ic{width:48px;height:28px;border-radius:999px}
  #ws .ws-rail .rl.on .rl-ic{background:var(--info-soft)}
  #ws .ws-rail .rl-l{font-size:11px}
  #ws .ws-rail .rl-n{background:var(--navy);color:#fff;right:2px}
  #ws .ws-rail .rl-side{display:none}
  #ws .ws-rail .rl.rl-more{display:flex}
  /* with a page open over the map, only the tools that still fit on what is left of it */
  #ws:has(.ws-sheet:not([hidden]):not(.max)) .ws-rt>.rt-g:nth-child(n+3){display:none}
  /* the sheet says which page it is; the bar below is where pages change */
  .sh-tabs .sh-tab:not(.on){display:none}
  .sh-tab{height:44px;padding:0 6px;border-bottom:0}
  .sh-head{align-items:center;padding:6px 6px 0 12px}

  /* ---- a tool fills the screen: a slim bar to come back, nothing else of the console's ---- */
  body.tool-mode .gnav,body.tool-mode .tabbar{display:none!important}
  body.tool-mode{padding-bottom:0}
  body.tool-mode .topbar{padding:4px 8px!important;padding-top:calc(4px + env(safe-area-inset-top))!important;min-height:0}
  body.tool-mode .topbar h1{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.tool-mode .topbar .back-btn{min-width:40px;min-height:40px}
}
.ptable .thumb,.pr-thumb{background-size:contain}
@media (max-width:600px){
  .pcard .th{aspect-ratio:auto}
  .pcard .th[style*="--ths"]{background-image:var(--ths)!important}
  body.pmap-mode .topbar #act-edit{display:none}
  .page section>.note{font-size:14px}
}
/* a phone on its side: the map keeps the height */
@media (max-width:900px) and (max-height:480px){
  #ws .ws-rail .rl{min-height:40px}
  #ws .ws-rail .rl-l{display:none}
  body.pmap-mode .topbar{padding:2px 8px!important}
}

/* ---- project status (4 Nov 2026): the same colours in light and dark, and on the satellite picture ---- */
.pill.stg,.pcard .th .st .pill.stg{display:inline-flex;align-items:center;gap:3px;border:0;color:#fff;font-weight:600;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.25);font-family:inherit}
button.pill.stg{cursor:pointer}
.pill.stg svg{width:13px;height:13px;flex:none;margin-right:-3px}
.pill.stg-enquiry,.pcard .th .st .pill.stg-enquiry,.stg-menu i.stg-enquiry{background:#B45309}
.pill.stg-started,.pcard .th .st .pill.stg-started,.stg-menu i.stg-started{background:#2563EB}
.pill.stg-progress,.pcard .th .st .pill.stg-progress,.stg-menu i.stg-progress{background:#7C3AED}
.pill.stg-completed,.pcard .th .st .pill.stg-completed,.stg-menu i.stg-completed{background:#15803D}
.pcard .th .st{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.stg-cell{display:inline-flex;flex-wrap:wrap;gap:4px}
.hd-stage{display:inline-flex;align-items:center}
.ov-stage{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.stg-menu{position:fixed;z-index:4000;width:210px;padding:6px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.stg-h{padding:6px 10px 8px;font-size:12px;font-weight:600;color:var(--ink-2)}
.stg-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:500 14px var(--font);text-align:left;cursor:pointer}
.stg-menu button span{flex:1;min-width:0}
.stg-menu button svg{flex:none;width:16px;height:16px;color:var(--ink)}
.stg-menu button:hover,.stg-menu button:focus-visible{background:color-mix(in srgb,var(--ink) 8%,transparent);outline:0}
.stg-menu button.on{background:color-mix(in srgb,var(--ink) 12%,transparent);font-weight:700}
.stg-menu i{flex:none;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 14%,transparent)}
/* ---- Project Documents ---- */
.pd-kind{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:10px;font-size:11px;font-weight:700;background:var(--track);color:var(--ink-2)}
.pd-pdf{background:rgba(220,38,38,.12);color:#DC2626}
.pd-sheet{background:rgba(22,163,74,.13);color:#15803D}
.pd-word{background:rgba(37,99,235,.12);color:#2563EB}
.pd-kml{background:rgba(8,145,178,.13);color:#0E7490}
.pd-image{background:rgba(124,58,237,.12);color:#7C3AED}
:root[data-theme="dark"] .pd-pdf{color:#FCA5A5}
:root[data-theme="dark"] .pd-sheet{color:#86EFAC}
:root[data-theme="dark"] .pd-word{color:#93C5FD}
:root[data-theme="dark"] .pd-kml{color:#67E8F9}
:root[data-theme="dark"] .pd-image{color:#C4B5FD}
.ws-rail .rl[data-sec="docs"] .rl-l{overflow:visible;text-overflow:clip;letter-spacing:-.35px;max-width:none}
.pd-who{font-size:13px;margin-top:2px;overflow-wrap:anywhere}
.pd-setup{margin:0 14px 12px;padding:12px 14px;border-radius:10px;background:var(--warn-soft);color:var(--ink);font-size:14px}
.pd-cmd{display:block;margin-top:8px;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.08);font-size:12.5px;overflow-wrap:anywhere}
.pd-choose{align-self:flex-start;width:fit-content;margin-top:8px}
.pd-rows{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.pd-rows:empty{display:none}
.pd-frow{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:4px 6px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:10px}
.pd-frow.bad{border-color:#DC2626}
.pd-frow .pd-fname{min-width:0;width:100%}
.pd-frm{width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font-size:20px;line-height:1;cursor:pointer}
.pd-frm:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
.pd-fmeta{grid-column:1/-1;font-size:12.5px;color:var(--ink-2);overflow-wrap:anywhere}
.pd-fmeta b{color:#DC2626;font-weight:600}
:root[data-theme="dark"] .pd-fmeta b{color:#FCA5A5}
.pd-fmeta .pd-warn{color:#B45309}
:root[data-theme="dark"] .pd-fmeta .pd-warn,:root[data-theme="dark"] .help.pd-warn{color:#FCD34D}
.pd-all{margin:8px 0 4px}
.pd-pick{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow:auto;padding:6px 8px;border:1px solid var(--line);border-radius:10px}
.pd-pick .check{min-height:36px;display:flex;align-items:center;gap:8px}
.help.pd-warn{color:#B45309}
/* the viewer */
.drawer.dv-wide{width:min(1100px,calc(100% - 24px))!important;height:88vh;max-height:88vh}
.drawer.dv-wide #drawer-body{flex:1;min-height:0;padding:0;overflow:hidden;display:flex}
.dv{position:relative;flex:1;min-width:0;display:flex;background:var(--track)}
.dv-body{flex:1;min-width:0;display:flex;flex-direction:column;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.dv-wait{margin:auto;display:flex;align-items:center;gap:10px;color:var(--ink-2)}
.dv-wm{position:absolute;inset:0;pointer-events:none;background-repeat:repeat;z-index:500}
.dv-pages{flex:1;min-height:0;overflow:auto;padding:12px;display:flex;flex-direction:column;align-items:center;gap:12px}
.dv-page{flex:none;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.dv-page canvas{display:block}
.dv-imgw{flex:1;min-height:0;overflow:auto;display:flex;padding:12px}
.dv-img{margin:auto;max-width:100%;height:auto}
.dv-tabs{flex:none;display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px}
.dv-tabs .btn.on{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.dv-fill{flex:1;min-height:0;display:flex;position:relative}
.dv-frame{flex:1;width:100%;border:0;background:#fff}
#dv-map{min-height:200px}
.dv-note{margin-right:auto}
@media print{.dv{display:none}}
@media (max-width:600px){
  .drawer.dv-wide{height:92dvh;max-height:92dvh}
  .pcard .th .st .pill.stg svg{display:none}
  .pcard .th .st .pill.stg{padding:1px 6px}
  .hd-stage{display:none}
  .pd-row .rpt-acts{padding-left:56px;flex-wrap:wrap}
}

/* ---- scope of work (4 Nov 2026): one progress bar for each ticked work ---- */
.sc-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sc-pick .check{display:inline-flex;align-items:center;gap:6px;min-height:36px}
.sb-list{display:flex;flex-direction:column;gap:5px;min-width:0}
.sb{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px;color:var(--ink-2)}
.sb-l{flex:0 0 78px;white-space:nowrap;font-weight:500}
.sb-b{flex:1;min-width:24px;height:6px;border-radius:999px;background:var(--track);overflow:hidden}
.sb-b i{display:block;height:100%;border-radius:999px;background:#22C55E;transition:width .4s ease}
.sb b{flex:0 0 40px;text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.sb.none b{color:var(--ink-3);font-weight:500}
.ptable .sb-list,.tbl .sb-list{min-width:190px}
.topbar>.hd-scope{flex:0 0 100%!important;width:100%;order:9;min-width:0}
.hd-scope[hidden]{display:none}
.topbar:has(.hd-scope:not([hidden])){flex-wrap:wrap;row-gap:6px}
.sb-head{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px 10px}
.sb-head .sb{flex:0 1 190px}
.sb-head .sb{padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:12px;text-align:left;min-height:30px}
.sb-head button.sb{cursor:pointer}
.sb-head button.sb:hover{border-color:var(--hover-line,#2B8AFF)}
.sb-head .sb-l{flex:none}
/* a wide screen: the bars sit in the middle of the header, between the title and the buttons */
@media (min-width:1300px){
  .topbar:has(.hd-scope:not([hidden])){flex-wrap:nowrap}
  .topbar:has(.hd-scope:not([hidden]))>div:not(.acts):not(.tb-right):not(.hd-scope){flex:0 1 auto;max-width:26%}
  .topbar>.hd-scope{flex:1 1 0!important;width:auto;order:1}
  .topbar:has(.hd-scope:not([hidden])) .acts{order:2}
}
@media (max-width:1299px){
  body.pmap-mode .topbar:has(.hd-scope:not([hidden])){flex-wrap:wrap!important;row-gap:6px}
}
.sb-set{display:flex;align-items:center;gap:12px;margin-top:10px}
.sb-set input[type=range]{flex:1;min-width:0}
.sb-set label{display:flex;align-items:center;gap:6px;flex:none}
.sb-set input[type=number]{width:76px}
@media (max-width:600px){
  .sb-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:4px 6px}
  .sb-head .sb{flex:none}
  .sb-head .sb{padding:3px 6px;flex-wrap:wrap;gap:1px 4px;min-height:40px}
  .sb-head .sb-l{flex:1 1 0;min-width:0;font-size:11px;letter-spacing:-.1px}
  .sb-head .sb b{flex:none;font-size:11px}
  .sb-head .sb-b{flex:0 0 100%;order:3;height:4px}
  .sb-l{flex-basis:70px}
}