:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#EDF1F9; --surface:#FFFFFF; --surface-2:#F5F7FD;
  --ink:#0F1B3D; --ink-2:#35426B; --muted:#6C7898;
  --line:#D8DFEE; --line-soft:#E9EDF7;
  --brand:#1B3A9C; --brand-2:#2E56D3; --brand-deep:#12296F; --brand-soft:#E3E9FA; --on-brand:#FFFFFF;
  --gold:#C98B1E; --gold-soft:#FBF0D9;
  --ok:#1C8A5E; --warn:#C2861E; --bad:#C0392B;
  --ok-bg:#DEF2E9; --warn-bg:#FAEEDB; --bad-bg:#FAE4E1;
  --shadow:0 1px 2px rgba(15,27,61,.06);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#070C1C; --surface:#0F1734; --surface-2:#141E42;
    --ink:#E9EDFA; --ink-2:#C2CBE6; --muted:#8B97BD;
    --line:#26315A; --line-soft:#1B2446;
    --brand:#7EA0FF; --brand-2:#A8BEFF; --brand-deep:#0B142E; --brand-soft:#1C2A5C; --on-brand:#06102E;
    --gold:#E8B65A; --gold-soft:#2C2411;
    --ok:#4FC48D; --warn:#E4AC5A; --bad:#E88072;
    --ok-bg:#11362A; --warn-bg:#332811; --bad-bg:#3A201D;
    --shadow:0 1px 2px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#070C1C; --surface:#0F1734; --surface-2:#141E42;
  --ink:#E9EDFA; --ink-2:#C2CBE6; --muted:#8B97BD;
  --line:#26315A; --line-soft:#1B2446;
  --brand:#7EA0FF; --brand-2:#A8BEFF; --brand-deep:#0B142E; --brand-soft:#1C2A5C; --on-brand:#06102E;
  --gold:#E8B65A; --gold-soft:#2C2411;
  --ok:#4FC48D; --warn:#E4AC5A; --bad:#E88072;
  --ok-bg:#11362A; --warn-bg:#332811; --bad-bg:#3A201D;
  --shadow:0 1px 2px rgba(0,0,0,.35);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.45;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Bricolage Grotesque",Archivo,sans-serif;font-weight:700;margin:0;letter-spacing:-.015em;line-height:1.1}
button,input,select,textarea{font:inherit;color:inherit;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;transition-duration:0s!important}}
.wrap{max-width:1220px;margin:0 auto;padding:0 16px 96px}

/* masthead */
.mast{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:linear-gradient(104deg,var(--brand-deep) 0%,#1B3A9C 48%,#2E56D3 100%);border-bottom:2px solid var(--gold);color:#fff}
.mast-in{max-width:1220px;margin:0 auto;padding:11px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brandmark{display:flex;align-items:center;gap:11px;margin-right:auto;min-width:0}
.brandmark img{height:34px;width:auto;display:block;flex:none}
.brandmark .rule{width:1px;height:30px;background:rgba(255,255,255,.28);flex:none}
.brandmark h1{font-size:17px;color:#fff;line-height:1.15}
.brandmark h1 b{font-weight:800;display:block}
.brandmark h1 em{font-style:normal;font-family:Archivo,sans-serif;font-weight:500;font-size:12.5px;color:rgba(255,255,255,.78);display:block}
.datefield{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);border-radius:9px;padding:5px 10px;color:#fff}
.datefield label{font-size:11.5px;color:rgba(255,255,255,.75)}
.datefield input{border:0;background:none;padding:0;font-size:14px;font-weight:600;min-width:118px;color:#fff;color-scheme:dark}
.statepill{font-size:11.5px;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:6px}
.statepill i{width:7px;height:7px;border-radius:50%;background:#5FE0A3;display:block;flex:none;box-shadow:0 0 0 3px rgba(95,224,163,.2)}
.statepill.busy i{background:var(--gold);box-shadow:0 0 0 3px rgba(217,154,43,.22)}
.statepill.err i{background:#FF8A7A;box-shadow:0 0 0 3px rgba(255,138,122,.22)}
@media (max-width:640px){.brandmark h1{font-size:15.5px}.brandmark h1 em{font-size:11.5px}.brandmark img{height:29px}.datefield label{display:none}}

/* hero */
.hero{padding:20px 0 18px;border-bottom:1px solid var(--line)}
.hero-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.hero-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){ .hero-act{width:100%;justify-content:stretch;flex-direction:column;align-items:stretch} .hero-act #all-pdf{width:100%;justify-content:center} }
.hero-top h2{font-size:clamp(24px,5.5vw,36px);font-weight:800;letter-spacing:-.03em}
.hero-top h2 small{display:block;font-family:Archivo,sans-serif;font-weight:500;font-size:12.5px;color:var(--muted);letter-spacing:0;margin-top:5px}
.pace{background:var(--gold-soft);border:1px solid rgba(201,139,30,.28);color:var(--ink-2);border-radius:9px;padding:7px 12px;font-size:12.5px}
.pace b{font-weight:600}

.meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:14px}
.meter{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 1px 2px rgba(15,27,61,.05),0 8px 22px -16px rgba(15,27,61,.3);position:relative;overflow:hidden}
.meter::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--brand-2),var(--brand))}
.meter.coll::before{background:linear-gradient(180deg,var(--gold),#A9701A)}
.meter .fill{background:linear-gradient(90deg,var(--brand-2),var(--brand))}
.meter.coll .fill{background:linear-gradient(90deg,var(--gold),#B37C1F)}
.meter h3{font-size:12.5px;font-family:Archivo,sans-serif;font-weight:600;color:var(--muted);letter-spacing:.01em}
.meter .big{font-family:"Bricolage Grotesque",sans-serif;font-size:27px;font-weight:800;letter-spacing:-.025em;margin:3px 0 2px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.meter .big span{font-family:Archivo,sans-serif;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.meter .track{height:9px;border-radius:5px;background:var(--line);overflow:hidden;margin:9px 0 7px;position:relative}
.meter .fill{height:100%;border-radius:5px;background:var(--brand);transition:width .25s}
.meter.coll .fill{background:var(--gold)}
.meter .needle{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.55;border-radius:2px}
.meter .sub{font-size:11.5px;color:var(--muted);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.meter .sub b{color:var(--ink);font-weight:600}

.strip-shell{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 15px 10px;box-shadow:0 1px 2px rgba(15,27,61,.05),0 6px 18px -14px rgba(15,27,61,.25)}
.strip-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.strip-hd .lbl{font-size:12.5px;color:var(--muted)}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:2px;margin-left:auto}
.seg button{border:0;background:none;padding:5px 12px;border-radius:7px;font-size:13px;color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.strip-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:6px}
/* every employee gets a column of the same width, with their figure written on it */
.strip{display:flex;align-items:stretch;gap:7px;min-width:100%;position:relative}
.ch-col{flex:1 1 0;min-width:76px;display:flex;flex-direction:column;gap:5px;cursor:pointer;
  border-radius:11px;padding:5px 4px 4px;background:none;border:0;text-align:center;
  transition:background .15s ease,transform .15s ease}
.ch-col:hover{background:var(--surface-2);transform:translateY(-1px)}
/* the column's layout lives on an inner span — Safari ignores flex layout on some <button>s,
   which collapsed every bar to a thin line */
.ch-col{display:block}
.ch-in{display:flex;flex-direction:column;gap:5px;width:100%;align-items:stretch}
.ch-in > span{display:block;width:100%}
.ch-in > .ch-track{display:flex;width:100%;box-sizing:border-box}
.ch-fill{flex:none;display:block}
/* an even grid: every column is the same width whatever the name, so nothing spills over */
.strip{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(88px,1fr);gap:7px}
.strip > .ch-col{min-width:0!important;width:100%;max-width:none;overflow:hidden;box-sizing:border-box}
.ch-in > .ch-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;
  overflow:hidden;text-overflow:clip;word-break:break-word;overflow-wrap:anywhere;min-height:2.35em;line-height:1.18}
.ch-in > .ch-val,.ch-in > .ch-tg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){ .strip{grid-auto-columns:minmax(76px,1fr)} }
.ch-col:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
.ch-val{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:12px;font-weight:800;
  letter-spacing:-.02em;line-height:1.1;white-space:nowrap;color:var(--ink)}
.ch-col.ok .ch-val{color:var(--ok)}
.ch-col.warn .ch-val{color:var(--warn)}
.ch-col.bad .ch-val{color:var(--bad)}
.ch-col.none .ch-val{color:var(--muted)}
.ch-track{position:relative;height:96px;border-radius:9px;background:var(--surface-2);
  border:1px solid var(--line-soft);display:flex;align-items:flex-end;overflow:hidden}
/* the dashed 100%-of-target line, repeated in every track so it reads as one line */
.ch-track::before{content:"";position:absolute;left:0;right:0;bottom:83.333%;
  border-top:1px dashed var(--line);z-index:2;pointer-events:none}
.ch-fill{width:100%;border-radius:8px 8px 0 0;background:var(--line);
  transition:height .35s cubic-bezier(.22,1,.36,1);position:relative;z-index:1}
.ch-col.ok   .ch-fill{background:linear-gradient(180deg,var(--ok),color-mix(in srgb,var(--ok) 72%,transparent))}
.ch-col.warn .ch-fill{background:linear-gradient(180deg,var(--warn),color-mix(in srgb,var(--warn) 72%,transparent))}
.ch-col.bad  .ch-fill{background:linear-gradient(180deg,var(--bad),color-mix(in srgb,var(--bad) 72%,transparent))}
.ch-col.none .ch-fill{background:var(--line)}
.ch-col:hover .ch-fill{filter:brightness(1.08)}
.ch-cap{position:absolute;left:0;right:0;top:5px;font-size:9.5px;font-weight:800;letter-spacing:.02em;
  color:var(--muted);z-index:3;pointer-events:none}
.ch-cap.inside{color:#fff;top:auto;bottom:5px}
.ch-name{font-size:11.5px;font-weight:700;color:var(--ink-2);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-tg{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== one person's whole month, in the space the chart was using ===== */
.whopick{display:inline-flex;align-items:center;gap:7px;margin-left:auto}
.whopick label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.whopick select{width:auto;min-width:172px;font-size:12.5px;padding:6px 10px}
.strip-hd .seg{margin-left:10px}
.sdetail[hidden]{display:none}
.sdetail{display:grid;gap:12px;grid-template-columns:minmax(210px,1.05fr) minmax(280px,1.45fr) minmax(210px,1fr);
  align-items:start;animation:sdin .22s ease}
@keyframes sdin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sd-box{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.sd-box h5{margin:0 0 9px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* who */
.sd-who{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:3px}
.sd-who b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:19px;font-weight:800;
  letter-spacing:-.025em;line-height:1.1}
.sd-who .code{background:var(--gold-soft);color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
  border-radius:99px;padding:3px 9px;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;font-variant-numeric:tabular-nums}
.sd-meta{font-size:11.5px;color:var(--muted);line-height:1.45}
.sd-eq{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);font-size:12px;color:var(--ink-2)}
.sd-eq b{font-weight:700}
.sd-facts{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.sd-fact{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:6px 9px;
  font-size:11px;color:var(--muted);line-height:1.25}
.sd-fact b{display:block;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:14px;
  font-weight:800;color:var(--ink);letter-spacing:-.02em}
/* the two meters */
.sd-m+.sd-m{margin-top:11px;padding-top:11px;border-top:1px solid var(--line-soft)}
.sd-mtop{display:flex;align-items:baseline;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.sd-mtop em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sd-mtop b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:18px;font-weight:800;letter-spacing:-.025em}
.sd-m.s .sd-mtop b{color:var(--brand)}
.sd-m.c .sd-mtop b{color:var(--gold)}
.sd-mtop .of{font-size:11.5px;color:var(--muted)}
.sd-mtop .tag{margin-left:auto}
.sd-track{position:relative;height:9px;border-radius:99px;background:var(--line);overflow:hidden}
.sd-track i{display:block;height:100%;border-radius:99px}
.sd-track i.ok{background:var(--ok)}.sd-track i.warn{background:var(--warn)}
.sd-track i.bad{background:var(--bad)}.sd-track i.none{background:var(--line)}
.sd-pace{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink-2);opacity:.55;border-radius:2px}
.sd-mfoot{display:flex;justify-content:space-between;gap:10px;margin-top:5px;font-size:11px;color:var(--muted)}
.sd-mfoot b{color:var(--ink-2);font-weight:700}
/* earnings */
.sd-pay{background:linear-gradient(160deg,var(--brand-soft),var(--surface-2));border-color:var(--brand-2)}
.sd-prow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;
  color:var(--muted);padding:5px 0}
.sd-prow em{font-style:normal;font-size:10.5px}
.sd-prow b{font-weight:700;color:var(--ink);font-size:13.5px;white-space:nowrap}
.sd-prow b.on{color:var(--ok)}
.sd-prow b.off{color:var(--muted)}
.sd-prow+.sd-prow{border-top:1px solid var(--line-soft)}
.sd-total{margin-top:7px;padding-top:9px;border-top:2px solid var(--brand);display:flex;
  justify-content:space-between;align-items:baseline;gap:10px}
.sd-total span{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.sd-total b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:22px;font-weight:800;
  letter-spacing:-.03em;color:var(--brand)}
/* the ladder across the bottom */
.sd-ladder{grid-column:1/-1;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.sd-slabs{display:flex;gap:8px;flex-wrap:wrap}
.sd-slab{flex:1 1 150px;min-width:140px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;
  background:var(--surface);position:relative}
.sd-slab.got{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 9%,var(--surface))}
.sd-slab.paid{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 17%,var(--surface));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ok) 28%,transparent)}
.sd-slab .amt{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:15px;font-weight:800;
  letter-spacing:-.02em;display:block}
.sd-slab.got .amt,.sd-slab.paid .amt{color:var(--ok)}
.sd-slab .sd-need{font-size:10.5px;color:var(--muted);display:block;margin-top:3px;line-height:1.35}
.sd-slab .legs{display:flex;gap:6px;margin-top:6px}
.sd-leg{flex:1;font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  text-align:center;border-radius:6px;padding:3px 0;background:var(--surface-2);color:var(--muted);
  border:1px solid var(--line-soft)}
.sd-leg.on{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);border-color:transparent}
.sd-slab .mark{position:absolute;top:7px;right:8px;font-size:10px;font-weight:800;color:var(--ok)}
.sd-next{margin-top:9px;font-size:11.5px;color:var(--muted)}
.sd-next b{color:var(--ink-2)}
@media (max-width:980px){
  .sdetail{grid-template-columns:1fr}
  .whopick{margin-left:0}
  .strip-hd .seg{margin-left:auto}
}
@media (max-width:640px){
  .whopick{width:100%}
  .whopick select{flex:1;min-width:0;min-height:40px}
  .sd-total b{font-size:20px}
  .sd-slab{flex:1 1 100%}
}

/* ===== Day by day: the breakdown a row opens ===== */
#tbl-days tr.dayrow{cursor:pointer}
#tbl-days tr.dayrow:hover td{background:var(--surface-2)}
#tbl-days tr.dayrow.open td{background:var(--brand-soft)}
.d-caret{display:inline-grid;place-content:center;width:19px;height:19px;border-radius:6px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:9px;
  margin-right:7px;vertical-align:1px;transition:transform .18s ease}
tr.dayrow:hover .d-caret{border-color:var(--brand-2);color:var(--brand)}
tr.dayrow.open .d-caret{transform:rotate(90deg);border-color:var(--brand);color:var(--brand)}
#tbl-days tr.daydet > td{padding:0;background:var(--surface-2);border-top:0}
.dd-wrap{padding:14px 16px 15px;border-left:3px solid var(--brand)}
.dd-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:11px}
.dd-hd h4{margin:0;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:15px;font-weight:800;
  letter-spacing:-.02em}
.dd-hd .dd-sub{font-size:11.5px;color:var(--muted)}
.dd-go{margin-left:auto;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--brand);
  background:var(--brand);color:#fff;border-radius:99px;padding:7px 14px;font-size:12.5px;
  font-weight:600;cursor:pointer;white-space:nowrap}
.dd-go:hover{filter:brightness(1.1)}
.dd-go svg{width:14px;height:14px;flex:none}
.dd-close{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:99px;
  padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer}
.dd-close:hover{border-color:var(--bad);color:var(--bad)}
.dd-tbl{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);
  border-radius:11px;overflow:hidden}
.dd-tbl th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  font-weight:700;text-align:left;padding:8px 12px;background:var(--surface-2);
  border-bottom:1px solid var(--line)}
.dd-tbl th.num,.dd-tbl td.num{text-align:right}
.dd-tbl td{padding:9px 12px;font-size:12.5px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.dd-tbl tr:last-child td{border-bottom:0}
.dd-tbl tbody tr:hover td{background:var(--surface-2)}
.dd-tbl .nm{font-weight:700;color:var(--ink)}
.dd-tbl .rl{font-size:10.5px;color:var(--muted);font-weight:400}
.dd-tbl .gr{font-size:10.5px;color:var(--muted);display:block}
.dd-tbl .s b{color:var(--brand)}
.dd-tbl .c b{color:var(--gold)}
.dd-tbl .note{color:var(--ink-2);font-style:italic}
.dd-tbl tfoot td{background:var(--surface-2);font-weight:700;border-top:1px solid var(--line)}
.dd-none{padding:16px;text-align:center;color:var(--muted);font-size:12.5px;background:var(--surface);
  border:1px dashed var(--line);border-radius:11px}
.dd-hint{font-size:11px;color:var(--muted);margin-top:9px}
@media (max-width:820px){
  /* Day by day keeps its wide grid and scrolls sideways, so the breakdown is pinned to
     the left edge and sized to the screen — otherwise it inherits the table's width */
  /* the breakdown lives inside the keepwide day table, so every rule here has to beat
     `.tablescroll.keepwide td`, which forces table-cell, nowrap and right alignment */
  .tablescroll.keepwide #tbl-days tr.daydet > td{position:relative;text-align:left;padding:0;
    min-height:0;display:table-cell;white-space:normal}
  .dd-wrap{padding:12px;position:sticky;left:0;width:min(100%,calc(100vw - 56px));
    box-sizing:border-box;text-align:left}
  /* each person becomes a small stacked card — three columns will not fit a phone */
  .tablescroll.keepwide .dd-tbl,
  .tablescroll.keepwide .dd-tbl tbody,
  .tablescroll.keepwide .dd-tbl tfoot,
  .tablescroll.keepwide .dd-tbl tr,
  .tablescroll.keepwide .dd-tbl td{display:block;width:100%;white-space:normal}
  .tablescroll.keepwide .dd-tbl thead{display:none}
  .tablescroll.keepwide .dd-tbl tbody tr{padding:9px 11px;border-bottom:1px solid var(--line-soft);
    background:var(--surface)}
  .tablescroll.keepwide .dd-tbl tbody tr:nth-child(odd) td{background:none}
  .tablescroll.keepwide .dd-tbl tbody tr:last-child{border-bottom:0}
  .tablescroll.keepwide .dd-tbl td{border:0;padding:2px 0;text-align:left;font-size:12.5px}
  .tablescroll.keepwide .dd-tbl td.num{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .tablescroll.keepwide .dd-tbl td.num::before{content:attr(data-lb)!important;font-size:10px;
    font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);min-width:78px}
  .dd-tbl td .gr{display:inline;margin-left:2px}
  .tablescroll.keepwide .dd-tbl tfoot tr{padding:10px 11px;border-top:1px solid var(--line)}
  .tablescroll.keepwide .dd-tbl tfoot td{background:var(--surface-2);border-top:0}
  .tablescroll.keepwide .dd-tbl td:empty{display:none}
  .tablescroll.keepwide .dd-tbl td:nth-child(4){display:block;margin-top:3px}
  .tablescroll.keepwide .dd-tbl td.nonote{display:none}
  .dd-go{margin-left:0;flex:1 1 auto;justify-content:center;min-height:42px}
  .dd-close{min-height:42px}
  .dd-hd{gap:8px}
  .dd-hd h4{width:100%;font-size:14px}
}
.strip-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--muted)}
.strip-foot .foot-one{display:none}
.strip-foot.sdon .legend,.strip-foot.sdon .foot-note{display:none}
.strip-foot.sdon .foot-one{display:inline;margin-left:auto}
.strip-foot.sdon .foot-one b{color:var(--ink-2)}
.legend{display:flex;gap:14px;flex-wrap:wrap}
.legend i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:1px}
.legend .ok{background:var(--ok)}.legend .warn{background:var(--warn)}.legend .bad{background:var(--bad)}.legend .none{background:var(--line)}
.hero-empty{height:88px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13.5px;text-align:center;padding:0 12px}

