/* MehlSoft Time, design system: the MehlSoft Production Hub's v4 look (same tokens, gradient, type, tiles, pills,
   tabs and cards) so the two apps read as one product, plus Time's own pieces drawn in that style:
   the shift timeline, the week grid, the edit dialog, the skills matrix, the roll call. Light theme only. */
:root{--bg:#f3f5f9;--card:#fff;--line:rgba(15,23,42,.10);--line2:rgba(15,23,42,.06);--ink:#0f172a;--ink2:#334155;--mute:#64748b;
  --orange:#f97316;--orange2:#c2410c;--p1:#7c3aed;--p2:#4f46e5;--p2d:#4338ca;--p2rgb:79,70,229;--tint:#eef2ff;--tint2:#c7d2fe;--sky:#0284c7;--green:#059669;--amber:#d97706;--red:#dc2626;--teal:#0d9488;
  --grad:linear-gradient(135deg,var(--p1),var(--p2));--sh:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.04);--sh2:0 10px 30px rgba(15,23,42,.12);--r:14px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--p2);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{margin:0;letter-spacing:-.01em}
svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.eyebrow{font-size:.68rem;font-weight:700;color:var(--orange);margin:0 0 4px;letter-spacing:.02em}
.muted{color:var(--mute);font-size:12.5px}p.muted{margin:10px 0 0}
.small{font-size:11.5px}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- top bar */
header.top{display:flex;align-items:center;gap:18px;height:64px;padding:0 24px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);min-width:220px}.brand:hover{text-decoration:none}
.brand .tile{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;overflow:hidden;background:var(--grad);color:#fff;font-weight:800;font-size:17px;flex:none;box-shadow:0 4px 12px rgba(var(--p2rgb),.28)}
.brand b{display:block;font-size:15px;font-weight:800;line-height:1.1}
.brand small{display:block;font-size:11px;color:var(--mute);font-weight:600;letter-spacing:.04em}
.brand small.bsub{font-size:12px;font-weight:700;color:#fe8a17;letter-spacing:0;margin-top:2px}.brand small.bsub b{display:inline;font-size:inherit;font-weight:700;line-height:inherit;letter-spacing:0;color:#154a7e}.brand small.bsub b::after{content:"|";color:#cbd5e1;font-weight:400;margin:0 6px}   /* 07/11/2026: the logo's own colours, MehlSoft navy, Time orange */   /* 06/11/2026: as MehlSoft Finance */
form.search{flex:1;max-width:560px;margin:0 auto;position:relative;display:flex}
form.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--mute)}
form.search input{width:100%;padding:10px 90px 10px 40px;border:1px solid var(--line);border-radius:999px;background:#f1f4f9;font:inherit;font-size:13.5px;color:var(--ink);outline:none;transition:.15s;margin:0}
form.search input:focus{background:#fff;border-color:var(--p2);box-shadow:0 0 0 3px rgba(var(--p2rgb),.12)}
form.search button{position:absolute;right:5px;top:5px;bottom:5px;margin:0;padding:0 14px;border:0;border-radius:999px;background:var(--grad);color:#fff;font-weight:700;font-size:12.5px;box-shadow:none}
.sdrop{position:absolute;left:0;right:0;top:46px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh2);padding:6px;z-index:40}
.sdrop a{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:8px;color:var(--ink);font-weight:600;font-size:13px}.sdrop a:hover,.sdrop a.on{background:var(--tint);text-decoration:none}
.sdrop a small{color:var(--mute);font-weight:600}
.tright{display:flex;align-items:center;gap:10px;margin-left:auto}
.live{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--line);border-radius:10px;font-size:12px;font-weight:700;color:var(--ink2);background:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(5,150,105,.45)}70%{box-shadow:0 0 0 7px rgba(5,150,105,0)}100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}}
.tb{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--line);border-radius:10px;font-size:12.5px;font-weight:700;color:var(--ink2);background:#fff;white-space:nowrap}
.tb svg{color:var(--orange)}.tb:hover{text-decoration:none;background:#f8fafc;border-color:#cbd5e1}
.tb.fire svg{color:var(--red)}.tb b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font-size:11px}
details.umenu{position:relative}details.umenu summary{list-style:none;cursor:pointer}details.umenu summary::-webkit-details-marker{display:none}
.user{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 5px;border:1px solid var(--line);border-radius:12px;background:#fff}
.user .av{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,var(--orange),#fb923c);color:#fff;font-weight:800;font-size:12.5px}
.user b{display:block;font-size:13px;line-height:1.15}.user small{display:block;font-size:11px;color:var(--mute);font-weight:600}.user .caret{color:var(--mute);font-size:11px}
.upop{position:absolute;right:0;top:50px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh2);min-width:200px;padding:6px;z-index:40}
.upop .uhead{padding:8px 12px 10px;border-bottom:1px solid var(--line2);margin-bottom:4px}.upop .uhead b{display:block}.upop .uhead small{color:var(--mute);font-weight:600}
.upop a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink);font-weight:600}.upop a:hover{background:var(--tint);text-decoration:none}
.powered{display:flex;align-items:center;padding-left:6px}.powered:hover{text-decoration:none}
/* the MehlSoft Time lockup (06/11/2026, as MehlSoft Finance): mark, "MehlSoft" dark 800, "Time" orange 700, 10px gap */
details.apps{position:relative}details.apps>summary{list-style:none;cursor:pointer;border-radius:10px;padding:4px 6px 4px 8px}details.apps>summary::-webkit-details-marker{display:none}
details.apps>summary:hover,details.apps[open]>summary{background:var(--tint)}
.apppop{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:min(280px,calc(100vw - 24px));background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2);padding:10px}
.apppop .eyebrow{margin:2px 6px 6px}
.apppop .appi{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px;color:var(--ink)}.apppop a.appi:hover{background:var(--tint);text-decoration:none}
.apppop .appi svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--ink2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.apppop .appi>span{flex:1;min-width:0}.apppop .appi b{display:block;font-size:13px;font-weight:700}.apppop .appi small{display:block;font-size:11.5px;color:var(--mute)}
.apppop .appi em{font-style:normal;color:var(--mute);font-size:13px}.apppop .appi.here{background:#fff7ed}.apppop .appi.here em{font-size:11px;font-weight:700;color:#f97316}
/* the MehlSoft logo is the ORIGINAL picture, never redrawn or recoloured (07/11/2026); only the word "Time" is ours, beside it */
.mslock{display:inline-flex;align-items:center;gap:8px;line-height:1}.mslock img.mslogo{height:38px;width:auto;display:block;flex:none;margin:-4px 0}
@media (max-width:960px){.powered .mslock i{display:none}.powered .mslock img.mslogo{height:28px;margin:-2px 0}}   /* phones and tablets: the whole logo, smaller, never cut; "MehlSoft | Time" is top left */
.mslock i{font-style:normal;font-size:15px;font-weight:700;color:#fe8a17;padding-left:9px;border-left:1.5px solid #cbd5e1;line-height:18px}
.powered>img{height:30px;width:auto;display:block}.powered-by>img{height:40px;width:auto;border-radius:8px;background:#fff;padding:4px 10px}   /* the old logo picture, until the server restarts */

/* ---------- pill nav and the section tabs under it */
nav.main{display:flex;gap:6px;padding:9px 24px;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
nav.main::-webkit-scrollbar,nav.sub::-webkit-scrollbar{display:none}nav.main:empty{display:none}
nav.main a{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;font-size:13px;font-weight:700;color:var(--ink2);background:#fff;white-space:nowrap;transition:.12s}
nav.main a svg{width:15px;height:15px;color:var(--mute)}
nav.main a:hover{text-decoration:none;background:#f1f4f9;border-color:#cbd5e1}
nav.main a.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(var(--p2rgb),.28)}nav.main a.on svg{color:#fff}
nav.main a .n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--orange);color:#fff;font-size:10.5px;font-weight:800}
nav.sub{display:flex;padding:10px 24px 0;max-width:1680px;margin:0 auto}
nav.sub .tabs{display:inline-flex;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;box-shadow:var(--sh)}
nav.sub a{padding:6px 13px;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--ink2);white-space:nowrap}
nav.sub a:hover{text-decoration:none;background:#f1f4f9}nav.sub a.on{background:var(--grad);color:#fff}

/* ---------- page and its header */
main.page{max-width:1680px;margin:0 auto;padding:18px 24px 56px;animation:rise .25s ease}
@keyframes rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.pagehead h1{font-size:25px;font-weight:800}.pagehead .sub{color:var(--mute);margin:4px 0 0;font-size:13.5px}
.pagehead .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.pagehead .acts>*,.bar>*,.cardhead>*:last-child>*{margin-top:0!important;margin-bottom:0!important}
.pagehead .acts .btn,.pagehead .acts button,.pagehead .acts form.cell input,.pagehead .acts form.cell select{min-height:38px}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0f172a,#1e1b4b 65%,#312e81);color:#fff;border-radius:18px;padding:22px 26px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;box-shadow:0 12px 30px rgba(15,23,42,.18)}
.hero::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,.25),transparent 65%);right:-120px;top:-170px;pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero .eyebrow{color:#fdba74}.hero h1{font-size:28px;font-weight:800;letter-spacing:-.02em}.hero .sub{opacity:.82;margin:5px 0 0;font-size:14px}
.hero .clockbig{font-size:44px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.hero .clockbig small{display:block;font-size:12px;font-weight:600;opacity:.75;letter-spacing:0;margin-top:6px;text-align:right}
.hero .chipsrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.hero .chipsrow span{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-size:12px;font-weight:700}
.hero .chipsrow i{width:7px;height:7px;border-radius:50%;display:inline-block}
.dark{background:linear-gradient(135deg,#0f172a,#1e1b4b 70%,#312e81);color:#fff;border-radius:var(--r);padding:20px 26px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;box-shadow:0 10px 24px rgba(15,23,42,.18)}
.dark h1{font-size:28px;font-weight:800;letter-spacing:-.02em}.dark h1 small{font-size:15px;font-weight:500;opacity:.8;margin-left:10px}
.dark .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.dark .meta .pill{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}
.dark .side{text-align:right}.dark .side span{display:block;font-size:10.5px;font-weight:700;opacity:.75}.dark .side b{display:block;font-size:28px;font-weight:800;margin:4px 0}
.dark a{color:#c7d2fe}

/* ---------- stat tiles */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.stats.s4{grid-template-columns:repeat(4,1fr)}@media (max-width:900px){.stats.s4{grid-template-columns:repeat(2,1fr)}}
.stat{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 13px;box-shadow:var(--sh);color:var(--ink);position:relative;transition:.15s}
a.stat:hover{text-decoration:none;border-color:#c7d2fe;transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.07)}
.stat label{display:block;font-size:10.5px;font-weight:700;color:var(--mute);padding-right:34px;margin:0}
.stat b{display:block;font-size:26px;font-weight:800;line-height:1.1;margin-top:7px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat small{display:block;font-size:12px;color:var(--mute);margin-top:8px;font-weight:600;line-height:1.35}
.stat .ic{position:absolute;right:12px;top:12px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#eef2ff;color:var(--p2)}.stat .ic svg{width:15px;height:15px}
.stat .bar{position:absolute;left:16px;right:16px;bottom:8px;height:4px;border-radius:999px;background:#eef2f7;overflow:hidden;margin:0}.stat .bar i{display:block;height:100%;background:var(--grad);border-radius:999px}
.stat.red b{color:var(--red)}.stat.red .ic{background:#fef2f2;color:var(--red)}.stat.red .bar i{background:var(--red)}
.stat.amber b{color:var(--amber)}.stat.amber .ic{background:#fffbeb;color:var(--amber)}.stat.amber .bar i{background:var(--amber)}
.stat.green b{color:var(--green)}.stat.green .ic{background:#ecfdf5;color:var(--green)}.stat.green .bar i{background:var(--green)}
.stat.teal b{color:var(--teal)}.stat.teal .ic{background:#f0fdfa;color:var(--teal)}
.stat.orange b{color:var(--orange2)}.stat.orange .ic{background:#fff7ed;color:var(--orange)}

/* ---------- cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh);margin-bottom:16px;min-width:0}
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
@media(max-width:640px){.cardhead{flex-wrap:wrap}.cardhead>form,.cardhead>.cell{max-width:100%}}
.pagehead .acts{max-width:100%;min-width:0}.pagehead .acts form.cell{max-width:100%;min-width:0}.pagehead .acts select{max-width:100%;min-width:0;text-overflow:ellipsis}   /* a long option never widens the page */
.cardhead h2{font-size:15px;font-weight:800;display:flex;align-items:center;flex-wrap:wrap}
.cardhead .sub2{display:block;font-size:12px;color:var(--mute);font-weight:500;margin-top:2px}
.count{display:inline-block;margin-left:9px;padding:1px 8px;border-radius:999px;background:#eef2ff;color:var(--p2);font-size:11px;font-weight:800}
.count.red,.count.bad{background:#fef2f2;color:var(--red)}.count.amber,.count.warn{background:#fffbeb;color:var(--amber)}
.more{font-size:12.5px;font-weight:700;white-space:nowrap}
.card.dim{opacity:.6}.card.flat{box-shadow:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.grid2>.card{margin-bottom:0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}.grid3>.card{margin-bottom:0}
.grid21{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:16px;align-items:start}.grid21>.card,.grid21>div>.card{margin-bottom:16px}
.grid2>*,.grid3>*,.grid21>*,.settings>*{min-width:0}                 /* a wide table scrolls inside its card instead of stretching the page */
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px;border:1px dashed var(--line);border-radius:12px;color:var(--mute);font-size:13px;text-align:center}
.empty svg{width:26px;height:26px;opacity:.55}

/* ---------- tables */
.tw{overflow-x:hidden}   /* never a sideways slider (Daniel, 04/11/2026): app.js stacks a table that does not fit */
/* a table that does not fit: one card per row, each value with its column name */
table.stacked,table.stacked tbody,table.stacked tfoot,table.stacked tr,table.stacked td{display:block;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;position:static!important}
table.stacked thead{display:none}
table.stacked tr{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:0 0 8px;background:#fff!important}
table.stacked td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0!important;padding:3px 0!important;text-align:right!important;background:none!important;box-shadow:none!important}
table.stacked td::before{content:attr(data-label);flex:none;max-width:45%;text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mute)}
table.stacked td{flex-wrap:wrap}table.stacked td .pp{white-space:normal;display:flex;flex-wrap:wrap;gap:3px 6px;align-items:center;justify-content:flex-end}table.stacked td>*{max-width:100%;min-width:0}table.stacked td .pill,table.stacked td .tag{white-space:normal;text-align:left;height:auto;line-height:1.3}
table.stacked td[data-label=""]::before{display:none}table.stacked td:first-child{justify-content:flex-start;text-align:left!important;font-weight:700;padding-bottom:6px!important}
table.stacked td:empty,table.stacked td.mx.none,table.stacked td.we:empty{display:none}table.stacked td input,table.stacked td select{max-width:60%}
table.stacked tfoot tr{background:#f8fafc!important}
/* the skills matrix: narrower columns before it has to stack */
table.matrix2.tight th.sk,table.matrix2.tight td.mx{width:30px;min-width:30px;max-width:30px}table.matrix2.tight td.mx a{width:26px;font-size:10.5px}table.matrix2.tight td.mx.miss a{width:28px;font-size:7.5px}
table.matrix2.tight .nm{min-width:170px}table.matrix2.tight td.cpl,table.matrix2.tight th.cpl{min-width:84px}
table.matrix2.stacked td.mx{justify-content:space-between}table.matrix2.stacked td.mx a{margin:0}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10.5px;font-weight:700;color:var(--mute);padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line2);vertical-align:middle;font-size:13.5px}
tr:last-child td{border-bottom:0}tbody tr:hover td{background:#f8fafc}
td a.who,a.who{font-weight:800;color:var(--ink)}
.sub2{display:block;font-size:12px;color:var(--mute);font-weight:500}
.av{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-size:11px;font-weight:800;flex:none;vertical-align:middle}
.person{display:flex;align-items:center;gap:10px}.person b{display:block;font-weight:800;color:var(--ink)}.person small{display:block;color:var(--mute);font-size:11.5px;font-weight:600}

/* ---------- pills */
.pill,.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:700;border:1px solid;white-space:nowrap;line-height:1.5;background:#f1f5f9;border-color:#cbd5e1;color:#475569}
.pill::before,.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok,.tag.ok{background:#ecfdf5;border-color:#a7f3d0;color:#047857}
.pill.warn,.tag.warn,.pill.due{background:#fffbeb;border-color:#fde68a;color:#b45309}
.pill.bad,.tag.bad,.pill.late{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.pill.plain,.tag.plain{background:var(--tint);border-color:var(--tint2);color:var(--p2d)}.pill.plain::before,.tag.plain::before{display:none}
.dlg .punches .pill{white-space:normal;max-width:100%;height:auto;line-height:1.35}   /* the edit window's notes wrap instead of running off the edge (07/11/2026) */
.pill.info,.tag.info{background:#f0f9ff;border-color:#bae6fd;color:#0369a1}
.pill.dept{background:#fff7ed;border-color:#fed7aa;color:#c2410c}.pill.dept::before{display:none}

/* ---------- forms and buttons */
label{display:block;font-size:10.5px;font-weight:700;color:var(--mute);margin-top:12px}
/* :where() keeps these general rules weak, so any specific rule (the search box, small inline forms) always wins */
:where(input:not([type=hidden]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color])),:where(select),:where(textarea){display:block;width:100%;margin-top:5px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:14px;color:var(--ink);background:#fff;outline:none;box-sizing:border-box}
input:focus,select:focus,textarea:focus{border-color:var(--p2)!important;box-shadow:0 0 0 3px rgba(var(--p2rgb),.12)}
input[type=file]{display:block;margin-top:5px;font:inherit;font-size:12.5px}input[type=color]{display:block;margin-top:5px;width:60px;height:36px;border:1px solid var(--line);border-radius:8px;padding:2px}
label.chk{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink2);margin-top:10px}label.chk input{margin:0;accent-color:var(--p2);width:16px;height:16px}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:11.5px 16px 8.5px;border:0;border-radius:10px;background:var(--grad);color:#fff;font:inherit;font-weight:700;font-size:13px;line-height:1.2;cursor:pointer;box-shadow:0 3px 10px rgba(var(--p2rgb),.25);white-space:nowrap;vertical-align:middle;box-sizing:border-box}
/* only the button that ends a full form gets space above it; in rows (headers, toolbars, one-line forms) everything lines up on the middle */
form:not(.cell):not(.inline):not(.clock):not(.search)>button:last-child,form:not(.cell):not(.inline):not(.clock):not(.search)>.btn:last-child{margin-top:14px}
button:hover,.btn:hover{filter:brightness(1.06);text-decoration:none}
.btn.ghost,button.ghost{background:#fff;color:var(--p2);border:1px solid var(--tint2);box-shadow:none}.btn.ghost:hover,button.ghost:hover{background:var(--tint)}
.btn.small,button.small{padding:6.5px 10px 3.5px;font-size:11.5px;margin-top:0;box-shadow:none}
.btn.danger,button.danger{background:var(--red);box-shadow:0 3px 10px rgba(220,38,38,.25)}
.btn.orange{background:linear-gradient(135deg,var(--orange),#fb923c);box-shadow:0 3px 10px rgba(249,115,22,.3)}
.bar{display:flex;align-items:center;gap:12px;margin:0 0 14px;flex-wrap:wrap}.bar .btn,.bar button{margin-top:0}.bar.wrap{flex-wrap:wrap}
.lnk{font-weight:700;font-size:13px}
.lab{font-size:10.5px;font-weight:700;color:var(--mute);margin:14px 0 4px}
form.inline{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin-top:14px;padding-top:14px;border-top:1px solid var(--line2)}
form.inline label{margin-top:0}form.inline>button,form.inline>.btn,form.inline>div>button{height:40px}
form.inline.wide{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
form.inline.wide>div{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 22px;align-items:center}form.inline.wide>div:empty{display:none}
form.inline.wide>div label.chk{margin-top:0}
form.inline.wide>button,form.inline.wide>.btn{justify-self:start;width:auto;min-width:110px}
form.cell{display:inline-flex;gap:6px;align-items:center;margin:0;flex-wrap:wrap}
form.cell input:not([type=hidden]):not([type=checkbox]),form.cell select{width:auto!important;display:inline-block!important;margin:0!important;padding:6px 9px!important;font-size:12.5px!important}
form.cell button{margin:0}form.cell label{margin:0}
.cardhead form.cell input:not([type=hidden]):not([type=checkbox]){max-width:170px}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 14px}
/* the warning message box: only on paragraphs and boxes, never on a pill or tag that is coloured "warn" */
p.warn,div.warn,span.warn:not(.pill):not(.tag):not(.mk):not(.count){background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;padding:10px 12px;border-radius:10px;font-size:13px;font-weight:600;margin:0 0 12px}
span.warn:not(.pill):not(.tag){display:inline-block;margin:0}
.okmsg{background:#ecfdf5;border:1px solid #a7f3d0;color:#047857;padding:10px 12px;border-radius:10px;font-size:13px;font-weight:600;margin:0 0 14px}
.kv{display:grid;grid-template-columns:170px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line2);align-items:center;font-size:13.5px}.kv:last-child{border-bottom:0}.kv b{font-size:10.5px;font-weight:700;color:var(--mute)}
h2.sec{font-size:13px;font-weight:800;color:var(--ink2);margin:24px 0 10px}
.rtabs{display:flex;flex-wrap:wrap;gap:2px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px;margin:0 0 16px}
.rtabs a{padding:7px 13px;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--ink2);text-decoration:none;white-space:nowrap}.rtabs a:hover{background:#f5f3ff}.rtabs a.on{background:var(--grad);color:#fff}
@media (max-width:640px){.rtabs{flex-wrap:nowrap;overflow-x:auto}}
.dchip{display:inline-flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap}.dchip i{width:9px;height:9px;border-radius:3px;display:inline-block;flex:none}
.colrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.colrow input[type=color]{width:52px;height:38px;padding:2px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer}
.swatches{display:flex;gap:6px;flex-wrap:wrap}button.swatch{width:26px;height:26px;min-width:0;padding:0;border-radius:8px;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);margin:0}
[hidden]{display:none!important}
.narrow.wide2{max-width:1000px}
.smap{height:420px;border-radius:12px;border:1px solid var(--line);overflow:hidden;z-index:0}
.pp{margin:2px 0;font-size:12.5px;white-space:nowrap}.pp b{display:inline-block;min-width:40px}
.tline .grp{display:flex;align-items:center;gap:8px;padding:10px 0 4px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);border-bottom:1px solid var(--line2)}
.tline .grp i{width:10px;height:10px;border-radius:3px;background:var(--dc,#94a3b8)}
.qbar{display:grid;grid-template-columns:auto 1fr auto;gap:12px 18px;align-items:end;padding:16px 18px;margin-bottom:14px}
.qbar .qrange{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin:0}.qbar .qrange label{margin:0}.qbar .qrange input{width:160px;height:42px}
.qbar .qrange button{margin:0!important;height:42px;align-self:end}.qbar .qquick{align-self:end;height:42px;margin:0!important;padding:0!important;display:flex;align-items:center;gap:6px}
.qbar .qquick .chip{margin:0}
.qbar .qrecalc{margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:340px}
.qbar .qrecalc small{color:var(--mute);font-size:11px;text-align:right;line-height:1.35}
@media (max-width:1100px){.qbar{grid-template-columns:1fr}.qbar .qrecalc{align-items:stretch;max-width:none}.qbar .qrecalc small{text-align:left}}
.card.notice{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 18px;margin-bottom:14px;border-left:4px solid #f59e0b;font-size:13px}
.card.notice form{margin:0}
.emptyact{padding:14px;border:1px dashed var(--line);border-radius:12px;background:#fafbff}.emptyact p{margin:0 0 10px}.emptyact form{margin:0 0 8px}
tr.dgrp td{padding:9px 10px 7px;background:color-mix(in srgb,var(--dc,#94a3b8) 7%,#f8fafc);box-shadow:inset 3px 0 0 var(--dc,#94a3b8);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2)}
tr.dgrp td i{display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--dc,#94a3b8);margin-right:7px;vertical-align:middle}
tr.dgrp td small{font-weight:600;color:var(--mute);margin-left:4px}
table.stacked tr.dgrp{display:block}table.stacked tr.dgrp td{display:block}table.stacked tr.dgrp td::before{content:none}
.psort{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 2px}.psort>span{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin-right:4px}
.adjs{margin-top:14px;padding-top:10px;border-top:1px solid var(--line2)}.adjs .lab{margin-top:0}
.adjs summary,.dlg details.more summary{cursor:pointer;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);padding:6px 0}
.dlg details.more{margin:10px 0 6px;padding:4px 12px 8px;border:1px solid var(--line);border-radius:12px;background:#fafbff;min-width:0;max-width:100%}
.dlg details.more p,.dlg .khint{white-space:normal;overflow-wrap:anywhere}
.dlg .db{overflow-x:hidden}
.dlg .easy small.paidas{display:block;margin-top:5px;font-size:12px;font-weight:600;color:var(--mute)}.dlg .easy small.paidas.diff{color:#4f46e5}
.dlg .paidline{margin:2px 0 6px;font-size:13px;color:var(--ink2)}
.dlg .allscans{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 6px}.dlg .allscans>span{font-size:11px;font-weight:700;color:var(--mute);margin-right:2px}
.dlg .easy{margin:8px 0 4px}.dlg .easy input{font-size:18px;font-weight:700}.dlg .stillin{margin:2px 0 6px}
.adjrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;font-size:12.5px;color:var(--ink2);border-bottom:1px solid var(--line2)}.adjrow:last-child{border-bottom:0}
.recacts{display:flex;flex-direction:row-reverse;align-items:center;flex-wrap:wrap;gap:8px;justify-content:flex-start;max-width:60%}
.recacts .recnav,.recacts .recdo{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.recacts .recdo{padding-right:8px;margin-right:2px;border-right:1px solid rgba(255,255,255,.25)}
.recacts .btn{margin:0}
.dark .recacts .recnav,.dark .recacts .recdo{display:inline-flex;font-size:inherit;font-weight:inherit;opacity:1}   /* 07/11/2026: ".dark .side span" made them blocks (buttons touching on phones and tablets) and dimmed them */
@media (max-width:900px){.recacts{max-width:none;flex-direction:row}.recacts .recdo{border-right:0}}
.chkhelp{margin:0 0 10px;padding-left:18px;font-size:12px;color:var(--mute);line-height:1.5}.chkhelp li{margin:2px 0}.chkhelp b{color:var(--ink2)}
.dlg.leave{max-width:460px}.dlg.leave .db p{margin:4px 0 0}.dlg.leave .acts{flex-wrap:wrap;gap:8px}
@media (max-width:520px){.dlg.leave .acts>span{display:none}.dlg.leave .acts button{flex:1 1 100%}}
.altstarts{margin:4px 0 10px}.altrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.altrow .alt{display:inline-flex;align-items:center;gap:6px}.altrow .alt input[type=time]{width:150px}
.dorder{display:flex;align-items:center;gap:6px;margin-top:4px}.dorder span{font-size:11px;color:var(--mute);font-weight:600;margin-right:4px}.dorder form{margin:0}
.dorder button.mv{width:26px;height:24px;padding:0;border-radius:7px;background:#fff;color:var(--ink2);border:1px solid var(--line);box-shadow:none;font-size:13px;line-height:1;cursor:pointer}
.dorder button.mv:hover:not([disabled]){border-color:var(--dc,#4f46e5);color:var(--dc,#4f46e5)}.dorder button.mv[disabled]{opacity:.35;cursor:default}
/* each department its own band: a tinted heading and a light wash with a colour edge on its rows */
.tline .grp{margin-top:12px;padding:7px 10px;border-radius:8px 8px 0 0;background:color-mix(in srgb,var(--dc,#94a3b8) 7%,#f8fafc);color:var(--ink2);border-bottom:1px solid color-mix(in srgb,var(--dc,#94a3b8) 25%,#fff);box-shadow:inset 3px 0 0 var(--dc,#94a3b8)}
.tline .row[style*="--dc"]{background:#fff;box-shadow:inset 3px 0 0 color-mix(in srgb,var(--dc) 55%,#fff)}
.tline .row[style*="--dc"]:hover{background:color-mix(in srgb,var(--dc) 4%,#fff)}
.tline .row[style*="--dc"] .who{padding-left:10px}.tline .grp small{font-weight:600;color:var(--mute);text-transform:none;letter-spacing:0}
.lane .pin{position:absolute;top:-3px;width:10px;height:10px;margin-left:-5px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#0284c7;border:2px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,.3);z-index:3}
.lane .pin.far{background:#dc2626}.lane .pin.noloc{background:#d97706}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;margin-bottom:10px}.grid4>*{min-width:0}.grid4 small{display:block;margin-top:3px;font-weight:400}
@media (max-width:760px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chkcol{grid-column:span 3;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding-top:18px}@media (max-width:760px){.chkcol{grid-column:span 2;padding-top:0}}
.seg2{display:inline-flex;background:#f1f5f9;border-radius:10px;padding:3px;gap:2px;margin-bottom:6px}.seg2 label{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer;margin:0}
.seg2 input{margin:0}.seg2 label:has(input:checked){background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.12);color:var(--p2d)}
table.rules{width:100%;border-collapse:collapse}table.rules th{text-align:left;font-size:13px;font-weight:700;color:var(--ink);padding:8px 10px 8px 0;white-space:nowrap;width:1%}
table.rules td{padding:6px 10px 6px 0;border-top:1px solid var(--line2);font-size:12.5px;vertical-align:middle}table.rules tr:first-child td,table.rules tr:first-child th{border-top:0}table.rules th{border-top:1px solid var(--line2)}
input.mini{width:72px!important;display:inline-block!important;margin:0!important;padding:6px 8px!important}
table.rules small.ex{display:block;color:var(--p2d);font-weight:600;margin-top:2px}
.daybar{background:#f8fafc;border:1px solid var(--line2);border-radius:12px;padding:14px 16px 30px;margin-bottom:16px}
.daybar .track{position:relative;height:26px;border-radius:8px;background:#eef2f7}.daybar .track i{position:absolute;top:0;bottom:0;border-radius:8px}
.daybar .brk.pd{background:repeating-linear-gradient(45deg,#bbf7d0,#bbf7d0 3px,#dcfce7 3px,#dcfce7 6px)}
input.tmini{width:120px!important;display:inline-block!important;margin:0!important;padding:6px 8px!important}select.smini{width:110px!important;display:inline-block!important;margin:0!important;padding:6px 8px!important}
table.brks th{width:auto;font-size:10.5px;text-transform:uppercase;color:var(--mute);font-weight:800}table.brks td{border-top:1px solid var(--line2)}
/* skills matrix */
/* Settings as cards (Daniel, 04/11/2026: "better looking pages, more logic") */
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.dcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;border-top:5px solid var(--dc);display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.dcard.dim{opacity:.55}.dcard .dtop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.dcard h3{font-size:16px;font-weight:800;margin:0}.dcard .dtop small{color:var(--mute);font-size:11px}
.dcard .dnum{text-align:right}.dcard .dnum b{display:block;font-size:24px;font-weight:800;color:var(--dc);line-height:1}.dcard .dnum small{color:var(--mute);font-size:11px}
.dcard .faces{display:flex;align-items:center;min-height:28px}.dcard .faces .av{border:2px solid #fff;margin-right:-6px}.dcard .faces .more{margin-left:12px;font-size:11px;color:var(--mute);font-weight:700}
.dfacts{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:12px}.dfacts>div{display:flex;flex-direction:column;gap:2px}.dfacts>div>span{color:var(--mute);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}.dfacts>div>b{font-weight:600}.dfacts i{color:var(--mute);font-style:normal;font-weight:400}
.dfacts .chipline{flex-direction:row}
.dacts{display:flex;gap:8px;justify-content:flex-end;margin-top:auto}
.pgrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start}.pside{display:flex;flex-direction:column;gap:14px;position:sticky;top:76px}
@media(max-width:900px){.pgrid{grid-template-columns:minmax(0,1fr)}.pside{position:static}}
.pmodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}@media(max-width:640px){.pmodes{grid-template-columns:minmax(0,1fr)}}
.pmode{display:flex;flex-direction:column;gap:3px;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;background:#fff;position:relative}
.pmode input{position:absolute;opacity:0;pointer-events:none}.pmode b{font-size:13px}.pmode small{font-size:11.5px;color:var(--mute);line-height:1.35}
.pmode.on{border-color:#7c3aed;background:#f5f3ff;box-shadow:0 0 0 3px rgba(124,58,237,.12)}.pmode:hover{border-color:#a5b4fc}
.whoon{display:flex;flex-wrap:wrap;gap:6px}.whoon a{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);font-size:12.5px;font-weight:600}
.whoon a:hover{border-color:#a5b4fc;background:#fafaff}
.apphelp{margin:-4px 0 12px;padding:8px 12px;border-radius:10px;background:#f5f3ff;border:1px solid #ede9fe;color:#4c1d95;font-size:12.5px;line-height:1.45}
/* Pay periods: one row per period, no sideways scrolling (Daniel, 04/11/2026: "don't like the horizontal sliders") */
.pplist{display:flex;flex-direction:column;border-top:1px solid var(--line2)}
.pprow{display:grid;grid-template-columns:130px 190px minmax(0,1fr) 150px;gap:8px 14px;align-items:center;padding:10px 6px;border-bottom:1px solid var(--line2)}
.pprow.cur{background:#f5f3ff;border-radius:10px}.pprow small{display:block;color:var(--mute);font-size:11px;font-weight:500}
.ppname b{font-size:13.5px}.ppdue b{font-size:14px}.ppst{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}.ppact{justify-self:end}.ppact .bar{gap:6px;flex-wrap:nowrap}
.ppedit summary{cursor:pointer;color:var(--p2d);font-size:11.5px;font-weight:700;list-style:none;margin-top:2px}.ppedit summary::-webkit-details-marker{display:none}.ppedit .bar{margin-top:6px;gap:6px}
@media(max-width:760px){.pprow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ppact{justify-self:start;grid-column:1/-1}}
.dcard.dadd{border:2px dashed #c7d2fe;border-top:2px dashed #c7d2fe;background:#fafaff;align-items:center;justify-content:center;text-decoration:none;color:var(--p2d);min-height:150px;box-shadow:none}
.dcard.dadd b{font-size:28px;line-height:1}.dcard.dadd span{font-weight:700;font-size:13px}.dcard.dadd:hover{background:#f5f3ff;border-color:#a5b4fc}
.dsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.daybar2{position:relative;height:26px;background:#f1f5f9;border-radius:8px;overflow:hidden;margin:4px 0 2px}.daybar2>span{position:absolute;display:block}
.daybar2 .win{top:0;bottom:0;background:#e0e7ff}.daybar2 .work{top:5px;bottom:5px;background:var(--grad);border-radius:6px}
.daybar2 .brk{top:5px;bottom:5px;background:repeating-linear-gradient(45deg,#fde68a,#fde68a 3px,#fef3c7 3px,#fef3c7 6px);border-radius:3px;z-index:2}.daybar2 .tick{top:0;bottom:0;width:1px;background:#e2e8f0}
.dayaxis{display:flex;justify-content:space-between;font-size:9.5px;color:var(--mute);margin-bottom:6px}
.dcard .big{font-size:22px;font-weight:800;line-height:1}.dcard .big small{font-size:12px;color:var(--mute);font-weight:600;margin-left:4px}
.chipline{display:flex;flex-wrap:wrap;gap:4px}.chipline .pill{font-size:10.5px;padding:1px 7px}
.wkstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.wkstrip div{border-radius:8px;padding:5px 2px;text-align:center;font-size:10px;font-weight:700;color:var(--mute);background:#f8fafc;border:1px solid var(--line2)}
.wkstrip div b{display:block;font-size:11.5px;color:#fff;background:var(--sc,#94a3b8);border-radius:5px;margin:3px 2px 0;padding:2px 0;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wkstrip div.rest b{background:#e2e8f0;color:#64748b}
.wkstrip div small{display:block;font-weight:500;font-size:9.5px;margin-top:2px}
/* Bank holidays: one line per date (Daniel, 04/11/2026: "more compact, nicer") */
table.bhc{width:100%;border-collapse:collapse;font-size:13px}table.bhc td{padding:6px 8px;border-bottom:1px solid var(--line2);vertical-align:middle}
table.bhc tr.bhy td{background:#f5f3ff;color:var(--p2d);font-size:11px;font-weight:800;letter-spacing:.06em;padding:5px 8px;border-bottom:0}table.bhc tr.bhy small{font-weight:500;color:var(--mute);margin-left:8px;letter-spacing:0}
table.bhc td.bhd{font-weight:800;white-space:nowrap;width:64px}table.bhc td.bhw{color:var(--mute);width:40px}table.bhc td.bhl2{color:var(--mute);font-size:12px;white-space:nowrap;text-align:right;width:90px}
table.bhc td.bhx{width:30px;text-align:right}.xbtn{width:24px;height:24px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--mute);font-size:15px;line-height:1;padding:0;cursor:pointer}
.xbtn:hover{border-color:#fca5a5;color:#dc2626;background:#fef2f2}table.bhc .pill{font-size:10px;padding:1px 7px;margin-left:6px}
form.bhadd{display:flex;gap:8px;align-items:center;flex-wrap:wrap}form.bhadd input{margin:0;flex:1 1 120px;min-width:0}form.bhadd input[type=date]{flex:1 1 150px}form.bhadd input[name=name]{flex-basis:100%;order:-1}form.bhadd button{margin:0!important}
/* phone punches on the Out on site map: a tag "GH · IN 07:02" pointing at the spot (Daniel, 04/11/2026: "initials, IN or OUT, easy to read") */
.mtag{position:absolute;transform:translate(-50%,calc(-100% - 7px));white-space:nowrap;background:#059669;color:#fff;font:700 11.5px/1.2 Inter,"Segoe UI",Arial,sans-serif;padding:3px 7px;border-radius:7px;border:2px solid #fff;box-shadow:0 2px 6px rgba(15,23,42,.3);cursor:pointer}
.mtag:after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-6px;border:6px solid transparent;border-top-color:#fff;border-bottom:0}
.mtag b{font-weight:800;letter-spacing:.02em}.mtag span{font-weight:500;opacity:.92}
.mtag.bad{background:#dc2626}.mtag.warn{background:#d97706}.mtag.info{background:#0284c7}
.mxwrap{overflow-x:hidden}                               /* no inner scroll bar: narrow columns, else stacked (app.js) */
table.matrix2 thead th:not(.nm){position:static}           /* headings stay put (they slid under the top bar); names still stick on the left */
table.matrix2 td.cpl,table.matrix2 th.cpl{min-width:104px;padding:0 12px 0 4px;text-align:left;vertical-align:middle}
table.matrix2 th.cpl{vertical-align:bottom;padding-bottom:8px;font-size:10.5px;text-transform:uppercase;color:var(--mute)}
table.matrix2 td.cpl small{font-size:11px;font-weight:700}table.matrix2 td.cpl small.muted{font-weight:500}
table.matrix2 td.tot{text-align:center;font-size:11px;padding:6px 0}table.matrix2 td.tot b{color:#047857}table.matrix2 td.tot em{display:block;color:#dc2626;font-style:normal;font-weight:800}table.matrix2 td.tot i{color:#cbd5e1;font-style:normal}
.mxnote{background:#f5f3ff;border:1px solid #ddd6fe;color:#4c1d95;border-radius:10px;padding:10px 12px;font-size:13px;margin:0 0 12px}.mxnote a{font-weight:700}
table.matrix2{border-collapse:separate;border-spacing:0;font-size:12px;width:auto}
table.matrix2 td.cpl b{display:block;line-height:1.2}table.matrix2 td.cpl .cl{display:flex;align-items:center;gap:6px;margin-top:3px}table.matrix2 td.cpl .cl .cbar{width:46px;flex:none;margin:0}
table.matrix2 td.cpl .cl small{white-space:nowrap}
table.matrix2 th,table.matrix2 td{padding:0;border-bottom:1px solid var(--line2)}
table.matrix2 .nm{position:sticky;left:0;background:#fff;z-index:2;min-width:220px;padding:6px 12px 6px 0;text-align:left}
table.matrix2 thead th{position:sticky;background:#fff;z-index:3}table.matrix2 thead tr:first-child th{top:0}table.matrix2 thead tr:nth-child(2) th{top:26px}
table.matrix2 thead th.nm{z-index:4;font-size:10.5px;text-transform:uppercase;color:var(--mute);vertical-align:bottom}
table.matrix2 th.cat{white-space:normal;line-height:1.15;padding:5px 3px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--p2d);text-align:center;border-left:2px solid #fff;background:#f5f3ff;border-radius:6px 6px 0 0}
table.matrix2 th.sk{height:112px;vertical-align:bottom;padding:0 0 8px;width:38px;min-width:38px;max-width:38px;text-align:center}   /* centred over its column (Daniel: "titles and columns are not in line") */
table.matrix2 th.sk span{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:700;font-size:11px;color:var(--ink2);white-space:nowrap;display:inline-block;max-height:104px;overflow:hidden;text-overflow:ellipsis}
td.mx{width:38px;min-width:38px;max-width:38px;height:38px;text-align:center}table.matrix2 th.cat{border-left:2px solid #fff;border-right:0}
.mxbar{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:0 0 10px}.mxbar .lab2{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
.mxbar a.chip{text-decoration:none}td.mx.nodate a{box-shadow:inset 0 0 0 1.5px #f59e0b}td.mx a{display:grid;place-items:center;width:30px;height:28px;margin:auto;border-radius:8px;font-weight:800;font-size:12px;text-decoration:none}
td.mx.ok a{background:#d1fae5;color:#047857}td.mx.warn a{background:#fef3c7;color:#b45309;font-size:10.5px}td.mx.bad a{background:#fee2e2;color:#b91c1c}
td.mx.miss a{border:1.5px dashed #f87171;color:#dc2626;font-size:9px;font-weight:800;text-transform:uppercase;width:34px}
td.mx.extra a{opacity:.5}td.mx.none:after{content:"";display:block;width:4px;height:4px;border-radius:50%;background:#e2e8f0;margin:auto}
table.matrix2 tbody tr:hover td{background:#fafaff}table.matrix2 tbody tr:hover td.nm{background:#fafaff}
td.cpl,th.cpl{min-width:110px;padding:0 0 0 12px!important;text-align:left;font-size:10.5px;color:var(--mute)}
.cbar{display:inline-block;width:64px;height:7px;border-radius:9px;background:#eef2f7;overflow:hidden;vertical-align:middle;margin-right:6px}.cbar i{display:block;height:100%;border-radius:9px}td.cpl small{font-weight:700;color:var(--ink2)}
tfoot td.tot{text-align:center;padding:6px 0!important;font-size:11px}tfoot td.tot b{display:block;color:#047857}tfoot td.tot em{display:block;font-style:normal;color:#dc2626;font-weight:700}
.mk{display:inline-grid;place-items:center;min-width:22px;height:18px;padding:0 4px;border-radius:6px;font-weight:800;font-size:10.5px;margin-right:6px;vertical-align:middle}
.mk.ok{background:#d1fae5;color:#047857}.mk.warn{background:#fef3c7;color:#b45309}.mk.bad{background:#fee2e2;color:#b91c1c}.mk.miss{border:1.5px dashed #f87171;color:#dc2626;font-size:8.5px;text-transform:uppercase}.mk.extra{opacity:.5}
.skgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}.skgrid>*{min-width:0}
.skcat{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fcfcff}.skh{display:flex;align-items:center;gap:8px;margin-bottom:8px}.skh b{font-size:12.5px}.skh small{color:var(--mute);flex:1}
.togs{display:flex;flex-wrap:wrap;gap:6px}label.tog{margin:0;cursor:pointer}label.tog input{position:absolute;opacity:0;pointer-events:none}
label.tog span{display:inline-block;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:600;color:var(--ink2)}
label.tog input:checked+span{background:var(--grad);color:#fff;border-color:transparent}label.tog input:focus-visible+span{outline:2px solid var(--p2);outline-offset:2px}
/* the Dashboard's ring and bars, animated in */
.donut2{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.donut2 svg{width:132px;height:132px;flex:none;overflow:visible}
.donut2 .seg{transition:stroke-dasharray .9s cubic-bezier(.22,1,.36,1),stroke-width .15s;cursor:default}.donut2 .seg:hover{stroke-width:20}
.donut2 .big{font-size:25px;font-weight:800;fill:var(--ink)}.donut2 .sm{font-size:10px;font-weight:600;fill:var(--mute)}
.donut2 .slist{flex:1;min-width:150px;display:block!important}.donut2 .slist span{display:grid!important;grid-template-columns:10px 1fr auto 32px;gap:7px;align-items:center;padding:4px 0;font-size:12.5px;border-bottom:1px solid var(--line2);white-space:nowrap}
.donut2 .slist span:last-child{border-bottom:0}.donut2 .slist i{width:10px;height:10px;border-radius:3px}.donut2 .slist em{font-style:normal;color:var(--mute);font-size:11.5px;text-align:right}
.dbar{display:grid;grid-template-columns:130px 1fr 92px;gap:10px;align-items:center;margin:9px 0;font-size:12.5px}.dbar>b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.dbar .trk{height:10px;border-radius:999px;background:#eef2f7;overflow:hidden;display:block}.dbar .trk i{display:block;height:100%;border-radius:999px;animation:growx 1s cubic-bezier(.22,1,.36,1) both}
.dbar .num{text-align:right;white-space:nowrap}.dbar .num small{color:var(--mute);font-size:11px}
@keyframes growx{from{width:0}}
/* the live attendance ring (Dashboard) */
.ring .rwrap{position:relative;width:170px;height:198px;flex:none}.ring svg{width:170px;height:170px}
.ring .seg{filter:drop-shadow(0 3px 5px currentColor);transition:stroke-dasharray 1.1s cubic-bezier(.22,1,.36,1),stroke-width .15s}.ring .seg:hover{stroke-width:19}
.ring .big{font-size:30px;font-weight:800;fill:var(--ink);letter-spacing:-.02em}.ring .sm{font-size:10.5px;font-weight:700;fill:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.ring .orbit{transform-origin:90px 90px;animation:rorbit 14s linear infinite}
.ring .comet{filter:drop-shadow(0 0 4px var(--tone))}
@keyframes rorbit{to{transform:rotate(360deg)}}
.ring .pingc{opacity:0;transform-origin:90px 90px}
.ring.ping .pingc{animation:rping 1.4s cubic-bezier(.22,1,.36,1) 2}
@keyframes rping{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.32)}}
.ring.ping .orbit{animation-duration:2s}
.ring .rlive{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:10.5px;font-weight:700;color:var(--ink2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 9px;box-shadow:0 2px 6px rgba(15,23,42,.06)}
.ring .rlive i{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:rlive 2s infinite}
@keyframes rlive{0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.ring .rnew{position:absolute;right:-4px;top:4px;background:var(--grad);color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:3px 8px;box-shadow:0 4px 10px rgba(79,70,229,.35);animation:rnew .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes rnew{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.ring .orbit,.ring .rlive i,.ring.ping .pingc,.ring .rnew{animation:none}.ring .seg{transition:none}}
@media (prefers-reduced-motion:reduce){.donut2 .seg{transition:none}.dbar .trk i{animation:none}}
table.bhl{width:100%}table.bhl td{padding:9px 8px;border-top:1px solid var(--line2);font-size:13px}table.bhl tr:first-child td{border-top:0}
td.bhd{width:120px}td.bhd b{display:block;font-size:14px}td.bhd small{color:var(--mute);font-size:11px}
form.cell label.chk{display:inline-flex;align-items:center;gap:5px;margin:0;padding:0;line-height:1}form.cell label.chk input{margin:0}
table.ppl form.cell{flex-wrap:nowrap}table.ppl td:last-child{white-space:nowrap}
table.ppl tr.cur td{background:#eef2ff}table.ppl tr.later td{opacity:.6}
ul.howlist{margin:12px 0;padding-left:20px;font-size:13px;color:var(--ink2)}ul.howlist li{margin:3px 0}ul.howlist li.ovr{color:var(--amber);font-weight:600}
.daybar .win{background:#e0e7ff}.daybar .paid{background:var(--grad);top:4px!important;bottom:4px!important}.daybar .brk{background:repeating-linear-gradient(45deg,#fde68a,#fde68a 3px,#fef3c7 3px,#fef3c7 6px);top:4px!important;bottom:4px!important}
.daybar .track .rest{display:grid;place-items:center;height:100%;font-weight:700;color:var(--mute);font-size:12.5px}
.daybar .lbls{position:relative;height:16px;margin-top:6px;font-size:11px;color:var(--mute)}.daybar .lbls span{position:absolute;transform:translateX(-50%);white-space:nowrap}.daybar .lbls span.b{color:var(--ink);font-weight:700}
.daybar .lbls em{position:absolute;right:0;top:18px;font-style:normal;font-weight:700;color:var(--p2d)}
.swatch-s{display:inline-block;width:12px;height:12px;border-radius:4px;vertical-align:-1px;margin-right:8px}.yes{color:var(--green);font-weight:800}
.help{background:#f5f3ff;border:1px solid #ede9fe;border-radius:12px;padding:10px 14px;margin:6px 0 10px;font-size:12.5px;color:var(--ink2)}.help p{margin:4px 0}.help ol,.help ul{margin:4px 0;padding-left:20px}.help li{margin:3px 0}
table.rota{table-layout:fixed;width:100%}table.rota th:first-child,table.rota td:first-child{width:44px}
table.rota select{font-weight:500;font-size:12px;padding:6px 4px;min-width:0;width:100%}   /* seven days fit the card: no slider */
.dkey{display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0 4px;font-size:12px;color:var(--ink2)}.dkey b{font-weight:700;color:var(--ink)}
.formacts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--line2)}.formacts>div{flex:1 1 100%}.formacts button,.formacts .btn{margin:0!important}
details.howto{background:#fff;border:1px solid var(--line);border-radius:14px;margin:0 0 16px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
details.howto>summary{cursor:pointer;list-style:none;padding:11px 16px;font-weight:700;font-size:13px;color:var(--p2d);display:flex;align-items:center;gap:8px}details.howto>summary::-webkit-details-marker{display:none}
details.howto>summary:before{content:"?";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--grad);color:#fff;font-size:12px;font-weight:800}
details.howto[open]>summary{border-bottom:1px solid var(--line2)}details.howto .hb{padding:10px 18px 14px;font-size:13px;color:var(--ink2)}details.howto ol{margin:6px 0;padding-left:20px}details.howto li{margin:4px 0}
h3.sec{font-size:12px;font-weight:800;color:var(--ink2);margin:18px 0 2px}
.narrow{max-width:820px}
.pills{display:flex;flex-wrap:wrap;gap:4px}
.setgroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-bottom:16px;align-items:start}.setgroups>.card{margin:0}.setgroups>*{min-width:0}
.setlinks{display:flex;flex-direction:column;gap:2px}.setlinks a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ink);text-decoration:none}
.setlinks a:hover{background:#f5f3ff}.setlinks a b{font-weight:600;font-size:13px}.setlinks a small{color:var(--mute);font-size:11.5px;display:block;font-weight:400}.setlinks a .go{color:var(--mute);font-size:16px}

/* ---------- settings directory (left), as in the Hub */
.settings{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:start}
aside.dir{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 14px;box-shadow:var(--sh);position:sticky;top:80px}
aside.dir h3{font-size:14px;font-weight:800;margin:0 0 8px}
aside.dir .sec>b{display:block;font-size:10px;font-weight:700;color:var(--mute);margin:12px 4px 6px}
aside.dir a{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;font-size:13px;font-weight:700;color:var(--ink);background:#fff;transition:.12s}
aside.dir a i{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:#eef2ff;color:var(--p2);flex:none}aside.dir a i svg{width:13px;height:13px}
aside.dir a:hover{text-decoration:none;background:#f8fafc;border-color:#cbd5e1}
aside.dir a.on{border-color:var(--orange);background:#fff7ed;box-shadow:0 0 0 3px rgba(249,115,22,.10)}aside.dir a.on i{background:var(--orange);color:#fff}

/* ---------- the shift timeline (Dashboard) */
.tline{position:relative}
.tline .scale{display:grid;grid-template-columns:200px 1fr 92px;align-items:end;font-size:10.5px;font-weight:700;color:var(--mute);padding-bottom:6px;border-bottom:1px solid var(--line)}
.tline .ticks{position:relative;height:16px;margin:0 6px}.tline .ticks span{position:absolute;bottom:0;transform:translateX(-50%);white-space:nowrap;color:var(--ink2)}
.tline .ticks span::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:6px;background:var(--line)}
.tline .ticks span.minor{color:transparent}.tline .ticks span.minor::after{height:4px}
.tline .row{display:grid;grid-template-columns:200px 1fr 92px;align-items:center;min-height:44px;border-bottom:1px solid var(--line2)}
.tline .row:hover{background:#f8fafc}
.tline .lane{position:relative;height:30px;margin:0 6px;background:repeating-linear-gradient(90deg,transparent,transparent calc(100%/var(--hours) - 1px),rgba(15,23,42,.05) calc(100%/var(--hours) - 1px),rgba(15,23,42,.05) calc(100%/var(--hours)));border-radius:8px}
.tline .plan{position:absolute;top:3px;bottom:3px;border:2px dashed #c7d2fe;border-radius:7px;background:rgba(238,242,255,.6)}
.tline .plan[data-edit],.tline .absent[data-edit]{cursor:pointer}
.tline .plan[data-edit]:hover{border-color:#818cf8;background:rgba(224,231,255,.9)}
.tline .act{--c:#4f46e5;position:absolute;top:6px;bottom:6px;border-radius:7px;cursor:pointer;min-width:6px;z-index:1;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 82%,#fff),var(--c) 45%,color-mix(in srgb,var(--c) 78%,#0f172a));
  box-shadow:0 2px 8px color-mix(in srgb,var(--c) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.tline .act.open{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 82%,#fff),var(--c) 40%,color-mix(in srgb,var(--c) 70%,#0f172a) 85%,color-mix(in srgb,var(--c) 30%,transparent))}
.tline .act.open::after{content:"";position:absolute;right:-4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--c);box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 55%,transparent);animation:tlpulse 2s infinite}
@keyframes tlpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 55%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.tline .act.open::after{animation:none}}
.tline .act.done{filter:saturate(.35);opacity:.75}
.tline .act b{position:absolute;top:50%;transform:translateY(-50%);font-size:10.5px;font-weight:800;line-height:1;color:#fff;text-shadow:0 1px 2px rgba(15,23,42,.45);white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none}
.tline .act b.tin{left:7px}.tline .act b.tout{right:7px}
.tline .act b.tin.left{left:auto;right:100%;margin-right:5px;color:var(--ink);text-shadow:none}.tline .act b.tin.right{left:100%;margin-left:12px;color:var(--ink);text-shadow:none}
.tline .act b.tin.late{background:#fff7ed;color:#b45309;text-shadow:none;padding:3px 6px;border-radius:5px;box-shadow:0 0 0 1px #fdba74;left:4px}
.tline .act b.tin.late.left{left:auto}.tline .act b.tin.late.right{left:100%}
.tline .act b em{font-style:normal;color:#dc2626}
.tline .early{position:absolute;top:9px;bottom:9px;border-radius:6px 0 0 6px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--c) 30%,#fff) 0 3px,color-mix(in srgb,var(--c) 14%,#fff) 3px 6px);border:1px dashed color-mix(in srgb,var(--c) 55%,#fff);border-right:0}
.tline .act b.tin small{font-size:9px;font-weight:700;opacity:.8;margin-left:5px}
/* the clock-out side (05/11/2026): paid to / scanned out, left early in amber, stayed on in indigo */
.tline .act b.tout small{font-size:9px;font-weight:700;opacity:.8;margin-left:5px}
.tline .act b.tout.late{background:#fff7ed;color:#b45309;text-shadow:none;padding:3px 6px;border-radius:5px;box-shadow:0 0 0 1px #fdba74;right:4px}
.tline .act b.tout.xtra{background:#eef2ff;color:#3730a3;text-shadow:none;padding:3px 6px;border-radius:5px;box-shadow:0 0 0 1px #a5b4fc;right:4px}.tline .act b.tout.xtra em{color:#4f46e5}
.tline .act b.tout.out{right:auto;left:100%;margin-left:10px;color:var(--ink);text-shadow:none}
.tline .act.open b.tout.xtra{right:14px}
.tline .leftgap{position:absolute;top:10px;bottom:10px;border-radius:0 5px 5px 0;background:repeating-linear-gradient(45deg,#fdba74,#fdba74 3px,#ffedd5 3px,#ffedd5 6px);border:1px solid #fb923c;border-left:0;z-index:1}
.tline .hrs small.lvn{display:block;color:var(--ink2);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.tline .hrs .lvt{display:flex;flex-wrap:wrap;gap:3px;justify-content:flex-end;margin-top:3px}
.tline .hrs .lvt i{position:static;inset:auto;width:auto;height:auto;border:0;animation:none;font-style:normal;font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;background:#f1f5f9;color:var(--mute);white-space:nowrap}
.tline .hrs .lvt i.early{background:#fff7ed;color:#b45309;border:0;border-radius:999px}.tline .hrs .lvt i.xtra{background:#eef2ff;color:#4338ca}
.tline .act i.xp{position:absolute;top:0;bottom:0;right:0;border-radius:0 7px 7px 0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.32),rgba(255,255,255,.32) 3px,transparent 3px,transparent 7px);pointer-events:none}
.tline .act b{z-index:2}
.tline .xtrapart{position:absolute;top:6px;bottom:6px;border-radius:0 7px 7px 0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.35),rgba(255,255,255,.35) 3px,transparent 3px,transparent 7px);z-index:2;pointer-events:none}
.tline .hrs small.erl{color:#64748b;font-weight:600}
.sw.early{background:repeating-linear-gradient(90deg,#c7d2fe 0 3px,#eef2ff 3px 6px);border:1px dashed #a5b4fc}
.tline .lategap{position:absolute;top:10px;bottom:10px;border-radius:5px 0 0 5px;background:repeating-linear-gradient(45deg,#fdba74,#fdba74 3px,#ffedd5 3px,#ffedd5 6px);border:1px solid #fb923c;border-right:0}
.sw.lategap{background:repeating-linear-gradient(45deg,#fdba74,#fdba74 3px,#ffedd5 3px,#ffedd5 6px)}.sw.act.done{filter:saturate(.35);opacity:.75}
.tline .brk{position:absolute;top:7px;bottom:7px;background:repeating-linear-gradient(45deg,#fde68a,#fde68a 4px,#fef3c7 4px,#fef3c7 8px);border-radius:4px}
.tline .missing{position:absolute;top:5px;bottom:5px;border-radius:7px;background:repeating-linear-gradient(45deg,#fee2e2,#fee2e2 6px,#fecaca 6px,#fecaca 12px);border:1px solid #fca5a5;cursor:pointer}
.tline .absent{position:absolute;top:5px;bottom:5px;border-radius:7px;background:#f1f5f9;border:1px solid #cbd5e1;display:flex;align-items:center;padding-left:8px;font-size:11px;font-weight:700;color:#475569}
.tline .now{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--orange);z-index:2}.tline .now::before{content:"";position:absolute;top:-3px;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--orange)}
.tline .hrs{text-align:right;font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;padding-right:4px}.tline .hrs small{display:block;font-size:10.5px;color:var(--mute);font-weight:600}
.tline .who{display:flex;align-items:center;gap:9px;padding-left:2px;min-width:0;color:var(--ink);text-decoration:none;border-radius:8px}
a.who:hover b{color:var(--p2);text-decoration:underline;text-underline-offset:3px}.tline .who b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tline .who small{display:block;font-size:11px;color:var(--mute);font-weight:600}
.legend{font-size:11.5px;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:10px}
.legend .sw{display:inline-block;width:18px;height:10px;border-radius:3px;vertical-align:middle;margin-right:5px}
.sw.plan{border:2px dashed #c7d2fe;background:rgba(238,242,255,.6)}.sw.act{background:var(--grad)}.sw.late{background:#d97706}.sw.brk{background:repeating-linear-gradient(45deg,#fde68a,#fde68a 3px,#fef3c7 3px,#fef3c7 6px)}.sw.miss{background:#fecaca}.sw.ok{background:#d1fae5}.sw.warn{background:#fef3c7}.sw.bad{background:#fee2e2}.sw.extra{background:#d1fae5;opacity:.5}

/* ---------- the attendance bar (status share) */
.sbar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:#eef2f7;margin:4px 0 10px}.sbar i{display:block;height:100%}
.slist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 14px;font-size:12.5px}
.slist span{display:flex;align-items:center;gap:7px;color:var(--ink2);font-weight:600}.slist i{width:10px;height:10px;border-radius:3px;display:inline-block}.slist b{margin-left:auto;font-variant-numeric:tabular-nums}

/* ---------- small charts */
svg.chart{width:100%;height:auto;display:block;stroke:none}svg.chart text{fill:var(--mute);font-size:10px;font-family:inherit;stroke:none}svg.chart text.v{fill:var(--ink2);font-weight:700}
svg.chart .gl{stroke:#e8ecf3;stroke-width:1}

/* ---------- week grid (Timesheets) */
table.week td,table.week th{text-align:center;padding:6px 4px}table.week td:first-child,table.week th:first-child{text-align:left;padding-left:10px}
table.week td.c{cursor:pointer;border-left:1px solid var(--line2)}table.week td.c:hover{background:var(--tint)!important}
table.week td.c b{display:block;font-size:13px;font-variant-numeric:tabular-nums}table.week td.c small{display:block;font-size:10.5px;color:var(--mute);font-weight:600;font-variant-numeric:tabular-nums}
table.week td.c.bad{background:#fef2f2}table.week td.c.warn{background:#fffbeb}table.week td.c.off{background:#f1f5f9;color:#475569}
table.week td.c.off[style*="--ac"]{background:color-mix(in srgb,var(--ac) 14%,#fff);box-shadow:inset 3px 0 0 var(--ac)}table.week td.c.off[style*="--ac"] b{color:var(--ac);font-size:12px}
table.week td.c.pre{background:#fafafa;color:#94a3b8}
table.week td.c em.late{display:block;font-style:normal;font-size:10.5px;font-weight:700;color:#b45309}
/* week grid cells: hours, paid times, clock times when different, a bar on a 04:00 to 20:00 line (05/11/2026) */
table.week td.c b em.ot{font-style:normal;font-size:10px;font-weight:800;color:#4338ca;background:#eef2ff;border-radius:999px;padding:1px 5px;margin-left:4px;vertical-align:2px}
table.week td.c .pt{display:block;font-size:11px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
table.week td.c small{white-space:nowrap}
@media (max-width:1250px){table.week td.c small,table.week td.c .pt{white-space:normal}}   /* tablets: the times wrap inside the cell, so the week stays a grid as on desktop instead of turning into cards (07/11/2026) */
/* the week grid's little day bar: taken off the grid 05/11/2026 (too busy); hidden here too until the server restarts */
table.week span.dbar,.wklegend span.dbar{display:none!important}
/* (only inside the week grid and its legend: ".dbar" alone is the Dashboard's department bars) */
table.week span.dbar,.wklegend span.dbar{position:relative;display:block;height:6px;margin:5px 4px 0;border-radius:3px;background:#f1f5f9;font-size:0;grid-template-columns:none}
table.week span.dbar i,.wklegend span.dbar i{position:absolute;top:0;bottom:0;border-radius:3px}
table.week span.dbar i.pl,.wklegend span.dbar i.pl{top:-1px;bottom:-1px;border:1px dashed #a5b4fc;background:transparent}
table.week span.dbar i.ck,.wklegend span.dbar i.ck{background:color-mix(in srgb,var(--c,#4f46e5) 28%,#fff)}
table.week span.dbar i.pd,.wklegend span.dbar i.pd{background:var(--c,#4f46e5)}
.wklegend span.dbar.lg{display:inline-block;width:70px;margin:0 6px 0 0;vertical-align:middle}
.wklegend .lsw{display:inline-block;width:18px;height:12px;border-radius:4px;border:1px solid;margin-right:6px;vertical-align:middle}
.cleanstart{padding:12px 18px;margin-bottom:14px}.cleanstart summary{cursor:pointer;display:flex;gap:10px;align-items:center}.cleanstart p{margin:10px 0}.cleanstart form{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.cleanstart input[name=reason]{min-width:260px}
.offday.noscan{border-left-color:#dc2626}
.moff{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.moff button{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;box-shadow:none;margin:0}
.moff button i{width:10px;height:10px;border-radius:3px;background:var(--rc)}.moff button small{color:var(--mute);font-weight:500}.moff button.on{border-color:var(--rc);box-shadow:0 0 0 2px color-mix(in srgb,var(--rc) 30%,transparent)}
.moffgo{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}.moffgo select{width:auto}.moffgo input{flex:1;min-width:180px}.moffgo .btn{margin:0}table.week td.c.rest{background:repeating-linear-gradient(45deg,#fff,#fff 6px,#f8fafc 6px,#f8fafc 12px)}
table.week td.c.today{box-shadow:inset 0 0 0 2px var(--tint2)}table.week th.today{color:var(--p2)}
table.week td.tot{font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- the edit dialog and the side panel */
.ov{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:60;display:grid;place-items:center;padding:16px;animation:fade .15s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.dlg{width:100%;max-width:520px;background:#fff;border-radius:18px;box-shadow:0 30px 70px rgba(15,23,42,.35);overflow:hidden;animation:pop .18s ease}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.dlg .dh{background:linear-gradient(135deg,#0f172a,#1e1b4b 70%,#312e81);color:#fff;padding:16px 20px}
.dlg .dh b{display:block;font-size:17px}.dlg .dh small{display:block;opacity:.8;font-size:12.5px;margin-top:2px}
.dlg .db{padding:16px 20px 20px}
.dlg .punches{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.seg button{margin:0;background:#fff;color:var(--ink2);border:1px solid var(--line);box-shadow:none;padding:7px 12px;font-size:12.5px}
.seg button.on{background:var(--grad);color:#fff;border-color:transparent}
.qr{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.qr button{margin:0;background:var(--tint);color:var(--p2d);border:1px solid var(--tint2);box-shadow:none;padding:4px 10px;font-size:11.5px;border-radius:999px}
.dlg .acts{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line2)}.dlg .acts button{margin:0}
.dlg{max-height:calc(100vh - 32px);display:flex;flex-direction:column}.dlg .db{overflow:auto}
.dlg>.db{flex:1 1 auto;min-height:0}.dlg>.acts{flex:none;margin:0;padding:12px 20px;background:#fff;box-shadow:0 -6px 14px -10px rgba(15,23,42,.25)}
@media (max-width:520px){.dlg>.acts{flex-wrap:wrap;gap:8px;padding:10px 14px}.dlg>.acts>span{display:none}.dlg>.acts>*{flex:1 1 auto;text-align:center}.dlg>.acts>#sv{flex-basis:100%;order:-1}}
.dlg>.acts button.book{background:linear-gradient(135deg,#7c3aed,#4f46e5)}.dlg .moffsay{margin:8px 0 0}
.kgroup{display:grid;grid-template-columns:86px 1fr;gap:10px;align-items:start;padding:8px 0;border-bottom:1px dashed var(--line2)}.kgroup:last-of-type{border-bottom:0}
.kgroup>span{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--mute);padding-top:9px}.kgroup .seg{margin-top:0}
.khint{font-size:12px;color:var(--ink2);background:#f8fafc;border-radius:9px;padding:8px 11px;margin:8px 0 4px;min-height:1.2em}.khint:empty{display:none}
.offday{border:1px solid var(--line);border-left:5px solid #94a3b8;border-radius:12px;padding:12px 14px;margin-bottom:12px;background:#fbfbfe;font-size:13px}
.offday p{margin:6px 0 10px;color:var(--ink2);font-size:12.5px}.offday .acts2{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:520px){.kgroup{grid-template-columns:1fr;gap:4px}.kgroup>span{padding-top:0}}
.dlg .err{color:var(--red);font-weight:700;font-size:12.5px;margin-top:8px;min-height:1em}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:#fff;box-shadow:-20px 0 50px rgba(15,23,42,.2);z-index:61;overflow:auto;animation:slide .2s ease}
@keyframes slide{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#0f172a;color:#fff;padding:11px 18px;border-radius:12px;font-weight:700;font-size:13px;box-shadow:var(--sh2);z-index:70;animation:pop .2s ease}

/* ---------- chips (filters) */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
a.chip{display:inline-block;padding:6px 12px;border-radius:999px;background:#fff;color:var(--ink2);border:1px solid var(--line);font-size:12px;font-weight:700;text-decoration:none}a.chip.on{background:var(--grad);border-color:transparent;color:#fff}
.mbars{display:flex;align-items:flex-end;gap:6px;height:170px;padding-top:6px}.mbars>div{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;height:100%}
.mbars .stack{flex:1;width:100%;max-width:34px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:6px;background:#f5f3ff;overflow:hidden}.mbars .stack i{display:block;width:100%}
.mbars b{font-size:11px;min-height:15px;margin-top:4px}.mbars small{font-size:10.5px;color:var(--mute)}
i.sw{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:middle;margin:0 4px 0 8px}
button.chip{margin:0;padding:6px 12px;border-radius:999px;background:#fff;color:var(--ink2);border:1px solid var(--line);font-size:12px;font-weight:700;box-shadow:none}
button.chip b{margin-left:4px}button.chip.on{background:var(--grad);border-color:transparent;color:#fff}button.chip.bad b{color:var(--red)}button.chip.warn b{color:var(--amber)}button.chip.on b{color:#fff}

/* ---------- the board's adjust (kept for the inline fallback) */
details.fix summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--p2);list-style:none}details.fix summary::-webkit-details-marker{display:none}
details.fix form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}details.fix select,details.fix input{width:auto;display:inline-block;margin:0;font-size:12px;padding:5px 8px}details.fix button{margin:0}

/* ---------- calendar grid (Who's off) */
table.cal{font-size:11px;border-collapse:separate;border-spacing:2px}table.cal th{text-align:center;padding:4px 2px;font-size:9.5px}
table.cal td{padding:0;height:24px;border:0;border-radius:4px;min-width:22px;background:#f8fafc}
table.cal td.nm{padding:2px 8px;white-space:nowrap;font-weight:700;min-width:150px;background:none;font-size:12.5px}table.cal .we{background:#eef2f7}table.cal td.off{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}

/* tabs inside a page (the person record): wrap as whole words, never break a label */
main .bar>.tabs{flex-wrap:wrap}main .bar>.tabs a{white-space:nowrap}
/* the rotation grid scrolls sideways on a phone instead of squashing its drop-downs */
table.grid select{min-width:104px}
/* ---------- the big calendar and the year view */
table.cal.big th.td{color:var(--orange);}table.cal.big td.td{box-shadow:inset 0 0 0 2px #fdba74}
table.cal.big td{min-width:26px;height:28px;text-align:center;font-size:10.5px;font-weight:800;cursor:pointer}
table.cal.big td[data-book]:hover{background:var(--tint)}
table.cal.big td.off a{display:block;color:#fff;line-height:28px;text-decoration:none}table.cal.big td.off.req a{color:inherit;line-height:24px}
table.cal.big td.nm{position:sticky;left:0;z-index:2;background:#fff;cursor:default;text-align:left}table.cal.big td.nm a{font-weight:800;color:var(--ink);font-size:12.5px}table.cal.big td.nm small{display:block;color:var(--mute);font-size:10.5px;font-weight:600}
table.cal.big td.cnt,table.cal.big th.cnt{background:none;cursor:default;color:var(--ink2);font-size:12px;min-width:40px}
/* Who's off, rebuilt 05/11/2026: always fits, slim rows, department bands */
.calw{overflow:visible}
table.cal.big{table-layout:fixed;width:100%;border-spacing:2px 2px}
table.cal.big col.cnm{width:190px}table.cal.big col.ccnt{width:44px}
table.cal.big td{min-width:0;height:22px}table.cal.big td.off a{line-height:22px;font-size:10px}table.cal.big td.off.req a{line-height:18px}
table.cal.big th{padding:3px 0;font-size:9px;overflow:hidden}
table.cal.big td.nm{padding:0 8px 0 10px;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 3px 0 0 var(--dc,#cbd5e1);border-radius:0 4px 4px 0}
table.cal.big td.nm a{font-size:12px;display:inline;font-weight:500;color:var(--ink)}table.cal.big td.nm{font-weight:500}table.cal.big td.nm small{display:inline;margin-left:6px;font-size:10px}
table.cal.big.dense td.off a{font-size:0}table.cal.big.dense th{font-size:0}table.cal.big.dense thead tr:first-child th{font-size:10.5px}
table.cal.big.dense thead tr:last-child th:not(:first-child):not(.cnt)::after{content:attr(data-d);font-size:8px;display:block}
table.cal.big tr.cgrp td{height:24px;background:color-mix(in srgb,var(--dc) 12%,#fff);cursor:default;border-radius:0}
table.cal.big tr.cgrp td.nm{box-shadow:inset 3px 0 0 var(--dc);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);border-radius:0}
table.cal.big tr.cgrp td.nm i{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--dc);margin-right:6px}
table.cal.big tr.cgrp td.nm b{color:var(--mute);margin-left:4px;font-size:10px}
table.cal.big tr[data-dk]:hover td:not(.off){background-color:#eef2ff}
table.cal.big tfoot td{height:20px;background:none;cursor:default;font-size:10px;font-weight:800;color:var(--mute);text-align:center}
table.cal.big tfoot td.nm{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;box-shadow:none}
table.cal.big tfoot td.warm{background:#fef3c7;color:#92400e}table.cal.big tfoot td.hot{background:#fee2e2;color:#991b1b}
/* Everyone's year: the whole year on one line per person */
table.yearall{table-layout:fixed;width:100%}table.yearall th:nth-child(1){width:200px}table.yearall th:nth-child(n+3){width:72px}table.yearall th:nth-child(4){width:124px}table.yearall th:nth-child(7){width:100px}table.yearall td:nth-child(n+3){white-space:nowrap}
table.yearall td{padding-top:5px;padding-bottom:5px}table.yearall td:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}table.yearall td:first-child a.who{font-weight:500;color:var(--ink)}
table.yearall svg.ystrip{display:block;width:100%;height:16px;background:#f8fafc;border-radius:3px;stroke:none}
.yscale{position:relative;height:12px}.yscale span{position:absolute;top:0;font-size:9px;font-weight:700;color:var(--mute);text-transform:none}
.calbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px}.calbar .calq{width:200px;height:36px}
.calchips{margin:0}.calchips .chip i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}.calbar label.calonly{margin:0 0 0 auto}
.calf input,.calf select{width:auto}
table.cal.big.dense{border-spacing:1px 2px}
/* clashes: the department band counts people off each day; 2 amber, 3 or a third of the department red */
table.cal.big tr.cgrp td:not(.nm){font-size:10px;font-weight:800;text-align:center;color:var(--ink2)}
table.cal.big tr.cgrp td.warm,table.cal.big tfoot td.warm{background:#fde68a;color:#92400e}table.cal.big tr.cgrp td.hot,table.cal.big tfoot td.hot{background:#fca5a5;color:#7f1d1d}
table.cal.big.dense tr.cgrp td:not(.nm){font-size:8px}
table.cal.big td.off.clash{box-shadow:inset 0 0 0 2px #dc2626}
table.cal.big.clashcal{max-width:100%}table.cal.big.clashcal td{cursor:default}table.cal.big.clashcal tr.me td.nm{color:var(--p2)}
table.cal.big.clashcal td.off.mine{background:repeating-linear-gradient(45deg,var(--p2),var(--p2) 4px,#818cf8 4px,#818cf8 8px)}table.cal.big.clashcal td.off a{color:#fff}
p.clash{padding:9px 12px;border-radius:10px;margin:8px 0}p.clash.warm{background:#fffbeb;border:1px solid #fde68a;color:#92400e}p.clash.hot{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.stats.s5{grid-template-columns:repeat(5,minmax(0,1fr))}@media (max-width:900px){.stats.s5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bfhelp,.bfset{padding:14px 18px;margin-bottom:14px}.bfhelp summary,.bfset summary{cursor:pointer}.bfhelp p{margin:8px 0;max-width:900px;line-height:1.5}
.bfsum{background:var(--tint);padding:8px 12px;border-radius:10px;display:inline-block}
.bfex{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}.bfex div{border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-width:190px}.bfex b{display:block}.bfex span{color:var(--mute);font-size:12.5px}.bfex span b{display:inline;color:var(--ink)}
.bfset form{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-top:10px}
table.bftab{table-layout:fixed;width:100%}table.bftab th:nth-child(1){width:210px}table.bftab th:nth-child(2),table.bftab th:nth-child(3),table.bftab th:nth-child(4){width:70px}table.bftab th:nth-child(6){width:130px}table.bftab th:nth-child(7){width:150px}
table.bftab td:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}table.bftab td:first-child a.who{font-weight:500;color:var(--ink)}
.bfscore{font-size:14px}
.bfbar{position:relative;height:10px;border-radius:5px;background:#f1f5f9}.bfbar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px}.bfbar s{position:absolute;top:-2px;bottom:-2px;width:1px;background:#cbd5e1}
.bfbar i.b0{background:#10b981}.bfbar i.b1{background:#60a5fa}.bfbar i.b2{background:#f59e0b}.bfbar i.b3{background:#ef4444}.bfbar i.b4{background:#991b1b}
/* All absences, Entitlement, Shutdowns (rebuilt 05/11/2026) */
.rdot{display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--rc);margin-right:7px;vertical-align:baseline}
.alistbar{padding:14px 18px;margin-bottom:14px;display:flex;flex-direction:column;gap:10px}.alistbar .chips{margin:0}
.alistf{display:flex;flex-wrap:wrap;gap:10px;align-items:end}.alistf label{margin:0}.alistf input,.alistf select{width:auto;min-width:150px}
table.alist td.who a{color:var(--ink);font-weight:500}table.alist td.who.rep a{color:var(--mute);font-weight:400}table.alist td.num small{margin-left:4px}
table.enttab td:first-child a.who,table.alist td.who a{text-decoration:none}table.enttab td:first-child a.who{color:var(--ink);font-weight:500}
.entbar{display:flex;height:10px;border-radius:5px;background:#dcfce7;overflow:hidden;max-width:320px}.entbar i.tk{background:#0d9488}.entbar i.pl{background:#f59e0b}
details.entchg{display:inline-block;margin-left:8px;vertical-align:middle}details.entchg summary{cursor:pointer;color:var(--p2);font-size:12px;font-weight:600}
details.entchg form{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-top:8px;padding:10px;background:var(--tint);border-radius:10px}details.entchg input{width:110px}details.entchg input[name=reason]{width:200px}
.entmake{display:flex;gap:8px;align-items:end}.entmake input{width:84px}
.shut{border:1px solid var(--line);border-left:4px solid var(--rc);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:#fff}.shut.off{opacity:.6}
.shuthd{display:flex;gap:10px;align-items:center;justify-content:space-between}.shuthd b{font-size:14px}.shutwhen{margin:4px 0 6px;color:var(--ink2);font-weight:600}
.shutmeta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--mute)}.shutpast{padding:12px 18px}.shutpast summary{cursor:pointer;margin-bottom:8px}
.shutform{display:flex;flex-direction:column;gap:10px}.shutform .chips{margin:0}.shutform label{margin:0}.shutform button[type=submit],.shutform>button{align-self:flex-start}
p.clashok{padding:9px 12px;border-radius:10px;margin:8px 0;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
h3.clashh{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);margin:16px 0 4px}
@media (max-width:480px){table.cal.big col.cnm{width:78px!important}table.cal.big col.ccnt{width:16px!important}table.cal.big td.cnt,table.cal.big th.cnt{font-size:0}}
@media (max-width:700px){table.cal.big{border-spacing:0 2px}table.cal.big col.cnm{width:96px}table.cal.big col.ccnt{width:26px}table.cal.big td.nm{padding:0 4px 0 7px}table.cal.big td.nm a{font-size:11px}table.cal.big td.nm small{display:none}table.cal.big th,table.cal.big td.off a{font-size:0}}
.yr{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.mon b{display:block;font-size:12.5px;margin-bottom:6px}.mg{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.mg span{font-size:9.5px;color:var(--mute);text-align:center;font-weight:700}.mg i{display:block}
.mg a{display:grid;place-items:center;height:24px;border-radius:6px;font-size:11px;font-weight:700;color:var(--ink2);text-decoration:none;background:#f8fafc}.mg a:hover{background:var(--tint);text-decoration:none}
/* ---------- skills matrix */
table.matrix{font-size:10.5px;border-collapse:separate;border-spacing:3px}
table.matrix th{vertical-align:bottom;height:96px;padding:0 2px;border:0}table.matrix th span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:10px}
table.matrix td{padding:0;text-align:center;min-width:46px;height:28px;border-radius:6px;border:0}table.matrix td a{display:block;padding:6px 2px;color:inherit;font-weight:700}table.matrix td a:hover{text-decoration:none}
table.matrix td.nm{text-align:left;padding:4px 8px;white-space:nowrap;min-width:170px}table.matrix td.nm a{display:inline;padding:0;font-weight:800;color:var(--ink)}table.matrix td.nm small{display:block;color:var(--mute);font-size:10.5px;font-weight:600}
table.matrix td.ok{background:#d1fae5;color:#065f46}table.matrix td.warn{background:#fef3c7;color:#92400e}table.matrix td.bad{background:#fee2e2;color:#991b1b}
table.matrix td.extra{opacity:.6}table.matrix td.miss{background:repeating-linear-gradient(45deg,#fee2e2,#fee2e2 4px,#fecaca 4px,#fecaca 8px)}
table.matrix tr:hover td{filter:brightness(.97)}

/* ---------- My Time (portal) */
.grid2.top{align-items:stretch}
p.status{font-size:14px;margin:0 0 14px}p.status b{font-size:22px;display:block;font-weight:800}
p.status.in b{color:var(--green)}p.status.out b{color:var(--ink2)}p.status.break b,p.status.business b{color:var(--amber)}
form.clock{display:flex;gap:10px;flex-wrap:wrap}
form.clock button.big{flex:1;min-width:150px;font-size:17px;padding:20px;border-radius:14px;margin-top:0}
form.clock button.in{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 6px 18px rgba(5,150,105,.35)}form.clock button.out{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 6px 18px rgba(220,38,38,.3)}
form.clock button.brk{background:#fff;color:var(--amber);border:2px solid #fbbf24;box-shadow:none}
.donut{display:flex;gap:18px;align-items:center}.donut svg{width:140px;height:140px;flex:none}
.donut .big{font-size:26px;font-weight:800;fill:var(--ink)}.donut .sm{font-size:11px;font-weight:600;fill:var(--mute)}
.donut svg text,svg text{stroke:none}   /* the icon style draws an outline round everything in an svg; text must not get it (it looked smudged and over-bold) */
.lg{display:flex;align-items:center;gap:8px;font-size:12.5px;margin:4px 0}.lg i{width:12px;height:12px;border-radius:3px;display:inline-block}
svg.bars{width:100%;max-width:420px;height:auto;display:block;margin-top:6px;stroke:none}svg.bars text{font-size:9px;fill:var(--mute);stroke:none}svg.bars text.v{fill:var(--ink2);font-weight:700}

/* ---------- Who's in and the fire roll call */
a.alarm{display:block;background:#fef2f2;border:2px solid var(--red);color:#991b1b;border-radius:12px;padding:14px 16px;margin-bottom:16px;font-size:14px}a.alarm b{margin-right:6px}a.alarm:hover{text-decoration:none;background:#fee2e2}
button.hold{position:relative;overflow:hidden;background:#fff;color:var(--ink);border:2px solid var(--ink2);touch-action:none;user-select:none;-webkit-user-select:none;margin-top:0;box-shadow:none}
button.hold::before{content:"";position:absolute;inset:0;width:var(--p,0%);background:rgba(220,38,38,.18);transition:width .04s linear}
button.hold.danger{border-color:var(--red);color:var(--red);background:#fff}button.hold.done{background:var(--red);color:#fff}
.rollhead{border-radius:14px;padding:16px 18px;margin-bottom:16px;display:flex;flex-direction:column;gap:4px}.rollhead b{font-size:20px}
.rollhead.live{background:linear-gradient(135deg,#dc2626,#991b1b);color:#fff;box-shadow:0 10px 24px rgba(220,38,38,.3)}.rollhead.over{background:#e2e8f0;color:var(--ink)}
.roll{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
button.who{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0;padding:14px 16px;background:#fff;color:var(--ink);border:2px solid var(--red);border-radius:12px;text-align:left;font-size:15px;min-height:64px;box-shadow:none}
button.who small{font-size:11px;color:var(--mute);font-weight:600}button.who.safe{border-color:var(--green);background:#ecfdf5}button.who.safe b::before{content:"\2713  ";color:var(--green)}
button.who[disabled]{cursor:default}

/* ---------- sign-in */
.signin{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.signin .panel{background:linear-gradient(160deg,#0f172a 0%,#1e1b4b 60%,#312e81 100%);color:#fff;padding:56px 60px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.signin .panel::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,.22),transparent 65%);right:-160px;top:-160px}
.signin .panel>*{position:relative;z-index:1}
.signin .cologo{height:52px;width:auto;max-width:240px;align-self:flex-start;display:block;box-sizing:content-box;object-fit:contain;background:#fff;border-radius:12px;padding:8px 12px;margin-bottom:34px}
.signin .cologo.text{display:inline-block;height:auto;background:rgba(255,255,255,.1);color:#fff;font-weight:800;font-size:20px;border:1px solid rgba(255,255,255,.2);width:max-content}
.signin .eyebrow{color:#fdba74}
.signin h1{font-size:38px;line-height:1.1;font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
.signin .lead{font-size:15.5px;opacity:.85;max-width:480px;margin:0 0 30px;line-height:1.5}
.feats{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:480px}
.feats li{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px}
.feats li i{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(249,115,22,.18);color:#fdba74;flex:none}
.feats b{display:block;font-size:13.5px;margin-bottom:2px}.feats div{font-size:12.5px;opacity:.78;line-height:1.4}
form.cmpctl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}form.cmpctl label{margin:0}
@media (max-width:760px){form.cmpctl{grid-template-columns:1fr}}
span.cmpbad{color:#b45309;font-weight:700}span.cmpok{color:#047857}
.powered-by{display:flex;align-items:center;gap:10px;margin:38px 0 0;font-size:12px;opacity:.8}.powered-by a{text-decoration:none}.powered-by .mslock{background:#fff;border-radius:8px;padding:6px 12px}
.signin .formside{display:grid;place-items:center;padding:40px 24px;background:var(--bg)}
.login{width:100%;max-width:420px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 34px 26px;box-shadow:0 20px 50px rgba(15,23,42,.10)}
.login .eyebrow{color:var(--orange)}.login h2{font-size:24px;font-weight:800;margin:0 0 20px}.login label{margin-top:14px}.login label.chk{margin:6px 0 16px;color:#475569}
.login button{width:100%;margin-top:22px!important;padding:12px;line-height:1.45}
.login .ms{display:flex;align-items:center;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line2);font-size:11px;font-weight:700;color:var(--mute);letter-spacing:.04em;text-transform:uppercase}
.login .ms .mslock{margin:0 6px;gap:6px}.login .ms .mslock img{height:19px}.login .ms .mslock>span{gap:1px}.login .ms .mslock b{font-size:11px;text-transform:none;letter-spacing:0}.login .ms .mslock i{font-size:8.5px;text-transform:none;letter-spacing:0}
@media (max-width:960px){.signin .feats{display:none}}

/* ---------- print and small screens */
@media print{header.top,nav.main,nav.sub,.bar,form,button.btn,.okmsg,.hero::after{display:none!important}body,main.page{background:#fff;padding:0}.card{box-shadow:none;break-inside:avoid}
  button.who{border:1px solid #000;min-height:0;padding:6px 8px}.rollhead{background:#fff!important;color:#000!important;border:1px solid #000}}
@media (max-width:1100px){.grid2,.grid3,.grid21,.settings{grid-template-columns:1fr}aside.dir{position:static}.tline .scale,.tline .row{grid-template-columns:130px 1fr 70px}}
/* phones and tablets (07/11/2026, Daniel: "logos not in line on mobile"): row 1 the company left and the MehlSoft logo right,
   in line; row 2 the clock, roll call and the person; row 3 the search */
@media (max-width:960px){header.top:not(.bare)>.tright{display:contents}header.top:not(.bare)>.brand{order:1}
  header.top:not(.bare) details.apps,header.top:not(.bare) .tright>span.powered{order:2;margin-left:auto}
  header.top:not(.bare)::after{content:"";order:3;flex-basis:100%;height:0}
  header.top:not(.bare) .live,header.top:not(.bare) .tb.fire,header.top:not(.bare) details.umenu{order:4}
  header.top:not(.bare) .live{margin-left:auto}header.top:not(.bare) details.umenu{margin-right:auto}   /* row 2 in the middle (Daniel: "logos each corner, the rest below in the middle") */
  header.top:not(.bare) form.search{order:5}}
@media (max-width:960px){header.top{flex-wrap:wrap;height:auto;padding:10px 16px;gap:10px}form.search{order:3;flex-basis:100%;max-width:none}.powered .mslock>span,.user small,.user div{display:none}
  nav.main{padding:8px 16px}nav.sub{padding:8px 16px 0}
  nav.sub .tabs{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}nav.sub .tabs::-webkit-scrollbar{display:none}   /* one row to swipe, not three */
  nav.main:empty{display:none}main.page{padding:14px 16px 40px}.signin{grid-template-columns:1fr}.signin .panel{padding:36px 24px}.signin h1{font-size:30px}
  form.inline,form.inline.wide{grid-template-columns:1fr}.hero h1{font-size:22px}.hero .clockbig{font-size:32px}.tline .scale,.tline .row{grid-template-columns:96px 1fr 56px}.tline .who .av{display:none}}

/* ---- Safety: toolbox talks, sign sheets, the register, drivers (04/11/2026) */
.tcard{text-decoration:none;color:inherit}.tcard:hover,.acard:hover{border-color:#c7d2fe;box-shadow:0 4px 14px rgba(79,70,229,.10)}
.tcard .tsum{margin:0;color:var(--mute);font-size:12.5px;line-height:1.45}
.talktext .tlead{font-size:14px;font-weight:600;line-height:1.5;margin:0 0 10px}.talktext ol{margin:0 0 12px;padding-left:20px}.talktext li{margin:0 0 7px;line-height:1.5;font-size:13.5px}
.talktext h4{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin:12px 0 6px}.talktext .qprev li{font-size:12.5px}
.picker{margin:12px 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fafaff}
.pickbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.pickdept{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:10px 0 4px}
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:2px 12px}.plist label.chk{margin:0;font-size:12.5px}
.card.give form>button{margin-top:10px}
.signsheet{display:flex;flex-direction:column;gap:0}
.signrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.signrow:last-child{border-bottom:0}.signrow .sright{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.signrow .when{font-size:12px;color:var(--mute)}.signrow .qnote{flex-basis:100%;text-align:right;font-size:12px;color:#b45309}
.signbox{width:100%;max-width:520px}.signbox>summary{list-style:none;cursor:pointer;display:inline-flex}.signbox>summary::-webkit-details-marker{display:none}
.signbox[open]{flex-basis:100%}.signbox:not([open])>form{display:none}.signrow:has(.signbox[open]) .sright{flex-basis:100%;justify-content:flex-start}.signbox[open]>summary{display:none}
canvas.sigpad{display:block;width:100%;height:170px;border:2px dashed #c7d2fe;border-radius:12px;background:#fff;touch-action:none;cursor:crosshair}
canvas.sigpad.need{border-color:#f87171;background:#fff7f7}
.sigacts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}.sigacts label.chk{margin:0}
img.sigthumb{height:34px;max-width:120px;border:1px solid var(--line);border-radius:6px;background:#fff}
.grid2.sideby{align-items:start}
.readpage{max-width:720px;margin:0 auto}.readhead{margin:6px 0 16px}.readhead h1{font-size:24px;font-weight:800;margin:2px 0 4px}.readhead .sub{color:var(--mute);margin:0}
header.top.bare{justify-content:space-between}
.readform h3{font-size:14px;font-weight:800;margin:16px 0 8px}
.readform fieldset.qq{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:0 0 10px}.readform fieldset.qq legend{font-weight:700;padding:0 6px;font-size:13.5px}
.readform fieldset.qq.wrong{border-color:#fca5a5;background:#fff7f7}.readform .qbad{color:#b91c1c;font-size:12px;font-weight:700;margin:4px 0 0}
.readform label.qopt{display:flex;align-items:center;gap:8px;margin:6px 0;font-weight:500;font-size:13.5px;cursor:pointer}
.readform label.chk.big{font-size:14px;font-weight:700}.readform>button{margin-top:14px;width:100%;padding:13px;font-size:15px}
.okmsg.bad{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.donebox{display:flex;gap:14px;align-items:center;padding:12px 14px;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:12px;margin-bottom:14px;color:#065f46}
.donebox svg{width:30px;height:30px;stroke:#059669;fill:none;stroke-width:2;flex:none}.donebox p{margin:2px 0 0}
a.mytalk{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid var(--line2);text-decoration:none;color:inherit}
a.mytalk small{display:block;color:var(--mute)}a.mytalk:last-child{border-bottom:0}
.acard{text-decoration:none;color:inherit}.acard .atop{display:flex;gap:12px;align-items:flex-start}.acard h3{font-size:15px}
.acard .atop small{color:var(--mute);font-size:11px;display:block}.acard .aline{margin:0;font-size:12.5px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
img.athumb,span.athumb{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none;border:1px solid var(--line)}
span.athumb.none{display:flex;align-items:center;justify-content:center;background:var(--tint)}span.athumb.none svg{width:24px;height:24px;stroke:var(--p2);fill:none;stroke-width:1.8}
img.aphoto{width:100%;max-height:260px;object-fit:contain;border-radius:10px;border:1px solid var(--line);background:#fff;margin-bottom:10px}
dl.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 10px;font-size:13px}dl.facts dt{color:var(--mute);font-weight:600}dl.facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
details.more>summary{cursor:pointer;font-weight:700;color:var(--p2);font-size:12.5px;margin:6px 0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
.sugg{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:10px;align-items:end;padding:6px 0;border-bottom:1px solid var(--line2)}.sugg label{margin:0}
form.mini{margin:0;display:inline}
ul.doclist{margin:0 0 10px;padding-left:18px;font-size:13px}ul.doclist li{overflow-wrap:anywhere}
ol.steps{margin:0 0 10px;padding-left:20px;font-size:13px;line-height:1.5}ol.steps li{margin:0 0 6px}
.drivers{display:flex;flex-direction:column}
.drow{padding:12px 4px;border-bottom:1px solid var(--line2)}.drow:last-child{border-bottom:0}
.drow .dleft{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center}.drow .dleft>.person{flex:1 1 220px;min-width:0}.drow .dfacts{flex:0 1 auto;min-width:0}
.drow .dfacts small{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}.drow .dfacts span{font-size:12.5px}
.drow details.more>summary{display:inline-flex;margin-top:8px}details.more>summary.btn{color:#fff;list-style:none}details.more>summary.btn::-webkit-details-marker{display:none}details.more[open]>summary.btn{background:#fff;color:var(--p2);border:1px solid var(--tint2);box-shadow:none}
@media (max-width:760px){.row2,.row3,.sugg{grid-template-columns:1fr}.signrow .sright{justify-content:flex-start}.signrow .qnote{text-align:left}}

/* ---- Safety, second round: add an item, checks due as a to-do list, QR labels and the scan page (04/11/2026) */
.quickadd{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line2)}.quickadd .chip{text-decoration:none}
.addasset .step{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line2)}
.addasset .stepn{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;font-weight:800;display:grid;place-items:center;margin:0}
.addasset h3{font-size:14px;font-weight:800;margin:4px 0 10px}
.kindpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
label.kopt{margin:0;cursor:pointer;display:block}label.kopt input{position:absolute;opacity:0;pointer-events:none}
label.kopt span{display:grid;grid-template-columns:30px 1fr;column-gap:10px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;height:100%;box-sizing:border-box}
label.kopt i{grid-row:span 2;width:30px;height:30px;border-radius:8px;background:var(--tint);display:grid;place-items:center}label.kopt i svg{width:17px;height:17px;stroke:var(--p2);fill:none;stroke-width:1.9}
label.kopt b{font-size:13px}label.kopt small{font-size:11.5px;color:var(--mute);font-weight:500;line-height:1.35}
label.kopt input:checked+span{border-color:#7c3aed;background:#f5f3ff;box-shadow:0 0 0 3px rgba(124,58,237,.12)}label.kopt input:focus-visible+span{outline:2px solid #7c3aed}
small.hint{display:block;font-weight:500;color:var(--mute);font-size:11.5px;margin-top:4px;line-height:1.35}
.row4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.stepgo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:16px}.stepgo button{margin:0}
.todos{display:flex;flex-direction:column}
.todo{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line2)}.todo:last-child{border-bottom:0}
.todo .tic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:#eef2ff}.todo .tic svg{width:18px;height:18px;fill:none;stroke:#4f46e5;stroke-width:1.9}
.todo .tic.bad{background:#fef2f2}.todo .tic.bad svg{stroke:#dc2626}.todo .tic.warn{background:#fffbeb}.todo .tic.warn svg{stroke:#d97706}
.todo .tmain{flex:1;min-width:0}.todo .tmain b{display:block;font-size:13.5px}.todo .tmain b small{color:var(--mute);font-weight:600;margin-left:4px}.todo .tmain>small{display:block;color:#334155;font-size:12.5px;margin-top:2px;overflow-wrap:anywhere}
.todo .tside{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.card.due-bad{border-left:4px solid #dc2626}.card.due-warn{border-left:4px solid #f59e0b}.card.due-info{border-left:4px solid #6366f1}
.grid3.safe3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.safe3 h4{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin:0 0 8px}.safe3 p{margin:0 0 6px}
.safe3 .pills a.pill{text-decoration:none}
.qrside{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:center}.qrside svg{width:120px;height:120px;display:block}
.bottom{display:flex;align-items:flex-end}
.scanban{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;margin:0 0 14px;color:#fff}
.scanban b{font-size:20px;font-weight:800;letter-spacing:.01em}.scanban span{font-size:13.5px;opacity:.95}
.scanban.ok{background:#059669}.scanban.warn{background:#d97706}.scanban.bad{background:#dc2626}
.scanhead{display:flex;gap:14px;align-items:center}.scanhead h1{margin:0}.scanhead .athumb{width:72px;height:72px}
.qidpill{display:inline-block;background:#1e1b4b;color:#fff;font-weight:800;border-radius:8px;padding:2px 9px;margin-right:6px;letter-spacing:.04em}
.scanchk{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:13.5px}.scanchk:last-of-type{border-bottom:0}
.qsheet{display:flex;flex-wrap:wrap;gap:6mm}
.qlabel{display:flex;gap:4mm;align-items:center;border:1px solid #cbd5e1;border-top:2.5mm solid #f97316;border-radius:3mm;background:#fff;box-sizing:border-box;padding:3mm;color:#0f172a;break-inside:avoid;page-break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.qlabel.large{width:100mm;height:62mm}.qlabel.large .qcode svg{width:44mm;height:44mm}
.qlabel.small{width:64mm;height:34mm;gap:2.5mm;padding:2mm}.qlabel.small .qcode svg{width:27mm;height:27mm}
.qlabel .qcode svg{display:block}.qlabel .qtext{min-width:0;flex:1}.qlabel p{margin:0;line-height:1.2}
.qlabel .qco{font-size:7pt;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#f97316}
.qlabel .qid{font-size:20pt;font-weight:900;letter-spacing:.02em;margin:1mm 0}.qlabel .qname{font-size:10pt;font-weight:700}
.qlabel .qkind{font-size:7.5pt;color:#475569;margin-top:.8mm}.qlabel .qneed{font-size:7.5pt;font-weight:800;color:#b91c1c;margin-top:1.2mm}
.qlabel .qscan{font-size:7pt;color:#475569;margin-top:1.5mm;border-top:1px solid #e2e8f0;padding-top:1mm}
.qlabel.small .qid{font-size:13pt;margin:.5mm 0}.qlabel.small .qname{font-size:8pt}.qlabel.small .qkind,.qlabel.small .qneed,.qlabel.small .qscan{font-size:6pt}.qlabel.small .qscan{display:none}
@media print{
  header.top,nav.main,nav.sub,.pagehead,.howto,.noprint,.okmsg,script{display:none!important}
  body{background:#fff!important}main.page{padding:0!important;max-width:none!important}
  .card.labels{border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
  @page{margin:8mm}
}
@media (max-width:760px){.row4{grid-template-columns:1fr 1fr}.grid3.safe3{grid-template-columns:1fr}.addasset .step{grid-template-columns:1fr}.addasset .stepn{display:none}.todo{flex-wrap:wrap}.todo .tside{width:100%;justify-content:flex-start;padding-left:46px}.qrside{grid-template-columns:1fr}}
@media screen and (max-width:480px){.qlabel.large{width:100%;height:auto}.qlabel.large .qcode svg{width:36mm;height:36mm}}
svg.qr,svg.qr *{stroke:none!important;stroke-width:0!important}svg.qr path{fill:#000!important}svg.qr rect{fill:#fff!important}
ul.lawlist{margin:0 0 8px;padding-left:18px;font-size:13px;line-height:1.5}ul.lawlist li{margin:0 0 7px}ul.lawlist li.warnli{color:#b91c1c;font-weight:700}
.duegrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}.duegrid>div{min-width:0}.duegrid .todo .tside{flex-direction:column;align-items:flex-end;gap:6px}.duegrid .todo .tside .btn{white-space:nowrap}[id^="g-"]{scroll-margin-top:80px}@media (max-width:1000px){.duegrid{grid-template-columns:1fr}.duegrid .todo .tside{flex-direction:row}}
/* ---- cards for emailed reports and drivers, button rows, the report form (04/11/2026: "looks so stretchy", "buttons too close") */
.btnrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:auto}.btnrow form{margin:0}
.btnrow form.mini{display:inline-flex}.btnrow button,.btnrow .btn{margin:0!important}
/* email pages (05/11/2026): forms in plain rows that line up, buttons on one line at the end */
.rcard.off{background:#fbfcfe}.rcard.off h3 a{color:var(--ink2)}.rcard.off dl.rfacts dd{color:var(--mute)}
.mailform{display:flex;flex-direction:column;gap:12px}.mailform label{margin:0}
.mailform .mrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px 16px;max-width:900px}
.mailform .mrow.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:600px}
.mailform .mwide{max-width:900px}
.mailform .mgroup{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fbfcfe}
.mailform .mgroup>h4{margin:0 0 10px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ink2)}
.mailform .mgroup>p{margin:8px 0 0}
.mailform .mend{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line2);padding-top:12px}
.mailform .mend .sp{flex:1}.mailform .mend button,.mailform .mend .btn{margin:0!important}
.mailform .presets{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}.mailform .presets .btn{white-space:normal;max-width:100%;height:auto;text-align:left;line-height:1.3}   /* long preset names wrap on phones (07/11/2026) */
.mtest{display:flex;flex-wrap:wrap;gap:10px;align-items:end}.mtest label{margin:0;min-width:280px}.mtest button{margin:0!important}.mtest .muted{align-self:center}
.rcard h3 a,.drvcard h3 a{color:inherit}.rcard .dtop small{display:block;color:var(--mute);font-size:11px}
dl.rfacts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 12px;margin:0;font-size:12.5px}
dl.rfacts dt{color:var(--mute);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;padding-top:2px}dl.rfacts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.drvcard .dtop .person{min-width:0}
.deptmails{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:10px 24px;margin-bottom:12px}
.deptmail{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:10px;align-items:center}.deptmail b{font-size:13px}.deptmail input{margin:0}
.replist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px 18px}.replist>div{font-size:12.5px;line-height:1.4}.replist b{display:block;font-size:13px}.replist span{color:var(--mute)}
p.fgroup{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin:14px 0 6px}p.fgroup:first-child{margin-top:0}
.formend{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line2)}.formend button{margin:0}.formend label.chk{margin:0}
.pagehead .acts form.mini{display:inline}
@media (max-width:760px){.deptmail{grid-template-columns:1fr}}
/* ---- the matrix uses the card's width (Daniel, 04/11/2026: "we have lots of space here") and shows licences and talks */
table.matrix2:not(.tight):not(.stacked){width:100%}
table.matrix2:not(.tight):not(.stacked) .nm{width:230px}table.matrix2:not(.tight):not(.stacked) td.cpl,table.matrix2:not(.tight):not(.stacked) th.cpl{width:150px}
table.matrix2:not(.tight) th.sk,table.matrix2:not(.tight) td.mx{width:auto;max-width:none;min-width:38px}
table.matrix2 th.sk{height:140px}table.matrix2 th.sk span{max-height:132px}
table.matrix2 th.cat.safe{background:#fff7ed;color:#c2410c}table.matrix2 th.sk.safe span{color:#c2410c}
table.matrix2 td.mx a{margin:0 auto}
.pagehead .acts>form{display:flex!important;align-items:center;margin:0!important}.pagehead .acts>form>button,.pagehead .acts>form>.btn{margin:0!important}
.brand .tile.logo{background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.12)}.brand .tile img{width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box;display:block}
/* ---- Set-up, Add a skill, Add a role (04/11/2026: "more info, description, recommendations") */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 16px}
.fstep{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;position:relative}
.fstep .fi{width:30px;height:30px;border-radius:9px;background:var(--tint);display:grid;place-items:center;flex:none}.fstep .fi svg{width:16px;height:16px;stroke:var(--p2)}
.fstep b{display:block;font-size:13px}.fstep small{display:block;font-size:11.5px;color:var(--mute);line-height:1.35;margin-top:2px}
@media (max-width:900px){.flow{grid-template-columns:1fr 1fr}}@media (max-width:520px){.flow{grid-template-columns:1fr}}
.rolecard{text-decoration:none;color:inherit}.rolecard:hover{border-color:#c7d2fe}.rolecard .tsum{margin:0;color:var(--mute);font-size:12.5px;line-height:1.4}
.rolecard .rbar{display:flex;align-items:center;gap:8px;margin-top:auto}.rolecard .rbar .cbar{flex:1;margin:0}.rolecard .rbar small{font-size:11.5px;color:var(--mute);white-space:nowrap}
.skgroup+.skgroup{margin-top:10px}
a.skrow{display:grid;grid-template-columns:minmax(0,2.2fr) auto minmax(0,1.6fr) minmax(0,1.6fr) 64px;gap:12px;align-items:center;padding:9px 6px;border-bottom:1px solid var(--line2);text-decoration:none;color:inherit;border-radius:8px}
a.skrow:hover{background:#fafaff}a.skrow.dim{opacity:.55}
a.skrow .skn b{display:block;font-size:13px}a.skrow .skn small{display:block;color:var(--mute);font-size:11.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.skrow .skp{font-size:12px;color:#334155}a.skrow .skr{display:flex;flex-wrap:wrap;gap:4px}a.skrow .skc{text-align:right}a.skrow .skc b{display:block;font-size:16px}a.skrow .skc small{font-size:10.5px;color:var(--mute)}
@media (max-width:900px){a.skrow{grid-template-columns:minmax(0,1fr) auto}a.skrow .skp,a.skrow .skr{grid-column:1/-1}a.skrow .skc{grid-row:1;grid-column:2}a.skrow .skl{grid-column:1/-1}}
details.quickadd2{border:1px dashed #c7d2fe;border-radius:12px;padding:10px 12px;margin:0 0 14px;background:#fafaff}details.quickadd2>summary{cursor:pointer}details.quickadd2 .chip{text-decoration:none}
details.quickadd2 .chipline{gap:6px}
.lastpick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}.lastpick .pmode:has(input:checked){border-color:#7c3aed;background:#f5f3ff;box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.renewrow{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}.renewrow label{margin:0;max-width:160px}.renewrow .btnrow{margin:0 0 4px}
label.tog.new span{border-style:dashed;border-color:#f59e0b;color:#b45309;background:#fffbeb}label.tog.new input:checked+span{background:#f59e0b;color:#fff}
.skcat.newlib{border-color:#fde68a;background:#fffdf5;margin-bottom:12px}
@media (max-width:640px){.lastpick{grid-template-columns:1fr}}
input.codero{background:#f1f5f9!important;color:#475569!important;border-style:dashed!important;cursor:default;font-weight:700;letter-spacing:.04em}input.codero:focus{box-shadow:none!important;outline:none}
details.morelib{border:1px dashed #c7d2fe;border-radius:12px;padding:10px 12px;margin:12px 0 4px;background:#fafaff}details.morelib>summary{cursor:pointer;font-weight:700;color:var(--p2);font-size:13px}details.morelib .togs{margin-bottom:6px}
/* ---- Add an item that changes with the kind, the van look-up (04/11/2026) */
.regrow{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}.regrow label{margin:0;flex:0 1 240px}.regrow button{margin:0}
input.regplate{background:#facc15!important;border:2px solid #1f2937!important;font-weight:800;font-size:20px!important;letter-spacing:.08em;text-transform:uppercase;text-align:center;font-family:"Arial Narrow",Arial,sans-serif}
.lookmsg{margin:6px 0 12px}.lookmsg.ok{color:#047857;font-weight:700}.lookmsg.bad{color:#b45309;font-weight:700}
.numpill{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;background:#1e1b4b;color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;vertical-align:middle}.numpill:empty{display:none}
.ckrow{display:grid;grid-template-columns:minmax(0,1fr) 160px 160px;gap:10px;align-items:end;padding:6px 0;border-bottom:1px solid var(--line2)}.ckrow label{margin:0}
.addasset [hidden]{display:none!important}
.qlabel .qreg{display:inline-block;margin-top:1mm;padding:.3mm 2mm;background:#facc15;border:.3mm solid #111;border-radius:1mm;font-weight:900;font-size:9pt;letter-spacing:.05em}
@media (max-width:760px){.ckrow{grid-template-columns:1fr 1fr}.ckrow>label.chk{grid-column:1/-1}}
/* ---- number plates and the item page header (04/11/2026: "the reg plate should be more visible, on top with the name") */
.plate{display:inline-flex;align-items:center;gap:6px;background:#facc15;color:#111;border:2px solid #111;border-radius:6px;padding:2px 10px 2px 6px;font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;font-weight:900;font-size:15px;letter-spacing:.06em;line-height:1.25;white-space:nowrap;vertical-align:middle}
.plate::before{content:"UK";display:inline-grid;place-items:center;background:#1d4ed8;color:#fff;font-size:9px;font-weight:800;letter-spacing:0;border-radius:3px;padding:3px 3px;line-height:1}
.plate.big{font-size:26px;padding:4px 14px 4px 8px;border-width:3px;border-radius:8px;margin-left:10px}.plate.big::before{font-size:11px;padding:5px 4px}
.plate.small{font-size:12px;padding:1px 7px 1px 4px;border-width:1.5px}.plate.small::before{font-size:7.5px;padding:2px}
.acard .plate.small{margin:3px 0 2px}
.assethead .ahleft{display:flex;gap:14px;align-items:center;min-width:0}.assethead h1{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
img.athumb.big,span.athumb.big{width:72px;height:72px;border-radius:14px}span.athumb.big svg{width:30px;height:30px}
.assethead .acts form.mini{display:inline-flex}
a.vehline{display:flex;align-items:center;gap:12px;padding:8px 0;text-decoration:none;color:inherit}a.vehline small{display:block;color:var(--mute);font-size:11.5px}
.todo .tmain b .plate.small{margin:0 4px}
.scanhead .plate{margin-right:6px}
@media (max-width:640px){.plate.big{font-size:20px;margin-left:0}.assethead .ahleft{align-items:flex-start}}
/* ---- tiles never wider than a phone; vehicle cards with their three dates (04/11/2026) */
@media (max-width:900px){.stats.s4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat b{overflow-wrap:anywhere}@media (max-width:480px){.stat b{font-size:21px}}
.acard .aline .vdates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}.acard .aline .vdates>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.acard .aline .vdates small{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}.acard .aline .vdates .pill{font-size:10.5px;padding:2px 7px;justify-self:start;align-self:flex-start}
.acard .aline .vdriver{display:block;width:100%;font-size:12px;color:#334155;margin-top:2px}
/* ---- licence copies (04/11/2026) */
.licrow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}img.licthumb{width:150px;max-width:100%;height:96px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#fff}
/* ---- the person's details as cards (05/11/2026, Daniel: "learn from ActIn, use our design") */
/* one rhythm in every card: 14 px between rows, the two boxes of a row start at the same height, cards side by side are the same height (05/11/2026, Daniel: "boxes not lining up") */
.pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}.pcards>.card{margin:0}.pcards>.card.wide{grid-column:1/-1}
.pcards .card>*:not(.cardhead){margin-top:14px}.pcards .card>.cardhead+*{margin-top:0}
.pcards .row2{align-items:start;gap:14px}.pcards .row2>label,.pcards .row2>div,.pcards .row2>.norem{margin-top:0}
.pcards label{margin-top:0}.pcards label.chk{margin-top:8px}.pcards .card>label.chk{margin-top:10px}.pcards p.lab{margin:14px 0 6px}
.pcards :where(input:not([type=checkbox]):not([type=radio]):not([type=file])),.pcards select{height:42px}
.pcards .apphelp{margin-bottom:0}.pcards .card>.apphelp:first-of-type{margin-top:0}
.pform{margin-bottom:16px}
.pform>.formend{position:static;margin-top:16px;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:14px}
input[type=file]::file-selector-button{margin-right:10px;padding:7px 12px;border:1px solid var(--tint2);border-radius:9px;background:#fff;color:var(--p2);font:inherit;font-weight:700;font-size:12px;cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--tint)}
.norem{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11.5px;font-weight:600;color:var(--mute)}.norem input{margin:0;width:14px;height:14px;accent-color:var(--p2)}
.calc{display:inline-flex;gap:5px;align-items:center;margin-top:6px;padding:2px 9px;border-radius:999px;background:#f0f9ff;border:1px solid #bae6fd;color:#0369a1;font-size:11.5px;font-weight:600}.calc b{font-weight:800}
.pphoto{display:flex;gap:14px;align-items:center;margin-bottom:4px}.pphoto img,.pphoto .av{width:72px;height:72px;border-radius:16px;object-fit:cover;flex:none}.pphoto label{margin-top:0}.pphoto label.chk{margin-top:6px}
img.avphoto{width:64px;height:64px;border-radius:16px;object-fit:cover;flex:none;border:2px solid rgba(255,255,255,.25)}
.chkrow{display:flex;flex-wrap:wrap;gap:4px 18px}.chkrow label.chk{margin-top:4px}
.wtr{margin-top:14px;padding:10px 12px;border:1px dashed var(--line);border-radius:10px}.wtr>label.chk{margin-top:0}
@media (max-width:900px){.pcards{grid-template-columns:minmax(0,1fr)}}
/* ---- the save bar: shows once something on a long form has changed, never covers the page (05/11/2026) */
.savebar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;justify-content:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(15,23,42,.10)}
.savebar.on{display:flex}
.savebar .sbin{display:flex;align-items:center;gap:12px;width:100%;max-width:1180px}
.savebar .sbmsg{flex:1;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink)}.savebar .sbmsg::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(249,115,22,.15)}
.savebar .sbmsg small{font-weight:500;color:var(--mute)}
.savebar .btnrow{display:flex;gap:10px}
body.has-savebar{padding-bottom:76px}
@media (max-width:600px){.savebar .sbin{flex-wrap:wrap}.savebar .sbmsg{flex-basis:100%}.savebar .btnrow{flex:1}.savebar .btnrow button{flex:1}.savebar .sbmsg small{display:none}}
@media print{.savebar{display:none!important}}
/* file pickers and grid cells never push past their box (05/11/2026: the licence copy card in a side column) */
.row2>*,.row3>*{min-width:0}input[type=file]{max-width:100%;width:100%;overflow:hidden;text-overflow:ellipsis}
.pphoto>div{min-width:0;flex:1}
.wtr>.row2{margin-top:10px}
/* ---- Who's in: where everyone is now, as a board of places (05/11/2026) */
.wboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:16px;align-items:start}
.wzone{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(15,23,42,.04);border-top:4px solid #a5b4fc;min-width:0}
.wzone.ok{border-top-color:#10b981}.wzone.teal{border-top-color:#0d9488}.wzone.bad{border-top-color:#dc2626}.wzone.info{border-top-color:#0284c7}.wzone.plain{border-top-color:#94a3b8}
.wzh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 10px;border-bottom:1px solid var(--line2)}
.wzh b{display:block;font-size:14px;font-weight:800;color:var(--ink)}.wzh small{display:block;font-size:11.5px;color:var(--mute);font-weight:600;margin-top:2px}
.wppl{display:flex;flex-direction:column;gap:2px;padding:8px}
.wchip{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;color:var(--ink);text-decoration:none;min-width:0}
.wchip:hover{background:var(--tint);text-decoration:none}
.wchip span{min-width:0}.wchip b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wchip small{display:block;font-size:11.5px;font-weight:600;color:var(--mute)}
.wchip.ok small{color:#047857}.wchip.warn small{color:#b45309}.wchip.bad small{color:#b91c1c}.wchip.teal small{color:#0f766e}.wchip.info small{color:#0369a1}
/* ---- People: tick people and change them together (05/11/2026) */
th.pk,td.pk{width:34px;text-align:center;padding-left:6px!important;padding-right:6px!important}th.pk input,td.pk input{width:16px;height:16px;margin:0;accent-color:var(--p2);cursor:pointer}
.bulkgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 14px;align-items:start}.bulkgrid label{margin-top:0}
@media (max-width:1000px){.bulkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:560px){.bulkgrid{grid-template-columns:minmax(0,1fr)}}
/* ---- the person's status at a glance (05/11/2026, Daniel: "if leaver we should see a different colour") */
.dark.leaver{background:linear-gradient(135deg,#334155,#475569 70%,#64748b);position:relative;overflow:hidden}
.dark.leaver .av,.dark.leaver img.avphoto{filter:grayscale(1);opacity:.75}
.leftribbon{position:absolute;top:18px;right:-44px;transform:rotate(35deg);background:#f8fafc;color:#334155;font-weight:900;font-size:12px;letter-spacing:.24em;text-transform:uppercase;padding:5px 52px;box-shadow:0 2px 8px rgba(15,23,42,.25);pointer-events:none}
.dark.leaver .side{margin-right:46px}
.sstrip{display:flex;align-items:center;gap:14px;margin:-6px 0 16px;padding:12px 16px;border-radius:14px;border:1px solid;font-size:13px;line-height:1.45}
.sstrip>div{flex:1;min-width:0}.sstrip .st{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.sstrip .sic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.7)}
.sstrip.left{background:#f1f5f9;border-color:#cbd5e1;color:#334155}.sstrip.left .st{color:#475569}
.sstrip.notice{background:#fffbeb;border-color:#fde68a;color:#78350f}.sstrip.notice .st{color:#b45309}
.sstrip.susp{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}.sstrip.susp .st{color:#b91c1c}
.sstrip.prob{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a}.sstrip.prob .st{color:#1d4ed8}
.sstrip.new{background:#f5f3ff;border-color:#ddd6fe;color:#4c1d95}.sstrip.new .st{color:#6d28d9}
@media (max-width:600px){.sstrip{flex-wrap:wrap}.sstrip .btn{width:100%}}
tr.gone td{opacity:.55}tr.gone:hover td{opacity:1}
/* ---- People filters in labelled rows; the table keeps its columns when filtered (05/11/2026) */
.filters{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;padding:12px 14px;background:#f8fafc;border:1px solid var(--line2);border-radius:12px}
.frow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.flab{flex:0 0 72px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.fdim{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1;min-width:0}.fdim .chip{margin:0}.fdim .chip.warn:not(.on) b{color:#b45309}
.fsels select{width:auto!important;min-width:200px;max-width:100%;display:inline-block;margin:0;padding:7px 10px;font-size:13px}
@media (min-width:1000px){#pl table:not(.stacked){table-layout:fixed;width:100%}
#pl th:nth-child(1){width:42px}#pl th:nth-child(2){width:20%}#pl th:nth-child(3){width:12%}#pl th:nth-child(4){width:13%}#pl th:nth-child(5){width:13%}
#pl th:nth-child(6){width:10%}#pl th:nth-child(7){width:10%}#pl th:nth-child(8){width:9%}#pl th:nth-child(9){width:10%}
#pl td{overflow:hidden;text-overflow:ellipsis}}
@media (max-width:600px){.flab{flex-basis:100%}.fsels select{min-width:0;width:100%!important}}
ol.steps3{margin:0 0 14px;padding:12px 16px 12px 34px;background:#f5f3ff;border:1px solid #ede9fe;border-radius:10px;color:#4c1d95;font-size:13px;line-height:1.6}ol.steps3 b{color:#3b0764}
/* ---- Devices: reading punches from the terminal (option B, 05/11/2026) */
.pullrow{display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(220px,2fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line2)}
.pullrow b{display:block}.pullrow small{display:block;color:var(--mute);font-size:11.5px}.pullst{min-width:0;font-size:13px;line-height:1.5}
@media (max-width:900px){.pullrow{grid-template-columns:minmax(0,1fr)}}

/* ---- access: who can do what (Settings), view only sections (05/11/2026) */
.vonote{display:flex;align-items:center;gap:8px;background:#eef2ff;border:1px solid #c7d2fe;color:#3730a3;padding:9px 12px;border-radius:10px;font-size:13px;font-weight:600;margin:0 0 14px}
.vonote svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
body[data-viewonly] form.vo{opacity:.55}
body[data-viewonly] form.vo :is(button,input,select,textarea){cursor:not-allowed}
body[data-viewonly] .vo-off{display:none}
table.acgrid{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
table.acgrid thead th:first-child{width:32%}
table.acgrid.aclogin thead th:first-child{width:40%}
table.acgrid th,table.acgrid td{padding:8px 10px;border-bottom:1px solid #eef0f6;vertical-align:middle}
table.acgrid thead th{font-size:10px}
table.acgrid th.acr{text-align:center}
table.acgrid th.acn{text-align:left;font-weight:400}
table.acgrid th.acn b{display:block;font-size:13px;color:#1e1b4b}
table.acgrid td.acc{text-align:center}
table.acgrid td.acc select{width:100%;max-width:170px;min-height:34px;margin:0}
table.acgrid td.acc.chg select,table.acgrid td.acc.chg .acchk{box-shadow:0 0 0 2px #f97316;border-radius:8px}
table.acgrid select.lv-none{color:#64748b}
table.acgrid select.lv-view{color:#3730a3}
table.acgrid select.lv-edit{color:#047857;font-weight:600}
table.acgrid tr.acfix th,table.acgrid tr.acfix td{background:#fafafa}
.acchk{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;cursor:pointer;font-size:13px}
.acchk input{width:18px;height:18px;margin:0}
.acform .acend{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.acform .acend input[name=reason]{width:280px;max-width:100%;margin:0}
.acform .acend .muted{margin-right:auto;max-width:60%}
.acform .acend button{margin:0}
form.acreset{display:inline-flex;gap:6px;align-items:center}
form.acreset input{width:150px;margin:0}
a.acown{display:inline-block;margin-left:6px;font-size:12px;color:#4f46e5;white-space:nowrap}
a.acown.on{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;border-radius:999px;padding:1px 8px;font-weight:600}
ul.aclist{margin:0;padding-left:18px}
ul.aclist li{margin:4px 0}
@media (max-width:760px){table.acgrid{table-layout:auto}table.acgrid thead th:first-child{width:auto}}

/* ---- shift timeline, third round (05/11/2026, Daniel: "see more people in one screen", "the vertical lines not in line
   with the hours"): one line per person, full-height hour lines, one now line, Compact or Roomy rows */
.tline{--wc:210px;--hc:200px;--sh:23px}
.tline .scale,.tline .row{grid-template-columns:var(--wc) 1fr var(--hc)}
.tline .scale .sofar{text-align:right;padding-right:4px}
.tline .lane{background:none}
.tline .glines{position:absolute;top:var(--sh);bottom:0;left:calc(var(--wc) + 6px);right:calc(var(--hc) + 6px);pointer-events:none;z-index:0}
.tline .glines i{position:absolute;top:0;bottom:0;width:1px;background:rgba(15,23,42,.06)}
.tline .glines i.maj{background:rgba(15,23,42,.14)}
.tline .glines i.half{background:none;border-left:1px dotted rgba(15,23,42,.07);width:0}
.tline .glines.gtop{z-index:3}
.tline .gnow{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:color-mix(in srgb,var(--orange) 80%,transparent)}
.tline .gnow b{position:absolute;top:-19px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;font-size:10px;font-weight:800;padding:1px 5px;border-radius:5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tline .ticks span{font-weight:700}
.tline .ticks span::after{height:5px;background:rgba(15,23,42,.25)}
.tline .grp{position:relative;z-index:1}
.tline .row{min-height:0}
.tline.compact .row{height:36px}
.tline.compact .lane{height:28px}
.tline.compact .act{top:3px;bottom:3px}
.tline.compact .plan{top:1px;bottom:1px}
.tline.compact .missing,.tline.compact .absent{top:2px;bottom:2px}
.tline.compact .lategap,.tline.compact .leftgap{top:6px;bottom:6px}
.tline.compact .early{top:6px;bottom:6px}
.tline.compact .brk{top:4px;bottom:4px}
.tline.roomy .row{height:50px}
.tline.roomy .lane{height:36px}
.tline.roomy .act{top:5px;bottom:5px}
.tline .act b{font-size:11px}
.tline .who{gap:8px}
.tline .who .av{flex:none}
.tline .who b{font-size:12.5px;font-weight:600;min-width:0}
.tline .hrs{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:13px;white-space:nowrap;overflow:hidden;cursor:help}
.tline .hrs span.st{font-size:10.5px;font-weight:700;color:var(--sc);background:color-mix(in srgb,var(--sc) 10%,#fff);padding:2px 7px;border-radius:999px;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tline .hrs i[class^="tg"]{position:static;inset:auto;width:auto;height:auto;border:0;animation:none;font-style:normal;font-size:10px;font-weight:700;padding:2px 6px;border-radius:999px;background:#f1f5f9;color:var(--mute);flex:none}
.tline .hrs i.tg-early{background:#fff7ed;color:#b45309}
.tline .hrs i.tg-xtra{background:#eef2ff;color:#4338ca}
.tline .hrs b.h{display:inline-block;min-width:44px;text-align:right;font-weight:800;color:var(--ink);flex:none}
.tline .missing.noin{display:flex;align-items:center;padding-left:6px;overflow:hidden}
.tline .missing.noin b{font-size:10px;font-weight:800;color:#b91c1c;white-space:nowrap}
.tline .loneout{position:absolute;top:2px;bottom:2px;width:3px;margin-left:-1px;border-radius:2px;background:#dc2626;z-index:2}
.tline .loneout b{position:absolute;left:7px;top:50%;transform:translateY(-50%);font-size:10.5px;font-weight:800;color:#b91c1c;background:#fff;padding:1px 5px;border-radius:5px;box-shadow:0 0 0 1px #fca5a5;white-space:nowrap}
.tldens{display:flex;width:max-content;gap:0;margin:0 0 8px auto;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.tldens button{background:#fff;color:var(--ink2);border:0;border-radius:0;padding:5px 12px;font-size:12px;font-weight:600;margin:0;box-shadow:none}
.tldens button.on{background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff}
@media (max-width:1100px){.tline{--wc:150px;--hc:160px}}
@media (max-width:700px){.tline{--wc:92px;--hc:64px}.tline .hrs i[class^="tg"],.tline .hrs span.st{display:none}.tline .who b{font-size:11px}}
.pform label.chk.pmail{flex-wrap:wrap;align-items:flex-start;margin:4px 0 12px}.pform label.chk.pmail small.hint{flex-basis:100%;margin:2px 0 0 26px}
.tline .act b.tout.two{background:rgba(15,23,42,.45);padding:2px 6px;border-radius:5px;text-shadow:none;right:4px}.tline .act.done{filter:saturate(.6);opacity:.9}.tline .glines i.maj{background:rgba(15,23,42,.18)}.tline .glines i{background:rgba(15,23,42,.08)}
.tline{--hc:230px}.tline .hrs span.st{flex:none;overflow:visible}.tline .hrs i[class^="tg"]{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width:1100px){.tline{--hc:170px}}@media (max-width:700px){.tline{--hc:64px}}

/* ---- timeline right side in columns (05/11/2026, Daniel: "same categories in the same row"): Now | Start | Finish | Hours */
.tline{--hc:330px}
.tline .hrs.cols{display:grid;grid-template-columns:62px 1fr 1fr 48px;gap:6px;align-items:center;justify-items:start;padding-right:4px;overflow:hidden}
.tline .hrs.cols span.st{justify-self:start;max-width:100%;text-align:center;flex:none}
.tline .hrs.cols span.c{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:var(--mute)}
.tline .hrs.cols span.c.cs-late,.tline .hrs.cols span.c.cs-left{color:#b45309;font-weight:700}
.tline .hrs.cols span.c.cs-early{color:#64748b}
.tline .hrs.cols span.c.cs-ok{color:#94a3b8;font-weight:500}
.tline .hrs.cols span.c.cs-ot{color:#4338ca;font-weight:700}
.tline .hrs.cols b.h{justify-self:end;min-width:0}
.tline .scale .hrs.cols.head{font-size:10px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;cursor:default}
.tline .scale .hrs.cols.head span.st{background:none;padding:0;color:var(--mute);font-size:10px}
.tline .scale .hrs.cols.head span.c{font-size:10px;color:var(--mute);font-weight:700}
.tline .scale .hrs.cols.head b.h{font-weight:700;font-size:10px;color:var(--mute)}
@media (max-width:1100px){.tline{--hc:250px}.tline .hrs.cols{grid-template-columns:56px 1fr 1fr 44px}}
@media (max-width:700px){.tline{--hc:110px}.tline .hrs.cols{grid-template-columns:52px 44px}.tline .hrs.cols span.c{display:none}.tline .hrs.cols span.st{display:inline-block}}
.tline .ticks span.nearnow{color:transparent}
/* a narrower card (the Dashboard beside Needs you): shorter name column, narrower right side, so the bars keep their room */
.tline{container-type:inline-size;container-name:tl}
@container tl (max-width:980px){.tline>*{--wc:150px;--hc:250px}.tline .hrs.cols{grid-template-columns:50px 1fr 1fr 44px;gap:4px}.tline .hrs.cols span.c{font-size:10.5px}.tline .who b{font-size:12px}}
@container tl (max-width:640px){.tline>*{--wc:96px;--hc:100px}.tline .hrs.cols{grid-template-columns:52px 44px}.tline .hrs.cols span.c{display:none}}

/* ---- clock times on the bars as small pills, paid hours softer (05/11/2026, Daniel: "punches not so great to see", "hours too strong") */
.tline .act b small{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:5px;background:rgba(255,255,255,.88);color:#334155;font-size:9.5px;font-weight:700;opacity:1;text-shadow:none;line-height:1.2}
.tline .act b.tout.two{background:none;padding:0}
.tline .act b.tout.two small{background:rgba(255,255,255,.88);color:#334155}
.tline .act b.tin.left small,.tline .act b.tin.right small{background:#eef2ff;color:#3730a3}
.tline .hrs.cols b.h{color:#3730a3;font-weight:700}
.tline .hrs.cols b.h.sofar{color:#64748b;font-weight:600}

/* the right side only as wide as its words (Daniel: "do we need that much space on the last columns") */
.tline{--hc:286px}
.tline .hrs.cols{grid-template-columns:56px 80px 88px 44px;gap:6px;justify-content:end}
@container tl (max-width:980px){.tline>*{--hc:252px}.tline .hrs.cols{grid-template-columns:50px 70px 82px 40px;gap:3px}}
@container tl (max-width:640px){.tline>*{--hc:100px}.tline .hrs.cols{grid-template-columns:52px 44px}}

/* ---- Settings, Users: one row per login, the choices on one line (05/11/2026) */
form.uacc,form.ulink{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0}
form.uacc select,form.ulink select{width:auto;min-width:150px;max-width:220px;margin:0;min-height:34px}
form.uacc input[name=reason]{display:none;width:150px;margin:0;min-height:34px}
form.uacc.chg input[name=reason]{display:block}
form.uacc button,form.ulink button{margin:0}
form.uacc button{display:none}
form.uacc.chg button{display:inline-flex}

table.acgrid th.acn{white-space:normal}
table.acgrid th.acn .sub2{display:block;white-space:normal;line-height:1.35}
table.acgrid.aclogin td.acc select{max-width:230px}

/* ---- staff requests (My Time, the tablet) and the workshop tablet itself (05/11/2026) */
form.sreq{display:grid;gap:12px;max-width:560px}
form.sreq label{display:grid;gap:4px;font-weight:600;font-size:13px}
form.sreq .sbrks{display:grid;gap:8px}
form.sreq label.brk{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fafbff}
form.sreq label.brk select{width:auto;min-width:180px;margin:0}
form.sreq button{justify-self:start}
form.sreq.big{font-size:16px;max-width:none}
form.sreq.big label{font-size:15px}
form.sreq.big select,form.sreq.big input,form.sreq.big textarea{min-height:52px;font-size:17px}
form.sreq.big button{min-height:56px;font-size:18px;padding:0 28px}
.sreqrow{padding:8px 0;border-bottom:1px solid var(--line2)}
.sreqrow form{display:inline-flex;margin-left:8px}
.sreqcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 10px;background:#fff}
.sreqcard ul{margin:6px 0 6px 18px;padding:0}
.sreqhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sreqcard .btnrow form.cell{display:inline-flex;gap:6px;align-items:center}
.sreqcard .btnrow input{width:200px;margin:0}
.kiosk{min-height:100vh;background:linear-gradient(160deg,#eef2ff,#f8fafc)}
.ktop{display:flex;align-items:center;gap:16px;padding:14px 22px;background:linear-gradient(90deg,#1e1b4b,#4f46e5);color:#fff}
.kbrand{font-size:18px;display:inline-flex;align-items:center;gap:12px}.kbrand b{color:#fff}.kbrand .ktile{background:#fff;border-radius:10px;padding:2px 10px;display:inline-flex}.kbrand .ktile img{height:38px;width:auto;display:block}.kbrand i{font-style:normal;font-weight:700;color:#fe8a17}   /* the original logo on a white tile (07/11/2026) */.kclock{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700}
.kback{color:#fff;font-weight:700;border:1px solid rgba(255,255,255,.5);border-radius:10px;padding:8px 18px;text-decoration:none}
.kmain{max-width:1100px;margin:0 auto;padding:22px}
.kcard{background:#fff;border-radius:18px;box-shadow:0 10px 30px rgba(30,27,75,.08);padding:24px 26px}
.kcard h1{font-size:28px;margin:0 0 8px}
.ksearch{width:100%;max-width:420px;min-height:52px;font-size:18px;margin:12px 0}
.kdept{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);margin:18px 0 8px}
.knames{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.kname{display:flex;align-items:center;min-height:62px;padding:0 16px;border-radius:14px;background:#eef2ff;color:#1e1b4b;font-weight:700;font-size:17px;text-decoration:none}
.kname:active{background:#c7d2fe}
.kpad{max-width:420px;margin:0 auto;text-align:center}
.kpad #kcode{font-size:34px;letter-spacing:.4em;text-align:center;min-height:64px;margin:10px 0}
.kkeys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kkey{min-height:70px;font-size:26px;font-weight:700;border-radius:14px;background:#f1f5f9;color:#1e1b4b;border:0;margin:0}
.kkey.kgo{background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff}.kkey.kclr{font-size:16px}
.kmsg{background:#fff7ed;color:#9a3412;border-radius:10px;padding:10px 12px;font-weight:600}
.kmenu{display:grid;gap:14px;margin-top:14px}
.kbig{display:grid;gap:4px;padding:22px 24px;border-radius:16px;background:#eef2ff;color:#1e1b4b;text-decoration:none}
.kbig b{font-size:22px}.kbig span{color:#475569}
.kbig.kdone{background:#f1f5f9}
.kok{text-align:center}
.kcodebig{font-size:48px;font-weight:800;letter-spacing:.3em;color:#1e1b4b;margin:6px 0}
table.kcodes{border-collapse:collapse}table.kcodes td{border:1px dashed #94a3b8;padding:10px 18px;font-size:16px}
table.kcodes td.kcodecell{font-size:22px;font-weight:800;letter-spacing:.25em}

/* break choices as big tap buttons (Daniel: "we need the indication which breaks to take off") */
form.sreq fieldset.brk{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0;background:#fafbff}
form.sreq fieldset.brk legend{padding:0 4px;font-size:14px}
form.sreq fieldset.brk legend span{color:var(--mute);font-weight:500;font-size:12.5px}
.bchoice{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.bopt{position:relative;display:grid;gap:2px;min-width:130px;padding:10px 14px;border:2px solid #e2e8f0;border-radius:12px;background:#fff;cursor:pointer}
.bopt input{position:absolute;opacity:0;pointer-events:none}
.bopt span{font-weight:700;color:#1e1b4b}
.bopt small{color:var(--mute);font-size:11.5px;font-weight:500}
.bopt:has(input:checked){border-color:#4f46e5;background:#eef2ff;box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.bopt.none:has(input:checked){border-color:#f97316;background:#fff7ed;box-shadow:0 0 0 3px rgba(249,115,22,.12)}
form.sreq.big .bopt{min-width:170px;padding:14px 18px}
form.sreq.big .bopt span{font-size:17px}

.rulecard ul.rulelist{margin:6px 0 10px 18px;padding:0}
.rulecard ul.rulelist li{margin:3px 0}
.rulecard .lateline{background:#fff7ed;color:#9a3412;border-radius:10px;padding:8px 12px;margin:0}
.rulecard .lateline.ok{background:#ecfdf5;color:#047857}
.kmain .rulecard{margin-top:16px}
.rulecard.big{font-size:16px}

.clockstate{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0 0 12px;font-size:16px}
.clockstate b{font-size:20px;color:#1e1b4b}
.clockstate span{color:#4338ca;font-weight:600}
.clockstate span.late{color:#b45309}
.login .linkin{margin:8px 0 0}.login .linkin a{font-weight:700}
/* ---- van kit (06/11/2026): the weekly kit check on a phone, the van's list, the restock list, the stock sheet */
.vkform .vkgrp{border:1px solid var(--line);border-radius:12px;margin:0 0 12px;overflow:hidden}
.vkform .vkgh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--tint);border-bottom:1px solid var(--line2)}
.vkform .vkgh h3{margin:0;font-size:13px;font-weight:800}.vkform .vkgh h3 small{color:var(--mute);font-weight:600;margin-left:4px}
.vkform .vkl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line2)}.vkform .vkl:last-child{border-bottom:0}
.vkform .vkn b{display:block;font-size:13.5px;font-weight:600}.vkform .vkn small{color:var(--mute);font-size:11.5px}
.vkform .vkseg{display:flex;gap:4px}.vkform .vkseg label{margin:0;cursor:pointer;position:relative}
.vkform .vkseg input{position:absolute;opacity:0;width:1px;height:1px}
.vkform .vkseg span{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:10px;font-size:12.5px;font-weight:700;color:var(--ink2);background:#fff}
.vkform .vkseg input:focus-visible+span{outline:2px solid var(--p2);outline-offset:1px}
.vkform .vkseg .vk-ok input:checked+span{background:var(--green);border-color:var(--green);color:#fff}
.vkform .vkseg .vk-low input:checked+span{background:var(--amber);border-color:var(--amber);color:#fff}
.vkform .vkseg .vk-missing input:checked+span,.vkform .vkseg .vk-damaged input:checked+span,.vkform .vkseg .vk-out input:checked+span{background:var(--red);border-color:var(--red);color:#fff}
.vkform .vkmore{grid-column:1/-1;display:none;gap:8px}
.vkform .vkl:has(.vk-low input:checked) .vkmore,.vkform .vkl:has(.vk-missing input:checked) .vkmore,.vkform .vkl:has(.vk-damaged input:checked) .vkmore,.vkform .vkl:has(.vk-out input:checked) .vkmore{display:flex}
.vkform .vkmore input{flex:1;min-width:0;height:38px}.vkform .vkmore input[type=number]{flex:0 0 130px}
.vkform .vkend{display:grid;gap:12px;margin-top:6px}.vkform .vkend button{justify-self:start;min-width:220px}
@media (max-width:620px){.vkform .vkl{grid-template-columns:1fr}.vkform .vkseg label{flex:1}.vkform .vkseg span{width:100%;min-width:0}.vkform .vkend button{justify-self:stretch}}
table.vklist td,table.vkstd td,table.vkrest td{font-size:13px}table.vklist small,table.vkstd small,table.vkrest small{font-size:11.5px}
table.vklist input.vknum{width:64px;height:34px}table.vklist input.vkunit{width:96px;height:34px}table.vklist select{height:34px;max-width:230px}
table.vklist label.chk,table.vkrest form.mini{margin:0}table.vklist td.vkqty,table.vklist label.chk{white-space:nowrap}table.vklist td{padding-top:6px;padding-bottom:6px}
table.vklist td.vkqty input{display:inline-block;vertical-align:middle}table.vklist td:first-child{width:38%}
tr.vkvan td{background:var(--tint);border-bottom:1px solid var(--tint2);font-size:12.5px}tr.vkvan form.mini{margin-left:8px}
.acard .aline .vkit{display:block;width:100%;font-size:12px;color:#4338ca;font-weight:600;margin-top:4px}
/* machine and tool types (06/11/2026): the drawing when there is no photo */
.adraw{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px;border:1px dashed var(--line);border-radius:12px;text-align:center}
.adraw svg{width:88px;height:88px;fill:none;stroke:var(--p2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.adraw small{color:var(--mute);font-size:12px}
svg.pic,span.athumb.none svg.pic,span.athumb.big svg.pic,.adraw svg.pic{width:100%;height:100%;fill:none;stroke:none}
span.athumb.none:has(svg.pic){background:#fff;padding:3px}.adraw svg.pic{width:150px;height:150px}
/* QR labels (06/11/2026): filters, label sheets, a true A4 preview */
.qlbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}.qlbar .chips{margin:0}.qlbar input[type=search]{flex:1;min-width:180px;height:36px}
.qpicks{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 12px;margin:0 0 12px}
label.qpick{display:flex;align-items:center;gap:7px;margin:0;padding:4px 6px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer;min-width:0}
label.qpick:hover{background:var(--tint)}label.qpick input{width:16px;height:16px;margin:0;accent-color:var(--p2);flex:none}label.qpick b{font-weight:800;flex:none}
label.qpick span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}label.qpick[hidden],label.qpick.qhide{display:none}
.qlopts{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line2)}.qlopts label{margin:0}.qlopts select{min-width:340px}.qlopts input{width:90px}
.qlopts .qlsum{flex:1;margin:0 0 9px;font-size:13px;color:var(--ink2)}
.qpages{zoom:.5;display:flex;flex-wrap:wrap;gap:0 14mm}.qpagehead{width:100%;margin:6mm 0 2mm;font-size:22px;font-weight:700;color:var(--mute)}
.qpage{display:grid;align-content:start;box-sizing:border-box;width:210mm;height:297mm;background:#fff;box-shadow:0 2px 12px rgba(15,23,42,.18);overflow:hidden;page:qsheet}
.qslot{display:flex}.qslot .qlabel{width:100%!important;height:100%!important}
.qlabel.medium{gap:3mm;padding:2.5mm}.qlabel.medium .qcode svg{width:30mm;height:30mm}.qlabel.medium .qid{font-size:15pt;margin:.5mm 0}.qlabel.medium .qname{font-size:9pt}
.qlabel.medium .qkind,.qlabel.medium .qneed,.qlabel.medium .qscan{font-size:6.5pt}.qlabel.medium .qscan{margin-top:.8mm;padding-top:.6mm}
.qslot .qlabel.small{gap:2mm;padding:2mm}.qslot .qlabel.small .qcode svg{width:29mm;height:29mm}
@page qsheet{size:A4;margin:0}
@media print{.qpages{zoom:1!important;display:block}.qpage{box-shadow:none;break-after:page}.qpage:last-child{break-after:auto}.card.labels .empty{display:none}}
@media (max-width:700px){.qlopts select{min-width:0;width:100%}.qpages{zoom:.4}}
table.vkstart td{padding:3px 8px}table.vkstart tr.vkvan td{padding:6px 10px}table.vkstart input.vknum{height:30px;width:64px}table.vkstart td:nth-child(3){font-size:12px;color:var(--mute)}
table.vkstart{max-width:980px}
/* van types (07/11/2026): compact type list, the van's kit in group blocks side by side */
.vtrows{display:flex;flex-direction:column}.vtrow{display:grid;grid-template-columns:minmax(140px,1.2fr) 2fr auto auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line2);font-size:13px}
.vtrow:last-child{border-bottom:0}.vtrow .muted{font-size:12.5px}
form.vtadd{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)}form.vtadd label{margin:0}form.vtadd input{min-width:200px}
form.vttype{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%}form.vttype label{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:700}form.vttype select{min-width:200px;height:36px}
.vtgroups{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:12px;align-items:start}
.vtgroup{border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.vtlist{width:100%;border-collapse:collapse}table.vtlist th{background:var(--tint);text-align:left;font-size:11px;padding:6px 8px;white-space:nowrap}table.vtlist th:first-child{font-size:12.5px;text-transform:none;letter-spacing:0;color:var(--ink)}
table.vtlist td{padding:3px 5px;font-size:12.5px;border-bottom:1px solid var(--line2);vertical-align:middle}table.vtlist tr:last-child td{border-bottom:0}
table.vtlist td.vtn{width:100%}table.vtlist input.vknum{width:44px;height:28px;padding:0 4px;font-size:12.5px}table.vtlist input.vkunit{width:62px;height:28px;padding:0 6px;font-size:12px}
table.vtlist select.vttool{height:28px;font-size:12px;max-width:170px;padding:0 22px 0 6px}
i.vtk{font-style:normal;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:999px;background:var(--tint);color:var(--p2);white-space:nowrap}i.vtk.stock{background:#fff7ed;color:#c2410c}i.vtk.own{background:#ecfdf5;color:#047857}
label.vtoff{display:inline-flex;align-items:center;gap:3px;margin:0;color:var(--mute);font-size:12px;cursor:pointer}label.vtoff input{width:14px;height:14px;margin:0;accent-color:#dc2626}
@media (max-width:700px){.vtgroups{grid-template-columns:1fr}.vtrow{grid-template-columns:1fr auto}}
table.vtlist td.vtq{white-space:nowrap}table.vtlist td input.vknum{display:inline-block;vertical-align:middle}span.vtu{color:var(--mute);font-size:11.5px;margin-left:5px}table.vtlist input.vkmin::placeholder{color:var(--mute)}
.vkask select,.vkask input{width:100%}ul.vkasked{list-style:none;margin:0;padding:0}ul.vkasked li{padding:7px 0;border-bottom:1px solid var(--line2);font-size:13px}ul.vkasked li:last-child{border-bottom:0}
details.vkno{display:inline-block}details.vkno>summary{list-style:none;cursor:pointer}details.vkno>summary::-webkit-details-marker{display:none}details.vkno[open] form{display:flex;gap:6px;margin-top:6px}details.vkno input{height:30px;font-size:12.5px}
/* Assets (06/11/2026): compact van kit, power tools by where they live */
details.vkhow{background:#fff;border:1px solid var(--line);border-radius:12px;margin:0 0 14px}details.vkhow>summary{cursor:pointer;list-style:none;padding:10px 14px;font-size:13px}
details.vkhow>summary::-webkit-details-marker{display:none}details.vkhow>summary::before{content:"\25B8";color:var(--p2);margin-right:8px}details.vkhow[open]>summary::before{content:"\25BE"}
details.vkhow>summary .muted{font-size:12px}details.vkhow .vksteps,details.vkhow ol.steps{margin:0;padding:0 14px 14px}details.vkhow ol.steps{padding-left:34px}
.card.vkline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 18px}.card.vkline .muted{font-size:12.5px}
form.vkevery{display:flex;align-items:center;gap:10px}form.vkevery label{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;font-weight:600}form.vkevery input{width:64px;height:34px}
table.vkvans select{margin:0;height:36px;padding:0 30px 0 10px;line-height:normal;font-size:13px;min-width:150px}table.vkvans td{white-space:nowrap}table.vkvans td:first-child{white-space:normal}table.vkvans .btnrow{flex-wrap:nowrap;justify-content:flex-end}
table.vkstart td.c input{width:18px;height:18px;accent-color:var(--p2)}table.vkstart th:first-child,table.vkstart td:first-child{width:86px}table.vkstart td:nth-child(2){width:46%}
table.vktools select{height:34px;min-width:190px;font-size:13px}
a.ptline{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:0 0 14px;color:var(--ink);font-size:13px}
a.ptline:hover{text-decoration:none;border-color:var(--tint2)}a.ptline svg{width:18px;height:18px;stroke:var(--p2)}a.ptline span{flex:1}a.ptline em{font-style:normal;font-weight:700;color:var(--p2);font-size:12.5px}
.vksteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 16px}
.vkstep{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 12px;color:var(--ink)}.vkstep:hover{text-decoration:none;border-color:var(--tint2)}
.vkstep>span{flex:none;width:24px;height:24px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.vkstep b{display:block;font-size:13px}.vkstep small{display:block;color:var(--mute);font-size:11.5px;line-height:1.4;margin-top:2px}
.vkgsums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 14px;margin:0 0 4px}
.vkgsum{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;padding:7px 0;border-bottom:1px solid var(--line2);min-width:0}
.vkgsum b{font-size:12.5px}.vkgsum span{font-size:12px}.vkgsum small{flex:0 0 100%;min-width:0;color:var(--mute);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.vkstdedit td{padding:3px 5px}table.vkstdedit input{height:34px;padding:0 8px;font-size:13px}table.vkstdedit input.vkname{width:100%;min-width:200px;font-weight:600}
table.vkstdedit input.vkwhy{width:100%;min-width:140px;font-size:12px;color:var(--mute)}
table.vkstdedit select{height:34px;padding:0 26px 0 8px;font-size:13px;max-width:180px}table.vkstdedit select[name^="g_"]{min-width:165px}table.vkstdedit select[name^="k_"]{min-width:134px}
table.vkstdedit input.vkname{min-width:220px}table.vkstdedit input.vknum{width:58px;height:32px}table.vkstdedit input.vkunit{width:92px;height:32px}
table.vklist th.c,table.vklist td.c,table.vkstd th.c,table.vkstd td.c{text-align:center}
@media (max-width:1000px){.vksteps{grid-template-columns:1fr 1fr}.vkgsums{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.vksteps,.vkgsums{grid-template-columns:1fr}}
.vkcard .btnrow{margin-top:10px}.vkcard .aline.small{font-size:12.5px}
.vksheet{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:16px;align-items:start}.vksheet td.box{width:46px;border-left:1px solid var(--line2)}
.vkqr{text-align:center}.vkqr svg{width:140px;height:140px}.vkqr small{display:block;color:var(--mute);font-size:11px}
@media (max-width:760px){.vksheet{grid-template-columns:1fr}}
@media print{.card:has(.vksheet),.card:has(.vkrest),.card:has(.vkstd){break-inside:auto}}

/* ---- times set by hand, My Time's day list, the clock-in note, the accident report (06/11/2026) ---- */
small.handset{display:inline-block;font-size:11.5px;font-weight:700;color:#6d28d9;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:6px;padding:1px 6px;line-height:1.5;white-space:normal}
.dlg .easy small.handset{display:block;margin-top:4px;width:fit-content}
.clockstate small.handset{flex-basis:100%;width:fit-content}
table.week td small.handset{display:block;font-size:10px;padding:0 4px;margin-top:2px;width:fit-content}
.tline .act b small.hs{background:#f5f3ff!important;color:#6d28d9!important;opacity:1;border-radius:4px;padding:0 4px}
q.pnote{display:inline-block;font-size:12px;color:#475569;font-style:italic;margin-left:6px}q.pnote:before{content:"\201C"}q.pnote:after{content:"\201D"}
.clock .cnote{display:block;width:100%;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--mute)}.clock .cnote input{margin-top:4px;width:100%;max-width:none;box-sizing:border-box}
p.entline{margin:10px 0 0;font-size:13px;color:#475569}p.entline b{color:#0f172a}
.tsnav{display:flex;align-items:center;gap:8px;margin:0 0 14px}.tsnav form{flex:1;min-width:0;margin:0}.tsnav select{width:100%;margin:0;font-weight:700}
.tsnav .btn{min-width:42px;justify-content:center;font-size:20px;line-height:1;padding:6px 10px}.tsnav>span{min-width:42px}
.tskey{font-size:12px;color:var(--mute);margin:0 0 10px;line-height:1.9}
.tslist{display:flex;flex-direction:column;gap:6px}
.tsd{border:1px solid var(--line2,#e2e8f0);border-left:4px solid #6366f1;border-radius:12px;background:#fff;overflow:hidden}
.tsd>summary,.tsd .tsrow{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 12px;list-style:none}
.tsd>summary{cursor:pointer}.tsd>summary::-webkit-details-marker{display:none}.tsd>summary:hover{background:#f8fafc}
.tsd[open]>summary{background:#f8fafc;border-bottom:1px solid var(--line2,#e2e8f0)}
.tsdate{display:flex;flex-direction:column;align-items:center;line-height:1.05;color:#64748b}.tsdate small{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.tsdate b{font-size:24px;font-weight:800;color:#0f172a;margin:1px 0}
.tsmid{display:flex;flex-direction:column;gap:2px;min-width:0}
.tsmid .tstimes{font-size:16px;font-weight:800;color:#0f172a;font-variant-numeric:tabular-nums}.tsmid .arr{color:#94a3b8;font-weight:600;margin:0 2px}
.tsmid .tssub{font-size:12px;color:#64748b;overflow-wrap:anywhere}
.tstimes .hsx{color:#6d28d9;border-bottom:2px dotted #a78bfa}
.tstags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.tstags i,.tskey i{font-style:normal;font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px;white-space:nowrap}
i.tg-late{background:#fff7ed;color:#b45309}i.tg-ot{background:#eef2ff;color:#4338ca}i.tg-hand{background:#f5f3ff;color:#6d28d9}
i.tg-in{background:#ecfdf5;color:#047857}i.tg-bad{background:#fef2f2;color:#b91c1c}
.tshrs{text-align:right;line-height:1.1}.tshrs b{display:block;font-size:17px;font-weight:800;color:#4338ca;font-variant-numeric:tabular-nums}.tshrs small{font-size:10.5px;color:#94a3b8;font-weight:600}
.tsd.now{box-shadow:0 0 0 2px #c7d2fe}.tsd.now .tsdate b{color:#4f46e5}
.tsd.off{border-left-color:var(--rc,#94a3b8);background:color-mix(in srgb,var(--rc,#94a3b8) 6%,#fff)}
.tsd.bank{border-left-color:#64748b;background:#f8fafc}
.tsd.rest{border-left-color:#e2e8f0;background:#fafafa}.tsd.rest .tsrow{padding:5px 12px}.tsd.rest .tsdate b{font-size:17px;color:#94a3b8}.tsd.rest .tstimes{font-size:13px;color:#94a3b8;font-weight:600}
.tsd.miss{border-left-color:#f87171}.tsd.today{border-left-color:#a5b4fc}
.mailform .mdays{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;grid-column:1/-1}.mailform .mdays>span{width:100%;font-weight:600;color:var(--mute)}.mailform .mdays label.chk{margin:0}   /* morning email days (06/11/2026) */
p.teamnote{margin:0 0 12px;padding:9px 14px;border-radius:10px;background:#eef2ff;border:1px solid #c7d2fe;color:#3730a3;font-size:13px;font-weight:600}   /* team-only manager (06/11/2026) */
.tsmore{padding:12px 14px 14px 76px;display:flex;flex-direction:column;gap:10px;font-size:13px}
.tsscans{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.tsscans>b{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;margin-right:4px}
.tsscans>span{background:#f1f5f9;border-radius:8px;padding:3px 9px;font-weight:600;font-variant-numeric:tabular-nums}
.tskv{display:flex;flex-wrap:wrap;gap:8px 18px}.tskv span{display:flex;flex-direction:column}.tskv small{font-size:11px;color:#94a3b8;font-weight:600}.tskv b{font-size:14px;color:#0f172a}
p.tsnotes{margin:0;color:#475569}
.tsacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
@media (max-width:560px){.tsmore{padding-left:14px}.tsd>summary,.tsd .tsrow{grid-template-columns:44px minmax(0,1fr) auto;gap:10px;padding:8px 10px}.tsdate b{font-size:20px}.tsmid .tstimes{font-size:15px}.tshrs b{font-size:15px}}
.repform{max-width:720px}.repform fieldset{border:1px solid var(--line2,#e2e8f0);border-radius:12px;padding:8px 14px 10px;margin:0 0 12px}
.repform legend{font-size:12.5px;font-weight:700;color:#334155;padding:0 6px}.repform fieldset label.chk{display:flex;margin:6px 0}
.repform:has(input[name=kind][value=near_miss]:checked) [data-for=accident]{display:none}
.repwho:not(:has(input[value=other]:checked)) .repname{display:none}
.repform button.big{width:100%;margin-top:6px}
/* maps (06/11/2026): the icon rule `svg{width:16px...}` squeezed Leaflet's drawing layer, so circles and routes did not show */
.leaflet-container svg{width:auto;height:auto;fill:initial;stroke:initial;flex:initial}
/* Export for payroll (06/11/2026): pay-group ticks, empty state, folded column list */
.xopts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:12px 0 4px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:#fafbff;font-size:12px}
.xopts .xl{font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.xopts label{display:inline-flex;align-items:center;gap:5px;margin:0;font-weight:600;white-space:nowrap}.xopts input{width:auto;margin:0}
.xbtns{margin-top:10px}
.xempty{padding:14px 16px;border:1px dashed var(--line);border-radius:12px;font-size:13px;color:var(--ink2)}.xempty .btnrow{margin-top:10px}
details.xcols{background:#fff;border:1px solid var(--line);border-radius:14px;margin:0 0 16px}
details.xcols>summary{cursor:pointer;padding:11px 16px;font-weight:700;font-size:13px;color:var(--p2d)}
details.xcols .xgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;padding:4px 18px 12px;font-size:12px;color:var(--ink2)}
details.xcols .xgrid>div{min-width:0}details.xcols h4{margin:8px 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink)}details.xcols p{margin:4px 0}
@media (max-width:760px){details.xcols .xgrid{grid-template-columns:1fr}}
/* toolbox talk video (talkvideo.py, 07/11/2026) */
.talktext .tvideo{margin:0 0 14px}.talktext .tvbox{position:relative;width:100%;max-width:720px;aspect-ratio:16/9;background:#0f172a;border-radius:12px;overflow:hidden}
.talktext .tvbox iframe,.talktext .tvbox video{position:absolute;inset:0;width:100%;height:100%;border:0}
.talktext .tvcap{font-size:12px;color:var(--muted,#64748b);margin:6px 0 0}.talktext .tvcap b{color:#0f172a;font-weight:700}.talktext .tvcap span{margin-left:6px}
.talktext .tvlink{margin:0}

/* ---- Timesheets week grid, option C (07/11/2026, Daniel chose it): one box per day, paid hours big, one short word under; scoped to .wkc */
table.week.wkc td.c{padding:3px 2px;border-left:0;background:transparent!important;box-shadow:none}
table.week.wkc td.c:hover{background:transparent!important}table.week.wkc td.c:hover .dbx{outline:2px solid #c7d2fe}
table.week.wkc .dbx{display:block;border-radius:9px;border:1px solid #eef0f7;background:#f8fafc;padding:5px 2px 4px;min-height:40px;text-align:center;line-height:1.2}
table.week.wkc .dbx b{display:block;font-size:14px;font-weight:800;color:#0f172a;font-variant-numeric:tabular-nums}
table.week.wkc .dbx small{display:block;font-size:10px;font-weight:700;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.week.wkc .dbx.k-ok{background:#f5f3ff;border-color:#e0e7ff}table.week.wkc .dbx.k-ok b{color:#3730a3}
table.week.wkc .dbx.k-late{background:#fef3c7;border-color:#fde68a}table.week.wkc .dbx.k-late b,table.week.wkc .dbx.k-late small{color:#b45309}
table.week.wkc .dbx.k-early{background:#ffedd5;border-color:#fed7aa}table.week.wkc .dbx.k-early b,table.week.wkc .dbx.k-early small{color:#c2410c}
table.week.wkc .dbx.k-bad{background:#ffe4e6;border-color:#fecdd3}table.week.wkc .dbx.k-bad b,table.week.wkc .dbx.k-bad small{color:#e11d48}
table.week.wkc .dbx.k-hol{background:#dcfce7;border-color:#bbf7d0}table.week.wkc .dbx.k-hol b,table.week.wkc .dbx.k-hol small{color:#15803d}
table.week.wkc .dbx.k-sick{background:#fce7f3;border-color:#fbcfe8}table.week.wkc .dbx.k-sick b,table.week.wkc .dbx.k-sick small{color:#be185d}
table.week.wkc .dbx.k-bh{background:#dbeafe;border-color:#bfdbfe}table.week.wkc .dbx.k-bh b,table.week.wkc .dbx.k-bh small{color:#1d4ed8}
table.week.wkc .dbx.k-unp{background:#f1f5f9;border-color:#e2e8f0}table.week.wkc .dbx.k-unp b{color:#475569}
table.week.wkc .dbx.k-off{background:#f3e8ff;border-color:#e9d5ff}table.week.wkc .dbx.k-off b,table.week.wkc .dbx.k-off small{color:#7e22ce}
table.week.wkc .dbx.k-in{background:#ecfdf5;border-color:#a7f3d0}table.week.wkc .dbx.k-in b,table.week.wkc .dbx.k-in small{color:#047857}
table.week.wkc .dbx.k-rest{background:transparent;border-color:transparent}table.week.wkc .dbx.k-rest b{color:#cbd5e1}
table.week.wkc .dbx.k-due{background:#fff;border-style:dashed;border-color:#e2e8f0}
table.week.wkc td.c.today .dbx{box-shadow:0 0 0 2px #c7d2fe}
table.week.wkc td.c.pre .dbx{opacity:.55}
table.week.wkc td.wkt{text-align:right;padding-right:10px;white-space:nowrap}table.week.wkc td.wkt b{display:block;font-size:14px}
table.week.wkc td.wkt small{display:block;font-size:10.5px;font-weight:700}table.week.wkc td.wkt small.o{color:#4338ca}table.week.wkc td.wkt small.l{color:#b45309}
.wkkey{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}.wkkey .dbx{display:inline-block;min-width:58px;border-radius:8px;border:1px solid #eef0f7;padding:3px 6px;text-align:center;line-height:1.15;vertical-align:middle}
.wkkey .dbx b{display:block;font-size:12px}.wkkey .dbx small{display:block;font-size:9.5px;font-weight:700}
.wkkey .k-ok{background:#f5f3ff;color:#3730a3}.wkkey .k-late{background:#fef3c7;color:#b45309}.wkkey .k-early{background:#ffedd5;color:#c2410c}.wkkey .k-bad{background:#ffe4e6;color:#e11d48}
.wkkey .k-hol{background:#dcfce7;color:#15803d}.wkkey .k-sick{background:#fce7f3;color:#be185d}.wkkey .k-bh{background:#dbeafe;color:#1d4ed8}.wkkey .k-unp{background:#f1f5f9;color:#475569}
.wkkey .kt{flex-basis:100%;color:var(--mute);font-size:12px}
@media (max-width:700px){table.week.wkc .dbx b{font-size:12px}table.week.wkc .dbx small{font-size:9px}}
table.week.wkc{table-layout:fixed;width:100%}table.week.wkc th:first-child{width:22%}table.week.wkc th:last-child{width:9%}
@media (max-width:700px){table.week.wkc th:first-child{width:92px}table.week.wkc th:last-child{width:52px}table.week.wkc td:first-child small,table.week.wkc td:first-child .av{display:none}table.week.wkc .dbx{padding:4px 0 3px;min-height:34px}table.week.wkc td.c{padding:2px 1px}}
@media (max-width:1100px){table.week.wkc th:last-child{width:11%}table.week.wkc td.wkt{padding-right:4px}table.week.wkc td.wkt b{font-size:13px}}
@media (max-width:700px){table.week.wkc th:last-child{width:60px}table.week.wkc td.wkt b{font-size:11.5px}table.week.wkc td.wkt small{font-size:9px}}

/* item QR labels: "Not for clocking" (07/11/2026, the van carries a clocking code too) */
.qlabel .qnotclock{margin:.6mm 0 0;font-size:6.5pt;font-weight:800;color:#c2410c;letter-spacing:.02em;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.qlabel.small .qnotclock{font-size:5.5pt;margin-top:.3mm}

.tline .hrs b.h.noout{color:#dc2626}   /* rule 19: no clock-out after clocking closed */
/* week grid: a missing in or out (one scan) apart from no scans at all (09/11/2026, Daniel) */
table.week.wkc .dbx.k-miss{background:#fff;border:1.5px dashed #e11d48}table.week.wkc .dbx.k-miss b,table.week.wkc .dbx.k-miss small{color:#be123c}
.wkkey .k-miss{background:#fff;color:#be123c;border:1.5px dashed #e11d48}
/* Lateness page, compact (09/11/2026) */
.lbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:0 0 14px}.lbar label{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:700;color:var(--mute)}.lbar input,.lbar select{width:auto;min-width:150px}
table.lattab td{vertical-align:middle;padding:7px 8px}table.lattab td small{display:block}
.ltimes{white-space:nowrap}.ltimes span{display:inline-block;margin-right:10px;font-size:12px;color:var(--mute)}.ltimes b{color:#0f172a}.ltimes b.lin{color:#b45309}
.lwatch{display:inline-block;margin-top:2px;font-size:10px;font-weight:800;color:#be123c;background:#ffe4e6;border-radius:6px;padding:0 5px}
.ldec{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0}.ldec select{width:auto;max-width:260px;margin:0}.ldec input{flex:1;min-width:140px;margin:0}.ldec .btn{margin:0}
.ldone{font-weight:700;color:#047857}

table.week.wkc .dbx i.dspan{display:block;font-style:normal;font-size:10px;font-weight:700;color:#334155;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.2}   /* paid from-to under the hours (09/11/2026) */
@media (max-width:700px){table.week.wkc .dbx i.dspan{font-size:8.5px}}
/* Van stock and orders (09/11/2026) */
form.vstock .vsgrp{border:1px solid var(--line2);border-radius:12px;margin:0 0 10px;background:#fff;overflow:hidden}
form.vstock .vsgrp h3{margin:0;padding:10px 12px;font-size:13.5px;font-weight:700;display:flex;gap:8px;align-items:center}
form.vstock .vsgrp h3 span{font-size:11px;font-weight:700;color:var(--muted);background:var(--bg2,#f1f5f9);border-radius:99px;padding:1px 8px}
form.vstock details.vsgrp>summary{list-style:none;cursor:pointer}form.vstock details.vsgrp>summary::-webkit-details-marker{display:none}
form.vstock details.vsgrp>summary h3:after{content:'+';margin-left:auto;color:var(--muted);font-weight:600}form.vstock details.vsgrp[open]>summary h3:after{content:'\2212'}
form.vstock .vsshort{border-color:#fcd34d;background:#fffbeb}form.vstock .vsshort h3{color:#92400e}
form.vstock .vsrow{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;padding:9px 12px;border-top:1px solid var(--line2)}
form.vstock label.vstick{display:flex;gap:10px;align-items:flex-start;margin:0;font-weight:400;cursor:pointer;min-width:0}
form.vstock label.vstick input{width:22px;height:22px;flex:0 0 22px;margin:1px 0 0;accent-color:#4f46e5}
form.vstock label.vstick b{display:block;font-size:14px;font-weight:600}form.vstock label.vstick small{display:block;font-size:12px;color:var(--muted);line-height:1.45}
form.vstock .vs-low{color:#b45309}form.vstock .vs-out{color:#dc2626}form.vstock .vs-ok{color:#047857}form.vstock .vs-ask{color:#4338ca;font-weight:600}form.vstock .vs-sent{color:#047857;font-weight:600}
form.vstock .vsq{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
form.vstock .vsq input{width:40px;height:38px;border:0;border-radius:0;text-align:center;padding:0;margin:0;font-size:15px;font-weight:600;-moz-appearance:textfield}
form.vstock .vsq input::-webkit-inner-spin-button{-webkit-appearance:none}
form.vstock .vsq button.vsb{width:30px;height:38px;border:0;background:#f5f3ff;color:#4338ca;font-size:18px;font-weight:700;margin:0;padding:0;border-radius:0;cursor:pointer}
form.vstock details.vscount{grid-column:1/-1;margin:0 0 0 32px;font-size:12.5px}form.vstock details.vscount summary{color:#4f46e5;cursor:pointer;font-weight:600;width:max-content}
form.vstock details.vscount label{margin:6px 0 0;font-size:12.5px}form.vstock details.vscount input{max-width:120px;height:36px}
form.vstock .vsother{display:grid;grid-template-columns:1fr 96px;gap:8px;padding:0 12px 10px}form.vstock .vsother input{margin:0;height:40px}
form.vstock button.vssend{width:100%;height:48px;font-size:16px;position:sticky;bottom:10px;box-shadow:0 6px 18px rgba(79,70,229,.25)}
/* the van sticker card on a vehicle's page (09/11/2026) */
.vskrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 10px}
.vsk{border:2px solid #f97316;border-radius:14px;padding:12px;background:#fff;min-width:0}.vsk.van{border-color:#4f46e5}.vsk.off{border-style:dashed;border-color:#fdba74;background:#fff7ed}
.vsk .vskt{display:block;font-size:14px;margin:0 0 8px;color:#c2410c}.vsk.van .vskt{color:#4338ca}
.vsk .vskq svg{width:120px!important;height:120px!important;display:block}
.vsk ul{margin:8px 0;padding-left:18px;font-size:12.5px;color:#334155}.vsk ul li{margin:2px 0}
.vsk .btnrow{margin:6px 0 0}
@media(max-width:700px){.vskrow{grid-template-columns:1fr}}

/* the "show password" eye in the sign-in password box (09/11/2026), the same in MehlSoft Time and Finance */
.pwbox{position:relative;display:block}.login .pwbox input{padding-right:40px}
.login .pwbox .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;margin:0!important;padding:0;border:0;border-radius:6px;background:none;box-shadow:none;color:#64748b;cursor:pointer;display:grid;place-items:center}
.login .pwbox .eye:hover{color:#4f46e5;background:#eef2ff}.pwbox .eye svg{width:18px;height:18px;display:block}.pwbox .eye .slash{display:none}.pwbox .eye.on .slash{display:block}

/* which build is running (09/11/2026, Daniel chose A + C + the Demo pill): the tiny line under the lockup, the user menu block, the pill by the company name */
.tright .ver{font-size:10px;color:#94a3b8;font-weight:600;line-height:1.2;text-align:right;white-space:nowrap}.tright .ver b{color:#64748b;font-weight:700}
.vwrap{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.upop .uver{padding:8px 12px 6px;font-size:10.5px;line-height:1.5;color:#64748b;border-top:1px solid var(--line);margin-top:4px}.upop .uver b{color:#334155}.upop .uver .pill{display:inline-block;background:#eef2ff;color:#4338ca;border-radius:6px;padding:0 5px;font-weight:700;font-size:9.5px;margin-left:4px}
.demopill{display:inline-block;background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;border-radius:999px;font-size:9.5px;font-weight:800;letter-spacing:.06em;padding:1px 7px;margin-left:6px;vertical-align:middle;text-transform:uppercase;line-height:1.4}
@media (max-width:960px){.tright .ver{display:none}}
/* worked on site (09/11/2026): the week grid's word, the edit window's box and line */
table.week.wkc .dbx.k-site small{color:#0e7490;font-weight:700}
table.week.wkc td.wkt small.s,.wkkey .dbx.k-site small{color:#0e7490;font-weight:700}
.dlg .onsiteline{margin:6px 0 0;font-size:12.5px;color:#0e7490}.dlg .onsiteline b{color:#0e7490}
.dlg .sitebox{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:10px 12px;border:1px solid #a5f3fc;background:#ecfeff;border-radius:12px}
.dlg .sitebox .sradios{display:flex;gap:14px;flex-wrap:wrap;align-items:center}.dlg .sitebox .sradios input#shrs{display:inline-block;height:32px;margin:0 4px}
.dlg .sitebox label.chk{font-weight:600;white-space:normal;align-items:flex-start}.dlg .sitebox #sjob{width:100%;max-width:100%;box-sizing:border-box}
i.tg-site{background:#ecfeff;color:#0e7490}
/* ---- Who's in board: boxes fold on their heading, long boxes show 8 then "Show N more" (09/11/2026) */
details.wzone>summary.wzh{list-style:none;cursor:pointer;user-select:none}details.wzone>summary.wzh::-webkit-details-marker{display:none}
details.wzone:not([open])>summary.wzh{border-bottom:0}
.wzh .wzr{display:flex;align-items:center;gap:8px}
.wzh .chev{width:9px;height:9px;border-right:2px solid #64748b;border-bottom:2px solid #64748b;transform:rotate(45deg);margin:-4px 4px 0 2px;transition:transform .15s}
details.wzone[open]>summary.wzh .chev{transform:rotate(-135deg);margin-top:4px}
.wppl details.wmore>summary{list-style:none;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--p2,#4f46e5);padding:6px 8px;border-radius:8px}
.wppl details.wmore>summary::-webkit-details-marker{display:none}.wppl details.wmore>summary:hover{background:var(--tint)}
.wppl details.wmore[open]>summary{display:none}.wppl details.wmore .wchip{margin-top:2px}

.login .pwbox button.eye{margin:0!important;width:28px!important;padding:0!important}   /* beats .login button's margin-top:22px!important */
form#wnform>button.wn-btn{margin-top:0}   /* What's new: the general "space above the last button of a form" rule pushed Got it 14 px below Later (10/11/2026) */
/* the From / To bar on Van use, a van's week and the charges list: every control one height, on one line (10/11/2026, Daniel: "buttons not in line and different size") */
form.cell.vrange{display:flex;flex-wrap:wrap;align-items:center;gap:8px}form.cell.vrange label{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12px;font-weight:700;color:var(--mute)}
form.cell.vrange input[type=date]{height:38px;margin:0;padding:0 10px}form.cell.vrange button.btn,form.cell.vrange a.chip{height:38px;margin:0;padding:0 14px;display:inline-flex;align-items:center;box-sizing:border-box;font-size:12.5px}
.vu-range form.vrange{align-items:center}