/* "Operations" (Clients → Edit → LOOK), for companies whose brand has
   theme: "ops". It is Standard with features (app.css + stdplus.css, so the
   bottom bar, swipe, pull to refresh, the menu in sections and the dashboard
   all come with it) with the page around the jobs in navy and grey panels,
   like the approved TakeOff preview of 7 Oct 2026: the top bar, the numbers,
   search and TO DO / ALL, page titles, panels, forms, buttons, the bottom bar
   and the car panel's fields. The job rows (.row, .acts, .sec, the column
   head) are left exactly as Standard's; a browser test checks that.
   Everything here sits under html.ops, so no other look changes. */
html.ops{--op-ink:#18283b;--op-deep:#0f1c2e;--op-mut:#526174;--op-line:#dce2e9;--op-field:#d5dde7;--op-bg:#f5f7fa;}
/* During a phone key check, retain the sync status as an accessible dot so
   the brand, shift and refresh control fit on narrow screens. */
@media(max-width:430px){html.ops body.keychecking .bar #sync.on{font-size:0;padding:0;width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#b58520;}html.ops body.keychecking .bar #sheetPick{min-width:0;flex-shrink:1;}}
html.ops,html.ops body{background:var(--op-bg);}
/* top bar: white, a hairline under it, the wordmark, Drops | Picks, the day, who */
html.ops .top{border-bottom:1px solid #e4e9ef;background:var(--op-bg);}
html.ops .bar{gap:8px;padding:7px 12px;background:#fff;box-shadow:0 1px 0 #e4e9ef,0 0 0 100vmax #fff;clip-path:inset(0 -100vmax -1px);}
html.ops .tobrand{padding:7px 9px;border-radius:6px;font:800 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
html.ops .kindbar:not(.hidden){display:flex;flex:none;padding:2px;border:1px solid var(--op-field);border-radius:6px;background:#fff;}
html.ops .kindbar button{min-height:30px;padding:0 10px;border:0;border-radius:4px;background:none;color:var(--op-mut);font:650 12.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
html.ops .kindbar button[aria-pressed="true"]{background:var(--op-ink);color:#fff;}
html.ops #sheetPick{flex:0 1 auto;width:auto;min-width:0;max-width:100%;height:34px;padding:0 2px;border:0;background:transparent;font-size:13px;font-weight:600;letter-spacing:0;color:var(--op-ink);}
html.ops .who{margin-left:auto;max-width:150px;font-size:11px;font-weight:600;color:var(--op-mut);}
html.ops .who[data-role]:not([data-role=""])::after{content:" · " attr(data-role);font-weight:500;}
html.ops .when{color:var(--op-mut);}
html.ops .pend{background:#fdf3dc;color:#7a5200;font-weight:600;}
html.ops .rf{width:34px;height:34px;border-color:var(--op-field);border-radius:6px;color:var(--op-ink);}
/* a phone: the day picker gets the room, who is in the menu */
@media(max-width:430px){html.ops .bar{gap:6px;padding:6px 8px;}html.ops .tobrand{padding:6px 7px;font-size:13px;}html.ops .kindbar button{padding:0 8px;font-size:12px;}html.ops .who{display:none;}html.ops #sheetPick{min-width:56px;margin-right:auto;font-size:12.5px;}html.ops .rf{width:32px;height:32px;}}

/* board head: as tight as Standard's, so as many jobs fit on the screen:
   the numbers in one slim panel, the search box full width, and under it
   TO DO / ALL sharing a line with "Hide numbers" */
html.ops #boardHead:not(.hidden){display:flex;flex-wrap:wrap;padding:6px 8px 0;background:var(--op-bg);}
html.ops #tally,html.ops #catTally,html.ops #colHead,html.ops #boardHead .qwrap{flex:0 0 100%;}
html.ops #tally{order:1;}html.ops #catTally{order:2;}html.ops #boardHead .qwrap{order:4;}html.ops #boardHead .tabs{order:5;}html.ops #tallyFold{order:6;}html.ops #colHead{order:7;}
html.ops .tally{gap:1px;border:1px solid var(--op-line);border-radius:6px;background:#e4e9ef;overflow:hidden;}
html.ops .tally.cats{margin-top:4px;}
html.ops .tally.cats button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.ops .tally button{padding:4px 8px 5px;text-align:left;}
html.ops .tally span{font-size:9px;font-weight:600;letter-spacing:.5px;color:#48596c;}
html.ops .tally b{display:block;font-size:16px;line-height:1.2;font-weight:650;color:var(--op-ink);font-variant-numeric:tabular-nums;}
html.ops .tally button.on{background:var(--op-ink);}
html.ops .tally button.on b,html.ops .tally button.on span{color:#fff;}
html.ops .tally button.warn:not(.on){background:#fff8e6;}
html.ops .tally .tyards{border-top-color:#e4e9ef;}
html.ops #boardHead .qwrap{min-width:0;margin-top:5px;padding:6px 6px 0;border:1px solid var(--op-line);border-bottom:0;border-radius:6px 6px 0 0;background:#fff;}
html.ops #q{height:38px;padding:0 40px 0 12px;border:1px solid var(--op-field);border-radius:6px;font-size:15px;color:var(--op-ink);}
html.ops #q::placeholder{color:#7b8797;}
html.ops #q:focus{background:#fff;border-color:var(--op-ink);box-shadow:0 0 0 1px var(--op-ink);}
html.ops .qclear{right:10px;top:calc(50% + 3px);width:28px;height:28px;font-size:17px;}
html.ops #boardHead .tabs{flex:1 1 auto;gap:5px;padding:4px 0 4px 6px;border:0;border-left:1px solid var(--op-line);background:#fff;}
html.ops #boardHead .tabs button{flex:none;height:32px;padding:0 12px;border:1px solid var(--op-field);border-radius:6px;background:#fff;color:var(--op-ink);font-size:11.5px;font-weight:650;letter-spacing:.2px;box-shadow:none;}
html.ops #boardHead .tabs button.on{background:var(--op-ink);border-color:var(--op-ink);color:#fff;}
/* "Hide numbers" at the end of the TO DO / ALL line */
html.ops .tfold:not(.hidden){flex:0 1 auto;min-width:0;width:auto;margin:0;padding:0 10px 0 6px;background:#fff;border:0;border-right:1px solid var(--op-line);color:var(--op-mut);font-size:11.5px;}
html.ops #boardHead:has(#tallyFold.hidden) .tabs{border-right:1px solid var(--op-line);}
/* numbers folded: their one-line summary takes that place, cut short to fit */
html.ops body.tfolded .tfold{flex:1 1 0;min-width:0;padding:0 10px 0 4px;}
html.ops body.tfolded #boardHead .tabs{flex:0 0 auto;}
html.ops #colHead{flex-basis:calc(100% + 16px);margin:0 -8px;}
@media(min-width:760px){
 html.ops #boardHead:not(.hidden){padding:12px 16px 0;}
 html.ops #boardHead,html.ops body.on-board main{max-width:1120px;margin-left:auto;margin-right:auto;}
 html.ops #colHead{flex-basis:100%;margin:0;border-left:1px solid var(--op-line);border-right:1px solid var(--op-line);}
 html.ops body.on-board main{padding:0 16px 40px;}
 html.ops body.on-board main > *{border-left:1px solid var(--op-line);border-right:1px solid var(--op-line);}
 html.ops .bar{max-width:1120px;margin:0 auto;padding:9px 16px;}
 html.ops .tally button{padding:7px 12px 8px;}html.ops .tally b{font-size:19px;}
}

/* other screens: a page title, then white panels on grey */
html.ops .viewhead{gap:12px;padding:14px 14px 4px;border-top:0;background:var(--op-bg);}
html.ops .viewhead button{padding:6px 11px;border-color:var(--op-field);border-radius:6px;font-size:12.5px;font-weight:600;color:var(--op-ink);}
html.ops .viewhead strong{font-size:20px;font-weight:650;letter-spacing:-.4px;color:var(--op-ink);}
html.ops body:not(.on-board) main{max-width:1120px;padding:14px 14px calc(32px + env(safe-area-inset-bottom));color:var(--op-ink);}
@media(min-width:760px){html.ops .viewhead{max-width:1120px;margin:0 auto;padding:22px 16px 6px;}html.ops .viewhead strong{font-size:24px;}html.ops body:not(.on-board) main{padding-left:16px;padding-right:16px;}}
html.ops .title{font-size:20px;font-weight:650;letter-spacing:-.4px;color:var(--op-ink);}
html.ops .note{color:var(--op-mut);}
html.ops .box{border-color:var(--op-line);border-radius:6px;box-shadow:none;}
html.ops .box > strong:first-child{display:block;font-size:14px;font-weight:650;color:var(--op-ink);}
html.ops .rowline{border-bottom-color:#edf0f4;}
html.ops .section-label{font-size:10.5px;font-weight:650;letter-spacing:1px;color:var(--op-mut);}
html.ops .field{gap:5px;font-size:12.5px;color:var(--op-mut);}
html.ops .field input,html.ops .field select,html.ops .inline-selects select,html.ops .toolbar input[type=search]{min-height:44px;border:1px solid var(--op-field);border-radius:6px;font-size:15px;color:var(--op-ink);}
html.ops .field input:focus,html.ops .field select:focus{outline:0;border-color:var(--op-ink);box-shadow:0 0 0 1px var(--op-ink);}
html.ops .btn{min-height:44px;border-radius:6px;font-size:14px;font-weight:650;}
html.ops .btn:not(.ghost):not(.warn){background:var(--op-ink);border-color:var(--op-ink);color:#fff;}
html.ops .btn.ghost{border-color:var(--op-field);color:var(--op-ink);}
html.ops .btn.small{min-height:38px;font-size:12.5px;}
html.ops .seg{border-color:var(--op-field);border-radius:6px;}
html.ops .seg button[aria-pressed=true]{background:var(--op-ink);}
html.ops .alert{border-radius:0 6px 6px 0;}
html.ops .deskbtn{height:46px;padding:0 18px 0 14px;border-radius:6px;background:var(--op-ink);color:#fff;font-size:14px;box-shadow:0 4px 14px rgb(15 28 46 / .25);}
/* Staff: a round initial before each name */
html.ops .staffbox .rowline[data-initial]::before{content:attr(data-initial);flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--op-line);border-radius:50%;background:var(--op-bg);color:var(--op-mut);font-size:12px;font-weight:650;}
html.ops .staffbox .rowline strong{font-weight:650;}

/* number boxes: flat panels, the headline one navy with a progress bar */
html.ops .stats{gap:10px;}
html.ops .stats .stat{padding:14px 14px 15px;border:1px solid var(--op-line);border-radius:6px;box-shadow:none;}
html.ops .stats .stat .ki{display:none;}
html.ops .stats .stat > span{font-size:11.5px;font-weight:500;color:#48596c;}
html.ops .stats .stat > strong{margin-top:6px;font-size:26px;font-weight:650;color:var(--op-ink);}
html.ops .stats .stat > small{font-size:11px;color:var(--op-mut);}
html.ops .stats .stat.zero > strong{color:var(--op-ink);}
html.ops .dstats .stat.warn{background:#fff;box-shadow:none;border-color:#e5c4bf;}
html.ops .dstats .stat.warn > strong{color:#b42318;}
html.ops .stats .stat.big,html.ops .stats .stat.k-parked{min-height:0;padding:20px 20px 18px;border:0;border-left:3px solid var(--brand);background:var(--op-deep);color:#fff;box-shadow:none;}
html.ops .stats .stat.big > span,html.ops .stats .stat.k-parked > span,html.ops .stats .stat.k-parked > small{color:#c4cfdd;opacity:1;}
html.ops .stats .stat.big > strong,html.ops .stats .stat.k-parked > strong{margin-top:8px;font-size:40px;line-height:1.1;letter-spacing:-1px;color:#fff;}
html.ops .stats .stat .pring{display:none;}
html.ops .stats .stat.big .pbar{display:block;height:5px;margin-top:16px;background:#2b3a4f;}
html.ops .stats .stat.big .pbar-pc{display:block;color:#c4cfdd;font-size:11.5px;}
html.ops .stats .stat .mbar i{background:#8396ad;}
html.ops .actbar .chips button{border-color:var(--op-field);border-radius:6px;color:var(--op-ink);font-size:12.5px;font-weight:650;}
html.ops .actbar .chips button.on{background:var(--op-ink);border-color:var(--op-ink);}
html.ops #actQ{border-color:var(--op-field);border-radius:6px;}
html.ops .actday{font-size:10.5px;font-weight:650;color:var(--op-mut);}
html.ops .pst.head,html.ops .pst.tot,html.ops .pst4.head,html.ops .pst4.tot{background:#eef2f6;}

/* bottom bar: navy for the open section, a brand line under it */
html.ops .bnav:not(.hidden){border-top-color:#e4e9ef;}
html.ops .bnav button{position:relative;color:#6b7787;}
html.ops .bnav button.on{color:var(--op-ink);font-weight:650;}
html.ops .bnav button.on::after{content:"";position:absolute;left:50%;bottom:-3px;width:26px;height:2px;margin-left:-13px;border-radius:2px;background:var(--brand);}

/* menu and the car panel: the same fields and buttons */
html.ops dialog.sheet{border-top:0;color:var(--op-ink);box-shadow:0 -8px 30px rgb(15 28 46 / .18);}
html.ops .sheet h2{font-weight:650;letter-spacing:-.3px;}
html.ops .sheet .sub{color:var(--op-mut);}
html.ops .sheet label{font-size:10.5px;font-weight:650;letter-spacing:.8px;color:var(--op-mut);}
html.ops .sheet input,html.ops .sheet textarea,html.ops .sheet select{border-color:var(--op-field);border-radius:6px;color:var(--op-ink);}
html.ops .sheet input:focus,html.ops .sheet textarea:focus,html.ops .sheet select:focus{outline:0;border-color:var(--op-ink);box-shadow:0 0 0 1px var(--op-ink);}
html.ops .pbtns button{border-radius:6px;border-color:var(--op-field);background:#fff;color:var(--op-ink);font-weight:650;letter-spacing:.2px;}
html.ops .pbtns button.save{background:var(--op-ink);border-color:var(--op-ink);color:#fff;}
html.ops .menu-list{border-color:var(--op-line);border-radius:6px;}
html.ops .menu-list button{font-size:15px;color:var(--op-ink);}
html.ops #menuBody > label,html.ops #menuBody > .mgrp > label{font-size:10.5px;font-weight:650;color:var(--op-mut);}
html.ops .pclose{border-color:var(--op-field);background:#fff;color:var(--op-ink);}
html.ops .staffbox .rowline{flex-wrap:wrap;}
html.ops .staffbox .sbtns{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%;padding-left:46px;}

/* page titles: OPERATIONS / NAME above, no back button (Board is in the bottom bar) */
html.ops .viewhead button[data-view="board"]{display:none;}
html.ops #viewTitle::before{content:"OPERATIONS / " attr(data-eyebrow);display:block;margin-bottom:5px;font-size:10px;font-weight:650;letter-spacing:1.5px;color:var(--op-mut);}
html.ops .viewhead strong{font-size:23px;}

/* Hourly stats and Shift summary */
html.ops .ops-sub{margin:-2px 0 12px;font-size:13px;color:var(--op-mut);}
html.ops .ops-acts{display:flex;gap:8px;margin:0 0 14px;}
html.ops .ops-strip{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin:0 0 14px;border:1px solid var(--op-line);border-radius:6px;background:#fff;overflow:hidden;}
html.ops .ops-strip > div{min-width:0;padding:13px 12px 14px;border-left:1px solid #e4e9ef;}
html.ops .ops-strip > div:first-child{border-left:0;}
html.ops .ops-strip span{display:block;font-size:11px;color:#48596c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.ops .ops-strip strong{display:block;margin-top:8px;font-size:24px;line-height:1.1;font-weight:650;color:var(--op-ink);}
html.ops .ops-card{margin:0 0 14px;border:1px solid var(--op-line);border-radius:6px;background:#fff;overflow:hidden;}
html.ops .ops-card > header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 14px 13px;border-bottom:1px solid #e4e9ef;}
html.ops .ops-card > header strong{font-size:13.5px;font-weight:650;color:var(--op-ink);}
html.ops .ops-card > header small{font-size:12px;color:var(--op-mut);}
html.ops .ops-tr{display:grid;grid-template-columns:minmax(0,1fr) repeat(var(--cols),minmax(52px,auto));align-items:center;gap:10px;min-height:46px;padding:9px 14px;border-top:1px solid #edf0f4;font-size:13.5px;}
html.ops .ops-card > header + .ops-tr{border-top:0;}
html.ops .ops-tr b{font-weight:500;color:var(--op-ink);}
html.ops .ops-tr b small{display:block;margin-top:2px;font-size:11.5px;font-weight:400;color:var(--op-mut);}
html.ops .ops-tr i{font-style:normal;text-align:right;color:var(--op-ink);}
html.ops .ops-tr.th{min-height:40px;background:#f8fafc;font-size:11px;color:var(--op-mut);}
html.ops .ops-tr.th b,html.ops .ops-tr.th i{font-weight:500;color:var(--op-mut);}
html.ops .ops-tr.tot{background:#f8fafc;font-weight:650;}
html.ops .ops-tr.tot b,html.ops .ops-tr.tot i{font-weight:650;}
html.ops .ops-foot{margin:0;padding:11px 14px;border-top:1px solid #e4e9ef;font-size:11.5px;color:var(--op-mut);}
html.ops .ops-card .box{border:0;border-radius:0;}
html.ops body:not(.on-board) main .stats:has(.stat.big){display:block;margin-bottom:14px;}
html.ops .stats .stat.big{display:block;}

/* Menu: a page between the top bar and the bottom bar, its sections in panels */
html.ops dialog#menu{position:fixed;inset:var(--ops-menu-top,0px) 0 var(--ops-menu-bottom,0px) 0;width:100%;max-width:none;height:auto;max-height:none;margin:0;padding:18px 14px 28px;border:0;border-radius:0;background:var(--op-bg);box-shadow:none;}
html.ops dialog#menu::backdrop,html.ops #panel.ops-car::backdrop{background:transparent;}
html.ops #menuBody{max-width:1092px;margin:0 auto;}
html.ops #menuBody > h2,html.ops #panel.ops-car h2{font-size:23px;font-weight:650;letter-spacing:-.4px;color:var(--op-ink);}
html.ops #menuBody > h2::before{content:"OPERATIONS / MENU";}
html.ops #panel.ops-car h2::before{content:"OPERATIONS / BOOKING DETAILS";}
html.ops #menuBody > h2::before,html.ops #panel.ops-car h2::before{display:block;margin-bottom:6px;font-size:10px;font-weight:650;letter-spacing:1.5px;color:var(--op-mut);}
html.ops #menuBody > .sub{margin:4px 0 16px;font-size:13px;}
html.ops #menuBody > label,html.ops #menuBody > .mgrp > label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:14px 0 0;padding:15px 16px 14px;border:1px solid var(--op-line);border-bottom-color:#e4e9ef;border-radius:6px 6px 0 0;background:#fff;font-size:13.5px;font-weight:650;letter-spacing:0;color:var(--op-ink);}
html.ops #menuBody > label small,html.ops #menuBody > .mgrp > label small{font-size:12px;font-weight:500;color:var(--op-mut);}
html.ops #menuBody > label + .menu-list,html.ops #menuBody > .mgrp > label + .menu-list{margin:0;border:1px solid var(--op-line);border-top:0;border-radius:0 0 6px 6px;}
html.ops #menuBody > label + .pseg,html.ops #menuBody > .mgrp > label + .pseg{margin:0;padding:10px;border:1px solid var(--op-line);border-top:0;border-radius:0 0 6px 6px;background:#fff;}
html.ops #menuBody .menu-list button{min-height:56px;padding:0 16px 0 28px;border-top-color:#edf0f4;font-size:14.5px;font-weight:600;color:#2a4363;}
html.ops #menuBody .menu-list button::after{content:"›";margin-left:auto;font-size:18px;font-weight:500;color:var(--op-mut);}
html.ops #menuBody .menu-list .mi{display:none;}
html.ops #menuBody .menu-list button[aria-current=page]{box-shadow:inset 3px 0 0 var(--brand);background:#fff;color:var(--op-ink);}
html.ops #menuBody .menu-danger{border-top-color:var(--op-field);}
html.ops #menuBody .menu-danger button{border-radius:6px;font-size:14px;font-weight:650;}
html.ops #menuBody .pbtns{margin-top:18px;}

/* Staff & access: Add person, then the team in one panel, each with an Actions menu */
html.ops .ops-card:has(.ops-team){overflow:visible;}
html.ops .ops-team{border:0;border-radius:0;background:none;overflow:visible;}
html.ops .ops-person{display:flex;align-items:flex-start;gap:12px;padding:16px 14px;border-top:1px solid #edf0f4;}
html.ops .ops-person:first-child{border-top:0;}
html.ops .ops-person > i{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:5px;background:#eef1f5;color:var(--op-mut);font-size:12px;font-style:normal;font-weight:650;}
html.ops .ops-person .grow{flex:1;min-width:0;}
html.ops .ops-person .grow strong{display:block;font-size:14.5px;font-weight:650;color:var(--op-ink);}
html.ops .ops-person .grow small{display:block;margin-top:2px;font-size:12px;color:var(--op-mut);}
html.ops .ops-person .grow span{display:block;margin-top:16px;font-size:12.5px;color:var(--op-ink);}
html.ops .ops-person.off .grow{opacity:.6;}
html.ops .ops-side{display:flex;flex-direction:column;align-items:flex-end;gap:14px;}
html.ops .ops-side em,html.ops .ops-badge{display:inline-block;padding:3px 7px;border:1px solid var(--op-field);border-radius:4px;background:#f5f7fa;color:var(--op-mut);font-size:11px;font-style:normal;font-weight:650;white-space:nowrap;}
html.ops .ops-side em.on,html.ops .ops-badge.ok{border-color:#bfe0c9;background:#e8f5ec;color:#1e6b3a;}
html.ops .ops-badge.warn{border-color:#f0d9a8;background:#fdf3dc;color:#7a5200;}
html.ops .ops-badge.bad{border-color:#f1c3bf;background:#fdeceb;color:#b42318;}
html.ops .ops-dd{position:relative;}
html.ops .ops-dd summary{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 20px;border:1px solid var(--op-field);border-radius:6px;background:#fff;color:var(--op-ink);font-size:13px;font-weight:600;list-style:none;cursor:pointer;}
html.ops .ops-dd summary::-webkit-details-marker{display:none;}
html.ops .ops-dd summary::after{content:"";width:5px;height:5px;margin-top:-3px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);}
html.ops .ops-dd > div{position:absolute;right:0;top:calc(100% + 4px);z-index:5;display:flex;flex-direction:column;min-width:170px;padding:4px;border:1px solid var(--op-line);border-radius:6px;background:#fff;box-shadow:0 8px 24px rgb(15 28 46 / .16);}
html.ops .ops-dd > div button{padding:11px 12px;border:0;border-radius:4px;background:none;color:var(--op-ink);font-size:13.5px;text-align:left;}
html.ops .ops-dd > div button:hover{background:var(--op-bg);}
html.ops .ops-add .ops-fields{padding:4px 14px 0;}
html.ops .ops-btns{display:flex;justify-content:flex-end;padding:4px 14px 14px;}
html.ops .ops-x{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--op-field);border-radius:6px;background:#fff;color:var(--op-ink);font-size:20px;line-height:1;}

/* Settings: each box a panel, its title on a line with what it's set to, the buttons in a footer */
html.ops main[data-view="settings"]{max-width:720px;}
html.ops main[data-view="settings"] .box{max-width:none !important;padding:0 14px !important;background:#fff;}
html.ops main[data-view="settings"] .box > strong:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 -14px 4px;padding:15px 14px 14px;border-bottom:1px solid #e4e9ef;}
html.ops main[data-view="settings"] .box > strong:first-child small{font-size:12px;font-weight:500;color:var(--op-mut);text-align:right;}
html.ops main[data-view="settings"] .box > .row-actions{justify-content:flex-end;margin:14px -14px 0;padding:12px 14px;border-top:1px solid #e4e9ef;}
html.ops main[data-view="settings"] .box > :last-child:not(.row-actions){margin-bottom:14px;}
html.ops main[data-view="settings"] .box.fchecks{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;}
html.ops main[data-view="settings"] .box.fchecks > *{grid-column:1 / -1;}
html.ops main[data-view="settings"] .box.fchecks .field{grid-column:auto;margin:6px 0;}
html.ops main[data-view="settings"] .box.fchecks .pair{display:contents;}
html.ops main[data-view="settings"] .box.fchecks .section-label{display:none;}
html.ops main[data-view="settings"] .box.fchecks select{min-width:0;}
html.ops .ops-unsaved{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:12px 14px;border:1px solid #f0d9a8;border-radius:6px;background:#fdf6e7;color:#5c4510;font-size:13px;}
html.ops .ops-unsaved .btn{flex:none;}

/* Flights: when they were checked, the numbers, then each flight's times and status */
html.ops .ops-check{align-items:center;justify-content:flex-end;flex-wrap:wrap;}
html.ops .ops-dot{margin-right:auto;font-size:12.5px;color:var(--op-mut);}
html.ops .ops-dot::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#2e9e5b;vertical-align:1px;}
html.ops .ops-dot.never::before{background:#b9c2cd;}
html.ops .ops-fl{border-top:1px solid #edf0f4;}
html.ops .ops-card > header + .ops-fl{border-top:0;}
html.ops .ops-flin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 12px;padding:15px 14px;cursor:pointer;}
html.ops .ops-flin > b{align-self:center;font-size:15px;font-weight:650;color:var(--op-ink);}
html.ops .ops-flcar{min-width:0;text-align:right;}
html.ops .ops-flcar > span{display:block;font-size:14px;font-weight:600;color:var(--op-ink);}
html.ops .ops-flcar small{display:block;overflow:hidden;font-size:11.5px;color:var(--op-mut);text-overflow:ellipsis;white-space:nowrap;}
html.ops .ops-flt{margin-top:10px;}
html.ops .ops-flt small{display:block;font-size:11.5px;color:var(--op-mut);}
html.ops .ops-flt span{font-size:15px;color:var(--op-ink);}
html.ops .ops-flin .ops-badge{grid-column:1 / -1;justify-self:start;margin-top:6px;}
@media(min-width:760px){
 html.ops .ops-flin{grid-template-columns:110px minmax(0,1fr) 100px 100px 200px;align-items:center;}
 html.ops .ops-flcar{text-align:left;}
 html.ops .ops-flt{margin:0;}
 html.ops .ops-flin .ops-badge{grid-column:auto;margin:0;}
}

/* Booking details (the car panel): a page like the others, the boxes in one panel, Cancel and Save always in view */
html.ops #panel.ops-car{position:fixed;inset:var(--ops-menu-top,0px) 0 var(--ops-menu-bottom,0px) 0;width:100%;max-width:none;height:auto;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--op-bg);box-shadow:none;}
html.ops #panel.ops-car #panelBody{position:relative;max-width:720px;min-height:100%;display:flex;flex-direction:column;margin:0 auto;padding:18px 14px 0;}
html.ops #panel.ops-car h2{padding-right:46px;}
html.ops #panel.ops-car .sub{margin:4px 0 14px;font-size:13px;}
html.ops #panel.ops-car .ops-x{position:absolute;top:18px;right:14px;}
html.ops .ops-sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;padding:0 14px 16px;border:1px solid var(--op-line);border-radius:6px;background:#fff;}
html.ops .ops-sheet > *{grid-column:1 / -1;}
html.ops .ops-sheet > .ops-f:not(.wide){grid-column:auto;}
html.ops .ops-sheet .tel{margin-top:14px;border-radius:6px;}
html.ops .ops-psec{margin:14px -14px 2px;padding:15px 14px 14px;border-top:1px solid #e4e9ef;border-bottom:1px solid #e4e9ef;font-size:13.5px;font-weight:650;color:var(--op-ink);}
html.ops .ops-sheet > .ops-psec:first-child{margin-top:0;border-top:0;}
html.ops .ops-sheet .det{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:12px 0 0;border:0;}
html.ops .ops-sheet .det > div{display:block;padding:0;border:0;}
html.ops .ops-sheet .det b{display:block;margin-bottom:4px;font-size:12px;font-weight:500;letter-spacing:0;color:var(--op-mut);}
html.ops .ops-sheet .det span{font-size:14.5px;color:var(--op-ink);overflow-wrap:anywhere;}
html.ops .ops-f > label{margin:14px 0 6px;font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--op-mut);}
html.ops .ops-f input,html.ops .ops-f select,html.ops .ops-f textarea{min-height:44px;font-size:15px;}
html.ops #panel.ops-car #carHist{margin-top:14px;}
html.ops #panel.ops-car .ops-foot2{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:auto -14px 0;padding:10px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--op-line);background:#fff;}
html.ops #panel.ops-car .ops-foot2 small{grid-column:1 / -1;font-size:11.5px;color:var(--op-mut);}
html.ops #panel.ops-car .ops-foot2 button:only-of-type{grid-column:1 / -1;}
html.ops #boardHead .tabs .keybtn.on{background:#137A45;border-color:#137A45;color:#fff;}

/* Dashboard: the page header above already names it, so its own title goes. */
html.ops .od-head h1{display:none;}
html.ops .od-head{justify-content:flex-end;}

/* ── Wide screen (900 px and up, body.ops-desk set by the app): the bottom bar
   becomes tabs under the top bar; the DROPS board is a table (time, car, flight,
   customer, yard, status, buttons) and Flights are tables, across the width.
   900–1199 px (a tablet on its side, a small laptop) folds the customer under
   the car. Below 900 px nothing here applies: the phone layout above stays. ── */
html.ops body:not(.ops-desk) .bn-desk,html.ops body:not(.ops-desk) #opsHead{display:none!important;}
@media(min-width:900px){
 html.ops body.ops-desk{--dw:1440px;--dg:24px;padding-bottom:0;}
 html.ops body.ops-desk .bar{max-width:var(--dw);padding:8px var(--dg);}
 html.ops body.ops-desk .tobrand{padding:9px 12px;font-size:16px;}
 html.ops body.ops-desk .kindbar button{min-height:34px;padding:0 16px;font-size:13.5px;}
 html.ops body.ops-desk #sheetPick{font-size:14px;}
 html.ops body.ops-desk .who{max-width:260px;font-size:12.5px;}
 /* the tabs */
 html.ops body.ops-desk .bnav:not(.hidden){position:static;z-index:auto;display:flex;gap:2px;max-width:var(--dw);margin:0 auto;padding:0 calc(var(--dg) - 12px);background:#fff;border:0;box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax);}
 html.ops body.ops-desk .top{border-bottom:0;}
 html.ops body.ops-desk .bnav:not(.hidden){position:relative;border-bottom:1px solid #e4e9ef;border-image:linear-gradient(#e4e9ef,#e4e9ef) 0 0 1 0 / 0 0 1px 0 / 0 100vmax;}
 html.ops body.ops-desk .bnav button{flex:none;flex-direction:row;gap:0;min-height:44px;padding:0 14px;color:var(--op-mut);font-size:14px;font-weight:600;}
 html.ops body.ops-desk .bnav button svg{display:none;}
 html.ops body.ops-desk .bnav button:hover{color:var(--op-ink);}
 html.ops body.ops-desk .bnav button.on{color:var(--op-ink);}
 html.ops body.ops-desk .bnav button.on::after{left:10px;right:10px;bottom:0;width:auto;height:3px;margin:0;border-radius:2px 2px 0 0;}
 html.ops body.ops-desk .bnav [data-bn="menuBtn"]{margin-left:auto;}
 html.ops body.ops-desk .bnav button:focus-visible{outline:2px solid var(--op-ink);outline-offset:-4px;}
 html.ops body.ops-desk .deskbtn{bottom:24px!important;}
 /* board head: the title and the sheet, then search, TO DO / ALL / Key check and the counts on one line */
 html.ops body.ops-desk #boardHead:not(.hidden){max-width:var(--dw);align-items:center;gap:8px;padding:18px var(--dg) 0;}
 html.ops body.ops-desk #opsHead{order:0;flex:0 0 100%;}
 html.ops .opshead h1{margin:0;font-size:26px;line-height:1.15;font-weight:700;letter-spacing:-.5px;color:var(--op-ink);}
 html.ops .ops-scope{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:4px 0 6px;font-size:14px;color:var(--op-mut);}
 html.ops .ops-scope b{font-weight:700;letter-spacing:.5px;color:var(--op-ink);}
 html.ops .ops-scope .ops-badge{margin-left:4px;}
 html.ops body.ops-desk #boardHead .qwrap{order:1;flex:0 1 380px;margin:0;padding:0;border:0;background:none;}
 html.ops body.ops-desk .qclear{top:50%;}
 html.ops body.ops-desk #q{height:40px;font-size:14px;}
 html.ops body.ops-desk #boardHead .tabs{order:2;flex:none;padding:0;border:0;background:none;}
 html.ops body.ops-desk #boardHead .tabs button{height:40px;padding:0 14px;font-size:12.5px;}
 html.ops body.ops-desk #boardHead .tabs .keybtn b{font-weight:650;}
 html.ops body.ops-desk #tallyFold{display:none!important;}
 html.ops body.ops-desk #tally,html.ops body.ops-desk.tfolded #tally{order:3;flex:1 1 auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px;margin:0;border:0;background:none;}
 html.ops body.ops-desk.tfolded #catTally:not(.hidden){display:flex;}
 html.ops body.ops-desk #catTally{order:4;flex:0 0 100%;}
 html.ops body.ops-desk #tally .tyards{display:contents;}
 html.ops body.ops-desk #tally button{flex:none;display:inline-flex;align-items:baseline;gap:6px;padding:7px 10px;border-radius:6px;background:none;}
 html.ops body.ops-desk #tally button:hover{background:#eef1f5;}
 html.ops body.ops-desk #tally button span{font-size:11px;letter-spacing:.4px;}
 html.ops body.ops-desk #tally button span::before{content:"";display:none;width:9px;height:9px;margin-right:6px;border-radius:2px;vertical-align:0;}
 html.ops body.ops-desk #tally button b{display:inline;font-size:16px;}
 html.ops body.ops-desk #tally button.on{background:var(--op-ink);}
 html.ops body.ops-desk #tally button.warn:not(.on){background:#fff8e6;}
 html.ops body.ops-desk #colHead{order:9;margin-top:10px;}
 html.ops body.ops-desk #boardHead:has(#tallyFold.hidden) .tabs{border-right:0;}
 /* the DROPS table: the column head and every row on the same columns */
 html.ops body.ops-desk{--dcols:84px minmax(150px,1.05fr) minmax(96px,.55fr) minmax(150px,1.1fr) 92px minmax(200px,1.7fr) 300px;--dareas:"t r f c y s a" "t n n n n n a";}
 html.ops body.ops-desk.on-board main{max-width:var(--dw);padding:0 var(--dg) 40px;}
 html.ops body.ops-desk.picks.on-board main{padding-bottom:96px;}
 html.ops body.ops-desk.picks{--dcols:84px minmax(140px,1fr) minmax(150px,1.1fr) 130px 130px minmax(160px,1fr) 320px;--dareas:"t r c b f s a" "t n n n n n a";}
 html.ops .drow .dc-b{grid-area:b;}
 html.ops .prow .dc-b b{font-size:14px;font-weight:600;color:var(--op-ink);}
 html.ops .prow .cat{font-size:9.5px;}
 html.ops body.ops-desk #colHead.dhead{display:grid;grid-template-columns:var(--dcols);gap:0;padding:0;border:1px solid var(--op-line);border-bottom:0;border-radius:6px 6px 0 0;background:#eef2f6;font-size:11px;font-weight:650;letter-spacing:.6px;text-transform:uppercase;color:#48596c;}
 html.ops body.ops-desk #colHead.dhead span{padding:10px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 html.ops body.ops-desk main .sec{padding:8px 12px 7px;font-size:11.5px;letter-spacing:.8px;}
 html.ops .drow{display:grid;grid-template-columns:var(--dcols);grid-template-areas:var(--dareas);align-items:stretch;gap:0;min-height:58px;padding:0;font-size:14px;contain-intrinsic-size:auto 58px;}
 html.ops .drow .dc{min-width:0;padding:8px 12px;}
 html.ops .drow [data-open]{cursor:pointer;}
 html.ops .drow .dc-t{grid-area:t;display:flex;flex-direction:column;justify-content:center;}
 html.ops .drow .dc-t b{font-size:19px;font-weight:700;letter-spacing:-.2px;color:var(--op-ink);}
 html.ops .drow .dc-t small{margin-top:2px;font-size:11.5px;color:var(--op-mut);}
 html.ops .drow .dc-r{grid-area:r;}html.ops .drow .dc-f{grid-area:f;}html.ops .drow .dc-c{grid-area:c;}html.ops .drow .dc-s{grid-area:s;}
 html.ops .drow .dc-y{grid-area:y;display:flex;align-items:center;}
 html.ops .drow .dc-n{grid-area:n;padding-top:0;}
 html.ops .drow .dc-n .l3{margin:0 6px 6px 0;}
 html.ops .drow .l1{display:flex;align-items:center;gap:6px;min-width:0;font-size:14.5px;font-weight:600;color:var(--op-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 html.ops .drow .dc-c .l1{display:block;}
 html.ops .drow .reg{font-size:16.5px;font-weight:700;letter-spacing:.3px;color:var(--op-ink);}
 html.ops .drow .sub{margin-top:2px;font-size:12.5px;color:var(--op-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 html.ops .drow .dc-s .sub{display:flex;flex-wrap:wrap;gap:3px 6px;white-space:normal;}
 html.ops .drow .mut{color:#8692a2;font-weight:500;}
 html.ops .drow .tag{font-size:10.5px;font-weight:700;color:#1558d6;}
 html.ops .drow .tag.ck,html.ops .drow .tag.cx{padding:1px 5px;border-radius:4px;background:#b06000;color:#fff;}
 html.ops .drow .tag.ov{color:#b06000;}
 html.ops .drow .tag.due{padding:1px 5px;border-radius:4px;background:#b42318;color:#fff;}
 html.ops .drow .tag.pd{padding:1px 5px;border-radius:4px;background:#e6f4ea;color:#137333;}
 html.ops .drow .st-n{font-weight:500;color:var(--op-mut);}
 html.ops .drow .st-c{color:#0b3d78;}html.ops .drow .st-s{color:#1e6b3a;}html.ops .drow .st-o{color:#b06000;}html.ops .drow .st-x{color:#3c4043;}
 html.ops .drow .fx{font-weight:650;color:var(--op-ink);}
 html.ops .drow .fx.bad{color:#b42318;}html.ops .drow .fx.warn{color:#9a5b00;}html.ops .drow .fx.ok{color:#1e6b3a;}
 html.ops .drow .code{padding:3px 8px;font-size:12px;}
 html.ops .drow select.code.pick{min-height:30px;padding:0 6px;font-size:12px;}
 html.ops .drow .kbox{width:22px;height:22px;}
 html.ops .drow .addflight{line-height:24px;}
 html.ops .drow .flno{margin:0;padding:1px 4px;margin-left:-4px;border:1px solid transparent;border-radius:4px;background:none;font:inherit;font-weight:700;color:var(--op-ink);cursor:pointer;}
 html.ops .drow .flno.mut{font-weight:500;color:#8692a2;}
 html.ops .drow .flno:hover{border-color:#c3ccd7;border-style:dashed;}
 html.ops .drow .flno:focus-visible{outline:2px solid var(--op-ink);outline-offset:1px;}
 html.ops .drow .ftm{color:var(--op-mut);}
 html.ops .row.done.drow .sub,html.ops .row.done.drow .dc-t b{color:#80868b;}
 html.ops .drow .acts{grid-area:a;width:auto;flex:none;align-items:center;gap:6px;padding:8px 12px;}
 html.ops .drow .acts button{min-height:42px;border-radius:6px;font-size:11.5px;letter-spacing:.3px;}
 html.ops .drow .acts button.lng{font-size:10px;}
 html.ops .drow .acts button small{font-size:11px;}
 html.ops .drow .acts button:not(:disabled):hover{border-color:var(--op-ink);}
 html.ops .drow .acts button:focus-visible,html.ops .drow .reg:focus-visible{outline:2px solid var(--op-ink);outline-offset:1px;}
 html.ops .drow .acts.steps{flex-direction:row;justify-content:flex-start;flex-wrap:wrap;}
 html.ops .ops-bfoot{margin:0;padding:10px 12px 12px;border:1px solid var(--op-line);border-top:1px solid #e4e9ef;border-radius:0 0 6px 6px;background:#fff;font-size:12px;color:var(--op-mut);}
 /* Flights: as wide as the board */
 html.ops body.ops-desk:has(main[data-view="flights"]) .viewhead{max-width:var(--dw);padding:20px var(--dg) 0;}
 html.ops body.ops-desk main[data-view="flights"]{max-width:var(--dw);padding:6px var(--dg) 40px;}
 html.ops .fd-check{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:4px 0 14px;padding:12px 0;border-top:1px solid #e4e9ef;border-bottom:1px solid #e4e9ef;}
 html.ops .fd-check p{margin:0;font-size:13px;color:var(--op-mut);}
 html.ops .fd-check .bad{color:#b42318;}
 html.ops .fd-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
 html.ops .fd-strip{grid-auto-columns:minmax(0,1fr);}
 html.ops .fd-strip > div{padding:12px 14px;}
 html.ops .fd-strip strong{margin-top:6px;font-size:22px;}
 html.ops .fd-strip small{display:block;margin-top:2px;font-size:11px;color:var(--op-mut);}
 html.ops .fd-strip .warn strong{color:#9a5b00;}html.ops .fd-strip .bad strong{color:#b42318;}
 html.ops .fd-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px;}
 html.ops .fd-tabs{display:flex;flex-wrap:wrap;padding:2px;border:1px solid var(--op-field);border-radius:6px;background:#fff;}
 html.ops .fd-tabs button{min-height:34px;padding:0 12px;border:0;border-radius:4px;background:none;color:var(--op-ink);font-size:13px;font-weight:600;}
 html.ops .fd-tabs button span{margin-left:4px;color:var(--op-mut);font-weight:600;}
 html.ops .fd-tabs button.on{background:var(--op-ink);color:#fff;}
 html.ops .fd-tabs button.on span{color:#c4cfdd;}
 html.ops .fd-tabs button:focus-visible{outline:2px solid var(--op-ink);outline-offset:1px;}
 html.ops .fd-unit{font-size:12px;color:var(--op-mut);}
 html.ops #flQ{flex:0 1 320px;min-width:200px;height:40px;margin-left:auto;padding:0 12px;border:1px solid var(--op-field);border-radius:6px;font-size:14px;color:var(--op-ink);}
 html.ops #flQ:focus{outline:0;border-color:var(--op-ink);box-shadow:0 0 0 1px var(--op-ink);}
 html.ops .fd-card > header{justify-content:flex-start;align-items:center;padding:12px 14px;}
 html.ops .fd-card > header small{margin-right:auto;}
 html.ops .fd-card > header .btn{min-height:34px;}
 html.ops .fd-tr{display:grid;align-items:center;gap:0 12px;min-height:48px;padding:6px 14px;border-top:1px solid #edf0f4;font-size:14px;color:var(--op-ink);}
 html.ops .fd-card > header + .fd-tr{border-top:0;}
 html.ops .fd-tr > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 html.ops .fd-tr [data-open]{cursor:pointer;}
 html.ops .fd-tr.th{min-height:36px;background:#f8fafc;font-size:11px;font-weight:650;letter-spacing:.6px;text-transform:uppercase;color:#48596c;}
 html.ops .fd-a{grid-template-columns:72px minmax(170px,1.2fr) 110px minmax(200px,2fr) 120px 124px;}
 html.ops .fd-s{grid-template-columns:72px minmax(170px,1.2fr) 110px 96px 120px minmax(150px,1fr) 90px;}
 html.ops .fd-car b{font-weight:650;}
 html.ops .fd-car small{margin-left:10px;font-size:12.5px;color:var(--op-mut);}
 html.ops .fd-tr .btn.small{width:100%;min-height:34px;padding:0 10px;font-size:12.5px;}
 html.ops .fd-tr .ops-badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;}
}
/* 900–1199 px: the customer goes under the car, the buttons get narrower */
@media(min-width:900px) and (max-width:1199px){
 html.ops body.ops-desk.picks{--dcols:74px minmax(150px,1.3fr) 120px 100px minmax(110px,1fr) 250px;--dareas:"t r b f s a" "t c b f s a" "t n n n n a";}
 html.ops body.ops-desk.picks #colHead.dhead span:nth-child(3){display:none;}
 html.ops body.ops-desk.picks #colHead.dhead span:nth-child(5){white-space:normal;line-height:1.2;}
 html.ops body.ops-desk{--dw:100%;--dg:16px;--dcols:68px minmax(160px,1.3fr) 96px 80px minmax(150px,1.7fr) 222px;--dareas:"t r f y s a" "t c f y s a" "t n n n n a";}
 html.ops body.ops-desk:not(.picks) #colHead.dhead span:nth-child(4){display:none;}
 html.ops body.ops-desk #colHead.dhead span:nth-child(2)::after{content:" · customer";}
 html.ops .drow .dc-r{padding-bottom:0;}
 html.ops .drow .dc-c{display:flex;gap:8px;padding-top:2px;}
 html.ops .drow .dc-c .l1,html.ops .drow .dc-c .sub{margin:0;font-size:12.5px;font-weight:500;color:var(--op-mut);}
 html.ops .drow .dc-c .l1{flex:none;max-width:55%;min-width:0;overflow:hidden;text-overflow:ellipsis;}
 html.ops .drow .dc-c .sub{flex:1 1 auto;min-width:0;}
 html.ops body.ops-desk #colHead.dhead span{padding:10px 8px;}
 html.ops .drow .dc-t b{font-size:17px;}
 html.ops .drow .acts{gap:4px;padding:8px;}
 html.ops .drow .acts button{font-size:10.5px;}
 html.ops body.ops-desk #boardHead .qwrap{flex-basis:260px;}
 html.ops .fd-a{grid-template-columns:60px minmax(150px,1.2fr) 90px minmax(160px,2fr) 110px 110px;}
 html.ops .fd-s{grid-template-columns:60px minmax(150px,1.3fr) 90px 84px 100px minmax(120px,1fr) 76px;}
 html.ops .fd-car small{display:block;margin:2px 0 0;}
 html.ops .fd-car small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}
/* ── Wide screen, the other pages (900 px and wider, Operations look only).
   The same width, header and spacing as the board; each page lays its own
   panels side by side. Below 900 px none of this applies. ── */
@media(min-width:900px){
 html.ops body.ops-desk:not(.on-board) .viewhead{max-width:var(--dw);padding:20px var(--dg) 2px;}
 html.ops body.ops-desk:not(.on-board) main{max-width:var(--dw);padding:8px var(--dg) 48px;}
 /* Dashboard: a 12-column grid, three panels to a row */
 html.ops body.ops-desk .od{max-width:none;padding-top:4px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:start;}
 html.ops body.ops-desk .od > *,html.ops body.ops-desk .od-row > *{margin:0;}
 html.ops body.ops-desk .od-row{display:contents;}
 html.ops body.ops-desk .od-head{grid-column:1/-1;order:1;justify-self:end;margin:0;}
 html.ops body.ops-desk .od-attn{grid-column:1/-1;order:2;}
 html.ops body.ops-desk .od-parked{grid-column:span 4;order:3;align-self:stretch;}
 html.ops body.ops-desk .od-work{grid-column:span 4;order:4;align-self:stretch;}
 html.ops body.ops-desk .od-queues{grid-column:span 4;order:5;align-self:stretch;}
 html.ops body.ops-desk .od-pay{grid-column:span 8;order:6;}
 html.ops body.ops-desk .od-checks{grid-column:span 4;order:7;}
 html.ops body.ops-desk .od > .od-row > .ops-fold:first-child{grid-column:span 4;order:8;}
 html.ops body.ops-desk .od > .od-row > .ops-fold:nth-child(2){grid-column:span 5;order:9;}
 html.ops body.ops-desk .od-yards{grid-column:span 3;order:10;}
 html.ops body.ops-desk .od:not(:has(.od-yards)) > .od-row > .ops-fold:nth-child(2){grid-column:span 8;}
 html.ops body.ops-desk .od-records{grid-column:1/-1;order:11;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;}
 html.ops body.ops-desk .od-records > .od-cardhead{grid-column:1/-1;}
 html.ops body.ops-desk .od-records .ops-record{border-right:1px solid var(--od-soft);}
 html.ops body.ops-desk .od-records .ops-record:nth-of-type(3n){border-right:0;}
 html.ops body.ops-desk .od-records .ops-record summary,html.ops body.ops-desk .od-records .ops-record:last-child summary{border-bottom:1px solid var(--od-soft);}
 html.ops body.ops-desk .od-records .ops-record[open]{grid-column:1/-1;border-right:0;}
 /* Settings: a list of the groups on the left, the boxes on the right */
 html.ops body.ops-desk main[data-view="settings"]{max-width:var(--dw);}
 html.ops .set-desk{display:grid;grid-template-columns:200px minmax(0,880px);gap:28px;align-items:start;}
 html.ops .set-nav{position:sticky;top:12px;display:flex;flex-direction:column;padding-top:4px;}
 html.ops .set-nav button{min-height:38px;padding:0 12px;border:0;border-left:3px solid transparent;background:none;color:var(--op-ink);font-size:14px;font-weight:600;text-align:left;cursor:pointer;}
 html.ops .set-nav button:hover{border-left-color:var(--op-field);background:#fff;}
 html.ops .set-nav button:focus-visible{outline:2px solid var(--op-ink);outline-offset:-2px;}
 html.ops .set-group{scroll-margin-top:16px;margin-bottom:22px;}
 html.ops .set-gh{margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--op-mut);}
 html.ops .set-group > .box{margin:0 0 14px !important;}
 html.ops main[data-view="settings"] .set-group .box input[type="number"],html.ops main[data-view="settings"] .set-group .box input[inputmode="numeric"]{max-width:160px;}
 html.ops main[data-view="settings"] .set-group .capyards{grid-template-columns:repeat(auto-fill,minmax(120px,140px)) !important;}
 html.ops main[data-view="settings"] .set-group .box.fchecks{grid-template-columns:repeat(3,minmax(0,1fr));}
 html.ops main[data-view="settings"] .set-group .box input[type="tel"]{max-width:320px;}
 /* Booking details: the booking on the left, status and money on the right, Save in a bar under both */
 html.ops body.ops-desk #panel.ops-car #panelBody{max-width:var(--dw);padding:20px var(--dg) 0;}
 html.ops body.ops-desk #panel.ops-car .ops-x{top:20px;right:var(--dg);}
 html.ops .ops-2col{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start;}
 html.ops .ops-2col > .ops-sheet{min-width:0;}
 html.ops .ops-carside{grid-template-columns:minmax(0,1fr);}
 html.ops .ops-carside:empty{display:none;}
 html.ops .ops-carside > .ops-psec:first-child{margin-top:0;border-top:0;}
 html.ops body.ops-desk #panel.ops-car .ops-sheet .det{grid-template-columns:repeat(3,minmax(0,1fr));}
 html.ops body.ops-desk #panel.ops-car .ops-foot2{grid-template-columns:1fr auto auto;align-items:center;margin:auto calc(-1 * var(--dg)) 0;padding:12px var(--dg);}
 html.ops body.ops-desk #panel.ops-car .ops-foot2 small{grid-column:auto;}
 html.ops body.ops-desk #panel.ops-car .ops-foot2 button{min-width:160px;}
 html.ops body.ops-desk #panel.ops-car .ops-foot2 button:only-of-type{grid-column:auto;}
 html.ops body.ops-desk #panel.ops-car .ops-foot2:not(:has(small))::before{content:"";}
 /* Booking import: the full width */
 html.ops body.ops-desk .bi{max-width:none;}
 /* Shift summary: the numbers on the left, the activity beside them */
 html.ops .ops-scopewrap .ops-scope{margin:0 0 14px;}
 html.ops .sum-desk{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:start;}
 html.ops .sum-desk > div{min-width:0;}
 html.ops .sum-l > :first-child{margin-top:0;}
 html.ops .sum-r > .section-label:first-child{margin-top:0;}
 /* Hourly stats: the hours with bars on the left, the other panels on the right */
 html.ops .st-desk{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:16px;align-items:start;margin-top:14px;}
 html.ops .st-desk > div{min-width:0;}
 html.ops .st-desk .ops-card{margin-top:0;}
 html.ops .st-side{display:flex;flex-direction:column;gap:14px;}
 html.ops .st-bars{display:flex;align-items:stretch;gap:6px;height:150px;padding:14px 16px 8px;border-bottom:1px solid #edf0f4;}
 html.ops .st-bar{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;}
 html.ops .st-col{position:relative;flex:1;width:100%;max-width:44px;}
 html.ops .st-col i{position:absolute;left:0;right:0;bottom:0;border-radius:2px 2px 0 0;}
 html.ops .st-all{background:#cbd5e1;}
 html.ops .st-done{background:var(--op-ink);}
 html.ops .st-n{min-height:14px;font-size:11px;color:var(--op-mut);}
 html.ops .st-bar small{font-size:11px;color:var(--op-mut);}
 /* Tables made from rows: archive results */
 html.ops .ops-tbl{padding:0 !important;overflow:hidden;}
 html.ops .ot-tr{display:grid;align-items:center;gap:0 12px;min-height:48px;padding:6px 16px;border-top:1px solid #edf0f4;font-size:14px;color:var(--op-ink);}
 html.ops .ot-tr:first-child{border-top:0;}
 html.ops .ot-tr > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 html.ops .ot-th{min-height:36px;background:#f8fafc;font-size:11px;font-weight:650;letter-spacing:.6px;text-transform:uppercase;color:#48596c;}
 html.ops .arch-tbl .ot-tr{grid-template-columns:minmax(110px,.9fr) minmax(140px,1.2fr) minmax(150px,1.2fr) 80px minmax(180px,1.2fr) 130px 110px;}
 html.ops .arch-tbl .ot-tr > span:last-child{text-align:right;}
 html.ops body.ops-desk main[data-view="archive"] #archSearch{max-width:none !important;}
 html.ops body.ops-desk main[data-view="archive"] #archSearch .toolbar{max-width:640px;}
 /* Staff & access: one table */
 html.ops body.ops-desk .ops-person{display:grid;grid-template-columns:32px minmax(160px,1.3fr) minmax(130px,1fr) minmax(130px,1fr) 110px 150px;align-items:center;gap:0 16px;padding:12px 16px;}
 html.ops body.ops-desk .ops-person .grow,html.ops body.ops-desk .ops-person .ops-side{display:contents;}
 html.ops body.ops-desk .ops-person .grow strong{grid-column:2;grid-row:1;}
 html.ops body.ops-desk .ops-person .grow span{grid-column:3;grid-row:1;margin:0;font-size:14px;}
 html.ops body.ops-desk .ops-person .grow small{grid-column:4;grid-row:1;margin:0;font-size:13px;}
 html.ops body.ops-desk .ops-person .ops-side em{grid-column:5;grid-row:1;justify-self:start;}
 html.ops body.ops-desk .ops-person .ops-dd{grid-column:6;grid-row:1;justify-self:end;}
 html.ops body.ops-desk .ops-person.off > *{opacity:.6;}
 html.ops body.ops-desk .ops-person.off .ops-dd{opacity:1;}
 html.ops body.ops-desk .ops-person.ops-th{min-height:36px;padding:8px 16px;background:#f8fafc;}
 html.ops body.ops-desk .ops-person.ops-th > i{visibility:hidden;height:0;}
 html.ops body.ops-desk .ops-person.ops-th *{font-size:11px !important;font-weight:650 !important;letter-spacing:.6px;text-transform:uppercase;color:#48596c !important;}
 html.ops body.ops-desk .ops-person.ops-th em{padding:0;border:0;background:none;}
 html.ops body.ops-desk .ops-person.ops-th b{grid-column:6;grid-row:1;justify-self:end;}
 html.ops body.ops-desk .ops-person.ops-th + .ops-person{border-top:1px solid #edf0f4;}
 /* Me: three columns */
 html.ops .me-desk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;margin-top:12px;}
 html.ops .me-col{min-width:0;display:flex;flex-direction:column;gap:14px;}
 html.ops .me-col > .box,html.ops .me-col > form,html.ops .me-col > .ops-card{max-width:none !important;width:auto;margin:0 !important;}
 html.ops .me-col .row-actions{margin:0;}
 html.ops .me-tuts{display:flex;flex-direction:column;}
 html.ops .me-tuts button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 16px;border:0;border-top:1px solid #edf0f4;background:none;color:var(--op-ink);font-size:14px;text-align:left;cursor:pointer;}
 html.ops .me-tuts button:first-child{border-top:0;}
 html.ops .me-tuts button:hover{background:#f8fafc;}
 html.ops .me-tuts small{display:block;margin-top:2px;font-size:12px;color:var(--op-mut);}
 html.ops .me-tuts b{font-size:13px;font-weight:650;color:#1f4f86;}
 /* Menu: the sections side by side */
 html.ops body.ops-desk #menuBody{max-width:var(--dw);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;padding:2px var(--dg) 0;}
 html.ops body.ops-desk dialog#menu{padding:20px 0 28px;}
 html.ops body.ops-desk #menuBody > h2,html.ops body.ops-desk #menuBody > .sub,html.ops body.ops-desk #menuBody > .pbtns,html.ops body.ops-desk #menuBody > :not(.mgrp):not(.menu-danger){grid-column:1/-1;}
 html.ops body.ops-desk #menuBody > .sub{margin-bottom:0;}
 html.ops body.ops-desk #menuBody .mgrp > label:first-child{margin-top:0;}
 html.ops body.ops-desk #menuBody .mgrp .swtoggle{margin-top:0;border:1px solid var(--op-line);border-top:0;border-radius:0 0 6px 6px;background:#fff;}
 html.ops body.ops-desk #menuBody .mgrp > .pseg + label{margin-top:0;border-radius:0;border-top:0;}
 html.ops body.ops-desk #menuBody > .menu-danger{grid-column:auto;margin:0;}
 html.ops body.ops-desk #menuBody > .pbtns{display:none;}
 /* Removed cars (a dialog): wider rows */
 html.ops body.ops-desk #panel:not(.ops-car){max-width:640px;}
 /* the handover note, styled like the rest of the panel */
 html.ops body.ops-desk .od-handover{padding:12px 16px 14px;border-top:1px solid var(--od-soft);}
 html.ops body.ops-desk .od-handover label{display:block;margin-bottom:6px;font-size:12px;font-weight:600;color:var(--od-mut);}
 html.ops body.ops-desk .od-handover textarea{display:block;width:100%;min-height:76px;padding:8px 10px;border:1px solid var(--op-field);border-radius:6px;font:14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--op-ink);resize:vertical;}
 html.ops body.ops-desk .od-handover textarea:focus{outline:0;border-color:var(--op-ink);box-shadow:0 0 0 1px var(--op-ink);}
 html.ops body.ops-desk .od-hrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;}
 html.ops body.ops-desk .od-hrow small{font-size:12px;color:var(--od-mut);}
 html.ops body.ops-desk .od-save{min-height:34px;padding:0 14px;border:0;border-radius:6px;background:var(--op-ink);color:#fff;font:600 12.5px system-ui,sans-serif;cursor:pointer;}
}
@media(min-width:900px) and (max-width:1199px){
 html.ops body.ops-desk .od{grid-auto-flow:row dense;}
 html.ops body.ops-desk .od-parked,html.ops body.ops-desk .od-work{grid-column:span 6;}
 html.ops body.ops-desk .od-queues,html.ops body.ops-desk .od-checks{grid-column:span 6;}
 html.ops body.ops-desk .od-pay{grid-column:1/-1;}
 html.ops body.ops-desk .od > .od-row > .ops-fold:first-child,html.ops body.ops-desk .od > .od-row > .ops-fold:nth-child(2){grid-column:span 6;}
 html.ops body.ops-desk .od-yards{grid-column:1/-1;}
 html.ops body.ops-desk .od-records{grid-template-columns:repeat(2,minmax(0,1fr));}
 html.ops body.ops-desk .od-records .ops-record:nth-of-type(3n){border-right:1px solid var(--od-soft);}
 html.ops body.ops-desk .od-records .ops-record:nth-of-type(2n){border-right:0;}
}