/* number fields: no spinner arrows, never clip the value */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0;display:none}
td input[type=number]{max-width:none!important;min-width:0;box-sizing:border-box}
.eqtbl td input[data-q="g"]{background:transparent;border:0;border-bottom:1.5px dashed var(--line);border-radius:0;padding:6px 2px;box-shadow:none}
.eqtbl td input[data-q="g"]:hover{border-bottom-color:var(--brand-2)}
.eqtbl td input[data-q="g"]:focus{background:transparent;border-bottom:2px solid var(--brand-2);outline:none}

.btn.pdfbtn{display:inline-flex;align-items:center;gap:6px}
.btn.pdfbtn svg{width:14px;height:14px;flex:none}
.btn.pdfbtn[disabled]{opacity:.7;cursor:progress}

.stpick{display:flex;gap:6px;align-items:center;flex:1 1 260px;min-width:0}
.stpick select{flex:1;min-width:0}
.stpick .btn{flex:none;width:36px;height:36px;padding:0;font-size:17px}
@media (max-width:640px){ #staffpick .toolbar{width:100%} #st-pdf{width:100%;justify-content:center} }
.who .eqsub{color:var(--brand);font-weight:600}
.gsel2{width:auto;padding:5px 8px;font-size:12.5px;border-radius:7px;background:var(--brand-soft);color:var(--brand);border:1px solid transparent;font-weight:600}
.addgrid input,.addgrid select{height:42px}
@media (min-width:641px){ .addgrid .fgrade{grid-column:span 2} }
@media (max-width:640px){
  .addgrid input,.addgrid select{height:46px}
  .addgrid .fgrade{grid-column:1/-1}
}
/* daily completion checklist */
.ckcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:14px;box-shadow:0 1px 2px rgba(15,27,61,.05),0 8px 22px -16px rgba(15,27,61,.3);overflow:hidden}
.ck-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.ck-month{display:flex;align-items:center;gap:8px;margin-right:auto;min-width:0}
.ck-month h3{font-size:16px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.ck-month p{margin:1px 0 0;font-size:11.5px;color:var(--muted)}
.ck-month p b{color:var(--bad);font-weight:600}
.ck-nav{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;font-size:15px;line-height:1;display:grid;place-content:center;flex:none}
.ck-nav:hover{border-color:var(--brand-2);color:var(--brand)}
.ck-clock{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;border-radius:99px;padding:5px 11px;background:var(--brand-soft);color:var(--brand)}
.ck-clock i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9}
.ck-clock.ok{background:var(--ok-bg);color:var(--ok)}
.ck-clock.warn{background:var(--warn-bg);color:var(--warn)}
.ck-clock.bad{background:var(--bad-bg);color:var(--bad)}
.ck-main{display:grid;grid-template-columns:minmax(0,1fr) 278px}
.ck-cal{padding:10px 14px 12px;min-width:0}
.ck-side{border-left:1px solid var(--line-soft);padding:12px 14px;display:flex;flex-direction:column;gap:10px;background:var(--surface-2)}
.ck-leads{border:1px solid var(--line-soft);background:var(--surface);border-radius:12px;padding:9px 10px;display:flex;flex-direction:column;gap:7px;min-width:0;overflow:hidden}
.ck-lh{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ck-lh b{font-size:11.5px;letter-spacing:.02em}
.ck-lh select{width:auto;min-width:0;flex:0 1 auto;font-size:10.5px;padding:3px 20px 3px 7px;border-radius:7px;background-position:right 5px center}
.ck-lview{overflow:hidden;touch-action:pan-y;cursor:grab;outline:none;border-radius:8px}
.ck-lview:focus-visible{box-shadow:0 0 0 2px var(--brand-soft)}
.ck-ltrack{display:flex;transition:transform .28s ease}
.ck-lslide{flex:0 0 100%;min-width:100%;display:flex;flex-direction:column;gap:6px}
.ck-lslide .st{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.ck-lsum{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.ck-lsum div{background:var(--surface-2);border-radius:8px;padding:5px 7px;min-width:0}
.ck-lsum b{display:block;font-size:13px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-lsum span{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.ck-llist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ck-llist li{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:6px;font-size:11px}
.ck-llist i{width:8px;height:8px;border-radius:50%;display:block}
.ck-llist .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2);font-weight:600}
.ck-llist .vv{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ck-lbar{height:5px;border-radius:5px;background:var(--line-soft);overflow:hidden;margin-top:2px}
.ck-lbar i{display:block;height:100%;border-radius:5px}
.ck-lrow{display:flex;justify-content:space-between;gap:6px;font-size:11px;color:var(--ink-2)}
.ck-lrow b{font-variant-numeric:tabular-nums}
.ck-lspark{display:block;width:100%;height:42px}
.ck-lnav{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ck-larr{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);width:22px;height:22px;border-radius:7px;line-height:1;cursor:pointer;font-size:13px;padding:0}
.ck-larr:hover{border-color:var(--brand);color:var(--brand)}
.ck-ldots{display:flex;gap:4px}
.ck-ldots button{width:6px;height:6px;border-radius:50%;border:0;padding:0;background:var(--line);cursor:pointer}
.ck-ldots button.on{background:var(--brand);width:14px;border-radius:99px}
.ck-lmore{border:0;background:none;color:var(--brand);font:inherit;font-size:11px;font-weight:700;cursor:pointer;padding:2px 0 0;text-align:left}
.ck-lmore:hover{text-decoration:underline}
.ck-lempty{font-size:11px;color:var(--muted)}
@media (max-width:980px){ .ck-leads{flex:1 1 260px} }
@media (max-width:640px){ .ck-leads{flex:1 1 100%} .ck-lsum{grid-template-columns:1fr 1fr 1fr} }
.ck-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.ck-wd{font-size:10.5px;font-weight:600;color:var(--muted);text-align:center;letter-spacing:.05em;text-transform:uppercase;padding-bottom:1px}
.ck-day{position:relative;border:1px solid var(--line-soft);background:var(--surface);border-radius:8px;padding:4px 3px 5px;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px}
.ck-day .dn{font-size:11.5px;font-weight:700;line-height:1;color:var(--ink-2);background:none;border:0;padding:2px 5px;border-radius:5px;cursor:pointer}
.ck-day .dn:hover{background:var(--brand-soft)}
.ck-day.today{border-color:var(--brand-2);box-shadow:0 0 0 2px var(--brand-soft)}
.ck-day.today .dn{background:var(--brand-2);color:var(--on-brand)}
.ck-day.done{background:var(--brand-soft);border-color:transparent}
.ck-day.miss{background:var(--bad-bg);border-color:transparent}
.ck-day.miss .dn{color:var(--bad)}
.ck-day.today.miss .dn{color:var(--on-brand);background:var(--bad)}
.ck-day.future,.ck-day.off{background:transparent}
.ck-day.future .dn,.ck-day.off .dn{color:var(--muted);font-weight:600}
.ck-day.blank{visibility:hidden}
.ck-dots{display:flex;gap:2px;font-size:8.5px;font-weight:700}
.ck-dots i{font-style:normal;border-radius:3px;padding:0 3px;line-height:13px;background:var(--line-soft);color:var(--muted)}
.ck-dots i.on{background:var(--ok-bg);color:var(--ok)}
.ck-foot{display:flex;gap:12px;flex-wrap:wrap;margin-top:9px;font-size:11px;color:var(--muted)}
.ck-foot i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:0}
.ck-foot .l-done{background:var(--brand-2)}.ck-foot .l-miss{background:var(--bad)}.ck-foot .l-open{border:1.5px solid var(--brand-2)}
/* side panel */
.ck-eval{display:flex;align-items:center;gap:11px}
.ck-ring{--p:0;--c:var(--ok);width:52px;height:52px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--line) 0);display:grid;place-content:center;flex:none}
.ck-ring span{width:41px;height:41px;border-radius:50%;background:var(--surface-2);display:grid;place-content:center;font-size:12px;font-weight:800;font-family:"Bricolage Grotesque",sans-serif}
.ck-eval .t{font-size:11.5px;color:var(--muted);line-height:1.35}
.ck-eval .t b{display:block;color:var(--ink);font-size:13px}
.ck-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.ck-stat{background:var(--surface);border:1px solid var(--line-soft);border-radius:9px;padding:6px 4px;text-align:center}
.ck-stat b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:17px;font-weight:800;line-height:1.1}
.ck-stat span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ck-stat.good b{color:var(--ok)}.ck-stat.neg b{color:var(--bad)}
.ck-by{font-size:11px;color:var(--muted);margin-top:auto}
.ck-by b{color:var(--ink-2);font-weight:600}
/* tick box */
.ck{appearance:none;-webkit-appearance:none;margin:0;width:19px;height:19px;border:1.75px solid var(--brand-2);border-radius:4px;background:var(--surface);cursor:pointer;display:grid;place-content:center;transition:background .15s,border-color .15s,box-shadow .15s;flex:none}
.ck::before{content:"";width:9px;height:5px;border-left:2px solid var(--on-brand);border-bottom:2px solid var(--on-brand);transform:translate(0,-1px) rotate(-45deg) scale(0);transition:transform .16s cubic-bezier(.3,1.6,.5,1)}
.ck:checked{background:var(--brand-2);border-color:var(--brand-2)}
.ck:checked::before{transform:translate(0,-1px) rotate(-45deg) scale(1)}
.ck:hover:not(:disabled){box-shadow:0 0 0 3px var(--brand-soft)}
.ck:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ck:disabled{border-color:var(--line);background:var(--surface-2);cursor:not-allowed}
.ck:disabled:checked{background:var(--brand-2);border-color:var(--brand-2);opacity:.6}
.ckx{width:19px;height:19px;border-radius:4px;background:var(--bad);color:#fff;display:grid;place-content:center;font-size:12px;font-weight:800;line-height:1}
@media (max-width:760px){
  .ck-main{grid-template-columns:1fr}
  .ck-side{border-left:0;border-bottom:1px solid var(--line-soft);order:-1;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 14px}
  .ck-stats{flex:1;min-width:170px}
  .ck-by{width:100%;margin-top:0}
}
@media (max-width:520px){
  .ck-wd .wdl{display:none}
  .ck-grid{gap:3px}
  .ck-day{min-height:48px;border-radius:7px}
  .ck-month p{display:none}
  .ck-eval .t{display:none}
}

/* tabs */
.tabs{display:flex;gap:3px;margin:20px 0 18px;background:var(--surface-2);border:1px solid var(--line);border-radius:13px;padding:4px;width:fit-content;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabs button{border:0;background:none;padding:9px 18px;border-radius:10px;color:var(--muted);font-weight:500;cursor:pointer;white-space:nowrap;transition:color .12s,background .12s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--brand);color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(27,58,156,.25)}
.panel[hidden]{display:none}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(15,27,61,.05),0 6px 18px -12px rgba(15,27,61,.22);overflow:hidden}
.card + .card{margin-top:18px}
.card-hd{padding:14px 16px;border-bottom:1px solid var(--line-soft);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.card-hd h3{font-size:16px}
.card-hd p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.card-bd{padding:14px 16px}
.spacer{margin-left:auto}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:8px 14px;font-weight:500;cursor:pointer}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:linear-gradient(180deg,var(--brand-2),var(--brand));border-color:var(--brand);color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(27,58,156,.24)}
.btn.primary:hover{filter:brightness(1.12)}
.btn.danger{color:var(--bad);border-color:transparent;background:none}
.btn.danger:hover{background:var(--bad-bg)}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:7px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:11.5px;color:var(--muted)}
input[type=text],input[type=number],input[type=search],input[type=date],input[type=month],select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}
textarea{resize:vertical;min-height:88px;line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* daily entry rows */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:minmax(0,1.25fr) 132px 168px minmax(150px,1fr) 68px;gap:14px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:0}
.row:nth-child(odd){background:var(--surface-2)}
.who{min-width:0}
.who .nm{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .sub{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* number fields */
.inp{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0}
.inp > span{font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.01em;padding-left:2px}
.inp input{
  width:100%;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;font-size:15.5px;font-weight:700;text-align:right;
  transition:background .12s,border-color .12s,box-shadow .12s;
}
.inp.s input{border-left:3px solid var(--brand)}
.inp.c input{border-left:3px solid var(--gold)}
.inp input.v{padding-left:30px}
.inp .iw{position:relative;display:block;min-width:0}
.inp .cur{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted);font-size:13.5px;font-weight:600;pointer-events:none}
.inp.filled input{background:var(--brand-soft);border-color:transparent;border-left-width:3px}
.inp.s.filled input{border-left-color:var(--brand)}
.inp.c.filled input{background:var(--gold-soft);border-left-color:var(--gold)}
.inp input:hover{border-color:var(--brand-2)}
.inp input:focus{background:var(--surface);border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-soft);outline:none}
.inp input:disabled{opacity:.55;cursor:not-allowed}
.inp input::placeholder{color:var(--muted);opacity:.55;font-weight:500}

