/* LADMA Crew Hub: look 2 (light). GENERATED by tools/build_v2.py. Edit tools/v2/*.css, not this file. */

/* --- 00-tokens.css --- */
/* TOKENS. One accent (LADMA orange). Status colors are always paired with a word or an icon. */
:root{
  color-scheme:light;
  /* surfaces */
  --bg:#F4F3EF; --bg-1:#ECEAE4; --card:#FFFFFF; --card-2:#F4F3EF; --card-3:#E9E7E0;
  --hair:rgba(28,24,14,.08); --hair-2:rgba(28,24,14,.13); --hair-3:rgba(28,24,14,.26);
  /* text */
  --text:#16150F; --text-2:#55524A; --text-3:#6B675F;
  --paper:#FFFFFF; --paper-2:#F4F3EF; --paper-ink:#16150F;
  /* accent: --orange is the fill, --orange-t is the same hue made dark enough to read as text on white */
  --orange:#FF7A1A; --orange-2:#F06A0A; --orange-t:#A84300; --orange-ink:#1C0D02; --orange-soft:#FFF1E6; --orange-line:rgba(255,122,26,.55);
  --green:#1E9E5A; --green-t:#14713F; --green-soft:#E6F5EC; --green-line:rgba(30,158,90,.45);
  --red:#D9382C; --red-t:#C0271D; --red-soft:#FCEBE9; --red-line:rgba(217,56,44,.45);
  --amber:#E0A008; --amber-t:#7A5200; --amber-soft:#FBF1D6;
  --blue-t:#1F5FBF; --blue-soft:#E8F0FB;
  /* shape: 8px grid */
  --r-s:12px; --r:16px; --r-l:20px; --r-xl:28px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --page:20px;                 /* page side margin */
  --tap:56px;                  /* primary control height (gloves) */
  --row:60px;                  /* list row min height */
  /* type */
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-large:800 34px/1.12 var(--font); --t-title:700 24px/1.2 var(--font); --t-head:600 18px/1.3 var(--font);
  --t-body:400 17px/1.45 var(--font); --t-sub:400 15px/1.4 var(--font); --t-cap:500 13px/1.35 var(--font);
  /* elevation: only floating things get a shadow */
  --e-0:none; --e-float:0 1px 2px rgba(40,32,18,.06),0 8px 28px -8px rgba(40,32,18,.18); --e-sheet:0 -8px 40px -12px rgba(40,32,18,.25);
}
:root{ --paper:#16150F; --paper-2:#2A2822; --paper-ink:#FFFFFF; --plate:#F1EFEA; --btn2:#E9E7E0; }
:root{ --field:#FFFFFF; --text-dis:#A19D94; --chev:#8C877D; }

/* --- generated from app.css: dark values swapped for light ones --- */
body{font-size:17px}
@media (min-width:700px){body{background:radial-gradient(900px 500px at 70% 10%,rgba(255,122,26,.07),transparent 60%),#E6E4DE}}
@media (min-width:700px){#device{box-shadow:0 0 0 1px var(--hair),0 30px 90px -30px rgba(40,32,18,.22)}}
#exitPreview{font-size:14px}
.appbar{background:linear-gradient(var(--bg) 70%,rgba(244,243,239,0))}
.appbar.glass{background:rgba(244,243,239,.72)}
.appbar .ttl{font-size:17px}
.appbar .ttl small{font-size:13px}
.wordmark{font-size:15px}
.wordmark small{font-size:13px}
.eyebrow{font-size:13px}
.eyebrow.o{color:var(--orange-t)}
.lede{font-size:17px}
.btn.primary{box-shadow:0 10px 24px -12px rgba(255,122,26,.8),inset 0 1px 0 rgba(28,24,14,.25)}
.btn.text{font-size:16px}
.cta{background:linear-gradient(rgba(244,243,239,0),var(--bg) 30%)}
.cta .hint{font-size:14px}
.pill{font-size:14px}
.pill.o{color:var(--orange-t)}
.status{font-size:13px}
.status.s-plan{color:var(--amber-t)}
.status.active{color:var(--green-t)}
.tcp{font-size:14.5px}
.tcp .ico{color:var(--orange-t)}
.field label{font-size:14px}
.errmsg{color:var(--red-t);font-size:15px}
.login .auth{font-size:14px}
.login .ver{font-size:13px}
.whocard b{font-size:16.5px}
.whocard span{font-size:14.5px}
.startbtn{box-shadow:0 20px 40px -22px rgba(255,122,26,.9),inset 0 1px 0 rgba(28,24,14,.3)}
.startbtn .plus{color:var(--orange-t)}
.startbtn > span > span{font-size:15px}
.jobcard .meta{font-size:15px}
.jobcard .acts .btn{font-size:16px}
.empty p{font-size:15px}
.tool b{font-size:16.5px}
.tool b + span{font-size:13px}
.wz-head .step{font-size:13px;color:var(--orange-t)}
.opt .d{font-size:14.5px}
.recent .ico{color:var(--orange-t)}
.subhead{font-size:14px}
.spd small{font-size:13px}
.seg button{font-size:16px}
.seg button[aria-pressed="true"]{box-shadow:0 1px 0 rgba(28,24,14,.06) inset}
.opcard .d{font-size:15px}
.opcard .why{font-size:14px}
.lanepick .dirhint{font-size:13px}
.flaglegend{font-size:13px}
.lp-seg .arr{color:rgba(28,24,14,.55)}
.lp-seg.tap .tapcue{border:2px solid rgba(28,24,14,.35)}
.lp-labels > *{font-size:13px}
.lp-labels .on{color:var(--orange-t)}
.lp-choices .opt .t{font-size:16px}
.dn .lab span{font-size:14.5px}
.nightnote{font-size:15px}
.nightnote b{font-size:15.5px}
.building li{font-size:16px}
.metric .k{font-size:13px}
.metric .v small{font-size:14px}
.adjust{font-size:14.5px}
.approach{font-size:13px}
.approach .arrowdown{color:var(--orange-t)}
.tsign .plate{background:var(--plate)}
.tsign .nm{font-size:17.5px}
.tsign .cd{font-size:14px}
.tsign .nt{font-size:14px}
.dist{color:var(--orange-t)}
.dist small{font-size:13px}
.trow.marker .body{font-size:13px;color:var(--orange-t)}
.tdev b{font-size:16.5px}
.tdev p{font-size:14.5px}
.lane .lampbar i{background:var(--amber-t)}
.knowcta .thumbs span{background:var(--plate)}
.knowcta b{font-size:15.5px;color:var(--orange-t);font-size:13px}
.knowcta span.t{font-size:14.5px}
.endcap{font-size:13px}
.note{font-size:15px}
.disclosure .inner{font-size:15px}
.disclosure .inner b{font-size:15.5px}
.kcard .top{font-size:13px}
.kcard.good .top{color:var(--green-t)}
.kcard.bad .top{color:var(--red-t)}
.kcard .plate{background:var(--plate)}
.kcard .info .cd{font-size:14.5px}
.kcard .info p{font-size:15.5px}
.lo .q.word{font-size:16px}
.lo .q.tcp{font-size:13px;color:var(--amber-t)}
.lo .q.qopt{font-size:13px}
.lo .n{font-size:17px}
.lo .x{font-size:14px}
.progressline span{font-size:14px}
.ring .num .ico{color:var(--green-t)}
.verhead span{font-size:15px}
.verhead.ready b{color:var(--green-t)}
.ckgroup h4{font-size:13px}
.ck{font-size:17px}
.ready-banner span{font-size:15px}
.rv{font-size:16px}
.photo.add div{font-size:13px}
.done-screen .time{font-size:16px}
.done-screen .sum span{font-size:15.5px}
.filter button{font-size:15px}
.daygroup h4{font-size:13px}
.hrow .tm{font-size:14px}
.hrow b{font-size:17px}
.hrow .sub{font-size:14.5px}
.hrow .sub2{font-size:13px}
.catrow button{font-size:15px}
.scard .plate{background:var(--plate)}
.scard .cd{font-size:13px}
.scard b{font-size:15.5px}
.sdetail .plate{background:var(--plate)}
.sdetail .meta .cd{color:var(--orange-t);font-size:16px}
.sdetail .use b{font-size:13px}
.sdetail .use p{font-size:17px}
.crow .plate{background:var(--plate)}
.crow b{font-size:16.5px}
.crow span{font-size:14px}
.crow .cmp{font-size:14px;color:var(--orange-t)}
.compare .col .plate{background:var(--plate)}
.compare .col .i .cd{font-size:13px;color:var(--orange-t)}
.compare .col .i b{font-size:16px}
.compare .col .i p{font-size:14px}
.diffnote{font-size:15.5px}
.eqi b{font-size:17px}
.eqi .s{font-size:13px;color:var(--orange-t)}
.eqi p{font-size:15px}
.gstep .n{font-size:14px}
.gstep span{font-size:16px}
.stepper .lbl span{font-size:14px}
.sheetview .vt{font-size:14px;color:var(--orange-t)}
.sheethint{font-size:13px}
.sheetcard b{font-size:17px}
.sheetcard .d{font-size:14px}
.sheetcard .d.warn{color:var(--orange-t)}
.ochip .oplate{background:var(--plate)}
.ochip .onum{font-size:13px}
.ochip .ocode{font-size:13px}
.tsign .plate .ord{font-size:15px}
.tsign .ordtx{font-size:13px;color:var(--orange-t)}
.trow .lane .ordpin{font-size:13px}
.toast{font-size:15.5px}
.langsw button{font-size:13px}
.figcard .figid{font-size:13px;color:var(--orange-t)}
.status.s-both{color:var(--orange-t)}
.rulescard summary > .ico:first-child{color:var(--orange-t)}
ul.rules li{font-size:15px}
.rk{font-size:13px}
.rk-should{color:var(--amber-t)}
.infobtn{color:var(--orange-t)}
.infosheet{background:rgba(244,243,239,.72)}
.infosheet p{font-size:16.5px}
.siteq p{font-size:16px}
.unvbanner b{font-size:15px;color:var(--amber-t)}
.unvbanner p{font-size:15px}
.unvbanner ul{font-size:15px}
.pendline{font-size:13px}
.unvtag{font-size:13px}
.rpday{font-size:13px}
.rptop{font-size:15.5px}
.rptop .faint{font-size:13px}
.rpwhat{font-size:15px}
.rpdet{font-size:13px}
.rpwhy{font-size:13px;color:var(--red-t)}
.rploc{font-size:14px}
.rploc a,.rploc .rpnoloc{color:var(--orange-t)}
.rploc .rpnoloc{color:var(--amber-t)}
.rpb{font-size:13px}
.stbtns .btn{font-size:14.5px}
.a2txt b{font-size:16px}
.a2txt span{font-size:14px}
.a2steps{font-size:16px}
.sharedbox b{font-size:15.5px}
.sharedbox small{font-size:13px}
.infomsg{font-size:14.5px;color:var(--amber-t)}
.waittxt{font-size:14px}
.hubload{font-size:15px}
.hubwarn{color:var(--amber-t);font-size:14.5px}
.hubwarn.err{color:var(--red-t)}
.infomsg.ok{color:var(--green-t)}
.hupd > .ico:first-child{color:var(--orange-t)}
.hupd b{font-size:15.5px}
.hupd span span{font-size:13px}
.htile b{font-size:17px}
.htile > span:last-child{font-size:13px}
.htbadge{font-size:14px}
.hti{color:var(--orange-t)}
.hadmin .hti{color:var(--blue-t)}
.hadmin b{font-size:17px}
.hadmin span span{font-size:14px}
.seg3 button{font-size:16px}
.seg3 .dot{font-size:13px}
.seg.seg3in button{font-size:14.5px}
.hjdate{font-size:14.5px}
.hjaddr{font-size:15.5px}
.hjmeta{font-size:14px}
.hchip{font-size:13px}
.hchip.ok{color:var(--green-t)}
.hchip.go{color:var(--blue-t)}
.hban b{font-size:17px}
.hban p{font-size:15px}
.chglist{font-size:15px}
.jwhen{font-size:16px}
.jaddrt .ico{color:var(--orange-t)}
.jaddrt b{font-size:17px}
.jaddr .btn{font-size:16px}
.tellink{color:var(--orange-t)}
.okc{color:var(--green-t)}
.hcard p{font-size:16px}
.hcmeta{font-size:13px}
.hcmeta .o,.o{color:var(--orange-t)}
.g{color:var(--green-t)}
.eqck li{font-size:16px}
.eqck .ico{color:var(--green-t)}
.tkq{font-size:16px}
.lead .lsec > b{font-size:16.5px}
.lead .lsec p{font-size:14px}
.lead .btn{font-size:16px}
.ciinfo{font-size:14.5px}
.ciinfo a{color:var(--orange-t)}
.attn b{font-size:16px}
.attn span{font-size:13px}
.attbtns button{font-size:13px}
.tl{font-size:15px}
.tlt{font-size:13px}
.fgb b{font-size:17px}
.fgb span{font-size:14px}
.fgb .faint{font-size:13px}
.fgimg span{font-size:13px}
.tkfeat > span:not(.eyebrow):not(.hchip){font-size:15px}
.hf{font-size:14px}
.hf input,.hf select,.hf textarea,.hta,.asel{font-size:17px}
.hf small{font-size:13px}
.chk{font-size:16px}
.chk.big b{font-size:16px}
.chk.big small{font-size:13px}
.chk .warn{font-size:13px;color:var(--amber-t)}
.chk span b.o{font-size:13px}
.hcontact b{font-size:16.5px}
.hcontact .faint{font-size:14px}
.hcbtns .btn{font-size:15px}
.faq summary{font-size:16px}
.faq[open] summary{color:var(--orange-t)}
.faq p{font-size:15.5px}
.rqst{font-size:13px;color:var(--orange-t)}
.rqst.in_progress{color:var(--blue-t)}
.rqst.resolved{color:var(--green-t)}
.rqreply{font-size:14px}
.rqreply p{font-size:15px}
.ofnav{background:rgba(244,243,239,.9)}
.ofn{font-size:15px}
.ofbadge{font-size:13px}
.btn.sm{font-size:15px}
.btn.red{color:var(--red-t)}
.ah2{font-size:17px}
.astat span{font-size:14px}
.astat small{font-size:13px}
.astat.warn b{color:var(--amber-t)}
.aalert{font-size:15px}
.aalert a{color:var(--orange-t)}
.achip{font-size:14.5px}
.apill{font-size:13px}
.apill.pub{color:var(--blue-t)}
.apill.done{color:var(--green-t)}
.apill.go{color:var(--orange-t)}
.asearch input{font-size:16px}
.ameta{font-size:14px}
.atr{font-size:15px}
.atr > div[data-l]:not([data-l=""])::before{font-size:13px}
.atr .faint{font-size:13px}
.areq b{font-size:15.5px}
.areq .aq{font-size:15px}
.acard h3{font-size:16px}
.ofl{font-size:15px}
.ofl dd a{color:var(--orange-t)}
.aform legend{font-size:15px}
@media (min-width:1000px){body.wide .ath{font-size:13px}}
.lg::before{background-image:linear-gradient(rgba(28,24,14,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(28,24,14,.035) 1px,transparent 1px)}
.lg-brand .wordmark{font-size:17px}
.lg-eyebrow{color:var(--orange-t);font-size:13px}
.lg-h1 span{background:linear-gradient(92deg,var(--amber-t),#FF7A1A 55%,#FF5B2E)}
.lg-lede{font-size:17px}
.lg-card{background:linear-gradient(180deg,rgba(244,243,239,.78),rgba(20,21,24,.86));border:1px solid rgba(28,24,14,.09);box-shadow:0 30px 80px -30px rgba(40,32,18,.22),inset 0 1px 0 rgba(28,24,14,.06)}
.lg-card::before{background:linear-gradient(160deg,rgba(255,154,69,.55),transparent 35%,transparent 70%,rgba(28,24,14,.12))}
.lg-cardhead p{font-size:15.5px}
.lg-field > span{font-size:13px}
.lg .input{background:rgba(244,243,239,.55);border-color:rgba(28,24,14,.1)}
.lg .input:focus-within{background:rgba(244,243,239,.8)}
.lg .sharedbox{background:rgba(28,24,14,.03);border:1px solid rgba(28,24,14,.06)}
.lg-go{box-shadow:0 18px 40px -16px rgba(255,122,26,.95),inset 0 1px 0 rgba(28,24,14,.35)}
.lg .auth{font-size:13px}
.lg .auth .ico{color:var(--green-t)}
.lg .a2hs{background:rgba(28,24,14,.03)}
.lg-help{font-size:14px}
.lg .ver{font-size:13px}
@media (min-width:700px){.lg-bg{-webkit-mask-image:linear-gradient(#000,rgba(40,32,18,.10));mask-image:linear-gradient(#000,rgba(40,32,18,.10))}}
@media (min-width:1100px){.lg-feats li{background:rgba(244,243,239,.6);border:1px solid rgba(28,24,14,.07);font-size:15px}}
@media (min-width:1100px){.lg-feats .ico{color:var(--orange-t)}}
@media (min-width:1100px){.lg-foot{font-size:13px}}
@media (min-width:1100px){.lg-panel{background:linear-gradient(180deg,#0f1012,var(--bg))}}
@media (min-width:1100px){.lg-cardhead p{font-size:16.5px}}
@media (max-width:699px){.lg-lede{font-size:16px}}
.hdate{font-size:13px}
@media (min-width:1100px){#tabbar .tab[aria-current="page"] .ico{color:var(--orange-t)}}
@media (min-width:1100px){#tabbar .tab.new{box-shadow:0 14px 30px -14px rgba(255,122,26,.9),inset 0 1px 0 rgba(28,24,14,.3)}}
@media (min-width:1100px){.tb-brand .wordmark{font-size:15px}}
@media (min-width:1100px){.tb-sect{font-size:13px}}
@media (min-width:1100px){#tabbar .tb-admin{color:var(--blue-t)}}
@media (min-width:1100px){#tabbar .tb-admin .ico{color:var(--blue-t)}}
@media (min-width:1100px){.tb-acct .tbl b{font-size:15px}}
@media (min-width:1100px){.tb-acct .tbl small{font-size:13px}}
@media (min-width:1100px){body.navon .appbar{background:linear-gradient(var(--bg) 75%,rgba(244,243,239,0))}}
@media (min-width:1100px){body.navon .appbar.glass{background:rgba(244,243,239,.8)}}
@media (min-width:1100px){.htile:hover{box-shadow:0 22px 40px -26px rgba(40,32,18,.22)}}
@media (min-width:1100px){.htile > span:last-child{font-size:14.5px}}
@media (min-width:1100px){.hsumg span{font-size:13px}}
@media (min-width:1100px){.hsumg .warn b{color:var(--orange-t)}}
@media (min-width:1100px){.hqa .opt .t{font-size:15.5px}}
@media (min-width:1100px){.hupl b{font-size:15px}}
@media (min-width:1100px){.hupl span{font-size:13px}}
.hcele p{font-size:15.5px}
.vcard .vtxt span{font-size:14.5px}
.wherepic .dirhint{font-size:13px}
.whereleg{font-size:13px}
.flsum span{font-size:13px}
.mirrornote{font-size:13px;color:var(--amber-t)}
.jfload{font-size:15px}
.jfhelp{font-size:13px}
@media (min-width:1100px){body.navon .screen[data-screen=jform] > .jfbox{box-shadow:0 10px 40px rgba(40,32,18,.10)}}
.hhours > span:nth-child(2) b{font-size:16px}
.hhours > span:nth-child(2) span{font-size:14px}
.hhbig small{font-size:14px}
.hrst{font-size:13px;color:var(--amber-t)}
.hrst.ok{color:var(--green-t)}
.hrtot span{font-size:13px}
.hrtot .ot b{color:var(--orange-t)}
.hrtot .nt b{color:var(--blue,var(--blue-t))}
.hrsplit{font-size:13px}
.hrdh{font-size:14px}
.hrl b{font-size:16px}
.hrl span{font-size:14px}
.hradj{color:var(--amber-t)!important}
.hrh small{font-size:13px}
.hrh .okc{color:var(--green-t)}
.hrwk{font-size:15px}
.hrsetup summary::after{font-size:14px}
.hrsbody{font-size:15px}
.hrhook code{font-size:13px}
.okt{color:var(--green-t)}
.warnt{color:var(--amber-t)}
.updbar{font-size:15px}
.dsseg button small{font-size:13px}
.dssum b{font-size:17px}
.dssum span{font-size:14.5px}
.dslangb button span{font-size:14px}
.dsta{font-size:15px}
.dswa code{font-size:13px}
.r{color:var(--red-t)}
.ofcrumb{font-size:15px}
.crsteps li{font-size:13px}
.hrtrav{font-size:14px}
.hrdaybtn small{font-size:13px;color:var(--orange-t)}
.pwgrid{font-size:14px}
.pwgrid b{font-size:13px}
.selfring{border:2px dashed rgba(28,24,14,.35)}
.empph{font-size:13px}
.astat.press:hover,.astat.press:focus-visible{border-color:var(--hair-3,rgba(28,24,14,.2))}
.dsech .faint{font-size:14px}
.dnums > div span{font-size:13px}
.dnote{font-size:13px}
.apill.est{color:var(--orange-t)}
.dbig span{font-size:14px}
.pl{font-size:14.5px}
.hcplot{border-bottom:1px solid var(--hair-2,rgba(28,24,14,.12))}
.hcc:hover,.hcc:focus-visible{background:rgba(28,24,14,.035)}
.hcx span{font-size:13px}
.hcx small{font-size:13px}
.hcx span.now small{color:var(--orange-t)}
.seglg{font-size:14px}
.osmeter span{font-size:14.5px}
.osl:hover{border-color:var(--hair-3,rgba(28,24,14,.2))}
.osl > span b{font-size:15px}
.osl small{font-size:13px}
.osday b{font-size:16px}
.oslinks{font-size:13px}
.oslinks a{color:var(--orange-t)}
.ctip{color:var(--bg);font-size:13px}
.dnote a.lnk,.dnote a{color:var(--orange-t)}
.otn b{font-size:15px}
.otn small{font-size:13px}
.pft{font-size:14.5px}
.pfh{font-size:13px}
.pfr:hover,.pfr:focus-visible{background:rgba(28,24,14,.03)}
b.r,em.r{color:var(--red-t)}
.dhello{font-size:16px}
.dhello .live{font-size:13px}
.kpi{background:linear-gradient(180deg,rgba(28,24,14,.035),rgba(28,24,14,0) 60%),var(--card)}
.kpii{color:var(--orange-t)}
.kpi.warn .kpii{color:var(--amber-t)}
.kpi > span{font-size:14px}
.kpi > small{font-size:13px}
.kpi.warn > small{color:var(--amber-t)}
.donut .rc small{font-size:13px}
.dleg > div{font-size:14.5px}
.dleg em{font-size:13px}
.osmeter > div span{font-size:14.5px}
.osmeter small{font-size:13px}
.pflg{font-size:13px}
.pfrow:hover,.pfrow:focus-visible{background:rgba(28,24,14,.035)}
.pfl b{font-size:15px}
.pfl small{font-size:13px}
.pfv small{font-size:13px}
.dgrid .acard,.dsec .acard{background:linear-gradient(180deg,rgba(28,24,14,.025),rgba(28,24,14,0) 40%),var(--card)}
.plrow.plhead span{font-size:13px}
.blrow b{font-size:15px}
.blqty{font-size:13px}
.billfs a{color:var(--orange-t)}
@media (max-width:999px){.atr[data-compact] > div[data-l]::before{font-size:13px}}
.ofmain a:not(.btn):not([class*=btn]){color:var(--orange-t)}
.miss > span:first-child{color:var(--red-t)}
.missmsg{color:var(--red-t);font-size:13px}
@media (min-width:1000px) and (max-width:1399px){body.wide .atr[data-compact] > div[data-l]:not([data-l=""]):not(:nth-child(2))::before{font-size:13px}}
.ofbar button{font-size:13px}
.ofbar button.on{color:var(--orange-t)}
.ofbar .ofbadge{font-size:13px}
.ofmgh{font-size:13px}
.ofmi{font-size:16.5px}
.ofmi.on{color:var(--orange-t)}
.ofmi small{font-size:13px}
@media (max-width:999px){.atr[data-hrs] .hrtrav small{font-size:13px}}
@media (max-width:999px){.atr[data-hrs] > div:nth-child(n+3):nth-child(-n+9)::before{font-size:13px}}
@media (max-width:999px){.atr[data-hrs] > div:nth-child(n+10)::before{font-size:13px}}
.hrdtr{font-size:14.5px}
.hrdtr select{font-size:17px}
.swapbtns .btn.text{font-size:14px}
.swapc > small{font-size:13px}
.swaphint{font-size:13px;color:var(--orange-t)}
.cmbtn .cmwhy{font-size:13px}
.cmline .ico{color:var(--green-t)}
.lg-call > .ico:first-child{color:var(--orange-t)}
.lg-call b{font-size:15.5px}
.lg-call small{font-size:14px}
.lg .errmsg{font-size:15px}
@media (max-width:1099px){#tabbar{background:rgba(244,243,239,.94)}}
@media (max-width:1099px){.tab[aria-current="page"] .ico{color:var(--orange-t)}}
@media (max-width:699px){.lg-brand .wordmark{font-size:15px}}
@media (max-width:699px){.lg-cardhead p{font-size:16px}}
@media (max-width:699px){.lg-field > span{font-size:15px}}
@media (max-width:699px){.lg .sharedbox b{font-size:17px}}
@media (max-width:639px){.htile b{font-size:17px}}
@media (max-width:639px){.htile > span:not(.hti):not(.htbadge){font-size:14px}}
.btn.sm{font-size:15.5px}
.asearch input{font-size:17px}
.hf{font-size:15px}
.wz-head .step{font-size:13px;color:var(--orange-t)}
.catrow button{font-size:15.5px}
@media (max-width:999px){.ofbar{background:rgba(244,243,239,.94)}}
@media (max-width:999px){.ofbar button{font-size:13px}}
@media (max-width:999px){.ofbar button.on svg{color:var(--orange-t)}}
@media (max-width:639px){.oftop .ofact > .btn.sm.primary{font-size:17px}}
.inp{font-size:17px}
.lg .ver{font-size:13px}
.apill,.ofbar .ofbadge,.unvtag,.ochip .ocode,.rk,.wordmark small{font-size:13px}
@media (max-width:359px){.hrtot span{font-size:13px}}
@media (max-width:359px){.homebar .wordmark small{font-size:13px}}
.atg{font-size:16px}
.atg.now b{color:var(--orange-t)}
.atg-sub{font-size:14px}
.atg-n{font-size:13px}
.atg-empty{font-size:14px}

/* --- 10-components.css --- */
/* ============================================================================
   COMPONENTS. Every screen is built from these; area files only place them.
   ============================================================================ */
html,body{background:var(--bg)}
body{font:var(--t-body);letter-spacing:-.01em;color:var(--text)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.ico{stroke-width:1.9}

/* ---- page frame ---- */
@media (min-width:700px){ body{background:#E6E4DE} #device{box-shadow:0 0 0 1px var(--hair)} }
.screen{background:var(--bg)}

/* ---- typography ---- */
.h2{font:var(--t-large);letter-spacing:-.025em}
.lede{font:var(--t-body);color:var(--text-2);margin-top:8px}
.subhead{font:600 13px/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin:32px 0 8px;padding:0 calc(var(--page) + 4px)}

/* ---- navigation bar: back, small title, one action ---- */
.appbar{background:var(--bg);min-height:60px;padding:calc(8px + var(--sat)) 16px 8px;gap:8px}
.appbar.glass{background:rgba(244,243,239,.92);border-bottom:1px solid var(--hair);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.appbar .ttl{font:600 17px/1.2 var(--font);letter-spacing:-.01em}
.appbar .ttl small{font:500 13px/1.3 var(--font);color:var(--text-3)}
.iconbtn{width:48px;height:48px;background:var(--card);border:0;box-shadow:0 0 0 1px var(--hair)}
.iconbtn:active{background:var(--card-3)}
.iconbtn.ghost{background:transparent;box-shadow:none}
.wordmark{font-size:15px}
.wordmark small{font-size:13px;color:var(--text-3)}
.avatar{width:44px;height:44px;background:var(--card);border:0;box-shadow:0 0 0 1px var(--hair);font-size:15px}

/* ---- buttons: one primary per screen ---- */
.btn{min-height:var(--tap);border-radius:var(--r-pill);font:600 17px/1 var(--font);letter-spacing:-.01em;padding:0 24px}
.btn.primary{background:var(--orange);color:var(--orange-ink);box-shadow:none}
.btn.primary:active{background:var(--orange-2)}
.btn.light,.btn.dark{background:var(--btn2);color:var(--text);border:0}
a.btn.light{color:var(--text)}
.btn.danger{background:var(--red);color:#fff}
.btn.green{background:var(--green);color:#fff}
.btn.text{color:var(--orange-t);font:600 16px/1 var(--font);min-height:48px}
.btn.red{color:var(--red-t)}
.btn[disabled]{opacity:1;background:var(--card-3);color:#A19D94;box-shadow:none}
.btn.sm{min-height:44px;padding:0 16px;font-size:15px;border-radius:var(--r-pill)}
.cta{background:linear-gradient(rgba(244,243,239,0),var(--bg) 28%);padding:24px var(--page) calc(16px + var(--sab))}
.cta .hint{font-size:14px;color:var(--text-2)}

/* ---- surfaces ---- */
.card{background:var(--card);border:0;border-radius:var(--r-l)}
.note{background:transparent;border:0;padding:0 4px;margin:16px var(--page) 0;font:var(--t-sub);color:var(--text-2)}

/* ---- grouped list: consecutive rows share one white surface with hairline separators ---- */
.opt{min-height:68px;padding:12px 16px;border:0;border-radius:var(--r-l);background:var(--card);gap:14px}
.opt .t{font:600 17px/1.3 var(--font);letter-spacing:-.01em}
.opt .d{font:400 14px/1.35 var(--font);color:var(--text-2);margin-top:2px}
.stack{gap:12px;padding:16px var(--page) 0}
.stack > .opt + .opt{margin-top:-12px;border-top-left-radius:0;border-top-right-radius:0;box-shadow:inset 0 1px 0 var(--hair)}
.stack > .opt:has(+ .opt){border-bottom-left-radius:0;border-bottom-right-radius:0}
.opt:active{background:var(--card-2)}
.opt[aria-pressed="true"]{background:var(--orange-soft);border:0}
.opt .check{width:28px;height:28px;border:2px solid var(--hair-3)}
.opt[aria-pressed="true"] .check{background:var(--orange);border-color:var(--orange);color:var(--orange-ink)}
.opt[disabled]{opacity:1}
.opt[disabled] .t,.opt[disabled] .d{color:#A19D94}

/* ---- form controls ---- */
.field label{font:600 15px/1.3 var(--font);color:var(--text)}
.input{height:var(--tap);border-radius:var(--r);background:var(--card);border:1.5px solid var(--hair-2)}
.input:focus-within{border-color:var(--orange);box-shadow:0 0 0 4px var(--orange-soft)}
.input input{font-size:17px}
.input.err{border-color:var(--red)}
.inp{background:var(--card);border:1.5px solid var(--hair-2);border-radius:var(--r);min-height:var(--tap);font-size:17px;color:var(--text)}
.seg{background:var(--bg-1);border:0;border-radius:var(--r);padding:4px;margin:0 var(--page)}
.seg button{height:48px;border-radius:12px;font:600 15px/1 var(--font);color:var(--text-2)}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(40,32,18,.12)}
.catrow{gap:8px;padding:16px var(--page) 2px}
.catrow button{height:44px;padding:0 18px;background:var(--card);border:0;box-shadow:0 0 0 1px var(--hair);font:600 15px/1 var(--font);color:var(--text-2)}
.catrow button[aria-pressed="true"]{background:var(--paper);color:var(--paper-ink);box-shadow:none}
.langsw{background:var(--bg-1);border:0;border-radius:var(--r-pill);padding:3px}
.langsw button{min-width:44px;height:38px;border-radius:var(--r-pill);font:700 13px/1 var(--font);letter-spacing:.04em;color:var(--text-2)}
.langsw button[aria-pressed="true"]{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(40,32,18,.12)}
.stepper .ctl button{width:52px;height:52px;border-radius:50%;background:var(--btn2);border:0}

/* ---- status and alerts: color plus a word or icon, never color alone ---- */
.pill{height:30px;padding:0 12px;font:600 13px/1 var(--font);background:var(--bg-1);border:0;color:var(--text-2)}
.pill.o{background:var(--orange-soft);color:var(--orange-t)}
.hubwarn{background:var(--amber-soft);border:0;color:var(--amber-t);border-radius:var(--r);padding:14px 16px;font:500 15px/1.4 var(--font);margin:12px var(--page) 0}
.hubwarn.err{background:var(--red-soft);color:var(--red-t)}
.empty{padding:40px 24px}
.empty .ico{width:36px;height:36px;color:#A19D94;margin-bottom:12px}
.empty b{font:600 18px/1.3 var(--font)}
.empty p{font:var(--t-sub);color:var(--text-2);margin-top:6px}
.hubload{font:var(--t-sub);color:var(--text-2);padding:40px 20px}

/* ---- bottom navigation ---- */
#tabbar{background:rgba(255,255,255,.94);border-top:1px solid var(--hair);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:6px 8px calc(6px + var(--sab))}
.tab{min-height:56px;gap:3px;font:600 12px/1 var(--font);color:var(--text-3)}
.tab .ico{width:26px;height:26px}
.tab[aria-current="page"]{color:var(--orange-t)}
.tab[aria-current="page"] .ico{stroke-width:2.3}

/* ---- sheets, scrim, toast: the only things with elevation ---- */
.scrim{background:rgba(22,21,15,.38);backdrop-filter:none;-webkit-backdrop-filter:none}
.sheet{background:var(--bg);border-top:0;border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--e-sheet);padding:10px var(--page) calc(24px + var(--sab))}
.sheet .grab{width:40px;height:5px;background:var(--hair-3);margin-bottom:20px}
.sheet h3{font:var(--t-title);letter-spacing:-.02em}
.sheet p{font:var(--t-body);color:var(--text-2)}
.toast{background:var(--paper);color:var(--paper-ink);border-radius:var(--r-pill);padding:14px 22px;font:600 15px/1.2 var(--font);box-shadow:var(--e-float)}
.screen.in-fwd,.screen.in-back{animation-duration:.3s}
@media (prefers-reduced-motion:reduce){ .screen,.sheet,.toast,.btn,.opt{animation:none!important;transition:none!important} }

/* ---- shared fixes collected from the area passes ---- */
input[type=date],input[type=time],input[type=datetime-local],select{color-scheme:light}
.btn.green{background:var(--green-t);color:#fff}
.btn.danger{background:var(--red-t);color:#fff}
.langsw button{height:44px}
.hti{background:var(--bg-1);color:var(--text-2);border:0}
/* rows inside one grouped surface darken on press; they do not shrink */
.stack > .opt.press:active,.acctlist .press:active{transform:none;background:var(--card-2)}
@media (min-width:1100px){ .sheet{border-radius:var(--r-xl)} }
.ctip{background:var(--paper);color:var(--paper-ink);font-size:13px;border:0}

/* --- 20-entry.css --- */
/* ============================================================================
   20-entry: sign in, new password, selfie, two-step sign-in, crew home, updates,
   account sheet, and the shared small pieces (messages, toast, update bar, boot).
   ============================================================================ */

/* app.css uses --field for text boxes (dark). Look 2 has no value for it in the tokens, so set it here. */
:root{ --field:#FFFFFF; }

/* ---- messages: error and info boxes (sign in, password, two-step) ---- */
.errmsg{color:var(--red-t);font:500 15px/1.4 var(--font);align-items:flex-start}
.errmsg .ico{flex:none;margin-top:2px}
.infomsg{background:var(--amber-soft);border:0;color:var(--amber-t);border-radius:var(--r);padding:12px 14px;font:500 15px/1.4 var(--font);gap:10px}
.infomsg.ok{background:var(--green-soft);border:0;color:var(--green-t)}
.infomsg svg{margin-top:2px}

/* ---- icon tiles: neutral, never orange ---- */
.hti{width:40px;height:40px;border-radius:12px;background:var(--bg-1);color:var(--text-2)}
.hti.sm{width:40px;height:40px;border-radius:12px}
.hti .ico{width:22px;height:22px}

/* ---- EN/ES switch in the top bar: full-height tap targets ---- */
.langsw button{min-width:46px;height:44px}

/* ============================== SIGN IN ============================== */
.lg{background:var(--bg);border-top:0}
.lg::before,.lg-bg,.lg-card::before{display:none}
.lg-hero{padding:calc(12px + var(--sat)) var(--page) 0}
.lg-lang{top:calc(10px + var(--sat));right:16px}
.lg-brand .mark.xl{width:36px;height:36px;filter:none}
.lg-brand .wordmark{font-size:15px;letter-spacing:.14em}
.lg-panel{padding:28px var(--page) calc(16px + var(--sab))}
.lg-card{padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.lg-cardhead h2{font:var(--t-large);letter-spacing:-.025em}
.lg-cardhead p{font:var(--t-body);color:var(--text-2);margin-top:8px}
.lg form{gap:16px;margin-top:24px}
.lg-field{gap:8px}
.lg-field > span{font:600 15px/1.3 var(--font);letter-spacing:0;color:var(--text)}
.lg .input{height:var(--tap);border-radius:var(--r);background:var(--card);border:1.5px solid var(--hair-2)}
.lg .input:focus-within{background:var(--card);border-color:var(--orange)}
.lg .input.err{border-color:var(--red)}
.lg .input input{font-size:17px}
.lg .input input::placeholder{color:var(--text-3);opacity:1}
.lg .input > .ico{color:var(--text-3)}
.lg #pwEye{color:var(--text-2)}
.lg .sharedbox{padding:0;border:0;background:none;align-items:center;min-height:48px;gap:14px}
.lg .sharedbox input{width:26px;height:26px;margin:0}
.lg .sharedbox b{font:600 17px/1.3 var(--font)}
.lg .sharedbox small{font:400 14px/1.35 var(--font);color:var(--text-2)}
.lg-go{min-height:var(--tap);border-radius:var(--r-pill);background:var(--orange);box-shadow:none;font-size:17px}
.lg-go:hover{filter:none}
.lg-go:active{background:var(--orange-2)}
.lg-go[disabled]{background:var(--card-3);color:var(--text-2)}
.lg .errmsg{padding:12px 14px;border:0;border-radius:var(--r);background:var(--red-soft);font:500 15px/1.4 var(--font)}
.lg .auth{font-size:13px;color:var(--text-3)}
.lg .auth .ico{color:var(--green-t)}
.lg .ver{font:var(--t-cap);color:var(--text-3);padding-top:20px;opacity:1}

/* Add to Home Screen card: Sign In stays the one orange button, so "Show me how" is the gray secondary */
.a2hs{margin:16px var(--page) 0;padding:16px;border:0;border-radius:var(--r-l);background:var(--card);gap:12px 14px}
.a2txt b{font:600 17px/1.3 var(--font)}
.a2txt span{font:400 15px/1.4 var(--font);color:var(--text-2)}
.a2btns{gap:8px}
.a2btns .btn{min-height:48px;padding:0 16px;font-size:16px}
.a2btns .btn.primary{background:var(--btn2);color:var(--text)}
.a2btns .btn.primary:active{background:var(--hair-3)}
.a2steps{font:var(--t-body);padding-left:24px}
.lg .a2hs{margin:24px 0 0;background:var(--card)}

/* call the office: a list row with a neutral icon tile */
.lg-call{min-height:64px;margin-top:12px;padding:10px 16px;gap:14px;border:0;border-radius:var(--r-l);background:var(--card)}
.lg-call > .ico:first-child{box-sizing:border-box;width:40px;height:40px;padding:9px;border-radius:12px;background:var(--bg-1);color:var(--text-2)}
.lg-call b{font:600 17px/1.3 var(--font)}
.lg-call small{font:400 15px/1.35 var(--font);color:var(--text-2)}
.lg-call > .ico:last-child{color:var(--text-3)}
.lg-call:active{background:var(--card-2)}
/* on the sign-in page the install card and the call row are one grouped surface */
.lg #a2hs:empty + .lg-call{margin-top:24px}
.lg #a2hs:not(:empty) .a2hs{border-bottom-left-radius:0;border-bottom-right-radius:0}
.lg #a2hs:not(:empty) + .lg-call{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;box-shadow:inset 0 1px 0 var(--hair)}

/* the brand story (tablet and computer only) */
.lg-eyebrow{background:var(--orange-soft);border:0;color:var(--orange-t);font-size:13px;letter-spacing:.06em;backdrop-filter:none;-webkit-backdrop-filter:none}
.lg-h1{font-weight:800;letter-spacing:-.03em;color:var(--text)}
.lg-h1 span{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--orange-t)}
.lg-lede{font-size:17px;color:var(--text-2)}

@media (max-width:699px) and (max-height:700px){
  .lg-panel{padding-top:16px}
  .lg-cardhead h2{font-size:30px}
  .lg form{gap:12px;margin-top:16px}
}
@media (min-width:700px){
  .lg{padding:48px 32px}
  .lg-hero{padding:0}
  .lg-lang{top:24px;right:28px}
  .lg-panel{padding:28px 0 0}
  .lg-card{padding:32px;border-radius:var(--r-xl);background:var(--card)}
  .lg .a2hs,.lg-call{background:var(--card-2)}
  .lg-call:active{background:var(--bg-1)}
}
@media (min-width:1100px){
  .lg{padding:0;background:var(--bg)}
  .lg-hero{padding:44px 64px 40px;background:none}
  .lg-copy{padding:30px 0 60px}
  .lg-feats li{background:var(--card);border:0;border-radius:var(--r);color:var(--text);font-size:15px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .lg-feats .ico{color:var(--text-2)}
  .lg-foot{font-size:13px;letter-spacing:.08em;color:var(--text-3)}
  .lg-panel{padding:40px 56px;background:var(--card);border-left:0}
  .lg-card{padding:0;border-radius:0;background:transparent}
  .lg-lang{top:28px;right:36px}
}

/* ====================== NEW PASSWORD AND SELFIE ====================== */
.screen[data-screen=password] .wz-head .step,.screen[data-screen=selfie] .wz-head .step{font:600 13px/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.screen[data-screen=password] .wz-head,.screen[data-screen=selfie] .wz-head{padding:8px var(--page) 0}
.screen[data-screen=password] .txtfields{padding:24px var(--page) 0;gap:12px}
.screen[data-screen=password] .input input::placeholder{color:var(--text-3);opacity:1}
.screen[data-screen=password] #pwhint{font:var(--t-sub);color:var(--text-2);margin-top:12px}
.screen[data-screen=password] #pwhint.o{color:var(--red-t);font-weight:600}
.screen[data-screen=password] .errmsg,.screen[data-screen=selfie] .errmsg{margin-top:12px}
.selfie{gap:12px;padding:20px var(--page) 0}
.selfbox{border:0;background:var(--paper-2);box-shadow:0 0 0 1px var(--hair-2)}
.selfring{border-color:rgba(255,255,255,.7)}
.selfie #sfMsg{font:var(--t-sub);color:var(--text-2)}
.selfie label.btn .ico,.cta .btn .ico{flex:none}

/* ========================= TWO-STEP SIGN-IN ========================= */
/* the bar title repeats the big title on these screens */
.screen[data-screen=mfa] .appbar .ttl,.screen[data-screen=updates] .appbar .ttl{visibility:hidden}
.screen[data-screen=mfa] .wz-head{padding:8px var(--page) 0}
.screen[data-screen=mfa] .opt{min-height:68px}
.screen[data-screen=mfa] .opt .hti + span{flex:1;min-width:0}
.screen[data-screen=mfa] .opt > .ico:last-child{color:var(--text-3);flex:none}
/* the two choices are one grouped list (the rows carry an inline top margin) */
.screen[data-screen=mfa] #mfApp:has(+ #mfSms){border-bottom-left-radius:0;border-bottom-right-radius:0}
.screen[data-screen=mfa] #mfApp + #mfSms{margin-top:0!important;border-top-left-radius:0;border-top-right-radius:0;box-shadow:inset 0 1px 0 var(--hair)}
.screen[data-screen=mfa] .pad > p.faint{font-size:15px!important;color:var(--text-2);line-height:1.4}
.mfaqr{border-radius:var(--r);background:#fff}
.sheet .hf{font:600 15px/1.3 var(--font);color:var(--text);gap:8px}
.sheet .hf input{min-height:var(--tap);border-radius:var(--r);border:1.5px solid var(--hair-2);background:var(--card);font-size:17px}
.sheet .input input::placeholder{color:var(--text-3);opacity:1}
.sheet .errmsg{padding:12px 14px;border-radius:var(--r);background:var(--red-soft)}
.sheet .errmsg[hidden]{display:none}

/* ============================ CREW HOME ============================ */
.appbar.homebar{background:var(--bg)}
.hhead{padding:8px var(--page) 0}
.hdate{font:600 13px/1.3 var(--font);letter-spacing:.06em;color:var(--text-3);margin-bottom:4px}
.hhead .display{font:var(--t-large);letter-spacing:-.025em}
.hello{padding:0 var(--page)}
.hello .sect{margin:32px 4px 8px}
.hello .eyebrow,.hello .eyebrow.o{font:600 13px/1.3 var(--font);letter-spacing:.06em;color:var(--text-3)}
.hello .hubwarn{margin:16px 0 0}

/* celebration: one flat tinted card */
.hcele{margin:16px var(--page) 0;padding:16px;border:0;border-radius:var(--r-l);background:var(--orange-soft)}
.hcele.anniv{border:0;background:var(--blue-soft)}
.hcele b{font:700 20px/1.25 var(--font)}
.hcele p{font:var(--t-sub);color:var(--text-2)}

/* company update banner */
.hupd,.hmain > .hupd{width:calc(100% - 2 * var(--page));margin:16px var(--page) 0;padding:12px 16px;min-height:64px;gap:14px;border:0;border-radius:var(--r-l);background:var(--card);box-shadow:none}
.hupd > .ico:first-child{box-sizing:border-box;width:40px;height:40px;padding:10px;border-radius:12px;background:var(--bg-1);color:var(--text-2);flex:none}
.hupd b{font:600 17px/1.3 var(--font)}
.hupd span span{font:400 15px/1.35 var(--font);color:var(--text-2)}
.hupd > .ico:last-child{color:var(--text-3);flex:none}
.hupd.imp{background:var(--orange-soft);border:0}
.hupd.imp > .ico:first-child{background:var(--card);color:var(--orange-t)}
.hupd:active{background:var(--card-2)}
.hupd.imp:active{background:#FFE6D2}

/* next assignment and active work zone cards: flat white surfaces (the assignments area styles the inside) */
:where(.hello) .hjob{border:0;border-radius:var(--r-l);background:var(--card)}
.jobcard{padding:16px}
.jobcard.live{border:0}
.jobcard .loc{font:700 20px/1.25 var(--font);letter-spacing:-.02em}
.jobcard .meta{font-size:15px;color:var(--text-2)}
.jobcard .acts{gap:8px}
.jobcard .acts .btn{min-height:52px;border-radius:var(--r-pill);font-size:16px}
.jobcard .acts [data-closejob]{color:var(--red-t)!important}   /* inline color in the markup */
.status.active{background:var(--green-soft);color:var(--green-t)}
.status.closed{background:var(--bg-1);color:var(--text-2)}

/* menu rows: admin, my hours and the menu share ONE grouped list */
.hadmin,.hhours{position:relative;gap:14px;min-height:64px;margin-top:16px;padding:10px 16px;border:0;border-radius:var(--r-l);background:var(--card);box-shadow:none}
.hadmin > span:nth-child(2),.hhours > span:nth-child(2){flex:1;min-width:0}
.hadmin .hti{background:var(--bg-1);color:var(--text-2)}
.hadmin b,.hhours > span:nth-child(2) b{font:600 17px/1.3 var(--font);letter-spacing:-.01em}
.hadmin span span,.hhours > span:nth-child(2) span{font:400 15px/1.35 var(--font);color:var(--text-2)}
.hadmin > .ico:last-child,.hhours > .ico:last-child{width:18px;height:18px;color:var(--text-3);flex:none}
.hhbig{font:700 22px/1 var(--font);color:var(--text)}
.hhbig small{font-size:13px;font-weight:600;color:var(--text-3)}
.hadmin:active,.hhours:active{background:var(--card-2)}
.hadmin.press:active,.hhours.press:active,.htile.press:active,.hupd.press:active{transform:none}
.htbadge{min-width:26px;height:26px;padding:0 8px;font:700 14px/1 var(--font);background:var(--orange);color:var(--orange-ink)}
.htile{border:0;background:var(--card)}
.htile b{font:600 17px/1.3 var(--font);letter-spacing:-.01em}
@media (max-width:1099px){
  .htiles{display:block;margin-top:16px;padding:0;border:0;border-radius:var(--r-l);background:var(--card);overflow:hidden}
  .htile{display:grid;grid-template-columns:40px minmax(0,1fr) auto 18px;grid-template-rows:auto auto;column-gap:14px;row-gap:0;align-items:center;width:100%;min-height:64px;padding:10px 16px;border-radius:0;background:transparent}
  .htile + .htile{border-top:0}
  .htile + .htile::before,.hadmin + .hhours::before,.hadmin + .htiles::before,.hhours + .htiles::before{content:"";position:absolute;left:70px;right:0;top:0;height:1px;background:var(--hair)}
  .htiles{position:relative}
  .htile .hti{grid-row:1 / 3;grid-column:1;width:40px;height:40px;border-radius:12px;margin:0;align-self:center}
  .htile b{grid-column:2;grid-row:1;align-self:end}
  .htile > span:not(.hti):not(.htbadge),.htile > span:last-child{grid-column:2;grid-row:2;align-self:start;font:400 15px/1.35 var(--font);color:var(--text-2);display:block;overflow:visible;-webkit-line-clamp:none;overflow-wrap:anywhere}
  .htile .htbadge{position:static;grid-column:3;grid-row:1 / 3;align-self:center}
  .htile .htchev{display:grid;grid-column:4;grid-row:1 / 3;align-self:center;color:var(--text-3)}
  .htile:active{background:var(--card-2)}
  .hadmin:has(+ .hhours),.hadmin:has(+ .htiles),.hhours:has(+ .htiles){border-bottom-left-radius:0;border-bottom-right-radius:0}
  .hadmin + .hhours,.hadmin + .htiles,.hhours + .htiles{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
}

/* the one primary action */
.startbtn{gap:14px;min-height:76px;margin-top:0;padding:14px 16px;border-radius:var(--r-l);background:var(--orange);color:var(--orange-ink);box-shadow:none}
.startbtn::before{display:none}
.startbtn .plus{width:48px;height:48px;border-radius:50%;background:var(--orange-ink);color:#fff}
.startbtn b{font:700 19px/1.25 var(--font);letter-spacing:-.015em}
.startbtn > span > span{font:500 15px/1.35 var(--font);opacity:1;color:#3A1D05}
.startbtn .go{display:grid}
.startbtn:active{background:var(--orange-2)}
.startbtn.press:active{transform:none}
.hello .startbtn + div{margin-top:16px!important}   /* the active work zone card under it (inline margin) */

/* notes: plain text, no box */
.tcp{gap:10px;align-items:flex-start;padding:0 4px;border:0;border-radius:0;background:transparent;font:var(--t-sub);color:var(--text-2)}
.tcp .ico{color:var(--text-3);flex:none;margin-top:2px}

@media (max-width:374px){
  .hhead .display,.lg-cardhead h2{font-size:30px}
  .startbtn b{font-size:18px}
}

/* computer: the home menu stays a grid of flat white tiles, with the side column */
@media (min-width:1100px){
  .hhead{padding:0}
  .hhead .display{font-size:40px}
  .hmain > .hupd{width:100%;margin:20px 0 0}
  .hmain > .hcele{margin:0 0 18px}
  .hmain .hello{padding:0}
  .htile{background:var(--card);border-radius:var(--r-l);transition:box-shadow .18s}
  .htile:hover{transform:none;border-color:transparent;box-shadow:0 0 0 1.5px var(--hair-3)}
  .htile > span:last-child{font-size:15px;color:var(--text-2)}
  .hadmin,.hhours{margin-top:20px;padding:14px 20px}
  .hadmin:hover,.hhours:hover,.hupd:hover{box-shadow:0 0 0 1.5px var(--hair-3)}
  .hsum,.hqa,.hupl,.tkfeat.side{border:0;border-radius:var(--r-l);background:var(--card);box-shadow:none}
}

/* ========================= COMPANY UPDATES ========================= */
.screen[data-screen=updates] .wz-head{padding:8px var(--page) 4px}
.screen[data-screen=updates] .hcard{margin:12px var(--page) 0;padding:16px;border:0;border-radius:var(--r-l);background:var(--card)}
.screen[data-screen=updates] .hcmeta{font:var(--t-cap);color:var(--text-3)}
.screen[data-screen=updates] .hcmeta .o{color:var(--orange-t);font-weight:700}
.screen[data-screen=updates] .hcard .h3{font:var(--t-head);margin:4px 0 8px}
.screen[data-screen=updates] .hcard p{font:var(--t-body);color:var(--text)}

/* ========================== ACCOUNT SHEET ========================== */
.sheet > .mark.lg{display:none!important}   /* inline display in the markup; the name and avatar are the header */
.sheet .acts{gap:8px;margin-top:24px}
.sheet .review{margin:16px 0 0;border:0;border-radius:var(--r-l);background:var(--card)}
.sheet .rv{padding:14px 16px;border-top:1px solid var(--hair);font:400 16px/1.35 var(--font)}
.sheet .rv:first-child{border-top:0}
.sheet .rv span{color:var(--text-2)}
.sheet .rv b{font-weight:600;color:var(--text)}
.sheet .subhead{padding:0 4px}
.sheet .stack{gap:12px}
.sheet .opt > .ico:last-child{color:var(--text-3);flex:none}
.sheet .opt > span:first-child{flex:1;min-width:0}
.sheet #so{color:var(--red-t)!important}   /* inline color in the markup */
/* call, two-step, install and the look switch are one grouped list (rows carry inline top margins) */
.acctlist{margin-top:16px;border-radius:var(--r-l);background:var(--card);overflow:hidden}
.acctlist .lg-call,.acctlist .opt{margin-top:0!important;min-height:64px;padding:10px 16px;border-radius:0;background:transparent;box-shadow:none}
.acctlist > :not(:first-child):not(:empty){border-top:1px solid var(--hair)}
.acctlist .lg-call:active,.acctlist .opt:active{background:var(--card-2)}
.acctlist .opt.press:active{transform:none}
.acctlist .opt .d{font:400 15px/1.35 var(--font);color:var(--text-2)}
.sheet #a2hsA .a2hs{margin:0;border-radius:0;background:transparent}
/* on/off switch */
.lookrow > span:first-child{flex:1;min-width:0}
.swtrack{width:52px;height:32px;border:0;background:#8F8B83}
.swknob{top:3px;left:3px;width:26px;height:26px;background:#fff;box-shadow:0 1px 3px rgba(40,32,18,.25)}
.lookrow[aria-checked="true"] .swtrack{background:var(--orange);box-shadow:inset 0 0 0 1.5px var(--orange-t)}
.lookrow[aria-checked="true"] .swknob{transform:translateX(20px);background:#fff}

/* ====================== TOAST, UPDATE BAR, BOOT ====================== */
.toast .ico{flex:none}
.updbar{max-width:calc(100% - 32px);width:max-content;min-height:48px;padding:12px 22px;border-radius:var(--r-pill);background:var(--orange);color:var(--orange-ink);font:600 15px/1.25 var(--font);box-shadow:var(--e-float)}
.updbar:active{background:var(--orange-2)}
#boot .muted{color:var(--text)}
#boot .faint{color:var(--text-2)}
@media (max-height:700px){ .selfbox{width:min(58vw,220px)} }

/* --- 30-setup.css --- */
/* ============================================================================
   30-setup: the guided setup flow.
   wizard (state, road, median, access, route, speed, where, move, fit, site,
   day or night), building, setup result, know your sign, loadout, verify, log,
   logged, job record, closed, history.
   Shared classes (.tcp, .review, .opcard, .sheetcard, .done-screen, .status)
   are scoped by data-screen so other areas keep their own look.
   ============================================================================ */

/* ============================== 1. WIZARD FRAME ============================== */
/* progress: slim bar plus "Step 2 of 8". The bar title ("New Setup") is dropped, the question is the title. */
body .appbar.wzbar .ttl{font-size:0;line-height:0;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.appbar.wzbar .ttl::before{content:"";order:1;display:block;width:100%;max-width:220px;height:6px;border-radius:99px;
  background:linear-gradient(to right,var(--text) var(--wzp,0%),var(--card-3) var(--wzp,0%))}
.appbar.wzbar .ttl small{order:2;font:600 13px/1 var(--font);letter-spacing:.01em;color:var(--text-2)}

[data-screen=wizard] .wz-head,[data-screen=know] .wz-head,[data-screen=loadout] .wz-head,[data-screen=log] .wz-head{padding:8px var(--page) 0}
[data-screen=wizard] .wz-head .step,[data-screen=know] .wz-head .step{font:600 13px/1.4 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
[data-screen=wizard] .wz-head .h2{margin-top:6px}
[data-screen=wizard] .wz-head .lede{font:400 16px/1.45 var(--font)}
[data-screen=wizard] .lede.pad{padding:0 var(--page);font:400 16px/1.45 var(--font)}
@media (max-width:379px){ [data-screen=wizard] .h2,[data-screen=know] .h2,[data-screen=loadout] .h2,[data-screen=log] .h2{font-size:30px} }

/* the main button sits at the bottom of the screen even when the page is short */
@media (max-width:1099px){
  :is([data-screen=wizard],[data-screen=know],[data-screen=setup],[data-screen=loadout],[data-screen=verify],[data-screen=log]).has-cta{display:flex;flex-direction:column}
  :is([data-screen=wizard],[data-screen=know],[data-screen=setup],[data-screen=loadout],[data-screen=verify],[data-screen=log]).has-cta > *{flex:none}
  :is([data-screen=wizard],[data-screen=know],[data-screen=setup],[data-screen=loadout],[data-screen=verify],[data-screen=log]).has-cta > .cta{margin-top:auto}
}

/* answers so far: one quiet line of text, not a row of pills */
.flsum{gap:0 0;display:block;text-transform:none;letter-spacing:0}
.flsum span{display:inline;padding:0;border:0;background:none;border-radius:0;font:500 14px/1.45 var(--font);color:var(--text-2);letter-spacing:0}
.flsum span + span::before{content:"\00B7";margin:0 6px;color:var(--text-3)}

/* state rows: neutral letter tile, no colored bar */
[data-screen=wizard] .stbadge{width:44px;height:44px;border-radius:12px;background:var(--bg-1);border:0;font:700 15px/1 var(--font);color:var(--text)}
[data-screen=wizard] .stbadge::before{display:none}
[data-screen=wizard] .subhead[style]{margin-bottom:8px}

/* ============================== 2. PICTURE TILES ============================== */
/* road shape, median, access, route, town or country, fixed or moving */
.vgrid{grid-template-columns:1fr 1fr;gap:12px;padding:20px var(--page) 0}
.vcard{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px 8px 14px;border:0;border-radius:var(--r-l);background:var(--card);min-width:0}
.vcard .vpic{display:flex;align-items:center;justify-content:center;height:auto;aspect-ratio:16/9;border-radius:14px;background:#161719}
.vcard .vpic > svg{height:100%;width:auto;max-width:none;flex:none}
.vcard .vpic > svg[viewBox="0 0 60 60"]{height:70%}
.vcard .vtxt{padding:10px 6px 0;min-width:0}
.vcard .vtxt b{font:600 17px/1.25 var(--font);letter-spacing:-.01em;color:var(--text)}
.vcard .vtxt span{font:400 14px/1.35 var(--font);color:var(--text-2);margin-top:4px}
.vcard .check{position:absolute;top:14px;right:14px;width:30px;height:30px;border:0;background:var(--orange);color:var(--orange-ink);box-shadow:0 0 0 3px var(--card);opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s}
.vcard .check .ico{width:17px;height:17px;stroke-width:2.8;opacity:1}
.vcard:active{background:var(--card-2)}
.vcard[aria-pressed="true"]{background:var(--orange-soft);box-shadow:inset 0 0 0 2.5px var(--orange)}
.vcard[aria-pressed="true"] .check{opacity:1;transform:none;box-shadow:0 0 0 3px var(--orange-soft)}
/* the odd one out ("not sure", "something else") is a full-width row under the pictures */
@media (max-width:699px){
  .vgrid > .vcard:last-child:nth-child(odd){grid-column:1/-1;flex-direction:row;align-items:center;gap:14px;padding:10px 16px 10px 10px;min-height:76px}
  .vgrid > .vcard:last-child:nth-child(odd) .vpic{width:56px;height:56px;aspect-ratio:auto;flex:none;border-radius:12px}
  .vgrid > .vcard:last-child:nth-child(odd) .vpic > svg{height:82%}
  .vgrid > .vcard:last-child:nth-child(odd) .vtxt{padding:0;flex:1}
  .vgrid > .vcard:last-child:nth-child(odd) .check{position:static;flex:none;width:28px;height:28px;opacity:1;transform:none;background:transparent;border:2px solid var(--hair-3);box-shadow:none;color:transparent}
  .vgrid > .vcard:last-child:nth-child(odd)[aria-pressed="true"] .check{background:var(--orange);border-color:var(--orange);color:var(--orange-ink)}
}

/* ---- posted speed: sign plates ---- */
.sgrid2{grid-template-columns:repeat(4,1fr);gap:10px;padding:20px var(--page) 0}
.spdsign{position:relative;min-height:88px;padding:10px 6px;border:0;border-radius:var(--r);background:var(--card)}
.spdsign svg{max-width:60px}
.spdsign:active{background:var(--card-2)}
.spdsign[aria-pressed="true"]{background:var(--orange-soft);box-shadow:inset 0 0 0 2.5px var(--orange)}
.spdsign[aria-pressed="true"]::after{content:"";position:absolute;top:-7px;right:-7px;width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 3px var(--bg);
  background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C0D02' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.4 4.4L19 7.4'/%3E%3C/svg%3E") center/15px no-repeat}
@media (min-width:700px){ .sgrid2{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))} }

/* ---- where is the work: the road is the picture, the list is one grouped surface ---- */
.wherepic{margin:20px var(--page) 0;padding:12px 12px 10px;border:0;border-radius:var(--r-l);background:#161719}
.wherepic .dirhint{font:500 13px/1.3 var(--font);color:#D8D4CA;margin-bottom:10px}
.wherepic svg{border-radius:8px}
.wherepic .dirhint svg{border-radius:0}
.whereleg{margin-top:10px;font:600 13px/1.3 var(--font);letter-spacing:.04em;color:#D8D4CA}
.wlist{gap:8px;padding:12px var(--page) 0}
.wlist .opt{min-height:60px}
@media (max-width:699px){
  .wlist{gap:0}
  .wlist .opt{border-radius:0}
  .wlist .opt + .opt{box-shadow:inset 0 1px 0 var(--hair)}
  .wlist .opt:first-child{border-top-left-radius:var(--r-l);border-top-right-radius:var(--r-l)}
  .wlist .opt:last-child{border-bottom-left-radius:var(--r-l);border-bottom-right-radius:var(--r-l)}
}

/* ---- recommended setup (fit) ---- */
[data-screen=wizard] .opcards{padding:16px var(--page) 0;gap:12px}
[data-screen=wizard] .opcard{border:0;border-radius:var(--r-l);background:var(--card)}
[data-screen=wizard] .opcard .dia{border-bottom:0}
[data-screen=wizard] .opcard .body{padding:14px 16px 16px}
[data-screen=wizard] .opcard .figid{font:600 13px/1.3 var(--font);letter-spacing:.02em;color:var(--text-2);margin-bottom:4px}
[data-screen=wizard] .opcard .t{font:600 18px/1.3 var(--font);letter-spacing:-.01em}
[data-screen=wizard] .opcard .d{font:400 15px/1.4 var(--font);color:var(--text-2)}
[data-screen=wizard] .opcard .check{width:28px;height:28px;border:2px solid var(--hair-3)}
[data-screen=wizard] .opcard[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--orange)}
[data-screen=wizard] .opcard[aria-pressed="true"] .body{background:var(--orange-soft)}
[data-screen=wizard] .opcard[aria-pressed="true"] .check{background:var(--orange);border-color:var(--orange);color:var(--orange-ink)}
.mirrornote{background:var(--amber-soft);color:var(--amber-t);border-top:0;font:600 14px/1.35 var(--font);padding:10px 14px}
.gatebadge{background:var(--red-soft);color:var(--red-t);font:700 13px/1 var(--font);padding:6px 10px}
[data-screen=wizard] .cta .btn.text{color:var(--text-2);margin-top:4px}

/* ---- stop notices: supervisor review. Red surface, red icon, the word says it. ---- */
.fitgate,.gatecard{margin:20px var(--page) 0;padding:20px;border:0;border-radius:var(--r-l);background:var(--red-soft);color:var(--text)}
.fitgate .gicon,.gatecard .gicon{background:var(--red)}
.fitgate h2,.gatecard h1{font:700 22px/1.25 var(--font);letter-spacing:-.01em;color:var(--red-t);margin:0}
.fitgate p,.gatecard p{font:400 16px/1.45 var(--font);color:var(--text);margin:8px 0 12px}
.fitgate ul,.gatecard .gwhy ul{font:400 16px/1.45 var(--font);color:var(--text)}
.fitgate li + li,.gatecard li + li{margin-top:6px}
.gatecard .gwhy{background:transparent;padding:0;border-radius:0;margin-bottom:20px}
.gatecard .gwhy b{font:600 13px/1.3 var(--font);letter-spacing:.06em;color:var(--text-2)}
.gatecard{text-align:left}
.gatecard .gicon{margin:0 0 12px}
.gatecard .btn{padding:0 16px;font-size:16px;gap:8px}
[data-screen=setup] .gatecard ~ .stack{padding-top:12px}
[data-screen=setup] .gatecard ~ .stack .opt > .ico{margin-left:auto;color:var(--text-3)}

/* ---- site check ---- */
.siteqs{padding:16px var(--page) 0;gap:12px}
.siteq{border:0;border-radius:var(--r-l);padding:16px}
.siteq p{font:600 17px/1.35 var(--font);letter-spacing:-.01em;margin:0 0 12px}
.siteq .seg{margin:0;background:var(--bg-1)}
.siteq .seg button{min-height:48px;font:600 16px/1.1 var(--font)}
.siteq .seg button.risk[aria-pressed="true"]{background:var(--red-t);color:#fff;border:0;box-shadow:none}

/* ---- day or night: two picture tiles ---- */
.dncards{grid-template-columns:1fr 1fr;gap:12px;padding:20px var(--page) 0}
.dn{display:flex;flex-direction:column;height:auto;padding:8px 8px 14px;border:0;border-radius:var(--r-l);background:var(--card);overflow:visible}
.dn > svg{position:static;width:100%;height:auto;aspect-ratio:16/10;border-radius:14px;flex:none}
.dn .lab{position:static;display:block;padding:10px 6px 0}
.dn.day .lab,.dn.night .lab{color:var(--text)}
.dn .lab span{opacity:1;font-size:inherit}
.dn .lab b{font:600 17px/1.25 var(--font);letter-spacing:-.01em}
.dn .lab > span:first-child > span{display:block;font:400 14px/1.35 var(--font);color:var(--text-2);margin-top:4px}
.dn .lab .check{position:absolute;top:14px;right:14px;width:30px;height:30px;border:0;background:var(--orange);color:var(--orange-ink);box-shadow:0 0 0 3px var(--orange-soft);opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s}
.dn .lab .check .ico{width:17px;height:17px;stroke-width:2.8}
.dn:active{background:var(--card-2)}
.dn[aria-pressed="true"]{background:var(--orange-soft);box-shadow:inset 0 0 0 2.5px var(--orange)}
.dn[aria-pressed="true"] .lab .check{opacity:1;transform:none}
.dn[disabled] > svg{filter:grayscale(1);opacity:.5}
.dn[disabled] .lab b,.dn[disabled] .lab > span:first-child > span{color:#8C887F}
[data-screen=wizard] .nightnote{margin:16px var(--page) 0;padding:14px 16px;border:0;border-radius:var(--r-l);font:400 15px/1.45 var(--font);color:var(--text-2)}
[data-screen=wizard] .nightnote b{font:600 16px/1.3 var(--font)}
[data-screen=wizard] .nightnote[style]{background:transparent;padding:0 4px;margin-top:10px!important;font-size:14px}

/* ============================== 3. BUILDING ============================== */
.building .h2{font:var(--t-large);letter-spacing:-.025em}
.building li{font:500 17px/1.3 var(--font);color:var(--text-3)}
.building li .dot{width:24px;height:24px;border:2px solid var(--hair-3)}
.building li.done .dot{color:#fff}
.building #bldloc{color:var(--text-2)}

/* ============================== 4. THE SETUP (result) ============================== */
:is([data-screen=setup],[data-screen=job]) .setup-head{padding:8px var(--page) 0}
:is([data-screen=setup],[data-screen=job]) .eyebrow{font:600 13px/1.4 var(--font);letter-spacing:.06em;color:var(--text-3)}
:is([data-screen=setup],[data-screen=job]) .setup-head .display{font:800 30px/1.14 var(--font);letter-spacing:-.025em;margin-top:6px}
:is([data-screen=setup],[data-screen=job]) .chips{gap:6px;margin-top:14px}
:is([data-screen=setup],[data-screen=job]) .chips .pill{height:32px;padding:0 12px;font:600 14px/1 var(--font);background:var(--card);color:var(--text)}
:is([data-screen=setup],[data-screen=job]) .pendline{margin:14px calc(var(--page) + 4px) 0;font:400 13px/1.45 var(--font);color:var(--text-3)}

/* unverified items: amber surface, the heading says it */
.unvbanner{margin:16px var(--page) 0;padding:16px;border:0;border-radius:var(--r-l);background:var(--amber-soft);color:var(--text)}
.unvbanner b{font:700 13px/1.3 var(--font);letter-spacing:.06em;color:var(--amber-t)}
.unvbanner p{font:600 16px/1.4 var(--font);color:var(--text);margin:8px 0}
.unvbanner ul{font:400 15px/1.45 var(--font);color:var(--text)}
.unvtag{background:var(--amber-soft);color:var(--amber-t);font:700 13px/1.2 var(--font);letter-spacing:.02em;padding:2px 7px;margin-left:6px;vertical-align:0}

/* the numbers: one white surface, label above, value large and dark */
.metrics{margin:16px var(--page) 0;border:0;border-radius:var(--r-l);background:var(--hair-2)}
.metric{padding:14px 16px 16px}
.metric .k{font:500 14px/1.35 var(--font);color:var(--text-2)}
.metric .v{font:800 28px/1.15 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--text);margin-top:4px}
.metric .v small{font:600 15px/1 var(--font);color:var(--text-2);margin-left:5px}
.metric.wide .v{font-size:26px}
@media (max-width:379px){ .metric{padding:12px 14px 14px} .metric .v{font-size:25px} .metric.wide .v{font-size:24px} }

.adjust{margin:12px var(--page) 0;width:calc(100% - 2 * var(--page));min-height:60px;padding:12px 16px;border:0;border-radius:var(--r-l);background:var(--card);font:400 15px/1.4 var(--font);color:var(--text-2)}
.adjust:active{background:var(--card-2)}
.adjust b{font-weight:700}
:is([data-screen=setup],[data-screen=job]) .sheetcard{margin:12px var(--page) 0;width:calc(100% - 2 * var(--page));padding:12px 16px 12px 12px;border:0;border-radius:var(--r-l)}
:is([data-screen=setup],[data-screen=job]) .sheetcard:active{background:var(--card-2)}
:is([data-screen=setup],[data-screen=job]) .sheetcard .sthumb{box-shadow:0 0 0 1px var(--hair-2)}
:is([data-screen=setup],[data-screen=job]) .sheetcard b{font:600 17px/1.3 var(--font)}
:is([data-screen=setup],[data-screen=job]) .sheetcard .d{font:400 14px/1.35 var(--font);color:var(--text-2)}
:is([data-screen=setup],[data-screen=job]) .sheetcard .d.warn{color:var(--amber-t);font-weight:600}
:is([data-screen=setup],[data-screen=job],[data-screen=loadout]) .tcp{padding:0 4px;border:0;border-radius:0;background:transparent;font:400 14px/1.4 var(--font);color:var(--text-2);align-items:flex-start}
:is([data-screen=setup],[data-screen=job],[data-screen=loadout]) .tcp .ico{color:var(--text-3);margin-top:1px}

:is([data-screen=setup],[data-screen=job]) .sect{margin-top:32px;flex-direction:column;align-items:flex-start;gap:2px}
:is([data-screen=setup],[data-screen=job]) .sect .faint{font-size:14px!important;color:var(--text-2)}  /* inline 12.5px in the markup */
:is([data-screen=setup],[data-screen=job]) p.faint.pad{font:400 15px/1.4 var(--font)!important;color:var(--text-2);padding:0 var(--page)}  /* inline 13.5px in the markup */
:is([data-screen=setup],[data-screen=job]) .legend{padding:0 var(--page)}
:is([data-screen=setup],[data-screen=job]) .status{font:700 13px/1 var(--font);letter-spacing:.05em;padding:6px 10px;border-radius:8px}
:is([data-screen=setup],[data-screen=job]) .status.s-opt{border:1.5px dashed var(--hair-3)}
:is([data-screen=setup],[data-screen=job]) .status.s-plan{border:0}
:is([data-screen=setup],[data-screen=job]) .status.s-both{border:0;background:var(--bg-1);color:var(--text)}

/* sign order strip */
.orderstrip{padding:6px var(--page) 6px;gap:4px}
.ochip{width:78px;min-height:48px}
.ochip .oplate{width:70px;height:70px;background:var(--plate);border-radius:14px}
.ochip .onum{min-width:24px;height:24px;border-radius:12px;font:800 14px/1 var(--font);color:var(--orange-ink)}
.ochip .ocode{font:500 13px/1.2 var(--font);color:var(--text-2)}

/* the road strip stays asphalt; the cards beside it are plain white surfaces */
.approach{font:600 13px/1.3 var(--font);letter-spacing:.08em;color:var(--text-2);margin-top:28px}
.approach .arrowdown{color:var(--text);border-color:var(--hair-3)}
.road{margin:12px var(--page) 0}
.trow{gap:12px}
.trow .body{padding:8px 0}
.trow.sign .body{padding:8px 0}
.tsign{grid-template-columns:96px 1fr;gap:12px;padding:12px;border:0;border-radius:var(--r-l);background:var(--card)}
.tsign::before{left:-13px;width:13px;background:var(--hair-3)}
.tsign:active{background:var(--card-2)}
.tsign .plate{background:var(--plate);border-radius:14px;padding:8px}
.tsign .plate .ord{color:var(--orange-ink)}
.tsign .ordtx{font:600 13px/1.3 var(--font);letter-spacing:.04em;color:var(--text-2);margin-bottom:4px}
.tsign .nm{font:700 18px/1.2 var(--font);letter-spacing:-.01em;color:var(--text)}
.tsign .cd{font:500 13px/1.3 var(--font);color:var(--text-3);margin:4px 0 8px}
.tsign .nt{font:400 14px/1.4 var(--font);color:var(--text-2)}
.tsign.optional{background:transparent;border:1.5px dashed var(--hair-3)}
.tsign.optional .plate{opacity:1}
.tsign.key{border:0;box-shadow:none}
.tsign.oppcard{background:var(--bg-1)}
.tsign.oppcard.optional{background:transparent}
.trow.gap .body{padding:6px 0 6px 4px}
.trow .dist{font:800 26px/1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--text);gap:10px}
.trow .dist small{font:600 14px/1 var(--font);letter-spacing:.04em;color:var(--text-2)}
.trow .dist .rule{height:36px;background:repeating-linear-gradient(var(--text-3) 0 5px,transparent 5px 9px)}
.trow .dist.opp{color:var(--text-2)}
.trow.marker .body{font:700 13px/1.3 var(--font);letter-spacing:.08em;color:var(--text);padding:14px 0 6px}
.trow.marker .body::after{background:var(--hair-2)}
.trow.marker.opp .body{color:var(--text-2)}
.tdev{gap:12px;padding:14px 16px 14px 12px;border:0;border-radius:var(--r-l);background:var(--card)}
.tdev .glyph{background:var(--bg-1);border-radius:12px}
.tdev b{font:600 17px/1.3 var(--font);letter-spacing:-.01em}
.tdev p{font:400 15px/1.4 var(--font);color:var(--text);margin-top:4px}
.knowcta{margin-top:8px;min-height:60px;border:0;border-radius:var(--r);background:var(--orange-soft)}
.knowcta b{font:700 13px/1.3 var(--font);letter-spacing:.05em;color:var(--orange-t)}
.knowcta span.t{display:block;font:400 14px/1.35 var(--font);color:var(--text);margin-top:2px}
.knowcta .thumbs span{background:var(--card)}
.knowcta > .ico{color:var(--orange-t)}
.endcap{font:600 13px/1.3 var(--font);letter-spacing:.08em;color:var(--text-3);margin:16px var(--page) 0}

/* rules and state requirements: one surface each, opens in place */
:is([data-screen=setup],[data-screen=job]) .disclosure{margin:12px var(--page) 0;border:0;border-radius:var(--r-l)}
:is([data-screen=setup],[data-screen=job]) .disclosure summary{min-height:60px;padding:14px 16px;font:600 17px/1.3 var(--font);letter-spacing:-.01em}
:is([data-screen=setup],[data-screen=job]) .disclosure summary > .ico:first-child{color:var(--text-2)}
:is([data-screen=setup],[data-screen=job]) .disclosure summary .faint{font:400 14px/1.35 var(--font)!important;color:var(--text-2);margin-top:2px}  /* inline 12.5px in the markup */
:is([data-screen=setup],[data-screen=job]) .disclosure .inner{font:400 15px/1.45 var(--font);color:var(--text-2)}
:is([data-screen=setup],[data-screen=job]) .disclosure .inner b{font:600 15px/1.4 var(--font)}
:is([data-screen=setup],[data-screen=job]) .disclosure .inner .mono{font-family:var(--font);font-weight:600;color:var(--text)}
ul.rules{gap:12px}
ul.rules li{grid-template-columns:74px 1fr;gap:12px;font:400 15px/1.45 var(--font);color:var(--text)}
.rk{font:700 13px/1 var(--font);letter-spacing:.04em;padding:5px 0;border-radius:7px;margin-top:2px}
.rk-should{border:0}
.rk-may{border:1.5px dashed var(--hair-3);color:var(--text-2)}

/* adjust sheet */
.sheet .stepper{padding:16px 0}
.sheet .stepper .lbl b{font:600 17px/1.3 var(--font)}
.sheet .stepper .lbl span{font:400 14px/1.3 var(--font);color:var(--text-2)}
.sheet .stepper .ctl .v{font:800 26px/1 var(--font);font-variant-numeric:tabular-nums;min-width:72px}
.sheet .stepper .ctl button{font-size:26px}
.sheet .stepper .ctl button:active{background:var(--card-3)}

/* ============================== 5. KNOW YOUR SIGN ============================== */
.kys{padding:16px var(--page) 0;gap:12px}
.kcard{border:0;border-radius:var(--r-l)}
.kcard .top{font:700 13px/1.3 var(--font);letter-spacing:.06em;padding:12px 16px}
.kcard.good .top{color:var(--green-t)}
.kcard.good .top .v{color:#fff}
.kcard.bad .top{color:var(--red-t)}
.kcard.bad .top .v{color:#fff}
.kcard .plate{background:var(--plate);border-radius:14px}
.kcard .info b{font:700 20px/1.25 var(--font);letter-spacing:-.01em}
.kcard .info .cd{font:500 14px/1.3 var(--font);color:var(--text-3)}
.kcard .info p{font:400 16px/1.45 var(--font);color:var(--text-2)}

/* ============================== 6. LOADOUT ============================== */
/* the bar already says "2 of 3 · Equipment"; the big title is the title */
body [data-screen=loadout] .appbar .ttl{font-size:0;line-height:0}
[data-screen=loadout] .appbar .ttl small{font:600 14px/1.2 var(--font);color:var(--text-2)}
.progressline{margin:20px var(--page) 0;padding:0 4px;gap:12px}
.progressline .track{height:8px}
.progressline span{font:700 17px/1 var(--font);font-variant-numeric:tabular-nums;color:var(--text)}
.lo-list{gap:0;padding:14px var(--page) 0}
.lo{grid-template-columns:68px 1fr 32px;gap:12px;min-height:76px;padding:14px 16px;border:0;border-radius:0;background:var(--card)}
.lo + .lo{box-shadow:inset 0 1px 0 var(--hair)}
.lo:first-child{border-top-left-radius:var(--r-l);border-top-right-radius:var(--r-l)}
.lo:last-child{border-bottom-left-radius:var(--r-l);border-bottom-right-radius:var(--r-l)}
.lo:not([data-static]):active{background:var(--card-2)}
.lo .q{font:800 34px/1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--text)}
.lo .q.word{font:700 15px/1.2 var(--font);letter-spacing:0;color:var(--text)}
.lo .q.tcp{font:700 13px/1.25 var(--font);letter-spacing:0;color:var(--amber-t);overflow-wrap:anywhere}
.lo .q.qopt{font:700 13px/1.25 var(--font);letter-spacing:0;color:var(--text-2);overflow-wrap:anywhere}
.lo .n{font:600 17px/1.3 var(--font);letter-spacing:-.01em}
.lo .x{font:400 14px/1.35 var(--font);color:var(--text-2)}
.lo .tick{border:2px solid var(--hair-3);border-radius:10px}
.lo.on{background:var(--green-soft)}
.lo.on .tick{color:#fff}
.lo.optional{background:var(--card);border:0}

/* ============================== 7. VERIFY ============================== */
.verhead{margin:12px var(--page) 0;padding:16px;gap:16px;border:0;border-radius:var(--r-l)}
.verhead.ready{background:var(--green-soft)}
.verhead b{font:700 20px/1.25 var(--font);letter-spacing:-.01em}
.verhead span{font:400 15px/1.4 var(--font);color:var(--text-2)}
.verhead.ready b{color:var(--green-t);letter-spacing:.02em}
.verhead .ring .num{font:800 20px/1 var(--font);font-variant-numeric:tabular-nums;color:var(--text)}
.ckgroup{padding:0 var(--page)}
.ckgroup h4{margin:28px 4px 8px;font:600 13px/1.3 var(--font);letter-spacing:.06em;color:var(--text-3)}
.ckgroup h4 span{font:700 14px/1.2 var(--font);letter-spacing:0;color:var(--text-2)}
.ck{min-height:64px;margin:0;padding:14px 16px;border:0;border-radius:0;background:var(--card);font:500 17px/1.35 var(--font);color:var(--text)}
.ck + .ck{box-shadow:inset 0 1px 0 var(--hair)}
.ckgroup h4 + .ck{border-top-left-radius:var(--r-l);border-top-right-radius:var(--r-l)}
.ck:last-child{border-bottom-left-radius:var(--r-l);border-bottom-right-radius:var(--r-l)}
.ck:active{background:var(--card-2)}
.ck .box{width:30px;height:30px;border-radius:9px}
.ck.on{background:var(--card);color:var(--text-2)}
.ck.on .box{color:#fff}
[data-screen=verify] .cta .btn.green{background:var(--green-t)}  /* white on the lighter green is under 4.5:1 */

/* ============================== 8. LOG, LOGGED, CLOSED ============================== */
[data-screen=log] .review{margin:16px var(--page) 0;border:0;border-radius:var(--r-l)}
[data-screen=log] .rv{padding:14px 16px;font:400 16px/1.35 var(--font);border-top-color:var(--hair)}
[data-screen=log] .rv span{color:var(--text-2);flex:none}
[data-screen=log] .rv b{font-weight:600;color:var(--text);min-width:0;overflow-wrap:anywhere}
[data-screen=log] .rv b span{color:var(--green-t)!important}  /* inline green in the markup is too light on white */
[data-screen=log] .subhead .faint{text-transform:none;letter-spacing:0;font-weight:500}
:is([data-screen=log],[data-screen=job]) .photos{padding:0 var(--page);gap:8px}
:is([data-screen=log],[data-screen=job]) .photo{width:96px;height:96px;border:0;border-radius:var(--r)}
:is([data-screen=log],[data-screen=job]) .photo.add{background:var(--card);border:1.5px dashed var(--hair-3);color:var(--text)}
:is([data-screen=log],[data-screen=job]) .photo.add div{font:600 13px/1.2 var(--font);gap:6px}

:is([data-screen=logged],[data-screen=closed]) .done-screen{padding-left:var(--page);padding-right:var(--page)}
:is([data-screen=logged],[data-screen=closed]) .done-screen h1{font:var(--t-large);letter-spacing:-.025em}
:is([data-screen=logged],[data-screen=closed]) .done-screen .time{font:500 17px/1.3 var(--font);font-variant-numeric:tabular-nums;color:var(--text-2);margin-top:8px}
:is([data-screen=logged],[data-screen=closed]) .done-screen .sum{border:0;border-radius:var(--r-l);padding:20px}
:is([data-screen=logged],[data-screen=closed]) .done-screen .sum b{font:700 20px/1.3 var(--font);letter-spacing:-.01em;overflow-wrap:anywhere}
:is([data-screen=logged],[data-screen=closed]) .done-screen .sum > span:not(.status){display:block;font:400 15px/1.4 var(--font);color:var(--text-2);margin-top:4px}
:is([data-screen=logged],[data-screen=closed]) .done-screen .status{font:700 13px/1 var(--font);letter-spacing:.05em;padding:6px 10px;border-radius:8px}
:is([data-screen=logged],[data-screen=closed]) .done-screen .status.active{color:var(--green-t)}
/* one primary: the first action */
:is([data-screen=logged],[data-screen=closed]) .done-screen .acts .btn.light{background:var(--orange);color:var(--orange-ink)}
:is([data-screen=logged],[data-screen=closed]) .done-screen .acts .btn.light:active{background:var(--orange-2)}
:is([data-screen=logged],[data-screen=closed]) .okmark::after{border-color:var(--hair-3)}

/* ============================== 9. JOB RECORD ============================== */
[data-screen=job] .jobcard{padding:16px}
[data-screen=job] .jobcard .faint{color:var(--text-2)}
[data-screen=job] .jobcard .loc{font:700 22px/1.25 var(--font);letter-spacing:-.015em;margin:12px 0 0;overflow-wrap:anywhere}
[data-screen=job] .jobcard .meta{font:400 15px/1.4 var(--font);color:var(--text-2);margin-top:8px}
[data-screen=job] .jobcard .status.active{color:var(--green-t)}
[data-screen=job] .jobcard .acts{gap:8px;margin-top:16px}
[data-screen=job] .jobcard .acts .btn{min-height:52px;padding:0 10px;border-radius:var(--r-pill);font:600 15px/1.15 var(--font)}
[data-screen=job] .jobcard .acts .btn[data-closejob]{color:var(--red-t)!important}  /* inline red in the markup is too light on the gray button */

/* ============================== 10. HISTORY ============================== */
[data-screen=history] .appbar .ttl{font-weight:800}
[data-screen=history] .filter{gap:8px;padding:4px var(--page) 0}
[data-screen=history] .filter button{height:44px;padding:0 18px;border:0;background:var(--card);box-shadow:0 0 0 1px var(--hair);font:600 15px/1 var(--font);color:var(--text-2)}
[data-screen=history] .filter button[aria-pressed="true"]{background:var(--paper);color:var(--paper-ink);box-shadow:none}
[data-screen=history] .daygroup h4{margin:28px calc(var(--page) + 4px) 8px;font:600 13px/1.3 var(--font);letter-spacing:.06em;color:var(--text-3)}
[data-screen=history] .hrow{display:grid;grid-template-columns:auto 1fr;align-items:start;column-gap:12px;row-gap:8px;min-height:76px;margin:0 var(--page);width:calc(100% - 2 * var(--page));padding:14px 16px;border:0;border-radius:0;background:var(--card)}
[data-screen=history] .hrow .status{grid-column:2;justify-self:start}
[data-screen=history] .hrow + .hrow{box-shadow:inset 0 1px 0 var(--hair)}
[data-screen=history] .daygroup h4 + .hrow{border-top-left-radius:var(--r-l);border-top-right-radius:var(--r-l)}
[data-screen=history] .hrow:last-child{border-bottom-left-radius:var(--r-l);border-bottom-right-radius:var(--r-l)}
[data-screen=history] .hrow:active{background:var(--card-2)}
[data-screen=history] .hrow .tm{width:auto;min-width:72px;padding-top:1px;font:600 15px/1.3 var(--font);font-variant-numeric:tabular-nums;color:var(--text)}
[data-screen=history] .hrow b{font:600 17px/1.3 var(--font);letter-spacing:-.01em;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
[data-screen=history] .hrow .sub{font:400 14px/1.35 var(--font);color:var(--text-2)}
[data-screen=history] .hrow .sub2{font:400 13px/1.35 var(--font);color:var(--text-3)}
[data-screen=history] .hrow .status{font:700 13px/1 var(--font);letter-spacing:.04em;padding:6px 9px;border-radius:8px}
[data-screen=history] .hrow .status.active{color:var(--green-t)}

@media (prefers-reduced-motion:reduce){ .vcard,.vcard .check,.dn,.dn .lab .check,.lo,.ck,.spdsign{transition:none!important;animation:none!important} }

/* --- 40-guide.css --- */
/* ============================================================================
   40-guide: Field Guide tab (fguide, fgop, fgitem), sign library (signs, sign,
   compare), equipment, "how setups work" guide, sign viewer and sheet viewer.
   Shared classes (.hti, .tcp, .opcard, .hcard) are only touched inside these screens.
   ============================================================================ */

/* ---- 1. root screens: bar controls on top, one large title under them ---- */
.screen:is([data-screen="fguide"],[data-screen="signs"]) > .appbar{position:static;flex-wrap:wrap;gap:4px 8px;background:var(--bg)}
@media (max-width:1099px){ .screen:is([data-screen="fguide"],[data-screen="signs"]) > .appbar{padding-left:var(--page);padding-right:var(--page)} }
.screen:is([data-screen="fguide"],[data-screen="signs"]) > .appbar .langsw{order:-1;margin:0 0 0 auto}
.screen:is([data-screen="fguide"],[data-screen="signs"]) > .appbar .ttl{flex:0 0 100%;font:var(--t-large)!important;letter-spacing:-.025em!important;text-align:left;overflow-wrap:anywhere} /* !important: the markup carries an inline font-size */
.screen[data-screen="fguide"] > .lede{font:var(--t-body);color:var(--text-2);padding:0 var(--page);margin:4px 0 0}
.screen:is([data-screen="fguide"],[data-screen="signs"]) > .search{margin:16px var(--page) 0}
.screen[data-screen="signs"] > .search{margin-top:8px}

/* ---- 2. shared pieces inside the guide screens ---- */
/* decorative icon tiles are neutral, 40px */
.screen:is([data-screen="fguide"],[data-screen="fgop"],[data-screen="fgitem"]) .hti,
.screen:is([data-screen="fguide"],[data-screen="fgop"],[data-screen="fgitem"]) .hti.sm{width:40px;height:40px;border-radius:12px;background:var(--bg-1);color:var(--text-2)}
.screen:is([data-screen="fguide"],[data-screen="fgop"],[data-screen="fgitem"]) .hti .ico{width:22px;height:22px}
.screen:is([data-screen="fguide"],[data-screen="fgop"],[data-screen="fgitem"]) .opt > .ico{color:var(--text-3);flex:none}
/* "approved plan takes precedence" line: a quiet footnote, not a box */
.screen:is([data-screen="fguide"],[data-screen="fgop"],[data-screen="fgitem"],[data-screen="equipment"]) .tcp{background:transparent;border:0;border-radius:0;padding:0 4px;align-items:flex-start;gap:10px;font:var(--t-sub);color:var(--text-2)}
.screen:is([data-screen="fguide"],[data-screen="fgop"],[data-screen="fgitem"],[data-screen="equipment"]) .tcp .ico{color:var(--text-3);flex:none;margin-top:1px}
.screen:is([data-screen="fguide"],[data-screen="fgop"],[data-screen="fgitem"],[data-screen="equipment"]) .pad:has(> .tcp){margin-top:24px!important} /* !important: inline margin */

/* ---- 3. Field Guide root: operations as large picture rows ---- */
.fgops{gap:12px;padding:0 var(--page)}
.fgop{display:block;padding:0;border:0;border-radius:var(--r-l);overflow:hidden;background:var(--card);width:100%}
.fgop:active{background:var(--card-2)}
.fgop .dia{display:block;border-radius:0}
.fgop .dia svg{display:block;width:100%;height:auto}
.fgb{display:block;position:relative;padding:14px 44px 16px 16px}
.fgb::after{content:"";position:absolute;right:20px;top:20px;width:9px;height:9px;border-top:2px solid var(--text-3);border-right:2px solid var(--text-3);transform:rotate(45deg)}
.fgb b{font:600 18px/1.25 var(--font);letter-spacing:-.015em;color:var(--text)}
.fgb span{font:400 15px/1.4 var(--font);color:var(--text-2);margin-top:3px}
.fgb .faint{font:500 13px/1.35 var(--font);color:var(--text-3);margin-top:6px}

/* tools: one grouped list of rows with line icons */
.tools,.tools.pad{display:block;padding:0;margin:0 var(--page);background:var(--card);border-radius:var(--r-l);overflow:hidden}
.tool{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;width:100%;min-height:68px;padding:12px 16px;border:0;border-radius:0;background:transparent}
.tool + .tool{box-shadow:inset 0 1px 0 var(--hair)}
.tool.press:active{transform:none;background:var(--card-2)}
.tool .ic{width:40px;height:40px;border-radius:12px;background:var(--bg-1);color:var(--text-2);flex:none}
.tool .ic .ico{width:22px;height:22px}
.tool > span:last-child{flex:1;min-width:0}
.tool b{font:600 17px/1.3 var(--font);letter-spacing:-.01em;margin-top:0;color:var(--text)}
.tool b + span{font:400 14px/1.35 var(--font);color:var(--text-2);margin-top:2px}
.tool::after{content:"";flex:none;width:9px;height:9px;margin:0 6px 0 4px;border-top:2px solid var(--text-3);border-right:2px solid var(--text-3);transform:rotate(45deg)}

/* ---- 4. reference sheet rows: consecutive rows share one surface ---- */
.sheetcard{margin:12px var(--page) 0;width:calc(100% - 2 * var(--page));padding:12px 16px 12px 12px;gap:14px;border:0;border-radius:var(--r-l);background:var(--card);min-height:var(--row)}
.sheetcard .sthumb{width:66px;height:86px;border-radius:8px;box-shadow:0 0 0 1px var(--hair-2)}
.sheetcard .sbody{gap:2px;min-width:0}
.sheetcard .eyebrow{font:600 13px/1.3 var(--font);letter-spacing:.04em;color:var(--text-3)}
.sheetcard .eyebrow.o{color:var(--text-3)}
.sheetcard b{font:600 17px/1.3 var(--font);letter-spacing:-.01em;color:var(--text)}
.sheetcard .d{font:400 14px/1.35 var(--font);color:var(--text-2)}
.sheetcard .d.warn{color:var(--amber-t);font-weight:600}
.sheetcard > .ico{color:var(--text-3);flex:none}
.sheetcard + .sheetcard{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;box-shadow:inset 0 1px 0 var(--hair)}
.sheetcard:has(+ .sheetcard){border-bottom-left-radius:0;border-bottom-right-radius:0}
.sheetcard.press:active{transform:none;background:var(--card-2)}
/* in the guide lists the same hint under every row is noise: the note under the list says it once */
.screen:is([data-screen="fguide"],[data-screen="fgop"],[data-screen="fgitem"]) .sheetcard .d:not(.warn){display:none}
.screen:is([data-screen="fguide"],[data-screen="fgop"],[data-screen="fgitem"]) .subhead + .sheetcard{margin-top:0}

/* ---- 5. one operation (fgop): large title, picture, one primary action, lists ---- */
.screen[data-screen="fgop"]:has(.opcard) > .appbar .ttl{visibility:hidden} /* the large title below says it */
.screen[data-screen="fgop"] .opcard{display:flex;flex-direction:column;margin:8px var(--page) 0!important;background:transparent;border:0;border-radius:0;overflow:visible} /* !important: inline margin */
.screen[data-screen="fgop"] .opcard .body{order:-1;padding:0 0 20px}
.screen[data-screen="fgop"] .opcard .t{font:var(--t-large);letter-spacing:-.025em}
.screen[data-screen="fgop"] .opcard .d{font:var(--t-body);color:var(--text-2);margin-top:8px}
.screen[data-screen="fgop"] .opcard .dia{border:0;border-radius:var(--r-l);overflow:hidden}
.screen[data-screen="fgop"] .opcard .dia svg{display:block}
.screen[data-screen="fgop"] .opcard + .pad{margin-top:16px!important}
.screen[data-screen="fgop"] p.faint.pad{font:var(--t-sub)!important;color:var(--text-2);padding:0 calc(var(--page) + 4px);margin:0}
.screen[data-screen="fgop"] .eyebrow.pad{font:600 15px/1.3 var(--font);letter-spacing:0;text-transform:none;color:var(--text);padding:0 calc(var(--page) + 4px);margin:20px 0 8px!important}
.screen[data-screen="fgop"] .subhead + .eyebrow.pad{margin-top:0!important}
.screen[data-screen="fgop"] .eyebrow.pad + .sheetcard{margin-top:0}

/* ---- 6. one guide item (fgitem): title, photos, steps and facts in grouped surfaces ---- */
.screen[data-screen="fgitem"] .wz-head{padding:8px var(--page) 0}
.screen[data-screen="fgitem"] .wz-head .step{display:none} /* the bar already names the operation */
.screen[data-screen="fgitem"] .wz-head .h2{margin-top:0}
.screen[data-screen="fgitem"] .wz-head .hchip{margin-top:12px!important}
.screen[data-screen="fgitem"] .hcard,.screen[data-screen="fgitem"] .hcard.nomargin{margin:0 var(--page);padding:16px;border:0;border-radius:var(--r-l)}
.screen[data-screen="fgitem"] .hcard.prose{margin-top:12px}
.screen[data-screen="fgitem"] .hcard p{font:var(--t-body);color:var(--text)}
.eqck{gap:12px}
.eqck li{font:var(--t-body);gap:12px;align-items:flex-start}
.eqck .ico{color:var(--green-t);flex:none;margin-top:3px}
.fgimgs{gap:12px;padding:0 var(--page)}
.fgimg{border:0;border-radius:var(--r);background:var(--card)}
.fgimg span{font:var(--t-cap);color:var(--text-2);padding:8px 12px 10px}
.screen[data-screen="fgitem"] .pad:has(> .btn){margin-top:12px!important}
.screen[data-screen="fgitem"] :is(.hcard,.gsteps,.sheetcard,.fgimgs) + .pad:has(> .btn){margin-top:24px!important}

/* numbered steps (fgitem and the setup guide): one grouped surface */
.gsteps{margin:24px var(--page) 0;border:0;border-radius:var(--r-l);background:var(--card)}
.subhead + .gsteps{margin-top:0}
.gstep{min-height:var(--row);padding:12px 16px;gap:14px;border-top:1px solid var(--hair)}
.gstep span{font:var(--t-body);color:var(--text)}
.gstep .n{width:30px;height:30px;background:var(--bg-1);font:600 15px/1 var(--font);color:var(--text-2)}

/* ---- 7. sign library: two-column picture grid ---- */
.sgrid{gap:12px;padding:16px var(--page) 0}
.scard{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:8px 8px 14px;border:0;border-radius:var(--r-l);background:var(--card)}
.scard:active{background:var(--card-2)}
.scard .plate{background:var(--plate);border-radius:14px;padding:14px}
.scard .cd{font:600 14px/1.3 var(--font);letter-spacing:.02em;color:var(--text-2);margin:12px 8px 0;font-variant-numeric:tabular-nums}
.scard b{font:600 16px/1.25 var(--font);letter-spacing:-.01em;color:var(--text);margin:2px 8px 0;overflow-wrap:anywhere}
.sgrid .card.empty{background:transparent}

/* ---- 8. sign detail: code and large title, the picture, then facts ---- */
.sdetail{display:flex;flex-direction:column}
.sdetail .meta{order:-1;padding:0 var(--page)}
.sdetail .meta .cd{font:600 15px/1.3 var(--font);letter-spacing:.02em;color:var(--text-2)}
.sdetail .meta h1{margin-top:2px}
.sdetail > .plate{margin:20px var(--page) 0;padding:28px;background:var(--plate);border-radius:var(--r-l)}
.sdetail > .plate svg{width:min(70%,250px)}
.sdetail .plate .zoom{right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:var(--card);color:var(--text)}
.sdetail .plate .zoom .ico{width:22px;height:22px}
.sdetail .use{margin:12px var(--page) 0;padding:16px;border:0;border-radius:var(--r-l);background:var(--card)}
.sdetail .use b{font:600 13px/1.3 var(--font);letter-spacing:.06em;color:var(--text-3);margin-bottom:6px}
.sdetail .use p{font:var(--t-body);color:var(--text)}
.sdetail .subhead{margin-top:32px!important} /* !important: inline margin */
.confused{gap:0;padding:0;margin:0 var(--page);background:var(--card);border-radius:var(--r-l);overflow:hidden}
.crow{min-height:84px;padding:10px 12px 10px 10px;gap:14px;border:0;border-radius:0;background:transparent}
.crow + .crow{box-shadow:inset 0 1px 0 var(--hair)}
.crow.press:active{transform:none;background:var(--card-2)}
.crow .plate{background:var(--plate);border-radius:12px;margin:0;padding:6px}
.crow .plate svg{width:100%}
.crow b{font:600 17px/1.3 var(--font);letter-spacing:-.01em}
.crow span{font:500 14px/1.3 var(--font);color:var(--text-2)}
.crow .cmp{font:600 15px/1 var(--font);color:var(--text-2);gap:2px}
.crow .cmp .ico{color:var(--text-3)}

/* ---- 9. compare two signs ---- */
.compare{gap:12px;padding:8px var(--page) 0}
.compare .col{border:0;border-radius:var(--r-l);background:var(--card)}
.compare .col .plate{background:var(--plate);padding:16px}
.compare .col .i{padding:12px 14px 16px}
.compare .col .i .cd{font:600 14px/1.3 var(--font);letter-spacing:.02em;color:var(--text-2)}
.compare .col .i b{font:600 17px/1.25 var(--font);letter-spacing:-.01em;margin-top:2px;overflow-wrap:anywhere}
.compare .col .i p{font:400 15px/1.45 var(--font);color:var(--text-2);margin-top:8px}
.diffnote{margin:12px var(--page) 0;padding:16px;border:0;border-radius:var(--r-l);background:var(--card);font:var(--t-body);color:var(--text)}
.diffnote b{display:block;font:600 17px/1.3 var(--font);margin-bottom:4px}

/* ---- 10. equipment: grouped rows with picture, name, key spec, description ---- */
.eqlist{gap:0;padding:0;margin:24px var(--page) 0;background:var(--card);border-radius:var(--r-l);overflow:hidden}
.eqi{padding:16px;gap:14px;border:0;border-radius:0;background:transparent}
.eqi + .eqi{box-shadow:inset 0 1px 0 var(--hair)}
.eqi .g{width:56px;height:56px;border-radius:14px;background:var(--bg-1);color:var(--text-2)}
.eqi .g .ico{color:var(--text-2)}
.eqi b{font:600 17px/1.3 var(--font);letter-spacing:-.01em;color:var(--text)}
.eqi .s{font:600 15px/1.35 var(--font);color:var(--text-2);margin-top:3px}
.eqi p{font:400 15px/1.45 var(--font);color:var(--text-3);margin-top:6px}

/* ---- 11. how setups work ---- */
.screen:is([data-screen="guide"],[data-screen="equipment"]) .wz-head{padding:8px var(--page) 0}
.screen:is([data-screen="guide"],[data-screen="equipment"]) .wz-head .h2{margin-top:0}
.screen[data-screen="guide"] .opcards{gap:12px;padding:24px var(--page) 0}
.screen[data-screen="guide"] .opcard{border:0;border-radius:var(--r-l);background:var(--card)}
.screen[data-screen="guide"] .opcard .dia{border:0}
.screen[data-screen="guide"] .opcard .dia svg{display:block}
.screen[data-screen="guide"] .opcard .body{padding:14px 16px 16px;gap:0}
.screen[data-screen="guide"] .opcard .t{font:600 18px/1.25 var(--font);letter-spacing:-.015em}
.screen[data-screen="guide"] .opcard .d{font:400 15px/1.4 var(--font);color:var(--text-2);margin-top:3px}
.screen[data-screen="guide"] .opcard .why{font:500 13px/1.35 var(--font);color:var(--text-3);margin-top:6px}
.screen[data-screen="guide"] .opcards + .pad{margin-top:24px!important}

/* ---- 12. picture viewers stay dark; controls and text follow the system ---- */
.viewer:not(.infosheet){background:#100F0C}
.viewer .vtop{padding:calc(8px + var(--sat)) 16px 0}
.viewer .vtop .iconbtn{width:48px;height:48px;background:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.viewer .vtop .iconbtn:active{background:rgba(255,255,255,.3)}
.viewer .vplate{background:var(--plate);border-radius:var(--r-xl);padding:28px}
.viewer .vcap .cd{font:600 15px/1.3 var(--font);letter-spacing:.02em;color:rgba(255,255,255,.72)}
.viewer .vcap b{font:700 24px/1.2 var(--font);letter-spacing:-.02em;color:#fff}
.viewer .vcap p{font:400 16px/1.45 var(--font);color:rgba(255,255,255,.8)}
.sheetview{background:#100F0C}
.sheetview .vtop{padding-bottom:0}
.sheetview .vt{font:600 15px/1.3 var(--font);color:#fff;padding-left:4px}
.sheetscroll{margin-top:8px}
.sheethint{font:500 13px/1.35 var(--font);color:rgba(255,255,255,.72);padding:12px 16px calc(12px + var(--sab,0px))}

/* ---- 13. wide screens (crew on a computer): more sign tiles per row ---- */
@media (min-width:1100px){
  body.navon .sgrid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  body.navon .screen:is([data-screen="fguide"],[data-screen="signs"]) > .appbar .ttl{font:var(--t-large)!important}
}

/* --- 50-hub.css --- */
/* ============================================================================
   50-hub. Jobs and hub area: My Assignments, one assignment (crew and leader),
   Reports, Learning Center, Toolbox Talks, Help and Resources, Updates, My hours.
   Everything here only places and tunes the shared components.
   ============================================================================ */
:root{
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* ---- 1. shared pieces of this area ---- */
/* one large title per screen: the bar title repeats the big title on these, so the bar keeps only its buttons */
.screen[data-screen=hforms]:has(.wz-head .h2) .appbar .ttl,
.screen[data-screen=learn]:has(.wz-head .h2) .appbar .ttl,
.screen[data-screen=talks]:has(.wz-head .h2) .appbar .ttl,
.screen[data-screen=talkrec]:has(.wz-head .h2) .appbar .ttl,
.screen[data-screen=help]:has(.wz-head .h2) .appbar .ttl,
.screen[data-screen=updates]:has(.wz-head .h2) .appbar .ttl,
.screen[data-screen=hours]:has(.wz-head .h2) .appbar .ttl{visibility:hidden}

.wz-head{padding:8px var(--page) 0}
.wz-head .h2{margin-top:0}
.wz-head .step{font:600 13px/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.wz-head .hchip{margin-top:12px}

/* status chip: one word, sentence case, color plus the word */
.hchip{height:28px;padding:0 12px;gap:5px;border-radius:var(--r-pill);font:600 13px/1 var(--font);letter-spacing:0;text-transform:none;background:var(--bg-1);color:var(--text-2)}
.hchip .ico{width:15px;height:15px;stroke-width:2.4}
.hchip.new{background:var(--orange);color:var(--orange-ink)}
.hchip.upd{background:var(--amber-soft);color:var(--amber-t)}
.hchip.can{background:var(--red-soft);color:var(--red-t)}
.hchip.rem{background:var(--bg-1);color:var(--text-2)}
.hchip.ok{background:var(--green-soft);color:var(--green-t)}
.hchip.go{background:var(--blue-soft);color:var(--blue-t)}
.hchip.done{background:var(--bg-1);color:var(--text)}
/* a single chip: once work has a status, that word replaces "Acknowledged" */
.hjchips .hchip.ok:has(+ .hchip){display:none}

/* icon tile */
.hti{width:40px;height:40px;border-radius:12px;background:var(--bg-1);color:var(--text-2)}
.hti.sm{width:40px;height:40px;border-radius:12px}
.hti .ico{width:22px;height:22px}

/* rows in a grouped list: 60px, icon tile, neutral chevron */
.screen .stack > .opt{min-height:var(--row)}
.opt > .ico.sm:last-child{color:#8C877D;flex:none}
.stack > .btn.text{justify-self:start;margin-top:-4px}
/* a section with nothing in it shows no label */
.screen[data-screen=ajob] .subhead:has(+ .stack):not(:has(+ .stack > *)){display:none}

/* text surfaces */
.hcard{margin:12px var(--page) 0;padding:16px 20px;border:0;border-radius:var(--r-l);background:var(--card)}
.hcard.nomargin{margin:0 var(--page)}
.wz-head + .hcard.nomargin,.vid + .hcard.nomargin{margin-top:20px}
.hcard p{font:var(--t-body);color:var(--text);margin:0 0 12px}
.hcard .h3{font:var(--t-head);font-size:20px;letter-spacing:-.015em;margin:4px 0 8px}
.prose p{line-height:1.5}
.eqck{gap:0}
.eqck li{gap:12px;align-items:flex-start;font:var(--t-body);padding:10px 0;box-shadow:inset 0 1px 0 var(--hair)}
.eqck li:first-child{box-shadow:none;padding-top:2px}
.eqck li:last-child{padding-bottom:2px}
.eqck .ico{color:var(--text-3);margin-top:3px;width:18px;height:18px;flex:none}
.tkq{font:var(--t-body);gap:12px;padding-left:24px}

/* quiet footnotes: plain copy, no gray box */
.screen[data-screen=hforms] .tcp,.screen[data-screen=hours] .tcp{background:transparent;border:0;border-radius:0;padding:0 4px;font:var(--t-sub);color:var(--text-2);align-items:flex-start}
.screen[data-screen=hforms] .tcp .ico,.screen[data-screen=hours] .tcp .ico{display:none}
.screen > p.faint.pad{font:var(--t-sub)!important;color:var(--text-2);padding:0 calc(var(--page) + 4px);margin-top:12px}
.screen > p.faint.pad .ico{display:inline-block;vertical-align:-3px;margin-right:4px;color:var(--text-3)}

/* empty and loading states sit on the page, not in a box */
.screen > .card.empty,.screen #lnl > .card.empty,.screen #tkl > .card.empty{background:transparent;margin:8px var(--page) 0!important}

/* search and filters */
.search{margin:20px var(--page) 0}
.search .input .ico{color:var(--text-3)}

/* forms on a page or in a sheet */
.hform{gap:20px;padding:20px var(--page) 0}
.hf{gap:8px;font:600 15px/1.3 var(--font);color:var(--text)}
.hf small{font:var(--t-sub);color:var(--text-2)}
.hf input,.hf select,.hf textarea,.hta{min-height:var(--tap);padding:14px 16px;border-radius:var(--r);background-color:var(--card);border:1.5px solid var(--hair-2);font-size:17px;color:var(--text)}
.hf textarea,.hta{min-height:104px}
.hf input:focus,.hf select:focus,.hf textarea:focus,.hta:focus{border-color:var(--orange);box-shadow:0 0 0 4px var(--orange-soft)}
.hta{margin-top:16px}
.hf input:focus-visible,.hf select:focus-visible,.hf textarea:focus-visible,.hta:focus-visible{outline:0}
.hta::placeholder,.hf textarea::placeholder{color:var(--text-3)}
.checks{gap:0;border-radius:var(--r-l);background:var(--card);overflow:hidden}
.chk{min-height:var(--row);align-items:center;gap:14px;padding:12px 16px;border:0;border-radius:0;background:transparent;font:500 17px/1.3 var(--font)}
.chk + .chk{box-shadow:inset 0 1px 0 var(--hair)}
.chk:active{background:var(--card-2)}
.chk input{width:26px;height:26px;min-height:0;margin:0;padding:0;border-radius:6px}
.errmsg{font:500 15px/1.4 var(--font);color:var(--red-t);background:var(--red-soft);border-radius:var(--r);padding:14px 16px}
.infomsg{font:500 15px/1.4 var(--font);border:0;border-radius:var(--r);padding:14px 16px;background:var(--amber-soft);color:var(--amber-t);align-items:center}
.infomsg.ok{background:var(--green-soft);color:var(--green-t)}
.seg.seg3in{margin:16px 0 0!important}
.seg.seg3in button{height:48px;font-size:15px;padding:0 4px}
.sheet .acts{gap:8px;margin-top:24px}
.sheet .review{margin:16px 0 0}

/* ---- 2. My Assignments ---- */
/* the bar keeps the language switch; the large title sits on its own line under it */
.screen[data-screen=assign] .appbar{flex-wrap:wrap;justify-content:flex-end;row-gap:4px;padding-left:var(--page);padding-right:var(--page);padding-bottom:12px}
.screen[data-screen=assign] .appbar .ttl{order:2;flex:0 0 100%;font:var(--t-large)!important;letter-spacing:-.025em!important}
.screen[data-screen=assign] .appbar .langsw{margin-right:0}
.seg3{gap:0;padding:4px;margin:4px var(--page) 0;border:0;border-radius:var(--r);background:var(--bg-1)}
.seg3 button{height:48px;border-radius:12px;font:600 15px/1 var(--font);color:var(--text-2);gap:6px;padding:0 4px;min-width:0}
.seg3 button[aria-pressed="true"]{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(40,32,18,.12)}
.seg3 .dot{min-width:22px;height:22px;font:700 13px/1 var(--font)}

.hjobs{gap:12px;padding:16px var(--page) 0}
.hjob{display:flex;flex-direction:column;padding:20px;border:0;border-radius:var(--r-l);background:var(--card);color:var(--text)}
.hjob:active{background:var(--card-2)}
/* needs your OK: accent ring plus the word */
.hjob.new,.hjob.updated{box-shadow:inset 0 0 0 2px var(--orange)}
.hjob.cancelled,.hjob.removed{opacity:1}
.hjob.cancelled .hjop,.hjob.removed .hjop{text-decoration:none}
.hjob.cancelled .hjdate,.hjob.removed .hjdate{text-decoration:line-through;text-decoration-thickness:2px;color:var(--text-2)}
.hjob.cancelled .hjaddr,.hjob.removed .hjaddr{color:var(--text-2)}
.hjtop{flex-direction:column-reverse;align-items:flex-start;gap:12px;flex-wrap:nowrap}
.hjchips:empty{display:none}
.hjdate{display:block;font:700 22px/1.2 var(--font);letter-spacing:-.02em;color:var(--text);overflow-wrap:anywhere}
.hjdate .ico{display:none}
.hjaddr{order:2;margin-top:8px;gap:8px;font:400 17px/1.35 var(--font);color:var(--text)}
.hjaddr .ico{width:18px;height:18px;margin-top:3px;color:var(--text-3)}
.hjop{order:3;margin-top:14px;padding-top:14px;box-shadow:inset 0 1px 0 var(--hair);font:600 15px/1.3 var(--font);letter-spacing:0;color:var(--text)}
.hjmeta{order:4;margin-top:4px;gap:2px 16px;font:400 15px/1.4 var(--font);color:var(--text-2)}
.hjmeta .ico{width:16px;height:16px;color:var(--text-3)}

/* ---- 3. One assignment ---- */
/* alerts: status color, an icon and the words */
.hban{gap:12px;margin:8px var(--page) 0;padding:16px;border:0;border-radius:var(--r);color:var(--text)}
.hban > .ico{width:24px;height:24px;margin-top:0}
.hban b{font:700 17px/1.3 var(--font)}
.hban p{font:var(--t-sub);margin:4px 0 0}
.hban.new{background:var(--orange-soft);border:0}
.hban.new > .ico,.hban.new > div > b{color:var(--orange-t)}
.hban.new p{color:var(--text)}
.hban.upd{background:var(--amber-soft);border:0;color:var(--text)}
.hban.upd > .ico,.hban.upd > div > b{color:var(--amber-t)}
.hban.upd p,.hban.upd li{color:var(--text)}
.hban.can{background:var(--red-soft);border:0}
.hban.can > .ico,.hban.can > div > b{color:var(--red-t)}
.hban.can p{color:var(--text)}
.hban.rem{background:var(--bg-1);border:0}
.hban.rem > .ico{color:var(--text-2)}
.hban.rem p{color:var(--text-2)}
.chglist{margin:12px 0 0;padding:0;list-style:none;font:var(--t-sub);display:grid;gap:8px}
.chglist li{margin:0;padding-top:8px;box-shadow:inset 0 1px 0 rgba(122,82,0,.2)}
.chglist b{display:inline;font:700 15px/1.4 var(--font)}
.chglist .faint{color:var(--text-2)}
/* the alert already carries the word, so the chip under it is not repeated */
.hban.new ~ .jhead .hchip.new,.hban.upd ~ .jhead .hchip.upd,.hban.can ~ .jhead .hchip.can,.hban.rem ~ .jhead .hchip.rem{display:none}

/* when and where to meet, large */
.jhead{display:flex;flex-direction:column;align-items:flex-start;padding:20px var(--page) 0}
.jhead .hjchips:not(:has(.hchip:not([style]))){display:contents}
.jhead .hjchips{margin-bottom:12px}
.jhead .hjchips:empty{display:none}
.jhead .h2{order:1;margin:0;font:600 15px/1.3 var(--font);letter-spacing:0;color:var(--text-2)}
.jwhen{color:var(--text-2);font:var(--t-body)}
.jdot{display:none}
.jwhen.jday{order:2;display:block;margin-top:4px;color:var(--text)}
.jwhen.jday .ico{display:none}
.jwhen.jday .jd{display:block;font:700 22px/1.2 var(--font);letter-spacing:-.02em;color:var(--text)}
.jwhen.jday .jt{display:block;margin-top:2px;font:var(--t-large);font-size:30px;letter-spacing:-.025em;color:var(--text);text-wrap:balance}
/* this person meets earlier somewhere else: that time leads, the job hours step back */
.jhead:has(.jmeet) .jwhen.jday{order:4;margin-top:10px;font:var(--t-body);color:var(--text-2)}
.jhead:has(.jmeet) .jwhen.jday .jd,.jhead:has(.jmeet) .jwhen.jday .jt{display:inline;font:inherit;letter-spacing:0;color:inherit}
.jhead:has(.jmeet) .jwhen.jday .jdot{display:inline}
.jwhen.jmeet{order:2;display:block;margin-top:4px}
.jwhen.jmeet b{display:block;font:var(--t-large);font-size:30px;letter-spacing:-.025em;color:var(--text);text-wrap:balance}
.jwhen.jmeet .jloc{display:block;margin-top:2px;font:700 22px/1.2 var(--font);letter-spacing:-.02em;color:var(--text)}
.screen[data-screen=ajob]:has(.hban.can) .jwhen b,.screen[data-screen=ajob]:has(.hban.can) .jhead:not(:has(.jmeet)) .jt,.screen[data-screen=ajob]:has(.hban.rem) .jwhen b,.screen[data-screen=ajob]:has(.hban.rem) .jhead:not(:has(.jmeet)) .jt{color:var(--text-2);text-decoration:line-through;text-decoration-thickness:2px}

/* the address with one Directions button */
.jaddr{margin:20px var(--page) 0;padding:20px}
.jaddrt{gap:0;margin-bottom:16px}
.jaddrt > .ico{display:none}
.jaddrt .eyebrow{display:block;font:600 13px/1.3 var(--font);letter-spacing:.06em;color:var(--text-3)}
.jaddrt b{font:600 20px/1.3 var(--font);letter-spacing:-.015em;margin-top:4px}
.jaddr .btn{min-height:var(--tap);font-size:17px}

/* details: grouped key and value list */
.review{margin:12px var(--page) 0;border:0;border-radius:var(--r-l);background:var(--card)}
.rv{gap:16px;padding:14px 20px;min-height:52px;align-items:baseline;border-top:0;box-shadow:inset 0 1px 0 var(--hair);font:var(--t-body)}
.rv:first-child{box-shadow:none}
.rv > span{flex:none;max-width:44%;font:var(--t-sub);color:var(--text-2)}
.rv > span:empty{display:none}
.rv > b{font:600 17px/1.35 var(--font);text-align:right;min-width:0;overflow-wrap:anywhere}
.rv b.faint,.rv b .faint{color:var(--text-2)}
.tellink{color:var(--orange-t);font-weight:600;min-height:44px;margin-left:8px}
.jrev .rv b:has(.tellink){display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;column-gap:4px}
.okc{color:var(--green-t)}

/* crew leader tools: one surface, one section per task */
.hcard.lead{padding:4px 20px}
.lead .lsec{padding:20px 0;border-top:0;box-shadow:inset 0 1px 0 var(--hair)}
.lead .lsec:first-child,.lead #ackFirst + .lsec{box-shadow:none;padding-top:16px}
.lead .lsec > b{font:var(--t-head);display:block}
.lead .lsec p{font:var(--t-sub);color:var(--text-2);margin:4px 0 12px}
.lead .lsec p:last-child{margin-bottom:0}
.lead #ackFirst{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;padding:14px 16px;border-radius:var(--r);background:var(--amber-soft);color:var(--amber-t);font:500 15px/1.4 var(--font)!important}
.lead #ackFirst .ico{flex:none;margin-top:1px}
.lead .btn{padding:0 16px;line-height:1.2}
.lead .btnrow{grid-template-columns:1fr;gap:8px}
.ciinfo{gap:12px;margin:0 0 12px;padding:14px 16px;border-radius:var(--r);background:var(--bg);font:var(--t-sub);color:var(--text)}
.ciinfo > .ico{flex:none;margin-top:2px;color:var(--text-3)}
.ciinfo .faint{color:var(--text-2)}
.ciinfo a{color:var(--orange-t);font-weight:600;display:inline-block;padding:12px 0;margin:-10px 0;overflow-wrap:anywhere}
.attrow{gap:10px;padding:16px 0;border-top:0;box-shadow:inset 0 1px 0 var(--hair)}
.attrow:first-of-type{box-shadow:none;padding-top:4px}
.attn b{font:600 17px/1.3 var(--font)}
.attn span{font:var(--t-cap);color:var(--text-2)}
.attbtns{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.attbtns button{min-height:48px;border:0;border-radius:var(--r-s);background:var(--btn2);font:600 15px/1.15 var(--font);color:var(--text);overflow-wrap:normal}
.attbtns button:active{background:var(--card-3)}
.attbtns button[aria-pressed="true"]{background:var(--paper);color:var(--paper-ink)}
.attbtns button[data-s="absent"][aria-pressed="true"]{background:var(--red);color:#fff}
.attbtns button[disabled]{color:#A19D94}
/* after "I've read this", the leader's next step is the one orange button */
.screen[data-screen=ajob]:not(:has(#ackBtn)) #ciBtn,
.screen[data-screen=ajob]:not(:has(#ackBtn)):not(:has(#ciBtn)) #wStart:not([disabled]),
.screen[data-screen=ajob]:not(:has(#ackBtn)):not(:has(#ciBtn)) .btnrow:has(#wStart[disabled]) #wDone:not([disabled]){background:var(--orange);color:var(--orange-ink)}

/* activity */
.tline{margin:0 var(--page);padding:16px 20px;border-left:0;border-radius:var(--r-l);background:var(--card);gap:0}
.tl{font:var(--t-sub);color:var(--text);padding:10px 0;box-shadow:inset 0 1px 0 var(--hair)}
.tl:first-child{box-shadow:none;padding-top:0}
.tl:last-child{padding-bottom:0}
.tl::before{display:none}
.tlt{font:var(--t-cap);color:var(--text-3)}
.tl .faint{color:var(--text-2)}

/* ---- 4. Reports ---- */
.screen[data-screen=jform] .appbar .ttl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jfbox{margin:0 var(--s2);border-radius:var(--r-l) var(--r-l) 0 0}
.jfload{font:var(--t-sub);color:var(--text-2)}
.jfhelp{font:var(--t-cap);color:var(--text-2);padding:0 16px var(--sab)}
.jfhelp a{color:var(--orange-t);display:inline-flex;align-items:center;min-height:44px;padding:0 6px}

/* ---- 5. Learning Center and Toolbox Talks ---- */
.vid{margin:20px var(--page) 0;border-radius:var(--r-l)}
.tkfeat{width:calc(100% - 2 * var(--page));margin:20px var(--page) 0;padding:20px;gap:8px;border:0;border-radius:var(--r-l);background:var(--card);color:var(--text);position:relative}
.tkfeat:active{background:var(--card-2)}
.tkfeat .eyebrow{font:600 13px/1.3 var(--font);letter-spacing:.06em;color:var(--text-3)}
.tkfeat b{font:700 22px/1.2 var(--font);letter-spacing:-.02em;padding-right:28px}
.tkfeat > span:not(.eyebrow):not(.hchip){font:var(--t-sub);color:var(--text-2)}
.tkfeat:not(.side)::after{content:"";position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-9px;background:#8C877D;-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat}
.screen[data-screen=talks] .subhead + .search{margin-top:0}
.screen[data-screen=talks] #tkl{margin-top:16px!important}

/* ---- 6. Records and requests: grouped rows ---- */
.rprow{margin:0 var(--page);padding:14px 20px;border:0;border-radius:var(--r-l);background:var(--card)}
.rprow + .rprow{border-top-left-radius:0;border-top-right-radius:0;box-shadow:inset 0 1px 0 var(--hair)}
.rprow:has(+ .rprow){border-bottom-left-radius:0;border-bottom-right-radius:0}
.rptop{gap:12px;align-items:center;font:600 17px/1.3 var(--font)}
.rptop b{min-width:0}
.rptop .faint{font:var(--t-cap);color:var(--text-2)}
.rpwhat{margin-top:6px;font:var(--t-body);color:var(--text)}
.rpdet{font:var(--t-cap);color:var(--text-2);margin-top:4px}
.rqst{flex:none;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-pill);font:600 13px/1 var(--font);letter-spacing:0;text-transform:none;background:var(--amber-soft);color:var(--amber-t)}
.rqst.in_progress{background:var(--blue-soft);color:var(--blue-t)}
.rqst.resolved{background:var(--green-soft);color:var(--green-t)}
.rqreply{margin-top:12px;padding:12px 14px;border-radius:var(--r-s);background:var(--bg);font:var(--t-cap);color:var(--text-2)}
.rqreply b{color:var(--text)}
.rqreply p{font:var(--t-sub);color:var(--text);margin:4px 0 0}

/* ---- 7. Help and Resources ---- */
.hpbtns{gap:0;padding:0;margin:0 var(--page);border-radius:var(--r-l);background:var(--card);overflow:hidden}
.hpbtns .opt{min-height:var(--row);border-radius:0;background:transparent}
.hpbtns .opt + .opt{box-shadow:inset 0 1px 0 var(--hair)}
.hpbtns .opt:active{background:var(--card-2)}
.hpbtns .opt .t{flex:1;min-width:0}
.hpbtns .opt::after{content:"";flex:none;width:18px;height:18px;background:#8C877D;-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat}
.hcontact{gap:12px;margin:0 var(--page);padding:14px 20px;min-height:var(--row);border:0;border-radius:var(--r-l);background:var(--card)}
.hcontact + .hcontact{border-top-left-radius:0;border-top-right-radius:0;box-shadow:inset 0 1px 0 var(--hair)}
.hcontact:has(+ .hcontact){border-bottom-left-radius:0;border-bottom-right-radius:0}
.hcontact b{font:600 17px/1.3 var(--font)}
.hcontact .faint{font:var(--t-sub);color:var(--text-2);margin-top:2px}
.hcontact a.faint{color:var(--orange-t);display:flex;align-items:center;min-height:44px;margin:0}
.hcbtns{gap:8px}
.hcbtns .btn,.hcbtns .btn.primary{min-height:48px;padding:0 18px;font-size:15px;background:var(--btn2);color:var(--text)}
.hcbtns .btn:active{background:var(--card-3)}
.hcbtns .btn .ico{color:var(--orange-t)}
.hcard.nomargin + .hcontact{margin-top:12px}
.hcontact.dir{flex-direction:column;align-items:stretch;padding:16px 20px}
.hcontact.dir > div:first-child{flex:none}
.hcontact.dir .hcbtns .btn{justify-content:center}
.faqs{gap:0;padding:0;margin:0 var(--page);border-radius:var(--r-l);background:var(--card);overflow:hidden}
.faq{border:0;border-radius:0;background:transparent;padding:0 20px}
.faq + .faq{box-shadow:inset 0 1px 0 var(--hair)}
.faq summary{display:flex;align-items:center;gap:12px;min-height:var(--row);padding:12px 0;font:600 17px/1.3 var(--font);color:var(--text)}
.faq summary::after{content:"";flex:none;margin-left:auto;width:18px;height:18px;background:#8C877D;-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;transform:rotate(90deg);transition:transform .2s}
.faq[open] summary{color:var(--text)}
.faq[open] summary::after{transform:rotate(-90deg)}
.faq p{font:var(--t-body);color:var(--text-2);margin:0 0 16px}

/* ---- 8. Company updates ---- */
.screen[data-screen=updates] .wz-head + .hcard{margin-top:20px}
.hcmeta{font:var(--t-cap);color:var(--text-3)}
.hcmeta b.o{color:var(--orange-t)}
.hcard.imp{box-shadow:inset 0 0 0 2px var(--orange)}

/* ---- 9. My hours ---- */
.hrweek{gap:8px;margin:20px var(--page) 0;padding:8px;border:0;border-radius:var(--r-l);background:var(--card)}
.hrweek > div{gap:2px;min-width:0}
.hrweek > div > b{font:600 17px/1.3 var(--font)}
.hrweek .iconbtn{background:var(--bg-1);box-shadow:none}
.hrweek .iconbtn:disabled{opacity:1;background:transparent;color:#C9C5BC}
.hrst{font:600 13px/1.3 var(--font);color:var(--amber-t)}
.hrst.ok{color:var(--green-t)}
.hrst .ico{width:15px;height:15px;stroke-width:2.4}
/* totals: the week total leads, large; each number says what it is and that it is hours */
.hrtot,.hrtot.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px var(--page) 0}
.hrtot.two{margin-top:8px}
.hrtot > div{flex-direction:column-reverse;justify-content:flex-end;gap:4px;padding:16px 20px;border:0;border-radius:var(--r-l);background:var(--card)}
.hrtot > div > span{font:600 13px/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.hrtot b,.hrtot.two b{font:800 28px/1.1 var(--font);letter-spacing:-.02em;color:var(--text)}
.hrtot b::after{content:" h";font-size:.55em;font-weight:600;letter-spacing:0;color:var(--text-2)}
.hrtot:not(.two) > div:first-child{grid-column:1 / -1}
.hrtot:not(.two) > div:first-child b{font-size:48px;letter-spacing:-.03em}
.hrtot .ot b,.hrtot .nt b{color:var(--text)}
/* a week with nothing reported shows the empty message, not a row of zeros */
.hrtot:has(+ .card.empty){display:none}
/* no overtime: the total already says it. No night hours: no day and night split */
.hrtot:not(.two):not(:has(.ot)) > div:not(:first-child){display:none}
.hrtot.two:not(:has(.nt)),.hrtot.two:not(:has(.nt)) + p.faint{display:none}
.screen[data-screen=hours] p.faint{font:var(--t-sub)!important;color:var(--text-2);margin:12px calc(var(--page) + 4px) 0!important}
.hrday{margin:28px var(--page) 0}
.hrdh{padding:0 4px 8px;font:600 13px/1.3 var(--font);letter-spacing:.06em;color:var(--text-3);align-items:baseline}
.hrdh b{font:700 17px/1.3 var(--font);letter-spacing:0;color:var(--text)}
.hrsplit{font:var(--t-cap);color:var(--text-2)}
.hrent{gap:12px;margin:0;padding:14px 20px;min-height:var(--row);border:0;border-radius:0;background:var(--card);box-shadow:inset 0 1px 0 var(--hair)}
.hrdh + .hrent{border-top-left-radius:var(--r-l);border-top-right-radius:var(--r-l);box-shadow:none}
.hrent:last-child{border-bottom-left-radius:var(--r-l);border-bottom-right-radius:var(--r-l)}
.hrl{gap:2px}
.hrl b{font:600 17px/1.3 var(--font);overflow-wrap:anywhere}
.hrl span{font:var(--t-sub);color:var(--text-2)}
.hrl .hradj{font:500 15px/1.4 var(--font)}
.hrh{font:700 22px/1 var(--font);letter-spacing:-.02em;gap:4px;align-items:baseline}
.hrh small{font:600 13px/1 var(--font);color:var(--text-2)}
.hrh .okc{color:var(--green-t);align-self:center;margin-left:2px}
.hrh .okc .ico{width:18px;height:18px;stroke-width:2.4}
.screen[data-screen=hours] #askHrs{width:auto;padding:0 4px;margin-top:4px!important}

/* --- 60-office.css --- */
/* ============================================================================
   60-office: the office screens (admin.js, dispatch.js, clientreq.js, clientmail.js,
   office part of hours.js) and the GPS field reports list.
   Scope: every rule starts with  :is(.ofm,#stage:has(.ofm) ~ #overlay)
     .ofm                          = the office page itself
     #stage:has(.ofm) ~ #overlay   = sheets opened while an office page is on screen
   so nothing here can reach a crew screen or a crew sheet.
   Phone first; the computer layout is in the min-width:1000px blocks (body.wide).
   ============================================================================ */

/* ---- 1. tokens for the office scope ---- */
:is(.ofm,#stage:has(.ofm) ~ #overlay){--field:var(--card);--mono:var(--font)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) :is(.acard,.aform fieldset){--field:var(--bg)}

/* ---- 2. page shell: large title, actions, back link ---- */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmain{padding:calc(12px + var(--sat)) var(--page) 0;background:var(--bg)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .oftop{margin:4px 0 20px;gap:16px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .oftop h1{font:var(--t-large);letter-spacing:-.025em;text-wrap:balance;min-width:0;overflow-wrap:anywhere}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofcrumb{min-height:48px;margin:0 0 0 -10px;padding:0 14px 0 8px;border-radius:var(--r-pill);font:600 16px/1 var(--font);color:var(--orange-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofcrumb:hover,:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofcrumb:active{background:var(--bg-1);color:var(--orange-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmain .hubwarn{margin:0 0 12px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmain a:not(.btn):not([class*=btn]){color:var(--orange-t);text-underline-offset:2px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .faint{color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ah2{font:700 20px/1.25 var(--font);letter-spacing:-.015em;margin:32px 0 12px;color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dsech{margin-bottom:12px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dsech .faint{font-size:14px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ameta{font-size:14px;color:var(--text-2);margin:0 0 16px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dnote{font-size:13px;line-height:1.45;color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dnote a{color:var(--orange-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmain p.faint{font-size:14px;line-height:1.45}
/* two notes carry an inline 12.5px size: lift them to the 13px floor */
:is(.ofm,#stage:has(.ofm) ~ #overlay) [style*="font-size:12"]{font-size:13px!important}

/* buttons inside office pages: small ones are 44px pills, gray unless primary */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .btn.sm{min-height:44px;padding:0 18px;border-radius:var(--r-pill);font:600 15px/1.2 var(--font);gap:8px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .btn.sm:not(.primary):not(.danger):not(.green):not(.text){background:var(--btn2);border:0;color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .btn.sm.red:not(.primary):not(.danger):not(.green):not(.text){color:var(--red-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .btn.sm.text{background:transparent;color:var(--orange-t);padding:0 12px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .btn.sm.text.red{color:var(--red-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .btn.sm[disabled]{opacity:1;background:var(--card-3);color:#A19D94}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .btn.sm.text[disabled]{background:transparent}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .btn.sm:not(.text):active{background:var(--hair-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .btn.sm.primary:active{background:var(--orange-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .btn.dark:not(.sm){background:var(--btn2);border:0;color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .btn.dark.red{color:var(--red-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .oftop .ofact{gap:8px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .oftop .ofact > .btn.sm.primary{border-radius:var(--r-pill)}
@media (max-width:639px){
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .oftop{flex-direction:column;align-items:stretch}
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .oftop .ofact > .btn.sm,:is(.ofm,#stage:has(.ofm) ~ #overlay) .oftop .ofact > .cmbtn > .btn.sm{min-height:48px;border-radius:var(--r-pill);padding:6px 14px}
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .oftop .ofact > .btn.sm.primary{min-height:var(--tap);font-size:17px}
}
@media (max-width:379px){ :is(.ofm,#stage:has(.ofm) ~ #overlay) .oftop h1{font-size:30px} }

/* phones: bottom tab bar, same look as the crew app */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofbar{background:rgba(255,255,255,.94);border-top:1px solid var(--hair);padding:6px 8px calc(6px + var(--sab));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofbar button{min-height:56px;gap:3px;border-radius:var(--r);font:600 13px/1 var(--font);color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofbar button svg{width:26px;height:26px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofbar button.on,:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofbar button.on svg{color:var(--orange-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofbar button.on svg{stroke-width:2.3}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofbar button:active{background:var(--bg-1)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofbadge{min-width:22px;height:22px;padding:0 6px;background:var(--orange);color:var(--orange-ink);font:700 13px/1 var(--font)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofbar .ofbadge{top:1px;left:calc(50% + 4px);min-width:20px;height:20px;font-size:13px}

/* "More" sheet: one grouped list per section */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmg{margin:24px 0 0}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmgh{font:600 13px/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin:0 4px 8px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmi{min-height:var(--tap);margin:0;padding:0 16px;gap:14px;border:0;border-radius:0;background:var(--card);font:600 17px/1.3 var(--font);color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmi + .ofmi{box-shadow:inset 0 1px 0 var(--hair)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmi:first-child,:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmgh + .ofmi{border-top-left-radius:var(--r-l);border-top-right-radius:var(--r-l)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmi:last-child{border-bottom-left-radius:var(--r-l);border-bottom-right-radius:var(--r-l)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmi > svg:first-child{color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmi:active{background:var(--card-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmi.on{color:var(--text);background:var(--orange-soft)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmi.on > svg:first-child{color:var(--orange-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmi small{font:400 14px/1.3 var(--font);color:var(--text-3)}

/* ---- 3. computer: quiet left navigation ---- */
@media (min-width:1000px){
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .ofnav{width:248px;padding:24px 12px 16px;background:var(--bg-1);border-right:0}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .ofbrand{padding:0 12px 20px}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .ofbrand .wordmark{font-size:15px}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .ofbrand .wordmark small{font-size:13px;color:var(--text-3)}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .ofnav nav{gap:2px}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .ofn{height:44px;padding:0 14px;gap:12px;border:0;border-radius:var(--r-pill);background:transparent;font:600 15px/1 var(--font);color:var(--text-2)}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .ofn .ico{color:var(--text-3)}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .ofn:hover{background:rgba(28,24,14,.05);color:var(--text)}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .ofn.on{background:var(--card);color:var(--text)}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .ofn.on .ico{color:var(--text)}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmain{padding:32px 32px 0}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .oftop{margin:0 0 24px}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .oftop h1{font-size:30px}
}

/* ---- 4. stat tiles: white, large dark number, small label ---- */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dhello{margin:-8px 0 20px;font:400 17px/1.4 var(--font);color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dhello .live{padding:6px 12px;border:0;background:var(--card);font:500 13px/1.2 var(--font);color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dhello .live i{background:var(--green)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .kpis,:is(.ofm,#stage:has(.ofm) ~ #overlay) .astats{gap:12px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .kpi,:is(.ofm,#stage:has(.ofm) ~ #overlay) .astat{padding:16px;border:0;border-radius:var(--r-l);background:var(--card)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .kpi.press:hover,:is(.ofm,#stage:has(.ofm) ~ #overlay) .astat.press:hover{transform:none}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .kpi.press:active,:is(.ofm,#stage:has(.ofm) ~ #overlay) .astat.press:active{background:var(--card-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .kpit{min-height:40px;margin-bottom:12px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .kpii{width:40px;height:40px;border-radius:12px;background:var(--bg-1);color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .kpi.warn .kpii{background:var(--amber-soft);color:var(--amber-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .kpi > b,:is(.ofm,#stage:has(.ofm) ~ #overlay) .astat b{font:700 30px/1.05 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .kpi > b i{font-size:20px;font-weight:600;color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .kpi > span,:is(.ofm,#stage:has(.ofm) ~ #overlay) .astat span{margin-top:6px;font:500 15px/1.3 var(--font);color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .kpi > small,:is(.ofm,#stage:has(.ofm) ~ #overlay) .astat small{margin-top:2px;font:400 13px/1.35 var(--font);color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .kpi.warn > small{color:var(--amber-t);font-weight:600}
/* a tile that needs attention: dark number, amber dot beside its label */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .astat.warn b{color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .astat.warn span::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--amber);vertical-align:1px}
/* progress rings on tiles: neutral track, dark arc (the number beside it carries the meaning) */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ring svg circle:first-child{stroke:var(--bg-1)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .kpi .ring .rarc{stroke:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ring .rc b{font:700 15px/1 var(--font)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .donut svg > circle:first-child{stroke:var(--bg-1)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .donut .rc b{font:700 24px/1 var(--font);color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .donut .rc small{font-size:13px;color:var(--text-3)}

/* ---- 5. alerts ---- */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .aalert{gap:12px;padding:14px 16px;margin-bottom:12px;border:0;border-radius:var(--r);background:var(--amber-soft);color:var(--text);font:400 15px/1.4 var(--font)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .aalert > .ico{color:var(--amber-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .aalert a{color:var(--orange-t);font-weight:600}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .aalert.soft{background:var(--card);color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .aalert.soft b{color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .aalert.soft > .ico{color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .aalert.ok{background:var(--green-soft);color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .aalert.ok > .ico{color:var(--green-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .aalert.ok a{color:var(--green-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .aalerts{gap:0;margin-top:16px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .okt{color:var(--green-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .warnt{color:var(--amber-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .r,:is(.ofm,#stage:has(.ofm) ~ #overlay) b.r,:is(.ofm,#stage:has(.ofm) ~ #overlay) em.r{color:var(--red-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) b.g{color:var(--green-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) b.o{color:var(--orange-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) :is(.errmsg,.missmsg,.formerr){color:var(--red-t);font-size:14px}

/* ---- 6. status pills: soft fill, dark readable word ---- */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .apill{height:26px;padding:0 10px;border:0;border-radius:var(--r-pill);background:var(--bg-1);color:var(--text-2);font:600 13px/1 var(--font);letter-spacing:0;text-transform:none}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .apill.pub{background:var(--blue-soft);color:var(--blue-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .apill.done{background:var(--green-soft);color:var(--green-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .apill:is(.go,.est){background:var(--orange-soft);color:var(--orange-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .apill.warn{background:var(--amber-soft);color:var(--amber-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .apill.can{background:var(--red-soft);color:var(--red-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .apill.draft{background:transparent;box-shadow:inset 0 0 0 1px var(--hair-3);color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .rqst{padding:5px 10px;border-radius:var(--r-pill);background:var(--orange-soft);color:var(--orange-t);font:600 13px/1 var(--font);letter-spacing:0;text-transform:none;white-space:nowrap}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .rqst.in_progress{background:var(--blue-soft);color:var(--blue-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .rqst.resolved{background:var(--green-soft);color:var(--green-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .isss{gap:6px}

/* ---- 7. filters: chips, search, select ---- */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .afilters{gap:12px;margin-bottom:16px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atabs{margin-bottom:16px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .asearch{height:var(--tap);border-radius:var(--r);background:var(--card);border:1.5px solid var(--hair-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .asearch input{font-size:17px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .asel{min-height:var(--tap)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .achips{gap:8px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .achip{min-height:36px;padding:6px 14px;gap:8px;border:0;background:var(--card);box-shadow:inset 0 0 0 1px var(--hair);font:500 15px/1.3 var(--font);color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .achip b{color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) button.achip,:is(.ofm,#stage:has(.ofm) ~ #overlay) .achip.press{min-height:44px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) button.achip:active{background:var(--card-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .achip.on{background:var(--paper);color:var(--paper-ink);box-shadow:none}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .achip.on b{color:var(--paper-ink)}
@media (max-width:639px){
  /* chip rows scroll edge to edge */
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .catrow.nopad{flex:1 1 100%;margin:0 calc(var(--page) * -1);padding:1px var(--page)}
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .afilters > .btn.sm.primary{flex:1 1 100%;min-height:var(--tap);font-size:17px}
}

/* ---- 8. tables. Phones: one grouped white surface per list, label over value in two columns ---- */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atbl{gap:0}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atbl:not(:has(> .atg)){border-radius:var(--r-l);overflow:hidden}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atr{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 16px;align-items:start;padding:16px;border:0;border-radius:0;background:var(--card);box-shadow:inset 0 1px 0 var(--hair);font:400 16px/1.35 var(--font);color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atbl > .atr:first-child,:is(.ofm,#stage:has(.ofm) ~ #overlay) .atbl > .ath + .atr,:is(.ofm,#stage:has(.ofm) ~ #overlay) .atbl > :is(.atg,.atg-empty) + .atr{box-shadow:none;border-top-left-radius:var(--r-l);border-top-right-radius:var(--r-l)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atbl > .atr:last-child,:is(.ofm,#stage:has(.ofm) ~ #overlay) .atbl > .atr:has(+ .atg){border-bottom-left-radius:var(--r-l);border-bottom-right-radius:var(--r-l)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atr > div[data-l]:not([data-l=""])::before{margin-bottom:2px;font:500 13px/1.3 var(--font);letter-spacing:0;text-transform:none;color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atr b{font-weight:600}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atr .faint{font-size:14px;color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atr .nil{color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atr a[href^="tel:"]{display:inline-block;padding:14px 0;margin:-14px 0}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atr:is([data-job],.press):hover{border-color:transparent}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atr:is([data-job],.press):active{background:var(--card-2)}
/* lists without column names (Contractors and lists, Content): name left, status and button right */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atbl:not(:has(> .ath)) > .atr{grid-template-columns:minmax(0,1fr) auto auto;align-items:center}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atr > div[data-l=""]:last-child:not(:first-child){justify-self:end}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .acard .atbl{border-radius:0;overflow:visible}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .acard .atr{background:transparent;padding:16px 0}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .acard .atbl > .atr:last-child{padding-bottom:0}
/* day headings (Jobs look-ahead, Client requests by work day) */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atg{padding:24px 4px 10px;gap:4px 10px;font:700 17px/1.3 var(--font);color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atbl > .atg:first-child,:is(.ofm,#stage:has(.ofm) ~ #overlay) .atbl > .ath + .atg{padding-top:4px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atg.now b{color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atg-sub{font:400 14px/1.3 var(--font);color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atg-n{font:500 13px/1.3 var(--font);color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .atg-empty{padding:0 4px 4px;font:400 15px/1.4 var(--font);color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .untilrow{margin-top:6px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .apill.until{font-weight:600}
@media (min-width:640px) and (max-width:999px){
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr:not([data-compact]):not([data-hrs]){grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* employees on phones and tablets: photo left, details in two columns */
@media (max-width:999px){
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-compact]{grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);gap:0 14px;padding:16px}
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-compact] > div:nth-child(n+2){margin-bottom:10px}
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-compact] > div:nth-child(2){font-size:17px}
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-compact] > div[data-l]::before{font-size:13px;margin-bottom:1px}
}
/* computers: a real table. White surface, hairline rows, quiet header, day bands on the page color */
@media (min-width:1000px){
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .atbl{gap:0;border:0;border-radius:var(--r-l);overflow:hidden;background:var(--card)}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr{grid-template-columns:var(--cols);gap:4px 16px;align-items:center;padding:12px 20px;border:0;border-radius:0;box-shadow:inset 0 1px 0 var(--hair);font-size:15px}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .atbl > .atr:first-child{box-shadow:none}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .ath > div{overflow-wrap:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .ath{display:grid;padding:14px 20px;background:var(--card);font:600 13px/1.3 var(--font);letter-spacing:.03em;text-transform:uppercase;color:var(--text-3)}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr > div[data-l]::before{display:none}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr:is([data-job],.press):hover{background:var(--card-2)}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .atg{padding:12px 20px;border:0;background:var(--bg);box-shadow:inset 0 1px 0 var(--hair);font-size:15px}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .atg-empty{padding:14px 20px;border:0;box-shadow:inset 0 1px 0 var(--hair);background:var(--card)}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .acard .atbl{border-radius:0;background:transparent}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .acard .atr{padding:12px 0}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .acard .ath{padding:0 0 10px;background:transparent}
}
@media (min-width:1000px) and (max-width:1399px){
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .atbl:has(> .atr[data-compact]){gap:0;overflow:hidden}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-compact]{grid-template-columns:48px repeat(3,minmax(0,1fr));gap:0 16px;padding:16px 20px;border:0;border-radius:0;align-items:start}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-compact] > div[data-l]:not([data-l=""]):not(:nth-child(2))::before{display:block;font-size:13px}
}

/* ---- 9. cards and what sits inside them ---- */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .acard{padding:16px;border:0;border-radius:var(--r-l);background:var(--card)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .acard h3{font:var(--t-head);letter-spacing:-.01em;margin:0 0 12px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) :is(.dgrid,.dsec) .acard{background:var(--card)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .acols,:is(.ofm,#stage:has(.ofm) ~ #overlay) .dgrid{gap:12px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dch{margin-bottom:16px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dch h3{margin:0}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dch .btn.text{color:var(--orange-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .card.empty{border:0}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofl{grid-template-columns:minmax(96px,34%) 1fr;gap:10px 12px;font:400 16px/1.4 var(--font)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofl dt{font-size:15px;color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofl dd a{color:var(--orange-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dnums{gap:12px 28px;margin-bottom:16px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dnums > div b{font:700 22px/1.1 var(--font);font-variant-numeric:tabular-nums}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dnums > div span{font-size:13px;color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dnums.sm > div b{font-size:18px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dbig b{font:700 34px/1.05 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dbig span{font-size:14px;color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .pl{font-size:15px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .pl b{font-weight:600;font-variant-numeric:tabular-nums}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .pl i{background:var(--orange);opacity:1}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dleg > div{font-size:15px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dleg b{font:600 15px/1.2 var(--font);font-variant-numeric:tabular-nums}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dleg em{font:400 13px/1.2 var(--font);color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .seglg{font-size:14px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .seglg b{font-weight:600}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .segbar,:is(.ofm,#stage:has(.ofm) ~ #overlay) .otbar{background:var(--bg-1)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .otdone{background:var(--orange)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .otn b{font-size:15px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .otn small{font-size:13px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .osmeter > div b{font:700 22px/1.1 var(--font)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .osmeter > div span{font-size:14px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .osmeter small{font-size:13px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .oslist{gap:8px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .osl{min-height:var(--tap);padding:10px 14px;border:0;border-radius:var(--r-s);background:var(--bg)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .osl:active{background:var(--bg-1)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .osl > span b{font-size:16px;font-weight:600}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .osl small{font-size:13px;color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .osday b{font-size:17px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .oslinks{font-size:14px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .oslinks a{color:var(--orange-t)}
/* hours by day chart */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hcy{font:400 13px/1 var(--font);color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hchart{grid-template-columns:34px 1fr}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hcb,:is(.ofm,#stage:has(.ofm) ~ #overlay) .hcc.now .hcb{background:var(--orange);box-shadow:none}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hcc.now .hcb{background:var(--orange-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hcc:hover,:is(.ofm,#stage:has(.ofm) ~ #overlay) .hcc:focus-visible{background:var(--bg)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hcv{font:600 13px/1 var(--font);color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hcx span{font-size:13px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hcx small{font-size:13px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hcx span.now small{color:var(--orange-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hcx span.fut{opacity:1;color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hcavg{border-top-color:var(--hair-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hcavg em{font:500 13px/1.2 var(--font);color:var(--text-2);background:var(--card)}
/* job profit */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .pflg{font-size:13px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .pfrow:hover,:is(.ofm,#stage:has(.ofm) ~ #overlay) .pfrow:focus-visible{background:var(--bg)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .pfl b{font-size:15px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .pfl small,:is(.ofm,#stage:has(.ofm) ~ #overlay) .pfv small{font:400 13px/1.3 var(--font);color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .pfv b{font:600 16px/1.2 var(--font);font-variant-numeric:tabular-nums}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .pfh{font:600 13px/1.3 var(--font);letter-spacing:.06em;color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .pfr span{font-family:var(--font)}
/* crew request rows, replies, history */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .areq{min-height:var(--tap);margin:0;padding:14px 16px;gap:12px;border:0;border-radius:0;background:var(--card);align-items:center}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .areq + .areq{box-shadow:inset 0 1px 0 var(--hair)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .areq:first-of-type,:is(.ofm,#stage:has(.ofm) ~ #overlay) :not(.areq) + .areq{border-top-left-radius:var(--r-l);border-top-right-radius:var(--r-l)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .areq:last-of-type,:is(.ofm,#stage:has(.ofm) ~ #overlay) .areq:has(+ :not(.areq)){border-bottom-left-radius:var(--r-l);border-bottom-right-radius:var(--r-l)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .areq:active{background:var(--card-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .areq b{font-size:16px;font-weight:600}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .areq .aq{font-size:15px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .rqreply{background:var(--bg);border-radius:var(--r-s);padding:10px 12px;font-size:14px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .rqreply p{font-size:15px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hcard{margin-left:0;margin-right:0;border:0;border-radius:var(--r);background:var(--card)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .tline{border-left-color:var(--hair-2);gap:14px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .tl{font-size:15px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .tl::before{background:var(--hair-3);border-color:var(--bg)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .tlt{font:400 13px/1.3 var(--font);color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .empph{width:44px;height:44px;border:0;background:var(--bg-1);font:700 14px/1 var(--font);color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .empph.big{width:84px;height:84px;font-size:26px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .tcp{font-size:14px;color:var(--text-2)}
@media (min-width:1000px){
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .acard{padding:20px}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .acols,body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .dgrid{gap:16px}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .kpis,body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .astats{gap:16px}
}

/* ---- 10. forms: white section surfaces, 15px labels, 56px fields, one primary action ---- */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .aform{gap:16px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .aform fieldset{gap:16px;padding:20px 16px;border:0;border-radius:var(--r-l);background:var(--card)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .aform legend{float:left;width:100%;padding:0;margin:0;font:var(--t-head);letter-spacing:-.01em;color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .agrid2,:is(.ofm,#stage:has(.ofm) ~ #overlay) .agrid3{gap:16px 12px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hf{gap:8px;font:600 15px/1.3 var(--font);color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hf small,:is(.ofm,#stage:has(.ofm) ~ #overlay) .hf .faint{font:400 13px/1.4 var(--font);color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) :is(.hf input:not([type=checkbox]):not([type=radio]),.hf select,.hf textarea,.hta,.asel,.inp){min-height:var(--tap);padding:14px 16px;border:1.5px solid var(--hair-2);border-radius:var(--r);background-color:var(--field);color:var(--text);font-size:17px;font-weight:400}
:is(.ofm,#stage:has(.ofm) ~ #overlay) :is(.hf select,.asel){padding-right:40px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) :is(.hf input,.hf select,.hf textarea,.hta,.asel,.inp):focus{border-color:var(--orange);box-shadow:0 0 0 4px var(--orange-soft)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) :is(.hf textarea,.hta){min-height:112px;line-height:1.45}
/* date and time fields use the light native picker */
:is(.ofm,#stage:has(.ofm) ~ #overlay) input:is([type=date],[type=time],[type=datetime-local]){color-scheme:light}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hf input:is([type=checkbox],[type=radio]){width:24px;height:24px;min-height:0;padding:0;accent-color:var(--orange);flex:none}
:is(.ofm,#stage:has(.ofm) ~ #overlay) :is(.miss input,.miss select,.miss textarea,input.miss,select.miss,textarea.miss){border-color:var(--red)!important}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .miss > span:first-child{color:var(--red-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .aformacts{gap:8px 12px;margin-top:8px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .aformacts .btn{min-height:var(--tap);min-width:160px;padding:0 28px;border-radius:var(--r-pill)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .aformacts .btn.sm{min-height:44px;min-width:0;padding:0 18px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .aformacts .btn.text{min-width:0;padding:0 16px;color:var(--orange-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .aformacts .btn.text.red,:is(.ofm,#stage:has(.ofm) ~ #overlay) .aformacts .btn.red{color:var(--red-t)}
@media (max-width:639px){ :is(.ofm,#stage:has(.ofm) ~ #overlay) .aformacts > .btn.primary:not(.sm){flex:1 1 100%} }
/* check rows: one grouped list */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .checks{gap:0;border-radius:var(--r);overflow:hidden}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .chk{min-height:var(--tap);align-items:center;gap:14px;padding:10px 14px;border:0;border-radius:0;background:var(--bg);font:500 16px/1.3 var(--font);color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .checks > .chk + .chk{box-shadow:inset 0 1px 0 var(--hair)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) :not(.checks) > .chk{border-radius:var(--r)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .chk input{width:24px;height:24px;margin:0}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .chk.big b{font-size:16px;font-weight:600}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .chk.big small{font-size:13px;color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .chk .warn{margin-top:2px;font-size:13px;color:var(--amber-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .chk span b.o{font-size:13px;color:var(--orange-t)}
@media (min-width:640px){
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .checks.cols{gap:8px;overflow:visible}
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .checks.cols > .chk{border-radius:var(--r-s);box-shadow:none}
}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmain > .chk,:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmain > .checks .chk,:is(.ofm,#stage:has(.ofm) ~ #overlay) .ofmain > :not(.aform):not(.acard) .chk{background:var(--card)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .acard .chk,:is(.ofm,#stage:has(.ofm) ~ #overlay) .aform fieldset .chk{background:var(--bg)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .seg{margin-left:0;margin-right:0}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .seg.seg3in button{height:44px;font-size:14px}
/* price lines and billing lines in the editors */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .plrow.plhead span{font:600 13px/1.3 var(--font);letter-spacing:.06em;color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .blrow{min-height:var(--tap);padding:10px 14px;border:0;border-radius:var(--r-s);background:var(--bg)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .blrow b{font-size:15px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .blqty{font-size:13px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .blqty .inp{min-height:44px;width:72px;padding:6px 10px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .billfs a{color:var(--orange-t)}
@media (max-width:760px){ :is(.ofm,#stage:has(.ofm) ~ #overlay) .plrow{padding:12px;border:0;border-radius:var(--r-s);background:var(--bg)} :is(.ofm,#stage:has(.ofm) ~ #overlay) .acard .plrow,:is(.ofm,#stage:has(.ofm) ~ #overlay) fieldset .plrow{--field:var(--card)} }
@media (min-width:1000px){
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .aform fieldset{padding:24px}
}

/* ---- 11. schedule form and WhatsApp messages (dispatch.js) ---- */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dsseg{gap:12px;margin-bottom:16px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dsseg button{min-height:72px;padding:16px;border:0;border-radius:var(--r-l);background:var(--card);font:600 17px/1.3 var(--font);color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dsseg button small{font:400 14px/1.35 var(--font);color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dsseg button.on{background:var(--orange-soft);box-shadow:inset 0 0 0 2px var(--orange);color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dsseg button:active{background:var(--card-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dsrep{gap:8px;padding:12px;margin:8px 0;border:0;border-radius:var(--r-s);background:var(--bg);--field:var(--card)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dsrep :is(select,input[type=time]){height:48px;border:1.5px solid var(--hair-2);border-radius:var(--r-s);background:var(--card);color:var(--text);font-size:16px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dspick{gap:8px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dssum{gap:4px;padding:16px;margin-bottom:16px;border:0;border-radius:var(--r-l);background:var(--card)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dssum b{font:var(--t-head)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dssum span{font-size:15px;color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dslangb button{min-height:96px;padding:20px;border:0;border-radius:var(--r-l);background:var(--card)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dslangb button:hover,:is(.ofm,#stage:has(.ofm) ~ #overlay) .dslangb button:active{box-shadow:inset 0 0 0 2px var(--orange)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dslangb button b{font:var(--t-title)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dslangb button span{font-size:14px;color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dslangrow{font-size:15px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dsmsg{margin-bottom:12px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dsta{font-size:16px;line-height:1.45}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dswa summary{min-height:48px;font-weight:600}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .dswa code,:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrhook code{font-size:13px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .swapname{min-height:44px;border:0;border-radius:var(--r-s)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .swapname:hover,:is(.ofm,#stage:has(.ofm) ~ #overlay) .swapname:active{background:var(--bg-1);border:0}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .swaphint{font-size:13px;color:var(--orange-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .swapbtns .btn.text{min-height:44px;font-size:14px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .swapl{gap:0;border-radius:var(--r-l);overflow-y:auto}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .swapc{min-height:var(--tap);padding:10px 16px;border:0;border-radius:0;background:var(--card)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .swapc + .swapc{box-shadow:inset 0 1px 0 var(--hair)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .swapc:active{background:var(--card-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .swapc > small{font-size:13px;color:var(--text-3)}

/* ---- 12. client requests (clientreq.js, clientmail.js) ---- */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .crstat{margin-bottom:16px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .crstath{gap:12px;font:var(--t-head)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .crsteps{gap:6px;margin:16px 0 8px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .crsteps li{padding:8px 4px 0;border-top:3px solid var(--bg-1);font:500 13px/1.3 var(--font);color:var(--text-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .crsteps li.done{border-top-color:var(--green);color:var(--text-2)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .crsteps li.on{border-top-color:var(--orange);color:var(--text);font-weight:700}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .crline{font-size:15px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .cmbtn .cmwhy{font-size:13px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .cmline .ico{color:var(--green-t)}

/* ---- 13. weekly hours (office part of hours.js) ---- */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrwk{gap:8px;font:600 16px/1.2 var(--font)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrwk .btn.sm{width:48px;min-height:48px;padding:0;border-radius:50%}
@media (max-width:639px){ :is(.ofm,#stage:has(.ofm) ~ #overlay) .oftop .ofact > .hrwk{flex:1 1 100%;justify-content:space-between;margin-bottom:4px} }
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrsearch{top:calc(8px + var(--sat))}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrtrav{min-width:48px;min-height:44px;padding:4px 12px;border:0;border-radius:var(--r-pill);background:var(--btn2);font:600 14px/1.2 var(--font);color:var(--text)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrtrav.warnt{background:var(--amber-soft);color:var(--amber-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrtrav:hover{border:0}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrtrav:active{background:var(--hair-3)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrdaybtn{min-width:44px;min-height:44px;border:0;border-radius:var(--r-s);font-size:15px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrdaybtn:hover,:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrdaybtn:active{border:0;background:var(--bg-1)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrdaybtn small{font-size:13px;color:var(--orange-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrver{width:44px;height:44px;border:2px solid var(--hair-3);background:transparent;color:var(--text-3);opacity:1}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrver.on{background:var(--green);border-color:var(--green);color:#fff}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrmatch{gap:12px;margin-bottom:12px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrmact select{height:48px;border:1.5px solid var(--hair-2);border-radius:var(--r-s);background:var(--bg);font-size:16px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrsetup{margin-top:24px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrsetup summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-size:17px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrsetup summary::after{float:none;flex:none;font:600 15px/1 var(--font);color:var(--orange-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrsbody{font-size:15px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrhook code{border:0;background:var(--bg)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrtrow,:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrdent{padding:12px 0;border-bottom:1px solid var(--hair)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrdtr{font-size:15px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrdtr select{min-height:48px;border:1.5px solid var(--hair-2);border-radius:var(--r-s);background:var(--card)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .pwgrid{font-size:14px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .pwgrid b{font-size:13px;color:var(--text-2)}
@media (max-width:999px){
  /* one employee: name row, seven day cells, then the totals */
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-hrs]{grid-template-columns:repeat(14,minmax(0,1fr));gap:10px 3px;padding:16px 12px;align-items:start}
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-hrs] > div{grid-column:span 2}
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-hrs] > div:nth-child(1){grid-column:1 / span 2}
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-hrs] > div:nth-child(2){grid-column:3 / -1;align-self:center;font-size:17px}
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-hrs] > div:nth-child(n+3):nth-child(-n+9){padding:6px 0 2px;border-radius:var(--r-s);background:var(--bg)}
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-hrs] > div:nth-child(n+3):nth-child(-n+9)::before{font-size:13px;line-height:1.2;letter-spacing:0;text-align:center;margin:0;white-space:normal;word-spacing:100vw;overflow:visible}
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-hrs] .hrdaybtn{min-height:44px}
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-hrs] > div:nth-child(n+10){border-top:0;padding-top:4px}
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-hrs] > div:nth-child(n+10)::before{font-size:13px;margin-bottom:2px}
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-hrs] > div:nth-child(10),:is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-hrs] > div:nth-child(11),:is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-hrs] > div:nth-child(12){grid-column:span 3}
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-hrs] > div:nth-child(13){grid-column:span 5}
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-hrs] > div:nth-child(14),:is(.ofm,#stage:has(.ofm) ~ #overlay) .atr[data-hrs] > div:nth-child(15){grid-column:span 7}
}

@media (min-width:1000px){
  /* the hours table has up to 15 columns: tighter gaps and a name column that cannot collapse */
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .atbl:has(> .atr[data-hrs]) > .atr{gap:4px 6px;padding-left:16px;padding-right:16px}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .atbl:has(> .atr[data-hrs]) > .atr:has(> div:nth-child(15)){grid-template-columns:44px minmax(110px,1.5fr) repeat(7,minmax(40px,60px)) 52px 44px 44px 60px minmax(64px,96px) minmax(84px,110px)}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .atbl:has(> .atr[data-hrs]) > .atr:not(:has(> div:nth-child(14))){grid-template-columns:44px minmax(110px,1.5fr) repeat(7,minmax(40px,64px)) 58px 50px 50px 62px}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .hrsearch{top:0}
}
@media (min-width:1000px) and (max-width:1279px){
  /* small laptops: the hours table scrolls sideways instead of squeezing */
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .atbl:has(> .atr[data-hrs]){overflow-x:auto}
  body.wide :is(.ofm,#stage:has(.ofm) ~ #overlay) .atbl:has(> .atr[data-hrs]) > .atr{min-width:940px}
}
/* ---- 14. sheets opened from office pages ---- */
:is(.ofm,#stage:has(.ofm) ~ #overlay) .sheet .hform{padding:16px 0 0;gap:16px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .sheet .acard{--field:var(--bg)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .sheet .empphh h3{font:var(--t-title)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .sheet .btnrow{gap:12px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrlist{gap:0;border-radius:var(--r-l)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrlist .opt{border-radius:0}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrlist .opt + .opt{box-shadow:inset 0 1px 0 var(--hair)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .sheet h3 + p{margin-top:8px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .sheet a:not(.btn){color:var(--orange-t)}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrtrow > span:first-child{flex:1;min-width:0}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrtrow select{min-height:48px;padding:0 12px;border:1.5px solid var(--hair-2);border-radius:var(--r-s);background:var(--card);color:var(--text);font-size:16px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrrin{flex:none}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrrin input{width:84px;padding-left:12px;padding-right:8px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .hrdin input{width:96px}
:is(.ofm,#stage:has(.ofm) ~ #overlay) .sheet h3{margin-bottom:8px}
@media (min-width:1100px){
  :is(.ofm,#stage:has(.ofm) ~ #overlay) .sheet{border:0;border-radius:var(--r-xl);padding:28px 28px 24px}
}

/* ---- 15. GPS field reports (app.js; rows are styled in 50-hub): one title, soft status badges ---- */
.screen[data-screen=reports] .appbar .ttl{visibility:hidden}
.screen[data-screen=reports] .rpb{padding:4px 10px;border-radius:var(--r-pill);font:600 13px/1 var(--font);letter-spacing:0;text-transform:none;vertical-align:2px}
.screen[data-screen=reports] .rpb-gate{background:var(--red-soft);color:var(--red-t)}
.screen[data-screen=reports] .rpb-unverified{background:var(--amber-soft);color:var(--amber-t)}
.screen[data-screen=reports] .rpb-checked{background:var(--bg-1);color:var(--text-2)}