/* GivingHR+  app styles. One file, every module. */
:root{
  --navy:#1F2A3A; --navy2:#2A3648; --page:#F4F6F9; --card:#FFFFFF;
  --ink:#141A24; --ink2:#5C6675; --ink3:#8D96A3; --line:#E4E8EE; --line2:#CBD2DC;
  --green:#22A05B; --green2:#1B8A4D; --green-bg:#E7F6EE;
  --red:#E14D4D; --red2:#C93E3E; --red-bg:#FDECEC;
  --coral:#FF7A45; --coral2:#EE6A36; --coral-bg:#FFF0E8;
  --blue:#0077A2; --blue-bg:#E6F1FB;
  --rad:14px; --rad-s:10px;
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--page);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
.ic{vertical-align:-3px}
[hidden]{display:none!important}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
h2{font-size:17px}
.muted{color:var(--ink2)}.small{font-size:13px}
.label{font-size:12px;color:var(--ink2);margin-bottom:3px;display:flex;align-items:center;gap:5px}
.val{font-weight:600;font-size:14px}

/* ---- frame ---- */
.app{display:flex;min-height:100vh}
.side{width:220px;flex:0 0 220px;background:var(--navy);color:#fff;display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0;height:100vh}
.side-top{display:flex;align-items:center;justify-content:space-between}.side-close{display:none;background:none;border:none;color:#fff;font-size:30px;line-height:1;padding:0 10px;cursor:pointer}
.brand{display:block;padding:6px 10px 20px}
.brand img{width:100%;max-width:150px;display:block}
.side-nav{display:flex;flex-direction:column;gap:3px}
.side-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--rad-s);color:#C9D2E0;text-decoration:none;font-size:14px}
.side-nav a:hover{background:var(--navy2);color:#fff}
.side-nav a.on{background:var(--navy2);color:#fff;font-weight:600}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.orgname{font-size:12px;color:#A9B4C4;padding:0 12px}
.orgpick select{width:100%;font-family:inherit;font-size:13px;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:var(--navy2);color:#fff}
.signout{display:flex;align-items:center;gap:8px;padding:9px 12px;color:#A9B4C4;text-decoration:none;font-size:13px;border-radius:var(--rad-s)}
.signout:hover{background:var(--navy2);color:#fff}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{height:60px;display:flex;align-items:center;gap:14px;padding:0 24px;background:var(--card);border-bottom:1px solid var(--line)}
.top-title{font-size:18px;font-weight:600;flex:1}
.menu-btn{display:none;background:none;border:none;padding:6px;cursor:pointer;color:var(--ink);border-radius:50%;width:38px;height:38px;align-items:center;justify-content:center}
.top-logo{display:none}.top-logo img{height:26px;display:block}
.scrim{display:none;position:fixed;inset:0;background:rgba(20,26,36,.45);z-index:89}
.mode-hint{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;display:flex;gap:14px;align-items:center;background:#1F2A3A;color:#fff;padding:14px 18px;border-radius:14px;font-size:22px;line-height:1.35;box-shadow:0 12px 40px rgba(0,0,0,.35)}.mode-hint button{background:none;border:none;color:#fff;font-size:34px;line-height:1;cursor:pointer;padding:0 6px}
.me{display:flex;align-items:center;gap:9px;font-size:14px;text-decoration:none;color:var(--ink);padding:4px 10px 4px 4px;border-radius:999px;border:1px solid transparent;margin-left:0}.me:hover{border-color:var(--line);background:var(--page)}
.me-text{display:flex;flex-direction:column;line-height:1.15}.me-role{font-size:11px;color:var(--ink2)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--blue-bg);color:var(--blue);display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;object-fit:cover;flex:0 0 auto;overflow:hidden}
img.avatar{background:#fff}
.content{padding:22px 24px 40px;max-width:1040px;width:100%}.content.wide{max-width:1500px}
.flash{margin:14px 24px 0;padding:10px 14px;border-radius:var(--rad-s);font-size:14px;border:1px solid}
.flash.ok{background:var(--green-bg);color:var(--green2);border-color:#BFE6CF}
.flash.err{background:var(--red-bg);color:var(--red2);border-color:#F5C1C1}
.flash.upg{background:#FFF6E5;color:#7A4B00;border-color:#F3D9A4;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bottom-nav{display:none}

/* ---- cards / buttons ---- */
.card{background:var(--card);border:1px solid #EAEEF3;border-radius:var(--rad);padding:18px 20px;margin-bottom:16px;box-shadow:0 1px 2px rgba(20,26,36,.04),0 8px 24px rgba(20,26,36,.06)}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.btn{font-family:inherit;font-size:14px;font-weight:600;padding:11px 18px;border:1px solid var(--line2);border-radius:var(--rad-s);background:var(--card);color:var(--ink);cursor:pointer}
.btn:hover{background:var(--page)}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}.btn.primary:hover{background:var(--green2)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}.btn.danger:hover{background:var(--red2)}
.btn.warm{background:var(--coral);border-color:var(--coral);color:#fff}.btn.warm:hover{background:var(--coral2)}
.btn.block{width:100%;display:block}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.big[disabled]{cursor:not-allowed}
.big.in[disabled]{background:#9CC9AE;color:rgba(255,255,255,.85)}.big.in[disabled] .big-ic{background:rgba(255,255,255,.7);color:#7FB894}
.big.out[disabled]{background:rgba(255,255,255,.7);color:rgba(20,26,36,.45)}.big.out[disabled] .big-ic{background:rgba(253,236,236,.6);color:rgba(225,77,77,.5)}.big.out[disabled] .big-s{color:rgba(20,26,36,.45)}
.link{background:none;border:none;color:var(--blue);font-family:inherit;font-size:13px;cursor:pointer;padding:0}
.link.block{display:block;width:100%;text-align:center;padding:10px 0 0}
label{display:block;font-size:13px;color:var(--ink2);margin:12px 0 5px}
input,select,textarea{font-family:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--rad-s);background:var(--card);color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,119,162,.15)}

/* ---- login ---- */
body.bare{display:flex;align-items:center;justify-content:center;padding:24px}
.bare-main{width:100%;max-width:380px}.bare-main.wide{max-width:1160px;align-self:flex-start}
.login{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:28px}
.login-logo{display:block;width:200px;margin:0 auto 6px}
.login-sub{text-align:center;color:var(--ink2);font-size:13px;margin:0 0 18px}
.login .btn{margin-top:18px}

/* ---- time clock: hero ---- */
.hero{position:relative;border-radius:var(--rad);overflow:hidden;color:#fff;margin-bottom:16px;
  background:linear-gradient(160deg,#5aa9d6 0%,#3d86b8 35%,#2f6f9e 70%,#28597f 100%);min-height:340px}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(1000px 300px at 20% 110%,rgba(255,255,255,.18),transparent 60%),
             radial-gradient(700px 240px at 90% 0%,rgba(255,255,255,.14),transparent 60%);pointer-events:none}
.hero.has-photo{background:#3d86b8 url("hero.jpg") 50% 35%/cover;color:var(--ink);min-height:440px}
.hero.has-photo::before{background:none}
.hero-top{position:relative;display:flex;justify-content:flex-end;padding:16px 20px 0}
.hero-now{text-align:right}
.hero-date{font-size:13px;opacity:.95;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.has-photo .hero-date{opacity:1;text-shadow:0 0 6px rgba(255,255,255,.9),0 0 14px rgba(255,255,255,.7)}
.hero-time{font-size:26px;font-weight:700;letter-spacing:-.02em;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.has-photo .hero-time{text-shadow:0 0 6px rgba(255,255,255,.9),0 0 16px rgba(255,255,255,.7)}
.hero-body{position:relative;text-align:center;padding:10px 20px 26px}
.hero-greet{font-size:38px;font-weight:700;line-height:1.1;letter-spacing:-.02em;text-shadow:0 2px 6px rgba(0,0,0,.35)}
.has-photo .hero-greet{text-shadow:0 0 8px rgba(255,255,255,.95),0 0 20px rgba(255,255,255,.8)}
.hero-where{margin:8px 0 26px;font-size:15px;opacity:.95;display:flex;align-items:center;justify-content:center;gap:6px;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.has-photo .hero-where{opacity:1;text-shadow:0 0 6px rgba(255,255,255,.9),0 0 14px rgba(255,255,255,.7);margin-bottom:170px}
.big-actions{position:relative;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.has-photo .big-actions{display:block;height:170px}
.has-photo .big-actions .big{position:absolute;top:0;margin:0}
.has-photo .big-actions .big.in{right:calc(50% + 60px)}
.has-photo .big-actions .big.out{left:calc(50% + 100px)}
.has-photo .big-actions.one{display:flex;height:auto}
.has-photo .big-actions.one .big{position:static}
.big{width:280px;max-width:100%;padding:22px 18px;border:none;border-radius:16px;cursor:pointer;font-family:inherit;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .08s ease,filter .12s ease}
.big:not([disabled]):hover{filter:brightness(1.04)}.big:not([disabled]):active{transform:scale(.985)}
.big-ic{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.big-t{font-size:22px;font-weight:700}.big-s{font-size:13px;opacity:.9}
.big.in{background:var(--green);color:#fff}.big.in .big-ic{background:#fff;color:var(--green)}
.big.out{background:rgba(255,255,255,.92);color:var(--ink)}.big.out .big-ic{background:var(--red-bg);color:var(--red)}.big.out .big-s{color:var(--ink2);opacity:1}
.big.sheet{background:rgba(255,255,255,.92);color:var(--ink)}.big.sheet .big-ic{background:var(--blue-bg);color:var(--blue)}.big.sheet .big-s{color:var(--ink2);opacity:1}
.big.off{background:var(--green);color:#fff;text-decoration:none}.big.off .big-ic{background:#fff;color:var(--green)}
.big-actions.one .big{width:320px}

/* ---- quick actions ---- */
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px}
.q{background:var(--card);border:1px solid var(--line);border-radius:var(--rad-s);padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer}
.q:hover{border-color:var(--line2);background:#fff;box-shadow:0 4px 14px rgba(20,26,36,.08)}.q .icdot{width:40px;height:40px}
.q[disabled]{opacity:.45;cursor:not-allowed}

/* ---- status card ---- */
.status-row,.team-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.status-main{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:700}
.dot{width:14px;height:14px;border-radius:50%;display:inline-block;position:relative}
.dot.on{background:var(--green)}.dot.on::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
.dot.off{background:var(--ink3)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

/* ---- timeline ---- */
.timeline{display:flex;flex-direction:column}
.tl{display:grid;grid-template-columns:18px 130px 150px 1fr;gap:10px;align-items:start;padding:8px 0;position:relative}
.tl + .tl::before{content:"";position:absolute;left:6px;top:-14px;height:20px;border-left:2px solid var(--line)}
.tl .d{width:12px;height:12px;border-radius:50%;background:var(--ink3);margin-top:5px}
.tl .d.g{background:var(--green)}.tl .d.r{background:var(--red)}.tl .d.o{background:var(--coral)}
.tl .t{font-weight:600}.tl .m{color:var(--ink2);font-size:13px}
.empty{color:var(--ink3);font-size:13px;padding:6px 0}

/* ---- week bar (timesheet employees) ---- */
.weekbar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.wb{background:var(--page);border-radius:var(--rad-s);padding:10px 6px;text-align:center}
.wb.today{outline:2px solid var(--blue)}
.wb .n{font-size:11px;color:var(--ink2)}.wb .h{font-size:16px;font-weight:700;margin-top:2px}
.weektotal{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;font-size:14px;color:var(--ink2)}

/* ---- modals ---- */
.modal{position:fixed;inset:0;background:rgba(20,26,36,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:100}
.modal.show{display:flex}
.modal-box{background:var(--card);border-radius:18px;padding:24px;width:100%;max-width:420px;box-shadow:0 18px 60px rgba(0,0,0,.25);max-height:calc(100vh - 32px);overflow:auto}
.modal-box.wide{max-width:680px}.modal-box.mid{max-width:540px}
.modal-box.center{text-align:center}
.modal-box h2{font-size:22px;margin-bottom:4px}
.ring{width:76px;height:76px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center}
.ring.ok{background:var(--green);color:#fff}.ring.bad{background:var(--red-bg);color:var(--red)}.ring.warm{background:var(--coral-bg);color:var(--coral)}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0 4px}
.chips .chip{background:var(--page);border-radius:10px;padding:9px 14px;font-size:13px;display:flex;align-items:center;gap:6px}
.chips .chip.wide{width:100%;justify-content:space-between}.chips .chip strong{font-size:15px}
.modal-actions{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.modal-actions.row{flex-direction:row;justify-content:flex-end}
.choices{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.choice{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;cursor:pointer;background:var(--page);border:1px solid var(--line);border-radius:var(--rad-s);padding:12px 14px;font-family:inherit;font-size:15px;color:var(--ink)}
.choice:hover{border-color:var(--blue)}
.choice .cat{font-size:11px;color:var(--ink3);text-transform:uppercase;letter-spacing:.5px}

/* ---- timesheet popup ---- */
.sheet-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:8px}
.sd{background:var(--page);border-radius:var(--rad-s);padding:10px 8px;text-align:center}
.sd.today{outline:2px solid var(--blue)}
.sd .n{font-size:12px;color:var(--ink2)}.sd .dn{font-size:16px;font-weight:700;margin:2px 0 6px}
.sd input{text-align:center;padding:8px 4px;font-size:15px;font-weight:600}
.sd .ro{font-size:16px;font-weight:700;padding:8px 0}
.sd .io{font-size:11px;color:var(--ink3);margin-top:4px}
.sheet-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:14px;color:var(--ink2)}

/* ---- admin tables ---- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:600;color:var(--ink2);font-size:12px;text-transform:uppercase;letter-spacing:.4px;padding:8px;border-bottom:1px solid var(--line2)}
td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
td.num,th.num{text-align:right}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;background:var(--page);color:var(--ink2)}
.tag.ok{background:var(--green-bg);color:var(--green2)}.tag.off{background:var(--red-bg);color:var(--red2)}
.row{display:flex;gap:12px;flex-wrap:wrap}.row>div{flex:1 1 180px}
.actions{display:flex;gap:8px;justify-content:flex-end;white-space:nowrap}
/* a table cell must stay a table cell: flex on a td pushes its buttons outside the table */
td.actions{display:table-cell;text-align:right}td.actions>*{display:inline-flex;vertical-align:middle;margin-left:6px}td.actions>form{display:inline-block}td.actions>form .btn{vertical-align:middle}
/* every table scrolls inside its card on narrow screens instead of widening the page (app.js adds the wrapper) */
.tscroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}.tscroll>table{min-width:100%}
.btn.sm{padding:6px 11px;font-size:13px}
.toggle{display:flex;align-items:center;gap:10px;padding:8px 0}

/* ---- time off ---- */
.to-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.to-stats .card{margin:0;padding:14px 18px}
.big-num{font-size:26px;font-weight:700;letter-spacing:-.02em}.big-num span{font-size:13px;font-weight:500;color:var(--ink2)}
.to-tally{display:flex;align-items:center;gap:24px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.to-tally .val{font-size:18px}
.to-tally .btn{margin-left:auto}
.review{max-width:560px;margin:0 auto;padding:24px 16px}
.review-brand{display:flex;align-items:center;gap:14px;margin-bottom:16px}.review-brand img{height:36px}.review-brand span{color:var(--ink2);font-size:14px;padding-left:14px;border-left:1px solid var(--line2)}
.review h1{font-size:24px;margin-bottom:6px}.review .mark{color:var(--green)}
.dl{margin:16px 0 6px}.dl div{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.dl dt{font-size:12px;color:var(--ink2);text-transform:uppercase;letter-spacing:.4px;padding-top:2px}.dl dd{margin:0}
.big-hours{font-size:18px}
.to-table{overflow-x:auto}.to-table table{min-width:720px}
.to-list{display:flex;flex-direction:column}
.to-item{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}.to-item:last-child{border-bottom:none}
.to-when{flex:1;min-width:0}.to-when .val{font-size:15px}
.to-hours{font-weight:700;font-size:16px;white-space:nowrap}.to-hours span{font-weight:500;color:var(--ink2);font-size:13px}
a.btn{text-decoration:none;display:inline-block}

/* ---- bell ---- */
.bell-wrap{position:relative;margin-left:auto}
.bell{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.bell:hover{background:var(--page)}.bell-n{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.bell-menu{position:absolute;right:0;top:46px;width:340px;max-width:calc(100vw - 32px);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(20,26,36,.18);z-index:60;overflow:hidden}
.bell-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px}
.bell-item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:13px;line-height:1.35}.bell-item:last-child{border-bottom:none}.bell-item:hover{background:var(--page)}
.bell-item small{display:block;color:var(--ink3);font-size:11px;margin-top:2px}.bell-dot{width:8px;height:8px;border-radius:50%;background:transparent;margin-top:6px;flex:0 0 auto}.bell-item.unread .bell-dot{background:var(--blue)}.bell-item.unread{background:#F7FAFE}

/* ---- page band: the sunset runs edge to edge behind the top bar ---- */
.topband{position:relative;background:linear-gradient(135deg,var(--navy) 0%,#2E6E9E 100%);color:#fff;padding:0 24px 22px}
.topband.has-photo{background:#3d86b8 url("hero.jpg") 50% 40%/cover;color:var(--ink)}
.topband.has-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.02) 100%);pointer-events:none}
.topband .top{position:relative;background:transparent;border-bottom:none;padding:12px 0 0;height:auto}
.topband .top-title{display:none}
.topband .top-pill{margin-left:auto}.topband .bell-wrap{margin-left:auto}.topband .top{gap:10px}
.top-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);border-radius:999px;padding:9px 14px;font-size:13px;font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.14);color:var(--ink);white-space:nowrap}.top-pill .ic{color:var(--ink2)}
.topband .bell,.topband .me,.topband .menu-btn{background:rgba(255,255,255,.94);border-color:transparent;box-shadow:0 2px 10px rgba(0,0,0,.14)}
.topband .me{padding:4px 12px 4px 4px}.topband .me:hover,.topband .bell:hover{background:#fff}
.phero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;min-height:70px}
.phero-text h1{font-size:28px;letter-spacing:-.02em;text-shadow:0 0 8px rgba(255,255,255,.9),0 0 18px rgba(255,255,255,.6)}
.topband:not(.has-photo) .phero-text h1,.topband:not(.has-photo) .phero-text p{text-shadow:0 1px 3px rgba(0,0,0,.35)}
.phero-text p{margin:4px 0 0;font-size:15px;font-weight:600;text-shadow:0 0 6px rgba(255,255,255,.9),0 0 14px rgba(255,255,255,.7)}
.phero-right{position:relative;display:flex;align-items:center;gap:10px}
.topband.phero-slim{padding-bottom:14px}.topband.phero-slim .phero{padding-top:8px;min-height:0}
.hero-avatar{border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.2)}
/* colored icon dots: the little images on cards and buttons */
.icdot{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-style:normal}
.icdot .ic{vertical-align:0}
.icdot.blue{background:var(--blue-bg);color:var(--blue)}.icdot.green{background:var(--green-bg);color:var(--green2)}.icdot.coral{background:var(--coral-bg);color:var(--coral2)}
.icdot.red{background:var(--red-bg);color:var(--red2)}.icdot.purple{background:#EFE6FB;color:#6D3FC2}.icdot.grey{background:#EEF0F3;color:var(--ink2)}.icdot.amber{background:#FFF3D6;color:#7A4B00}
h2 .icdot{width:28px;height:28px;margin-right:4px}.modal-box h2 .icdot{width:30px;height:30px;vertical-align:-8px}
.photo-pick{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.photo-pick input[type=file]{font-size:13px;padding:8px}

/* One row, always. Tabs used to wrap, so a company with every module on got two rows
   of them and a phone got four, which moved the page content down by a different amount
   on every screen. The row scrolls sideways instead, so its height is the same
   everywhere and nothing below it moves. app.js scrolls the open tab into view. */
.subnav{display:flex;gap:6px;margin-bottom:6px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:4px 0 10px;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.subnav::-webkit-scrollbar{display:none}
.subnav>*{flex:0 0 auto}
.subnav.scrolls{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
.subnav.scrolls.at-end{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 100%)}
.subnav.scrolls.mid{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%)}
.subnav a{padding:8px 14px;border-radius:999px;text-decoration:none;font-size:13px;font-weight:600;color:var(--ink2);background:var(--card);border:1px solid var(--line)}.subnav a.on{background:var(--navy);color:#fff;border-color:var(--navy)}.subnav a.subnav-admin{margin-left:auto;display:inline-flex;align-items:center;gap:5px;border-style:dashed}
.subnav a.subnav-out{display:inline-flex;align-items:center;gap:4px}.subnav a.subnav-out .ic{opacity:.5}
.phero-below{position:relative;flex-basis:100%;margin-top:14px}.phero-below .subnav{margin-bottom:0}.phero-below .subnav a{box-shadow:0 2px 8px rgba(0,0,0,.12);border-color:transparent}
.phero{flex-wrap:wrap}
.topband.phero-deep{padding-bottom:58px}.overlap{position:relative;z-index:2;margin-top:-40px}

/* ---- payroll schedule ---- */
.pay-title{font-size:22px}.card-head form .link{white-space:nowrap}
.pay-freq{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0 14px}
.pay-opt{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line2);border-radius:var(--rad-s);cursor:pointer;margin:0;color:var(--ink);font-size:15px;font-weight:600;position:relative}
.pay-opt input{position:absolute;opacity:0;width:0;height:0}.pay-opt small{font-weight:400;color:var(--ink2);font-size:12px}
.pay-opt:has(input:checked){border-color:var(--blue);background:var(--blue-bg);box-shadow:0 0 0 2px rgba(0,119,162,.15)}
.pay-tips{margin:0 0 14px}.pay-tips ul{margin:4px 0 0 18px;padding:0}
.pay-panel{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:#EEF3FA;border-radius:var(--rad);padding:16px}
.pay-box{background:var(--card);border:1px solid var(--line);border-radius:var(--rad-s);padding:14px 16px}
.pay-box h3{font-size:16px;display:flex;align-items:center;gap:8px;margin-bottom:4px}
.pay-box label{margin-top:12px}.req{color:var(--red)}
.pay-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.pay-computed{padding:10px 0;font-size:15px;min-height:42px}
.pay-preview{margin-top:16px}.pay-preview table{margin-top:6px}
.pay-actions{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}.pay-links{margin-left:auto}
.pay-range{text-align:center;font-size:22px;margin:4px 0 14px}
.pay-cal tbody tr.pay-now{background:var(--blue-bg)}
.tag.blue{background:var(--blue-bg);color:var(--blue)}.tag.warm{background:#FFF6E5;color:#7A4B00}
@media print{.topband .top,.sched-rail,.sched-quick,.sched-filters,.addcell,.side,.top,.subnav,.pay-actions,.pay-freq,.pay-tips,.pay-panel,.pay-preview,.bottom-nav,.flash,.actions,.card-head form{display:none!important}.content{padding:0}.card{border:none;box-shadow:none}}

/* ---- scheduling ---- */
.sched-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sched-title{flex:1 1 260px}.sched-title h2{font-size:22px}.sched-title p{margin:4px 0 0;font-size:14px}
.sched-week{display:flex;align-items:center;gap:8px}.sched-range{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;padding:0 4px}
.sched-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.sched-filters select{width:auto;padding:8px 10px;font-size:13px}
.sched-body{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:16px;align-items:start}
.sched-gridcard{padding:0;overflow:hidden}.sched-scroll{overflow-x:auto}
.grid{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;font-size:13px;table-layout:fixed}
.grid th{background:var(--page);border-bottom:1px solid var(--line);padding:10px 8px;text-align:center;font-size:12px;text-transform:none;letter-spacing:0}
.grid th b{display:block;font-size:13px}.grid th span{color:var(--ink2)}.grid th small{display:block;color:var(--coral);font-size:11px}
.grid th.today{background:var(--blue-bg)}.grid th.closed{background:#FFF6E5}
.grid th.who,.grid td.who{text-align:left;width:var(--who-w);min-width:var(--who-w);position:sticky;left:0;background:var(--card);z-index:1;border-right:1px solid var(--line)}
.grid th.who{background:var(--page)}
.grid td{border-bottom:1px solid var(--line);padding:6px 5px;vertical-align:top;height:78px;position:relative}
.grid td.cell:hover{background:#FAFBFD}.grid td.cell.over{background:var(--blue-bg);outline:2px dashed var(--blue);outline-offset:-2px}
.grid td.pto{background:var(--green-bg)}.grid td.unavail{background:#F6F7F9}
.grid tr.openrow td{background:#FCFCFD;border-bottom:2px solid var(--line2)}
.who-row{display:flex;align-items:center;gap:8px}.who-name{font-weight:600;font-size:13px}.who .small{font-size:11px}.ot{color:var(--coral);font-weight:600}
.grid .off{color:var(--ink3);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;min-height:58px;background:#F2F4F7;border-radius:9px;text-align:center;padding:4px}
.chip{--chip:#E6F1FB;background:var(--chip);border-radius:9px;padding:8px 6px;margin-bottom:4px;cursor:grab;font-size:11px;line-height:1.25;border:1px solid rgba(20,26,36,.05);box-shadow:0 1px 2px rgba(20,26,36,.05);min-height:58px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.chip b{display:block;font-size:12px;white-space:nowrap}.chip span{color:var(--ink2);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.chip i{font-style:normal;opacity:.75}.chip em{display:block;font-style:normal;font-size:10px;color:var(--coral);margin-top:2px}
.chip.draft{border-style:dashed;border-color:var(--coral)}
.chip.openchip{background:#FFF;border:1px dashed var(--red);color:var(--red)}.chip.openchip span{color:var(--red)}
.chip.dim{opacity:.25}.chip.lift{opacity:.5}
.ovl{border-radius:9px;padding:6px 8px;font-size:12px;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;margin-bottom:4px;min-height:58px}
.ovl small{font-weight:400;color:var(--ink2);font-size:11px}.ovl.clickable{cursor:pointer}.ovl.clickable:hover{filter:brightness(.96)}
.ovl-pto{background:#D9F1E1;color:var(--green2)}.ovl-pend{background:#FFF3D6;color:#7A4B00}.ovl-un{background:#FDECEB;color:var(--red2)}.ovl-un small{color:var(--red2);opacity:.8}
.addcell{position:absolute;right:6px;bottom:6px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--ink2);font-size:16px;line-height:1;cursor:pointer;opacity:0;transition:opacity .1s}
.grid td.cell:hover .addcell{opacity:1}
.sched-quick{margin-top:16px}.sched-quick .card-head{margin-bottom:10px}
.qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}.qa-grid form{display:contents}
.qa-tile{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;box-shadow:0 1px 2px rgba(20,26,36,.04)}
.qa-tile:hover{border-color:var(--line2);box-shadow:0 4px 14px rgba(20,26,36,.08)}.qa-tile[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.qa-tile span{display:flex;flex-direction:column;min-width:0}.qa-tile small{font-weight:400;color:var(--ink2);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sched-rail .card{padding:14px 16px}.sched-rail h2{font-size:15px;display:flex;align-items:center;gap:6px}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);text-align:center}.mini-stats b{display:block;font-size:18px}.mini-stats span{font-size:11px;color:var(--ink2)}
.covrow td{background:#FBFCFE;border-bottom:2px solid var(--line2)}.covcell{padding:6px 5px}
.cov{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11px;font-weight:600;padding:5px 7px;border-radius:7px;margin-bottom:3px;background:var(--green-bg);color:var(--green2)}.cov.short{background:var(--red-bg);color:var(--red2)}
.cov span{min-width:0;white-space:normal;line-height:1.15;text-align:left}.cov small{display:block;font-weight:400;font-size:10px;opacity:.85}.cov b{font-size:12px;flex:0 0 auto}
.covrow .off{min-height:0;padding:6px 4px;font-weight:500}
.otbadge{position:absolute;top:2px;right:4px;z-index:1;font-size:9px;font-weight:700;letter-spacing:.3px;background:var(--coral);color:#fff;padding:2px 6px;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
/* shift modal: two columns, switch between a shift and time off */
.modal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.seg{display:inline-flex;background:var(--page);border-radius:999px;padding:3px;gap:2px}.seg button{border:none;background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink2);padding:7px 14px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(20,26,36,.14)}.seg.small button{padding:6px 12px;font-size:12px}.seg.small{margin-top:12px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.f2 .span2{grid-column:1/-1}
.modal-foot{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}.modal-foot .muted{flex:1;min-width:120px}.modal-foot .link{margin-right:4px}
.ring-stat{display:flex;gap:14px;align-items:center}.ring-num{width:84px;height:84px;border-radius:50%;border:6px solid var(--green);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:22px;font-weight:700;flex:0 0 auto}
.ring-num span{font-size:11px;font-weight:500;color:var(--ink2)}
.ring-legend{font-size:13px;display:flex;flex-direction:column;gap:6px}.ring-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.ring-legend b{float:right;margin-left:10px}
.rail-row{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}.rail-row:last-child{border-bottom:none}
.dot-r{width:8px;height:8px;border-radius:50%;background:var(--red);margin-top:6px;flex:0 0 auto}.dot-r.issue-amber{background:var(--coral)}
.rail-req{padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;display:flex;flex-direction:column;gap:8px}.rail-req:last-of-type{border-bottom:none}
.rail-req .actions{justify-content:flex-start}
.sched-publish{margin-top:4px}
.chip-sample{--chip:#E6F1FB;background:var(--chip);border-radius:8px;padding:4px 10px;font-size:13px;font-weight:600}
/* hub line */
.hub-sched{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--ink2);flex-wrap:wrap}.hub-sched span{flex:1}
.phero-slim{min-height:84px;padding:14px 22px}
.who-av{position:relative;display:inline-block;flex:0 0 auto}.sdot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#B9C2CE;border:2px solid #fff}.sdot.on{background:var(--green)}
.chip.openchip{background:#FDECEB;border:1px solid #F6C9C6;color:var(--red2)}.chip.openchip b{color:var(--red2);display:flex;align-items:center;justify-content:center;gap:4px;white-space:normal}.chip.openchip span{color:var(--red2);font-weight:600;white-space:normal}.chip.openchip em{color:var(--ink2);font-size:10px;white-space:normal}
.chip span i{color:var(--ink3)}
.donut{position:relative;width:96px;height:96px;flex:0 0 auto}.donut svg{display:block}.donut-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.donut-num b{font-size:20px}.donut-num span{font-size:11px;color:var(--ink2);margin-top:2px}.donut-num small{font-size:10px;color:var(--ink3)}
.budget-pill{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--green-bg);color:var(--green2)}.budget-pill.over{background:var(--red-bg);color:var(--red2)}

/* my schedule */
.qa-list{display:flex;flex-direction:column}.qa-list a,.qa-list button{display:flex;align-items:center;gap:12px;padding:12px 4px;border:none;border-bottom:1px solid var(--line);background:none;font:inherit;font-size:14px;color:var(--ink);text-decoration:none;cursor:pointer;text-align:left;width:100%}
.qa-list a:last-child,.qa-list button:last-child{border-bottom:none}.qa-list span{flex:1}.qa-list i{color:var(--ink3);font-style:normal;font-size:20px}.qa-list i.icdot{font-size:0}.qa-list .ic{color:var(--blue)}.qa-list .icdot .ic{color:inherit}
.card-head h2{display:flex;align-items:center;gap:6px}
.my{max-width:760px}
.daystrip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:12px 0}
.daystrip .day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:12px;text-decoration:none;color:var(--ink2);font-size:11px;border:1px solid transparent}
.daystrip .day b{font-size:17px;color:var(--ink)}.daystrip .day i{width:6px;height:6px;border-radius:50%;background:transparent}.daystrip .day i.has{background:var(--blue)}.daystrip .day i.pto{background:var(--green)}
.daystrip .day.today{border-color:var(--line2)}.daystrip .day.on{background:var(--blue);color:#fff}.daystrip .day.on b{color:#fff}.daystrip .day.on i.has{background:#fff}
.my-shift{--chip:#E6F1FB;background:var(--chip);border-radius:12px;padding:12px 14px;margin-top:8px;display:flex;flex-direction:column;gap:3px}
.my-shift b{font-size:16px}.my-shift span{font-size:13px;color:var(--ink2)}.my-shift .link{align-self:flex-start;margin-top:4px}
.my-shift.pto{background:#D9F1E1}
.avail-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}.avail-row .tp{flex:0 0 auto;width:154px}
@media (max-width:520px){.avail-row>.toggle{flex:0 0 100%}.avail-row .tp{flex:1 1 0;width:auto;min-width:0}}
.avail-date{margin-top:8px}

/* ---- board, matched to the mock ---- */
.ai-bar{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:14px}
.ai-label{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;white-space:nowrap}.ai-label .ic{color:var(--red)}
.ai-bar input{flex:1;border-radius:10px;padding:11px 14px;font-size:14px;min-width:120px}.ai-bar .pill.grow{flex:1 1 200px;min-width:0}.ai-bar .pill.grow select{flex:1;min-width:0;max-width:100%}.ai-bar .cv-note{flex:1 1 140px}.ai-bar .btn{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.ai-bar .btn.primary{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:11px 18px}
.sched-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;margin-bottom:14px}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer;font-family:inherit;margin:0}
.pill .ic{color:var(--ink2)}.pill:hover{border-color:var(--line2)}
.pill select{border:none;background:transparent;padding:0 2px;font-size:13px;font-weight:600;width:auto;color:var(--ink);cursor:pointer}.pill select:focus{box-shadow:none}
.sched-week{gap:6px;padding:4px 6px}.sched-week a{display:inline-flex;padding:5px;border-radius:8px;color:var(--ink2)}.sched-week a:hover{background:var(--page);color:var(--ink)}.sched-week b{font-weight:600;padding:0 2px}
.view-opts{margin-left:auto;position:relative}
.menu{position:absolute;right:0;top:44px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px rgba(20,26,36,.16);min-width:240px;z-index:40;padding:6px;display:none;text-align:left}.menu.show{display:block}.menu form{display:contents}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:none;background:none;font:inherit;font-size:13px;color:var(--ink);text-decoration:none;border-radius:8px;cursor:pointer;text-align:left;white-space:nowrap}.menu a:hover,.menu button:hover{background:var(--page)}.menu button[disabled]{opacity:.45;cursor:not-allowed}.menu .ic{color:var(--ink2)}
.grid th{padding:10px 6px}.grid th b{font-size:13px}.grid th span{font-size:12px}
:root{--who-w:162px}
.who-select{display:flex;align-items:center;gap:4px;margin:0;color:var(--ink);font-weight:600}.who-select select{border:none;background:transparent;padding:0;font-size:13px;font-weight:600;width:auto;max-width:150px;color:var(--ink);cursor:pointer;appearance:none;-webkit-appearance:none}.who-select select:focus{box-shadow:none}.who-select .ic{color:var(--ink2)}
.grid td{padding:5px 3px;height:66px}
.who-row{gap:8px}.who-name{font-size:13px}.who .small{font-size:11px}
.chip{padding:8px 3px;min-height:54px;border:1px solid transparent;box-shadow:none;border-radius:8px;margin-bottom:4px;gap:2px}
.chip b{font-size:10px;letter-spacing:-.03em;overflow:hidden;text-overflow:ellipsis}.chip span{font-size:10.5px;margin-top:0}.chip em{display:none}
.chip.draft{border:1px dashed var(--coral)}
.chip.otrisk{background:#FFE7D1}.chip .otw{display:flex;align-items:center;justify-content:center;gap:4px;color:#C2410C;font-size:11px;font-weight:700;font-style:normal;margin-bottom:1px}.chip.otrisk span{color:#9A3412}
.grid .off{min-height:54px;font-size:12px;color:var(--ink3);background:#F1F3F6;border-radius:8px}.grid .off.dim{opacity:.55}
.ovl{min-height:54px;border-radius:8px;padding:6px 4px;gap:1px}.ovl b{font-size:12px}.ovl small{font-size:10px}
.ovl-pto{background:#D3F3DC;color:#15803D}.ovl-pto small{color:#15803D;opacity:.8}.ovl-pend{background:#FFF3D6;color:#7A4B00}
.ovl-un{background:#FFE1E1;color:#DC2626}.ovl-un small{color:#DC2626;opacity:.8}
.chip.openchip{background:#FFE3E3;border:none;color:#DC2626}.chip.openchip b,.chip.openchip span,.chip.openchip em{color:#DC2626}.chip.openchip em{opacity:.85}
.sched-quick{padding:12px 16px 14px;margin-top:14px}.qa-head{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;margin-bottom:10px}.qa-head .ic{color:var(--blue)}
.qa-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.qa-row form{display:contents}
.qa-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;font-family:inherit;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px rgba(20,26,36,.04)}
.qa-btn .ic{color:var(--blue)}.qa-btn.purple .ic{color:#6D3FC2}.qa-btn:hover{border-color:var(--line2);box-shadow:0 4px 14px rgba(20,26,36,.08)}.qa-btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.qa-more{position:relative}.qa-more .qa-btn{padding:10px 12px}.qa-more .menu{right:auto;left:0}
.ric{display:inline-flex;align-items:center;color:var(--blue)}.ric.coral{color:var(--coral2)}.ric.purple{color:#6D3FC2}.ric.red{color:var(--red)}.ric.green{color:var(--green2)}.ric.grey{color:var(--ink3)}
.sched-rail .card-head{margin-bottom:10px}
.grid-legend{display:flex;gap:14px;flex-wrap:wrap;padding:8px 12px;font-size:11px;color:var(--ink2);border-top:1px solid var(--line)}.grid-legend i{display:inline-block;width:22px;height:12px;border-radius:4px;vertical-align:-2px;margin-right:5px}
.donut-num b{font-size:14px;white-space:nowrap}.donut-num small{margin-top:3px}
.ov-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);flex-wrap:wrap}.ov-foot .label{margin-bottom:2px}.ov-big{font-size:20px}.ov-foot .budget-pill{margin-top:0}
.rail-row b{font-size:13px}.rail-row .muted{font-size:12px}
.needed{background:#FDECEC;color:#DC2626;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap;align-self:center}
.pto-req{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap}.pto-req>div{flex:1;min-width:110px}.pto-req:last-child{border-bottom:none}.pto-req .actions{margin-left:auto}.pto-req .btn.sm{padding:6px 10px;font-size:12px}
.sched-publish .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}

/* ---- phone ---- */
@media (max-width:1000px){
  .side{display:flex;position:fixed;top:0;left:0;right:0;bottom:auto;height:auto;max-height:100vh;overflow:auto;width:auto;z-index:90;transform:translateY(-102%);transition:transform .22s ease;padding:12px 14px 18px;border-radius:0 0 18px 18px;box-shadow:none}
  .side.open{transform:none;box-shadow:0 16px 40px rgba(20,26,36,.3)}
  .side-top{padding-bottom:6px}.side-close{display:block}.brand{padding:4px 6px 8px}.brand img{max-width:130px}
  .side-nav a{padding:13px 12px;font-size:15px}.side-foot{padding-top:10px}
  body.nav-open .scrim{display:block}
  .menu-btn{display:inline-flex}.top-logo{display:block}
  .topband .menu-btn{background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(0,0,0,.14)}.topband .top-logo{background:rgba(255,255,255,.94);border-radius:999px;padding:5px 12px;box-shadow:0 2px 10px rgba(0,0,0,.14)}.topband .top-logo img{height:22px}
  .top{padding:0 16px;height:56px;gap:10px}
  .top-title{display:none}
  .top-title{font-size:16px}
  .me-name{display:none}
  .content{padding:14px 14px 90px}
  .flash{margin:12px 14px 0}
  .hero{min-height:0}
  .hero-greet{font-size:28px}
  .has-photo .hero-where{margin-bottom:28px}
  .hero.has-photo{min-height:0;background-position:50% 40%}
  .hero-time{font-size:22px}
  .big-actions{flex-direction:column;align-items:stretch;gap:10px}
  .big{width:100%;flex-direction:row;justify-content:flex-start;gap:14px;padding:16px 18px;text-align:left}
  .big-ic{width:46px;height:46px;margin:0}
  .big-t{font-size:18px}.big-s{display:none}
  .big-actions.one .big{width:100%}
  .has-photo .big-actions{display:flex;height:auto}
  .has-photo .big-actions .big{position:static}
  .quick{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .topband{padding:0 14px 16px}.topband .top{padding:8px 0 0;height:auto}.phero{padding-top:10px;min-height:0}.phero-text h1{font-size:22px}.phero-text p{font-size:13px}.me-text{display:none}
  .f2{grid-template-columns:1fr}.modal-top{flex-direction:column;align-items:flex-start}.ai-bar{flex-wrap:wrap}.ai-bar .btn.primary{width:100%;justify-content:center}.qa-row .qa-btn{flex:1 1 45%;justify-content:center}.view-opts{margin-left:0}.top-pill{display:none}
  .sched-body{grid-template-columns:minmax(0,1fr)}.sched-main,.sched-gridcard{min-width:0}.grid td{min-width:104px}:root{--who-w:140px}.addcell{opacity:1}
  .pay-freq{grid-template-columns:1fr 1fr}.pay-panel{grid-template-columns:1fr}.pay-pair{grid-template-columns:1fr}
  .to-stats{grid-template-columns:1fr 1fr}.to-stats .card:last-child{grid-column:1/-1}
  .to-tally .btn{margin-left:0;width:100%}
  .tl{grid-template-columns:18px 1fr;row-gap:2px}
  .tl .m{grid-column:2}
  .weekbar,.sheet-grid{grid-template-columns:repeat(4,1fr)}
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:50}
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--ink2);text-decoration:none;padding:6px 2px;border-radius:8px}
  .bottom-nav a.on{color:var(--blue);font-weight:600}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* employee form as steps */
.wiz-rail{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.wiz-tab{border:1px solid var(--line);background:var(--page);color:var(--ink2);font-family:inherit;font-size:13px;font-weight:600;padding:7px 12px 7px 7px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.wiz-tab .wiz-n{width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink2)}
.wiz-tab.on{background:var(--navy,#1F2A3A);border-color:var(--navy,#1F2A3A);color:#fff}.wiz-tab.on .wiz-n{background:#fff;color:var(--navy,#1F2A3A);border-color:#fff}
.wiz-tab.done{background:var(--green-bg);border-color:#BFE6CF;color:var(--green2)}.wiz-tab.done .wiz-n{background:var(--green);color:#fff;border-color:var(--green)}
.wiz-h{font-size:16px;margin:0 0 10px}
.wstep[hidden]{display:none}
.wiz-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.wiz-review{display:flex;flex-direction:column;gap:6px}
.wiz-rv{display:flex;gap:14px;align-items:baseline;text-align:left;width:100%;border:1px solid var(--line);background:#fff;border-radius:var(--rad-s);padding:10px 14px;font-family:inherit;font-size:14px;color:var(--ink);cursor:pointer;line-height:1.4}
.wiz-rv:hover{background:var(--page)}.wiz-rv-k{flex:0 0 120px;font-weight:700;color:var(--ink2);font-size:13px}
@media (max-width:1000px){html,body{overflow-x:hidden;max-width:100vw}.main,.content{min-width:0;max-width:100vw}.card{min-width:0}}
@media (max-width:1000px){.wiz-rv{flex-direction:column;gap:2px}.wiz-rv-k{flex:none}.wiz-foot .actions{width:100%;justify-content:space-between}}

/* review popups (time off, swaps, punches) */
.modal-top .x{border:none;background:var(--page);width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1;color:var(--ink2);cursor:pointer}
.rv-who{display:flex;align-items:center;gap:12px;margin:10px 0 14px}
.rv-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;padding:12px 14px;background:var(--page);border-radius:var(--rad-s)}
.rv-grid>div{display:flex;flex-direction:column;gap:2px}.rv-k{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink3)}
.rv-line{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:10px 12px;border-radius:var(--rad-s);background:var(--green-bg);color:var(--green2);font-size:13px}
.rv-line>div{display:flex;flex-direction:column;gap:2px}.rv-line .rv-k{color:inherit;opacity:.75}
.rv-line.warn{background:#FFF3D6;color:#7A4B00}.rv-line.warn .muted{color:#7A4B00;opacity:.8}
.rv-note{margin-top:12px;font-size:14px}.rv-note .rv-k{display:block;margin-bottom:4px}
.rv-swap{display:flex;align-items:center;justify-content:center;gap:18px;margin:12px 0}.rv-swap .who-card{display:flex;align-items:center;gap:10px;font-size:14px}.rv-swap .arrow{color:var(--ink3)}
.rv-checks{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:13px}.rv-checks div{display:flex;gap:8px;align-items:center}.rv-checks .ok{color:var(--green2)}.rv-checks .bad{color:var(--red2)}.rv-checks .warn{color:#7A4B00}

/* dashboard (morning brief) */
.brief-time{text-align:right;color:#fff;line-height:1.2}.brief-time small{display:block;font-size:13px;opacity:.9}.brief-time b{font-size:24px}
.brief-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat{display:flex;gap:12px;align-items:center;padding:14px 16px;text-decoration:none;color:inherit;border:1px solid transparent}
.stat:hover{border-color:var(--line2)}.stat .n{font-size:26px;font-weight:700;line-height:1}.stat .t{font-weight:600;font-size:14px}.stat .s{font-size:12px;color:var(--ink2)}
.stat .ric{width:44px;height:44px;border-radius:50%;justify-content:center;background:var(--blue-bg)}.stat .ric.red{background:var(--red-bg)}.stat .ric.green{background:var(--green-bg)}.stat .ric.coral{background:var(--coral-bg)}.stat .ric.purple{background:#EFE6FB}.stat.attn .n{color:var(--red2)}
.brief-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:4px}
.mini{background:#fff;border:1px solid var(--line);border-radius:var(--rad-s);padding:12px 14px;min-width:0}.mini h3{font-size:14px;margin:0 0 4px}.mini .sub{font-size:12px;color:var(--ink2);margin-bottom:8px}
.mini .foot{margin-top:10px;font-size:13px}
.count-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}.count-row:last-of-type{border-bottom:none}
.count-row .big{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex:0 0 auto}
.count-row .big.green{background:var(--green-bg);color:var(--green2)}.count-row .big.amber{background:#FFF3D6;color:#7A4B00}.count-row .big.blue{background:var(--blue-bg);color:var(--blue)}.count-row .big.red{background:var(--red-bg);color:var(--red2)}.count-row .big.grey{background:var(--page);color:var(--ink2)}.count-row .big.coral{background:var(--coral-bg);color:var(--coral2)}
.count-row b{display:block;font-size:14px}.count-row small{color:var(--ink2);font-size:12px}
.check-list{display:flex;flex-direction:column;gap:6px;font-size:13px;margin-top:8px}.check-list div{display:flex;justify-content:space-between;gap:8px;align-items:center}.check-list .lab{display:flex;gap:6px;align-items:center}
.check-list .ok{color:var(--green2)}.check-list .bad{color:var(--red2)}.check-list .val{font-size:12px;color:var(--ink2);white-space:nowrap}.check-list .val.bad{color:var(--red2);font-weight:600}
.shift-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}.shift-row:last-child{border-bottom:none}
.shift-row .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}.shift-row b{display:block;font-size:13px}.shift-row small{color:var(--ink2);font-size:12px;display:block}.shift-row .btn{margin-left:auto}
.brief-row{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.people-row{display:flex;gap:14px;flex-wrap:wrap}
.person{display:flex;flex-direction:column;align-items:center;text-align:center;width:96px;font-size:12px;position:relative;text-decoration:none;color:var(--ink)}.person:hover b{text-decoration:underline}.person .avatar{width:48px;height:48px;font-size:18px;margin-bottom:6px}
.person b{font-size:12px;line-height:1.2}.person small{color:var(--ink2);font-size:11px;line-height:1.3}
.person .st{position:absolute;top:34px;left:calc(50% + 12px);width:12px;height:12px;border-radius:50%;border:2px solid #fff}.st.on{background:var(--green)}.st.brk{background:#F2B33D}.st.off{background:#C5CDD6}.st.late{background:var(--red)}
.person.more .avatar{background:var(--page);color:var(--ink2)}
.qa-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.qa-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:12px;background:var(--page);font-size:12px;font-weight:600;text-decoration:none;color:var(--ink);text-align:center;border:1px solid transparent}
.qa-tile:hover{border-color:var(--line2);background:#fff}.qa-tile .ric{width:34px;height:34px}
.brief-empty{display:flex;gap:12px;align-items:center;padding:14px 16px;background:var(--green-bg);color:var(--green2);border-radius:var(--rad-s);font-weight:600}
.brief-stats.n1,.brief-cols.n1{grid-template-columns:minmax(0,1fr)}.brief-stats.n2,.brief-cols.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.brief-stats.n3,.brief-cols.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.brief-stats,.brief-cols,.brief-stats.n3,.brief-cols.n3{grid-template-columns:repeat(2,minmax(0,1fr))}.brief-stats.n1,.brief-cols.n1{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1000px){.brief-stats,.brief-stats.n3{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:12px}.stat .n{font-size:22px}.brief-cols,.brief-cols.n2,.brief-cols.n3{grid-template-columns:1fr}.brief-row{grid-template-columns:1fr}.brief-time{display:none}.rv-grid{grid-template-columns:1fr}}

/* exception inbox */
.pill.on{background:var(--navy);color:#fff;border-color:var(--navy)}.pill.on .tag{background:rgba(255,255,255,.18);color:#fff}
.exc-row{display:flex;align-items:center;gap:12px;padding:12px 6px;border-bottom:1px solid var(--line);transition:opacity .22s,height .22s,padding .22s;overflow:hidden}
.exc-row:last-child{border-bottom:none}.exc-row.gone{opacity:0;height:0!important;padding:0 6px;border-bottom-width:0}
.exc-pick{width:16px;height:16px;flex:0 0 auto;margin:0}.exc-pick-space{width:16px;flex:0 0 auto}
.exc-main{flex:1 1 auto;min-width:0}.exc-name{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.exc-name b{font-size:14px}
.exc-issue{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:3px}.exc-issue .tag{display:inline-flex;align-items:center;gap:4px}
.exc-times{flex:0 0 150px;text-align:right;display:inline-flex;align-items:center;justify-content:flex-end;gap:4px}
.exc-row .actions{flex:0 0 auto}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;transition:all .25s;z-index:200;margin:0;box-shadow:0 8px 24px rgba(20,26,36,.18)}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:1000px){.exc-row{flex-wrap:wrap}.exc-times{flex-basis:100%;text-align:left;justify-content:flex-start;padding-left:68px}.exc-row .actions{flex-basis:100%;padding-left:68px}.toast{bottom:84px;width:calc(100% - 32px)}}
.pay-row{grid-template-columns:minmax(260px,290px) minmax(0,1fr)}.pay-row .card{min-width:0}
.to-table table.pay-table{min-width:560px;width:100%}.pay-table td,.pay-table th{padding:8px 8px}.pay-table td.ot{color:var(--coral2);font-weight:600}.pay-table tfoot td{border-top:2px solid var(--line2)}.pay-table td.act{white-space:nowrap;text-align:right}
@media (max-width:1100px){.pay-row{grid-template-columns:1fr}}

/* open shift marketplace */
.mk-filters{gap:10px}.mk-filters .pill{padding:6px 12px}.pill-lab{display:flex;flex-direction:column;font-size:11px;color:var(--ink3);line-height:1.1}.mk-filters .pill select{padding:0}
.mk-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;margin-top:16px}
.mk-item{display:flex;gap:12px;align-items:center;padding:12px 10px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;cursor:pointer;background:#fff}
.mk-item:hover{border-color:var(--line2)}.mk-item.on{border-color:var(--green);background:var(--green-bg);box-shadow:inset 3px 0 0 var(--green)}
.mk-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;border:1px solid rgba(0,0,0,.12)}.mk-main{flex:1 1 auto;min-width:0;font-size:13px}.mk-main b{font-size:14px;display:block}
.mk-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.mk-badges:empty{display:none}
.mk-side{display:flex;align-items:center;gap:8px;flex:0 0 auto}.mk-chev{color:var(--ink3);display:inline-flex}
.mk-panel{position:sticky;top:16px}.mk-photo{height:150px;border-radius:12px;background:url(hero.jpg) center/cover;margin:-6px 0 14px}
.mk-title{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.mk-title h2{margin:0}.mk-hours{font-size:18px;color:var(--green2)}
.mk-facts{display:flex;flex-direction:column;gap:8px;margin:12px 0 14px;font-size:14px}.mk-facts div{display:flex;gap:10px;align-items:center;color:var(--ink)}.mk-facts svg{color:var(--ink3);flex:0 0 auto}
.mk-h{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3);margin:0 0 6px}
.mk-checks{display:flex;flex-direction:column;gap:6px;font-size:13px;margin-bottom:16px}.mk-checks div{display:flex;gap:8px;align-items:center}.mk-checks .ok{color:var(--green2)}.mk-checks .warn{color:#7A4B00}.mk-checks .bad{color:var(--red2)}
.mk-cta{margin-top:auto}
@media (max-width:900px){.mk-body{grid-template-columns:1fr}.mk-panel{position:static}}
@media (max-width:1000px){.mk-filters{flex-wrap:wrap}.mk-filters .pill{flex:1 1 45%}.mk-filters .btn{width:100%;justify-content:center}}
.hub-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:16px}
.hub-chev{color:var(--ink3);display:inline-flex}

/* GivingHR+ staff: which company am I in */
.orgpick.super{margin:4px 0 10px;padding:10px 10px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(242,179,61,.45);border-radius:12px}
.orgpick.super label{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#F2B33D;margin:0 0 6px;font-weight:700}
.orgpick.super select{border-color:rgba(242,179,61,.5)}
/* GivingHR+ overview */
.ov-row{cursor:pointer}.ov-row:hover td{background:var(--page)}.ov-table td{vertical-align:top}.mod-chips{display:flex;gap:4px;flex-wrap:wrap;max-width:220px}.mod-chips .tag{font-size:11px;padding:2px 7px}
.to-table table.ov-table{min-width:760px}.ov-table td.num{white-space:nowrap}
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:8px}.bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:11px;color:var(--ink2);position:relative}
.bar i{display:block;width:100%;max-width:34px;background:var(--green);border-radius:6px 6px 2px 2px;min-height:2px}.bar b{position:absolute;top:0;font-size:12px;color:var(--ink)}.bar small{margin-top:6px}
@media (max-width:1100px){.brief-stats[style]{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:1000px){.brief-stats[style]{grid-template-columns:1fr 1fr!important}}

/* tables: action cells stay cells (a flex td renders outside the table), and on phones every table scrolls inside its card */
td.actions{display:table-cell;text-align:right;white-space:nowrap;vertical-align:middle}
td.actions>*{display:inline-block;vertical-align:middle;margin-left:6px}td.actions>*:first-child{margin-left:0}td.actions form{display:inline-block}
.card{min-width:0;max-width:100%}
@media (max-width:1000px){
  html,body{overflow-x:hidden}
  table:not(.grid){display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  table:not(.grid)>thead,table:not(.grid)>tbody,table:not(.grid)>tfoot{display:table;width:100%;min-width:max-content}
  td.actions>*{margin-left:4px}
}

/* notices */
.notice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-bottom:16px}
.notice-card{display:flex;gap:16px;align-items:flex-start;margin:0}.notice-card h2{font-size:16px;margin:0 0 4px}
.notice-thumb{width:84px;height:108px;border-radius:10px;background:linear-gradient(160deg,#EEF4FB,#DCE8F5);color:var(--blue);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:700;flex:0 0 auto;border:1px solid var(--line)}
.notice-thumb.small{width:40px;height:50px;font-size:0;gap:0;border-radius:8px}
.notice-body{flex:1;min-width:0}
.notice-row{border-bottom:1px solid var(--line);padding:10px 0}.notice-row:last-of-type{border-bottom:none}.notice-row summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none}.notice-row summary::-webkit-details-marker{display:none}
@media (max-width:1000px){.notice-grid{grid-template-columns:1fr}}
/* report a concern */
.steps{display:flex;flex-direction:column;gap:12px;margin-top:12px}.steps>div{display:flex;gap:12px;align-items:flex-start}
.stepn{width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto}
.rf-section{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}.rf-section h3{font-size:15px;margin:0 0 4px}.rf-section .lead{color:var(--ink2);font-size:13px;margin:0 0 10px}
.rf-choice{display:flex;gap:8px;flex-wrap:wrap}.rf-choice label{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;cursor:pointer;background:#fff}.rf-choice input{width:auto;margin:0}.rf-choice label:has(input:checked){border-color:var(--navy);background:var(--navy);color:#fff}
.code-box{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0}.code-box>div{flex:1 1 200px;background:var(--page);border-radius:12px;padding:14px 16px}.code-box .rv-k{display:block;margin-bottom:4px}.code-box b{font-size:24px;letter-spacing:.08em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.thread{display:flex;flex-direction:column;gap:10px}.msg{max-width:85%;padding:10px 14px;border-radius:14px;background:var(--page);font-size:14px}.msg.mine{align-self:flex-end;background:var(--green-bg)}.msg small{display:block;color:var(--ink2);font-size:11px;margin-top:4px}
.case-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 18px;font-size:14px}.case-dl>div{display:flex;flex-direction:column;gap:2px}.case-dl .rv-k{font-size:11px}
.timeline-ev{display:flex;gap:10px;padding:6px 0;font-size:13px;border-bottom:1px solid var(--line)}.timeline-ev:last-child{border-bottom:none}.timeline-ev small{color:var(--ink2);white-space:nowrap;flex:0 0 130px}
.note{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;font-size:14px}.note .tag{margin-right:6px}
.case-row{display:flex;gap:12px;align-items:center;padding:12px 6px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}.case-row:hover{background:var(--page)}.case-row:last-child{border-bottom:none}.case-row .n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:13px;flex:0 0 150px}.case-row .m{flex:1;min-width:0}
@media (max-width:1000px){.case-row{flex-wrap:wrap}.case-row .n{flex-basis:100%}}
/* reports */
.rep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.rep-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;background:#fff}.rep-card:hover{border-color:var(--line2);background:var(--page)}.rep-card b{font-size:15px}.rep-go{font-size:12px;color:var(--blue);font-weight:600;display:inline-flex;align-items:center;gap:3px;margin-top:auto}
.to-table table.rep-table{min-width:0}.rep-table td,.rep-table th{white-space:nowrap}.rep-table td.wrap{white-space:normal;min-width:180px}

/* employee import */
.btn-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.tag.warn{background:var(--amber-bg,#fff4d6);color:var(--amber2,#8a5a00)}.pill.warnp{border-color:#e6b84c;background:#fff8e6}
.imp-table td,.imp-table th{white-space:nowrap;padding:8px 8px}.imp-table tr.imp-error td{background:#fff8f6}.imp-table tr.imp-why td{background:#fff8f6;border-top:none;padding-top:0;color:var(--red2);font-size:13px;white-space:normal}.imp-table tr.imp-why td div{display:flex;gap:6px;align-items:center;padding:2px 0}
.imp-guide td{vertical-align:top}.imp-guide td:nth-child(3){white-space:normal;min-width:220px}

/* dashboard: time off calendar for companies without a clock */
.out-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}@media (max-width:1100px){.out-days{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:1000px){.out-days{grid-template-columns:repeat(2,minmax(0,1fr))}}.out-day{border:1px solid var(--line);border-radius:10px;padding:6px;min-height:64px;background:#fff;min-width:0}.out-day.wkend{background:var(--page)}.out-day.today{border-color:var(--coral);box-shadow:0 0 0 2px var(--coral-bg)}.od-date{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}.od-date small{color:var(--ink3);font-size:11px;text-transform:uppercase;letter-spacing:.04em}.od-date b{font-size:15px}.out-day.today .od-date small{color:var(--coral2)}
.od-people{display:flex;flex-direction:column;gap:4px}.od-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:inherit;text-decoration:none;padding:2px 6px 2px 2px;border-radius:999px;background:var(--coral-bg);max-width:100%}.od-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.od-chip .avatar{width:18px;height:18px;font-size:8px;flex:0 0 auto}
/* date fields: type or pick (assets/dates.js) */
.dp{position:relative;display:block}.dp.dp-inline{display:inline-block;vertical-align:middle}
.dp .dp-text{width:100%;padding-right:34px}.dp.dp-inline .dp-text{width:132px}
.dp .dp-native{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;padding:0;margin:0;border:0;min-width:0}
.dp .dp-native.dp-open{pointer-events:auto}
.dp .dp-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--ink2);padding:5px;border-radius:6px;cursor:pointer;display:flex;align-items:center;line-height:0}
.dp .dp-btn:hover{background:var(--page);color:var(--blue)}.dp .dp-text.dp-bad{border-color:var(--red)!important;background:#fff8f8}
.rep-sep{margin:26px 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)}
.role-row{border-top:1px solid var(--line)}.role-row>summary{display:flex;align-items:center;gap:10px;padding:10px 0;cursor:pointer;list-style:none}.role-row>summary::-webkit-details-marker{display:none}
.role-who{display:flex;flex-direction:column;min-width:0;flex:0 1 240px}.role-cov{flex:1 1 auto;font-size:13px;min-width:0}.role-edit{padding:4px 0 14px 40px}
.role-checks{display:flex;flex-wrap:wrap;gap:6px 14px}.role-checks .chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;margin:0}.role-checks .chk input{width:auto}
.role-add{margin-top:12px}.role-add>summary{list-style:none;display:inline-flex;gap:6px;align-items:center}.role-add>summary::-webkit-details-marker{display:none}.role-gp{background:var(--page);border-radius:10px;padding:10px 12px;margin-bottom:10px}
@media (max-width:1000px){.role-row>summary{flex-wrap:wrap}.role-cov{flex-basis:100%;padding-left:40px}.role-edit{padding-left:0}}

/* phones: tables marked "stack" become one card per row */
@media (max-width:640px){
  .content table.stack,.content table.stack>tbody,.content table.stack tr,.content table.stack td{display:block;width:100%;min-width:0}
  .content table.stack>thead{display:none}
  .content table.stack tr{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 10px;background:#fff}
  .content table.stack td{border:0;padding:4px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:right;white-space:normal}
  .content table.stack td::before{content:attr(data-label);color:var(--ink3);font-size:12px;font-weight:600;text-align:left;flex:0 0 auto}
  .content table.stack td[data-label=""]::before{content:none}
  .content table.stack td:first-child{display:block;text-align:left;font-weight:700;font-size:15px;padding-top:0}
  .content table.stack td:first-child::before{content:none}
  .content table.stack td.actions{justify-content:flex-end;padding-top:8px}.content table.stack td.actions::before{content:none}
  .content table.stack td.num{text-align:right}
  .tscroll:has(> table.stack){overflow:visible}
}
/* kudos */
.kd-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}@media (max-width:1000px){.kd-grid{grid-template-columns:1fr}}
.kd-values{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.kd-val{margin:0;cursor:pointer}.kd-val input{position:absolute;opacity:0;width:0;height:0}.kd-val span{display:inline-block;padding:7px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:600;background:#fff}.kd-val input:checked+span{background:var(--green-bg);border-color:var(--green);color:var(--green2)}.kd-val input:focus-visible+span{outline:2px solid var(--blue)}
.kd-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}.kd-item:first-of-type{border-top:0}.kd-body{flex:1;min-width:0}.kd-msg{margin:4px 0;line-height:1.45}
.tag.green-soft{background:var(--green-bg);color:var(--green2)}
.kd-ms{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}.kd-ms:first-of-type{border-top:0}.kd-ms>div{flex:1;min-width:0}.kd-ms.today b{color:var(--coral2)}
.ov-cost{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}.ov-cost .ov-big{color:var(--navy)}
.hub-party{background:linear-gradient(120deg,#fff6ef,#fff);border-color:#ffd9c4}
.cel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}.cel{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:12px}.cel small{display:block;color:var(--ink3);font-size:12px}
.chooser{max-width:620px}.chooser-q{margin:10px 0}.chooser-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}.chooser-list a,.chooser-own{display:flex;align-items:center;gap:10px;padding:12px 14px;text-decoration:none;color:inherit;border-top:1px solid var(--line)}.chooser-list a:first-child{border-top:0}.chooser-list a b,.chooser-own span{flex:1}.chooser-list a:hover,.chooser-own:hover{background:var(--page)}.chooser-own{border:1px solid var(--green);border-radius:12px;margin:12px 0 4px;background:var(--green-bg)}.chooser-own small{display:block;color:var(--ink3);font-size:12px}
.subnav a.subnav-back{border-style:dashed;color:var(--ink2)}
.rel-list{margin:0;padding-left:20px;line-height:1.6}.rel-list li{margin:4px 0}

/* ---------- HR ---------- */
.seg a.segl{text-decoration:none;font-size:12px;font-weight:600;color:var(--ink2);padding:6px 12px;border-radius:999px}.seg a.segl.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(20,26,36,.14)}
details.hr-start>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;list-style:none;flex-wrap:wrap}details.hr-start>summary::-webkit-details-marker{display:none}details.hr-start>summary h2{display:flex;align-items:center;gap:6px}details.hr-start[open]>summary{margin-bottom:6px}
details.hr-start>summary::after{content:'+';font-size:22px;line-height:1;color:var(--ink3);margin-left:auto;transition:transform .15s}details.hr-start[open]>summary::after{transform:rotate(45deg)}
.hr-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:var(--rad-s);padding:8px}
.hr-pick label{display:flex;gap:8px;align-items:flex-start;margin:0;padding:6px 8px;border-radius:8px;cursor:pointer;color:var(--ink)}.hr-pick label:hover{background:var(--page)}.hr-pick input{width:auto;margin-top:3px}.hr-pick span{display:flex;flex-direction:column;min-width:0}.hr-pick small{color:var(--ink3);font-size:11px}
.hr-table tr.click{cursor:pointer}.hr-table tr.click:hover td{background:var(--page)}.hr-table tr.dim,.hr-table tr.off td{opacity:.6}.hr-table .who-row{text-decoration:none;color:inherit}
.hr-doc{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}.hr-doc:last-child{border-bottom:none}.hr-doc .m{flex:1;min-width:0}.hr-doc .txt{white-space:pre-wrap;font-size:14px;margin:6px 0}
.hr-file{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;text-decoration:none;margin:4px 10px 4px 0}
.hr-ben-mini{padding:10px 0;border-bottom:1px solid var(--line)}.hr-ben-mini:last-child{border-bottom:none}
.hr-links{display:flex;flex-direction:column;gap:2px}.hr-links a{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px}.hr-links a:hover{background:var(--page)}.hr-links .ic{color:var(--blue)}
.hr-line{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0;border-bottom:1px dashed var(--line)}.hr-line:last-child{border-bottom:none}.hr-line>span:first-child{color:var(--ink2)}
.hr-names{display:flex;flex-wrap:wrap;gap:6px}.hr-names span{background:var(--coral-bg);color:#9A3412;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600}
.hr-steps{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:0;counter-reset:s}
.hr-steps li{flex:1;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink3);position:relative;padding-right:10px}
.hr-steps li:not(:last-child)::after{content:'';flex:1;height:2px;background:var(--line);margin-left:4px}
.hr-steps li i{flex:0 0 26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:12px;background:var(--page);border:1px solid var(--line2);color:var(--ink2)}
.hr-steps li.done{color:var(--green2)}.hr-steps li.done i{background:var(--green);border-color:var(--green);color:#fff}.hr-steps li.done::after{background:var(--green)}
.hr-steps li.now{color:var(--ink);font-weight:600}.hr-steps li.now i{background:var(--navy);border-color:var(--navy);color:#fff}
.hr-steps li span{white-space:nowrap}
.hr-intro{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--blue-bg);border-color:transparent;font-size:14px}.hr-intro>.ic{color:var(--blue)}.hr-intro>span{flex:1 1 260px}
.hr-sec h2{margin-bottom:6px}
.hr-q{padding:14px 0;border-top:1px solid var(--line)}.hr-sec h2+.hr-q{border-top:none;padding-top:6px}
.hr-prompt{font-weight:600;font-size:15px;margin-bottom:10px}.hr-prompt small{display:block;font-weight:400;color:var(--ink2);font-size:13px;margin-top:3px}
.hr-q textarea{margin-top:8px}
.hr-scale{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.hr-scale label{margin:0;cursor:pointer;color:var(--ink)}.hr-scale input{position:absolute;opacity:0;pointer-events:none}
.hr-scale span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:54px;border:1px solid var(--line2);border-radius:10px;padding:6px 4px;text-align:center;background:#fff;transition:background .12s,border-color .12s}
.hr-scale span b{font-size:17px;line-height:1.1}.hr-scale span small{font-size:11px;color:var(--ink2);line-height:1.2}
.hr-scale label:hover span{border-color:var(--ink3)}
.hr-scale input:focus-visible+span{box-shadow:0 0 0 3px rgba(0,119,162,.25)}
.hr-scale input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}.hr-scale input:checked+span small{color:rgba(255,255,255,.8)}
.hr-scale label.na span b{font-size:14px}
.hr-said{display:flex;gap:12px;align-items:flex-start;background:var(--page);border-radius:10px;padding:10px 12px;margin-top:8px}.hr-said .who{flex:0 0 110px;font-size:12px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.03em;padding-top:3px;overflow:hidden;text-overflow:ellipsis}
.hr-said>div{flex:1;min-width:0}.hr-said .txt{white-space:pre-wrap;font-size:14px;margin-top:4px}.hr-said.mgr{background:#F1F4FA}
.hr-rate{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;padding:3px 10px;border-radius:999px;background:#fff;border:1px solid var(--line)}.hr-rate b{font-size:14px}
.hr-rate.r1{color:var(--red2);border-color:#F6C9C6}.hr-rate.r2{color:#B45309;border-color:#F6DDB8}.hr-rate.r3{color:var(--ink)}.hr-rate.r4{color:var(--green2);border-color:#BFE5CF}.hr-rate.r5{color:#fff;background:var(--green);border-color:var(--green)}
.hr-rate.na,.hr-rate.none{color:var(--ink3)}.hr-rate.agree{color:var(--green2);background:var(--green-bg);border-color:transparent}.hr-rate.dis{color:#9A3412;background:var(--coral-bg);border-color:transparent}
.hr-mgr{margin-top:10px}.hr-mgr .hr-dis{display:none}.hr-mgr.dis .hr-dis{display:block}
.hr-agree{display:flex;gap:8px;flex-wrap:wrap}.hr-agree label{margin:0;cursor:pointer}.hr-agree input{position:absolute;opacity:0;pointer-events:none}
.hr-agree span{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--line2);border-radius:999px;font-weight:600;font-size:14px;color:var(--ink);background:#fff}
.hr-agree input:checked+span{background:var(--green);border-color:var(--green);color:#fff}.hr-agree label:last-child input:checked+span{background:var(--coral2);border-color:var(--coral2)}
.hr-agree input:focus-visible+span{box-shadow:0 0 0 3px rgba(0,119,162,.25)}
.hr-mgr.dis textarea{border-color:var(--coral)}
.hr-send{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;position:sticky;bottom:12px;z-index:5;box-shadow:0 6px 24px rgba(20,26,36,.12)}.hr-send>span{flex:1 1 280px}
.hr-sign{border:2px solid var(--green)}
.hr-cycles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hr-cycles.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.hr-cycle{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border:1px solid var(--line2);border-radius:var(--rad-s);cursor:pointer;color:var(--ink);background:#fff}
.hr-cycle:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset;background:#FAFBFD}
.hr-cycle input{width:auto;margin-top:3px}.hr-cycle>span{display:flex;flex-direction:column;gap:2px;min-width:0}.hr-cycle small{color:var(--ink2);font-size:13px}
.hr-md{display:flex;gap:6px;align-items:center;margin-top:8px;font-size:13px;color:var(--ink2);flex-wrap:wrap}.hr-md select{width:auto;padding:6px 8px;font-size:14px}
.hr-tpl{border-top:1px solid var(--line);padding:10px 0}.hr-tpl>summary{cursor:pointer;display:flex;gap:10px;align-items:center;padding:4px 0}
.hr-qlist{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.hr-qrow{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:10px;border:1px solid var(--line);border-radius:var(--rad-s);padding:10px;background:#fff}.hr-qrow.gone{opacity:.45}.hr-qrow.gone textarea{text-decoration:line-through}
.hr-qmain{display:flex;flex-direction:column;gap:6px}.hr-qmain .sec{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink2);padding:6px 10px}.hr-qmain .hint{font-size:13px;padding:7px 10px}
.hr-qside{display:flex;flex-direction:column;gap:8px}.hr-qside select{font-size:14px;padding:8px}
.hr-mv{display:flex;gap:6px;align-items:center}.hr-rm{margin:0 0 0 auto;display:inline-flex;align-items:center;gap:4px;cursor:pointer;color:var(--ink3)}.hr-rm input{width:auto}
.hr-log{display:flex;flex-direction:column}
.hr-ev{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}.hr-ev:last-child{border-bottom:none}.hr-ev .m{flex:1;min-width:0}.hr-ev .txt{white-space:pre-wrap;font-size:14px;margin:6px 0}
.hr-ev.st{padding:8px 0}.hr-ev.st .m{font-size:13px;color:var(--ink2)}
.hr-kind label{margin:0;cursor:pointer}.hr-kind input{position:absolute;opacity:0;pointer-events:none}.hr-kind span{display:inline-block;font-size:13px;font-weight:600;color:var(--ink2);padding:7px 14px;border-radius:999px}.hr-kind input:checked+span{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(20,26,36,.14)}
.rep-card.dim{opacity:.6}.hr-ben{gap:4px}.hr-ben .hr-line{width:100%}
.hr-pol{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.hr-pol:last-child{border-bottom:none}.hr-pol .m{flex:1;min-width:0}
.hr-pol-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.hr-ack{display:flex;gap:8px;align-items:center}.hr-ack label{margin:0;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink);white-space:nowrap}.hr-ack input{width:auto}
.hr-upload{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.hr-upload input[name=title]{flex:1 1 220px}.hr-upload input[type=file]{flex:1 1 220px;font-size:13px}
.hr-score{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.hr-score .m{flex:1 1 300px;min-width:0}
.hr-ring{--p:0;width:84px;height:84px;border-radius:50%;flex:0 0 84px;background:conic-gradient(var(--green) calc(var(--p)*1%),var(--line) 0);display:flex;align-items:center;justify-content:center;position:relative}
.hr-ring::before{content:'';position:absolute;inset:9px;background:#fff;border-radius:50%}.hr-ring b{position:relative;font-size:19px}
.hr-state{flex:0 0 auto}.hr-state select{width:auto;padding:7px 8px;font-size:14px}
.hr-ci{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}.card h2+.hr-ci{border-top:none}
.hr-ci-main{flex:1;min-width:0}.hr-ci-note{margin-top:8px;font-size:13px;padding:7px 10px}.hr-ci-by{margin-top:4px;min-height:1em}
.hr-ci.done .hr-ci-main>div:first-child b{color:var(--green2)}.hr-ci.na .hr-ci-main>div:first-child b{color:var(--ink3);text-decoration:line-through}
.hr-ci-side{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.hr-tri{display:inline-flex;background:var(--page);border-radius:999px;padding:3px;gap:2px}.hr-tri label{margin:0;cursor:pointer}.hr-tri input{position:absolute;opacity:0;pointer-events:none}
.hr-tri span{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--ink2);padding:6px 11px;border-radius:999px;white-space:nowrap}
.hr-tri input:checked+span{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(20,26,36,.14)}.hr-tri .done input:checked+span{background:var(--green);color:#fff}.hr-tri input:focus-visible+span{box-shadow:0 0 0 3px rgba(0,119,162,.25)}
.hr-ci-rm{margin:-6px 0 6px}
.hr-enroll select,.hr-enroll input{font-size:13px;padding:7px 8px}.hr-enroll td{vertical-align:middle}.hr-enroll input[inputmode]{width:96px}
@media (max-width:1000px){
  .hr-scale{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hr-steps{flex-direction:column;gap:6px}.hr-steps li::after{display:none}.hr-steps li span{white-space:normal}
  .hr-said{flex-direction:column;gap:4px}.hr-said .who{flex:none}
  .hr-cycles,.hr-cycles.two{grid-template-columns:1fr}
  .hr-qrow{grid-template-columns:1fr}.hr-qside{flex-direction:row;align-items:center;flex-wrap:wrap}.hr-qside select{flex:1 1 160px}
  .hr-ci{flex-direction:column;gap:8px}.hr-ci-side{align-items:flex-start;flex-direction:row;flex-wrap:wrap}
  .hr-pol{flex-wrap:wrap}.hr-pol-act{flex-basis:100%;justify-content:flex-start;padding-left:30px}
  .hr-send{position:static;box-shadow:none}
  .hr-enroll input[inputmode]{width:100%}
}
.hr-scale label,.hr-agree label,.hr-kind label,.hr-tri label{position:relative}
.hr-scale input,.hr-agree input,.hr-kind input,.hr-tri input{width:1px;height:1px;margin:0;left:0;top:0}
.brief-row.hr-2col{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
@media (max-width:1000px){.brief-row.hr-2col{grid-template-columns:1fr}}
.daypick{display:flex;gap:8px;flex-wrap:wrap}.daypick label{display:inline-flex;align-items:center;gap:6px;margin:0;padding:8px 12px;border:1px solid var(--line2);border-radius:999px;font-size:13px;color:var(--ink);cursor:pointer}.daypick label:has(input:checked){background:var(--blue-bg);border-color:var(--blue);color:var(--blue);font-weight:600}.daypick input{width:auto;margin:0}
button.cov{width:100%;border:none;font-family:inherit;cursor:pointer;text-align:left}button.cov:hover{box-shadow:0 0 0 2px rgba(27,138,77,.35) inset}button.cov.short:hover{box-shadow:0 0 0 2px rgba(201,62,62,.35) inset}
.cov-add{display:block;width:100%;border:1px dashed var(--line2);background:transparent;border-radius:7px;font-family:inherit;font-size:11px;font-weight:600;color:var(--ink3);padding:3px 0;cursor:pointer;opacity:0;transition:opacity .12s}.covcell:hover .cov-add,.cov-add:focus{opacity:1}.cov-add:hover{color:var(--blue);border-color:var(--blue)}
button.off.cov-none{width:100%;border:none;font-family:inherit;cursor:pointer}button.off.cov-none:hover{color:var(--blue)}
@media (hover:none){.cov-add{opacity:1}}
.hr-stbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.hr-stchips{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.hr-stchip{display:inline-flex;flex-direction:column;padding:8px 14px;border:1px solid var(--line2);border-radius:12px;background:#fff}.hr-stchip b{font-size:14px}.hr-stchip small{font-size:11px;color:var(--ink2)}.hr-stchip.home{border-color:var(--navy);background:#FAFBFD}.hr-stchip.look{border-style:dashed}
.hr-stlook select{width:auto;font-size:14px;padding:8px 10px}
.hr-law td,.hr-law th{font-size:13px;vertical-align:top;line-height:1.4;padding:9px 10px}.hr-law tbody th{text-align:left;color:var(--ink2);font-weight:600;background:var(--page)}.hr-lawgrid td.none{color:var(--ink3)}.hr-law a{word-break:break-all}
.hr-lawrow{padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}.hr-lawrow:last-child{border-bottom:none}.hr-lawrow b{display:block;margin-bottom:2px}
.hr-states{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:4px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:var(--rad-s);padding:8px}.hr-states label{margin:0;display:flex;gap:5px;align-items:center;font-size:13px;color:var(--ink);cursor:pointer}.hr-states input{width:auto;margin:0}
.hr-fu{display:flex;gap:8px;margin-top:8px}.hr-fu input{flex:1;font-size:14px;padding:8px 10px}
.hr-codechk{margin-top:10px}.hr-codechk summary{cursor:pointer;list-style:none;color:var(--blue);font-size:13px}.hr-codechk summary::-webkit-details-marker{display:none}
.case-row.on{background:var(--page)}
a.who-row{text-decoration:none;color:inherit}

/* ===================== v2 look: the mockups ===================== */
:root{--page:#F3F5F9;--line:#E6EAF0;--line2:#D3D9E2;--rad:16px;--rad-s:11px;--navy2:#2E3D52;--purple:#6D3FC2;--purple-bg:#EFE6FB;--amber-bg:#FFF4E0;--amber:#B86A00}
body{font-size:15px}
.card{border:1px solid #ECEFF4;border-radius:var(--rad);padding:22px 24px;box-shadow:0 1px 2px rgba(20,26,36,.03),0 6px 20px rgba(20,26,36,.05)}
.card-head{margin-bottom:14px}.card-head h2,.card>h2{font-size:18px;font-weight:700;letter-spacing:-.01em}.card-head h2 .ic{color:var(--blue)}
.card-head .link{font-weight:600;font-size:14px}
h1{letter-spacing:-.02em}
/* sidebar */
.side{width:232px;flex:0 0 232px;padding:20px 14px}
.brand{padding:4px 10px 22px}.brand img{max-width:156px}
.side-nav{gap:4px}.side-nav a{padding:11px 14px;font-size:15px;color:#D2DAE6;border-radius:12px;gap:12px}.side-nav a .ic{opacity:.9}
.side-nav a:hover{background:rgba(255,255,255,.06)}.side-nav a.on{background:var(--navy2);color:#fff}
.side-foot{gap:4px;padding-top:14px}.orgname{font-size:14px;color:#D2DAE6;padding:8px 12px 10px;display:flex;align-items:center;justify-content:space-between}
.signout{font-size:14px;color:#D2DAE6;padding:10px 12px;gap:12px}
/* top bar pills */
.top-pill{padding:10px 16px;font-size:14px;border-radius:999px;box-shadow:0 2px 12px rgba(0,0,0,.12)}.top-pill .ic{color:var(--ink)}
.top-pill::after,.me::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2);transform:rotate(45deg) translateY(-3px);margin-left:4px}
.bell{width:44px;height:44px;border-radius:14px}.topband .bell{background:rgba(255,255,255,.94)}.bell-n{top:-6px;right:-6px}
.me{padding:5px 14px 5px 5px;border-radius:999px;gap:10px}.topband .me{padding:5px 14px 5px 5px}.me-name{font-weight:600;font-size:14px}.me-role{font-size:12px}
.top{height:66px}
/* hero */
.topband{padding:0 28px 24px}.phero{padding-top:18px}
.phero-text h1{font-size:36px;font-weight:700;color:var(--navy)}
.phero-text p{font-size:17px;font-weight:600;color:#2B3647}
.phero-below .subnav a,.subnav a{padding:11px 20px;font-size:14px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.08);border:1px solid transparent;background:#fff;color:var(--ink)}
.subnav a.on{background:var(--navy);color:#fff}.subnav a:hover:not(.on){background:#F6F8FB}
.topband.phero-slim{padding-bottom:18px}.topband.phero-deep{padding-bottom:64px}
/* content */
.content{padding:24px 28px 48px;max-width:1400px}.content.wide{max-width:1600px}
/* stat tiles */
.brief-stats{gap:16px}
.stat{padding:22px 24px;gap:16px;position:relative}.stat .ric{width:58px;height:58px;flex:0 0 58px}.stat .ric .ic{width:24px;height:24px}
.stat .n{font-size:30px;font-weight:700;letter-spacing:-.02em;margin-bottom:2px}.stat .t{font-size:15px;font-weight:600;color:var(--ink)}.stat .s{font-size:13px;color:var(--ink2);margin-top:2px}
.stat::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;border-right:2px solid var(--ink2);border-top:2px solid var(--ink2);transform:translateY(-50%) rotate(45deg);opacity:.8}
.stat>div{padding-right:18px}
.stat .ric.blue{background:var(--blue-bg);color:var(--blue)}.stat .ric.amber{background:var(--amber-bg);color:var(--amber)}
.ric.amber{color:var(--amber)}.icdot.amber{background:var(--amber-bg);color:var(--amber)}
/* tables */
table{font-size:14px}thead th{font-size:13px;font-weight:600;color:var(--ink2);text-transform:none;letter-spacing:0;padding:10px 12px;background:#F7F9FC;border-bottom:1px solid var(--line)}thead th:first-child{border-radius:10px 0 0 10px}thead th:last-child{border-radius:0 10px 10px 0}
tbody td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle}tbody tr:last-child td{border-bottom:none}tbody tr:hover td{background:#FAFBFD}
/* tags and buttons */
.tag{font-size:12px;font-weight:600;padding:4px 11px}.tag.ok{background:#E3F6EA;color:#157A43}.tag.off{background:#FDE8E8;color:#B93A3A}.tag.blue{background:#E6F1FB;color:#0B5F86}.tag.warm{background:#FFF1DB;color:#9A5400}.tag.purple{background:var(--purple-bg);color:var(--purple)}.tag.amber{background:var(--amber-bg);color:var(--amber)}.tag.pink{background:#FCE7F3;color:#9D2863}
.btn{border-radius:11px;padding:11px 20px}.btn.sm{padding:8px 14px;border-radius:10px}
.btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}.btn.dark:hover{background:#2A3850}
.btn.blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.danger-soft{background:#FFF;border-color:#F3C2C2;color:var(--red2)}.btn.danger-soft:hover{background:#FDECEC}
.btn .ic{vertical-align:-3px}
input,select,textarea{border-radius:11px;border-color:#D9DEE7}
label{font-size:14px;color:var(--ink);font-weight:500}
/* case rows and hub cards */
.case-row{padding:14px 8px;border-radius:12px;border-bottom:1px solid var(--line)}.case-row .m b{font-size:15px}
.icdot{width:42px;height:42px;border-radius:12px}
/* filter pill rows (like the mockups' All / Federal / State) */
.fpills{display:flex;gap:8px;flex-wrap:wrap}.fpills a,.fpills button{font:inherit;font-size:14px;font-weight:600;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;cursor:pointer}.fpills a.on,.fpills button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.fpills.soft a,.fpills.soft button{border-color:transparent;background:var(--page)}.fpills.soft a.on,.fpills.soft button.on{background:var(--blue-bg);color:var(--blue)}
.search{position:relative}.search .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink3)}.search input{padding-left:38px}
/* list rows with an icon tile (notices, tasks) */
.lrow{display:flex;align-items:center;gap:16px;padding:16px 4px;border-bottom:1px solid var(--line)}.lrow:last-child{border-bottom:none}.lrow .m{flex:1;min-width:0}.lrow .m b{font-size:16px;display:block}.lrow .m .sub{font-size:14px;color:var(--ink2);margin-top:2px}
.ltile{width:56px;height:56px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;flex:0 0 56px;font-size:10px;font-weight:700;letter-spacing:.04em}
.ltile.red{background:#FDE8E8;color:#D33}.ltile.blue{background:#E6F1FB;color:#1B6FB0}.ltile.green{background:#E3F6EA;color:#1B8A4D}.ltile.purple{background:var(--purple-bg);color:var(--purple)}.ltile.amber{background:var(--amber-bg);color:#D97A00}.ltile.grey{background:var(--page);color:var(--ink2)}
.lmeta{font-size:13px;color:var(--ink2);line-height:1.4;min-width:150px}.lmeta b{display:block;color:var(--ink);font-weight:600}
/* quick link list */
.qlinks{display:flex;flex-direction:column}.qlinks a{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:600;font-size:15px}.qlinks a:last-child{border-bottom:none}.qlinks a .ic{color:var(--blue)}.qlinks a::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--ink3);border-top:2px solid var(--ink3);transform:rotate(45deg)}
/* count rows (categories) */
.crow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:14px}.crow.on{background:var(--blue-bg)}.crow i{width:9px;height:9px;border-radius:50%;flex:0 0 9px}.crow b{margin-left:auto;font-weight:600}
/* step bar for wizards */
.stepbar{display:flex;align-items:center;gap:0;background:#fff;border:1px solid #ECEFF4;border-radius:14px;padding:16px 22px;margin-bottom:18px;box-shadow:0 1px 2px rgba(20,26,36,.03)}
.stepbar .st{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink2);white-space:nowrap}.stepbar .st i{width:36px;height:36px;border-radius:50%;background:#E9EDF3;color:var(--ink2);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:14px}
.stepbar .st.now{color:var(--ink);font-weight:700}.stepbar .st.now i{background:var(--navy);color:#fff}.stepbar .st.done i{background:var(--navy);color:#fff}
.stepbar .gap{flex:1;height:1px;background:var(--line2);margin:0 18px;min-width:12px}
/* big choice radios (Yes / No / Not sure) */
.choice-pills{display:flex;gap:10px;flex-wrap:wrap}.choice-pills label{margin:0;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid var(--line2);border-radius:999px;cursor:pointer;font-size:15px;font-weight:500;background:#fff}.choice-pills input{width:auto;margin:0;accent-color:var(--navy)}.choice-pills label:has(input:checked){border-color:var(--navy);background:#F6F8FB;font-weight:600}
/* donut */
.donut-wrap{display:flex;align-items:center;gap:22px}.donut2{--p:0;width:130px;height:130px;border-radius:50%;background:conic-gradient(var(--seg));display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 130px}.donut2::before{content:"";position:absolute;inset:16px;background:#fff;border-radius:50%}.donut2 div{position:relative;text-align:center}.donut2 b{display:block;font-size:30px;line-height:1}.donut2 small{font-size:12px;color:var(--ink2)}
.legend{display:flex;flex-direction:column;gap:9px;font-size:14px}.legend div{display:flex;align-items:center;gap:8px}.legend i{width:9px;height:9px;border-radius:50%}.legend b{margin-left:auto;font-weight:600;color:var(--ink2)}
/* bar chart */
.bars2{display:flex;align-items:flex-end;gap:10px;height:110px;padding-top:8px}.bars2 div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;font-size:12px;color:var(--ink2)}.bars2 i{width:100%;max-width:38px;border-radius:7px 7px 3px 3px;background:#9CC9F2;display:block}.bars2 i.hi{background:#4D9FE6}.bars2 i.dim{background:#E3E8EF}
/* workflow timeline */
.wf{list-style:none;margin:0;padding:0}.wf li{position:relative;padding:0 0 18px 28px;font-size:14px}.wf li::before{content:"";position:absolute;left:6px;top:6px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--line2)}.wf li::after{content:"";position:absolute;left:11px;top:20px;bottom:-2px;width:2px;background:var(--line)}.wf li:last-child::after{display:none}
.wf li.done::before{background:var(--blue);border-color:var(--blue)}.wf li.now::before{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px #E6F1FB}.wf li.now{background:#EEF5FD;border-radius:10px;padding:10px 10px 10px 28px;margin-left:-10px;padding-left:38px}.wf li.now::before{left:16px}.wf li.now::after{left:21px}
.wf b{display:block;font-weight:600}.wf small{color:var(--ink2);font-size:13px}
@media (max-width:1000px){.side{width:280px;flex-basis:280px}.content{padding:16px 16px 90px}.topband{padding:0 16px 18px}.phero-text h1{font-size:26px}.stepbar{flex-wrap:wrap;gap:10px}.stepbar .gap{display:none}.stepbar .st{font-size:13px}.top{height:58px}.bell{width:40px;height:40px}}
.pcal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pcal-h{background:#F7F9FC;font-size:12px;font-weight:600;color:var(--ink2);padding:8px 6px;text-align:center}
.pcal-d{background:#fff;min-height:74px;padding:4px;display:flex;flex-direction:column;gap:2px;min-width:0}.pcal-d.pad{background:#FAFBFD}.pcal-d .num{font-size:12px;color:var(--ink2);padding:2px 4px}.pcal-d.today{background:#F3F8FE}.pcal-d.today .num{color:var(--blue);font-weight:700}
.pcal-ev{display:block;font-size:11px;font-weight:600;color:var(--ink);text-decoration:none;border-radius:6px;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pcal-ev small{font-weight:400;color:var(--ink2)}.pcal-ev.pend{outline:1.5px dashed rgba(20,26,36,.35);outline-offset:-1.5px}
@media (max-width:1000px){.pcal-d{min-height:52px}.pcal-ev small{display:none}}
.lrow .m{flex:1 1 220px;min-width:200px}.lrow{flex-wrap:wrap}
.subnav a.subnav-admin{display:none}
@media (max-width:1000px){.lrow .m{min-width:0;flex-basis:100%}.lmeta{min-width:0}}
/* kudos v2 */
.topband.kudos-hero{background:#dbe9f7 url("kudos-banner.png") 50% 44%/100% auto;min-height:164px}.topband.kudos-hero.phero-slim{padding-bottom:34px}.topband.kudos-hero.phero-slim .phero{padding-top:22px}.topband.kudos-hero::before{display:none}
.kd-grid{grid-template-columns:minmax(0,1fr) 400px}
.kd-party{width:110px;height:auto;margin:-6px 0 0}
.kd-values{gap:8px}.kd-val input{position:absolute;opacity:0;width:1px;height:1px}.kd-val{position:relative}
.kd-val span{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;border:1px solid var(--line2);background:#fff;font-size:14px;font-weight:600;color:var(--ink)}.kd-val span .ic{color:var(--ink2)}
.kd-val.green input:checked+span{background:#E3F6EA;border-color:#22A05B;color:#157A43}.kd-val.green input:checked+span .ic{color:#22A05B}
.kd-val.purple input:checked+span{background:var(--purple-bg);border-color:var(--purple);color:var(--purple)}.kd-val.purple input:checked+span .ic{color:var(--purple)}
.kd-val.amber input:checked+span{background:var(--amber-bg);border-color:#E0A000;color:#8A5A00}.kd-val.amber input:checked+span .ic{color:#E0A000}
.kd-val.blue input:checked+span{background:var(--blue-bg);border-color:var(--blue);color:var(--blue)}.kd-val.blue input:checked+span .ic{color:var(--blue)}
.kd-val.pink input:checked+span{background:#FCE7F3;border-color:#E05A8E;color:#9D2863}.kd-val.pink input:checked+span .ic{color:#E05A8E}
.kd-val.eom span{background:#FFF7E3;border-color:#F2D48A}.kd-val.eom span .ic{color:#E0A000}.kd-val.eom em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;background:#E0A000;color:#fff;padding:2px 7px;border-radius:999px}
.kd-item{gap:14px;padding:16px 0;border-top:1px solid var(--line)}.kd-item:first-of-type{border-top:none}
.kd-body{flex:1;min-width:0}.kd-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px}.kd-who{background:var(--blue-bg);color:var(--blue);font-weight:700;padding:3px 10px;border-radius:999px;font-size:14px}
.kd-right{display:flex;align-items:center;gap:10px}.kd-msg{margin:6px 0 8px;font-size:15px;line-height:1.5}
.kd-acts{display:flex;gap:14px;align-items:center}.kd-heart,.kd-cbtn{font:inherit;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;cursor:pointer;color:var(--ink2)}
.kd-heart .ic{color:var(--red)}.kd-heart.on{background:#FDE8E8;border-color:#F3C2C2;color:var(--red2)}.kd-heart.on .ic{fill:var(--red)}
.kd-comments{margin-top:10px;padding:10px 12px;background:var(--page);border-radius:12px;display:flex;flex-direction:column;gap:8px}.kd-c{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.kd-ms{gap:10px;padding:11px 0}.kd-ms>div{flex:1;min-width:0}.kd-ms .ric{width:28px;height:28px;border-radius:50%;justify-content:center;background:var(--page);margin-left:-18px;margin-top:22px;border:2px solid #fff;flex:0 0 28px}
.kd-when{text-align:right;font-size:12px;color:var(--ink2);line-height:1.3}.kd-when b{display:block;color:var(--ink);font-size:13px}
/* Employee of the Month card */
.kd-banner{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,#EAF3FD,#FFF);border-color:#CFE3F7}.kd-banner b{font-size:18px;line-height:1.25}.kd-banner-ic{width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 56px}
@media (max-width:1000px){.kd-grid{grid-template-columns:1fr}}
/* report a concern */
.rp-steps{display:grid;gap:18px}.rp-steps>div{display:flex;gap:16px;align-items:flex-start}.rp-steps>div>i{font-style:normal;font-weight:600;width:32px;height:32px;border-radius:50%;background:#E9EDF3;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 32px}.rp-ic{flex:0 0 30px;color:var(--ink);margin-top:2px}.rp-steps>div>.ric{width:44px;height:44px;flex:0 0 44px}.rp-steps b{display:block;font-size:15px;margin-bottom:2px}.rp-steps p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.5}
.rp-priv{display:grid;gap:12px}.rp-priv>div{display:flex;gap:12px;align-items:flex-start}.rp-priv svg{flex:0 0 26px;width:26px;height:26px;color:var(--ink);margin-top:2px}.rp-priv b{display:block;font-size:15px}.rp-priv span{font-size:13px;color:var(--ink2)}
.rp-anon{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid #D8E3F2;background:#F3F7FC;border-radius:12px;margin-bottom:18px}.rp-anon>svg{color:var(--navy);flex:0 0 26px}.rp-anon>div{flex:1}.rp-anon b{font-size:15px}
.switch{display:inline-flex;align-items:center;gap:10px;margin:0;cursor:pointer;white-space:nowrap}.switch input{position:absolute;opacity:0;width:1px;height:1px}.switch span{width:44px;height:24px;border-radius:999px;background:#CBD3DD;position:relative;transition:background .15s;flex:0 0 44px}.switch span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}.switch input:checked+span{background:var(--navy)}.switch input:checked+span::after{left:23px}.switch em{font-style:normal;font-weight:600;font-size:14px}
.rp-step label{margin-top:14px}.rp-step .row label,.rp-step .choice-pills label,.rp-step .toggle{margin-top:0}.rp-step .choice-pills{margin-top:2px}
.rp-foot{display:flex;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.rp-hr{border:0;border-top:1px solid var(--line);margin:20px 0 6px}
.rp-drop{display:flex;align-items:center;gap:14px;padding:22px;border:2px dashed #C9D2DE;border-radius:12px;background:#FAFBFD;cursor:pointer;margin:6px 0 0;font-weight:400}.rp-drop svg{color:var(--navy);flex:0 0 22px}.rp-drop.over{border-color:var(--navy);background:#EEF3FA}.rp-drop b{color:var(--navy)}
.rp-files{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:6px}.rp-files li{display:flex;align-items:center;gap:10px;font-size:14px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}.rp-files li svg{color:var(--ink3)}
.rp-next{display:grid;gap:14px;margin-top:12px}.rp-next>div{display:flex;gap:12px;align-items:flex-start}.rp-next i{font-style:normal;font-weight:700;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 28px}.rp-next b{display:block;font-size:14px}.rp-next span{font-size:13px;color:var(--ink2)}
.rp-rv{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:12px}.rp-rv-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.rp-rv-h b{font-size:16px}.rp-rv-r{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:14px}.rp-rv-r>span:first-child{color:var(--ink2)}.rp-rv-r>span:last-child{white-space:pre-wrap;overflow-wrap:anywhere}
.rp-code{display:grid;grid-template-columns:1fr 1fr;gap:14px}.rp-code>div{border:1px solid var(--line);border-radius:12px;padding:16px;background:#FAFBFD}.rp-code small{display:block;color:var(--ink2);font-size:13px;margin-bottom:6px}.rp-code .v{display:flex;align-items:center;justify-content:space-between;gap:10px}.rp-code .v b{font-size:24px;letter-spacing:1px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.rp-done{text-align:center;padding:28px 20px 8px}.rp-done .ric{width:72px;height:72px;margin:0 auto 14px}.rp-done h2{font-size:30px;margin:0 0 6px}.rp-done p{color:var(--ink2);font-size:16px;margin:0}
.rp-side{display:grid;gap:14px;align-content:start}
.rp-ctrl{display:grid;gap:10px}.rp-ctrl label{margin:0;font-size:13px;color:var(--ink2)}.rp-ctrl select,.rp-ctrl input{margin-bottom:0}
.rp-act{display:grid;gap:0;margin-top:6px}.rp-act>div{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:14px}.rp-act>div:first-child{border-top:0}.rp-act .ric{width:34px;height:34px;flex:0 0 34px}.rp-act b{display:block;font-size:14px}.rp-act .when{color:var(--ink3);font-size:12px;margin-top:2px}.rp-act .body{margin-top:6px;white-space:pre-wrap;background:#F6F8FB;padding:10px 12px;border-radius:10px}
.rp-kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 12px;font-size:14px}.rp-kv>span:nth-child(odd){color:var(--ink2)}
@media (max-width:1000px){.rp-wrap{grid-template-columns:1fr !important}.rp-rv-r{grid-template-columns:1fr;gap:2px}.rp-code{grid-template-columns:1fr}.rp-anon{flex-wrap:wrap}.rp-kv{grid-template-columns:1fr}}
a.lrow{text-decoration:none;color:inherit}a.lrow:hover{background:#FAFBFD}
.ric.fill{border-radius:50%;justify-content:center;background:var(--blue-bg)}.ric.fill.green{background:var(--green-bg)}.ric.fill.red{background:var(--red-bg)}.ric.fill.coral{background:var(--coral-bg)}.ric.fill.purple{background:#EFE6FB}.ric.fill.amber{background:var(--amber-bg)}.ric.fill.grey{background:var(--page)}
@media (max-width:1000px){.brief-row{grid-template-columns:1fr !important}}
@media (max-width:600px){.brief-stats,.brief-stats.n3,.brief-stats.n2,.brief-cols{grid-template-columns:1fr}.stat::after{display:none}}
/* v3 density: the mockups' scale */
body{font-size:14px}
.side{width:198px;flex:0 0 198px;padding:18px 12px}.brand{padding:4px 8px 18px}.brand img{max-width:130px}
.side-nav{gap:2px}.side-nav a{padding:10px 12px;font-size:14px;border-radius:10px;gap:11px}.side-nav a .ic{width:18px;height:18px}
.orgname{font-size:13px;padding:6px 10px 8px}.signout{font-size:13px;padding:8px 10px;gap:10px}
.top-pill{padding:8px 13px;font-size:13px}.top-pill .ic{width:15px;height:15px}.top-pill::after,.me::after{width:7px;height:7px}
.bell{width:36px;height:36px;border-radius:11px}.bell .ic{width:17px;height:17px}.bell-n{top:-5px;right:-5px;font-size:10px;min-width:16px;height:16px;line-height:16px}
.me{padding:4px 11px 4px 4px;gap:8px}.topband .me{padding:4px 11px 4px 4px}.me-name{font-size:13px}.me-role{font-size:11px}
.top{height:54px}.topband .top{padding:10px 0 0}
.topband{padding:0 24px 18px}.phero{padding-top:12px;min-height:0}
.phero-text h1{font-size:32px}.phero-text p{font-size:15px;font-weight:500}
.phero-below{margin-top:12px}.phero-below .subnav a,.subnav a{padding:8px 15px;font-size:13px}
.topband.phero-slim{padding-bottom:14px}.topband.phero-deep{padding-bottom:52px}.overlap{margin-top:-34px}
.content{padding:18px 24px 40px}
.card{border-radius:14px;padding:16px 18px}.card-head{margin-bottom:12px}.card-head h2,.card>h2{font-size:16px}.card-head h2 .ic,.card>h2 .ic{width:16px;height:16px}.card-head .link{font-size:13px}
.brief-stats{gap:14px}.stat{padding:17px 18px;gap:14px}.stat .ric{width:50px;height:50px;flex:0 0 50px}.stat .ric .ic{width:22px;height:22px}
.stat .n{font-size:26px}.stat .t{font-size:14px}.stat .s{font-size:12px}.stat::after{right:16px;width:8px;height:8px}
table{font-size:13px}thead th{font-size:12px;padding:8px 10px}tbody td{padding:10px 10px}
.tag{font-size:11.5px;padding:3px 9px}
.btn{border-radius:9px;padding:9px 16px;font-size:13.5px}.btn.sm{padding:6px 11px;border-radius:8px;font-size:12.5px}.btn .ic{width:14px;height:14px}
input,select,textarea{border-radius:9px;font-size:13.5px;padding:9px 12px}label{font-size:13px}
.fpills a,.fpills button{font-size:12.5px;padding:7px 13px}
.search .ic{left:11px;width:15px;height:15px}.search input{padding-left:34px}
.lrow{gap:14px;padding:12px 4px}.lrow .m b{font-size:14px}.lrow .m .sub{font-size:13px}.ltile{width:46px;height:46px;border-radius:12px;flex:0 0 46px}.lmeta{font-size:12px}
.qlinks a{padding:10px 4px;font-size:13.5px;gap:10px}.crow{padding:8px 10px;font-size:13px}
.stepbar{padding:12px 18px;margin-bottom:14px}.stepbar .st{font-size:13.5px;gap:10px}.stepbar .st i{width:30px;height:30px;font-size:12.5px}
.choice-pills label{padding:8px 14px;font-size:13.5px}
.donut2{width:110px;height:110px;flex:0 0 110px}.donut2::before{inset:13px}.donut2 b{font-size:26px}.legend{font-size:13px;gap:7px}
.bars2{height:96px}.wf li{font-size:13px}.wf small{font-size:12px}
.pcal-d{min-height:62px}
.icdot{width:36px;height:36px;border-radius:10px}
.muted.small,.small{font-size:12px}
/* kudos */
.kd-grid{grid-template-columns:minmax(0,1fr) 352px;gap:14px}.kd-party{width:88px;margin:-4px 0 0}
.kd-values{gap:7px}.kd-val span{padding:7px 13px;font-size:13px;border-color:transparent}.kd-val span .ic{width:14px;height:14px}
.kd-val.green span{background:#E3F6EA;color:#157A43}.kd-val.green span .ic{color:#22A05B}
.kd-val.purple span{background:var(--purple-bg);color:var(--purple)}.kd-val.purple span .ic{color:var(--purple)}
.kd-val.amber span{background:var(--amber-bg);color:#8A5A00}.kd-val.amber span .ic{color:#E0A000}
.kd-val.blue span{background:var(--blue-bg);color:var(--blue)}.kd-val.blue span .ic{color:var(--blue)}
.kd-val.pink span{background:#FCE7F3;color:#9D2863}.kd-val.pink span .ic{color:#E05A8E}
.kd-val input:checked+span{box-shadow:inset 0 0 0 1.5px currentColor}
.kd-val.eom span{background:#FFF3D1;color:#7A4B00}.kd-val.eom em{font-size:9px;padding:2px 6px}
.kd-item{gap:12px;padding:13px 0}.kd-top{font-size:13.5px}.kd-who{font-size:13px;padding:2px 9px}.kd-msg{font-size:13.5px;margin:4px 0 7px}
.kd-acts{gap:10px}.kd-heart,.kd-cbtn{font-size:12px;padding:4px 10px}.kd-heart .ic,.kd-cbtn .ic{width:13px;height:13px}
.kd-ms{gap:10px;padding:9px 0}.kd-ms b{font-size:13px}.kd-when b{font-size:12.5px}.kd-when span{font-size:11.5px}
.topband.kudos-hero.phero-slim{padding-bottom:22px}.topband.kudos-hero.phero-slim .phero{padding-top:12px}
@media (max-width:1000px){.side{width:280px;flex-basis:280px}}
.kd-party{width:120px;height:auto;margin:-8px -6px 0 0}
a.kd-ms{text-decoration:none;color:inherit}a.kd-ms:hover b{text-decoration:underline}.kd-ms .ric{width:22px;height:22px;margin-left:-14px;margin-top:18px;flex:0 0 22px;background:#fff;border:1.5px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.kd-all{margin-top:10px;background:var(--blue-bg);border-color:transparent;color:var(--blue);font-weight:600;border-radius:9px}.kd-all:hover{background:#D9E9F8}
.kd-banner{background:#EAF2FB;border-color:#D6E4F5}
.topband.kudos-hero.phero-slim{padding-bottom:16px}.topband.kudos-hero.phero-slim .phero{padding-top:6px}
.lrow.tight{flex-wrap:nowrap}.lrow.tight .m{min-width:0;flex:1 1 auto}.lrow.tight .lmeta{min-width:0;white-space:nowrap}
/* v3 hero: title sits right under the top bar, pills close under it, no overlap */
.topband{padding:0 24px 16px}.phero{padding-top:2px;min-height:0}.phero-text h1{font-size:28px;line-height:1.15}.phero-text p{font-size:15px;margin-top:3px}
.phero-below{margin-top:10px}.topband.phero-deep{padding-bottom:16px}.overlap{margin-top:0}.topband.phero-slim{padding-bottom:14px}
.pcal-d{min-height:46px}.pcal-h{padding:6px}
.topband.kudos-hero.phero-slim{padding-bottom:18px}.topband.kudos-hero.phero-slim .phero{padding-top:8px}
tbody td{padding:8px 10px}.who-row .avatar{width:28px;height:28px;font-size:11px}
.more-link{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;color:var(--ink2)}.more-link:hover{background:var(--page);color:var(--ink)}
.mini-bars i{width:12px;flex:0 0 12px;border-radius:4px 4px 2px 2px}
@media (max-width:1000px){.lrow.tight{flex-wrap:wrap}}
.nt-row .m{flex:1 1 0;min-width:120px}.nt-row .lmeta{white-space:normal;flex:0 0 150px}.nt-row .ltile{width:46px;height:46px;flex-basis:46px}.nt-row .m b{font-size:14px}.nt-row .m .sub{font-size:12.5px}.nt-filter .search input{padding:8px 12px 8px 34px}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13.5px;background:rgba(255,255,255,.75);border-radius:999px;padding:6px 14px;width:max-content;max-width:100%}.crumbs a{color:var(--ink2);text-decoration:none}.crumbs a:hover{text-decoration:underline}.crumbs span{color:var(--ink3)}.crumbs b{font-weight:600}
.topband.phero-flat{background:#EEF1F5 !important;color:var(--ink)}.topband.phero-flat::before{display:none}.topband.phero-flat .phero-text h1,.topband.phero-flat .phero-text p{text-shadow:none}.topband.phero-flat .phero-text p{color:var(--ink2);font-weight:400}.topband.phero-flat .bell,.topband.phero-flat .me,.topband.phero-flat .top-pill{box-shadow:0 1px 3px rgba(0,0,0,.08);background:#fff}
.rp-r3>div{flex:1 1 160px}.rp-r3>div.wide{flex:2 1 320px}
.rp-contacts{margin-top:12px;padding:10px 14px;background:#F6F8FB;border-radius:10px}.rp-contacts .toggle{padding:4px 0;font-size:13.5px}
.rf-other{margin-bottom:8px}.rf-other input{margin-bottom:0}
@media (max-width:1000px){.rp-r3{grid-template-columns:1fr}}
@media (max-width:1000px){.kd-grid{grid-template-columns:1fr}}
.topband.kudos-hero.phero-slim{padding-bottom:22px}.topband.kudos-hero.phero-slim .phero{padding-top:14px}
.bell-item.unread.pin{background:#F3F8FE}.bell-item.pin .bell-dot{background:var(--blue)}
.kd-confetti{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:60}
/* time of day sky behind the clock hero: two layers crossfade when the hour changes */
.hero.sky{background:#1d2b44;color:#fff;min-height:400px}.hero.sky .sky-bg{position:absolute;inset:0;background-position:50% 55%;background-size:cover;opacity:0;transition:opacity 4s ease-in-out}.hero.sky .sky-bg.on{opacity:1}
.hero.sky .hero-date,.hero.sky .hero-time,.hero.sky .hero-greet,.hero.sky .hero-where{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45),0 0 18px rgba(0,0,0,.35)}
.hero.sky.day .hero-date,.hero.sky.day .hero-time,.hero.sky.day .hero-greet,.hero.sky.day .hero-where{color:var(--ink);text-shadow:0 0 8px rgba(255,255,255,.95),0 0 20px rgba(255,255,255,.8)}
.hero.sky .hero-where{font-weight:600}
a.big{text-decoration:none;color:inherit}a.big .big-t{text-decoration:none}a.q{text-decoration:none;color:inherit}
/* scheduling board, mockup pass */
.cov-glance{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 18px}.cov-glance-l{display:flex;gap:12px;align-items:center;min-width:220px}.cov-glance-l b{font-size:15px}
.cov-days{display:flex;gap:8px;flex:1;justify-content:space-around}.cov-day{text-align:center;font-size:12px;color:var(--ink2);min-width:54px}.cov-day b{display:block;font-size:12.5px;color:var(--ink)}.cov-day.today b{color:var(--blue)}
.cov-bars{display:flex;gap:4px;align-items:flex-end;justify-content:center;height:36px;margin-bottom:5px}.cov-bars i{display:block;width:9px;height:100%;border-radius:3px;background:linear-gradient(to top,var(--c) var(--p,0%),var(--cbg) var(--p,0%));cursor:default}
.cov-bars i.ok{--c:#22A05B;--cbg:#D3F3DC}.cov-bars i.part{--c:#F2B33D;--cbg:#FFF0CC}.cov-bars i.short{--c:#E5484D;--cbg:#FDE1E1}.cov-bars i.none{background:#EEF1F5;width:22px;border-radius:4px}
.cov-tip{position:absolute;z-index:80;background:#1E2A3B;color:#fff;border-radius:10px;padding:8px 12px;font-size:12.5px;box-shadow:0 8px 24px rgba(0,0,0,.25);pointer-events:none;white-space:nowrap}.cov-tip b{display:block;font-size:13px}.cov-tip span{display:flex;align-items:center;gap:6px;opacity:.9}.cov-tip span i{width:7px;height:7px;border-radius:2px;background:var(--c,#999)}.cov-tip span i.ok{background:#22A05B}.cov-tip span i.part{background:#F2B33D}.cov-tip span i.short{background:#E5484D}
.cov-tip::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-top-color:#1E2A3B;border-bottom:0}
.who-search{margin:0}.who-search input{padding:7px 10px 7px 30px;font-size:12.5px;border-radius:8px}.who-search .ic{left:9px}
.who-hrs{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2);margin:2px 0}.who-hrs i{flex:1;height:5px;border-radius:3px;background:#E9EDF3;overflow:hidden;max-width:70px}.who-hrs i b{display:block;height:100%;background:#22A05B;border-radius:3px}.who-hrs.ot{color:var(--red2)}.who-hrs.ot i b{background:var(--red)}
.grid-legend .hint{margin-left:auto;color:var(--ink3)}
.cv-form{display:grid;gap:10px}.cv-form .pill{width:100%}.cv-form .cv-note{width:100%}
.sched-quick .qa-head{white-space:nowrap}
.btn.blue.sm{padding:5px 12px}
.my-sched{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.my-sched-day{background:var(--page);border-radius:12px;padding:10px 8px;min-height:90px;font-size:12px}.my-sched-day b{display:block;font-size:13px}.my-sched-day>span{color:var(--ink2)}.my-sched-day em{display:block;color:var(--ink3);font-style:normal;margin-top:10px}.my-sched-day.today{outline:2px solid var(--blue)}.my-sched-day .chip{margin-top:8px;cursor:default}@media (max-width:1000px){.my-sched{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Home: the sky fills the band from the top bar down, edge to edge */
.topband.home-sky{background:#1d2b44;color:#fff;padding:0 24px 28px;min-height:520px;overflow:hidden}.topband.home-sky::before{display:none}
.topband.home-sky .sky-bg{position:absolute !important;inset:0 !important;top:0;left:0;right:0;bottom:0;width:100%;height:100%;border-radius:0;background-position:50% 55%;background-size:cover;opacity:0;transition:opacity 4s ease-in-out;z-index:0}.topband.home-sky .sky-bg.on{opacity:1}
.topband.home-sky .top{position:relative;z-index:1}.topband.home-sky .phero{position:static;display:block;padding-top:0;min-height:0}.home-hero{position:relative;z-index:1}.topband.home-sky .phero-text{display:none}.topband.home-sky .phero-below{margin:0;flex-basis:auto}
.topband.home-sky .top-title{display:none}
.home-hero .hero-body{padding:4px 0 10px}
.topband.home-sky .hero-date,.topband.home-sky .hero-time,.topband.home-sky .hero-greet,.topband.home-sky .hero-where{color:var(--ink);text-shadow:0 0 6px rgba(255,255,255,.95),0 0 14px rgba(255,255,255,.85),0 0 28px rgba(255,255,255,.7)}
.topband.home-sky .hero-greet{font-size:40px}.topband.home-sky .hero-where{font-weight:600}
.topband.home-sky:not(.day) .hero-date,.topband.home-sky:not(.day) .hero-time,.topband.home-sky:not(.day) .hero-greet,.topband.home-sky:not(.day) .hero-where{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 18px rgba(0,0,0,.5)}
.topband.home-sky .big-actions{margin-top:22px}
@media (max-width:1000px){.topband.home-sky{min-height:0;padding:0 14px 18px}.topband.home-sky .hero-greet{font-size:28px}}
.hbars{display:flex;gap:16px;align-items:stretch;height:190px}.hbar{flex:1;display:flex;flex-direction:column;min-width:0}.hbar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}.hbar-col b{font-size:14px;color:var(--ink)}.hbar-col i{display:block;width:100%;max-width:46px;border-radius:8px 8px 4px 4px}.hbar>span{display:block;height:40px;text-align:center;font-size:12px;color:var(--ink2);line-height:1.2;margin-top:8px;overflow:hidden}
.topband.home-sky .phero-below{position:static}
/* every page band: the time-of-day sky, title on the top row */
.topband.sky-band{background:#1d2b44;color:#fff;overflow:hidden;padding:0 24px 26px;min-height:0}.topband.sky-band::before{display:none}
.topband.sky-band .sky-bg{position:absolute;inset:0;background-position:50% 55%;background-size:cover;opacity:0;transition:opacity 4s ease-in-out;z-index:0}.topband.sky-band .sky-bg.on{opacity:1}
.topband.sky-band .top{position:relative;z-index:1;height:auto;min-height:62px;align-items:center;padding-top:16px}.topband.sky-band .phero{position:static;display:block;padding:0;min-height:0}.topband.sky-band .phero-below{position:relative;z-index:1;margin-top:14px}.home-hero{position:relative;z-index:1}
.topband.home-sky .top{align-items:center}.topband.home-sky .top-title{display:none}
.topband.home-sky .hero-date,.topband.home-sky .hero-time{text-align:right}
@media (max-width:1000px){.topband.sky-band .top{flex-wrap:wrap}.topband.sky-band{padding:0 14px 18px}.topband.sky-band .phero-below{margin-top:10px}}
.hl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:4px 18px}.hl-row{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}.hl-row b{flex:0 0 150px}.hl-row span{color:var(--ink2)}
.hl-dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px;background:#22A05B;align-self:center}.hl-dot.warn{background:#F2B33D}.hl-dot.bad{background:#E5484D}

/* Employee of the Month card */
.kd-eom{position:relative;overflow:hidden;padding:15px 18px 17px;border:1px solid #F5E2B4;border-radius:16px;background:linear-gradient(118deg,#FFF3D4 0%,#FFF9E8 48%,#FFFDF6 100%)}
.kd-eom::after{content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;background-image:
 radial-gradient(circle at 10px 74px,#6FA8DC 3px,transparent 3.6px),
 radial-gradient(circle at 30px 118px,#F08C5A 2.6px,transparent 3.2px),
 radial-gradient(circle at 96px 24px,#E3B7E8 2.6px,transparent 3.2px),
 radial-gradient(circle at 14px 40px,#F4C542 2.4px,transparent 3px),
 radial-gradient(circle at 72% 14px,#6FC9B5 2.6px,transparent 3.2px),
 radial-gradient(circle at 86% 96px,#EE7C8E 2.6px,transparent 3.2px),
 radial-gradient(circle at 58% 118px,#7FB8E8 2.4px,transparent 3px)}
.kd-eom-star{position:absolute;color:#F7C84A;pointer-events:none;line-height:0}
.kd-eom-star.s1{right:-8px;top:52px;opacity:.9}
.kd-eom-star.s2{right:20px;top:104px;opacity:.75}
.kd-eom-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px}
.kd-eom-head h2{display:flex;align-items:center;gap:9px;margin:0;font-size:15.5px;white-space:nowrap;color:var(--ink)}
.kd-eom-head h2 .kd-tro{flex:0 0 auto;color:#EFA51B}
.kd-eom-mo{flex:0 0 auto;white-space:nowrap;background:#FBE6A4;color:#7E5C10;font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:999px}
.kd-eom-body{position:relative;z-index:2;display:flex;gap:15px;align-items:flex-start;margin-top:14px}
.kd-eom-av{position:relative;flex:0 0 84px;width:84px;height:84px;margin-top:2px}
.kd-eom-av .avatar{border:3px solid #fff;box-shadow:0 0 0 2px #F3C96A,0 2px 8px rgba(0,0,0,.1)}
.kd-eom-av i{position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:linear-gradient(145deg,#FFCE4F,#E8A008);color:#fff;display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 2px 5px rgba(150,98,4,.3)}
.kd-eom-who{min-width:0;flex:1 1 auto}
.kd-eom-name{display:block;font-size:17.5px;font-weight:700;line-height:1.2;color:var(--ink)}
.kd-eom-title{display:block;margin-top:2px;font-size:13px;color:var(--ink3)}
.kd-eom-msg{margin:9px 0 0;padding-right:30px;font-size:13.5px;line-height:1.45;color:var(--ink2)}
.kd-eom-from{display:block;margin-top:9px;font-size:12px;font-weight:600;color:var(--ink3)}
.kd-eom-av.empty{display:flex;align-items:center;justify-content:center}
.kd-eom-q{width:84px;height:84px;border-radius:50%;background:#fff;border:3px solid #fff;box-shadow:0 0 0 2px #F3C96A;display:flex;align-items:center;justify-content:center;color:#EBCA82}
@media (max-width:1000px){.kd-eom-msg{padding-right:0}.kd-eom-star{display:none}}

/* One band height everywhere, matched to the Kudos banner */
.topband{min-height:164px}
.topband.sky-band:not(.home-sky),.topband.kudos-hero,.topband.phero-flat{min-height:164px;display:flex;flex-direction:column;justify-content:flex-start}
.topband.sky-band:not(.home-sky) .phero-below,.topband.phero-flat .phero-below{margin-top:auto;padding-top:14px}
@media (max-width:1000px){.topband,.topband.sky-band:not(.home-sky),.topband.kudos-hero,.topband.phero-flat{min-height:128px}}

/* The bell and account menus must clear the band, not be clipped by it */
.topband.sky-band,.topband.home-sky{overflow:visible}
.topband.sky-band .sky-bg,.topband.home-sky .sky-bg{clip-path:inset(0)}
.topband{z-index:30}
.topband .top{z-index:3 !important}
.bell-menu,.top .menu{z-index:80}

/* Kudos and flat banners carry the same top row as the sky banners */
.topband.kudos-hero .top,.topband.phero-flat .top{height:auto;min-height:62px;align-items:center;padding-top:16px}
.topband.kudos-hero .phero,.topband.phero-flat .phero{position:static;display:block;padding:0;min-height:0}
.topband.kudos-hero .phero-below,.topband.phero-flat .phero-below{margin-top:14px}
@media (max-width:1000px){.topband.kudos-hero .top,.topband.phero-flat .top{min-height:0;padding-top:10px}}
.topband .hero-avatar{width:56px !important;height:56px !important;font-size:20px}

/* The company, bell and account row sits as high in the banner as it can */
.topband.sky-band .top,.topband.kudos-hero .top,.topband.phero-flat .top{padding-top:8px}
@media (max-width:1000px){.topband.sky-band .top,.topband.kudos-hero .top,.topband.phero-flat .top{padding-top:6px}}

/* Department names wrap in full instead of being cut off */
.hbars{height:auto;align-items:flex-end}
.hbar-col{flex:0 0 150px;height:150px}
.hbar>span{height:auto;min-height:40px;overflow:visible;overflow-wrap:anywhere}

/* Every banner but home runs down to the bottom of Scheduling in the sidebar */
.topband.sky-band:not(.home-sky),.topband.kudos-hero,.topband.phero-flat{min-height:212px}
.topband{min-height:212px}
.topband.kudos-hero{background-position:50% 46%}
@media (max-width:1000px){.topband,.topband.sky-band:not(.home-sky),.topband.kudos-hero,.topband.phero-flat{min-height:150px}}

/* Home tiles: tinted, and they tilt toward the cursor */
.quick{perspective:900px}
.q{position:relative;transform-style:preserve-3d;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.q:hover{box-shadow:0 10px 26px rgba(20,26,36,.14)}
.q:disabled{opacity:.5;box-shadow:none}
.q.more span{font-weight:600}
@media (prefers-reduced-motion:reduce){.q{transition:none}}

/* Home: What needs you, and the time off card with its own button */
.needs-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.needs-row:first-of-type{border-top:0}
.needs-row>div{min-width:0;flex:1}
.needs-row b{font-size:14px;display:block}
.needs-row:hover b{text-decoration:underline}
.needs-row .icdot{width:28px;height:28px}
.needs.clear{border-color:var(--line)}
.pto-nums{display:flex;gap:14px;margin:12px 0 12px;flex-wrap:wrap}
.pto-nums div{flex:1 1 72px;min-width:0;background:var(--green-bg);border-radius:10px;padding:9px 10px}
.pto-nums b{display:block;font-size:19px;line-height:1.1;color:var(--green2)}
.pto-nums b small{font-size:12px;font-weight:600;margin-left:1px}
.pto-nums span{display:block;font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-cards{grid-template-columns:repeat(auto-fit,minmax(248px,1fr));align-items:stretch}
@media (min-width:1180px){.hub-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Home: Today's activity links and the next shifts */
.act-links{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.act-links .link{display:inline-flex;align-items:center;gap:5px;font-size:13px}
.next-shifts{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.ns-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ns-head b{font-size:14px}
.ns-row{display:flex;align-items:center;gap:14px;padding:9px 12px;border-radius:10px;background:var(--page)}
.ns-row+.ns-row{margin-top:6px}
.ns-row.now{background:var(--green-bg)}
.ns-when{flex:0 0 190px;min-width:0}
.ns-when b{display:block;font-size:13.5px}
.ns-when span{font-size:12.5px;color:var(--ink2)}
.ns-what{flex:1;min-width:0;display:flex;flex-direction:column}
.ns-what b{font-size:13.5px}
@media (max-width:1000px){.ns-when{flex:0 0 auto}.ns-row{flex-wrap:wrap;gap:4px 12px}}


/* A shift whose owner has asked for cover: red, with white diagonal stripes, until a manager resolves it */
.chip.needscover{--chip:#E14D4D;border-color:#E14D4D;color:#7A1F1F;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.92) 0 9px,rgba(225,77,77,.20) 9px 18px);
  background-color:#FDECEC}
.chip.needscover b,.chip.needscover span{color:#7A1F1F}
.chip.needscover .coverflag{display:inline-flex;align-items:center;gap:4px;margin-top:3px;font-style:normal;font-weight:700;font-size:10.5px;color:#fff;background:#E14D4D;border-radius:5px;padding:2px 6px}

/* Asking for cover on your own shift */
.cv{margin-top:8px}
.cv>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--blue);list-style:none}
.cv>summary::-webkit-details-marker{display:none}
.cv>summary:hover{text-decoration:underline}
.cv-form{margin-top:10px;background:var(--page);border:1px solid var(--line);border-radius:10px;padding:12px}
.cv-form label{font-size:12.5px;margin-bottom:4px;display:block}
.cv-form input[name=reason]{margin:0 0 10px}
.cv-btns{display:flex;gap:8px;flex-wrap:wrap}
.cv.asked,.cv.done{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cv.asked form{display:inline}
.cv-tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:#fff;background:#E14D4D;border-radius:999px;padding:3px 9px}
.cv-tag.ok{background:var(--green2)}
.cover-row{align-items:flex-start}
.cover-acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.cover-acts form{display:inline}

/* ---- time picker: one clock for every time field in the app ----
   The native input stays put and keeps holding the value, so anything that reads
   or writes it carries on working. We hide the browser's own spinner, put our
   own clock button beside it, and open the face in a popover on the body so a
   modal's scrollbox cannot clip it. */
.tp{position:relative;display:flex;align-items:stretch;gap:0;width:100%}
.tp input[type="time"]{flex:1;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}
.tp input[type="time"]::-webkit-calendar-picker-indicator{display:none}
.tp input[type="time"]::-webkit-inner-spin-button,.tp input[type="time"]::-webkit-clear-button{display:none;-webkit-appearance:none}
.tp-open{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:42px;padding:0;border:1px solid var(--line2);border-left:1px solid var(--line);border-radius:0 var(--rad-s) var(--rad-s) 0;background:var(--card);color:var(--ink2);cursor:pointer}
.tp-open:hover{background:var(--page);color:var(--blue)}
.tp input[type="time"]:focus + .tp-open{border-color:var(--blue)}
.tp.on .tp-open{background:var(--blue-bg);color:var(--blue);border-color:var(--blue)}

.tpop{position:fixed;z-index:200;width:272px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 18px 60px rgba(20,26,36,.28);font-size:14px}
.tpop-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.tpop-read{display:flex;align-items:baseline;gap:1px;font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1}
.tpop-read button{font:inherit;background:none;border:0;padding:2px 4px;border-radius:7px;color:var(--ink3);cursor:pointer}
.tpop-read button.on{color:var(--ink);background:var(--blue-bg)}
.tpop-read span{color:var(--ink3)}
.tpop-ap{display:flex;flex-direction:column;gap:3px}
.tpop-ap button{font-family:inherit;font-size:12px;font-weight:700;padding:4px 9px;border:1px solid var(--line2);border-radius:7px;background:var(--card);color:var(--ink2);cursor:pointer;width:46px}
.tpop-ap button.on{background:var(--blue);border-color:var(--blue);color:#fff}

.tpop-face{position:relative;width:244px;height:244px;margin:2px auto 4px;border-radius:50%;background:var(--page);border:1px solid var(--line)}
.tpop-hand{position:absolute;left:50%;top:50%;width:2px;height:84px;background:var(--blue);transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(0deg);transition:transform .18s cubic-bezier(.3,1.4,.5,1);pointer-events:none}
.tpop-hand::after{content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--blue)}
.tpop-pin{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--blue);pointer-events:none}
.tpop-n{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border:0;border-radius:50%;background:none;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;line-height:1}
.tpop-n:hover{background:var(--blue-bg)}
.tpop-n.on{background:var(--blue);color:#fff}
.tpop-n[disabled]{color:var(--ink3);opacity:.5;cursor:default}
.tpop-n[disabled]:hover{background:none}

.tpop-foot{display:flex;align-items:center;gap:6px;margin-top:4px}
.tpop-foot .sp{flex:1}
.tpop-q{font-family:inherit;font-size:12px;font-weight:600;padding:7px 9px;border:1px solid var(--line2);border-radius:8px;background:var(--card);color:var(--ink2);cursor:pointer;width:auto}
.tpop-q:hover{background:var(--page);color:var(--ink)}
.tpop-done{font-family:inherit;font-size:13px;font-weight:700;padding:8px 16px;border:1px solid var(--green);border-radius:8px;background:var(--green);color:#fff;cursor:pointer;width:auto}
.tpop-done:hover{background:var(--green2)}

@media (max-width:520px){
  .tpop{left:0!important;right:0;top:auto!important;bottom:0;width:auto;border-radius:20px 20px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
  .tpop-face{width:min(276px,78vw);height:min(276px,78vw)}
}

/* ---- the people wall ----
   One card per person instead of a row per person. The tint comes from their id
   so the same face is the same colour every time you open the page; meaning is
   carried by the tags, not the colour. */
.pw-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.pw-find{position:relative;flex:1 1 280px;min-width:0;display:flex;align-items:center}
.pw-find .ic{position:absolute;left:12px;color:var(--ink3);pointer-events:none}
.pw-find input{padding-left:36px}

.pwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:14px}
.pc{border:1px solid var(--line);border-radius:var(--rad);padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px;transition:transform .14s ease,box-shadow .14s ease}
.pc:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(20,26,36,.10)}
.pc[data-status="terminated"]{opacity:.62}

.pc-top{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;min-width:0}
.pc-top .avatar{flex:0 0 auto;box-shadow:0 0 0 3px rgba(255,255,255,.75)}
.pc-who{min-width:0;display:flex;flex-direction:column;gap:1px}
.pc-who b{font-size:16px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-who .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-top:hover b{text-decoration:underline}

.pc-tags{display:flex;flex-wrap:wrap;gap:5px}
.pc-facts{margin:0;display:flex;flex-direction:column;gap:5px}
.pc-facts div{display:flex;gap:8px;align-items:baseline;font-size:13px;min-width:0}
.pc-facts dt{flex:0 0 84px;color:var(--ink2);font-size:12px}
.pc-facts dd{margin:0;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pc-reach{display:flex;flex-direction:column;gap:3px;margin-top:auto;padding-top:10px;border-top:1px solid rgba(20,26,36,.07)}
.pc-reach a{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2);text-decoration:none;min-width:0}
.pc-reach a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-reach a:hover{color:var(--blue)}

.pend-row{display:flex;flex-wrap:wrap;gap:8px}
.pend{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid #F3E0B4;background:#FDF2DC;border-radius:999px;text-decoration:none;color:var(--ink);font-size:13px;font-weight:600}
.pend:hover{background:#FBE9C4}

@media (max-width:560px){
  .pwall{grid-template-columns:1fr}
  .pc-facts dt{flex:0 0 76px}
}

/* a card opened out: everything on that person, by module */
.pc-top{width:100%;text-align:left;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;display:flex;align-items:center;gap:12px;min-width:0}
.pc-chev{margin-left:auto;color:var(--ink3);display:flex;transition:transform .16s ease}
.pc.open{grid-column:1/-1}
.pc.open .pc-chev{transform:rotate(90deg)}
.pc.open .pc-facts{display:none}
.pc-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;padding-top:4px}
.pm-sec{background:rgba(255,255,255,.72);border:1px solid rgba(20,26,36,.07);border-radius:var(--rad-s);padding:12px 13px;display:flex;flex-direction:column}
.pm-sec h4{margin:0 0 9px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px}
.pm-sec h4 .icdot{width:26px;height:26px}
.pm-rows{margin:0;display:flex;flex-direction:column;gap:5px}
.pm-row{display:flex;gap:8px;align-items:baseline;font-size:13px;min-width:0}
.pm-row dt{flex:0 0 46%;color:var(--ink2);font-size:12px}
.pm-row dd{margin:0;font-weight:600;min-width:0}
.pm-note{margin:8px 0 0;font-size:11.5px}
.pm-link{margin-top:auto;padding-top:9px;font-size:12.5px;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:5px}
.pm-link:hover{text-decoration:underline}
@media (max-width:560px){.pc-more{grid-template-columns:1fr}.pm-row dt{flex:0 0 44%}}

/* where someone works, on the employee form */
.locgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.locpick{border:1px solid var(--line2);border-radius:var(--rad-s);padding:9px 11px;background:var(--card);display:flex;flex-direction:column;gap:4px}
.locpick .toggle.small{font-size:12px;color:var(--ink2);padding-left:2px}
.locpick:has(input[data-loc]:checked){border-color:var(--blue);background:var(--blue-bg)}
.setupbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
/* a wall inside a narrow card: smaller cards, tighter gap */
.pwall.tight{grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:10px}
.pwall.tight .pc{padding:12px 13px 11px;gap:8px}
.pwall.tight .pc-who b{font-size:14.5px}

/* The clock sits upper left on every page, level with the bell and the account
   chip rather than hanging below them. Home has no page title, so there it is
   .solo and runs big; every other page is .sm, with the title beside it. */
.band-clock{min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.05;padding:2px 0;white-space:nowrap}
.band-clock.solo{flex:1}
.band-clock .bc-date{font-size:14px;font-weight:600;color:var(--ink);text-shadow:0 0 6px rgba(255,255,255,.95),0 0 16px rgba(255,255,255,.85)}
.band-clock .bc-time{font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--ink);text-shadow:0 0 6px rgba(255,255,255,.95),0 0 18px rgba(255,255,255,.9),0 0 30px rgba(255,255,255,.7)}
.band-clock.sm .bc-date{font-size:11.5px;font-weight:600}
.band-clock.sm .bc-time{font-size:20px}
.topband.sky-band:not(.day) .band-clock .bc-date,.topband.sky-band:not(.day) .band-clock .bc-time{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 18px rgba(0,0,0,.5)}
.topband.phero-flat .band-clock .bc-date,.topband.phero-flat .band-clock .bc-time,.topband.kudos-hero .band-clock .bc-date,.topband.kudos-hero .band-clock .bc-time{color:var(--ink);text-shadow:none}
.topband.phero-flat .band-clock .bc-date{color:var(--ink2)}
/* A page with no banner at all: plain header, so the glow has nothing to sit on. */
.band-clock.plain .bc-date,.band-clock.plain .bc-time{text-shadow:none}
.band-clock.plain .bc-date{color:var(--ink2)}
@media (max-width:760px){
  .band-clock .bc-time{font-size:21px}
  .band-clock .bc-date{font-size:11.5px}
}
@media (max-width:430px){
  .band-clock .bc-date{display:none}
  .band-clock .bc-time{font-size:19px}
}
/* a shift that repeats every week, and one that is a salaried block */
.chip.repeats .rep{position:absolute;top:4px;right:5px;color:var(--ink3);opacity:.75;line-height:0}
.chip.repeats{position:relative}
.chip.locked{cursor:default;box-shadow:inset 3px 0 0 var(--ink3)}
.repeat-ask{align-items:flex-start;gap:8px;padding:10px 12px;border:1px dashed var(--line2);border-radius:var(--rad-s);background:var(--page)}
.repeat-ask small{display:block;font-weight:400;margin-top:2px}
.repeat-on{display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:var(--rad-s);background:var(--blue-bg);color:var(--ink2)}
#m-unrepeat .modal-actions .btn{text-align:left;padding:12px 14px;line-height:1.35}
#m-unrepeat .modal-actions .btn .small{font-weight:400}
#m-unrepeat .modal-actions .btn.danger .small{color:rgba(255,255,255,.85)}
/* "fill this spot" on the coverage row */
.cov-fill{font-family:inherit;font-size:11px;font-weight:700;padding:4px 8px;border:1px solid var(--green);border-radius:999px;background:var(--green-bg);color:var(--green2);cursor:pointer;width:auto;display:inline-flex;align-items:center;gap:4px;margin:3px 3px 0 0;white-space:nowrap}
.cov-fill:hover{background:var(--green);color:#fff}

/* the repeating shifts list */
.rep-days{display:flex;flex-direction:column;gap:18px}
.rep-day h3{display:flex;align-items:center;gap:8px;font-size:14px;margin:0 0 8px;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em}
.rep-day h3 .small{text-transform:none;letter-spacing:0;background:var(--page);border-radius:999px;padding:1px 8px;font-weight:600}
.rep-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--rad-s);background:var(--card);flex-wrap:wrap}
.rep-row + .rep-row{margin-top:7px}
.rep-row.done{opacity:.55}
.rep-main{flex:1 1 220px;min-width:0}
.rep-main b{font-size:15px}
.rep-when{margin-top:2px}
.rep-tags{display:flex;gap:5px;flex-wrap:wrap}
.rep-do{display:flex;align-items:center;gap:10px;margin-left:auto}
.rep-do form{margin:0}
.chip.pick{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-weight:600}
.chip.pick input{width:auto;margin:0}
@media (max-width:620px){.rep-do{margin-left:0;width:100%}}

/* The page title and its tabs live at the foot of the band now, so the top row is
   the clock's alone. Push the whole block to the bottom and give it night colours. */
/* The title block sits a fixed distance below the clock row, not pushed to the foot
   of the band. Bottom aligning it meant a page with tabs and a page without put their
   titles 50px apart, so moving between them jumped. The photo simply runs on below. */
.topband.sky-band:not(.home-sky) .phero,.topband.kudos-hero .phero,.topband.phero-flat .phero{margin-top:0;padding-top:4px}
/* The sky photo is absolutely positioned at z-index 0, so anything static in the band paints under it. */
.phero-text{position:relative;z-index:1}
.topband.sky-band:not(.home-sky) .phero-below,.topband.phero-flat .phero-below{margin-top:12px;padding-top:0}
.topband.sky-band:not(.day) .phero-text h1{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 18px rgba(0,0,0,.6),0 0 34px rgba(0,0,0,.45)}
.topband.sky-band:not(.day) .phero-text p{color:#EDF2F8;text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 16px rgba(0,0,0,.55)}
.topband.kudos-hero .phero-text h1,.topband.kudos-hero .phero-text p{color:var(--ink)}
@media (max-width:600px){.phero-text p{display:none}}

/* The home clock buttons are the original tall cards: icon above the words, 280px
   wide, 16px corners, flat green. A block here used to squash them into pills in a
   row with a gradient on the green one. It is gone; the rules it was overriding
   were never touched and take effect again. */

/* ===== Home: the hub cards =======================================================
   Same tinted treatment as the employee cards, same skeleton in each: a head you
   can click through, a body, and a foot pinned to the bottom so a row of them
   lines up however much any one of them has to say. */
.hub-card{display:flex;flex-direction:column;gap:9px;padding:15px 16px 13px;border:1px solid var(--line);
  border-radius:var(--rad);transition:transform .14s ease,box-shadow .14s ease}
.hub-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(20,26,36,.10)}

/* Icon, then the title beside it, the chevron or count pinned to the right edge. */
.hub-head{position:relative;display:flex;align-items:center;gap:12px;min-height:36px;text-decoration:none;color:inherit;min-width:0;padding-right:28px}
.hub-head b{font-size:19px;letter-spacing:-.01em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.hub-head .icdot{flex:0 0 auto;box-shadow:none}
.hub-head .hub-chev,.hub-head .hub-n{position:absolute;right:0;top:50%;transform:translateY(-50%)}
a.hub-head:hover b{text-decoration:underline}
.hub-n{flex:0 0 auto;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--coral);color:#fff;
  font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.hub-p{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink2)}
.hub-quote{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink);font-style:italic;
  padding-left:11px;border-left:3px solid rgba(109,63,194,.3)}
.hub-foot{margin-top:auto;padding-top:10px;border-top:1px solid rgba(20,26,36,.07);display:flex;align-items:center;gap:8px}
.hub-go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--blue);text-decoration:none}
.hub-go:hover{text-decoration:underline}
/* the quiet foot sits where a button would, same height and shape, just not pressable */
.hub-quiet{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:6px 11px;font-size:13px;font-weight:600;color:var(--tint-calm-s);
  border:1px dashed var(--tint-calm);border-radius:var(--rad-s)}
.hub-by{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2);min-width:0}
.hub-by span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-card .hub-foot .btn.block{margin:0;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center}
/* the button takes the card's own deep tone, the same as its icon badge */
.hub-card[data-tint="amber"] .hub-foot .btn.primary{background:var(--tint-amber-s);border-color:var(--tint-amber-s)}
.hub-card[data-tint="green"] .hub-foot .btn.primary{background:var(--tint-green-s);border-color:var(--tint-green-s)}
.hub-card[data-tint="blue"] .hub-foot .btn.primary{background:var(--tint-blue-s);border-color:var(--tint-blue-s)}
.hub-card[data-tint="coral"] .hub-foot .btn.primary{background:var(--tint-coral-s);border-color:var(--tint-coral-s)}
.hub-card[data-tint="purple"] .hub-foot .btn.primary{background:var(--tint-purple-s);border-color:var(--tint-purple-s)}
.hub-card[data-tint="grey"] .hub-foot .btn.primary{background:var(--tint-grey-s);border-color:var(--tint-grey-s)}
.hub-card[data-tint="calm"] .hub-foot .btn.primary{background:var(--tint-calm-s);border-color:var(--tint-calm-s)}
.hub-card[data-tint] .hub-foot .btn.primary:hover{filter:brightness(1.12)}

.hub-rows{display:flex;flex-direction:column}
.needs-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(20,26,36,.07);text-decoration:none;color:inherit}
.needs-row:first-child{border-top:0;padding-top:2px}
.needs-row>div{min-width:0;flex:1}
.needs-row b{font-size:13.5px;display:block;line-height:1.25}
.needs-row .muted{line-height:1.3}
.needs-row:hover b{text-decoration:underline}
.needs-row .icdot{width:28px;height:28px;flex:0 0 28px;border-radius:9px}
.pto-nums{display:flex;gap:8px;margin:0;flex-wrap:wrap}
.pto-nums div{flex:1 1 68px;min-width:0;background:rgba(255,255,255,.72);border:1px solid rgba(34,160,91,.18);border-radius:11px;padding:8px 10px}
.pto-nums b{display:block;font-size:19px;line-height:1.1;color:var(--green2);letter-spacing:-.02em}
.pto-nums b small{font-size:12px;font-weight:600;margin-left:1px}
.pto-nums span{display:block;font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.hub-cards{grid-template-columns:1fr}}

/* Home's band height and the gap under the greeting come from the rules near the top
   of this file, as they did in 1.22.1. Nothing below this line overrides them. */

/* ===== Home: today's activity ====================================================
   Four figures across the top, then one row per stretch on the clock rather than a
   flat list of punches, so a day reads as blocks of work instead of timestamps. */
.act .card-head{margin-bottom:12px}
.act-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.as{border:1px solid var(--line);border-radius:13px;padding:10px 12px 11px;display:flex;flex-direction:column;gap:2px;min-width:0}
.as-k{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}
.as-k .ic{opacity:.8}
.as b{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as small{font-size:12px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as[data-tint="green"] b{color:var(--green2)}
.as[data-tint="blue"] b{color:var(--blue)}
.as[data-tint="purple"] b{color:var(--purple)}
.as[data-tint="amber"] b{color:#7A4B00}

.act-run{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--page);position:relative}
.act-run+.act-run{margin-top:7px}
.act-run.live{background:var(--green-bg)}
.act-dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px;background:var(--ink3)}
.act-run.live .act-dot{background:var(--green);box-shadow:0 0 0 4px rgba(34,160,91,.18)}
.act-when{flex:0 0 160px;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.act-when b{font-size:14px;letter-spacing:-.01em}
.act-when span{font-size:12.5px;color:var(--ink2)}
.act-bits{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.act-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}
.act-chip.hours{background:#fff;border:1px solid var(--line2);color:var(--ink)}
.act-chip.brk{background:#FDF2DC;color:#7A4B00}
.act-chip.prog{background:#F0EAFB;color:var(--purple)}
.act-run.live .act-chip.hours{background:#fff;border-color:#C6E8D3;color:var(--green2)}
.act-none{display:flex;align-items:center;gap:12px;padding:16px;border-radius:12px;background:var(--page);color:var(--ink2)}
.act-none .ic{color:var(--ink3);flex:0 0 auto}
.act-none b{display:block;font-size:14px;color:var(--ink)}
.act-none span{font-size:13px}

/* next shifts, in the same language as the runs above them */
.next-shifts{margin-top:16px;border-top:1px solid var(--line);padding-top:13px}
.ns-row{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:12px;background:var(--page);border:1px solid transparent}
.ns-row.now{background:var(--green-bg);border-color:#C6E8D3}
@media (max-width:620px){
  .act-when{flex:0 0 auto}
  .act-run{flex-wrap:wrap;gap:8px 12px}
  .act-bits{justify-content:flex-start;flex-basis:100%;padding-left:22px}
}
@media (max-width:620px){
  .act-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .as b{font-size:18px}
  .act .card-head{flex-direction:column;align-items:flex-start;gap:8px}
  .act .card-head h2{white-space:nowrap}
}

/* ===== Scheduling rail: the numbers do something =================================
   Every figure in the rail reports a problem, so every figure is a way into it.
   Clicking lands you on the thing itself, flashed, rather than on the right week
   with a hunt still ahead of you. */
.ring-legend button{display:flex;align-items:center;gap:8px;width:100%;padding:3px 6px;margin:0 -6px;
  background:none;border:0;border-radius:8px;font:inherit;font-size:13px;color:inherit;text-align:left;cursor:pointer}
.ring-legend button b{margin-left:auto;font-variant-numeric:tabular-nums}
.ring-legend button:hover:not([disabled]){background:var(--page)}
.ring-legend button:hover:not([disabled]) b{text-decoration:underline}
.ring-legend button[disabled]{cursor:default;opacity:.75}

.rail-row.issue{display:flex;align-items:center;gap:9px}
.rail-row.issue.act{cursor:pointer;border-radius:9px;padding:7px 8px;margin:0 -8px;transition:background .12s ease}
.rail-row.issue.act:hover{background:var(--page)}
.rail-row.issue .go{margin-left:auto;color:var(--ink3);display:inline-flex;flex:0 0 auto}
.rail-row.issue.act:hover .go{color:var(--blue)}
.rail-row.issue .btn{margin-left:auto;flex:0 0 auto}
.rail-row.issue .small{flex:1;min-width:0}

/* what you were sent to look at, so it is obvious on a full week */
@keyframes gh-flash{0%{box-shadow:0 0 0 0 rgba(77,159,230,.6)}35%{box-shadow:0 0 0 5px rgba(77,159,230,.35)}100%{box-shadow:0 0 0 0 rgba(77,159,230,0)}}
.flash{animation:gh-flash 1.1s ease-out 2;border-radius:10px;position:relative;z-index:4}
@media (prefers-reduced-motion:reduce){.flash{animation:none;outline:2px solid var(--blue);outline-offset:2px}}

/* ===== Coverage calendar =========================================================
   A weekday rule is hard to picture and easy to get wrong. The same rule drawn on
   the days it actually lands on is neither, and a slot nobody is working is then
   the obvious thing on the page rather than a number in a table. */
.cal-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 14px}
.cal-nav{display:flex;align-items:center;gap:8px}
.cal-title{font-size:15px;letter-spacing:-.01em;min-width:170px}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:999px;overflow:hidden}
.seg a{padding:6px 14px;font-size:13px;font-weight:600;color:var(--ink2);text-decoration:none;background:#fff}
.seg a+a{border-left:1px solid var(--line2)}
.seg a.on{background:var(--navy);color:#fff}
.seg a:hover:not(.on){background:var(--page)}

.covcal-head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:6px}
.covcal-head span{font-size:11.5px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;padding-left:4px}
.covcal-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:6px}
.covcal-day{border:1px solid var(--line);border-radius:12px;padding:8px;min-height:92px;background:#fff;display:flex;flex-direction:column;gap:6px}
.covcal-day.quiet{background:var(--page);border-style:dashed}
.covcal-day.today{border-color:var(--blue);box-shadow:0 0 0 2px rgba(77,159,230,.14)}
.covcal-day.short{border-color:#F3C9BC}
.covcal-day.closed{background:repeating-linear-gradient(135deg,#FAFBFC,#FAFBFC 7px,#F1F4F8 7px,#F1F4F8 14px)}
.ccd-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ccd-num{font-size:13.5px;font-weight:700;color:var(--ink2)}
.ccd-num small{font-weight:600;color:var(--ink3);font-size:11px}
.ccd-count{font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:999px}
.ccd-count.ok{background:var(--green-bg);color:var(--green2)}
.ccd-count.short{background:var(--coral-bg);color:var(--coral2)}
.ccd-closed{font-size:11px;font-weight:600;color:var(--ink3)}

.ccd-slot{border:1px solid var(--line);border-radius:9px;padding:6px 7px;background:#fff;display:flex;flex-direction:column;gap:4px}
.ccs-top{display:flex;align-items:center;gap:6px}
.ccs-top .chip-sample{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
.ccs-n{flex:0 0 auto;min-width:21px;height:21px;padding:0 5px;border:1px solid var(--line2);border-radius:7px;background:#fff;
  font:inherit;font-size:11.5px;font-weight:700;color:var(--ink2);display:inline-flex;align-items:center;justify-content:center;gap:1px}
button.ccs-n{cursor:pointer}
button.ccs-n:hover{border-color:var(--blue);color:var(--blue)}
.ccs-n i{font-style:normal;color:var(--purple);font-weight:700}
.ccs-when{font-size:11px;color:var(--ink3)}
.ccs-spots{display:flex;flex-wrap:wrap;gap:4px}
.ccs-who{display:inline-flex;align-items:center;gap:4px;padding:2px 7px 2px 2px;border-radius:999px;background:var(--green-bg);font-size:11.5px;font-weight:600;color:var(--green2);max-width:100%}
.ccs-who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccs-who .avatar{width:18px;height:18px;font-size:9px;flex:0 0 18px}
.ccs-who.draft{background:#FDF2DC;color:#7A4B00}
.ccs-empty{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;border:1px dashed #E6A98F;
  background:#FFF8F5;color:var(--coral2);font-size:11.5px;font-weight:600;text-decoration:none}
.ccs-empty:hover{background:var(--coral);color:#fff;border-style:solid;border-color:var(--coral)}
.ccs-extra{font-size:11px;color:var(--ink3);align-self:center}

/* a month is 42 cells, so slots give way to the count per day */
.covcal.month .covcal-day{min-height:62px}
@media (max-width:900px){
  .covcal-head{display:none}
  .covcal-row{grid-template-columns:1fr}
  .covcal-day{min-height:0}
  .covcal-day.quiet{display:none}
  .ccd-num::after{content:attr(data-day)}
}
.ccs-open{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;background:var(--blue-bg);
  color:var(--blue);font-size:11.5px;font-weight:600;text-decoration:none}
.ccs-open:hover{background:var(--blue);color:#fff}
.cal-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:12px}
.cal-foot p{margin:0;flex:1;min-width:220px}

/* ===== Banner text on a photo ====================================================
   One rule for every banner that sits on a picture. White letters with a warm white
   glow around them and a soft dark haze under that, so the same colour works over a
   bright noon sky, a dark night one and the pale Kudos illustration. The version
   before this one switched between dark text by day and white by night, which meant
   the half hour either side of the switch was unreadable whichever way it guessed.
   The version after that traded the glow for a one pixel outline, which held up
   everywhere and looked stamped on. The glow does the same job by lifting the
   letters off the picture rather than cutting them out of it.

   The flat grey banner and the plain white header are deliberately not in here. White
   on light grey is not a legibility choice, it is an absence of one. */
.topband.has-photo .phero-text h1,
.topband.has-photo .phero-text p,
.topband.kudos-hero .phero-text h1,
.topband.kudos-hero .phero-text p,
.topband.has-photo .band-clock .bc-date,
.topband.has-photo .band-clock .bc-time,
.topband.kudos-hero .band-clock .bc-date,
.topband.kudos-hero .band-clock .bc-time,
.topband.home-sky .hero-greet,
.topband.home-sky .hero-where{
  color:#fff;
  text-shadow:
    0 0 12px rgba(12,18,28,.55),
    0 0 30px rgba(12,18,28,.55),
    0 2px 18px rgba(12,18,28,.45),
    0 0 60px rgba(12,18,28,.30);
}
/* the subtitle carries a touch more weight, because it is the one that was getting lost */
.topband.has-photo .phero-text p,
.topband.kudos-hero .phero-text p{font-weight:600;opacity:.98}

/* The Kudos illustration is pale all over, where the sky photographs are mid tone,
   so the glow alone had nothing to sit against. A soft wash across the left of the
   art gives the letters something to be light against, and fades out well before
   the lettering on the right. Every banner keeps the same text treatment. */
.topband.kudos-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(100deg,rgba(52,42,78,.40) 0%,rgba(52,42,78,.26) 24%,rgba(52,42,78,.06) 44%,rgba(52,42,78,0) 56%)}
.topband.kudos-hero .top,.topband.kudos-hero .phero{position:relative;z-index:1}

/* Kudos sat lower than every other banner, so moving between pages jumped. It now
   uses the same top and bottom as the rest. */
.topband.kudos-hero.phero-slim{padding-bottom:26px}
.topband.kudos-hero.phero-slim .phero{padding-top:0}
.topband.kudos-hero .top{padding-top:16px}
@media (max-width:1000px){
  .topband.kudos-hero.phero-slim{padding-bottom:18px}
  .topband.kudos-hero .top{padding-top:6px}
}

/* Coverage at a glance sits directly above the week, so its bars line up with the
   day columns under them. Both are driven by --who-w, the width of the name column,
   so the two cannot drift apart when that changes. */
:root{--who-w:170px}
@media (max-width:1200px){:root{--who-w:162px}}
@media (max-width:1000px){:root{--who-w:140px}}
.cov-glance{display:grid;grid-template-columns:var(--who-w) repeat(7,minmax(0,1fr));align-items:center;gap:0}
.cov-glance-l{min-width:0;padding-right:14px}
.cov-days{display:contents}
.cov-day{min-width:0}
@media (max-width:1000px){
  /* too narrow to line anything up, so stop pretending and let it wrap */
  .cov-glance{display:flex;flex-wrap:wrap;gap:18px}
  .cov-glance-l{min-width:220px;padding-right:0}
  .cov-days{display:flex;flex:1}
}

/* Form fields in groups, for the person editor. A wrapping flex row stretches
   whichever field wraps last, which is how a Status dropdown ended up the width
   of the card. This grid fills columns and leaves the spare ones empty. */
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px 14px;align-items:start}
.fields>div{min-width:0}
.fields .all{grid-column:1/-1}
.fields label{display:block}
.fields .photo-row{display:flex;align-items:center;gap:14px}
.fields .photo-row>div{flex:1 1 auto;min-width:0}
.fgroup{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.fgroup:first-of-type{margin-top:4px;padding-top:0;border-top:0}
.fgroup>h4{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
@media (max-width:620px){.fields{grid-template-columns:1fr}}

/* Editing a person from the card they are already on, rather than a trip to the
   editor and back. The pencil swaps the facts for the same facts as fields. */
.pm-sec h4{display:flex;align-items:center;gap:8px}
.pm-edit{margin-left:auto;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--card);color:var(--ink2);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;cursor:pointer}
.pm-edit:hover{background:#F6F8FB;color:var(--ink)}
.pm-sec.editing .pm-edit{background:var(--navy);border-color:var(--navy);color:#fff}
.pm-form{margin-top:8px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.pm-form label{font-size:12px}
.pm-form-acts{display:flex;align-items:center;gap:8px;margin-top:2px}
.pm-msg{font-size:12px;color:var(--ink2)}
.pm-msg.bad{color:var(--red)}
.pm-saved{margin:6px 0 0;font-size:12px;font-weight:600;color:var(--green,#1E7F4F);min-height:16px;grid-column:1/-1}
/* An editing panel takes two columns where there is room, so its fields sit side
   by side instead of in one tall stack beside three short panels. */
.pm-sec.editing{grid-column:span 2}
@media (max-width:760px){.pm-sec.editing{grid-column:auto}}

/* ===== Card colour: 1960s pop ========================================================
   The decade's own list, not a guess at it: harvest gold, avocado, turquoise,
   tangerine, hot pink and chocolate, David's pick B. Each card is a soft wash of its
   colour, a light tint at the top left fading toward white, with a border in the true
   colour and the icon badge in the deep tone with a white icon. No purple: the
   sixties did not do mauve, so Kudos is hot pink. One palette for the home tiles,
   the hub cards, the activity figures and the People wall. */
:root{
  --tint-amber:#E8A921;  --tint-amber-s:#A77A18;  --tint-amber-g:linear-gradient(165deg,#F9E4A8 0%,#FCF1D6 42%,#FFFFFF 100%);   /* harvest gold */
  --tint-green:#9BAC55;  --tint-green-s:#67752A;  --tint-green-g:linear-gradient(165deg,#DCE2BF 0%,#EDF0DD 42%,#FFFFFF 100%);   /* avocado, softened */
  --tint-blue:#2BB3C0;   --tint-blue-s:#1F818A;   --tint-blue-g:linear-gradient(165deg,#A3DFE5 0%,#D2EFF2 42%,#FFFFFF 100%);    /* turquoise */
  --tint-coral:#F2813D;  --tint-coral-s:#AE5D2C;  --tint-coral-g:linear-gradient(165deg,#FAC7A8 0%,#FDE3D2 42%,#FFFFFF 100%);   /* tangerine */
  --tint-purple:#D9775F; --tint-purple-s:#A84E3B; --tint-purple-g:linear-gradient(165deg,#F3CCC0 0%,#F9E3DC 42%,#FFFFFF 100%);  /* blush, for Kudos */
  --tint-grey:#6B4A2E;   --tint-grey-s:#4D3521;   --tint-grey-g:linear-gradient(165deg,#C3B2A4 0%,#DFD5CC 42%,#FFFFFF 100%);    /* chocolate */
  --tint-calm:#B9CDB0;   --tint-calm-s:#5E7A58;   --tint-calm-g:linear-gradient(165deg,#E6EEE0 0%,#F1F5EC 42%,#FFFFFF 100%);    /* warm neutral, barely green: nothing waiting */
}
.q[data-tint="blue"],.pc[data-tint="blue"],.hub-card[data-tint="blue"]{background:var(--tint-blue-g);border-color:var(--tint-blue)}
.q[data-tint="green"],.pc[data-tint="green"],.hub-card[data-tint="green"]{background:var(--tint-green-g);border-color:var(--tint-green)}
.q[data-tint="coral"],.pc[data-tint="coral"],.hub-card[data-tint="coral"]{background:var(--tint-coral-g);border-color:var(--tint-coral)}
.q[data-tint="amber"],.pc[data-tint="amber"],.hub-card[data-tint="amber"]{background:var(--tint-amber-g);border-color:var(--tint-amber)}
.q[data-tint="purple"],.pc[data-tint="purple"],.hub-card[data-tint="purple"]{background:var(--tint-purple-g);border-color:var(--tint-purple)}
.q[data-tint="grey"],.pc[data-tint="grey"],.hub-card[data-tint="grey"]{background:var(--tint-grey-g);border-color:var(--tint-grey)}
.hub-card[data-tint="calm"]{background:var(--tint-calm-g);border-color:var(--tint-calm)}
.hub-card[data-tint="calm"] .icdot{background:var(--tint-calm-s);color:#fff}
.q[data-tint="blue"] .icdot,.hub-card[data-tint="blue"] .icdot.blue{background:var(--tint-blue-s);color:#fff}
.q[data-tint="green"] .icdot,.hub-card[data-tint="green"] .icdot.green{background:var(--tint-green-s);color:#fff}
.q[data-tint="coral"] .icdot,.hub-card[data-tint="coral"] .icdot.coral{background:var(--tint-coral-s);color:#fff}
.q[data-tint="amber"] .icdot,.hub-card[data-tint="amber"] .icdot.amber{background:var(--tint-amber-s);color:#fff}
.q[data-tint="purple"] .icdot,.hub-card[data-tint="purple"] .icdot.purple{background:var(--tint-purple-s);color:#fff}
.q[data-tint="grey"] .icdot,.hub-card[data-tint="grey"] .icdot.grey{background:var(--tint-grey-s);color:#fff}
.hub-card .pto-nums div{background:rgba(255,255,255,.78);border-color:rgba(0,0,0,.08)}

/* ===== Home quick tiles: app icons ==================================================
   A centred row of squares, the way icons sit on a phone: 72px, rounded, frosted
   white with the colour in the icon, and nothing else. Centred so a company with more
   modules on gets a wider row, not a row that leans left. Hover or tab to one and its name
   appears underneath. On a phone there is no hover, so the labelled tiles stay. */
@media (min-width:1001px){
  .quick{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;padding:2px 2px 26px;margin-bottom:6px;perspective:none}
  .q{width:72px;height:72px;min-height:0;flex:0 0 72px;padding:0;gap:0;justify-content:center;border-radius:20px;border:none;
     overflow:visible;box-shadow:0 2px 6px rgba(20,26,36,.14),inset 0 1px 0 rgba(255,255,255,.18);transform:none}
  /* frosted white squares, the colour kept to the icon, so nine of them read as one row */
  .q,.q[data-tint],.q[data-tint]:hover{background:rgba(255,255,255,.92);border:1px solid rgba(20,26,36,.07)}
  .q .icdot,.q[data-tint] .icdot{width:auto;height:auto;background:transparent;border-radius:0;box-shadow:none}
  .q[data-tint="blue"] .icdot{color:var(--tint-blue-s)}
  .q[data-tint="green"] .icdot{color:var(--tint-green-s)}
  .q[data-tint="coral"] .icdot{color:var(--tint-coral)}
  .q[data-tint="amber"] .icdot{color:var(--tint-amber)}
  .q[data-tint="purple"] .icdot{color:var(--tint-purple)}
  .q[data-tint="grey"] .icdot{color:var(--tint-grey)}
  .q .icdot .ic{width:34px;height:34px}
  .q>span{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%) translateY(-3px);opacity:0;pointer-events:none;
    white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--ink);transition:opacity .12s ease,transform .12s ease}
  .q:hover>span,.q:focus-visible>span{opacity:1;transform:translateX(-50%) translateY(0)}
  .q:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(20,26,36,.22),inset 0 1px 0 rgba(255,255,255,.18)}
  .q[disabled],.q.disabled{opacity:.4;box-shadow:none}
  .q[disabled]:hover,.q.disabled:hover{transform:none}
}

/* ===== Home: the work status strip and what sits under it =========================
   One white strip, four columns split by hairlines, a small coloured icon each, the
   label above the figure. Below it the next shift as a compact card of its own, beside
   today's punches. The links that used to float above the figures live in those two
   boxes now, next to the things they are about. */
.card.act{background:transparent;border:none;box-shadow:none;padding:0;margin-bottom:16px}
.card.act .act-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 14px;
  background:var(--card);border:1px solid #EAEEF3;border-radius:var(--rad);box-shadow:0 1px 2px rgba(20,26,36,.04),0 8px 24px rgba(20,26,36,.06);padding:4px 0}
.as{flex-direction:row;align-items:center;gap:14px;padding:14px 20px;border:none;border-radius:0;background:transparent;min-width:0}
.as+.as{border-left:1px solid var(--line)}
.as>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.as-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-style:normal}
.as-k{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.as b,.as[data-tint] b{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ink);text-align:left}
.as small{font-size:12.5px;color:var(--ink2);text-align:left}
.as[data-tint="amber"] .as-ic{color:var(--tint-amber-s)}
.as[data-tint="purple"] .as-ic{color:var(--tint-purple)}
.as[data-tint="blue"] .as-ic{color:var(--tint-blue-s)}
.as[data-tint="green"] .as-ic{color:var(--tint-green-s)}
.act-row{display:grid;grid-template-columns:minmax(300px,2fr) 3fr;gap:14px;align-items:start}
.act-row.solo{grid-template-columns:1fr}
.act-box{background:var(--card);border:1px solid #EAEEF3;border-radius:var(--rad);padding:16px 18px;box-shadow:0 1px 2px rgba(20,26,36,.04),0 8px 24px rgba(20,26,36,.06);min-width:0}
.ab-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.ab-head b{font-size:15px}
.ab-head .link{display:inline-flex;align-items:center;gap:4px;font-size:13px}
.ab-links{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ns-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--page);border:1px solid transparent}
.ns-card.now{background:var(--green-bg);border-color:#C6E8D3}
.ns-card .ns-when{flex:0 0 auto}
.ns-card .ns-when b{font-size:15px}
.ns-card .ns-when span{font-size:13px}
.ns-card .ns-what{border-left:1px solid var(--line);padding-left:12px}
.ab-acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.ab-acts .cv{margin:0}
.ab-acts .cv[open]{flex-basis:100%}
.ab-acts .btn.sm{display:inline-flex;align-items:center;gap:6px}
@media (max-width:1100px){.act-row{grid-template-columns:1fr}}
@media (max-width:1000px){
  .card.act .act-stats{grid-template-columns:repeat(2,minmax(0,1fr));padding:0}
  .as{padding:12px 14px;gap:10px}
  .as+.as{border-left:none}
  .as:nth-child(even){border-left:1px solid var(--line)}
  .as:nth-child(n+3){border-top:1px solid var(--line)}
  .as b,.as[data-tint] b{font-size:17px;white-space:normal}
  .as-ic .ic{width:22px;height:22px}
  .ab-head{flex-wrap:wrap}
  .ab-links{width:100%;justify-content:flex-start}
}

/* ===== Home cards, the flat version ===================================================
   Four cards, one skeleton: tint, hairline border a shade deeper, icon badge in the
   deep tone, title beside it, and a button in the same deep tone at the foot. The
   tint is a single colour, no gradient. All clear is cream, not amber: nothing waiting
   is not a caution. Kudos is blush. Ask HR carries the real form. PTO lists its three
   ways in as rows. */
.hub-card{padding:16px 18px 16px;border-radius:16px;gap:10px}
.hub-card[data-tint="amber"]{background:#FDF4DC;border-color:#E6D39A}
.hub-card[data-tint="calm"]{background:#FDF6E4;border-color:#E8DCB8}
.hub-card[data-tint="purple"]{background:#FBEBE8;border-color:#EEC3BC}
.hub-card[data-tint="blue"]{background:#EAF4FB;border-color:#BBD7EA}
.hub-card[data-tint="green"]{background:#EEF5E5;border-color:#C6DAAE}
.hub-card[data-tint="amber"] .icdot.amber,.hub-card[data-tint="calm"] .icdot.amber{background:#B5841E;color:#fff}
.hub-card[data-tint="purple"] .icdot.purple{background:#D2514E;color:#fff}
.hub-card[data-tint="blue"] .icdot.blue{background:#1F7FC2;color:#fff}
.hub-card[data-tint="green"] .icdot.green{background:#5D7A2E;color:#fff}
.hub-card .hub-rows .icdot{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.75);box-shadow:none}
.hub-card[data-tint] .hub-rows .icdot.blue{background:rgba(255,255,255,.75);color:#1F7FC2}
.hub-card[data-tint] .hub-rows .icdot.purple{background:rgba(255,255,255,.75);color:#8A4FD0}
.hub-card[data-tint] .hub-rows .icdot.amber{background:rgba(255,255,255,.75);color:#B5841E}
.hub-card[data-tint] .hub-rows .icdot.coral{background:rgba(255,255,255,.75);color:#D2514E}
.hub-card[data-tint] .hub-rows .icdot.green{background:rgba(255,255,255,.75);color:#5D7A2E}
.hub-card[data-tint="amber"] .hub-foot .btn.primary,.hub-card[data-tint="calm"] .hub-foot .btn.primary{background:#B5841E;border-color:#B5841E}
.hub-card[data-tint="purple"] .hub-foot .btn.primary{background:#C65A57;border-color:#C65A57}
.hub-card[data-tint="blue"] .hub-foot .btn.primary{background:#1B6FAE;border-color:#1B6FAE}
.hub-card[data-tint="green"] .hub-foot .btn.primary{background:#6B7B2E;border-color:#6B7B2E}
.hub-card .hub-foot{border-top:none;padding-top:4px}
.hub-card .hub-foot .btn.block{padding:9px 12px;font-size:13.5px;border-radius:10px}
.hub-p{font-size:13.5px;line-height:1.5}
/* all clear: a tick in a soft disc, centred in the space a button would take */
.hub-zen{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0 6px;color:var(--ink2);font-size:13.5px}
.hub-zen-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#E6F0DF;color:#3F7A3A;font-style:normal}
/* kudos: the quote, then who said it, on a soft white row */
.hub-quote{font-size:13.5px;border-left:3px solid #D2514E;padding-left:11px}
.hub-by-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.7);min-width:0}
.hub-by-row>div{display:flex;flex-direction:column;min-width:0}
.hub-by-row b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ask HR: the real form, small */
.hub-ask{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.hub-ask-topic{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #BBD7EA;border-radius:9px;padding:0 10px;font-size:13px;font-weight:600;color:var(--ink2)}
.hub-ask-topic select{flex:1;min-width:0;border:none;background:transparent;padding:9px 0;margin:0;font-size:13px;color:var(--ink2)}
.hub-ask-topic select:focus{outline:none}
.hub-ask textarea{margin:0;min-height:54px;font-size:13px;border:1px solid #BBD7EA;border-radius:9px;padding:8px 10px;resize:vertical;background:#fff}
.hub-ask-anon{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2);font-weight:500}
.hub-ask-anon input{margin:0;width:15px;height:15px}
.hub-ask .hub-foot{margin-top:0}
/* pto: the balances, then the three ways in */
.hub-card.pto .pto-nums{margin:4px 0 2px}
.hub-card.pto .pto-nums div{background:rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.05)}
.hub-card.pto .pto-nums b{color:#2D7A2F}
.hub-card.pto .hub-rows .needs-row{padding:8px 0}
.hub-card.pto .hub-rows .needs-row b{font-size:13.5px;font-weight:600}
.hub-card .needs-row{border-top-color:rgba(20,26,36,.08)}

/* ===== Page bands: title and tabs at the bottom right ================================
   The clock keeps the top left of every band. The page title, its line and its tabs
   gather at the bottom right, the tabs a few pixels off the bottom edge, so every
   page reads the same way: time on one side, where you are on the other. Home has
   its own band and is not in here. */
.topband.sky-band:not(.home-sky),.topband.kudos-hero,.topband.phero-flat{padding-bottom:6px}
.topband.sky-band:not(.home-sky) .phero,.topband.kudos-hero .phero,.topband.phero-flat .phero{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;margin-top:auto;padding:0;min-height:0;gap:0}
.topband.sky-band:not(.home-sky) .phero-text,.topband.kudos-hero .phero-text,.topband.phero-flat .phero-text{text-align:right;max-width:100%}
.topband.sky-band:not(.home-sky) .phero-right,.topband.kudos-hero .phero-right,.topband.phero-flat .phero-right{justify-content:flex-end;margin-top:8px}
.topband.sky-band:not(.home-sky) .phero-below,.topband.kudos-hero .phero-below,.topband.phero-flat .phero-below{
  margin:8px 0 0;padding:0;width:100%;flex-basis:auto;display:flex;justify-content:flex-end}
.topband .phero-below .subnav{margin:0 0 0 auto;width:max-content;max-width:100%;padding:4px 0 4px}
/* a band with no tabs still ends the same distance from its title */
.topband.kudos-hero .phero-text,.topband.phero-flat .phero-text{padding-bottom:10px}
.topband.sky-band:not(.home-sky) .phero-text:last-child{padding-bottom:10px}
/* the clock sits in the same spot on every band, Kudos included */
.topband.kudos-hero .top,.topband.phero-flat .top,.topband.sky-band .top{padding-top:10px;min-height:62px}
@media (max-width:1000px){
  .topband.sky-band:not(.home-sky),.topband.kudos-hero,.topband.phero-flat{padding-bottom:6px}
  .topband .phero-below .subnav{width:100%}
}
.topband.kudos-hero.phero-slim,.topband.sky-band.phero-slim:not(.home-sky){padding-bottom:6px}
.topband.kudos-hero.phero-slim .phero,.topband.sky-band.phero-slim .phero{padding-top:0}

/* The sidebar folds away below 1000px (it used to hold on to 820), so a folding phone
   opened flat, or a half-width window, gets the phone layout instead of a band too
   narrow for its own buttons. And the two clock buttons never spill past the band:
   each takes half the room when 280px would not fit. */
/* Phone tiles match the desktop dock: white, the colour in the icon, no brown. */
.q,.q[data-tint]{background:#fff;border:1px solid rgba(20,26,36,.08)}
@media (max-width:1000px){.q .icdot,.q[data-tint] .icdot{background:#F2F4F7;box-shadow:none}}
.q[data-tint="blue"] .icdot{color:var(--tint-blue-s)}
.q[data-tint="green"] .icdot{color:var(--tint-green-s)}
.q[data-tint="coral"] .icdot{color:var(--tint-coral)}
.q[data-tint="amber"] .icdot{color:var(--tint-amber)}
.q[data-tint="purple"] .icdot{color:var(--tint-purple)}
.q[data-tint="grey"] .icdot{color:var(--ink2)}
.q.more{background:#fff}
/* Board: a day with set hours is a quiet day off with the hours under it, not a red flag */
.ovl.ovl-hours{color:var(--ink3);text-decoration:none}
.ovl.ovl-hours b{font-weight:600;color:var(--ink3)}
.ovl.ovl-hours small{display:block;font-size:11px;color:var(--ink3);text-decoration:none}
.btn.danger-out{display:inline-flex;align-items:center;gap:6px;color:var(--red2);border-color:#F3C4C4;background:#FFF5F5}
.btn.danger-out:hover{background:#FDECEB}
/* the card's master edit: one clear way to the whole form, after the sections */
.pm-master{grid-column:1 / -1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0 4px;border-top:1px solid rgba(20,26,36,.08);margin-top:6px}
.pm-master .btn{display:inline-flex;align-items:center;gap:7px}
/* availability: extra blocks of hours sit under their day, indented past the day name */
.avail-day{border-bottom:1px solid var(--line)}
.avail-day .avail-row{border-bottom:none}
.avail-row.avail-more{padding-top:0}
.avail-add{display:inline-flex;align-items:center;gap:4px;margin-left:6px}
/* switch to an open shift: a short list to pick from */
.sw-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto}
.sw-opt{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.sw-opt:has(input:checked){border-color:var(--blue);background:#EEF6FF}
.sw-opt input{width:auto;margin:0}.sw-opt span{display:flex;flex-direction:column}.sw-opt b{font-size:13.5px}.sw-opt small{font-size:12px}
.my-acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}.my-acts .link{display:inline-flex;align-items:center;gap:4px;font-size:12.5px}
/* coverage calendar: the shift type is the way into its weekly rule */
button.ccs-rule{border:none;cursor:pointer;font:inherit;font-weight:600}
button.ccs-rule:hover{filter:brightness(.95)}
/* waiting on setup is a problem to fix, so it reads red: the icon, the count and each person */
.card.attn .icdot.red{background:#FDE8E8;color:#C93E3E}
.pend{border-color:#F1C2C2;background:#FDEDED;color:#8E2B2B}
.pend:hover{background:#FBE0E0}
/* coverage at a glance: a big icon on top, the title under it, the link on the last line */
.cov-glance-l{flex-direction:column;align-items:center;text-align:center;gap:6px;justify-content:center}
.cov-glance-l .ric{width:44px;height:44px;border-radius:12px}
.cov-glance-l .ric .ic{width:24px;height:24px}
.cov-glance-l b{display:block}
.cov-glance-l .muted{line-height:1.4}
.cov-glance-l .muted .link{display:block;margin-top:4px}

/* ===== The clock kiosk =================================================================
   A shared screen on the wall: the home clock-in screen with one job. The sky follows the
   hour and everything sits straight on it, white with the banner glow, nothing boxed in.
   Built for an iPad in portrait or landscape, works on anything with a browser. */
body.bare.kiosk-body{background:#1d2b44;padding:0;min-height:100vh;overflow:hidden;overscroll-behavior:none}
body.kiosk-body .bare-main{max-width:none;width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;position:relative;z-index:1}
.kiosk-sky{position:fixed;inset:0;top:0;left:0;right:0;bottom:0;z-index:0;background:#1d2b44;overflow:hidden}
.kiosk-sky .sky-bg{position:absolute;inset:0;top:0;left:0;right:0;bottom:0;background-position:50% 55%;background-size:cover;opacity:0;transition:opacity 4s ease-in-out}.kiosk-sky .sky-bg.on{opacity:1}
.kiosk{position:relative;z-index:1;width:100%;max-width:640px;margin:0 auto;padding:120px 24px 40px;color:#fff;text-align:center;font-family:var(--sans);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.kiosk,.kiosk h1,.kiosk p,.kiosk-status,.kiosk-msg,.kiosk-foot,.kiosk-camnote,.kiosk-count,.kiosk-done-sub,.kiosk-prog label{color:#fff;text-shadow:0 0 12px rgba(12,18,28,.55),0 0 30px rgba(12,18,28,.55),0 2px 18px rgba(12,18,28,.45),0 0 60px rgba(12,18,28,.30)}
.kiosk-stop{padding-top:80px}
.kiosk-logo{height:52px;width:auto;display:block;filter:drop-shadow(0 1px 6px rgba(12,18,28,.5))}
.kiosk-stop .kiosk-logo{height:48px;margin:0 auto 20px}
.kiosk-top{position:fixed;top:0;left:0;right:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:26px 30px 0;text-align:left}
.kiosk-brand{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.kiosk-org{font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:4px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kiosk-clock{text-align:right;line-height:1.05}.kiosk-clock b{display:block;font-size:46px;font-weight:700;letter-spacing:-.02em}.kiosk-clock span{display:block;font-size:15px;font-weight:600;margin-top:4px}
.kiosk-body{padding:0}
.kiosk h1{font-size:30px;margin:0 0 14px;letter-spacing:-.01em}
.kiosk-dots{display:flex;justify-content:center;gap:30px;margin:10px 0 18px}
.kiosk-dots i{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.75);display:block;box-shadow:0 1px 6px rgba(12,18,28,.35);transition:background .1s,transform .1s}
.kiosk-dots i.on{background:#fff;border-color:#fff;transform:scale(1.1)}
.kiosk-msg{min-height:22px;margin:0 0 8px;font-size:15px}.kiosk-msg.bad{color:#FFC4C4}
.kiosk-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:340px;margin:0 auto}
.kiosk-pad button{height:84px;border-radius:22px;border:none;background:#fff;color:var(--ink);font:inherit;font-size:34px;font-weight:600;cursor:pointer;text-shadow:none;box-shadow:0 4px 16px rgba(12,18,28,.22);transition:background .08s,transform .05s}
.kiosk-pad button:active,.kiosk-pad button.down{background:#DCE6F2;transform:scale(.96)}
.kiosk-pad button{touch-action:manipulation}
.kiosk-pad .kiosk-soft{font-size:16px;font-weight:600;background:rgba(255,255,255,.82);color:var(--ink2);display:inline-flex;align-items:center;justify-content:center}
.kiosk-foot{margin:22px 0 0;font-size:13px;display:flex;align-items:center;justify-content:center;gap:5px}
.kiosk.shake [data-dots]{animation:kshake .4s}
@keyframes kshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}
.kiosk-who{display:flex;align-items:center;justify-content:center;gap:16px;text-align:left;margin-bottom:18px}
.kiosk-who h1{margin:0 0 2px;font-size:32px}
.kiosk-status{margin:0;font-size:15px;font-weight:600}
.kiosk-avatar{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--navy);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;flex:0 0 auto;box-shadow:0 2px 12px rgba(12,18,28,.25);text-shadow:none}
.kiosk-avatar img{width:100%;height:100%;object-fit:cover}
.kiosk-cam{position:relative;width:240px;height:180px;margin:0 auto 18px;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 0 0 3px rgba(255,255,255,.92),0 4px 18px rgba(12,18,28,.3)}
.kiosk-cam video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.kiosk-cam-wait{position:absolute;inset:0;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);font-size:14px;font-weight:600;background:#1F2A3A}.kiosk-cam-wait[hidden]{display:none}
.kiosk-cam-tag{position:absolute;left:8px;bottom:6px;font-size:11px;color:#fff;background:rgba(0,0,0,.55);padding:2px 7px;border-radius:999px;display:inline-flex;align-items:center;gap:4px}
.kiosk-camnote{margin:0 0 14px;font-size:13px}
.kiosk-prog{margin:0 0 18px}.kiosk-prog label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.kiosk-prog-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.kiosk-chip{border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;border-radius:999px;padding:9px 16px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.kiosk-chip.on{background:#fff;color:var(--navy);border-color:#fff;text-shadow:none}
.kiosk-acts.big-actions{margin:8px 0 16px;display:flex;flex-direction:row;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap}.kiosk-acts.big-actions.one .big,.kiosk-acts .big{width:300px;flex-direction:column;justify-content:center;gap:6px;padding:22px 18px;text-align:center;text-shadow:none;box-shadow:0 6px 22px rgba(12,18,28,.22)}.kiosk-acts .big[hidden]{display:none}
.kiosk-acts .big .big-ic{width:56px;height:56px}
.kiosk-cancel{background:rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(255,255,255,.45);color:#fff;margin-top:4px;text-shadow:0 1px 4px rgba(12,18,28,.4)}
.kiosk-done .kiosk-check{width:96px;height:96px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;margin:8px auto 20px;box-shadow:0 0 0 4px rgba(255,255,255,.9),0 6px 22px rgba(12,18,28,.3)}
.kiosk-done-sub{font-size:19px;font-weight:600;margin:0 0 22px}
.kiosk-break{background:rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.35);border-radius:14px;padding:14px;margin:0 0 16px}
.kiosk-break p{margin:0 0 10px}.kiosk-break .row{justify-content:center}
.kiosk-count{margin:14px 0 0;font-size:13px}
@media (max-height:700px){.kiosk-pad button{height:66px;font-size:28px}.kiosk{padding-top:96px}.kiosk-top{padding:16px 22px 0}.kiosk-logo{height:40px}.kiosk h1{font-size:26px}.kiosk-clock b{font-size:36px}}
.punch-pic{display:inline-block;vertical-align:middle;margin-left:6px}.punch-pic img{width:34px;height:34px;object-fit:cover;border-radius:8px;box-shadow:0 0 0 1px rgba(20,26,36,.12)}
.pend.pend-ok{border-color:#C6E8D3;background:#EAF7EF;color:#1F6B3A}
.klog{display:flex;flex-direction:column;gap:8px;max-height:560px;overflow:auto}
.klog-row{display:flex;gap:10px;align-items:flex-start;font-size:13.5px}
.klog-row .dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:0 0 auto;background:#22A05B}
.klog-row.bad .dot{background:#E14D4D}

/* ===== The clock log: every punch with its kiosk photo ================================== */
.plog-day{font-size:13px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em;margin:18px 0 8px}.plog-day:first-child{margin-top:0}
.plog-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.plog-row:first-child,.plog-day+.plog-row{border-top:none}
.plog-who{display:flex;align-items:center;gap:10px;min-width:0}.plog-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plog-punch{display:flex;align-items:center;gap:10px}.plog-punch .plog-lab{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2)}
.plog-punch b{font-size:15px}
.plog-pic{display:block;width:56px;height:56px;border-radius:12px;overflow:hidden;flex:0 0 auto;box-shadow:0 0 0 1px rgba(20,26,36,.12)}.plog-pic img{width:100%;height:100%;object-fit:cover;display:block}
.plog-pic.none{display:flex;align-items:center;justify-content:center;background:var(--bg2,#F1F4F8);color:var(--ink2);box-shadow:none}
.plog-punch.in .plog-pic.none{color:var(--green)}.plog-punch.out .plog-pic.none{color:var(--red)}.plog-pic.none.open{opacity:.35}
.plog-meta{text-align:right}.plog-meta b{display:block}
.plog.compact .plog-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:10px;padding:8px 0}.plog.compact .plog-pic{width:44px;height:44px;border-radius:10px}.plog.compact .plog-punch b{font-size:14px}
@media (max-width:700px){.plog-row{grid-template-columns:1fr 1fr}.plog-who{grid-column:1 / -1}.plog-meta{grid-column:1 / -1;text-align:left;display:flex;gap:8px;align-items:baseline}}

/* ===== The board, restyled: a coloured line and an icon on every shift ==================== */
.sched-gridcard .chip{--line:#1F74C1;background:#fff;border:1px solid var(--line2,#E3E8EF);border-left:4px solid var(--line);border-radius:10px;padding:7px 8px 7px 9px;box-shadow:0 1px 3px rgba(20,26,36,.08);min-height:52px;gap:3px;align-items:flex-start;text-align:left;
  background-image:linear-gradient(var(--chip,#fff),var(--chip,#fff));background-blend-mode:normal}
.sched-gridcard .chip{background:color-mix(in srgb,var(--chip,#fff) 55%,#fff)}
.sched-gridcard .chip b{font-size:11.5px;color:var(--ink);white-space:normal;line-height:1.2;max-width:100%}
.sched-gridcard .chip span{font-size:10.5px;color:var(--ink2);display:flex;align-items:center;gap:4px;margin-top:0;max-width:100%}
.sched-gridcard .chip .ty{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:5px;background:var(--line);color:#fff;flex:0 0 auto;opacity:1}
.sched-gridcard .chip .ty svg{width:10px;height:10px}
.sched-gridcard .chip.draft{border-style:dashed;border-left-style:solid}
.sched-gridcard .chip.openchip{--line:#E5484D;background:#FFF5F5;border:1.5px dashed #E5484D;border-left:4px solid #E5484D;color:#C53030}
.sched-gridcard .chip.openchip b{color:#C53030;display:flex;align-items:center;gap:4px;justify-content:flex-start}
.sched-gridcard .chip.openchip em{display:block;font-style:normal;font-weight:600;font-size:11.5px;color:var(--ink)}
.sched-gridcard .chip.openchip span{color:#C53030}
.sched-gridcard .chip.otrisk{--line:#C2410C;background:#FFF1E6}
.sched-gridcard .chip.needscover{--line:#E14D4D}
.sched-gridcard .chip .rep{position:absolute;top:5px;right:6px}
.sched-gridcard .chip{position:relative}
.sched-gridcard .grid .off{background:#F6F8FA;border:1px dashed #DCE2EA;color:var(--ink3);font-weight:600;min-height:52px;border-radius:10px}
.sched-gridcard .grid th .th-sum{display:block;font-style:normal;font-size:11px;color:var(--ink3);margin-top:2px;font-weight:500}
.sched-gridcard .grid th{padding:10px 6px 8px}
.who-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.who-pill{font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}
.who-pill.p-ok{background:#E3F5EA;color:#1F7A45}.who-pill.p-off{background:#E8F1FB;color:#1F5F9E}.who-pill.p-lim{background:#FFF1D6;color:#9A5B00}.who-pill.p-un{background:#FDE3E3;color:#B42318}
.cov-glance .cov-days{gap:8px}
.cov-glance .cov-day{background:var(--page);border:1px solid var(--line);border-radius:12px;padding:10px 8px 9px;min-width:72px;flex:1;text-align:center}
.cov-glance .cov-day.today{background:#EAF4FB;border-color:#BBD7EA}.cov-glance .cov-day.today b{color:var(--blue)}
.cov-glance .cov-day b{font-size:13px;color:var(--ink)}.cov-glance .cov-day>span{display:block;font-size:11.5px;color:var(--ink2);margin-bottom:6px}
.cov-glance .cov-day strong{display:block;font-size:17px;letter-spacing:-.02em;line-height:1.1}.cov-glance .cov-day small{display:block;font-size:10.5px;font-weight:600;margin-top:2px}
.cov-glance .cov-day.ok strong,.cov-glance .cov-day.ok small{color:#1F7A45}.cov-glance .cov-day.over strong,.cov-glance .cov-day.over small{color:#1F7A45}
.cov-glance .cov-day.low strong,.cov-glance .cov-day.low small{color:#B7791F}.cov-glance .cov-day.short strong,.cov-glance .cov-day.short small{color:#C53030}
.cov-glance .cov-day.none strong,.cov-glance .cov-day.none small{color:var(--ink3)}
.chip-sample{position:relative;border-left:3px solid var(--line,#1F74C1);display:inline-flex;align-items:center;gap:6px}
.chip-sample .ty{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:5px;background:var(--line,#1F74C1);color:#fff}
@media (max-width:1000px){.cov-glance .cov-day{min-width:0;padding:8px 4px}.cov-glance .cov-day strong{font-size:14px}.cov-glance .cov-day small{display:none}.who-pill{display:none}}
.sched-gridcard a.ovl-un,.sched-gridcard a.ovl-un b{text-decoration:none}.sched-gridcard .ovl-un b{font-size:12px}

/* board: wider day cells so a time range sits on one line; the grid scrolls sideways when the screen cannot fit it */
.sched-gridcard .grid{table-layout:auto;min-width:calc(var(--who-w) + 7 * 104px)}
.sched-gridcard .grid td,.sched-gridcard .grid th{min-width:104px}
.sched-gridcard .grid td.who,.sched-gridcard .grid th.who{min-width:var(--who-w)}
.sched-gridcard .chip b{font-size:12.5px;white-space:nowrap}
.sched-gridcard .ovl-hours b{color:var(--ink3);font-weight:600;font-size:12px}
.sched-gridcard a.ovl-hours{text-decoration:none}
/* coverage at a glance: title block in a row, a small bar over each percentage */
.cov-glance{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;padding:14px 18px}
.cov-glance-l{flex:0 0 auto;flex-direction:row;align-items:center;text-align:left;gap:12px;min-width:0;padding-right:8px;max-width:240px}
.cov-glance-l .ric{width:38px;height:38px}.cov-glance-l .ric .ic{width:20px;height:20px}
.cov-glance-l b{display:block;font-size:14.5px}.cov-glance-l .muted{font-size:12px;line-height:1.35}.cov-glance-l .muted .link{display:inline;margin:0}
.cov-glance .cov-days{display:flex;flex:1;gap:8px;min-width:0}
.cov-glance .cov-day{padding:9px 6px 8px;min-width:0}
.cov-glance .cov-day>span{margin-bottom:5px}
.cov-glance .cov-bar{display:block;width:40px;height:7px;border-radius:999px;background:#E6EAF0;margin:0 auto 5px;overflow:hidden}
.cov-glance .cov-bar i{display:block;height:100%;border-radius:999px;background:var(--ink3)}
.cov-glance .cov-day.ok .cov-bar i,.cov-glance .cov-day.over .cov-bar i{background:#22A05B}.cov-glance .cov-day.low .cov-bar i{background:#F2B33D}.cov-glance .cov-day.short .cov-bar i{background:#E5484D}
.cov-glance .cov-day strong{font-size:16px}
/* shift types in settings, compact */
.types{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.type-row{display:inline-flex;align-items:center;gap:6px;background:var(--page);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 4px}
.type-row .chip-sample{padding:3px 10px;font-size:13px}
.type-row form{display:inline-flex;margin:0}
.type-icon{font-size:12px;padding:3px 22px 3px 8px;border-radius:999px;width:auto;height:auto;background-position:right 6px center}
.type-x{border:none;background:transparent;color:var(--ink3);width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.type-x:hover{background:#FDE3E3;color:var(--red)}
@media (max-width:1000px){
  .cov-glance{flex-wrap:wrap;gap:10px;padding:12px 14px}
  .cov-glance-l{max-width:none;width:100%}
  .cov-glance .cov-days{overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .cov-glance .cov-day{min-width:84px;flex:0 0 auto}
  .cov-glance .cov-day small{display:block}
  .sched-gridcard .grid td,.sched-gridcard .grid th{min-width:118px}
  .sched-gridcard .grid td.who,.sched-gridcard .grid th.who{min-width:var(--who-w)}
  .sched-gridcard .grid .addcell{opacity:0}
  .sched-head{gap:8px}
  .sched-head .sched-week{width:100%;justify-content:space-between}
  .sched-head>.link{order:5;width:100%;text-align:center}
  .sched-head>label.pill{flex:1 1 calc(50% - 4px);min-width:0}
  .sched-head>label.pill select{min-width:0;width:100%}
  .sched-head .view-opts{flex:1 1 100%}.sched-head .view-opts>.pill{width:100%;justify-content:center}
}
.sched-gridcard .grid td.unavail{background:transparent}
.sched-gridcard .ovl-hours small{display:block;font-size:11px;color:var(--ink3);margin-top:2px;white-space:nowrap}