/* month-to-date bars */
.mtd{font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:6px;min-width:0}
.mtd .line{display:flex;align-items:center;gap:8px}
.mtd .tag2{width:52px;flex:none;font-size:10px;font-weight:600;color:var(--muted)}
.mtd .track{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden;min-width:34px}
.mtd .fill{display:block;height:100%;border-radius:3px}
.mtd .fill.ok{background:var(--ok)}.mtd .fill.warn{background:var(--warn)}.mtd .fill.bad{background:var(--bad)}.mtd .fill.none{background:var(--line)}
.mtd .v{white-space:nowrap;font-size:11px}
.mtd .v b{color:var(--ink);font-weight:600}

/* row actions */
.acts{display:flex;align-items:center;gap:2px;justify-self:end}
.iconbtn{border:1px solid transparent;background:none;cursor:pointer;color:var(--muted);padding:7px;border-radius:8px;line-height:0}
.iconbtn:hover{background:var(--brand-soft);color:var(--brand);border-color:var(--line)}
.iconbtn.has{color:var(--brand);background:var(--brand-soft)}
.iconbtn.del:hover{background:var(--bad-bg);color:var(--bad)}
.notewrap{grid-column:1/-1;display:none;padding-top:6px}
.row.open .notewrap{display:block}
.notewrap input{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 11px;width:100%}

@media (max-width:900px){
  .row{grid-template-columns:minmax(0,1fr) 120px 150px 68px;
       grid-template-areas:"who s c acts" "mtd mtd mtd mtd";row-gap:12px;padding:13px 14px}
  .who{grid-area:who}.inp.s{grid-area:s}.inp.c{grid-area:c}.acts{grid-area:acts}
  .mtd{grid-area:mtd;flex-direction:row;gap:18px}
  .mtd .line{flex:1}
}
@media (max-width:600px){
  .row{grid-template-columns:minmax(0,1fr) 68px;
       grid-template-areas:"who acts" "s s" "c c" "mtd mtd";row-gap:10px}
  .inp{flex-direction:row;align-items:center;gap:10px}
  .inp > span{width:78px;flex:none;font-size:12px;padding:0}
  .inp .iw{flex:1}
  .mtd{flex-direction:column;gap:7px}
}

/* tables */
.tablescroll{overflow-x:auto}
table.dense{font-size:12.5px}
table.dense th{font-size:9.5px;letter-spacing:.02em;padding:8px 6px}
table.dense td{padding:7px 6px}
table.dense td.cell-name{font-size:13px}
table.dense input,table.dense select{padding:4px 6px;font-size:12.5px}
@media (min-width:861px){
  table.dense{table-layout:fixed;width:100%}
  table.dense td,table.dense th{overflow:hidden;text-overflow:ellipsis}
}

@media (max-width:460px){ .tablescroll td input,.tablescroll td select{max-width:120px!important} }
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
th.sortable{cursor:pointer}
th.sortable:hover{color:var(--ink)}
th[aria-sort]{color:var(--ink);font-weight:600}
td{padding:9px 11px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
tfoot td{background:var(--surface-2);border-top:2px solid var(--line);font-weight:600;padding:11px 12px}
td.num,th.num{text-align:right}
td input[type=text],td input[type=number]{padding:6px 8px;border-color:transparent;background:var(--surface-2)}
td input:hover{border-color:var(--line)}
.cell-name{font-weight:600}
tr.today td{background:var(--brand-soft)}
tr.futured td{opacity:.5}
.tag{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tag.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.tag.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.tag.bad{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.tag.none{background:var(--surface-2)}
.minibar{width:64px;height:6px;border-radius:3px;background:var(--line);overflow:hidden;display:inline-block;vertical-align:middle;margin-right:7px}
.minibar i{display:block;height:100%;background:var(--ok)}
.minibar i.warn{background:var(--warn)}.minibar i.bad{background:var(--bad)}.minibar i.none{background:var(--line)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line-soft)}
.kpi{background:var(--surface);padding:15px 16px}
.kpi:hover{background:var(--surface-2)}
.kpi b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:23px;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.kpi span{font-size:11.5px;color:var(--muted)}

.days{display:flex;gap:3px;flex-wrap:wrap}
.days .d{width:40px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line-soft);font-size:9.5px;padding:3px 2px;text-align:center;color:var(--muted);line-height:1.3}
.days .d.has{background:var(--brand-soft);border-color:transparent;color:var(--ink)}
.days .d b{display:block;font-size:10px;font-weight:700}
.days .d i{display:block;font-style:normal;color:var(--gold);font-weight:600}

.eq{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:8px;padding:3px 9px;font-size:12px;color:var(--muted);white-space:nowrap}
.eq b{color:var(--ink);font-weight:600}
.eq .x{color:var(--brand);font-weight:700}
/* narrow screens: tables fold into labelled cards instead of scrolling sideways */
@media (max-width:820px){
  .tablescroll{overflow-x:visible}
  .tablescroll table,.tablescroll tbody,.tablescroll tfoot,.tablescroll tr,.tablescroll td{display:block;width:100%}
  .tablescroll thead{display:none}
  .tablescroll tr{border:1px solid var(--line);border-radius:13px;margin:12px 16px;overflow:hidden;background:var(--surface)}
  .tablescroll tbody tr:hover td{background:none}
  .tablescroll td{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:right;
    border-bottom:1px solid var(--line-soft);padding:8px 13px;min-height:38px}
  .tablescroll td::before{content:attr(data-label);color:var(--muted);font-size:11px;font-weight:600;
    letter-spacing:.02em;text-align:left;flex:none;max-width:50%;white-space:normal;line-height:1.25}
  .tablescroll td:not([data-label])::before{content:""}
  .tablescroll td:last-child{border-bottom:0}
  .tablescroll:not(.keepwide) tr{width:auto}
  .tablescroll:not(.keepwide) td{flex-wrap:wrap;white-space:normal;min-width:0;overflow-wrap:anywhere}
  .tablescroll:not(.keepwide) td.sl{width:fit-content;flex-wrap:nowrap;justify-content:flex-start;gap:6px;overflow-wrap:normal;white-space:nowrap;border-bottom-right-radius:9px}
  .tablescroll td > .sub2{flex-basis:100%;text-align:right;margin-top:0}
  .tablescroll td:empty{display:none}
  .tablescroll td.sl{background:var(--brand);color:#fff;font-weight:700;border-bottom:0;padding:6px 13px;min-height:0;font-size:12px}
  .tablescroll td.sl::before{color:rgba(255,255,255,.75)}
  .tablescroll td input,.tablescroll td select{max-width:170px!important;width:auto}
  .tablescroll tfoot tr{background:var(--surface-2);border-color:var(--brand)}
  .tablescroll tfoot td{background:var(--surface-2);border-bottom:1px solid var(--line-soft)}
  .tablescroll td.pick{justify-content:flex-start;background:var(--surface-2)}
  /* the business equation keeps its full grid and scrolls sideways instead of folding */
  .tablescroll.keepwide{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .tablescroll.keepwide table{display:table;width:max-content;min-width:100%;border-collapse:collapse}
  .tablescroll.keepwide thead{display:table-header-group}
  .tablescroll.keepwide tbody{display:table-row-group}
  .tablescroll.keepwide tfoot{display:table-footer-group}
  .tablescroll.keepwide tr{display:table-row;border:0;margin:0;border-radius:0;background:none}
  .tablescroll.keepwide tbody tr:nth-child(odd) td{background:var(--surface-2)}
  .tablescroll.keepwide tfoot td{background:var(--surface-2);border-top:2px solid var(--line)}
  .tablescroll.keepwide td{display:table-cell;text-align:right;padding:7px 8px;min-height:0;
    border-bottom:1px solid var(--line-soft);white-space:nowrap}
  .tablescroll.keepwide td::before{content:none!important}
  .tablescroll.keepwide th{display:table-cell}
  .tablescroll.keepwide td.cell-name{text-align:left;white-space:normal;min-width:120px}
  .tablescroll.keepwide td.sl{background:none;color:var(--muted);font-weight:400;font-size:12px;
    padding:7px 8px;text-align:right;border-bottom:1px solid var(--line-soft)}
  .tablescroll.keepwide td.sl::before{content:none}
  .tablescroll.keepwide td input,.tablescroll.keepwide td select{max-width:104px!important}
  .days .d{width:calc(20% - 3px)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .meters{grid-template-columns:1fr}
}
/* staff report sheet */
.sheet .sheet-hd{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;padding:18px 18px 14px;
  background:linear-gradient(104deg,var(--brand-deep),#1B3A9C 60%,#2E56D3);color:#fff}
.sheet .sheet-hd h2{font-size:clamp(20px,5vw,27px);color:#fff;letter-spacing:-.02em}
.sheet .sheet-hd p{margin:4px 0 0;font-size:13px;color:rgba(255,255,255,.82)}
.sheet .sheet-meta{margin-left:auto;text-align:right}
.sheet .sheet-meta b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:17px}
.sheet .sheet-meta span{font-size:11.5px;color:rgba(255,255,255,.8)}
.tgtgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.tgt{border:1px solid var(--line);border-radius:14px;padding:13px 14px;background:var(--surface-2);display:flex;flex-direction:column;gap:11px}
.tgt-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.tgt-hd b{display:block;font-size:14.5px}
.tgt-hd span{font-size:12px;color:var(--muted)}
.tg-line{display:flex;flex-direction:column;gap:5px}
.tg-row{display:flex;align-items:baseline;gap:8px}
.tg-row label{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;min-width:74px}
.tg-row b{font-size:17px;font-family:"Bricolage Grotesque",sans-serif;letter-spacing:-.01em}
.tg-row em{margin-left:auto;font-style:normal;font-weight:700;font-size:13px}
.tg-row.sm{justify-content:space-between;font-size:11.5px;color:var(--muted)}
.needgrid,.paygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.need,.pay{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface-2)}
.need label,.pay label{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-bottom:3px}
.need b,.pay b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em}
.need span,.pay span{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
.pay.big{background:var(--brand-soft);border-color:transparent}
.pay.big b{color:var(--brand);font-size:26px}
.pbar{height:7px;border-radius:4px;background:var(--line);overflow:hidden;margin:8px 0 2px}
.pbar i{display:block;height:100%;background:var(--ok);border-radius:4px}
.pbar i.warn{background:var(--warn)}
.nextslab{margin-top:12px;padding:11px 14px;border-radius:11px;background:var(--gold-soft);
  border:1px solid rgba(201,139,30,.3);font-size:13px;color:var(--ink-2)}
.nextslab b{color:var(--ink);font-weight:700}
.printonly{display:none}
@media print{
  @page{margin:12mm}
  :root{--bg:#fff;--surface:#fff;--surface-2:#f6f7fa;--ink:#101828;--ink-2:#344054;--muted:#667085;
        --line:#d0d5dd;--line-soft:#e4e7ec;--brand:#1B3A9C;--brand-soft:#e8edfb;--gold-soft:#fdf4e3;--shadow:none}
  body{background:#fff}
  .mast,.hero,.tabs,.robanner,.noprint,.pdfhide,.toast,.scrim{display:none!important}
  .panel{display:none!important}
  #panel-staff{display:block!important}
  .wrap{padding:0;max-width:none}
  .printonly{display:block;margin-bottom:10px;font-size:11px;color:#667085}
  .card{break-inside:avoid;page-break-inside:avoid;box-shadow:none;margin-top:10px}
  .sheet .sheet-hd{background:#1B3A9C!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tag,.kpi b{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tablescroll{overflow:visible}
  .tablescroll table,.tablescroll tbody,.tablescroll tfoot,.tablescroll tr{display:revert;width:auto}
  .tablescroll thead{display:table-header-group}
  .tablescroll tr{border:0;margin:0;border-radius:0}
  .tablescroll td{display:table-cell;min-height:0;text-align:left}
  .tablescroll td.num{text-align:right}
  .tablescroll td::before{content:none}
}
/* equation cards */
th.grp{text-align:center;background:var(--brand-soft);color:var(--brand);border-bottom:1px solid var(--line)}
th.grp.sale{background:var(--brand-soft);color:var(--brand)}
th.grp.coll{background:var(--gold-soft);color:var(--gold)}
td.sale,th.sale{border-left:1px solid var(--line)}
td.coll,th.coll{border-left:1px solid var(--line)}
.eqtbl td{white-space:nowrap}
.eqtbl td.cell-name{white-space:normal;min-width:150px}
.eqtbl .sub2{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:2px}
.eqtbl .gsel{appearance:none;-webkit-appearance:none;background:var(--brand-soft);color:var(--brand);
  border:1px solid transparent;border-radius:99px;font-size:11px;font-weight:600;padding:3px 10px;
  margin-top:5px;cursor:pointer;width:auto;max-width:none}
.eqtbl .gsel:hover{border-color:var(--brand)}
.eqtbl td input{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;font-weight:600;text-align:right;font-size:14px}
.eqtbl td input:focus{border-color:var(--brand-2);background:var(--surface)}
.eqtbl td.big{font-weight:600}
.eqtbl tbody tr.main{cursor:pointer}
.eqtbl tbody tr.open td{background:var(--brand-soft)}
.slabwrap{padding:4px 0 2px}
.slabmini{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line);border-radius:11px;overflow:hidden;font-size:12.5px}
.slabmini > div{background:var(--surface);padding:9px 12px}
.slabmini .hd{background:var(--surface-2);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.slabmini .r{text-align:right}
.slabmini .lb{font-weight:600}
.slabmini .lb span{display:block;font-size:11px;color:var(--muted);font-weight:400}
.slabmini .me{background:var(--brand-soft)}
.expand{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:11px;line-height:1;margin-left:8px}
.gradepill{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--brand-soft);color:var(--brand);font-weight:600;white-space:nowrap}
.taxset{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:9px;padding:4px 10px;background:var(--surface)}
.taxset input{width:56px;border:0;background:none;padding:2px 0;font-weight:600;color:var(--ink);text-align:right}
.inp em{font-style:normal;font-size:10.5px;color:var(--muted);text-align:right;min-height:13px;line-height:1.2}
.inp em b{color:var(--ink-2);font-weight:600}
@media (max-width:600px){ .inp{flex-wrap:wrap} .inp em{flex-basis:100%;order:3} }
.netnote{font-size:11px;color:var(--muted);display:block;font-weight:400}
.selbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;background:var(--brand-soft);border-bottom:1px solid var(--line)}
.selbar[hidden]{display:none}
.selbar .cnt{font-weight:600}
.selbar .sp{margin-left:auto}
.chk{width:17px;height:17px;accent-color:var(--brand);cursor:pointer;vertical-align:middle}
td.pick,th.pick{width:38px;padding-left:16px;padding-right:4px}
td.sl,th.sl{width:44px;color:var(--muted);font-size:12.5px;text-align:right;padding-right:10px}
tr.picked td{background:var(--brand-soft)}
.quota{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.quota .track{flex:1 1 180px;height:8px;border-radius:4px;background:var(--line);overflow:hidden;min-width:120px}
.quota .fill{height:100%;background:var(--brand);border-radius:4px}
.quota b{font-family:"Bricolage Grotesque",sans-serif;font-size:19px}
.addgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;align-items:end}
.addgrid .act{display:flex;gap:8px}
.hint{font-size:12.5px;color:var(--muted);margin:8px 0 0}
.empty{padding:34px 18px;text-align:center;color:var(--muted)}
.empty h3{color:var(--ink);font-size:17px;margin-bottom:6px}

.mastpdf{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:11px;border:1px solid #fff;background:#fff;color:var(--brand);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 2px 10px -4px rgba(0,0,0,.35)}
.mastpdf:hover{background:#fff;color:var(--brand);border-color:#fff}
.mastpdf:disabled{opacity:.7;cursor:progress}
.mastpdf svg{width:15px;height:15px;flex:none}
@media (max-width:860px){ .mastpdf span{display:none} .mastpdf{padding:0 10px} }
@media (max-width:640px){ .mastpdf{height:30px;border-radius:9px} }
.accesspill{font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);white-space:nowrap;cursor:pointer}
@media (max-width:640px){.accesspill{display:none}}
.accesspill.edit{background:rgba(95,224,163,.2);border-color:rgba(95,224,163,.55)}
.accesspill.view{background:rgba(217,154,43,.22);border-color:rgba(217,154,43,.6)}
.robanner .rbtn{margin-left:8px;font:inherit;font-weight:700;background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;padding:0}
.whohere{display:flex;align-items:center;gap:-4px}
.whohere .pchip{width:25px;height:25px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff;border:2px solid rgba(255,255,255,.55);margin-left:-7px;letter-spacing:.02em;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.whohere .pchip:first-child{margin-left:0}
.whohere .pchip.me{border-color:#fff}
.whohere .more{font-size:11.5px;color:rgba(255,255,255,.8);margin-left:8px}
.robanner{background:var(--warn-bg);border:1px solid rgba(194,134,30,.35);border-radius:11px;padding:12px 15px;margin:16px 0 0;font-size:13.5px;color:var(--ink-2)}
.robanner b{font-weight:600;color:var(--ink)}
.robanner[hidden]{display:none}
.byline{color:var(--brand)!important}
.byline b{font-weight:600}
.share ol{margin:8px 0 0;padding-left:20px;font-size:13.5px;color:var(--ink-2);line-height:1.7}
.share code{background:var(--surface-2);padding:1px 6px;border-radius:5px;font-size:12.5px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:99px;font-size:13.5px;font-weight:500;z-index:80;opacity:0;pointer-events:none;transition:opacity .18s}
.toast.show{opacity:1}
.scrim{position:fixed;inset:0;background:rgba(6,16,46,.55);z-index:70;display:flex;align-items:center;justify-content:center;padding:18px}
.scrim[hidden]{display:none}
.modal{background:var(--surface);border-radius:14px;max-width:560px;width:100%;max-height:82vh;overflow:auto;border:1px solid var(--line)}
.foot{display:flex;gap:10px;justify-content:flex-end;padding:0 16px 16px}
.skel{padding:46px;text-align:center;color:var(--muted)}

/* date field fix (all sizes): keep the header date readable in light mode */
.datefield input[type=date]{background:none;border:0;color:#fff;padding:0;width:auto}
.tabs .tic,.tabs .ts{display:none}
.ck-toggle{display:none}

/* ================= PHONE REDESIGN (≤640px) ================= */
@media (max-width:640px){
  body{font-size:14.5px}
  .wrap{padding:0 12px calc(92px + env(safe-area-inset-bottom,0px))}

  /* compact header */
  .mast-in{padding:8px 12px;gap:8px;flex-wrap:nowrap}
  .brandmark{gap:8px}
  .brandmark img{height:26px}
  .brandmark .rule{height:22px}
  .brandmark h1{font-size:14.5px}
  .brandmark h1 em{font-size:10.5px}
  .datefield{padding:5px 8px;border-radius:8px;gap:0;flex:none}
  .datefield input[type=date]{font-size:13px;min-width:0;width:112px}
  .whohere{display:none}
  .statepill{gap:0}
  .statepill span{display:none}

  /* hero: tight stack */
  .hero{padding:12px 0 10px;border-bottom:0}
  .hero-top{margin-bottom:10px;gap:8px;align-items:center}
  .hero-top h2{font-size:22px}
  .hero-top h2 small{font-size:11.5px;margin-top:3px}
  .pace{font-size:11.5px;padding:6px 10px;width:100%;border-radius:8px}
  .meters{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
  .meter{padding:11px 11px 10px 14px;border-radius:12px}
  .meter::before{width:4px}
  .meter h3{font-size:11px}
  .meter .big{font-size:19px;gap:0;margin:2px 0 0;display:block}
  .meter .big span{display:block;font-size:10.5px;margin-top:1px}
  .meter .track{height:6px;margin:7px 0 6px}
  .meter .sub{font-size:10.5px;display:block;line-height:1.35}
  .meter .sub > *{display:block}
  .strip-shell{padding:10px 11px 8px;border-radius:12px}
  .strip-hd .lbl{font-size:11px;width:100%}
  .strip-hd .seg{margin-left:0}
  .strip{height:auto;gap:6px}
  .ch-col{min-width:70px;padding:4px 3px}
  .ch-track{height:76px}
  .ch-val{font-size:11.5px}
  .ch-name{font-size:11px}
  .ch-tg{font-size:9.5px}
  .strip-foot{font-size:10.5px}
  .strip-foot .legend{gap:8px}
  .strip-foot > span:last-child{display:none}

  /* checklist: current week by default, tap to see the month */
  .ckcard{border-radius:12px;margin-bottom:10px}
  .ck-hd{padding:9px 11px}
  .ck-month h3{font-size:15px}
  .ck-clock{font-size:11px;padding:4px 9px}
  .ck-cal{padding:8px 10px 10px}
  .ck-side{padding:8px 11px;gap:8px}
  .ck-ring{width:42px;height:42px}.ck-ring span{width:33px;height:33px;font-size:10.5px}
  .ck-stat{padding:4px 2px}.ck-stat b{font-size:15px}.ck-stat span{font-size:9px}
  .ck-by{font-size:10.5px}
  .ck-grid.collapsed .ck-day:not(.wk){display:none}
  .ck-day{min-height:50px}
  .ck-toggle{display:flex;justify-content:center;margin-top:8px}
  .ck-toggle button{border:1px solid var(--line);background:var(--surface-2);color:var(--brand);font-weight:600;font-size:12px;border-radius:99px;padding:5px 14px;cursor:pointer}
  .ck-foot{gap:8px;font-size:10px}
  .ck-foot > span:last-child{display:none}

  /* bottom navigation replaces the top tab strip */
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:45;margin:0;width:auto;max-width:none;border-radius:0;
        border:0;border-top:1px solid var(--line);background:var(--surface);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));
        display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:0;overflow:visible;box-shadow:0 -6px 20px -12px rgba(15,27,61,.35)}
  .tabs button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 5px;border-radius:10px;font-size:9.5px;font-weight:600;min-width:0}
  .tabs button .tf{display:none}
  .tabs button .ts{display:block;white-space:nowrap;letter-spacing:-.01em}
  .tabs button .tic{display:block;width:21px;height:21px}
  .tabs button .tic svg{width:21px;height:21px;display:block}
  .tabs button[aria-selected="true"]{background:var(--brand-soft);color:var(--brand);box-shadow:none}
  .panel{margin-top:4px}

  /* cards + toolbars */
  .card{border-radius:12px}
  .card + .card{margin-top:12px}
  .card-hd{padding:11px 12px;gap:8px}
  .card-hd h3{font-size:15px}
  .card-hd p{font-size:11.5px}
  .card-hd .spacer{display:none}
  .card-bd{padding:11px 12px}
  .toolbar{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .toolbar > *{min-width:0!important;width:100%!important}
  .toolbar > input[type=search],.toolbar > .stpick,.toolbar > .pdfbtn,.toolbar > .taxset{grid-column:1/-1}
  .toolbar select,.toolbar input{padding:8px 9px;font-size:13.5px}
  .toolbar .btn{justify-content:center;text-align:center}
  .btn.pdfbtn{padding:8px 10px}
  input[type=text],input[type=number],input[type=search],input[type=date],input[type=month],select,textarea{font-size:16px} /* stops iOS zoom on focus */
  .toolbar select,.toolbar input,.inp input{font-size:16px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{padding:10px 12px}
  .kpi b{font-size:18px}
  .kpi span{font-size:10.5px}

  /* daily entry: compact two-up cards */
  .row{grid-template-columns:1fr 1fr;grid-template-areas:"who acts" "s c" "mtd mtd";row-gap:8px;column-gap:8px;padding:11px 12px}
  .who .nm{font-size:14.5px}
  .who .sub{font-size:11px}
  .who .eqsub{white-space:normal;line-height:1.3;margin-top:1px}
  .acts{align-self:start}
  .iconbtn{padding:6px}
  .inp{flex-direction:column!important;align-items:stretch!important;gap:3px!important;flex-wrap:nowrap!important}
  .inp > span{width:auto!important;font-size:10.5px!important;padding-left:2px!important}
  .inp .iw{flex:none!important}
  .inp input.v{padding:9px 9px 9px 24px;font-size:16px;border-radius:8px}
  .inp .cur{left:10px;font-size:12.5px}
  .inp em{min-height:0;font-size:10px;order:0!important;flex-basis:auto!important}
  .inp em:empty{display:none}
  .row{row-gap:6px}
  .mtd{flex-direction:row!important;gap:10px!important}
  .mtd .line{flex:1;flex-direction:column;align-items:stretch;gap:3px}
  .mtd .tag2{width:auto;font-size:9.5px}
  .mtd .track{min-width:0;height:5px}
  .mtd .v{font-size:10.5px}
  .notewrap input{font-size:16px}

  /* folded tables: tighter cards */
  .tablescroll tr{margin:9px 10px!important;border-radius:11px!important}
  .tablescroll td{padding:6px 11px!important;min-height:32px!important;font-size:13px}
  .tablescroll td::before{font-size:10px!important}
  .tablescroll td.sl{padding:4px 10px!important}
  .tablescroll.keepwide td{padding:6px 7px!important}
  /* day-by-day reads better as a sideways-scrolling grid with the date pinned */
  #daywrap td.cell-name,#daywrap th:first-child{position:sticky;left:0;z-index:1;background:var(--surface)}
  #daywrap tbody tr:nth-child(odd) td.cell-name{background:var(--surface-2)}

  /* modal becomes a bottom sheet; toast sits above the nav */
  .scrim{align-items:flex-end;padding:0}
  .modal{border-radius:16px 16px 0 0;max-height:88vh;padding-bottom:env(safe-area-inset-bottom,0px)}
  .modal .foot{position:sticky;bottom:0;background:var(--surface)}
  .modal .foot .btn{flex:1}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 24px);text-align:center;border-radius:12px}
  .addgrid{grid-template-columns:1fr 1fr}
  .addgrid .field:first-child{grid-column:1/-1}
  .addgrid .act{grid-column:1/-1}
  .addgrid .act .btn{width:100%}
  .robanner{font-size:12.5px;padding:10px 12px}
}

/* ============ ROSTER: give every column room to show its value ============ */
/* The roster has 11 columns. Squeezed into 100% width the text fields collapse
   and names, positions and sectors get cut off. Give the table a real minimum
   width and let the card scroll sideways instead of clipping. */
#tbl-team{font-size:12.5px}
#tbl-team th{font-size:10px}
#tbl-team td,#tbl-team th{white-space:nowrap;padding-left:9px;padding-right:9px}
#tbl-team td .empty,#tbl-team td .empty *{white-space:normal}
#tbl-team td.c-code{min-width:84px;text-align:center}
#tbl-team th.c-code{text-align:center}
#tbl-team td.c-grade{min-width:170px}
#tbl-team td.c-target{min-width:120px}
#tbl-team td.c-done{min-width:140px}

/* A text cell sizes itself from a hidden copy of its own value rendered in the
   real font, with the input laid over the top. The column is therefore always
   exactly as wide as the longest value in it — nothing is ever cut off, and no
   measuring in script is involved. */
.fitw{position:relative;display:block;min-width:88px;max-width:360px}
.fitw .ghost{display:block;visibility:hidden;white-space:pre;overflow:hidden;
  padding:6px 18px 6px 10px;border:1px solid transparent;font:inherit;letter-spacing:inherit}
#tbl-team td.c-name .ghost{font-weight:600}
/* a datalist field reserves room for Chrome's picker button inside its own text
   box; in the dense roster that stole the last word of every long value, so the
   button is dropped here (typing still offers the same suggestions). The Add an
   employee form keeps it, where there is room. */
#tbl-team td input[type=text]::-webkit-calendar-picker-indicator{display:none!important}
#tbl-team td input[type=text]::-webkit-list-button{display:none!important}
.fitw input[type=text]{position:absolute;left:0;top:0;right:0;bottom:0;
  width:100%!important;max-width:none!important;min-width:0}
#tbl-team td.c-name .fitw{min-width:150px}
#tbl-team td.c-role .fitw{min-width:140px}
#tbl-team tbody td.c-name input{font-weight:600}
/* ===== date picker + its triggers ===== */
.dpbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);border-radius:10px;padding:7px 12px;font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap}
.dpbtn::after{content:"";width:13px;height:13px;flex:none;opacity:.6;background:currentColor;
  -webkit-mask:var(--cal) center/contain no-repeat;mask:var(--cal) center/contain no-repeat}
:root{--cal:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>")}
.dpbtn:hover{border-color:var(--brand-2);color:var(--brand)}
.dpbtn[aria-expanded="true"]{border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-soft)}
.dpbtn.lg{padding:8px 13px}
.dptoday{border:1px solid var(--line);background:var(--surface);color:var(--brand);border-radius:99px;
  padding:7px 14px;font-weight:600;font-size:12.5px;cursor:pointer;white-space:nowrap}
.dptoday:hover{border-color:var(--brand-2);background:var(--brand-soft)}
.dptoday.on{background:var(--brand);border-color:var(--brand);color:#fff}
.datefield .dpbtn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);color:#fff}
.datefield .dpbtn:hover,.datefield .dpbtn[aria-expanded="true"]{border-color:rgba(255,255,255,.6);color:#fff;box-shadow:none}
.datefield .dptoday{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);color:#fff}
.datefield .dptoday:hover{background:rgba(255,255,255,.26)}
.datefield .dptoday.on{background:#fff;border-color:#fff;color:var(--brand-deep)}

.datepop{position:fixed;z-index:90;width:286px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 22px 48px -18px rgba(6,16,46,.65),0 2px 8px rgba(6,16,46,.16);
  padding:11px;color:var(--ink)}
.datepop[hidden]{display:none}
.dp-hd{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.dp-hd b{flex:1;text-align:center;font-size:14px;font-weight:700;letter-spacing:-.01em}
.dp-nav{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);cursor:pointer;font-size:16px;line-height:1;display:grid;place-content:center;flex:none}
.dp-nav:hover{border-color:var(--brand-2);color:var(--brand)}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-wd{font-size:10px;font-weight:700;color:var(--muted);text-align:center;padding-bottom:4px;letter-spacing:.04em}
.dp-pad{height:34px}
.dp-day{position:relative;height:34px;border:1px solid transparent;background:none;border-radius:9px;
  color:var(--ink-2);font-size:12.5px;font-weight:600;cursor:pointer;display:grid;place-content:center}
.dp-day:hover{background:var(--surface-2);border-color:var(--line)}
.dp-day.today{color:var(--brand);border-color:var(--brand-2)}
.dp-day.sel{background:var(--brand);border-color:var(--brand);color:#fff}
.dp-day i{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:4px;height:4px;
  border-radius:50%;background:var(--ok)}
.dp-day.sel i{background:#fff}
.dp-months{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.dp-mo{height:40px;border:1px solid transparent;background:var(--surface-2);border-radius:10px;
  color:var(--ink-2);font-size:12.5px;font-weight:600;cursor:pointer}
.dp-mo:hover{border-color:var(--brand-2);color:var(--brand)}
.dp-mo.today{color:var(--brand);border-color:var(--brand-2)}
.dp-mo.sel{background:var(--brand);border-color:var(--brand);color:#fff}
.dp-foot{display:flex;align-items:center;gap:9px;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--line-soft);font-size:10.5px;color:var(--muted)}
.dp-today{border:1px solid var(--brand);background:var(--brand);color:#fff;border-radius:99px;
  padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;flex:none}
.dp-today:hover{filter:brightness(1.12)}

/* quick presets inside the popover */
.dp-quick{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px;padding-bottom:9px;
  border-bottom:1px solid var(--line-soft)}
.dp-q{border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);border-radius:99px;
  padding:5px 10px;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.dp-q:hover{border-color:var(--brand-2);color:var(--brand);background:var(--brand-soft)}
.dp-q.on{background:var(--brand);border-color:var(--brand);color:#fff}
.dp-q[disabled]{opacity:.4;cursor:default}
/* range mode: the span between the two ends */
.dp-day.inr{background:var(--brand-soft);border-radius:0;color:var(--brand)}
.dp-day.end1{border-top-right-radius:0;border-bottom-right-radius:0}
.dp-day.end2{border-top-left-radius:0;border-bottom-left-radius:0}
.dp-hint{flex:1;font-size:10.5px;color:var(--muted);line-height:1.3}

/* ===== the date bar: one strip per area, under the card heading ===== */
.datebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,var(--surface-2),transparent)}
.dstep{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);overflow:hidden}
.dstep .dnav{width:34px;border:0;background:none;color:var(--ink-2);cursor:pointer;font-size:17px;
  line-height:1;display:grid;place-content:center}
.dstep .dnav:hover{background:var(--brand-soft);color:var(--brand)}
.dstep .dnav[disabled]{opacity:.3;cursor:default;background:none}
.dstep .dpbtn{border:0;border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft);
  border-radius:0;min-width:186px;justify-content:center}
.dstep .dpbtn[aria-expanded="true"]{box-shadow:none;background:var(--brand-soft);color:var(--brand)}
.dstep .dpbtn .wd{color:var(--muted);font-weight:600;font-size:12px;margin-right:2px}
.dchips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dchip{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:99px;
  padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.dchip:hover{border-color:var(--brand-2);color:var(--brand);background:var(--brand-soft)}
.dchip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.dchip[disabled]{opacity:.38;cursor:default}
.dchip.ghost{border-style:dashed;color:var(--muted)}
.dchip.ghost:hover{border-style:solid}
.dbnote{font-size:11.5px;color:var(--muted);margin-left:auto;text-align:right}

/* ===== the day-total box: sales and collection for the day on screen ===== */
.daysum{margin-left:auto;display:flex;align-items:stretch;gap:0;
  border:1px solid var(--line);border-radius:13px;background:var(--surface);overflow:hidden;
  box-shadow:0 1px 2px rgba(6,16,46,.05),0 10px 24px -20px rgba(6,16,46,.5)}
.ds-side{display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:8px 12px;background:var(--surface-2);border-right:1px solid var(--line-soft);min-width:96px}
.ds-side b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:15px;font-weight:800;
  letter-spacing:-.02em;line-height:1.1}
.ds-side span{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ds-side i{font-size:10.5px;font-style:normal;color:var(--muted)}
.ds-t{display:flex;flex-direction:column;gap:1px;padding:8px 14px;min-width:118px;
  border-left:3px solid var(--brand-2);position:relative}
.ds-t+.ds-t{border-left-width:3px}
.ds-t.c{border-left-color:var(--gold)}
.ds-t em{font-size:10px;font-style:normal;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.ds-t b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:18px;font-weight:800;
  letter-spacing:-.025em;line-height:1.15;color:var(--ink)}
.ds-t.on b{color:var(--brand)}
.ds-t.c.on b{color:var(--gold)}
.ds-t i{font-size:10.5px;font-style:normal;color:var(--muted)}
.ds-t.on i{color:var(--ok);font-weight:600}
.daysum.none .ds-t b{color:var(--muted)}

/* ===== the running total under the list, following whatever is filtered ===== */
.rowsum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 16px;border-top:2px solid var(--line);
  background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.rowsum .rs-lb{display:flex;flex-direction:column;gap:1px;margin-right:auto;min-width:0}
.rowsum .rs-lb b{font-size:13px;font-weight:700;color:var(--ink)}
.rowsum .rs-lb span{font-size:11.5px;color:var(--muted)}
.rowsum .rs-lb .filt{color:var(--brand);font-weight:600}
.rs-t{display:flex;flex-direction:column;gap:1px;padding:7px 15px;border-radius:11px;
  border:1px solid var(--line);background:var(--surface);border-left:3px solid var(--brand-2);min-width:132px}
.rs-t.c{border-left-color:var(--gold)}
.rs-t em{font-size:10px;font-style:normal;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.rs-t b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:19px;font-weight:800;
  letter-spacing:-.025em;line-height:1.15}
.rs-t i{font-size:10.5px;font-style:normal;color:var(--muted)}
.rs-t.on{background:var(--brand-soft);border-color:var(--brand-2)}
.rs-t.c.on{background:var(--gold-soft);border-color:var(--gold)}
.rs-t.on i{color:var(--ok);font-weight:600}
.rs-grand{display:flex;flex-direction:column;gap:1px;padding:7px 16px;border-radius:11px;
  background:var(--brand);color:#fff;min-width:126px}
.rs-grand em{font-size:10px;font-style:normal;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;opacity:.75}
.rs-grand b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:19px;font-weight:800;
  letter-spacing:-.025em;line-height:1.15}
.rs-grand i{font-size:10.5px;font-style:normal;opacity:.78}
.rs-grand.c{background:var(--gold)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .rs-grand{background:var(--brand-soft);color:var(--ink)}
  :root:not([data-theme="light"]) .rs-grand.c{background:var(--gold-soft);color:var(--gold)}
}
:root[data-theme="dark"] .rs-grand{background:var(--brand-soft);color:var(--ink)}
:root[data-theme="dark"] .rs-grand.c{background:var(--gold-soft);color:var(--gold)}
.dbnote b{color:var(--ink-2);font-weight:700}
.dbnote .clr{margin-left:8px;border:0;background:none;color:var(--bad);font-size:11.5px;
  font-weight:700;cursor:pointer;text-decoration:underline;padding:0}
/* the masthead keeps the same stepper, dressed for the dark bar */
.datefield .dstep{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26)}
.datefield .dstep .dnav{color:rgba(255,255,255,.82)}
.datefield .dstep .dnav:hover{background:rgba(255,255,255,.2);color:#fff}
.datefield .dstep .dpbtn{background:none;border-color:rgba(255,255,255,.22);color:#fff;min-width:150px}
.datefield .dstep .dpbtn .wd{color:rgba(255,255,255,.7)}
.datefield .dstep .dpbtn:hover,.datefield .dstep .dpbtn[aria-expanded="true"]{background:rgba(255,255,255,.16);color:#fff}

/* a row whose figure has not reached the server yet */
.row.unsaved .who .nm::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--warn);margin-left:7px;vertical-align:1px}
@media (max-width:640px){
  .datepop{width:calc(100vw - 24px);max-width:320px;padding:12px}
  .dp-day,.dp-pad{height:38px}
  .dp-mo{height:44px}
  .dpbtn,.dptoday{min-height:40px}
  .datefield .dptoday{padding:7px 11px;font-size:12px}
  .dp-q{padding:7px 11px;font-size:12px}
  /* the bar stacks: the stepper takes the full width, chips scroll under it */
  .datebar{padding:10px 12px;gap:8px}
  .dstep{width:100%}
  .dstep .dpbtn{flex:1;min-width:0;min-height:44px}
  .dstep .dnav{width:44px}
  .datebar .dptoday{min-height:40px}
  /* the Today pill and the chip rail share one line; the rail scrolls sideways */
  .dchips{flex:1 1 0;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .dchips::-webkit-scrollbar{display:none}
  .dchip{scroll-snap-align:start;min-height:38px}
  .dbnote{margin-left:0;width:100%;text-align:left}
  /* the totals boxes go full width and split evenly rather than shrinking to nothing */
  .daysum{margin-left:0;width:100%;border-radius:12px}
  .ds-side{min-width:0;flex:0 0 84px;padding:8px 10px}
  .ds-t{flex:1 1 0;min-width:0;padding:8px 11px}
  .ds-t b{font-size:16px}
  /* four tiles across is too narrow on a phone — two by two instead */
  .rowsum{display:grid;grid-template-columns:1fr 1fr;padding:12px;gap:9px}
  .rowsum .rs-lb{grid-column:1/-1;width:auto;margin-right:0}
  .rs-t,.rs-grand{min-width:0;padding:9px 12px}
  .rs-t b,.rs-grand b{font-size:17px}
  .rs-t em,.rs-grand em{font-size:9.5px;letter-spacing:.04em}
  /* the masthead drops its arrows on a phone — the bar inside each card has them,
     and the header has no room for six controls at 320px */
  .datefield .dstep .dnav{display:none}
  .datefield .dstep .dpbtn{border-left:0;border-right:0;min-width:0;padding:7px 10px}
}

/* ===== manager target card =====
   Sits on the dashboard under the two team meters. Three zones: the two legs
   with their bars, the manual licence field, and the pay maths. */
.mgrcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:14px;
  box-shadow:0 1px 2px rgba(15,27,61,.05),0 8px 22px -16px rgba(15,27,61,.3);overflow:hidden}
.mgrcard:empty{display:none}
.mgr-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 15px;
  border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.mgr-t{margin-right:auto;min-width:0}
.mgr-t h3{font-size:16px;font-weight:800;letter-spacing:-.02em}
.mgr-t p{margin:2px 0 0;font-size:11.5px;color:var(--muted)}
.mgr-valid{font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:99px;white-space:nowrap;
  background:var(--brand-soft);color:var(--brand)}
.mgr-valid.due{background:var(--warn-bg);color:var(--warn)}
.mgr-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(210px,.9fr) minmax(215px,1fr);
  gap:0;align-items:stretch}
.mgr-legs{padding:13px 15px;display:flex;flex-direction:column;gap:11px;justify-content:center}
.mleg-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:11.5px;color:var(--muted)}
.mleg-top b{font-family:"Bricolage Grotesque",sans-serif;font-size:19px;font-weight:800;
  letter-spacing:-.02em;color:var(--ink)}
.mleg-top b.on{color:var(--ok)}
.mbar{height:8px;border-radius:5px;background:var(--line);overflow:hidden;margin:6px 0 4px}
.mbar i{display:block;height:100%;border-radius:5px;background:var(--line);transition:width .45s cubic-bezier(.3,1,.4,1)}
.mbar i.ok{background:var(--ok)}.mbar i.warn{background:var(--warn)}.mbar i.bad{background:var(--bad)}
.mleg-foot{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted)}
.mgr-lic{padding:13px 15px;border-left:1px solid var(--line-soft);display:flex;flex-direction:column;
  justify-content:center;gap:4px;background:var(--surface-2)}
.mgr-lic label{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mgr-licin{position:relative}
.mgr-licin i{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-style:normal;
  color:var(--muted);font-size:13.5px;font-weight:600;pointer-events:none}
.mgr-licin input{width:100%;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:10px;padding:10px 11px 10px 28px;font-size:16px;font-weight:700;text-align:right}
.mgr-licin input:hover{border-color:var(--brand-2);border-left-color:var(--gold)}
.mgr-licin input:focus{border-color:var(--brand-2);border-left-color:var(--gold);
  box-shadow:0 0 0 3px var(--brand-soft);outline:none}
.mgr-licin input:disabled{opacity:.55;cursor:not-allowed}
.mgr-lichint{font-size:10.5px;color:var(--muted)}
.mgr-licsub{font-size:10.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:5px;margin-top:2px}
.mgr-pay{padding:13px 15px;border-left:1px solid var(--line-soft);display:flex;flex-direction:column;gap:5px;justify-content:center}
.mgr-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;color:var(--muted)}
.mgr-row em{font-style:normal;font-size:10.5px}
.mgr-row b{font-weight:700;color:var(--ink);font-size:13.5px;white-space:nowrap}
.mgr-row b.on{color:var(--ok)}
.mgr-row.total{border-top:1px solid var(--line);margin-top:4px;padding-top:7px;color:var(--ink-2);font-weight:600}
.mgr-row.part em{color:var(--muted)}
.mgr-row.part.on em{color:var(--ok);font-weight:600}
.mgr-row.part.on em::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--ok);margin-right:5px;vertical-align:1px}
.mgr-row.total b{font-family:"Bricolage Grotesque",sans-serif;font-size:20px;font-weight:800;letter-spacing:-.02em}
.mchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.mchip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.02em;
  padding:3px 8px;border-radius:99px;border:1px solid var(--line);color:var(--muted);background:var(--surface-2)}
.mchip i{font-style:normal;font-weight:600;opacity:.8}
.mchip.got{border-color:var(--ok);color:var(--ok)}
.mchip.paid{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.mgr-foot{padding:9px 15px;border-top:1px solid var(--line-soft);background:var(--surface-2);
  font-size:12px;color:var(--ink-2)}
.mgr-foot b{color:var(--ink);font-weight:700}
@media (max-width:1100px){
  .mgr-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mgr-legs{grid-column:1/-1;border-bottom:1px solid var(--line-soft)}
  .mgr-lic{border-left:0}
}
@media (max-width:640px){
  .mgrcard{border-radius:16px;margin-bottom:12px}
  .mgr-hd{padding:11px 13px}
  .mgr-t h3{font-size:15.5px}
  .mgr-body{grid-template-columns:1fr}
  .mgr-legs{padding:12px 13px;border-bottom:1px solid var(--line-soft)}
  .mgr-lic,.mgr-pay{border-left:0;border-top:1px solid var(--line-soft);padding:12px 13px}
  .mgr-lic{background:none}
  .mgr-licin input{font-size:16px;padding:12px 12px 12px 28px;border-radius:12px}
  .mgr-row.total b{font-size:21px}
  .mgr-foot{padding:10px 13px;line-height:1.45}
}

/* ===== sector groups =====
   Four standing sectors plus anything else in use. The chips filter the roster;
   sorting by sector also breaks it into labelled blocks with their own totals. */
.secbar{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 13px}
.secbar:empty{display:none}
.secchip{border:1px solid var(--line);background:var(--surface);border-radius:99px;
  padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.secchip:hover{border-color:var(--brand-2);color:var(--brand)}
.secchip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 2px 8px rgba(27,58,156,.24)}
.secchip i{font-style:normal;font-size:11px;font-weight:600;opacity:.7}
.secchip[aria-pressed="true"] i{opacity:.9}
.secchip.none{color:var(--muted)}
tr.grouphd td{background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;padding:7px 12px;border-bottom:1px solid var(--line);
  white-space:nowrap}
tr.grouphd td .gcount{font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2);
  margin-left:10px;font-size:11.5px}
tr.grouphd td .gtot{float:right;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2);font-size:11.5px}
@media (max-width:820px){
  .secbar{padding:0 12px 11px}
  .tablescroll tr.grouphd{border:0!important;margin:14px 10px 0!important;background:none!important}
  .tablescroll tr.grouphd td{display:block;border-radius:9px;text-align:left}
  .tablescroll tr.grouphd td::before{content:none}
  tr.grouphd td .gtot{float:none;display:block;margin-top:2px}
}
/* ===== Business equation, grid view =====
   One card per person: the same figures as the table, shaped for scanning
   rather than comparing. Cards reflow from one column on a phone to as many
   as the display allows. */
.eqgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;padding:14px 16px}
.eqgrid[hidden]{display:none}
.eqgrid .empty{grid-column:1/-1}
.eqsec{grid-column:1/-1;display:flex;align-items:baseline;gap:9px;margin:4px 0 0;
  font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--brand)}
.eqsec i{font-style:normal;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.eqsec::after{content:"";flex:1;height:1px;background:var(--line)}
/* the sector divider inside the daily entry list */
.secrow{display:flex;align-items:baseline;gap:10px;padding:9px 16px;background:var(--surface-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:4}
.secrow b{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--brand)}
.secrow span{font-size:11px;color:var(--muted);margin-left:auto}
.rows .secrow:first-child{border-top:0}
.eqcard{background:var(--surface-2);border:1px solid var(--line);border-radius:13px;padding:12px 13px;
  display:flex;flex-direction:column;gap:10px}
.eqcard.eqhidden{opacity:.45}
.eqcard-hd{display:flex;align-items:flex-start;gap:8px}
.eqwho{min-width:0;margin-right:auto}
.eqwho b{display:block;font-weight:700;font-size:14.5px;line-height:1.2;overflow-wrap:anywhere}
.eqwho span{display:block;font-size:11px;color:var(--muted);margin-top:2px;line-height:1.3}
.eqcard .iconbtn{flex:none;padding:5px;color:var(--muted)}
.eqcard .iconbtn:hover{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.eqcard .iconbtn.has{background:var(--brand-soft);color:var(--brand)}
.eqrow2{display:grid;grid-template-columns:auto 1fr 1fr;gap:8px;padding:9px 0;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.eqrow2 > div{min-width:0}
.eqrow2 label{display:block;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.eqrow2 b{font-size:13.5px;font-weight:700;white-space:nowrap}
.eqrow2 .lockval{font-size:13.5px}
.eqleg-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11px;color:var(--muted)}
.eqleg-top b{font-size:14px;font-weight:700;color:var(--ink)}
.eqleg-top b.on{color:var(--ok)}
.eqbar{height:7px;border-radius:4px;background:var(--line);overflow:hidden;margin:5px 0 4px}
.eqbar i{display:block;height:100%;border-radius:4px;background:var(--line);transition:width .45s cubic-bezier(.3,1,.4,1)}
.eqbar i.ok{background:var(--ok)}.eqbar i.warn{background:var(--warn)}.eqbar i.bad{background:var(--bad)}
.eqleg-foot{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--muted)}
.eqchips{display:flex;flex-wrap:wrap;gap:5px}
.eqchip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;letter-spacing:.02em;
  padding:3px 8px;border-radius:99px;border:1px solid var(--line);color:var(--muted);background:var(--surface)}
.eqchip b{font-weight:700;color:var(--ink-2)}
.eqchip.own{border-color:var(--brand-2);color:var(--brand)}
.eqchip.got{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.eqchip.got b{color:var(--ok)}
.eqgrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:9px;border-top:1px solid var(--line-soft)}
.eqgrow label{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);flex:none}
.eqgrow input{width:auto;flex:1 1 92px;min-width:80px;text-align:right;padding:6px 9px;font-weight:600;font-size:13px}
.eqgrow .gsel{margin-top:0}
@media (max-width:640px){ .eqgrid{grid-template-columns:1fr;padding:11px 12px;gap:10px} }

/* ===== green means a figure has landed =====
   A day of entry used to look identical whether it held money or nothing. Every
   place a value arrives now says so in green: the row carries a green edge, the
   net line and the month-to-date figure turn green, and the field pulses once
   as the number saves. */
.row.hasval{box-shadow:inset 3px 0 0 var(--ok);
  background-image:linear-gradient(90deg,rgba(31,160,110,.13),rgba(31,160,110,0) 280px)}
.row.hasval .who .nm{color:var(--ok)}
.inp em.netv{transition:color .18s}
.inp em.netv.on,.inp em.netv.on b{color:var(--ok)}
@keyframes savepulse{
  0%{box-shadow:0 0 0 0 rgba(31,160,110,.5)}
  100%{box-shadow:0 0 0 10px rgba(31,160,110,0)}
}
.inp.saved input{animation:savepulse .85s ease-out}
.inp.saved > span{color:var(--ok)}
.mtd .v b{transition:color .18s}
.mtd .v b.on{color:var(--ok)}
.mtd .track{transition:box-shadow .2s}
.mtd .line.on .track{box-shadow:0 0 0 1px rgba(31,160,110,.28)}
.mtd .fill{transition:width .45s cubic-bezier(.3,1,.4,1),background .2s}
.entrytot{color:var(--ok)!important}
@media (prefers-reduced-motion:reduce){ .inp.saved input{animation:none} }
/* the equation sheet's hide control */
td.c-hide,th.c-hide{width:34px;padding-left:2px;padding-right:6px;text-align:center}
.eqtbl .iconbtn.eqhide{padding:5px;border-radius:7px;color:var(--muted)}
#tbl-latgt .iconbtn.eqhide,#tbl-laeff .iconbtn.eqhide{padding:5px;border-radius:7px;color:var(--muted);border:1px solid transparent;background:none;cursor:pointer}
#tbl-latgt .iconbtn.eqhide:hover,#tbl-laeff .iconbtn.eqhide:hover{background:var(--bad-bg);color:var(--bad)}
#tbl-latgt .iconbtn.eqhide.has,#tbl-laeff .iconbtn.eqhide.has{background:var(--brand-soft);color:var(--brand)}
#tbl-latgt tr.eqhidden td,#tbl-laeff tr.eqhidden td{opacity:.6}
#tbl-latgt tr.eqhidden td.c-hide,#tbl-laeff tr.eqhidden td.c-hide{opacity:1}
.eqtbl .iconbtn.eqhide:hover{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.eqtbl .iconbtn.eqhide.has{background:var(--brand-soft);color:var(--brand)}
.eqtbl .iconbtn.eqhide.has:hover{background:var(--brand-soft);color:var(--brand)}
.eqtbl tbody tr.eqhidden td{opacity:.42;font-style:italic}
.eqtbl tbody tr.eqhidden td.c-hide{opacity:1;font-style:normal}
@media (max-width:820px){ .tablescroll td.c-hide::before{content:none} }
/* a figure that is owned by another tab: shown, not editable */
.gpill{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--ink-2);
  border:1px solid var(--line);border-radius:99px;padding:3px 10px;font-size:11.5px;font-weight:600;
  margin-top:5px;white-space:nowrap;cursor:default}
.gpill .lockic{width:10px;height:10px;flex:none;opacity:.5}
.gpill b{font-weight:600}
#wd-txt .wd-tiny{display:none}
.g-phone{display:none}
.gpill .gp-short{display:none}
#eqwrap.keepwide .eqtbl .gpill .gp-long{display:none}
#eqwrap.keepwide .eqtbl .gpill .gp-short{display:inline}
#eqwrap.keepwide .eqtbl .gpill{padding:2px 8px;font-size:10.5px;margin-top:3px}
.eqgrow .gpill{margin-top:0}
.lockval{display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;
  font-weight:600;white-space:nowrap;cursor:help}
.lockval .lockic{width:11px;height:11px;flex:none;opacity:.45}
.eqtbl th.lockgrp{gap:5px}
.eqtbl th.lockgrp .lockic{width:10px;height:10px;opacity:.7;vertical-align:-1px;margin-right:5px}
.eqtbl td.big .lockval{color:var(--ink);font-weight:600}
.eqtbl td.big .lockval .lockic{opacity:.34}
.lockval.none{color:var(--muted);font-weight:400;font-size:12px}
/* the position code — typed in by hand, or the position's initials if left blank */
.poscode{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  padding:3px 9px;border-radius:99px;background:var(--gold-soft);color:var(--gold);
  border:1px solid rgba(201,139,30,.32);white-space:nowrap}
.poscode.none{background:var(--surface-2);color:var(--muted);border-color:var(--line);font-weight:500}
#tbl-team td.c-code input[type=text]{
  width:82px!important;min-width:0;text-align:center;text-transform:uppercase;
  font-size:12px;font-weight:700;letter-spacing:.05em;padding:6px 4px;border-radius:99px;
  background:var(--gold-soft);color:var(--gold);border:1px solid rgba(201,139,30,.32)}
#tbl-team td.c-code input[type=text]::placeholder{color:var(--gold);opacity:.5;font-weight:700;letter-spacing:.05em}
#tbl-team td.c-code input[type=text]:hover{border-color:var(--gold)}
#tbl-team td.c-code input[type=text]:focus{background:var(--surface);color:var(--ink);
  border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-soft);outline:none}
#tbl-team td.c-grade select{width:100%;max-width:none;font-size:12px}
/* the salary field is auto-sized by script; keep it from eating the row */
#tbl-team td.c-sal input{max-width:120px!important;min-width:84px}

/* folded card layout (narrow screens): the ghost steps aside and the field
   takes the full width of the card row */
@media (max-width:820px){
  #tbl-team td,#tbl-team th{white-space:normal}
  #tbl-team td.c-code{text-align:right}
  .fitw{max-width:none;min-width:0}
  .fitw .ghost{display:none}
  .fitw input[type=text]{position:static}
  .tablescroll #tbl-team td.c-name,.tablescroll #tbl-team td.c-role,
  .tablescroll #tbl-team td.c-dept,.tablescroll #tbl-team td.c-sector,
  .tablescroll #tbl-team td.c-grade,.tablescroll #tbl-team td.c-sal{
    flex-wrap:wrap;align-items:flex-start}
  .tablescroll #tbl-team td.c-name input,.tablescroll #tbl-team td.c-role input,
  .tablescroll #tbl-team td.c-dept input,.tablescroll #tbl-team td.c-sector input,
  .tablescroll #tbl-team td.c-grade select,.tablescroll #tbl-team td.c-sal input{
    max-width:none!important;width:100%!important;flex:1 0 100%;text-align:left;margin-top:4px}
  .tablescroll #tbl-team td.c-sal input{text-align:right}
}

/* ================= FIT THE DISPLAY =================
   The shell used to stop at a fixed 1220px, so anything wider than a small
   laptop was mostly empty margin and the wide tables scrolled sideways for no
   reason. It now grows with the viewport — the gutter scales with the screen
   and the content runs to a sane reading maximum — so a tablet, a 13", a 15"
   and a large desktop each get the room they actually have. Phone layout
   (<=640px) is deliberately untouched: it has its own tuned rules above. */
@media (min-width:641px){
  :root{
    --gutter:clamp(16px,2.2vw,44px);   /* 16px on a small tablet -> 44px on a big desktop */
    --shell:min(100%,2100px);          /* stop before lines get uncomfortably long */
  }
  .wrap{width:100%;max-width:var(--shell);padding-left:var(--gutter);padding-right:var(--gutter)}
  .mast-in{width:100%;max-width:var(--shell);padding-left:var(--gutter);padding-right:var(--gutter)}
}
/* 13" laptops and tablet landscape: tighten the roster's own spacing just enough
   that its eleven columns land inside the window instead of scrolling sideways.
   Nothing is hidden or moved — only padding and the width floors give way. */
@media (min-width:821px) and (max-width:1520px){
  .kpis{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}
  #tbl-team{font-size:12px}
  #tbl-team th{font-size:9.5px}
  #tbl-team td,#tbl-team th{padding-left:5px;padding-right:5px}
  #tbl-team td.c-code{min-width:74px}
  #tbl-team td.c-code input[type=text]{width:70px!important;letter-spacing:.03em}
  #tbl-team td.c-grade{min-width:158px}
  #tbl-team td.c-grade select{font-size:11px;padding-left:6px;padding-right:6px}
  #tbl-team td.c-target{min-width:94px}
  #tbl-team td.c-done{min-width:96px}
  #tbl-team td.c-sal input{max-width:104px!important;min-width:74px}
  #tbl-team td.c-name .fitw{min-width:128px}
  #tbl-team td.c-role .fitw{min-width:120px}
  #tbl-team .fitw .ghost{padding-left:9px;padding-right:17px}
  #tbl-team td.pick{padding-left:9px}
}
/* ===== Business equation, full sheet: fit all seventeen columns in one view =====
   The sheet keeps its exact shape — same columns, same order, same grouped
   headers. Only the spacing gives way: smaller type, tight cell padding, a
   narrower staff column and compact fields, so the collection block lands
   inside the window instead of behind a horizontal scrollbar. */
@media (min-width:821px){
  #eqwrap.keepwide .eqtbl{font-size:11px}
  #eqwrap.keepwide .eqtbl th{font-size:8.5px;letter-spacing:0;padding:5px 2px;line-height:1.2;white-space:normal;vertical-align:bottom}
  #eqwrap.keepwide .eqtbl td{padding:5px 2px}
  #eqwrap.keepwide .eqtbl th.sl,#eqwrap.keepwide .eqtbl td.sl{width:20px;padding-left:7px;padding-right:2px;font-size:10.5px}
  #eqwrap.keepwide .eqtbl td.cell-name{min-width:98px;max-width:148px;white-space:normal;line-height:1.3}
  #eqwrap.keepwide .eqtbl .sub2{font-size:9.5px;line-height:1.25;margin-top:1px}
  #eqwrap.keepwide .eqtbl .gsel{font-size:9.5px;padding:2px 7px;margin-top:3px}
  #eqwrap.keepwide .eqtbl td input{padding:5px 5px;font-size:11px;max-width:76px!important;border-radius:7px}
  #eqwrap.keepwide .eqtbl .lockval{gap:3px}
  /* the group header carries the lock; repeating it per cell costs width the sheet
     cannot spare, and the tooltip is still on every one of them */
  #eqwrap.keepwide .eqtbl td.big .lockval .lockic{display:none}
  #eqwrap.keepwide .eqtbl td.big .lockval{gap:0}
  #eqwrap.keepwide .eqtbl th.lockgrp .lockic{width:9px;height:9px;margin-right:3px}
  #eqwrap.keepwide .eqtbl .lockval .lockic{width:9px;height:9px}
  #eqwrap.keepwide .eqtbl .lockval.none{font-size:10px}
  /* the grouped SALE / COLLECTION banners do not need to be shouted */
  #eqwrap.keepwide .eqtbl th.grp{padding-top:4px;padding-bottom:4px;font-size:9.5px}
  #eqwrap.keepwide .eqtbl td.c-hide,#eqwrap.keepwide .eqtbl th.c-hide{width:24px;padding-left:0;padding-right:3px}
  #eqwrap.keepwide .eqtbl .iconbtn.eqhide{padding:3px}
  #eqwrap.keepwide .eqtbl .iconbtn.eqhide svg{width:13px;height:13px}
}
/* 15" and larger: more stat tiles per row instead of taller stacks */
@media (min-width:1500px){
  .kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  .meters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ck-main{grid-template-columns:minmax(0,1fr) 300px}
}
/* =====================================================================
   MOBILE REDESIGN  (<= 640px)
   Phone-only. Every rule here is inside the media query, so the desktop
   layout, the data and the behaviour are untouched — this changes how the
   same markup is dressed, nothing else. Loaded last so it refines the
   earlier phone block rather than replacing it.
   ===================================================================== */
@media (max-width:640px){

  /* ---- ground: a soft brand wash behind everything, fixed so it does not
          scroll with the content ---- */
  body{
    background:
      radial-gradient(130% 55% at 50% 0%, rgba(46,86,211,.14), rgba(46,86,211,0) 62%),
      var(--bg);
    background-attachment:fixed;
  }
  .wrap{padding:0 14px calc(108px + env(safe-area-inset-bottom,0px))}

  /* ---- masthead: slimmer, lifted off the page ---- */
  .mast{border-bottom:0;box-shadow:0 10px 26px -20px rgba(4,10,32,.95)}
  .mast-in{padding:10px 14px;gap:10px}
  .brandmark img{height:27px}
  .brandmark h1{font-size:15px;letter-spacing:-.01em}
  .brandmark h1 em{font-size:10px;letter-spacing:.02em}
  .datefield{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.3);
    border-radius:11px;padding:6px 10px}
  .datefield input[type=date]{font-size:13.5px;width:106px}
  .statepill i{width:8px;height:8px}

  /* ---- hero: two full-width meters that actually read ---- */
  .hero{padding:14px 0 4px}
  .hero-top{flex-direction:column;align-items:stretch;gap:9px;margin-bottom:12px}
  .hero-top h2{font-size:27px;letter-spacing:-.035em;line-height:1.05}
  .hero-top h2 small{font-size:12px;margin-top:4px}
  .pace{width:100%;border-radius:12px;padding:9px 13px;font-size:12px;line-height:1.4}

  .meters{grid-template-columns:1fr;gap:10px;margin-bottom:12px}
  .meter{padding:14px 16px 13px 18px;border-radius:16px;
    box-shadow:0 1px 2px rgba(6,16,46,.06),0 14px 30px -24px rgba(6,16,46,.9)}
  .meter::before{width:5px}
  .meter h3{font-size:11px;letter-spacing:.07em;text-transform:uppercase}
  .meter .big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:26px;margin:5px 0 0}
  .meter .big span{display:inline;font-size:12px}
  .meter .track{height:8px;margin:11px 0 8px;border-radius:5px}
  .meter .sub{display:flex;justify-content:space-between;gap:10px;font-size:11px;line-height:1.35}
  .meter .sub > *{display:block}
  .meter .sub > span:last-child{text-align:right}

  /* ---- checklist ---- */
  .ckcard{border-radius:16px;margin-bottom:12px}
  .ck-hd{padding:11px 13px}
  .ck-month h3{font-size:16px}
  .ck-clock{font-size:11px;padding:5px 11px;border-radius:99px}
  .ck-cal{padding:10px 12px 12px}
  .ck-day{min-height:54px;border-radius:11px;gap:4px;padding:6px 3px}
  .ck-day .dn{font-size:12px;padding:3px 6px;border-radius:7px}
  .ck-day.today{box-shadow:0 0 0 2px var(--brand-soft),0 4px 12px -6px rgba(46,86,211,.6)}
  .ck-grid{gap:5px}
  .ck-side{padding:11px 13px;gap:11px;border-radius:0}
  .ck-toggle button{padding:7px 18px;font-size:12.5px}

  .strip-shell{border-radius:16px;padding:12px 13px 9px}
  .strip{height:auto;gap:7px}
  .ch-col{min-width:74px}
  .ch-track{height:80px}
  .ch-col{min-width:72px}
  .ch-track{height:84px}

  /* ---- cards ---- */
  .card{border-radius:16px;box-shadow:0 1px 2px rgba(6,16,46,.05),0 16px 32px -28px rgba(6,16,46,.9)}
  .card + .card{margin-top:12px}
  .card-hd{padding:13px 14px;gap:9px;
    background:linear-gradient(180deg,var(--surface-2),transparent)}
  .card-hd h3{font-size:15.5px;letter-spacing:-.015em}
  .card-hd p{font-size:11.5px;line-height:1.4}
  .card-bd{padding:13px 14px}

  /* toolbars: full-width controls with real tap targets */
  .toolbar{gap:8px}
  .toolbar select,.toolbar input,.toolbar .btn{min-height:44px;border-radius:11px}
  .btn{min-height:44px;border-radius:11px;padding:10px 16px}
  .btn.sm{min-height:38px;padding:8px 13px;border-radius:10px}
  .iconbtn{min-width:38px;min-height:38px;border-radius:10px}

  /* stat tiles: separated, rounded, two up */
  .kpis{grid-template-columns:1fr 1fr;gap:8px;background:transparent;padding:12px 14px 2px}
  .kpi{border:1px solid var(--line-soft);border-radius:13px;background:var(--surface-2);padding:11px 12px}
  .kpi:hover{background:var(--surface-2)}
  .kpi b{font-size:19px}
  .kpi span{font-size:10.5px;line-height:1.3;display:block;margin-top:2px}

  /* ---- daily entry: one card per person ---- */
  #rows-entry{padding:10px 12px 12px;gap:10px}
  .row{background:var(--surface)!important;border:1px solid var(--line);border-radius:15px;
    padding:13px 13px 12px;box-shadow:0 1px 2px rgba(6,16,46,.04);position:relative;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"who who" "s c" "mtd mtd";
    column-gap:10px;row-gap:11px}
  .row:last-child{border-bottom:1px solid var(--line)}
  /* the two icon buttons float in the corner so the name gets the full width */
  .row .acts{grid-area:auto;position:absolute;top:9px;right:9px;justify-self:auto;z-index:1}
  .row .who{padding-right:84px;min-width:0}
  .row .who .nm,.row .who .sub{white-space:normal;overflow:visible;text-overflow:clip}
  .row .who .nm{line-height:1.25}
  .row .who .sub{line-height:1.35}
  .row.hasval{border-color:rgba(31,160,110,.42);
    box-shadow:inset 3px 0 0 var(--ok),0 1px 2px rgba(6,16,46,.04);
    background-image:linear-gradient(180deg,rgba(31,160,110,.09),rgba(31,160,110,0) 70px)!important}
  .who .nm{font-size:15.5px;letter-spacing:-.01em}
  .who .sub{font-size:11px;margin-top:1px}
  .who .eqsub{font-size:11px;margin-top:3px}
  .inp > span{font-size:10px!important;letter-spacing:.06em;text-transform:uppercase}
  .inp input.v{font-size:17px;padding:12px 11px 12px 27px;border-radius:12px;font-weight:700}
  .inp .cur{left:11px;font-size:13.5px}
  .inp em{font-size:10.5px;margin-top:1px}
  .mtd{gap:9px!important;padding-top:3px;border-top:1px solid var(--line-soft)}
  .mtd .line{gap:7px}
  .mtd .track{height:8px;border-radius:4px;background:var(--line)}
  .mtd .tag2{font-size:10px;letter-spacing:.04em;text-transform:uppercase}
  .mtd .v{font-size:11px}
  .acts{gap:4px}
  .notewrap input{border-radius:11px;padding:11px 12px}

  /* ---- folded roster: label left, field right, one line each ---- */
  .tablescroll #tbl-team td{flex-wrap:nowrap;align-items:center;gap:10px}
  .tablescroll #tbl-team td .fitw{flex:1 1 auto;min-width:0;max-width:none;margin-left:auto}
  .tablescroll #tbl-team td .fitw input[type=text]{width:100%!important;max-width:none!important;
    text-align:right;margin-top:0;min-height:38px;border-radius:10px}
  .tablescroll #tbl-team td.c-grade select{width:auto!important;max-width:58%!important;margin-top:0;min-height:38px}
  .tablescroll #tbl-team td.c-sal input{width:100%!important;max-width:140px!important;margin-top:0;min-height:38px}
  .tablescroll #tbl-team td.c-code{justify-content:space-between}
  .tablescroll #tbl-team td.c-code input[type=text]{margin-top:0;min-height:36px}
  /* the select box tucks into the card's top corner beside the SL tab
     instead of taking a row of its own */
  .tablescroll #tbl-team tbody tr{position:relative}
  .tablescroll #tbl-team td.pick{position:absolute;top:5px;right:8px;width:auto;
    min-height:0!important;padding:4px!important;background:none!important;border:0!important}
  .tablescroll #tbl-team td.pick .chk{width:20px;height:20px}
  .tablescroll td.pick{min-height:0!important;padding:7px 13px!important}
  .tablescroll #tbl-team td{min-height:46px!important;padding-top:6px!important;padding-bottom:6px!important}

  /* ---- folded tables: proper list cards ---- */
  .tablescroll tr{margin:10px 12px!important;border-radius:14px!important;
    border-color:var(--line)!important;box-shadow:0 1px 2px rgba(6,16,46,.04)}
  .tablescroll td{padding:9px 13px!important;min-height:36px!important;font-size:13px}
  .tablescroll td::before{font-size:10px!important;letter-spacing:.04em;text-transform:uppercase}
  .tablescroll td.sl{font-size:11.5px!important;letter-spacing:.06em;padding:7px 13px!important;
    background:linear-gradient(100deg,var(--brand-deep),var(--brand))!important}
  .tablescroll tfoot tr{border-color:var(--brand)!important}
  .tablescroll table,.tablescroll tbody{background:transparent}

  /* group headers stay as section titles, not cards */
  .secbar{gap:7px;padding:0 14px 12px;flex-wrap:nowrap;overflow-x:auto;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:0 -2px}
  .secbar::-webkit-scrollbar{display:none}
  .secchip{flex:none;scroll-snap-align:start;min-height:38px;border-radius:11px;padding:8px 14px}

  /* ---- equation grid cards ---- */
  .eqcard{border-radius:15px;padding:14px 14px 13px}
  .eqwho b{font-size:15px}

  /* ---- bottom navigation: a floating bar ---- */
  .tabs{
    left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));
    width:auto;border:1px solid var(--line);border-top:1px solid var(--line);
    border-radius:20px;padding:6px 5px;
    background:var(--surface);
    box-shadow:0 18px 38px -16px rgba(4,10,32,.6),0 2px 8px rgba(4,10,32,.16);
  }
  @supports (backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px)){
    .tabs{background:color-mix(in srgb,var(--surface) 82%,transparent);
      -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
  }
  .tabs button{padding:7px 0 6px;border-radius:13px;font-size:9px;letter-spacing:.01em;gap:3px;
    color:var(--muted);transition:color .15s,background .15s}
  .tabs button .tic{width:20px;height:20px}
  .tabs button .tic svg{width:20px;height:20px}
  .tabs button[aria-selected="true"]{
    background:linear-gradient(180deg,var(--brand-2),var(--brand));
    color:var(--on-brand);font-weight:700;
    box-shadow:0 5px 14px -5px rgba(27,58,156,.85)}
  :root:not([data-theme="light"]) .tabs button[aria-selected="true"],
  :root[data-theme="dark"] .tabs button[aria-selected="true"]{color:#06102E}
  @media (prefers-color-scheme:light){ .tabs button[aria-selected="true"]{color:#fff} }

  .toast{bottom:calc(88px + env(safe-area-inset-bottom,0px));border-radius:14px;
    padding:12px 18px;font-size:13px;box-shadow:0 14px 30px -12px rgba(4,10,32,.7)}

  /* ---- bottom sheets ---- */
  .modal{border-radius:20px 20px 0 0;border-bottom:0}
  .modal .card-hd{padding:16px 16px 12px;background:none}
  .modal .card-hd h3{font-size:17px}
  .modal .foot{padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px));gap:9px;
    border-top:1px solid var(--line-soft)}
  .modal .foot .btn{min-height:48px;border-radius:13px;font-weight:600}

  /* ---- read-only banner, hints ---- */
  .robanner{border-radius:13px;font-size:12.5px;line-height:1.45;padding:12px 13px}
  .hint{font-size:12px;line-height:1.45}
  .empty{padding:30px 16px}
  .empty h3{font-size:16px}
}

/* very small phones: keep the seven-item bar legible */
@media (max-width:370px){
  .tabs{left:8px;right:8px;padding:5px 3px}
  .tabs button{font-size:8.5px}
  .tabs button .tic,.tabs button .tic svg{width:19px;height:19px}
  .wrap{padding-left:12px;padding-right:12px}
}

/* ============================================================================
   PHONE REFINEMENT — this block is last in the stylesheet on purpose, so it
   wins the cascade. It changes nothing above 640px and touches no figure.
   ========================================================================= */
@media (max-width:640px){

  /* ---- masthead: the name stays on one line, the date chip keeps its room --- */
  .mast-in{padding:9px 13px;gap:9px;flex-wrap:nowrap}
  .brandmark{gap:9px;min-width:0}
  .brandmark img{height:26px}
  .brandmark .rule{display:none}
  .brandmark h1{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brandmark h1 em{display:none}
  .datefield{padding:5px 7px;gap:6px;flex:none}
  .datefield .dstep{border-radius:10px}
  .datefield .dstep .dpbtn{padding:6px 9px;font-size:12.5px}
  #wd-txt .wd-full{display:none}
  #wd-txt .wd-tiny{display:inline}
  .datefield .dptoday{padding:6px 11px;font-size:12px}

  /* ---- the month header earns less of the screen ---- */
  .hero{padding:12px 0 2px}
  .hero-top{gap:7px;margin-bottom:10px}
  .hero-top h2{font-size:23px;letter-spacing:-.03em}
  .hero-top h2 small{font-size:11.5px;margin-top:3px}
  .pace{padding:8px 12px;font-size:11.5px;border-radius:11px}

  /* ---- the two meters, tightened so both fit above the fold ---- */
  .meters{gap:9px;margin-bottom:11px}
  .meter{padding:12px 14px 11px 16px;border-radius:15px}
  .meter h3{font-size:10px;letter-spacing:.08em}
  .meter .big{font-size:23px;margin:3px 0 0}
  .meter .big span{font-size:11.5px}
  .meter .track{height:7px;margin:9px 0 7px}
  .meter .sub{font-size:10.5px}

  /* ---- manager target: the answer first, the workings after ---- */
  .mgr-hd{gap:7px;padding-bottom:9px}
  .mgr-hd .mgr-t h3{font-size:16px}
  .mgr-hd .mgr-t p{font-size:11px;line-height:1.4}
  .mgr-valid{font-size:10.5px;padding:5px 10px}
  .mgr-body{display:flex;flex-direction:column;gap:0}
  .mgr-body > .mgr-pay{order:1;border:0;border-bottom:1px solid var(--line-soft);padding:12px 14px}
  .mgr-body > .mgr-legs{order:2;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
  .mgr-body > .mgr-lic{order:3;padding:12px 14px}
  .mgr-row{font-size:11.5px}
  .mgr-row b{font-size:13px}
  .mgr-row.total b{font-size:16px}
  .mchips{gap:5px}

  /* ---- section rhythm: cards breathe evenly and never hide behind the bar ---- */
  .card{border-radius:15px}
  .card+.card{margin-top:11px}
  .card-hd{padding:13px 14px 11px}
  .card-hd h3{font-size:15.5px}
  .card-hd p{font-size:11.5px;line-height:1.45}
  .card-bd{padding:12px 14px}

  /* ---- the chart card ---- */
  .strip-shell{padding:11px 12px 9px;border-radius:15px}
  .strip-hd{gap:8px}
  .strip-hd .lbl{font-size:11.5px;line-height:1.35}

  /* ---- bottom bar: a touch shorter, and clear of the home indicator ---- */
  .tabs{bottom:calc(9px + env(safe-area-inset-bottom,0px));inset-inline:10px}
  .tabs button{padding:7px 2px 6px}

  /* ---- a tapped tab should actually move you to it ---- */
  .panel{scroll-margin-top:8px}
  /* a short panel still has to be able to reach the top of the screen, or tapping
     its tab leaves it stranded half-way down under the dashboard */
  .panel:not([hidden]){min-height:calc(100vh - 150px)}

  /* ---- the day-total box: a header line, then the two figures side by side ---- */
  .daysum{flex-wrap:wrap;border-radius:13px}
  .ds-side{flex:1 0 100%;flex-direction:row;align-items:baseline;gap:8px;min-width:0;
    padding:8px 12px;border-right:0;border-bottom:1px solid var(--line-soft)}
  .ds-side b{font-size:14px}
  .ds-side span{font-size:10px}
  .ds-side i{margin-left:auto;font-size:10.5px;text-align:right}
  .ds-t{flex:1 1 0;min-width:0;padding:9px 12px;border-left-width:4px}
  .ds-t b{font-size:17px}
  .ds-t em{font-size:9.5px}

  /* ---- toolbars: search on its own line, the rest sharing one ---- */
  .card-hd .toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .card-hd .toolbar > input[type=search]{grid-column:1/-1}
  .card-hd .toolbar > .btn{min-height:44px}
  .card-hd .toolbar > .btn.primary{grid-column:1/-1}
  .card-hd .toolbar > select{width:100%;min-height:44px}
  .card-hd .toolbar > label{grid-column:1/-1}
  .card-hd .toolbar > .taxset{grid-column:auto;min-height:44px;display:flex;align-items:center;
    justify-content:space-between;gap:8px}
  .card-hd .toolbar > .taxset input{max-width:74px;text-align:right}

  /* ---- Day by day: four columns that fit, the rest live in the breakdown ---- */
  .g-desk{display:none}
  .g-phone{display:inline}
  #daywrap.keepwide table#tbl-days th:nth-child(n+5):not(.c-hide),
  #daywrap.keepwide table#tbl-days td:nth-child(n+5):not(.c-hide){display:none}
  #daywrap.keepwide table#tbl-days tr.daydet > td{display:table-cell}
  #daywrap.keepwide table#tbl-days{width:100%;min-width:0;table-layout:fixed}
  #daywrap.keepwide{overflow-x:hidden}
  #daywrap.keepwide #tbl-days th,#daywrap.keepwide #tbl-days td{padding:9px 7px;font-size:12px}
  #daywrap.keepwide #tbl-days td.cell-name{font-size:13px}
  .d-caret{width:22px;height:22px;font-size:10px}

  /* ---- Team: the roster comes first; the how-to and the add form follow ---- */
  #panel-team{display:flex;flex-direction:column}
  #panel-team > .card:has(#tbl-team){order:-1}
  #panel-team > .card.share{order:9}
  #panel-team > .card:has(#a-name){order:8}

  /* ---- entry rows: a touch tighter so more of the team fits a screen ---- */
  .rows .row{padding:12px 13px}
  .rows .who .nm{font-size:15px}
  .rows .inp input.v{font-size:16px;padding:11px 12px}
  .rowsum{border-radius:0 0 15px 15px}
}
@media (max-width:370px){
  .hero-top h2{font-size:21px}
  .meter .big{font-size:21px}
}

/* leads given to the team */
.la-tbl th,.la-tbl td{white-space:nowrap}
.la-tbl thead th:first-child,.la-tbl tbody td:first-child,.la-tbl tfoot td:first-child{position:sticky;left:0;z-index:2;background:var(--surface)}
.la-tbl thead th:first-child{background:var(--surface-2)}
.la-tbl tfoot td:first-child{background:var(--surface-2)}
.la-tbl input.lav{width:56px;text-align:center;padding:5px 4px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.la-tbl input.lav:focus{background:var(--surface);border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-soft);outline:none}
.la-tbl input.lav.mand{border-style:dashed}
.la-tbl input.lav:disabled{opacity:.55}
.la-tbl tr.today td{background:var(--brand-soft)}
.la-tbl tr.today td:first-child{background:var(--brand-soft)}
.la-tbl td.short{color:var(--bad);font-weight:700}
.la-tbl td.met{color:var(--ok);font-weight:700}
.la-sp{display:block;font-size:14px}
.la-sp.met{color:var(--ok)} .la-sp.short{color:var(--bad)}
.la-ss{display:block;font-size:10.5px;color:var(--muted);font-weight:500}
.la-slab{font-size:12.5px;font-weight:600;white-space:nowrap}
#tbl-laeff .gradepill{font-size:10.5px}
.la-setall{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);font-weight:600}
.la-setall input[type=date]{width:auto;min-width:140px}
.la-charts{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;padding:14px 18px 18px}
.la-charts h4{margin:0 0 8px;font-size:13px}
@media (max-width:900px){ .la-charts{grid-template-columns:1fr} }
#la-chart1 svg,#la-chart2 svg{display:block;width:100%;height:auto}
.la-sun td{color:var(--muted)}
.la-sun td:first-child::after{content:" · no target";font-size:10.5px;font-weight:500}
td.met{color:var(--ok);font-weight:700} td.short{color:var(--bad);font-weight:700}
.la-setall input{width:70px;text-align:center}
/* lead campaigns */
.eqpick{position:relative;display:inline-block}
#staffpick,#staffpick .card-hd{overflow:visible!important}
#staffpick{position:relative;z-index:40}
.eqpick-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:7px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;max-width:320px}
.eqpick-btn span{overflow:hidden;text-overflow:ellipsis}
.eqpick-btn:hover,.eqpick-btn[aria-expanded="true"]{border-color:var(--brand)}
.eqpick-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -16px rgba(0,0,0,.4);padding:8px}
.eqpick-pop[hidden]{display:none}
.eqpick-hd{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:4px 6px 6px}
.eqpick-pop label{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;font-size:13px;cursor:pointer;color:var(--ink)}
.eqpick-pop label:hover{background:var(--surface-2)}
.eqpick-pop input{width:16px;height:16px;accent-color:var(--brand);margin:0}
.eqpick-ft{display:flex;gap:6px;padding:8px 4px 2px;border-top:1px solid var(--line-soft);margin-top:4px}
@media (max-width:640px){ .eqpick,.eqpick-btn{width:100%;max-width:none} .eqpick-btn{justify-content:space-between} .eqpick-pop{left:0;right:0} }
.ld-tbl td,.ld-tbl th{vertical-align:middle}
.ld-tbl input.ldv{width:100%;min-width:92px;max-width:160px;text-align:right;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.ld-tbl input.ldv:focus{background:var(--surface);border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-soft);outline:none}
.ld-tbl input.ldv:disabled{opacity:.55;cursor:not-allowed}
.ld-tbl .ldname{display:flex;align-items:center;gap:9px;font-weight:700}
.ld-dot{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}
.ld-share{display:inline-block;height:6px;border-radius:6px;background:var(--brand);vertical-align:middle;margin-right:6px}
@media (max-width:640px){ .ld-tbl input.ldv{min-width:74px;padding:7px 8px} }

/* profit and loss */
.pl-addrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pl-addrow input{flex:1;min-width:190px}
.pl-head{border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:8px;background:var(--surface-2)}
.pl-head-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pl-head-top b{font-size:14px;flex:1;min-width:120px}
.pl-head-top .cnt{font-size:11.5px;color:var(--muted)}
.pl-subs{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.pl-sub{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 11px;font-size:12px}
.pl-sub button,.pl-head-top .xbtn{border:0;background:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:2px 5px;border-radius:6px}
.pl-sub button:hover,.pl-head-top .xbtn:hover{background:var(--bad-bg);color:var(--bad)}
.pl-subadd{display:inline-flex;gap:6px;align-items:center;margin-top:8px}
.pl-subadd input{width:200px;max-width:52vw}
.pl-tbl input.plv{width:100%;min-width:110px;max-width:190px;text-align:right;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.pl-tbl input.plv:focus{background:var(--surface);border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-soft);outline:none}
.pl-tbl input.plv:disabled{opacity:.55;cursor:not-allowed}
.pl-tbl tr.plhead td{background:var(--surface-2);font-weight:700}
.dv.up{color:var(--ok)}
.dv.down{color:var(--bad)}
.pl-reportcard .kpis{border-top:0}
.pl-customrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pl-customrow .dpbtn{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.pl-customrow .dpbtn:hover{border-color:var(--brand)}
.pl-customrow .cap{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.pl-customrow .arrow{color:var(--muted)}
.pl-chartwrap{padding:14px 16px 18px}
.pl-chart-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.pl-chart-hd h4{margin:0;font-size:13.5px}
.pl-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.pl-legend .lg{display:inline-flex;align-items:center;gap:5px}
.pl-legend .lg::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--brand-2)}
.pl-legend .lg.exp::before{background:var(--gold)}
.pl-legend .lg.base::before{background:transparent;border:1px dashed var(--muted);border-radius:0;height:0;width:14px}
.pl-legend .lg.res::before{background:var(--ok);border-radius:50%;width:9px;height:9px}
#pl-chart{overflow-x:auto}
#pl-chart svg{display:block;width:100%;height:auto}
@media (max-width:640px){ #pl-chart svg{min-width:560px} }
.pl-bar-lbl{font-size:10px;fill:var(--muted)}
.pl-periodbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--surface-2)}
.pl-periodbar .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.pl-periodnote{padding:10px 16px;font-size:12.5px;color:var(--muted)}
.pl-hidden{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.pl-hidden .lbl{font-weight:700;color:var(--ink-2)}
.pl-chip{border:1px dashed var(--line);background:var(--surface-2);color:var(--ink-2);border-radius:999px;padding:5px 11px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.pl-chip:hover{border-style:solid;border-color:var(--brand);color:var(--brand)}
.pl-chip b{color:var(--brand)}
.pl-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.pl-form .fld{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted);font-weight:600}
.pl-form .fld.grow{flex:1;min-width:230px}
.pl-form .fld input,.pl-form .fld select{min-width:150px}
.pl-form .btn{min-height:40px}
.pl-monthcard .datebar{border-top:1px solid var(--line-soft)}
.pl-monthcard .dbnote{margin-left:auto;text-align:right}
@media (max-width:640px){
  .pl-form .fld,.pl-form .btn{width:100%}
  .pl-form .fld input,.pl-form .fld select{min-width:0;width:100%}
  .pl-monthcard .dbnote{margin-left:0;text-align:left}
}
.pl-salerow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.pl-salerow .fld{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted);font-weight:600}
.pl-salerow .fld.grow{flex:1;min-width:220px}
.pl-salerow .fld input{min-width:140px}
.pl-verdict{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;margin:0 16px 14px;border:1px solid var(--line)}
.pl-verdict.profit{background:var(--ok-bg);border-color:var(--ok)}
.pl-verdict.loss{background:var(--bad-bg);border-color:var(--bad)}
.pl-verdict .big{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.pl-verdict.profit .big{color:var(--ok)}
.pl-verdict.loss .big{color:var(--bad)}
.pl-verdict .lbl{font-size:12px;color:var(--ink-2);font-weight:600}
.pl-verdict .side{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.pl-verdict .side div span{display:block;font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.pl-verdict .side div b{font-size:16px}
@media (max-width:640px){
  .pl-verdict{margin:0 12px 12px;padding:14px}
  .pl-verdict .side{margin-left:0;gap:14px}
  .pl-tbl input.plv{min-width:92px}
}

/* ---- entry deadline: timer, lock banners, extra-time request ---- */
.dlbox{display:flex;align-items:center;gap:6px}
.dlpill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:10px;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.dlpill svg{width:14px;height:14px}
.dlpill.soon{background:#D99A2B;border-color:#D99A2B;color:#1d1400}
.dlpill.closed{background:#D8433A;border-color:#D8433A;color:#fff}
.dlreq{height:32px;padding:0 11px;border-radius:10px;border:1px solid rgba(255,255,255,.28);background:none;color:#fff;font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.dlreq:hover,.dlpill:hover{filter:brightness(1.1)}
.dlreq{display:inline-flex;align-items:center;gap:6px}
.dlreq svg{width:14px;height:14px;flex:none}
/* keep the header on one line: labels give way to icons as the screen narrows */
@media (max-width:1560px){ .statepill span{display:none} }
@media (max-width:1380px){ .dlreq span{display:none} .dlreq{padding:0 9px} }
@media (max-width:1320px){ .mastpdf span{display:none} .mastpdf{padding:0 10px} }
@media (max-width:640px){ .dlreq{display:none} }
.dlpill span{overflow:hidden;text-overflow:ellipsis;max-width:170px}
@media (max-width:640px){ .dlbox{order:5;min-width:0;max-width:100%} .dlpill{height:28px;font-size:11px;padding:0 8px;max-width:100%} .dlpill span{max-width:140px} }
.lockbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 16px 10px;padding:9px 12px;border-radius:11px;font-size:12.5px;border:1px solid var(--line)}
.lockbar.open{background:var(--ok-bg);border-color:transparent;color:var(--ink-2)}
.lockbar.closed{background:var(--bad-bg);border-color:transparent;color:var(--ink)}
.lockbar .lb-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.lockbar.closed .lb-dot{background:var(--bad)}
.lockbar .btn{margin-left:auto}
#lock-entry .lockbar{margin-top:2px}
.ext-dates{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;max-height:220px;overflow:auto;margin-top:6px}
.ext-d{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:10px;padding:7px 9px 7px 30px;position:relative;cursor:pointer;background:var(--surface-2)}
.ext-d input{position:absolute;left:9px;top:10px;width:15px;height:15px;accent-color:var(--brand)}
.ext-d b{font-size:12.5px} .ext-d span{font-size:10.5px;color:var(--muted)}
.ext-d:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.ext-h{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;font-size:13px}
.ext-h label{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer}
.ext-h input{accent-color:var(--brand)}
/* ---- manager performance ---- */
.perfcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:12px 0}
.perfcard:empty{display:none}
.pf-hd{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;justify-content:space-between}
.pf-hd h3{font-size:15.5px;margin:0} .pf-hd p{margin:3px 0 0;font-size:12px;color:var(--muted)}
.pf-kpis{display:grid;grid-template-columns:auto repeat(5,minmax(0,1fr));gap:10px;margin:12px 0}
.pf-kpis .kpi{background:var(--surface-2);border-radius:12px;padding:10px 12px}
.pf-kpis .kpi b{font-size:20px}
.pf-score{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:110px;border-radius:14px;padding:8px 14px;background:var(--surface-2);border:2px solid var(--line)}
.pf-score b{font-size:28px;line-height:1;font-family:"Bricolage Grotesque",sans-serif}
.pf-score span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.pf-score em{font-style:normal;font-size:11.5px;font-weight:800;margin-top:3px}
.pf-score.ok{border-color:var(--ok)} .pf-score.ok em,.pf-score.ok b{color:var(--ok)}
.pf-score.warn{border-color:var(--warn)} .pf-score.warn em,.pf-score.warn b{color:var(--warn)}
.pf-score.bad{border-color:var(--bad)} .pf-score.bad em,.pf-score.bad b{color:var(--bad)}
@media (max-width:1000px){ .pf-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} .pf-score{grid-row:span 2} }
@media (max-width:640px){ .pf-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .pf-score{grid-row:auto;grid-column:1/-1;flex-direction:row;gap:10px} }
.pf-areas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
@media (max-width:760px){ .pf-areas{grid-template-columns:1fr} }
.pf-arow{background:var(--surface-2);border-radius:12px;padding:10px 12px}
.pf-an{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:7px}
.pf-an b{font-size:13px} .pf-an span{font-size:12px;color:var(--muted);font-weight:700}
.pf-stack{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--line-soft)}
.pf-stack i{display:block;height:100%}
.pf-stack .ontime,.pf-legend .ontime,.pf-d.ontime{background:#1C9A64}
.pf-stack .late,.pf-legend .late,.pf-d.late{background:#D99A2B}
.pf-stack .missed,.pf-legend .missed,.pf-d.missed{background:#D4453A}
.pf-legend .pending,.pf-d.pending{background:#3C67E0}
.pf-legend .off,.pf-d.off,.pf-d.future{background:var(--line-soft)}
.pf-nums{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;margin-top:6px;color:var(--muted)}
.pf-nums .ok{color:var(--ok);font-weight:700} .pf-nums .warn{color:var(--warn);font-weight:700} .pf-nums .bad{color:var(--bad);font-weight:700}
.pf-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;align-items:center;overflow-x:auto}
.pf-gl{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.pf-row{display:grid;grid-template-columns:repeat(31,minmax(18px,1fr));gap:3px;min-width:600px}
.pf-d{font-style:normal;height:24px;border-radius:5px;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff}
.pf-d.off,.pf-d.future{color:var(--muted)}
.pf-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin:10px 0 4px}
.pf-legend span{display:inline-flex;align-items:center;gap:5px}
.pf-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.pf-ex{margin-top:8px}
.pf-ex summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--ink-2);padding:6px 0}
.pf-why{white-space:normal;max-width:360px}

/* ---- section tabs on desktop: icons, brighter labels, a clear frame, pinned under the header ---- */
@media (min-width:641px){
  .tabs{position:sticky;top:var(--tabs-top,78px);z-index:30;gap:4px;padding:5px;
    background:var(--surface);border:1px solid var(--line);
    box-shadow:0 8px 24px -14px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.04) inset}
  .tabs button{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;color:var(--ink-2);font-weight:600;font-size:13.5px}
  .tabs button .tic{display:inline-flex;width:17px;height:17px;flex:none;opacity:.8}
  .tabs button .tic svg{width:17px;height:17px;display:block}
  .tabs button .ts{display:none}
  .tabs button:hover{background:var(--surface-2);color:var(--ink)}
  .tabs button:hover .tic{opacity:1}
  .tabs button:focus-visible{outline:2px solid var(--brand-2);outline-offset:1px}
  .tabs button[aria-selected="true"]{background:var(--brand);color:#fff;box-shadow:0 6px 16px -6px rgba(46,86,211,.75)}
  .tabs button[aria-selected="true"] .tic{opacity:1}
  :root[data-theme="dark"] .tabs button[aria-selected="true"]{color:#06102E}
}
@media (min-width:641px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tabs button[aria-selected="true"]{color:#06102E}
}
@media (min-width:641px) and (max-width:1280px){
  .tabs button{padding:8px 11px;gap:6px;font-size:13px}
}

/* ---- undo / redo ---- */
.undobox{display:flex;align-items:center;gap:0;border:1px solid rgba(255,255,255,.28);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.08)}
.undobtn{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px;border:0;background:none;color:#fff;font:inherit;font-size:12px;font-weight:700;cursor:pointer;position:relative}
.undobtn + .undobtn{border-left:1px solid rgba(255,255,255,.22)}
.undobtn svg{width:15px;height:15px;flex:none}
.undobtn:hover:not(:disabled){background:rgba(255,255,255,.16)}
.undobtn:disabled{opacity:.45;cursor:default}
.undobtn .uc{font-style:normal;font-size:10px;min-width:15px;height:15px;border-radius:99px;background:#fff;color:#1B3A9C;display:inline-flex;align-items:center;justify-content:center;padding:0 3px}
.undobtn .uc:empty{display:none}
@media (max-width:1760px){ .undobtn span{display:none} .undobtn{padding:0 9px} }
@media (max-width:640px){ .undobox{order:4} .undobtn{height:28px;padding:0 7px} }
.undo-flash{animation:undoflash .9s ease}
@keyframes undoflash{0%{box-shadow:0 0 0 3px rgba(91,130,255,.9)}100%{box-shadow:0 0 0 0 rgba(91,130,255,0)}}

/* ---- slab filter beside the pace note ---- */
.hero-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.herotgt{display:inline-flex;align-items:center;gap:7px}
.herotgt label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.herotgt select{width:auto;min-width:150px}
@media (max-width:640px){ .herotgt{width:100%} .herotgt select{flex:1} }
/* ---- every section tab has its own colour ---- */
.tabs button[data-tab="entry"]{--tc:#3B82F6;--tt:#fff}
.tabs button[data-tab="days"]{--tc:#06B6D4;--tt:#04222A}
.tabs button[data-tab="team"]{--tc:#10B981;--tt:#032A1D}
.tabs button[data-tab="salary"]{--tc:#F59E0B;--tt:#2A1A00}
.tabs button[data-tab="staff"]{--tc:#8B5CF6;--tt:#fff}
.tabs button[data-tab="leads"]{--tc:#EC4899;--tt:#fff}
.tabs button[data-tab="eqrep"]{--tc:#F97316;--tt:#2A1100}
.tabs button[data-tab="report"]{--tc:#6366F1;--tt:#fff}
.tabs button[data-tab="pnl"]{--tc:#84CC16;--tt:#1A2600}
.tabs button .tic{color:var(--tc)}
.tabs button .tic svg{stroke:currentColor}
@media (min-width:641px){
  .tabs button{position:relative}
  .tabs button::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:var(--tc);opacity:.55}
  .tabs button:hover{background:color-mix(in srgb,var(--tc) 14%,transparent)}
  .tabs button:hover::after{opacity:1}
  .tabs button .tic{opacity:1}
  .tabs button[aria-selected="true"],
  :root[data-theme="dark"] .tabs button[aria-selected="true"]{background:var(--tc);color:var(--tt);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--tc) 80%,transparent)}
  .tabs button[aria-selected="true"] .tic{color:var(--tt)}
  .tabs button[aria-selected="true"]::after{display:none}
}
@media (min-width:641px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tabs button[aria-selected="true"]{color:var(--tt)}
}
@media (max-width:640px){
  .tabs button[aria-selected="true"]{color:var(--tc)!important;background:color-mix(in srgb,var(--tc) 16%,transparent)!important}
  .tabs button[aria-selected="true"] .tic{color:var(--tc)}
}

/* ---- phones: a two-row header, finger-sized controls, readable small print ---- */
.mbreak{display:none}
@media (max-width:640px){
  .mast-in{flex-wrap:wrap!important;row-gap:8px!important;align-items:center}
  .mast-in > .brandmark{order:1!important}
  .mast-in > .datefield{order:2!important;flex:1 1 auto!important;min-width:0}
  .mast-in > .accesspill,.mast-in > .whohere,.mast-in > .statepill{order:3!important}
  .mast-in > .gx-acct{order:4!important}
  .mast-in > .mbreak{display:block;order:5!important;flex-basis:100%;height:0}
  .mast-in > .undobox{order:6!important;flex:none}
  .mast-in > .dlbox{order:7!important;flex:1 1 auto!important;min-width:0}
  .mast-in > .dlbox .dlpill{width:100%;justify-content:center;max-width:none}
  .mast-in > .mastpdf{order:8!important}
  .undobtn{height:38px!important;min-width:44px;padding:0 12px!important}
  .dlpill{height:38px!important;font-size:12.5px!important}
  .dlpill span{max-width:none!important}
  .mastpdf{height:38px!important;min-width:44px}
  .gx-av{width:38px;height:38px}
  /* calendar and evaluation panel */
  #ck-prev,#ck-next,.ck-larr{min-width:40px!important;min-height:40px!important}
  #ck-lscope{min-height:36px;font-size:12.5px!important}
  .ck-lmore{display:inline-block;padding:10px 0!important;font-size:12.5px!important}
  .ck-day .dn{min-width:34px;min-height:34px;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px}
  input.ck{width:30px!important;height:30px!important}
  input.chk{width:22px;height:22px}
  .dchip{min-height:36px}
  .ck-ldots button{width:10px;height:10px}
  /* small print */
  .ch-cap,.ch-tg,.mchip,.tag2,.pf-d,.ck-lslide .st,.ck-lsum span{font-size:11px!important}
  th,th.num,th.sl{font-size:11px!important}
  .pf-row{grid-template-columns:repeat(31,minmax(22px,1fr))}
}

@media (max-width:380px){ .mast-in > .brandmark h1,.mast-in > .brandmark .rule{display:none!important} .mast-in > .brandmark img{max-height:30px} }