/* Lunox HR Portal — brand system
   Per lunox_BRANDguidelines_2023Final_master.pdf:
   Primary   Lunox Velvet #470054 (70%) · Lunox Pure #ffffff (70%) · Lunox Oak #7c3d00 (20%)
   Secondary Olive #c0caa0 · Skin #e7b997 · Lavender #635282 · Hillside #90a572 · Walnut #e7d8c3
             (max two secondaries per composition, never as primaries)
   Headline  Luxia — Title Case only, never all-caps  → Fraunces (closest available)
   Body      Euclid Circular                          → DM Sans (closest available) */
:root{
  /* primary class */
  --velvet:#470054; --velvet-deep:#33003c; --velvet-mid:#5c1a6b;
  --velvet-soft:#f6eef8; --velvet-line:#e7d6ed;
  --oak:#7c3d00; --oak-soft:#f8efe5;
  /* secondary class */
  --lavender:#635282; --lavender-soft:#eeebf4;
  --olive:#c0caa0; --hillside:#90a572; --hillside-deep:#5c7442; --hillside-soft:#edf1e3;
  --skin:#e7b997; --skin-soft:#fbeee2;
  --walnut:#e7d8c3; --walnut-soft:#faf4ec;
  /* neutrals derived from the palette */
  --bg:#faf7fb; --card:#ffffff; --line:#eee7f1; --line-strong:#e0d5e6;
  --text:#2b1330; --muted:#7d6f85;
  --rose:#8e2f4a; --rose-soft:#f9eaef;
  --radius:16px; --radius-lg:22px; --nav-h:62px;
  --shadow-sm:0 1px 2px rgba(43,19,48,.05), 0 1px 3px rgba(43,19,48,.04);
  --shadow-md:0 2px 6px rgba(43,19,48,.06), 0 8px 24px rgba(43,19,48,.06);
  --shadow-lg:0 10px 40px rgba(43,19,48,.14);
  --font-head:'Fraunces','Georgia','Times New Roman',serif;
  --font-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* The browser's own pull-down-to-refresh is off: the portal has its own (app.js,
   .ptr below), and the two must never both fire. */
html{-webkit-text-size-adjust:100%;overscroll-behavior-y:contain}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Luxia stand-in: headings are Title Case, never uppercase (brand rule) */
h1,h2,h3,.slip-head .t,.chip .n,.cm-stat .v{font-family:var(--font-head);font-weight:600;letter-spacing:-.01em;text-transform:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;width:100%;padding:12px 13px;border:1px solid var(--line-strong);border-radius:12px;background:#fff;color:var(--text);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--velvet);box-shadow:0 0 0 3px rgba(71,0,84,.12)}
label{display:block;font-weight:500;font-size:.88rem;color:var(--muted);margin:14px 0 6px;letter-spacing:.01em}
a{color:var(--velvet);text-underline-offset:2px}

.boot{padding:60px 40px;text-align:center;color:var(--muted)}

/* layout */
#app{max-width:960px;margin:0 auto;min-height:100vh;padding-bottom:calc(var(--nav-h) + 24px + env(safe-area-inset-bottom))}
.brandbar{background:linear-gradient(120deg,var(--velvet-deep),var(--velvet) 55%,var(--velvet-mid));
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) 18px 12px}
.brandbar .mark{height:26px;width:auto;display:block}
/* The logo is the way back to Home, in the sidebar on a desktop and in the
   top bar on a phone. It is a button, so it answers a tap and a keyboard. */
.home-link{background:none;border:0;padding:0;display:block;cursor:pointer;border-radius:6px}
.home-link:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* On a phone the logo is a thumb target, so it is padded out to the height of
   the buttons beside it and pulled back by the same amount - the logo does not
   move, the area you can hit does. */
.brandbar .home-link{padding:8px 6px;margin:-8px -6px}
.brandbar .top-actions{display:flex;gap:10px;align-items:center}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:20px 18px 6px}
.topbar h1{font-size:1.5rem;line-height:1.15}
.topbar .sub{color:var(--muted);font-size:.86rem;margin-top:3px}
.top-actions{display:flex;gap:8px;align-items:center}
.page{padding:10px 18px 28px;display:flex;flex-direction:column;gap:16px}
/* A queue with nothing waiting is empty, and an empty box would still take a gap (Giselle, 21 Oct 2026: "why so much gap here?"). */
.page > [id$="-queue"]:empty{display:none}

.bottom-nav{position:fixed;left:0;right:0;bottom:0;height:calc(var(--nav-h) + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);border-top:1px solid var(--line);display:flex;z-index:40;
  padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.68rem;color:var(--muted);font-weight:500;transition:color .15s}
.bottom-nav button.active{color:var(--velvet);font-weight:700}
.bottom-nav .ico{line-height:0;opacity:.85}
.bottom-nav button.active .ico{opacity:1}
/* line icons: no colour of their own, they take the text colour */
.ico svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* The navigation's Lucide icons keep Lucide's own stroke. */
.ico svg.lucide{stroke-width:2}
.menu-list .ico{line-height:0;color:var(--velvet);opacity:.75}
.menu-list .ico svg{width:20px;height:20px}
.menu-list .item:hover .ico{opacity:1}
.bell svg{width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:768px){
  .bottom-nav{max-width:960px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.card h2{font-size:1.08rem;margin-bottom:12px}
.card .hint{color:var(--muted);font-size:.85rem;line-height:1.5}
.row{display:flex;gap:10px;align-items:center}
.row.sb{justify-content:space-between}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Two fields side by side stop being two fields at 375px - they become two
   half-fields nobody can type in. */
@media (max-width:520px){.grid2{grid-template-columns:1fr;gap:0}}
.stack{display:flex;flex-direction:column;gap:10px}
.sep{border-top:1px solid var(--line);margin:14px 0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:12px;
  font-weight:600;letter-spacing:.01em;background:var(--velvet);color:#fff;box-shadow:var(--shadow-sm);
  transition:transform .12s ease,box-shadow .15s,background .15s,opacity .15s}
.btn:hover{background:var(--velvet-mid);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn.secondary{background:#fff;color:var(--velvet);border:1.5px solid var(--velvet-line)}
.btn.secondary:hover{background:var(--velvet-soft);border-color:var(--velvet)}
.btn.danger{background:var(--rose)}
.btn.danger:hover{background:#7a2740}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line-strong);box-shadow:none}
.btn.ghost:hover{background:var(--velvet-soft);color:var(--velvet);border-color:var(--velvet-line)}
.btn.small{padding:8px 13px;font-size:.84rem;border-radius:10px}
.btn.big{width:100%;padding:15px;font-size:1.02rem}
.btn.amber{background:var(--oak)}
.btn.amber:hover{background:#6a3400}

/* badges */
.badge{display:inline-block;padding:4px 11px;border-radius:99px;font-size:.73rem;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.badge.pending{background:var(--skin-soft);color:var(--oak)}
.badge.approved{background:var(--hillside-soft);color:var(--hillside-deep)}
.badge.rejected{background:var(--rose-soft);color:var(--rose)}
.badge.cancelled{background:#f1edf3;color:var(--muted)}
.badge.paid{background:var(--lavender-soft);color:var(--lavender)}
.badge.late{background:var(--rose-soft);color:var(--rose)}
.badge.range{background:var(--skin-soft);color:var(--oak)}
.badge.ok{background:var(--hillside-soft);color:var(--hillside-deep)}
.badge.auto{background:var(--lavender-soft);color:var(--lavender)}
.badge.role{background:var(--velvet-soft);color:var(--velvet)}

/* lists */
.list{display:flex;flex-direction:column}
.list .item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line)}
.list .item:last-child{border-bottom:none}
.item .main{min-width:0}
.item .main .t{font-weight:600}
.item .main .s{color:var(--muted);font-size:.83rem;margin-top:1px}
.item .side{text-align:right;flex-shrink:0}

/* avatar */
.avatar{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.9rem;flex-shrink:0;overflow:hidden;
  border:1.5px solid rgba(255,255,255,.35);cursor:pointer}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.big{width:76px;height:76px;font-size:1.5rem;background:var(--velvet);border-color:var(--velvet-line)}
/* staff directory: a wall of faces, name and role under each */
.avatar.xl{width:86px;height:86px;font-size:1.7rem;background:var(--velvet);color:#fff;border:none}
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.person{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;
  box-shadow:var(--shadow-sm)}
.person.tappable{cursor:pointer;transition:border-color .12s,box-shadow .12s}
.person.tappable:hover{border-color:var(--velvet);box-shadow:var(--shadow-md)}
.person .pn{font-family:var(--font-head);font-weight:600;font-size:.95rem;margin-top:8px;line-height:1.25}
.person .pp{font-size:.8rem;color:var(--text)}
.person .pl{font-size:.72rem;color:var(--muted)}
@media (max-width:520px){
  .people-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:9px}
  .avatar.xl{width:66px;height:66px;font-size:1.3rem}
  .person{padding:12px 6px}
}

/* clock card */
.clock-card{text-align:center;background:linear-gradient(140deg,var(--velvet-deep),var(--velvet) 60%,var(--velvet-mid));
  color:#fff;border:none;box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.clock-card::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%);top:-90px;right:-70px;pointer-events:none}
.clock-card .time{font-family:var(--font-head);font-size:2.4rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.clock-card .date{opacity:.82;margin-bottom:14px;font-size:.9rem}
.clock-card .status{margin-top:12px;font-size:.88rem;opacity:.9}
.clock-card .btn{background:#fff;color:var(--velvet);width:100%;margin-top:8px;font-weight:600}
.clock-card .btn:hover{background:var(--walnut-soft)}
.clock-card .btn.out{background:var(--oak);color:#fff}
.clock-card .btn.out:hover{background:#6a3400}
/* A phone hiding its network (4 Oct 2026): the note on the clock card, and
   the steps to switch it off, drawn after the phone's own Settings screens. */
.clock-card .relay-note{position:relative;z-index:1;background:var(--skin-soft);color:var(--velvet);border-radius:12px;
  padding:12px;margin:2px 0 10px;text-align:left}
.relay-note .rn-head{display:flex;align-items:center;gap:8px;font-size:.92rem}
.relay-note .rn-head .lu{width:18px;height:18px;flex:none}
.relay-note p{font-size:.8rem;line-height:1.5;color:var(--velvet-mid);margin:6px 0 10px}
.clock-card .relay-note .btn{background:var(--velvet);color:#fff;margin-top:0;width:100%}
.rh-sub{font-size:.85rem;color:var(--muted);margin:0 0 6px}
.rh-step{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.rh-step b{display:block;font-size:.9rem;font-weight:600;color:var(--text)}
.rh-n{width:24px;height:24px;border-radius:50%;background:var(--velvet-soft);color:var(--velvet);font-size:.78rem;font-weight:600;
  display:flex;align-items:center;justify-content:center}
.rh-row{display:flex;align-items:center;gap:8px;margin-top:7px;background:#fff;border:1px solid var(--line-strong);border-radius:10px;
  padding:6px 10px;font-size:.8rem;color:#1c1c1e}
.rh-row.rh-inline{display:inline-flex}
.rh-row .lu{width:16px;height:16px;flex:none}
.rh-grow{flex:1;min-width:0}
.rh-dim{color:#8e8e93}
.rh-ic{width:24px;height:24px;border-radius:7px;color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.rh-ic.gear{background:#8e8e93}
.rh-ic.wifi{background:#0a84ff}
.rh-ic.vpn{background:#e6f4ea;color:#137333;border-radius:50%}
.rh-tick{color:#0a84ff}
.rh-row .rh-info{color:#0a84ff;width:18px;height:18px}
.rh-ring{border:2px solid var(--rose);border-radius:999px;padding:1px}
.rh-ring.round{display:inline-flex}
.rh-pill{font-weight:600;color:#1a73e8;padding:2px 10px}
.rh-tg{width:34px;height:20px;border-radius:999px;background:#e5e5ea;display:inline-flex;align-items:center;padding:2px;flex:none}
.rh-tg i{width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.rh-tg.on{background:#34c759;justify-content:flex-end}
.rh-tg.on.droid{background:#1a73e8}
.rh-tg.droid:not(.on){background:#dadce0}
.rh-row .rh-arrow{color:#8e8e93;width:14px;height:14px}
.rh-search{display:flex;align-items:center;gap:8px;margin-top:7px;background:#eef0f4;border-radius:999px;padding:6px 12px;
  font-size:.8rem;color:#3c4043}
.rh-search .lu{width:15px;height:15px}
.rh-note{font-size:.75rem;color:var(--muted);margin-top:5px}
.rh-i{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
  border:1.5px solid currentColor;font-size:.65rem;font-weight:700;vertical-align:1px}

/* balances chips */
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px}
.chip{background:var(--velvet-soft);border:1px solid var(--velvet-line);border-radius:13px;padding:11px 8px;text-align:center}
.chip .n{font-weight:600;font-size:1.25rem;color:var(--velvet);line-height:1.1}
.chip .l{font-size:.69rem;color:var(--muted);margin-top:3px;line-height:1.3}

/* Leave balances as bubbles: the number left fills the circle, everything
   else is caption. Each bucket keeps its own colour, so Annual is the same
   circle every month and a glance is enough to find it. */
.bubbles{display:flex;flex-wrap:wrap;gap:14px}
.bub{width:98px;text-align:center}
.bub .ring{width:84px;height:84px;margin:0 auto;border-radius:50%;display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  background:var(--bub-soft);border:2px solid var(--bub);color:var(--bub)}
.bub .n{font-family:var(--font-head);font-weight:600;font-size:1.6rem;line-height:1;
  font-variant-numeric:tabular-nums}
.bub .u{font-size:.55rem;letter-spacing:.09em;text-transform:uppercase;opacity:.72;margin-top:2px}
.bub .l{font-size:.72rem;font-weight:600;margin-top:8px;line-height:1.25}
.bub .sub{font-size:.6rem;color:var(--muted);margin-top:2px;line-height:1.25}
@media (max-width:520px){
  .bubbles{gap:10px;justify-content:space-between}
  .bub{width:78px}
  .bub .ring{width:70px;height:70px}
  .bub .n{font-size:1.35rem}
}

/* The leave tab reads left to right: what you have and what you asked for on
   one side, when you can take it on the other. Under 900px they stack. */
/* The calendar leads and takes the wider half: on this tab the question is
   "which day can I take", and the balances answer a smaller question beside
   it. Under 900px they stack, calendar still first. */
.leave-split{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:16px;align-items:start}
.leave-split > *{min-width:0}
.leave-col{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:900px){.leave-split{grid-template-columns:1fr}}
/* The narrower column dials everything down a notch rather than squeezing it. */
.leave-side .card h2{font-size:.98rem}
.leave-side .bub{width:84px}
.leave-side .bub .ring{width:70px;height:70px}
.leave-side .bub .n{font-size:1.35rem}
.leave-side .bubbles{gap:10px}
.leave-side .item .t{font-size:.9rem}
.leave-side .item .s{font-size:.78rem}

/* modal */
#modal-root:empty{display:none}
.modal-back{position:fixed;inset:0;background:rgba(43,19,48,.45);backdrop-filter:blur(3px);z-index:50;display:flex;align-items:flex-end;justify-content:center}
@media(min-width:640px){.modal-back{align-items:center}}
.modal{background:#fff;width:100%;max-width:520px;border-radius:22px 22px 0 0;max-height:88dvh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
@media(min-width:640px){.modal{border-radius:22px}}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 8px;flex-shrink:0}
.modal-head h3{font-size:1.2rem}
.modal-body{padding:4px 20px 12px;overflow-y:auto;flex:1;min-height:0}
.modal-foot{padding:14px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);flex-shrink:0;display:flex;gap:10px}
.modal-foot .btn{flex:1}
.x{font-size:1.5rem;color:var(--muted);padding:4px 10px;line-height:1}

/* A bill of several pages: which to save (7 Oct 2026). Small pages side by
   side; the ticked ones carry the brand's border. */
.pdf-pages{margin:8px 0 0;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.pp-ask{margin:0 0 8px;font-size:.84rem;line-height:1.45}
.pp-ask .hint{display:block;margin-top:2px}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
@media(max-width:640px){.pp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pp{display:flex;flex-direction:column;gap:6px;min-width:0;padding:6px;border:2px solid var(--line);border-radius:10px}
.pp.on{border-color:var(--velvet)}
/* The picture opens the page; only the tick box ticks. */
.pp-view{display:block;width:100%;padding:0;border:0;background:none;border-radius:6px;cursor:zoom-in}
.pp-view:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.pp-view canvas{display:block;width:100%;height:auto;min-height:60px;background:#fff;border-radius:4px;box-shadow:0 1px 3px rgba(43,19,48,.12)}
.pp-tick{display:flex;align-items:center;gap:6px;margin:0;font-size:.76rem;font-weight:600;color:var(--muted);cursor:pointer;min-height:28px}
.pp.on .pp-tick{color:var(--velvet)}
.pp-tick input{width:18px;height:18px;margin:0;flex:none}
.pdf-pages .file-btns{margin-top:8px;flex-wrap:wrap}
/* A page up close sits above the claim box it came from. */
.slip-viewer.pp-big{z-index:70}
/* A receipt in another currency: the RM amount is typed, its proof attached. */
.fx-box{margin:8px 0 0;padding:10px 12px;border:1px solid var(--line-strong);border-radius:12px;background:var(--card)}
.fx-ask{margin:0 0 8px;font-size:.84rem;line-height:1.45}
.fx-box .file-btns{flex-wrap:wrap}
/* The other receipts one transaction paid for (7 Oct 2026). */
.fx-more{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-strong)}
.fx-more-ask{margin:0 0 8px;font-size:.84rem;line-height:1.45}
.fx-more-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.fx-more-list:empty{display:none}
.fx-more-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.fx-more-main{min-width:0;flex:1}
.fx-more-name{font-weight:600;font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-more-bad{color:var(--rose)}

/* A payslip on a phone: full screen, the × always in reach at the top
   (6 Oct 2026). The bar clears the notch; the pages scroll under it. */
body.sv-open{overflow:hidden}
.slip-viewer{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--bg)}
.sv-bar{display:flex;align-items:center;gap:8px;flex-shrink:0;
  padding:calc(8px + env(safe-area-inset-top)) 12px 8px calc(6px + env(safe-area-inset-left));
  background:var(--card);border-bottom:1px solid var(--line);box-shadow:0 1px 6px rgba(43,19,48,.06)}
.sv-x{flex:0 0 auto;width:44px;height:44px;border-radius:12px;font-size:1.9rem;line-height:1;color:var(--velvet);
  display:flex;align-items:center;justify-content:center}
.sv-x:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.sv-title{flex:1;min-width:0;font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-bar .btn{flex:0 0 auto}
.sv-pages{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:8px 8px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px}
.sv-pages canvas{display:block;width:100%;height:auto;background:#fff;border-radius:6px;box-shadow:0 1px 4px rgba(43,19,48,.12)}
.sv-pages.zoomed{align-items:flex-start}
.sv-pages.zoomed canvas{width:200%;max-width:none}
.sv-note{margin:40px 16px;text-align:center;color:var(--muted);font-size:.9rem;line-height:1.5}
@media(max-width:360px){.sv-zoom{display:none}}
/* Any file opened from a page - a receipt, its proof, a leave attachment, a
   payslip on a phone (7 Oct 2026). Over the page and any box open on it, under
   the toasts. On a computer a PDF page is drawn at a readable width, not the
   screen's; a photo shows whole, and Zoom doubles either. */
.slip-viewer.fv{z-index:58}
.fv .sv-pages canvas{width:min(100%,900px)}
.fv .sv-pages.zoomed canvas{width:min(200%,1800px)}
.fv-img{display:block;flex:none;max-width:100%;height:auto;object-fit:contain;
  max-height:calc(100vh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height:calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  background:#fff;border-radius:6px;box-shadow:0 1px 4px rgba(43,19,48,.12)}
.sv-pages.zoomed .fv-img{width:200%;max-width:none;max-height:none}

/* toast */
#toast-root{position:fixed;top:16px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:60;pointer-events:none}
.toast{background:var(--velvet-deep);color:#fff;padding:12px 20px;border-radius:13px;font-size:.9rem;max-width:88vw;
  box-shadow:var(--shadow-lg);animation:pop .2s cubic-bezier(.2,.9,.3,1.2)}
.toast.err{background:var(--rose)}
.toast.ok{background:var(--hillside-deep)}
/* Pull down to refresh (6 Oct 2026): a pill that follows the finger down from
   under the top edge, turns solid once letting go would refresh, and spins
   while the page reloads. */
.ptr{position:fixed;left:50%;top:calc(env(safe-area-inset-top, 0px) + 8px);z-index:61;display:flex;align-items:center;gap:8px;
  padding:7px 14px 7px 10px;border-radius:999px;background:var(--card);color:var(--velvet);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);font-size:.82rem;font-weight:600;white-space:nowrap;pointer-events:none;
  transform:translate(-50%,-52px);opacity:0}
.ptr.settle{transition:transform .2s ease,opacity .2s ease}
.ptr-ico{display:flex}
.ptr-ico svg{width:18px;height:18px}
.ptr.ready{background:var(--velvet);color:#fff;border-color:var(--velvet)}
.ptr.busy .ptr-ico svg{animation:ptr-spin .8s linear infinite}
@keyframes ptr-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ptr.settle{transition:none}.ptr.busy .ptr-ico svg{animation:none}}
@keyframes pop{from{transform:translateY(-10px) scale(.97);opacity:0}to{transform:none;opacity:1}}

/* login */
.login-wrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 24px;gap:20px;
  background:radial-gradient(1000px 460px at 50% -12%,var(--velvet-soft),var(--bg) 62%)}
.login-logo{height:56px;width:auto;display:block}
.login-card{width:100%;max-width:410px;border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-md)}
.login-wrap h1{font-size:1.5rem;letter-spacing:-.015em}
.tabs{display:flex;background:var(--velvet-soft);border-radius:12px;padding:4px;margin-bottom:8px}
.tabs button{flex:1;padding:10px;border-radius:9px;font-weight:600;font-size:.92rem;color:var(--muted);transition:all .15s}
.tabs button.active{background:#fff;color:var(--velvet);box-shadow:var(--shadow-sm)}

/* calendar */
.cal{width:100%;border-collapse:collapse;table-layout:fixed}
.cal th{font-size:.68rem;color:var(--muted);padding:6px 4px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.cal td{border:1px solid var(--line);height:54px;vertical-align:top;padding:4px;font-size:.72rem}
.cal td .d{font-weight:600;font-size:.76rem}
.cal td.hol{background:#ffe7ad}
.cal td.today{outline:2px solid var(--velvet);outline-offset:-2px;border-radius:4px}
.cal .who{display:block;background:var(--velvet-soft);color:var(--velvet);border-radius:5px;padding:1px 4px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* leave calendar: who is away, and whether a clinician slot is still open */
.cal td.calc{height:auto;min-height:74px;cursor:pointer}
/* The holiday's name, said out loud on the day itself. It wraps to a second
   line rather than truncating: a phone has no hover, so "Merd…" would tell
   nobody anything. Anything longer than two lines is clipped, and the full
   name is in the tooltip and the day's pop-up. */
/* The holiday's name sits beside the date, as plain words. No chip: a label
   around a label is one box too many when the cell already has slot circles
   and names in it. */
.cal .cal-ph{display:inline;font-size:.5rem;font-weight:700;line-height:1.25;color:#8a4b12;
  margin-left:3px;white-space:normal;overflow-wrap:anywhere}
.cal td.calc:hover{background:var(--velvet-soft)}
.cal .covs{display:flex;flex-direction:column;gap:3px;margin-top:3px;align-items:flex-start}
/* one circle per leave slot: bright green open, bright red taken. The two
   regions sit on their own tinted strips so a glance separates them. */
.slot-row{display:flex;align-items:center;gap:3px;flex-wrap:wrap;line-height:1;
  padding:2px 4px;border-radius:6px;width:100%}
.slot-row.kl{background:var(--velvet-soft)}
.slot-row.ru{background:var(--walnut-soft)}
.slot-lbl{font-size:.62rem;font-weight:700;letter-spacing:.03em;color:var(--muted);flex:none}
/* An open slot is an empty seat: green ring, nothing inside. A taken one is
   filled solid red, so "used up" carries the visual weight. */
.slot{display:inline-block;width:11px;height:11px;border-radius:50%;flex:none;vertical-align:-1px}
.slot.free{background:transparent;border:1px solid #16c264}
/* Held by a request nobody has decided yet: the slot is spoken for, but the
   circle is only outlined. Approving fills it solid. */
.slot.held{background:transparent;border:2px solid #f5333f}
.slot.taken{background:#f5333f}
/* Not "taken" - there was never a slot to take. A day the clinic simply
   cannot spare anybody, drawn grey and hollow so it reads as absence of an
   option rather than as somebody else's holiday. */
.slot.none{background:transparent;border:1px dashed var(--muted);opacity:.6}
.slot.tbc{background:var(--line);border:1px solid var(--line);opacity:.8}
.slot-more{font-size:.55rem;font-weight:700;color:var(--muted)}
/* Phones: a cell is ~43px wide, so the label and two circles have to be
   coaxed onto one line - the day grid is unreadable when every row wraps. */
@media (max-width:520px){
  .cal td.calc{padding:3px 2px}
  .slot{width:9px;height:9px}
  .slot.free{border-width:1px}
  .slot-row{gap:1.5px;padding:1.5px 2px}
  .slot-lbl{font-size:.55rem;letter-spacing:0}
}
.notice.bad{background:var(--rose-soft);border-color:#eccdd6;color:var(--rose)}

/* The calendar's footer: the key on the left, Apply on the right - the button
   sits where the eye lands after reading which days are still open. */
.cal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:10px}
.cal-foot .btn{flex:none}

/* Approve and reject, side by side and wordless: a tick and a cross. Both ask
   before they act, so an icon costs nothing in safety. */
.side.decide{display:flex;gap:8px;align-items:center;flex:none}
.btn.iconbtn{width:40px;height:40px;padding:0;border-radius:11px;display:inline-flex;
  align-items:center;justify-content:center;border:1.5px solid transparent}
/* These icons live outside .ico, so they need the line-drawing rules spelled
   out - without fill:none a path renders as a filled black blob. */
.btn.iconbtn svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn.iconbtn.ok{background:var(--hillside-soft);color:var(--hillside-deep);border-color:#cfdcb8}
.btn.iconbtn.ok:hover{background:var(--hillside-deep);color:#fff}
.btn.iconbtn.no{background:var(--rose-soft);color:var(--rose);border-color:#eccdd6}
.btn.iconbtn.no:hover{background:var(--rose);color:#fff}

/* Who is away, named on the day itself - the approver's real question. */
/* Names, plainly. The circles already say approved from pending - solid
   against outlined - so the names do not need a second badge to carry it;
   a waiting one leans over, and that is enough. */
.cal .cal-who{display:flex;flex-wrap:wrap;column-gap:2px;margin-top:2px;line-height:1.25}
.cal .cal-who .wn{font-size:.53rem;font-weight:600;color:#8d8494;white-space:nowrap}
.cal .cal-who .wn:not(:last-child)::after{content:",";margin-right:2px}
.cal .cal-who .wn.pend{font-style:italic}
.cal .cal-who .wn.more{color:var(--muted);font-weight:500}

/* Tapping a request rings its days on the calendar beside it, and the line
   under the calendar answers the question the row is asking. */
/* The day a request is asking about, filled whole and in a colour that is not
   used for anything else on this calendar: amber means public holiday, green
   and red mean slots, velvet means hover. Indigo means "this is the day you
   are looking at". */
/* No border - the colour alone says it. Bright periwinkle is not used
   anywhere else on this calendar: amber means public holiday, green and red
   mean slots, velvet means hover. */
.cal td.calc.focus{background:#aec4ff}
.cal td.calc.focus .d{color:#1b2a6b;font-weight:800}
.cal td.calc.focus:hover{background:#9db7ff}
.apr-leave .item.lv-row{cursor:pointer;border-radius:10px;transition:background .12s}
.apr-leave .item.lv-row:hover{background:var(--velvet-soft)}
.apr-leave .item.lv-row.on{background:var(--velvet-soft);box-shadow:inset 3px 0 0 var(--velvet)}
.focus-line{margin:8px 0 0;font-size:.76rem;color:var(--muted);background:var(--velvet-soft);
  border-radius:8px;padding:6px 9px;line-height:1.4}
.focus-line b{color:var(--velvet)}
.focus-line b.ok{color:var(--hillside-deep)}
.focus-line b.no{color:var(--rose)}
/* Whose day off this is, said as a job and not as an afterthought at the end
   of a sentence - it is the first thing you weigh when you read the day. */
.badge.job{background:var(--lavender-soft);color:var(--lavender);font-weight:700;margin-right:6px}

/* The three to-do cards wear their own colours, the same three the approval
   queues use: your list, the box that hands work out, and the whole board. */
/* The two lists sit side by side - what is on your plate, and what is on the
   team's - because a manager reads them against each other. The box that
   hands work out sits below, since it is a thing you do, not a thing you
   scan. Under 1040px there is no room for two lists, so they stack. */
.todo-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.todo-split > *{min-width:0}
@media (max-width:1040px){.todo-split{grid-template-columns:1fr}}
/* A policy people are held to, laid out so the clause they need is findable.
   The half that applies to the reader is marked and lifted. */
.notice-card{border-left:6px solid var(--oak);background:var(--oak-soft)}
.policy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:16px;align-items:stretch}
.policy h2{font-size:1.02rem}
.policy.yours{border-color:var(--velvet);box-shadow:0 0 0 2px var(--velvet-line),var(--shadow-sm)}
.policy.terms{border-left:5px solid var(--lavender)}
.policy.family{border-left:5px solid var(--hillside-deep)}
.policy-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.policy-list li{font-size:.88rem;line-height:1.5}
.policy-list li::marker{color:var(--velvet);font-weight:700}
.policy.terms .policy-list li::marker{color:var(--lavender)}
.policy.family .policy-list li::marker{color:var(--hillside-deep)}
/* The rules that end a career here if broken read red - they are not the same
   kind of rule as "socks with no holes". */
.policy.strict{border-left:5px solid var(--rose);background:linear-gradient(180deg,var(--rose-soft),#fff 60%)}
.policy.strict .policy-list li::marker{color:var(--rose)}
.policy.checks{border-left:5px solid var(--oak)}
.sop-check{font-size:.88rem;line-height:1.7}
.sop-check .badge{margin-left:2px}

/* The ten non-negotiables. The quote leads because it is the line people
   repeat; the bullets are what they are actually held to. */
.culture-intro{border-left:6px solid var(--velvet);background:linear-gradient(180deg,var(--velvet-soft),#fff 70%)}
.culture-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:16px;align-items:stretch}
.cult{border-top:4px solid var(--velvet)}
.cult-head{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.cult-head h2{margin:0;font-size:1.02rem;line-height:1.25}
.cult-n{width:30px;height:30px;flex:none;border-radius:9px;background:var(--velvet);color:#fff;
  font-family:var(--font-head);font-weight:600;font-size:.95rem;
  display:flex;align-items:center;justify-content:center}
.cult-q{font-family:var(--font-head);font-size:1rem;line-height:1.45;color:var(--velvet);
  border-left:3px solid var(--velvet-line);padding-left:11px;margin:0 0 10px}
.cult-p{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.cult-p li{font-size:.85rem;line-height:1.5;color:var(--text)}
.cult-p li::marker{color:var(--velvet)}
/* Each value takes the next brand colour, so the page reads as ten things
   rather than one long wall. */
.culture-grid .cult:nth-child(5n+2){border-top-color:var(--hillside-deep)}
.culture-grid .cult:nth-child(5n+2) .cult-n{background:var(--hillside-deep)}
.culture-grid .cult:nth-child(5n+2) .cult-q{color:var(--hillside-deep);border-left-color:#cfdcb8}
.culture-grid .cult:nth-child(5n+2) .cult-p li::marker{color:var(--hillside-deep)}
.culture-grid .cult:nth-child(5n+3){border-top-color:var(--oak)}
.culture-grid .cult:nth-child(5n+3) .cult-n{background:var(--oak)}
.culture-grid .cult:nth-child(5n+3) .cult-q{color:var(--oak);border-left-color:#e6d3bd}
.culture-grid .cult:nth-child(5n+3) .cult-p li::marker{color:var(--oak)}
.culture-grid .cult:nth-child(5n+4){border-top-color:var(--lavender)}
.culture-grid .cult:nth-child(5n+4) .cult-n{background:var(--lavender)}
.culture-grid .cult:nth-child(5n+4) .cult-q{color:var(--lavender);border-left-color:#d9d3e6}
.culture-grid .cult:nth-child(5n+4) .cult-p li::marker{color:var(--lavender)}
.culture-grid .cult:nth-child(5n+5){border-top-color:#2f5a78}
.culture-grid .cult:nth-child(5n+5) .cult-n{background:#2f5a78}
.culture-grid .cult:nth-child(5n+5) .cult-q{color:#2f5a78;border-left-color:#c9d9e6}
.culture-grid .cult:nth-child(5n+5) .cult-p li::marker{color:#2f5a78}

/* ===========================================================================
   GRADING — the score, the band it falls in, and what the band buys.
   The letter is the loudest thing on the screen because it is the thing
   everyone actually wants to know.
   ======================================================================== */
.grade-head{border-left:6px solid var(--line-strong)}
.grade-head.band-a{border-left-color:var(--velvet);background:linear-gradient(180deg,var(--velvet-soft),#fff 70%)}
.grade-head.band-b{border-left-color:var(--hillside-deep);background:linear-gradient(180deg,var(--hillside-soft),#fff 70%)}
.grade-head.band-c{border-left-color:var(--oak);background:linear-gradient(180deg,var(--skin-soft),#fff 70%)}
.grade-top{display:flex;align-items:center;gap:16px}
.grade-letter{font-family:var(--font-head);font-weight:600;font-size:3.1rem;line-height:1;
  width:74px;height:74px;flex:none;border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:#fff;box-shadow:var(--shadow-sm)}
.band-a .grade-letter{color:var(--velvet)}
.band-b .grade-letter{color:var(--hillside-deep)}
.band-c .grade-letter{color:var(--oak)}
.grade-num b{font-family:var(--font-head);font-size:1.7rem;line-height:1.1;display:block}
/* The bar carries the two thresholds as notches, so "how far off a B" is a
   look rather than a sum. */
.grade-bar{position:relative;height:9px;border-radius:99px;background:var(--line);margin:14px 0 12px;overflow:hidden}
.grade-bar i{display:block;height:100%;border-radius:99px;background:var(--velvet);transition:width .3s}
.band-b .grade-bar i{background:var(--hillside-deep)}
.band-c .grade-bar i{background:var(--oak)}
.grade-bar s{position:absolute;top:0;bottom:0;width:2px;background:rgba(43,19,48,.28)}
.grade-bar s.at80{left:80%}
.grade-bar s.at50{left:50%}
.grade-gets{display:flex;flex-wrap:wrap;gap:6px}
.grade-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.grade-split > *{min-width:0}
@media (max-width:900px){.grade-split{grid-template-columns:1fr}}
.tier-block + .tier-block{margin-top:14px}
.tier-head{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);padding-bottom:5px;border-bottom:1px solid var(--line);margin-bottom:6px}
.crit{display:flex;align-items:flex-start;gap:10px;padding:7px 2px}
.crit + .crit{border-top:1px solid var(--line)}
.crit .tick{margin-top:2px}
.crit-main{flex:1;min-width:0}
.crit-t{font-weight:600;font-size:.89rem;line-height:1.35}
.crit-d{font-size:.72rem;color:var(--muted);line-height:1.4;margin-top:2px}
.crit-r{font-size:.72rem;color:var(--rose);font-weight:600;line-height:1.4;margin-top:2px}
.crit-w{font-weight:700;font-size:.82rem;color:var(--muted);flex:none;
  font-variant-numeric:tabular-nums;margin-top:1px}
.crit.on .crit-t{color:var(--velvet)}
.crit.on .crit-w{color:var(--velvet)}
span.tick{display:inline-block;cursor:default}

/* Chosen, not typed. Few enough options to show them all, so a row of pills
   beats a dropdown you have to open, read and shut again. */
/* A box that makes tasks, not a form: one line to type into with the ＋ and
   the button on the same row, and everything else folded behind a toggle. */
.addbar{display:flex;align-items:center;gap:8px;margin-top:2px}
.addbar .addplus{font-size:1.15rem;color:var(--muted);flex:none;line-height:1}
.addbar input,.addbar textarea{flex:1;min-width:0}
.addbar textarea,textarea.grow{resize:none;overflow:hidden;line-height:1.45;padding-top:11px;padding-bottom:11px}
.addbar .addplus,.addbar .btn{align-self:flex-start;margin-top:7px}
.addbar .btn{flex:none}
.hint.tiny{font-size:.7rem;margin:5px 0 0;color:var(--muted)}
.opt-toggle{margin-top:9px;padding:0;font-size:.79rem;font-weight:600;color:var(--muted);
  background:none;border:0;text-align:left}
.opt-toggle:hover{color:var(--velvet)}
.todo-card.give .opt-toggle:hover{color:var(--oak)}
.opt-body[hidden]{display:none}
.opt-body label:first-child{margin-top:10px}
.todo-card.compose label{margin-top:10px}
.pillset{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.pill{padding:6px 12px;border-radius:999px;border:1.5px solid var(--line-strong);background:#fff;
  font-size:.8rem;font-weight:600;color:var(--muted);line-height:1.25;transition:all .12s}
.pill:hover{border-color:var(--velvet);color:var(--velvet)}
.pill.on{background:var(--velvet);border-color:var(--velvet);color:#fff}
/* Delete is a bin, not a word: it repeats on every row, and a word there
   costs more width than the whole right-hand column is worth. Quiet until
   you reach for it. */
/* A row action is a mark, not a coloured button (Giselle, 13 Sep 2026: "use
   icon to represent ... No need background colour"). .btn paints every button
   velvet and gives it a shadow, which turned these into solid purple tiles
   sitting on a quiet list - so both are stripped back to the icon itself and
   only take a tint when the pointer is actually on them. A phone never hovers,
   so there they are plain throughout. */
.btn.iconbtn.del{width:32px;height:32px;border-radius:9px;color:var(--muted);border-color:transparent;
  background:none;box-shadow:none}
.btn.iconbtn.del svg{width:17px;height:17px}
.btn.iconbtn.del:hover{background:var(--rose-soft);color:var(--rose)}
/* Due dates, inline with the description. */
/* A badge sitting in the description line, not stacked off to the right:
   scaled to the small type around it so it reads as part of the sentence. */
.item .s .badge{font-size:.66rem;padding:1px 6px;vertical-align:1px}
.due{font-weight:600;color:var(--muted)}
.due.now{color:var(--oak)}
.due.over{color:var(--rose)}

/* Everyone's list is a board, not a reading list: rows tighten, the tick and
   the bin shrink, and the right-hand column carries one button instead of a
   badge stack. */
.todo-card.team .list .item{padding:7px 2px}
/* Notes on a board. Paper-warm, softly shadowed, and sized so three or four
   sit across a full-width card and two across a half-width one. The writing
   keeps the whole width; the tick and the bin sit along the bottom. */
.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px;align-items:start}
.note{background:var(--walnut-soft);border:1px solid var(--line);border-radius:12px;
  padding:11px 12px 9px;display:flex;flex-direction:column;gap:6px;
  box-shadow:0 1px 2px rgba(43,19,48,.06);transition:box-shadow .12s,transform .12s}
.note:hover{box-shadow:0 3px 10px rgba(43,19,48,.10);transform:translateY(-1px)}
/* A task written as a paragraph keeps its line breaks - a note is where that
   belongs - but clamps at six lines so one long one cannot swallow the board. */
.note .nt{font-weight:600;font-size:.87rem;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.note .nm{font-size:.7rem;color:var(--muted);line-height:1.4}
.note .nfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.note.urgent{background:var(--rose-soft);border-color:#eccdd6}
.note.done{background:var(--bg)}
.note.done .nt{text-decoration:line-through;color:var(--muted);font-weight:500}
.note .btn.iconbtn.del{width:26px;height:26px;border-radius:7px}
.note .btn.iconbtn.del svg{width:14px;height:14px}
.note .tick{width:19px;height:19px;border-radius:6px}
.note .tick::after{left:5px;top:2px;width:5px;height:9px}
/* Everyone's board holds more, so its notes run a size smaller. */
.todo-card.team .notes{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:9px}
.todo-card.team .note{padding:9px 10px 8px}
.todo-card.team .note .nt{font-size:.83rem;-webkit-line-clamp:4}
.todo-card.team .note .nm{font-size:.68rem}
.pill-other{margin-top:8px}
.pill-other[hidden]{display:none}
.todo-card.give .pill:hover{border-color:var(--oak);color:var(--oak)}
.todo-card.give .pill.on{background:var(--oak);border-color:var(--oak);color:#fff}
/* Nine categories on a 375px screen is eight rows at full size. Smaller type
   and tighter padding fits two to a row and roughly halves the stack. */
@media (max-width:520px){
  .pillset{gap:5px}
  .pill{font-size:.72rem;padding:5px 9px}
}
.todo-card{padding-top:0;overflow:hidden;border-left:5px solid var(--line-strong)}
.todo-card > h2:first-child,.todo-card > .row.sb:first-child{margin:0 -18px 14px;padding:14px 18px;
  border-bottom:1px solid var(--line)}
.todo-card h2{font-size:1.02rem}
.todo-card.mine{border-left-color:var(--velvet)}
.todo-card.mine > h2:first-child{background:var(--velvet-soft);color:var(--velvet)}
.todo-card.give{border-left-color:var(--oak)}
.todo-card.give > h2:first-child{background:var(--oak-soft);color:var(--oak)}
.todo-card.team{border-left-color:var(--hillside-deep)}
.todo-card.team > .row.sb:first-child{background:var(--hillside-soft)}
.todo-card.team h2{color:var(--hillside-deep)}

/* A note pinned to the top of a screen: the rules people break by not having
   read them, kept visible rather than folded away. */
.pinned-note{background:var(--walnut-soft);border-color:var(--walnut);border-left:5px solid var(--oak)}
.pinned-note .pin-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;font-size:1rem;color:var(--oak);cursor:pointer;background:none;border:0;
  padding:0;text-align:left;font-family:inherit}
.pinned-note .pin-caret{font-size:.8rem;opacity:.7;flex:none}
.pin-body[hidden]{display:none}
.pinned-note .pin-list{margin:0 0 0 18px;font-size:.82rem;line-height:1.55;color:var(--text)}
.pinned-note .pin-list li{margin-top:3px}
.pinned-note summary{font-size:.86rem;color:var(--oak)}

/* Speak Up: a calmer surface than the rest of the portal - this screen is
   opened by someone who may be having a bad week. */
.speakup-intro{background:var(--velvet-soft);border-color:var(--velvet-line)}
.speakup-intro h2{color:var(--velvet)}
.speakup-intro p{font-size:.9rem;line-height:1.6;margin-top:8px}
.chk-list{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.chk{display:flex;align-items:flex-start;gap:9px;padding:7px 8px;border-radius:9px;cursor:pointer;
  font-size:.9rem;line-height:1.35}
.chk:hover{background:var(--velvet-soft)}
.chk input{width:18px;height:18px;flex:none;margin-top:1px}

/* Approvals: each queue wears its own colour and mark, so an approver knows
   what kind of decision they are making before reading a word of it. */
.apr{border-left:5px solid var(--line-strong);padding-top:0;overflow:hidden}
.apr .apr-head{display:flex;align-items:center;gap:11px;margin:0 -16px 12px;padding:13px 16px;
  border-bottom:1px solid var(--line)}
.apr .apr-head > div:first-of-type{flex:1}     /* the title takes the slack, Approve all sits right */
.apr .apr-head .btn{flex:none}
.apr .apr-head h2{margin:0;font-size:1.02rem}
.apr .apr-ico{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;flex:none}
.apr .apr-ico svg{width:19px;height:19px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.apr-leave{border-left-color:var(--velvet)}
.apr-leave .apr-head{background:var(--velvet-soft)}
.apr-leave .apr-ico{background:var(--velvet);color:#fff}
.apr-claim{border-left-color:var(--oak)}
.apr-claim .apr-head{background:var(--oak-soft)}
.apr-claim .apr-ico{background:var(--oak);color:#fff}
.apr-ot{border-left-color:var(--hillside-deep)}
.apr-ot .apr-head{background:var(--hillside-soft)}
.apr-ot .apr-ico{background:var(--hillside-deep);color:#fff}
/* Leftover leave being cashed out (30 Sep 2026): a director's section of its own. */
.apr-cash{border-left-color:var(--lavender)}
.apr-cash .apr-head{background:var(--lavender-soft)}
.apr-cash .apr-ico{background:var(--lavender);color:#fff}

/* The leave calendar sits BESIDE the queue it informs: "who else is off that
   week" is the question every row in front of the approver raises, and the
   answer should not be a scroll away. Under 900px there is no room for two
   columns, so the calendar stacks above the list. */
/* Overtime and Claims are short queues judged on a couple of numbers each, so
   they sit side by side under Leave and run a size smaller. Leave keeps the
   full width - it carries a calendar. */
.apr-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.apr-pair > *{min-width:0}
@media (max-width:900px){.apr-pair{grid-template-columns:1fr}}
.apr-pair .apr-head{padding:10px 16px;margin-bottom:8px;gap:9px}
.apr-pair .apr-head h2{font-size:.95rem}
.apr-pair .apr-ico{width:29px;height:29px;border-radius:8px}
.apr-pair .apr-ico svg{width:16px;height:16px}
.apr-pair .list .item{padding:9px 2px;gap:9px}
.apr-pair .item .t{font-size:.88rem}
.apr-pair .item .s{font-size:.76rem;line-height:1.35}
.apr-pair .ot-clock{margin:5px 0 1px}
.apr-pair .side.decide{gap:6px}
.apr-pair .btn.iconbtn{width:34px;height:34px;border-radius:9px}
.apr-pair .btn.iconbtn svg{width:17px;height:17px}
.apr-pair .rcpt{width:58px;height:58px}

.apr-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.apr-split > *{min-width:0}
@media (max-width:900px){.apr-split{grid-template-columns:1fr;gap:14px}}
/* Embedded, not a card: no panel of its own inside a panel. */
.cal-embed{min-width:0}
.cal-embed .row.sb{margin-bottom:6px;gap:8px}
.cal-embed h2{font-size:.95rem;margin:0}
.cal-embed input[type=month]{font-size:.78rem;padding:6px 8px}
.cal-embed .cal-foot{margin-top:8px}
.cal-embed .cal-foot .hint{font-size:.7rem}
/* Compact calendar: the same information at half the width. Cells give up
   their breathing room first, then the day number and the name chips. */
.cal.compact th{font-size:.58rem;padding:3px 1px}
.cal.compact td{padding:2px 1px}
.cal.compact td.calc{min-height:54px}
.cal.compact td .d{font-size:.66rem}
.cal.compact .cal-ph{font-size:.46rem;max-height:2.2em}
.cal.compact .cal-who{gap:1px;margin-top:1px}
.cal.compact .cal-who .wn{font-size:.46rem;padding:0 2px;border-radius:3px}
.cal.compact .covs{gap:2px;margin-top:2px}
.cal.compact .slot-row{gap:2px;padding:1px 3px;border-radius:5px}
.cal.compact .slot-lbl{font-size:.52rem;letter-spacing:0}
.cal.compact .slot{width:8px;height:8px}

/* Team Roster: your own chip, ringed, so you find yourself without reading
   every name on the month. */
.rota-chip.mine{box-shadow:0 0 0 1.5px var(--velvet)}

/* Your month and the team's, side by side: the comparison is the point, and
   scrolling between two calendars to make it is not. Below 1040px there is no
   honest way to fit two month grids, so they stack. */
.sched-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.sched-split > *{min-width:0}
@media (max-width:1040px){.sched-split{grid-template-columns:1fr;gap:16px}}
/* Half a screen wide, a rota cell is about 60px: the names ellipsis and the
   day pop-up spells them out. */
.sched-split .rota-grid{gap:3px}
.sched-split .rota-cell{min-height:64px;padding:3px}
.sched-split .rota-chip{font-size:.62rem;padding:0 4px}
.sched-split .rota-grid .dow{font-size:.6rem;letter-spacing:.03em;padding:2px 0}
/* Your roster and the team's wear different colours, so at a glance you know
   which calendar you are reading - velvet is yours, teal is the team's. The
   coloured band is the same height on both, which is what keeps the two month
   grids starting on the same line. */
.sched-card{padding-top:0;overflow:hidden;border-left:5px solid var(--line-strong)}
.sched-card > .row.sb:first-child{margin:0 -18px 0;padding:14px 18px;border-bottom:1px solid var(--line)}
.sched-card h2{font-size:1.02rem}
.sched-card.mine{border-left-color:var(--velvet)}
.sched-card.mine > .row.sb:first-child{background:var(--velvet-soft)}
.sched-card.mine h2{color:var(--velvet)}
.sched-card.team{border-left-color:#1d5f56}
.sched-card.team > .row.sb:first-child{background:#dff0ed}
.sched-card.team h2{color:#1d5f56}

/* Both cards carry a row in the same place under their heading - the month's
   tally on yours, the outlet tabs on the team's - so the two grids start on
   the same line and the weeks read straight across. */
.sched-tools{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:40px;margin:8px 0 12px}
.rota-tabs.sched-tools button{padding:6px 13px;font-size:.82rem}
/* One colour per person: the tint is set inline from the account id, so this
   only has to stop the outlet colours from overriding it. */
.rota-chip.person{font-weight:600}

/* Overtime asks one question - what does the clock actually say? The times
   are given as labelled values rather than a sentence, so they read at a
   glance, and a split shift stays visible as two sessions instead of being
   flattened into one long span nobody worked. */
/* One day, one row: however many times somebody clocked out and back in, the
   day stays on its own line. The line scrolls rather than wrapping, so a
   split shift on a phone is still one row and not four. */
.ot-clock{display:flex;flex-direction:column;gap:4px;margin:6px 0 2px}
.ot-day{display:flex;flex-wrap:nowrap;align-items:center;gap:5px;overflow-x:auto;
  scrollbar-width:thin;padding-bottom:2px}
.ot-day::-webkit-scrollbar{height:4px}
.ot-day::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:2px}
.cl-date{font-size:.68rem;font-weight:700;color:var(--muted);letter-spacing:.02em;
  white-space:nowrap;flex:none}
.cl-next{font-style:normal;font-size:.58rem;font-weight:800;opacity:.7;margin-left:2px}
.cl-auto{font-style:normal;font-size:.58rem;font-weight:800;color:var(--lavender);margin-left:2px}
.ot-clock .cl{font-size:.76rem;font-weight:600;background:var(--hillside-soft);color:var(--hillside-deep);
  border-radius:6px;padding:2px 8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ot-clock .cl b{font-weight:700;opacity:.68;margin-right:4px;font-size:.62rem;
  text-transform:uppercase;letter-spacing:.05em}
.ot-clock .cl.open{background:var(--rose-soft);color:var(--rose)}
.ot-clock .cl.tot{background:var(--velvet-soft);color:var(--velvet)}
.ot-clock .cl-sep{color:var(--muted);font-size:.72rem;font-weight:700}
.ot-clock .cl-note{font-size:.7rem;color:var(--muted)}
.ot-clock.none{font-size:.76rem;color:var(--rose);font-weight:600}
.ot-clock.quiet{font-size:.74rem;color:var(--muted)}
/* On a phone a split shift is six chips on a 375px row. The count drops out -
   two visible In/Out pairs already say "two sessions" - and the rest shrink. */
@media (max-width:520px){
  .ot-clock{gap:4px}
  .ot-clock .cl{font-size:.7rem;padding:2px 6px}
  .ot-clock .cl b{font-size:.58rem;margin-right:3px}
  .ot-clock .cl-note{display:none}
}

/* The receipt, beside the claim it justifies. A fixed square keeps a column
   of claims a column, whatever shape the photo is; the crop is a preview, and
   the tile opens the full image. */
.rcpt{width:76px;height:76px;flex:none;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:var(--velvet-soft);display:flex;align-items:center;justify-content:center;
  transition:border-color .12s,transform .12s}
.rcpt:hover{border-color:var(--velvet);transform:scale(1.03)}
.rcpt img{width:100%;height:100%;object-fit:cover;display:block}
.rcpt-lbl{font-size:.66rem;font-weight:700;letter-spacing:.06em;color:var(--velvet);text-transform:uppercase}
.rcpt.pdf{background:var(--oak-soft)}
.rcpt.pdf .rcpt-lbl{color:var(--oak)}
.rcpt.none{background:transparent;border-style:dashed;color:var(--muted);font-size:.58rem;font-weight:700;
  text-align:center;line-height:1.25;text-transform:uppercase;letter-spacing:.04em;cursor:default}
.item.with-rcpt .main{flex:1}
@media (max-width:520px){.rcpt{width:58px;height:58px}}

/* Stepping a month is the commonest move on a calendar; a month box is a poor
   way to say "next". The arrows keep the same weight as the schedule pair. */
.cal-arrow{min-width:32px;padding:4px 10px;font-size:1rem;line-height:1.1}
/* The two arrows and the month box are one control: they choose the month
   between them, so they sit together rather than at opposite ends of a row. */
.month-nav{display:flex;align-items:center;gap:6px;flex:none}
.month-nav input[type=month]{width:auto}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{text-align:left;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:10px 8px;border-bottom:1.5px solid var(--line-strong)}
.tbl td{padding:11px 8px;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:none}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Service Commission, line by line (30 Sep 2026): money right-aligned in
   even columns, draft lines muted, the total set apart. */
.svc-tbl th.num,.svc-tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.svc-tbl td.nowrap{white-space:nowrap}
.svc-tbl tr.svc-draft td{color:var(--muted)}
.svc-tbl tr.svc-total td{font-weight:700;border-top:1.5px solid var(--line-strong)}

/* payslip */
.slip{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.slip-head{background:linear-gradient(120deg,var(--velvet-deep),var(--velvet));color:#fff;padding:16px 18px}
.slip table{width:100%;border-collapse:collapse}
.slip td{padding:9px 18px;border-bottom:1px solid var(--line)}
.slip td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.slip .total td{font-weight:700;background:var(--velvet-soft);color:var(--velvet);border-bottom:none}
.slip .sect td{font-weight:600;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;background:var(--bg)}

/* misc */
.notice{background:var(--velvet-soft);border:1px solid var(--velvet-line);color:var(--velvet);border-radius:12px;padding:12px 15px;font-size:.88rem;line-height:1.55}
/* An amber notice - the Wednesday team meeting reminder on leave (4 Oct 2026). */
.notice.warn{background:#fff4e0;border-color:#f2c97d;color:#7a4a17}
.wed-notice{display:flex;gap:10px;align-items:flex-start}
.wed-notice svg{width:20px;height:20px;flex:none;margin-top:1px}
.wed-days{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.wed-days li{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--text)}
.wed-days li svg{width:17px;height:17px;flex:none;color:var(--muted)}
.wed-days li.more{font-weight:500;color:var(--muted)}
.wed-pill{font-size:.72rem;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.modal-foot #wm-go{flex:1.7}
/* Two meetings in one box (Tuesday managers', Wednesday team), each its own part. */
.mt-sec + .mt-sec{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.mt-h{font-family:var(--font-head);font-size:1.02rem;font-weight:600;margin:0 0 8px;color:var(--text)}
/* The same invoice number on another claim (4 Oct 2026): a line under the
   claim on Pending Approvals and Claims to Pay. The box at filing is built
   from the meeting notice's pieces above. */
.item .main .s.dup-inv{display:flex;gap:6px;align-items:flex-start;color:var(--rose);font-weight:500;line-height:1.4;margin-top:4px}
.item .main .s.dup-inv[hidden]{display:none}
.dup-inv b{font-weight:700}
/* Why it was claimed again, in the filer's words, under that line. */
.item .main .s.dup-why{color:var(--text);margin-top:2px}
.dup-inv svg{width:15px;height:15px;flex:none;margin-top:1px}
.warn{background:var(--skin-soft);border:1px solid #f0d9c2;color:var(--oak);border-radius:12px;padding:12px 15px;font-size:.88rem;line-height:1.55}
.empty{color:var(--muted);text-align:center;padding:26px;font-size:.9rem}
.receipt-preview{max-width:100%;max-height:180px;border-radius:12px;border:1px solid var(--line);margin-top:8px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--skin);position:absolute;top:3px;right:3px;border:1.5px solid var(--velvet)}
.bell{position:relative;padding:7px;line-height:0;color:#fff;opacity:.9;border-radius:10px;transition:background .15s}
.bell:hover{background:rgba(255,255,255,.14);opacity:1}
.file-btns{display:flex;gap:8px;flex-wrap:wrap}
.menu-list .item{cursor:pointer;border-radius:10px;padding-left:8px;padding-right:8px;transition:background .12s}
.menu-list .item:hover{background:var(--velvet-soft)}
.section-title{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:10px}

/* schedule grid */
.sched{border-collapse:collapse;font-size:.72rem}
.sched th{padding:4px;color:var(--muted);font-weight:600;text-align:center;min-width:26px}
.sched th.today{background:var(--velvet-soft);border-radius:6px 6px 0 0;color:var(--velvet)}
.sched td{border:1px solid var(--line);width:26px;height:26px;text-align:center;font-weight:600}
.sched td.nm,.sched th.nm{position:sticky;left:0;background:var(--card);text-align:left;min-width:64px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;border-left:none;z-index:2;padding:0 8px}
.sched td.wk{background:#fff}
.sched td.off{background:#f1edf3;color:var(--muted)}
.sched td.lv{background:var(--velvet-soft);color:var(--velvet)}
.sched td.ph{background:var(--skin-soft);color:var(--oak);font-size:.6rem}
.sched td[data-tog]{cursor:pointer}
.sched td.nm .sc-who{display:block;max-width:100%;background:none;border:0;padding:0;font:inherit;color:var(--velvet);
  text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-decoration:underline dotted;text-underline-offset:3px}
.sched td.nm .sc-who:focus-visible{outline:2px solid var(--velvet);outline-offset:2px;border-radius:4px}
.sched td[data-tog]:hover{outline:2px solid var(--velvet);outline-offset:-2px}

/* sales & commission charts */
.cm-stats{display:grid;gap:10px;margin:12px 0}
.cm-stat{background:var(--velvet-soft);border:1px solid var(--velvet-line);border-radius:14px;padding:13px 10px;text-align:center}
.cm-stat .v{font-weight:600;font-size:1.08rem;color:var(--velvet);line-height:1.2}
.cm-stat .l{font-size:.7rem;color:var(--muted);margin-top:4px;line-height:1.35}
.cm-bars{margin:10px 0}
.cm-brow{display:flex;align-items:center;gap:10px;margin:7px 0}
.cm-blbl{width:82px;font-size:.75rem;color:var(--muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-btrack{flex:1;background:var(--line);border-radius:99px;height:14px;overflow:hidden}
.cm-bfill{height:100%;border-radius:99px;transition:width .5s cubic-bezier(.3,.8,.3,1)}
.cm-bfill.cur{background:linear-gradient(90deg,var(--velvet),var(--velvet-mid))}
.cm-bfill.prev{background:var(--walnut)}
.cm-bval{min-width:92px;font-size:.78rem;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.cm-key{font-size:.72rem;color:var(--muted);margin:2px 0 8px}
.cm-key .k{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin:0 5px 0 12px}
.cm-donut-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:12px 0}
.cm-donut{width:136px;height:136px;flex:0 0 auto}
.cm-donut .ct{font-size:9px;font-weight:500;fill:var(--muted);font-family:var(--font-body)}
.cm-donut .cs{font-size:10px;font-weight:700;fill:var(--velvet);font-family:var(--font-body)}
.cm-legend{flex:1;min-width:170px}
.cm-legend .li{display:flex;align-items:center;gap:8px;font-size:.8rem;margin:6px 0}
.cm-legend .sw{width:10px;height:10px;border-radius:3px;flex:0 0 auto}

/* to-do & reminders */
.tick{width:22px;height:22px;flex:0 0 auto;border:1.8px solid var(--line-strong);border-radius:7px;background:#fff;
  transition:background .15s,border-color .15s;position:relative}
.tick:hover{border-color:var(--velvet)}
.tick::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;
  border-width:0 2px 2px 0;transform:rotate(45deg) scale(.6);opacity:0;transition:opacity .15s,transform .15s}
.tick.on{background:var(--hillside-deep);border-color:var(--hillside-deep)}
.tick.on::after{opacity:1;transform:rotate(45deg) scale(1)}
.item .t.struck{text-decoration:line-through;color:var(--muted);font-weight:500}
.pri{display:inline-block;width:17px;height:17px;line-height:16px;text-align:center;border-radius:50%;
  background:var(--rose);color:#fff;font-size:.72rem;font-weight:700;vertical-align:1px}

/* ===========================================================================
   Desktop shell. Staff clock in from phones and that app is untouched below
   920px. At a desk the same product becomes a sidebar tool: HR works here for
   hours at a time, and a phone column with a thumb bar is the wrong shape for
   that. One codebase, two shapes; the sidebar is CSS-gated, so nothing here
   runs on a phone.
   ======================================================================== */
.content{min-width:0}
.side-nav{display:none;flex-direction:column;background:var(--card);border-right:1px solid var(--line);
  position:sticky;top:0;height:100vh;overflow-y:auto}
.side-brand{background:linear-gradient(150deg,var(--velvet-deep),var(--velvet) 60%,var(--velvet-mid));
  padding:22px 20px}
.side-brand img{height:30px;width:auto;display:block}
.side-groups{padding:12px 12px 18px;display:flex;flex-direction:column;gap:14px;flex:1}
/* Utility micro-labels, not headlines: the Title Case rule governs Luxia
   headings; these follow the same convention as the payslip section labels. */
.side-group .gl{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);padding:0 10px;margin-bottom:6px}
.side-group button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 10px;
  border-radius:10px;color:var(--text);font-size:.9rem;font-weight:500;transition:background .12s,color .12s}
/* Lucide, 16px, in the label's own colour - the selected item's purple
   included - and never squeezed when a long label wraps (29 Sep 2026). */
.side-group button .ico{line-height:0;color:inherit;flex-shrink:0}
.side-group button .ico svg{width:16px;height:16px}
.side-group button:hover{background:var(--velvet-soft)}
.side-group button.active{background:var(--velvet-soft);color:var(--velvet);font-weight:700}
.side-badge{margin-left:auto;background:var(--skin-soft);color:var(--oak);font-size:.72rem;font-weight:700;
  border-radius:99px;padding:2px 9px;font-variant-numeric:tabular-nums}
.side-foot{border-top:1px solid var(--line);padding:14px 20px;font-size:.8rem;color:var(--muted)}
.side-foot b{display:block;color:var(--text);font-size:.86rem}

@media(min-width:921px){
  #app{max-width:1280px;display:grid;grid-template-columns:252px minmax(0,1fr);padding-bottom:32px}
  .side-nav{display:flex}
  .bottom-nav{display:none}
  #btn-more{display:none}
  /* The sidebar carries the brand on desktop; the top bar steps back to a
     quiet utility strip so two purple bands never stack. */
  .brandbar{background:#fff;border-bottom:1px solid var(--line);padding:10px 34px}
  .brandbar .mark, .brandbar .home-link{display:none}
  .brandbar .bell{color:var(--velvet)}
  .brandbar .avatar{background:var(--velvet-soft);color:var(--velvet);border-color:var(--velvet-line)}
  .topbar{padding:26px 34px 4px}
  .topbar h1{font-size:1.8rem}
  .page{padding:14px 34px 44px;max-width:1020px}
  /* Screens opt in to two columns; a grid forced on every route breaks the
     ones built as a single reading flow. */
  .page.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  /* Home: balanced columns rather than a grid of rows. Cards are all
     different heights, and a row grid made every short card sit beside a
     white gap the height of the tallest thing in its row. */
  .page.home-board{column-count:2;column-gap:16px;display:block}
  .page.home-board .home-sec{break-inside:avoid;display:block;margin:0 0 16px}
  .page.home-board .home-sec > .card{margin:0}
  .modal-back{align-items:center}
  .login-wrap{min-height:100vh;grid-column:1/-1}
  .boot{grid-column:1/-1}
  .brandbar{justify-content:flex-end}   /* one visible child; space-between would pin it left */
}

/* ---- Round 112: the home board, in the order its owner wants ------------
   The bar sits above the board; arranging drops to a single column, so a drag
   is a straight line rather than a jump between columns. */
/* Page-level controls sit on the title line. Held to the bottom so a button
   lines up with the baseline of the heading rather than floating above it. */
.topbar-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;padding-bottom:2px}
/* Arrange is an icon, not a word: it sits above the board all day and has no
   business shouting. It presses in while the board is being arranged. */
.home-arr-btn{width:34px;height:34px;border-radius:10px;padding:0;display:grid;place-items:center;
  border:1px solid var(--line-strong);background:var(--card);color:var(--muted)}
.home-arr-btn svg{width:18px;height:18px}
.home-arr-btn:hover{border-color:var(--velvet);color:var(--velvet)}
.home-arr-btn.on{background:var(--velvet);border-color:var(--velvet);color:#fff}
.home-arr-btn.on svg{stroke:currentColor;fill:none;stroke-width:2.6}
.home-tip{margin:0 0 10px}
/* Arranging happens on the board itself: one column while it is going on, so
   a drag is a straight line and the card being moved is the real one. */
.page.home-arranging{display:block}
.home-sec.arranging{border:1px solid var(--velvet-line);border-radius:var(--radius);
  background:var(--velvet-soft);padding:8px;margin-bottom:14px;touch-action:none}
.home-sec.arranging > .card{margin:0}
.home-sec.arranging.off{opacity:.5}
.home-sec.arranging.off > .card{filter:grayscale(.7)}
.home-sec.lift{box-shadow:var(--shadow-lg);border-color:var(--velvet)}
.home-hd{display:flex;align-items:center;gap:10px;padding:2px 4px 8px}
.home-grip{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;
  color:var(--muted);cursor:grab;touch-action:none}
.home-grip:hover{background:var(--velvet-soft);color:var(--velvet)}
.home-grip:active{cursor:grabbing}
.home-grip:focus-visible{outline:2px solid var(--velvet);outline-offset:1px}
.home-grip .grip-dots{width:18px;height:18px;fill:currentColor}
.home-nm{flex:1;min-width:0;font-size:.9rem;font-weight:600}
.home-see{flex:none;font-size:.78rem}
.home-see[aria-pressed="false"]{color:var(--muted)}
/* On a phone the board is one column anyway; the bar just needs room. */
/* On a phone the heading and its controls share a narrow line, so let the
   heading give up the space rather than the button wrap under it. */
@media(max-width:900px){
  .topbar{gap:8px}
  .topbar > div:first-child{min-width:0}
  .topbar h1{overflow-wrap:anywhere}
}

/* digits line up wherever they are compared */
.item .side,td.n,.num{font-variant-numeric:tabular-nums}
button:focus-visible,[data-emp]:focus-visible,[data-go]:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* payslip statement: the same figures the payroll system prints, worn the
   same way - a document, not a form */
.slip-head .t{font-family:var(--font-head);font-size:1.02rem;color:var(--velvet);margin-bottom:6px}
.slip-note{margin-top:10px;background:var(--walnut-soft);border:1px solid var(--walnut);border-radius:12px;
  padding:12px 14px;font-size:.84rem;line-height:1.6;white-space:pre-line;color:var(--text)}
.slip-note b{display:block;margin-bottom:4px;font-family:var(--font-head)}

/* rota + schedule branch colours. Four groups need four hues; this is
   semantic colour-coding on a working calendar, where the brand book's
   two-secondaries rule yields to legibility. Off days and leave are red -
   Giselle's spec: one glance says "not working". */
.sched td.b-zp,.rota-chip.b-zp{background:var(--velvet-soft);color:var(--velvet);font-weight:700}
.sched td.b-8t,.rota-chip.b-8t{background:var(--lavender-soft);color:var(--lavender);font-weight:700}
.sched td.b-ru,.rota-chip.b-ru{background:var(--hillside-soft);color:var(--hillside-deep);font-weight:700}
.sched td.b-ap,.rota-chip.b-ap{background:#dcefec;color:#1f5f58;font-weight:700}
.sched td.b-cs,.rota-chip.b-cs{background:var(--oak-soft);color:var(--oak);font-weight:700}
.sched td.off,.sched td.lv{background:var(--rose-soft);color:var(--rose);font-weight:700}
/* The Everyone grid on Work Schedule (4 Oct 2026, "very messy leh"): people
   grouped by their usual outlet, each outlet a colour you can tell apart, an
   off day left empty, and the outlet's letters only on a day away from it. */
.sched.sched-all{border-collapse:separate;border-spacing:3px;font-size:.7rem}
.sched.sched-all th{padding:2px 0 4px;min-width:28px;font-weight:600;color:var(--muted);line-height:1.15}
.sched.sched-all th small{display:block;font-size:.6rem;font-weight:500}
.sched.sched-all th.we{color:var(--velvet-mid)}
.sched.sched-all th.today{background:var(--velvet);color:#fff;border-radius:8px}
.sched.sched-all td{border:none;border-radius:6px;width:28px;min-width:28px;height:26px;padding:0;
  text-align:center;font-weight:700;font-size:.64rem;letter-spacing:.02em}
.sched.sched-all td.b-zp{background:#ead6f0;color:#5b1a6b}
.sched.sched-all td.b-8t{background:#d4ddf4;color:#34477f}
.sched.sched-all td.b-ru{background:#d9e6c4;color:#3b5524}
.sched.sched-all td.b-ap{background:#cde8e4;color:#1f5f58}
.sched.sched-all td.b-cs{background:#f3ddc0;color:#7a4a17}
.sched.sched-all td.off{background:transparent;color:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.sched.sched-all td.lv{background:#f6cbd8;color:#a11d4b}
.sched.sched-all td.ph{background:#fde0c8;color:#8a5528;font-size:.56rem}
.sched.sched-all td.today{box-shadow:inset 0 0 0 1px var(--velvet-mid)}
.sched.sched-all td.nm{border:none;border-radius:0;font-size:.78rem;padding:0 10px 0 2px;min-width:72px;max-width:110px}
.sched.sched-all td.nm .sc-who{color:var(--text);text-decoration:none}
.sched.sched-all tr.grp th{padding:12px 0 2px;text-align:left;background:none}
.sched.sched-all tr.grp th span{position:sticky;left:2px;font-size:.68rem;font-weight:700;color:var(--text);
  text-transform:uppercase;letter-spacing:.07em}
@media (hover: hover){
  .sched.sched-all td.nm .sc-who:hover{color:var(--velvet);text-decoration:underline}
}
.sched-key{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 6px;font-size:.75rem;color:var(--muted)}
.sched-key span{display:inline-flex;align-items:center;gap:6px}
.sched-key i{display:inline-grid;place-items:center;width:22px;height:16px;border-radius:4px;font-style:normal;font-size:.55rem;font-weight:700}
.sched-key i.b-zp{background:#ead6f0}
.sched-key i.b-8t{background:#d4ddf4}
.sched-key i.b-ru{background:#d9e6c4}
.sched-key i.b-ap{background:#cde8e4}
.sched-key i.b-cs{background:#f3ddc0}
.sched-key i.off{box-shadow:inset 0 0 0 1px var(--line-strong)}
.sched-key i.lv{background:#f6cbd8;color:#a11d4b}
.sched-key i.ph{background:#fde0c8;color:#8a5528}
/* Compact month grid: tighter cells, but the outlet code reads LARGER - the
   location is the thing staff open this screen for. */
.rota-grid.compact{gap:3px}
.rota-grid.compact .rota-cell{min-height:50px;padding:3px 2px;gap:2px}
.rota-grid.compact .rota-chip{font-size:.82rem;font-weight:800;padding:1px 6px;letter-spacing:.02em}
.rota-grid.compact .dnum{font-size:.62rem}
.rota-chip.red{background:var(--rose-soft);color:var(--rose)}
.rota-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.rota-grid .dow{font-size:.68rem;font-weight:700;letter-spacing:.06em;color:var(--muted);text-align:center;padding:4px 0}
.rota-cell{border:1px solid var(--line);border-radius:10px;min-height:74px;padding:4px;cursor:pointer;
  display:flex;flex-direction:column;gap:3px;background:var(--card);transition:border-color .12s}
.rota-cell:hover{border-color:var(--velvet)}
.rota-cell.blank{background:transparent;border:none;cursor:default}
/* A public holiday should be spotted from across the room and still belong to
   the palette: warm amber ground, an amber edge, and the day number inked to
   match. The outlets trade on these days, so this marks WHICH day it is - not
   a day off. */
.rota-cell.ph{background:#ffe7ad;border-color:#e0a63a}
.rota-cell.ph .dnum{color:#7a4300;font-weight:800}
/* The holiday's name, said out loud on the day. It wraps to two lines rather
   than truncating - a phone has no hover, and "Hari…" tells nobody anything -
   and the full name is in the tooltip and the day pop-up. */
.rota-ph{display:inline;font-size:.52rem;font-weight:700;line-height:1.16;color:#7a4300;
  margin-left:3px;white-space:normal;overflow-wrap:anywhere}
.rota-cell .dline{display:block;line-height:1.2}
.rota-cell .dnum{font-size:.72rem;font-weight:600;color:var(--muted)}
.rota-cell.today .dnum{color:var(--velvet);font-weight:700}
.rota-chip{font-size:.68rem;border-radius:6px;padding:1px 5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}
/* A grid item refuses to shrink below its content by default, so one long
   first name used to push the whole month wider than a phone screen. The
   names ellipsis instead - and the day pop-up spells every one of them out. */
.rota-grid > *{min-width:0}
@media (max-width:520px){
  .rota-grid{gap:3px}
  .rota-cell{min-height:62px;padding:3px;border-radius:8px;gap:2px}
  .rota-chip{font-size:.6rem;padding:0 3px}
  .rota-grid .dow{font-size:.6rem;letter-spacing:.02em}
}
/* ---- Round 106: the outlets, the way the website shows them ------------
   Staff open this screen to find a showroom, so it leads with the photo and
   the address and keeps the clock-in settings as the small print they are. */
/* Showrooms with their team under them: one full-width block per outlet, so a
   face is never in the column beside the wrong showroom. The card itself sits
   at a readable width rather than stretching a photo across a desktop. */
.loc-blocks{display:flex;flex-direction:column;gap:26px}
.loc-block{display:flex;flex-direction:column;gap:12px}
.loc-block > .loc-card{max-width:560px}
.loc-team{display:flex;flex-direction:column;gap:10px}
.loc-team .section-title{margin-top:2px}
.loc-team-none{margin:0 0 2px}
.loc-block-spare{border-top:1px solid var(--line);padding-top:18px}

.loc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:16px;margin-top:14px;align-items:start}
.loc-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.loc-card.off{opacity:.72}
/* Shorter than the source pictures. At 1080/718 a single outlet card stood
   nearly a screen tall, so three outlets plus their teams became a very long
   scroll - and while the photo column was missing it was a screen of empty
   grey saying "No photo yet". */
.loc-shot{position:relative;aspect-ratio:16/9;max-height:240px;background:var(--velvet-soft);overflow:hidden}
.loc-shot img{width:100%;height:100%;object-fit:cover;display:block}
.loc-noshot{display:grid;place-items:center;height:100%;font-size:.8rem;color:var(--muted)}
.loc-flag{position:absolute;top:10px;right:10px}
.loc-body{padding:13px 15px 15px;display:flex;flex-direction:column;gap:4px;flex:1}
.loc-name{font-size:1.02rem;margin:0}
.loc-area{font-size:.76rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--velvet);margin:0}
.loc-addr{font-size:.84rem;line-height:1.45;color:var(--text);margin:4px 0 0}
.loc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:8px 0 0;font-size:.82rem}
.loc-tel{font-weight:600;text-decoration:none}
.loc-tel:hover{text-decoration:underline}
.loc-hrs{color:var(--muted)}
.loc-map{font-weight:600}
/* The starter form as HR reads it: label left, answer right, nothing typed. */
.nsf-view{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg)}
.nsf-l{display:flex;gap:10px;justify-content:space-between;align-items:baseline;
  padding:3px 0;font-size:.82rem;border-bottom:1px solid var(--line)}
.nsf-l:last-child{border-bottom:0}
.nsf-l span{color:var(--muted);flex:none}
.nsf-l b{font-weight:600;text-align:right;overflow-wrap:anywhere}
.starter-nudge{border-color:var(--velvet-line)}

/* The personnel file: two slots, each saying what is on file and offering to
   replace it. Deliberately plain — this is a filing cabinet, not a feature. */
.pf-files{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;margin-top:6px}
.pf-file{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card)}
.pf-k{font-size:.82rem;font-weight:600;color:var(--velvet)}
.pf-have{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 8px;min-height:26px}
.pf-have .hint{margin:0}
.pf-file input[type=file]{padding:7px;font-size:.78rem}

/* The whole week, as the listing carries it. Today is the row people are
   looking for, so it is the one that is inked. */
.loc-week{width:100%;border-collapse:collapse;margin-top:10px;font-size:.78rem}
.loc-week th{text-align:left;font-weight:500;color:var(--muted);padding:2px 10px 2px 0;width:3.2em}
.loc-week td{padding:2px 0;font-variant-numeric:tabular-nums;color:var(--text)}
.loc-week tr.on th,.loc-week tr.on td{color:var(--velvet);font-weight:700}
/* Where the week comes from: the showroom's Google listing (6 Oct 2026). */
.loc-gh{font-size:.72rem;color:var(--muted);line-height:1.4;margin:6px 0 0}
.loc-gh.special{color:var(--text)}
.loc-gh.warn{color:var(--rose);font-weight:600}
.lc-google input[type=time]{opacity:.75}
/* Editing the week: seven rows that each say open, close, or closed. */
.lc-week{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.lc-wrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lc-wd{flex:0 0 2.6em;font-size:.8rem;font-weight:600;color:var(--muted)}
.lc-wrow input[type=time]{width:auto;flex:0 0 auto;padding:7px 9px;font-size:.84rem}
.lc-wto{font-size:.78rem;color:var(--muted)}
.lc-shut{display:flex;align-items:center;gap:6px;margin:0;font-size:.78rem;font-weight:500}
.lc-shut input{width:17px;height:17px;flex:none}
.loc-clock{font-size:.75rem;color:var(--muted);line-height:1.4;margin:10px 0 0;
  border-top:1px solid var(--line);padding-top:9px}
.loc-clock b{color:var(--rose)}
.loc-edit{align-self:flex-start;margin-top:11px}
/* Picking a showroom photo: what is there now, beside the picker that changes
   it, so the swap is a comparison rather than a leap of faith. */
.lc-photo{display:flex;gap:12px;align-items:flex-start;margin-top:6px}
.lc-thumb{flex:0 0 118px;aspect-ratio:1080/718;border-radius:10px;overflow:hidden;
  background:var(--velvet-soft);border:1px solid var(--velvet-line);
  display:grid;place-items:center;text-align:center;padding:6px}
.lc-thumb img{width:100%;height:100%;object-fit:cover}
.lc-thumb .hint{margin:0;font-size:.7rem}
.lc-photo-controls{flex:1;min-width:0}
.lc-photo-controls input[type=file]{padding:8px;font-size:.82rem}
.lc-drop{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:.82rem;
  font-weight:500;color:var(--rose)}
.lc-drop input{width:18px;height:18px;flex:none}
@media (max-width:520px){
  .lc-photo{flex-direction:column}
  .lc-thumb{flex:none;width:100%;max-width:220px}
}

/* ---- Round 104: your own entries on your own month ---------------------
   The roster's chips say what the company decided; these say what you put
   there yourself, so they are quieter and marked with a rule down the side
   rather than a colour of their own competing with the outlet codes. */
.rota-chip.mine-ev{background:var(--ev-soft,var(--velvet-soft));color:var(--ev,var(--velvet));font-weight:600;
  border-left:3px solid var(--ev,var(--velvet));border-radius:4px;padding:1px 4px;font-size:.6rem}
.rota-chip.mine-ev.more{border-left-color:var(--velvet-line);color:var(--muted);font-weight:700}
.rota-cell.mine-day:focus-visible{outline:2px solid var(--velvet);outline-offset:1px}

/* The day, opened: what the roster says, what you have put there, and the box
   to put something else - in that order, because that is the order it is read
   in. Adding does not close the day, so the list sits above the form. */
.pe-roster{font-size:.82rem;font-weight:600;color:var(--velvet);background:var(--velvet-soft);
  border-radius:10px;padding:8px 11px;margin:2px 0 12px}
.pe-roster.can-change{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 8px 6px 11px}
.pe-roster.can-change > span{flex:1;min-width:0}
/* The day itself: hours down the left, the shift shaded behind, and every
   timed entry in its own slot. Untimed entries have no slot to be in, so they
   run along the top. The grid scrolls inside the dialog rather than making the
   dialog itself long - a 14-hour day is taller than a phone. */
.pe-gridwrap{max-height:46vh;overflow-y:auto;border:1px solid var(--line);border-radius:12px;
  padding:6px 6px 6px 0;background:var(--card)}
.pe-grid{position:relative;margin-left:52px}
.pe-hr{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--line)}
.pe-hrl{position:absolute;left:-52px;top:-8px;width:46px;text-align:right;font-size:.68rem;
  font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.pe-slot{position:absolute;left:0;right:0;background:none;border:0;border-radius:6px;
  cursor:pointer;padding:0}
.pe-slot:hover{background:var(--velvet-soft)}
.pe-slot:focus-visible{outline:2px solid var(--velvet);outline-offset:-2px}
/* The shift, shaded behind everything: where the working hours actually are. */
.pe-shift{position:absolute;left:0;right:0;background:var(--hillside-soft);
  border-left:3px solid var(--hillside);border-radius:6px;pointer-events:none}
/* An entry is a thing you pick up: it is grabbed, moved and stretched, so it
   says so - a grab cursor, a handle on its bottom edge, and no touch panning
   while a finger is on it. */
/* Eight colours, each a small set of variables so a block, a chip in the
   all-day row, a chip on the month and the swatch that picks it are all inked
   from one place. Four are quiet - a pale ground with its own colour written
   on it - and four are loud, solid and white-lettered. --ev is what fills a
   block, --ev-ink what is written on it, --ev-soft the pale ground the chips
   use and --ev-deep the colour written on those. */
.pe-c-mist  {--ev:#eeebf4;--ev-ink:#43356b;--ev-edge:#cfc7e0;--ev-soft:#f4f2f9;--ev-deep:#4b3d66}
.pe-c-sage  {--ev:#e6eedb;--ev-ink:#3f5a2a;--ev-edge:#c6d6b0;--ev-soft:#eff4e8;--ev-deep:#46592f}
.pe-c-sand  {--ev:#f6e7d5;--ev-ink:#7c3d00;--ev-edge:#e2c9a8;--ev-soft:#faf1e6;--ev-deep:#7c3d00}
.pe-c-sky   {--ev:#e0edf4;--ev-ink:#22536e;--ev-edge:#bcd6e4;--ev-soft:#eaf3f8;--ev-deep:#2f5a78}
.pe-c-velvet{--ev:#470054;--ev-ink:#fff;--ev-edge:#33003c;--ev-soft:#f6eef8;--ev-deep:#470054}
.pe-c-ocean {--ev:#12657f;--ev-ink:#fff;--ev-edge:#0c4a5e;--ev-soft:#e3f0f4;--ev-deep:#12657f}
.pe-c-rose  {--ev:#a8203f;--ev-ink:#fff;--ev-edge:#7f1830;--ev-soft:#fbe9ed;--ev-deep:#8e2f4a}
.pe-c-red   {--ev:#cc2020;--ev-ink:#fff;--ev-edge:#9a1717;--ev-soft:#fbe7e6;--ev-deep:#a81a1a}
.pe-c-amber {--ev:#c26a04;--ev-ink:#fff;--ev-edge:#8f4e03;--ev-soft:#fdefdd;--ev-deep:#8f4e03}
/* Yellow is the exception that proves the rule about white lettering: nothing
   is readable on it, so it is written on in near-brown. It is still one of the
   loud ones - it is the brightest thing on the day. */
.pe-c-yellow{--ev:#f5c518;--ev-ink:#4a3800;--ev-edge:#c99a06;--ev-soft:#fdf3d3;--ev-deep:#7a5c00}
.pe-block{position:absolute;overflow:hidden;text-align:left;padding:3px 6px;border-radius:8px;
  background:var(--ev,var(--velvet));color:var(--ev-ink,#fff);
  border:1px solid var(--ev-edge,var(--velvet-deep));
  cursor:grab;display:flex;flex-direction:column;gap:1px;line-height:1.2;touch-action:none;
  user-select:none;-webkit-user-select:none}
.pe-block:hover{filter:brightness(1.06)}
.pe-block:focus-visible{outline:2px solid var(--oak);outline-offset:2px}
.pe-block.dragging,.pe-block.resizing{cursor:grabbing;opacity:.9;box-shadow:var(--shadow-md);z-index:3}
.pe-grab{position:absolute;left:0;right:0;bottom:0;height:10px;cursor:ns-resize}
.pe-grab::after{content:"";position:absolute;left:50%;bottom:3px;width:26px;height:2px;
  margin-left:-13px;border-radius:2px;background:currentColor;opacity:.5}
.pe-block.resizing .pe-grab::after{opacity:1}
/* Where the entry will land, drawn while it is being moved: a thin, smooth
   edge in the entry's own colour rather than a dotted one. */
.pe-ghost{position:absolute;left:2px;right:2px;z-index:2;border-radius:8px;pointer-events:none;
  border:1px solid var(--ev-edge,var(--velvet));background:var(--ev-soft,var(--velvet-soft));
  color:var(--ev-deep,var(--velvet));box-shadow:0 0 0 1px rgba(255,255,255,.55) inset;
  font-size:.62rem;font-weight:700;display:flex;align-items:flex-start;justify-content:flex-end;
  padding:2px 5px;font-variant-numeric:tabular-nums}
.pe-tip{margin:8px 0 0;font-size:.74rem}
.pe-bt{font-size:.72rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pe-bw{font-size:.62rem;opacity:.85;font-variant-numeric:tabular-nums}
/* The note, on the block itself and smaller than the name: enough to remember
   what the entry was for without opening it. Only where there is room - an
   entry drawn shorter than an hour has none - and clipped at two lines rather
   than pushed out of the block. */
.pe-bn{font-size:.58rem;line-height:1.25;opacity:.78;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  margin-top:1px;padding-bottom:8px}
.pe-allday{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.pe-adl{font-size:.68rem;font-weight:700;letter-spacing:.04em;color:var(--muted);
  text-transform:uppercase;flex:none}
.pe-adrow{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.pe-chip{font-size:.74rem;font-weight:600;padding:4px 9px;border-radius:999px;cursor:pointer;
  background:var(--ev-soft,var(--velvet-soft));color:var(--ev-deep,var(--velvet));
  border:1px solid var(--ev-edge,var(--velvet-line))}
.pe-chip:hover{filter:brightness(.97)}
/* Picking a colour: the swatch is the colour, and the chosen one wears a ring
   rather than a tick, so the colour itself is never covered up. */
.pe-cols{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.pe-col{width:28px;height:28px;border-radius:50%;background:var(--ev);border:1px solid var(--ev-edge);
  cursor:pointer;padding:0}
.pe-col:hover{transform:scale(1.06)}
.pe-col.on{box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--ev)}
.pe-col:focus-visible{outline:2px solid var(--velvet);outline-offset:3px}
.pe-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.pe-item{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:10px;
  padding:9px 11px;border:1px solid var(--line);border-left:3px solid var(--velvet);
  border-radius:10px;background:var(--card)}
.pe-when{font-size:.72rem;font-weight:700;color:var(--velvet);white-space:nowrap;
  font-variant-numeric:tabular-nums;padding-top:1px}
.pe-what{min-width:0;font-size:.86rem;line-height:1.35}
.pe-what b{font-weight:600}
.pe-note{display:block;font-size:.76rem;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.pe-acts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.pe-empty{margin:0 0 14px}
/* The details box, opened over the day rather than under it: the hour being
   filled in stays visible behind the scrim. */
/* Fixed, not absolute: the day dialog scrolls, and a details box that scrolled
   away with it would be a box you had to chase. */
.pe-popwrap{position:fixed;inset:0;z-index:60}
.pe-scrim{position:absolute;inset:0;background:rgba(43,19,48,.35)}
.pe-pop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(94%,380px);
  max-height:92%;overflow-y:auto;background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:14px 16px 16px}
.pe-pop-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.pe-pop-head b{font-family:var(--font-head);font-size:.98rem;font-weight:600}
.pe-x{font-size:1.4rem;line-height:1;color:var(--muted);padding:0 4px}
.pe-pop label{margin:10px 0 4px}
.pe-durs{display:flex;gap:6px;flex-wrap:wrap}
.pe-dur{border:1px solid var(--line-strong);background:var(--card);border-radius:999px;
  padding:6px 12px;font-size:.8rem;font-weight:600;color:var(--muted)}
.pe-dur:hover{border-color:var(--velvet)}
.pe-dur.on{background:var(--velvet);border-color:var(--velvet);color:#fff}
.pe-times{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pe-times label{margin-top:10px}
.pe-rm{color:var(--rose)}
.pe-rm.danger{background:var(--rose-soft);border-color:var(--rose)}
@media (max-width:520px){
  .pe-item{grid-template-columns:auto 1fr;row-gap:6px}
  .pe-acts{grid-column:1 / -1;justify-content:flex-start}
}
.rota-tabs{display:flex;gap:6px;flex-wrap:wrap}
.rota-tabs button{padding:8px 14px;border-radius:999px;border:1.5px solid var(--line-strong);font-weight:600;font-size:.86rem}
.rota-tabs button.on{background:var(--velvet);color:#fff;border-color:var(--velvet)}

/* home: the fortnight strip and the four quick tiles */
/* The fortnight strip is a glance, not a calendar - kept tight so it costs
   almost no height on the home screen. */
.strip{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.strip .dhead{text-align:center;font-size:.55rem;font-weight:700;letter-spacing:.04em;color:var(--muted);padding-bottom:0}
.strip .dcell{min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:3px 1px;border:1px solid var(--line);border-radius:7px;background:var(--card)}
.strip .dcell.today{border-color:var(--velvet);box-shadow:0 0 0 1.5px rgba(71,0,84,.12)}
.strip .dtag{font-size:.5rem;font-weight:700;letter-spacing:.03em;color:var(--muted);line-height:1.1}
.strip .dn{font-family:var(--font-head);font-weight:600;font-size:.76rem;line-height:1.1}
.strip .rota-chip{max-width:100%;padding:0 4px;font-size:.58rem;font-weight:700;border-radius:5px}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
.quick-tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 4px;border-radius:13px;
  background:var(--velvet-soft);color:var(--velvet);font-size:.72rem;font-weight:600;transition:background .12s}
.quick-tile:hover{background:var(--velvet-line)}
.quick-tile .ico svg{width:24px;height:24px}

/* ========================================================================
   Frozen top strip + the Staff Handbook (round 68). The brandbar carries
   Speak Up, Announcements, notifications, profile and log out, and now
   stays put while the page scrolls; z-index sits under modals (50) and
   toasts (60) but over page content.
   ======================================================================== */
.brandbar{position:sticky;top:0;z-index:45}
.speak-btn{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:#fff;
  border:1px solid rgba(255,255,255,.45);border-radius:99px;padding:6px 12px;transition:background .15s}
.speak-btn:hover{background:rgba(255,255,255,.14)}
.speak-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:921px){
  .speak-btn{color:var(--velvet);border-color:var(--velvet-line);background:var(--velvet-soft)}
  .speak-btn:hover{background:var(--velvet-line)}
}

/* the handbook hero: one purple chapter band with the tab rail inside */
.hb-hero{background:linear-gradient(130deg,var(--velvet-deep),var(--velvet) 58%,var(--velvet-mid));
  color:#fff;border:none}
.hb-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hb-eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.72;margin-bottom:4px}
.hb-hero h2{color:#fff;font-size:1.45rem;line-height:1.2;margin:0}
.hb-tag{opacity:.85;font-size:.85rem;margin-top:4px}
/* A choice WITHIN a chapter, so deliberately a different shape from the
   chapter tabs above it: a pill pair rather than another row of cards. */
/* Pre-Training / Onboarding. These were a white pill on a near-white strip:
   at a glance you could not tell which of the two you were reading, nor that
   there was a choice at all. The chosen one is now filled in the brand purple
   and the other is a real outlined button, so the pair reads as a switch. */
.hb-subtabs{display:inline-flex;gap:6px;margin:16px 0 0;padding:5px;
  background:var(--velvet-soft);border:1px solid var(--velvet-line);border-radius:14px}
.hb-subtabs button{border:1px solid transparent;background:transparent;color:var(--velvet-mid);
  font-weight:700;font-size:.95rem;padding:9px 20px;border-radius:10px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.hb-subtabs button:hover{background:#fff;border-color:var(--velvet-line);color:var(--velvet)}
.hb-subtabs button.on{background:var(--velvet);color:#fff;border-color:var(--velvet);
  box-shadow:0 2px 8px rgba(71,0,84,.28)}
.hb-subtabs button:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.hb-subtag{margin:10px 0 0}

/* And a ground of its own for each, so the page itself says which half you are
   in without being read. Both are secondary-class brand tints, kept pale
   enough that the cards on top of them stay white and legible.
   Pre-Training is the warm one - reading done before you arrive; Onboarding
   the green - the month you actually grow through. */
.hb-band{border-radius:var(--radius-lg);padding:16px;margin-top:14px;
  border:1px solid transparent;transition:background .2s}
.hb-band[data-hb-section="pretraining"]{background:var(--walnut-soft);border-color:var(--walnut)}
.hb-band[data-hb-section="onboarding"]{background:var(--hillside-soft);border-color:var(--olive)}
@media (max-width:760px){ .hb-band{padding:10px;border-radius:var(--radius)} }

.hb-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.hb-tab{font-size:.82rem;font-weight:600;padding:7px 14px;border-radius:99px;color:#fff;
  border:1px solid rgba(255,255,255,.42);transition:background .15s,color .15s}
.hb-tab:hover{background:rgba(255,255,255,.12)}
.hb-tab.on{background:#fff;color:var(--velvet);border-color:#fff;font-weight:700}
.hb-editbtn{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.42);white-space:nowrap}
.hb-editbtn:hover{background:rgba(255,255,255,.24)}

/* section edit affordances - quiet until Edit handbook is switched on */
.hb-sec-head{display:flex;align-items:center;gap:10px}
.hb-sec-head h2,.hb-sec-head b{flex:1;min-width:0}
.hb-editsec{flex:none;font-size:.72rem;padding:4px 11px;margin-left:auto}
.cult-head .hb-editsec{margin-left:auto}
.hb-add{align-self:flex-start;border-style:dashed}
.hb-form{border:1px dashed var(--velvet);background:var(--velvet-soft)}
.hb-form-title{font-weight:700;font-size:.95rem;margin-bottom:2px}
.hb-form label{margin-top:10px}
.hb-form textarea{width:100%;resize:vertical}
/* On a phone six controls share the strip with the logo, so Speak Up drops
   its label and joins the icon row - the title still names it on long-press. */
@media(max-width:560px){
  .brandbar{gap:8px}
  .brandbar .top-actions{gap:3px}
  .speak-btn{border:none;padding:7px;border-radius:10px}
  .speak-btn span{display:none}
  .speak-btn svg{width:21px;height:21px}
}

/* ========================================================================
   Round 69. Culture as bubbles: a drawn medallion per value and the quote
   in a speech bubble. Conduct & Attire opens with the annotated scrub
   figures. My Grade folds into Home as a tappable banner.
   ======================================================================== */
.cult{border-top:none;border-radius:22px}
.cult-art{width:54px;height:54px;flex:none;border-radius:50%;background:var(--velvet);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(43,19,48,.18)}
.cult-art svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cult-ht{min-width:0;flex:1}
.cult-no{display:block;font-size:.64rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:1px}
.cult-q{border-left:none;position:relative;background:var(--velvet-soft);border-radius:16px;
  padding:10px 14px;margin:0 0 14px}
.cult-q::after{content:"";position:absolute;left:24px;bottom:-9px;width:18px;height:10px;
  background:inherit;clip-path:polygon(0 0,100% 0,32% 100%)}
.culture-grid .cult:nth-child(5n+2) .cult-art{background:var(--hillside-deep)}
.culture-grid .cult:nth-child(5n+2) .cult-q{background:var(--hillside-soft)}
.culture-grid .cult:nth-child(5n+3) .cult-art{background:var(--oak)}
.culture-grid .cult:nth-child(5n+3) .cult-q{background:var(--oak-soft)}
.culture-grid .cult:nth-child(5n+4) .cult-art{background:var(--lavender)}
.culture-grid .cult:nth-child(5n+4) .cult-q{background:var(--lavender-soft)}
.culture-grid .cult:nth-child(5n+5) .cult-art{background:#2f5a78}
.culture-grid .cult:nth-child(5n+5) .cult-q{background:#e7eff5}

/* the annotated scrub figures */
.attire-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:8px;margin-top:8px}
.attire-svg{width:100%;height:auto;display:block;max-width:460px;margin:0 auto}
.attire-svg .f-skin{fill:var(--skin)}
.attire-svg .f-hair{fill:#3a2417}
.attire-svg .f-ink{fill:#3a2417}
.attire-svg .f-ink2{fill:none;stroke:#3a2417;stroke-width:2;stroke-linecap:round}
.attire-svg .f-scrub{fill:var(--velvet)}
.attire-svg .f-vneck{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;opacity:.85}
.attire-svg .f-pants{fill:var(--velvet-deep)}
.attire-svg .f-pantsd{fill:var(--velvet-mid)}
.attire-svg .f-sock{fill:#efe9f2}
.attire-svg .f-shoe{fill:#fff;stroke:var(--line);stroke-width:1.5}
.attire-svg .c-dot{fill:var(--oak)}
.attire-svg .c-ln{stroke:var(--oak);stroke-width:1.4;fill:none;stroke-dasharray:2 3}
.attire-svg .c-tx{fill:var(--text);font-size:13px;font-weight:600}
.attire-svg .c-cap{fill:var(--muted);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* my grade on Home */
.grade-mini{width:100%;text-align:left;cursor:pointer;display:block}
.grade-mini:hover{box-shadow:var(--shadow-sm);filter:brightness(.99)}
.grade-mini .grade-open{margin-left:auto;flex:none;font-size:.8rem;font-weight:700;color:var(--velvet);white-space:nowrap}

/* ========================================================================
   Round 70. Director-editable leave terms and observed holidays; the
   grading screen's job-group pills.
   ======================================================================== */
.tnc-bar{margin-top:10px;gap:10px;flex-wrap:wrap}
.tnc-bar .hint{min-width:0;flex:1}
.tnc-form{border:1px dashed var(--velvet);background:var(--velvet-soft);margin:6px 0}
.tnc-form textarea{width:100%;resize:vertical}
.tnc-editing{list-style:none;margin-left:-20px}
.pin-list li .tnc-edit{font-size:.7rem;padding:2px 9px;margin-left:8px;vertical-align:2px}
.tnc-phhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tnc-ynav{font-family:var(--font-head);font-size:.95rem}
.tnc-ynav b{padding:0 4px;font-variant-numeric:tabular-nums}
.tnc-binc{width:1%;white-space:nowrap;text-align:right}
.tnc-binc .btn.iconbtn.del{width:28px;height:28px;border-radius:8px}
.pill-n{opacity:.65;font-variant-numeric:tabular-nums;font-weight:600}
.pill.on .pill-n{opacity:.8}
.pill[disabled]{opacity:.45;cursor:not-allowed}
.pill[disabled]:hover{border-color:var(--line-strong);color:var(--muted)}

/* ---- Round 71: the grading roster ------------------------------------
   Every sheet in the group on one screen. The line is the grade; the panel
   under it is the sheet. The band colour runs down the left edge so a
   department reads as a column of colour before a single number is read. */
.gr-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gr-sum{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.05em;border:1.5px solid var(--line-strong);color:var(--muted)}
.gr-sum b{font-family:var(--font-head);font-size:.95rem;font-variant-numeric:tabular-nums}
.gr-sum.a{border-color:var(--velvet);color:var(--velvet)}
.gr-sum.b{border-color:var(--hillside-deep);color:var(--hillside-deep)}
.gr-sum.c{border-color:var(--oak);color:var(--oak)}
.gr-sum.n{border-style:dashed}
.gr-roster{display:flex;flex-direction:column;gap:8px}
.gr-person{padding:0;overflow:hidden;border-left:6px solid var(--line-strong)}
.gr-person.band-a{border-left-color:var(--velvet)}
.gr-person.band-b{border-left-color:var(--hillside-deep)}
.gr-person.band-c{border-left-color:var(--oak)}
.gr-line{width:100%;display:flex;align-items:center;gap:14px;padding:12px 16px;
  background:none;border:0;text-align:left;cursor:pointer;transition:background .15s}
.gr-line:hover{background:var(--velvet-soft)}
.gr-person.open .gr-line{background:var(--velvet-soft)}
.gr-badge{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--font-head);font-size:1.3rem;font-weight:600;color:#fff;background:var(--line-strong)}
.band-a .gr-badge{background:var(--velvet)}
.band-b .gr-badge{background:var(--hillside-deep)}
.band-c .gr-badge{background:var(--oak)}
.gr-who{flex:1;min-width:0;display:block}
.gr-who b{display:block;font-size:.95rem;line-height:1.3}
.gr-who .hint{display:block;font-size:.72rem;margin:1px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grade-bar.sm{display:block;height:6px;margin:7px 0 0;max-width:340px}
.gr-score{flex:none;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.gr-score b{font-family:var(--font-head);font-size:1.25rem;font-variant-numeric:tabular-nums}
.gr-minus{font-size:.68rem;font-weight:700;color:var(--rose)}
.gr-caret{flex:none;color:var(--muted);font-size:.8rem}
.gr-panel{padding:0 16px 16px;border-top:1px solid var(--line)}
.gr-gets{display:flex;flex-wrap:wrap;gap:6px;padding-top:12px}
.gr-h{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px}
@media (max-width:560px){
  .gr-line{gap:10px;padding:11px 12px}
  .gr-badge{width:32px;height:32px;font-size:1.1rem}
  .gr-score b{font-size:1.05rem}
  .gr-panel{padding:0 12px 14px}
}

/* ---- Round 71: putting the handbook in order --------------------------
   Move buttons sit inside the section's own header, only while the handbook
   is in edit mode, so reading it is never cluttered by them. */
.hb-move{display:inline-flex;gap:4px;flex:none}
.hb-move .btn{width:30px;height:30px;padding:0;border-radius:9px;font-size:.9rem;line-height:1}
.hb-move .btn[disabled]{opacity:.35;cursor:not-allowed}
.hb-move .btn[disabled]:hover{border-color:var(--line-strong);color:var(--muted);background:#fff}
.hb-orderbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between}
/* Dragging a handbook section. The grip is the only draggable part, so text
   inside a section can still be selected while the chapter is being edited.
   touch-action:none is what lets a finger drag the grip instead of scrolling
   the page under it. */
.hb-grip{cursor:grab;touch-action:none}
.hb-grip:active{cursor:grabbing}
body.hb-dragging-on{cursor:grabbing;user-select:none;-webkit-user-select:none}
.hb-grip .grip-dots{width:16px;height:16px;fill:currentColor;stroke:none}
.card.hb-dragging{opacity:.42}
.card.hb-drop-t{box-shadow:inset 0 5px 0 var(--velvet)}
.card.hb-drop-b{box-shadow:inset 0 -5px 0 var(--velvet)}
.card.hb-drop-l{box-shadow:inset 5px 0 0 var(--velvet)}
.card.hb-drop-r{box-shadow:inset -5px 0 0 var(--velvet)}
.cult .hb-move,.hb-sec-head .hb-move{margin-left:auto}
.cult-head .hb-move + .hb-editsec,.hb-sec-head .hb-move + .hb-editsec{margin-left:0}
@media (max-width:560px){
  /* Bigger targets for a thumb: the grip and arrows are the whole ordering UI. */
  .hb-move .btn{width:36px;height:36px}
  .hb-grip .grip-dots{width:18px;height:18px}
}

/* ---- Round 78: the uniform photo, with the rules written beside it ----
   The photo sits in the middle 38% of the drawing and the rules are written
   down the sides - his on the left, hers on the right - each on the end of a
   line that points at the part of the uniform it is about. The lines are an
   SVG in a stretched 0-100 box, so a percentage in the markup is a percentage
   of the drawing at every width; the stroke is kept honest with
   non-scaling-stroke. Below the phone breakpoint the drawing keeps its width
   and scrolls sideways rather than shrinking the words to nothing. */
.attire-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.attire-fig{margin:14px 0 0}
/* The drawing's height and the photo's box inside it are worked out in the
   page - they depend on how wide the screen is and how much room the words
   need - so the stylesheet only says how to use them. */
.attire-stage{position:relative;width:100%}
.attire-img{position:absolute;left:calc(var(--att-l) * 1%);top:calc(var(--att-t) * 1%);
  width:calc(var(--att-w) * 1%);height:calc(var(--att-h) * 1%);object-fit:cover;
  border-radius:14px;background:var(--velvet-soft)}
.attire-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.attire-lines polyline{fill:none;stroke:var(--velvet-line);stroke-width:1.5}
.attire-dot{position:absolute;transform:translate(-50%,-50%);width:4px;height:4px;border-radius:50%;
  background:var(--velvet);box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
.attire-lab{position:absolute;transform:translateY(-50%);width:calc((var(--att-l) - 3) * 1%)}
.attire-lab.l{right:calc((100 - var(--att-l) + 1.5) * 1%);text-align:right}
.attire-lab.r{left:calc((100 - var(--att-l) + 1.5) * 1%)}
.attire-lab .lab-t{display:block;font-family:var(--font-head);font-size:.86rem;font-weight:600;
  line-height:1.2;color:var(--velvet)}
.attire-lab .lab-d{display:block;font-size:.75rem;line-height:1.35;color:var(--muted);margin-top:2px}

/* Editing happens on the photo: the words are typed where they are read, and
   the dot is the handle for the line. The dot stays a small mark; what grows
   is the invisible circle around it, so a fingertip has something to catch. */
.attire-fig[data-att-edit] .attire-dot{width:7px;height:7px;cursor:grab;touch-action:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 3px var(--velvet-line)}
.attire-fig[data-att-edit] .attire-dot::after{content:"";position:absolute;inset:-14px;border-radius:50%}
.attire-fig[data-att-edit] .attire-dot:hover{background:var(--velvet-mid)}
.attire-fig[data-att-edit] .attire-dot.dragging{cursor:grabbing;transform:translate(-50%,-50%) scale(1.4)}
.attire-fig[data-att-edit] .attire-dot:focus-visible{outline:2px solid var(--velvet);outline-offset:3px}
.attire-fig[data-att-edit] .attire-lab{padding:4px 6px;border-radius:10px;
  border:1px dashed transparent;transition:border-color .12s, background .12s}
.attire-fig[data-att-edit] .attire-lab:hover,
.attire-fig[data-att-edit] .attire-lab:focus-within{border-color:var(--velvet-line);
  background:color-mix(in srgb, var(--card) 88%, transparent)}
.attire-lab [contenteditable]{outline:none;border-radius:5px}
.attire-lab [contenteditable]:focus{background:var(--velvet-soft);
  box-shadow:0 0 0 2px var(--velvet-soft)}
.attire-lab [contenteditable]:empty::before{content:attr(aria-label);color:var(--line-strong)}
.lab-tools{display:flex;gap:4px;justify-content:inherit;margin-bottom:2px;opacity:0;transition:opacity .12s}
.attire-lab.l .lab-tools{justify-content:flex-end}
.attire-lab:hover .lab-tools,.attire-lab:focus-within .lab-tools{opacity:1}
.lab-btn{border:1px solid var(--line-strong);background:var(--card);color:var(--muted);
  border-radius:99px;padding:1px 7px;font-size:.6rem;font-weight:700;line-height:1.5;cursor:pointer}
.lab-btn:hover{border-color:var(--velvet);color:var(--velvet)}
.lab-both.on{background:var(--velvet-soft);border-color:var(--velvet-line);color:var(--velvet)}
.lab-del{padding:1px 4px}
.lab-del svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.6;display:block}
.lab-del:hover{border-color:var(--rose);color:var(--rose)}
.attire-edit{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.attire-edit .hint.tiny{margin:0 0 10px}
@media (max-width:620px){
  .attire-lab .lab-t{font-size:.8rem}
  .attire-lab .lab-d{font-size:.7rem}
}
/* Round 74: a fifth chapter makes the tab strip three rows deep on a phone,
   which pushes the chapter itself off the screen. Below 560px the strip
   scrolls sideways inside the hero instead, and the open tab is scrolled
   into view after each render. */
@media (max-width:560px){
  .hb-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:2px;scroll-padding:0 12px}
  .hb-tabs::-webkit-scrollbar{display:none}
  .hb-tab{flex:none;white-space:nowrap}
}

/* ---- Round 82: onboarding — the title, then progress, then the days ----
   One card carries the chapter: its heading, a thin line of progress under it,
   and Day 1 to Day 12 as buttons along a rail. One day's checklist opens
   beneath the card at a time, and opening a day closes the one before it. The
   button carries the state at a glance — hollow, half, or a velvet tick — so a
   trainer can see where somebody is from across the room. */
.onb-top{border-left:6px solid var(--velvet)}
.onb-title{margin:0;font-size:1.25rem;line-height:1.25}
.onb-intro{margin:6px 0 0}
.onb-mini{margin-top:12px}
.onb-mini-bar{height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.onb-mini-bar i{display:block;height:100%;border-radius:99px;background:var(--velvet);transition:width .35s}
.onb-mini-txt{margin:6px 0 0;font-size:.78rem;color:var(--muted)}
.onb-mini-txt b{color:var(--text);font-weight:600}
.onb-pick{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.onb-pick label{margin:0;font-size:.75rem;color:var(--muted);font-weight:600}
.onb-pick select{width:auto;max-width:100%}

.onb-line{list-style:none;display:flex;align-items:flex-start;margin:16px 0 0;
  padding:6px 2px 2px;position:relative;overflow-x:auto}
.onb-line::before{content:"";position:absolute;left:26px;right:26px;top:23px;height:2px;background:var(--line)}
.onb-dw{flex:1 0 auto;min-width:54px;display:flex;justify-content:center}
.onb-day{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;
  padding:0;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
.onb-day-n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:1;
  background:var(--card);border:2px solid var(--line-strong);color:var(--muted);
  font-weight:700;font-size:.8rem;font-variant-numeric:tabular-nums;
  transition:border-color .12s, box-shadow .12s}
.onb-day.part .onb-day-n{border-color:var(--velvet);color:var(--velvet);background:var(--velvet-soft)}
.onb-day.done .onb-day-n{background:var(--velvet);border-color:var(--velvet);color:#fff}
.onb-day-n svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.6}
.onb-day-t{font-size:.68rem;font-weight:600;color:var(--muted);white-space:nowrap}
/* The date the day actually falls on, under its number: off days and leave
   move these, which is the whole reason for printing them. */
.onb-day-d{font-size:.58rem;font-weight:500;color:var(--line-strong);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.onb-day.open .onb-day-d,.onb-day.done .onb-day-d{color:var(--muted)}
/* ---- Round 114: the pre-training manual, spread over days --------------
   The same day line the twelve training days use, with a choice of how many
   days to spread the reading over. */
/* A section being changed is still the card it will be: the words are typed on
   it, with a dashed hint round each field and the card's own edge inked so it
   is plain which one is open. */
.hb-inline{outline:2px solid var(--velvet);outline-offset:2px}
.hb-inline [contenteditable]{outline:none;border-radius:6px;padding:2px 5px;margin-left:-5px;
  border:1px dashed transparent;transition:border-color .12s}
.hb-inline [contenteditable]:hover{border-color:var(--velvet-line)}
.hb-inline [contenteditable]:focus{background:var(--velvet-soft);border-color:var(--velvet)}
.hb-inline [contenteditable]:empty::before{content:attr(aria-label);color:var(--line-strong)}
.hb-i-items{margin-top:8px}
.hb-i-li{display:flex;align-items:flex-start;gap:8px}
.hb-i-tx{flex:1;min-width:0}
.hb-i-li .hb-i-del{flex:none;opacity:0;transition:opacity .12s;margin-top:1px}
.hb-i-li:hover .hb-i-del,.hb-i-li:focus-within .hb-i-del{opacity:1}
@media (max-width:760px){ .hb-i-li .hb-i-del{opacity:1} }

.pt-top{margin-top:14px}
.pt-choose{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.pt-lbl{font-size:.84rem;font-weight:500;color:var(--muted)}
.pt-dbtn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--card);font-weight:700;font-size:.84rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
.pt-dbtn:hover{border-color:var(--velvet);color:var(--velvet)}
.pt-dbtn.on{background:var(--velvet);border-color:var(--velvet);color:#fff}
.pt-sec{margin-top:14px}
.pt-sec > .card{margin:0}
.pt-foot{display:flex;justify-content:flex-end;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--line)}
.pt-read[aria-pressed="true"]{background:var(--hillside-soft);color:var(--hillside-deep);
  border:1px solid #cfdcb8}
.pt-read svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.6;
  vertical-align:-2px;margin-right:2px}
.pt-sec.read > .card{border-color:#cfdcb8}
.onb-joined{font-size:.8rem;color:var(--text);margin:10px 0 0}
.onb-joined b{font-weight:600;color:var(--velvet)}
.onb-joined.none{color:var(--muted)}
.onb-when{font-size:.76rem;font-weight:600;color:var(--velvet);white-space:nowrap;
  margin-left:auto;font-variant-numeric:tabular-nums}
.onb-day:hover .onb-day-n,.onb-day:focus-visible .onb-day-n{border-color:var(--velvet)}
.onb-day.open .onb-day-n{border-color:var(--velvet);box-shadow:0 0 0 4px var(--velvet-soft)}
.onb-day.open .onb-day-t{color:var(--velvet)}

.onb-panel{padding:14px 16px;border-top:3px solid var(--velvet);margin-top:14px}
.onb-stage-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.onb-stage-head h3{margin:0;font-family:var(--font-head);font-size:1rem;font-weight:600}
.onb-count{flex:none;font-weight:700;font-size:.82rem;color:var(--velvet);font-variant-numeric:tabular-nums}
.onb-count span{color:var(--muted);font-weight:600}
.onb-items{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.onb-item{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:.88rem;line-height:1.45}
.onb-item + .onb-item{border-top:1px solid var(--line)}
.onb-item.on > span{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--velvet-line)}
.onb-tick{flex:none;width:22px;height:22px;margin-top:1px;border-radius:7px;border:2px solid var(--line-strong);
  background:var(--card);display:grid;place-items:center;cursor:pointer;transition:background .12s, border-color .12s}
.onb-tick svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:3;opacity:0;transition:opacity .12s}
.onb-tick:hover{border-color:var(--velvet)}
.onb-tick.on{background:var(--velvet);border-color:var(--velvet)}
.onb-tick.on svg{opacity:1}
.onb-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--velvet-line);margin:8px 8px 0 6px}

/* Editing happens on the list: the heading and every point are typed where
   they are read, and each point carries a quiet remove beside it. */
.onb-epanel .onb-etitle{flex:1;min-width:0}
.onb-title[contenteditable],.onb-intro[contenteditable],
.onb-etitle[contenteditable],.onb-etext[contenteditable]{outline:none;border-radius:6px;
  padding:1px 4px;margin-left:-4px;border:1px dashed transparent;transition:border-color .12s}
.onb-title[contenteditable]:hover,.onb-intro[contenteditable]:hover,
.onb-etitle[contenteditable]:hover,.onb-etext[contenteditable]:hover{border-color:var(--line-strong)}
.onb-title[contenteditable]:focus,.onb-intro[contenteditable]:focus,
.onb-etitle[contenteditable]:focus,.onb-etext[contenteditable]:focus{background:var(--velvet-soft);
  border-color:var(--velvet-line)}
.onb-etext{flex:1;min-width:0}
.onb-etext:empty::before{content:attr(aria-label);color:var(--line-strong)}
.onb-eitem .onb-idel{flex:none;margin-top:5px;opacity:0;transition:opacity .12s}
.onb-eitem:hover .onb-idel,.onb-eitem:focus-within .onb-idel{opacity:1}
.onb-eadd{margin-top:10px}
@media (max-width:560px){
  .onb-dw{min-width:46px}
  .onb-day-n{width:30px;height:30px;font-size:.72rem}
  .onb-day-t{font-size:.62rem}
  .onb-line::before{top:21px}
  .onb-panel{padding:12px 13px}
  .onb-title{font-size:1.1rem}
  .onb-eitem .onb-idel{opacity:1}
}


/* ---- Round 83: staff purchase, written as bubbles ---------------------
   One rule to a circle, short enough to take in at a glance, the family
   rules among them rather than in a section of their own. The colours run
   through the brand in the same order the culture cards use, so the chapter
   reads as a set rather than a list. */
.pu-grid{list-style:none;margin:14px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px 14px;justify-items:center}
.pu-bub{width:100%;max-width:190px}
.pu-ball{position:relative;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  text-align:center;padding:15%;background:var(--velvet-soft);border:2px solid var(--velvet-line);
  color:var(--velvet)}
.pu-txt{font-size:.94rem;line-height:1.25;font-weight:600;font-family:var(--font-head)}
.pu-txt b{font-weight:700}
/* One colour for a contract, not one per bubble: the full-time side is velvet,
   the part-time side hillside, so which group a bubble belongs to is read from
   across the room. (It used to walk through the palette bubble by bubble,
   which said nothing.) */
.pu-full .pu-ball{background:var(--velvet-soft);border-color:var(--velvet-line);color:var(--velvet)}
.pu-part .pu-ball{background:var(--hillside-soft);border-color:#cfdcb8;color:var(--hillside-deep)}
/* Editing: the words are typed in the bubble, and the remove sits on its rim. */
.pu-txt[contenteditable]{outline:none;border-radius:8px;padding:2px 4px;
  border:1px dashed transparent;transition:border-color .12s}
.pu-txt[contenteditable]:hover{border-color:currentColor}
.pu-txt[contenteditable]:focus{background:var(--card);border-color:currentColor}
.pu-txt:empty::before{content:attr(aria-label);opacity:.5}
.pu-del{position:absolute;top:2px;right:2px;background:var(--card);opacity:0;transition:opacity .12s}
.pu-ball:hover .pu-del,.pu-ball:focus-within .pu-del{opacity:1}
@media (max-width:560px){
  .pu-grid{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px 10px}
  .pu-txt{font-size:.84rem}
  .pu-del{opacity:1}
}

/* ---- Round 89: the photos on a phone -----------------------------------
   There is not enough width for a rule to be readable beside a photo, so on a
   phone the label carries only its heading and the rule itself is one tap
   away. The whole drawing fits on the screen; nothing is dragged sideways. */
@media (max-width:620px){
  .attire-lab .lab-d{display:none}
  .attire-lab{cursor:pointer}
  .attire-lab .lab-t{font-size:.72rem;line-height:1.15}
  .attire-lab .lab-t::after{content:"›";margin-left:3px;color:var(--line-strong);font-weight:400}
  .attire-fig[data-att-edit] .attire-lab .lab-t::after{content:none}
  .attire-fig[data-att-edit] .attire-lab .lab-d{display:block;font-size:.66rem}
}

/* ---- Round 88: the values, compact -------------------------------------
   A card says what the value is called and the line people remember; the
   points behind it open when somebody wants them. */
.cult-more{display:flex;align-items:center;gap:6px;margin-top:10px;padding:0;background:none;
  border:0;cursor:pointer;font:inherit;font-size:.76rem;font-weight:600;color:var(--velvet)}
.cult-chev{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;
  transition:transform .18s}
.cult-more[aria-expanded="true"] .cult-chev{transform:rotate(180deg)}
.cult-body{margin-top:6px}
.cult-body .cult-p{margin-top:6px}
/* Editing: typed on the card itself. */
.cult-t[contenteditable],.cult-qe[contenteditable],.cult-ptx[contenteditable]{outline:none;
  border-radius:6px;padding:1px 4px;margin-left:-4px;border:1px dashed transparent;
  transition:border-color .12s}
.cult-t[contenteditable]:hover,.cult-qe[contenteditable]:hover,
.cult-ptx[contenteditable]:hover{border-color:var(--line-strong)}
.cult-t[contenteditable]:focus,.cult-qe[contenteditable]:focus,
.cult-ptx[contenteditable]:focus{background:var(--card);border-color:var(--velvet-line)}
.cult-pe{list-style:none;padding:0}
.cult-pt{display:flex;align-items:flex-start;gap:8px}
.cult-ptx{flex:1;min-width:0}
.cult-ptx:empty::before{content:attr(aria-label);color:var(--line-strong)}
.cult-pt .cult-del{flex:none;margin-top:2px;opacity:0;transition:opacity .12s}
.cult-pt:hover .cult-del,.cult-pt:focus-within .cult-del{opacity:1}

/* ---- Round 86: the entitlements, by contract ---------------------------
   A clinician sees their own set; managers and the directors see both, one
   group under the other. */
.pu-group + .pu-group{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.pu-group-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pu-group-head b{font-family:var(--font-head);font-size:1rem;font-weight:600}
.pu-group-head .hint{font-size:.76rem}
.pu-ball{border:2px solid var(--velvet-line);cursor:pointer;font:inherit;
  transition:transform .12s, box-shadow .12s}
.pu-ball:hover,.pu-ball:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.pu-more{display:block;margin-top:4px;font-size:.56rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;opacity:.65}
.pu-egrid .pu-bub{max-width:210px}
.pu-detail{margin:8px 0 0;font-size:.74rem;line-height:1.45;color:var(--muted);
  border:1px dashed var(--line-strong);border-radius:10px;padding:6px 8px;outline:none}
.pu-detail:focus{background:var(--card);border-color:var(--velvet-line);border-style:solid}
.pu-detail:empty::before{content:attr(aria-label);color:var(--line-strong)}
.pu-who{position:absolute;top:2px;left:2px;background:var(--card)}
@media (max-width:560px){
  .pu-more{font-size:.5rem}
}

/* ---- Round 90: the notes beside a photo --------------------------------
   What cannot be pointed at is written in the margin: hygiene, and what is
   banned outright. Beside the drawing on a wide screen, under it on a phone. */
/* The notes sit in a band under the drawing rather than in a column beside
   it: four notes stacked in a 210px column ran to 710px against a drawing
   390px tall, which left the card lopsided and the photo smaller than it
   needed to be. Underneath, the drawing gets the full width - the photo half
   as big again - and the notes read as one tidy row. */
.attire-wrap{margin-top:14px}
.attire-wrap .attire-fig{margin:0}
.attire-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));
  gap:12px;margin-top:16px;align-items:start}
.attire-note{background:var(--velvet-soft);border:1px solid var(--velvet-line);
  border-radius:14px;padding:12px 14px}
.attire-note .note-t{display:block;font-family:var(--font-head);font-size:.86rem;
  font-weight:600;color:var(--velvet)}
.note-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.note-pt{display:flex;align-items:flex-start;gap:6px;font-size:.75rem;line-height:1.4;
  color:var(--text)}
.note-pt::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--velvet-line);margin-top:7px}
/* The note that lists what is not allowed reads as a list of crosses, in the
   rose the rest of the portal already uses to mean no. */
.attire-note.cross{background:var(--rose-soft);border-color:#f0d9e0}
.attire-note.cross .note-t{color:var(--rose)}
.attire-note.cross .note-pt::before{content:"\2715";width:auto;height:auto;margin-top:0;
  border-radius:0;background:none;color:var(--rose);font-size:.7rem;font-weight:700;line-height:1.5}
.note-tx{flex:1;min-width:0}
.note-t[contenteditable],.note-tx[contenteditable]{outline:none;border-radius:5px;padding:1px 3px;
  margin-left:-3px;border:1px dashed transparent;transition:border-color .12s}
.note-t[contenteditable]:hover,.note-tx[contenteditable]:hover{border-color:var(--velvet-line)}
.note-t[contenteditable]:focus,.note-tx[contenteditable]:focus{background:var(--card);
  border-color:var(--velvet)}
.note-tx:empty::before{content:attr(aria-label);color:var(--line-strong)}
.note-pt .note-del{flex:none;opacity:0;transition:opacity .12s}
.note-pt:hover .note-del,.note-pt:focus-within .note-del{opacity:1}
@media (max-width:760px){
  .note-pt .note-del{opacity:1}
}
/* On a phone the notes under the drawing were three tinted boxes, inside a
   card, inside a card - a stack of edges there is no room for. Same words, no
   nested chrome: one card with three labelled sections divided by a hairline.
   The ban list keeps its rose heading and crosses, which is what marks it out.
   This has to sit after the note styles above, not up in the phone block by
   the labels, or the tinted panel wins on source order. */
@media (max-width:620px){
  .attire-notes{display:block;margin-top:14px;border-top:1px solid var(--line)}
  .attire-note,.attire-note.cross{background:none;border:0;border-radius:0;
    border-bottom:1px solid var(--line);padding:12px 0}
  .attire-note:last-child{border-bottom:0;padding-bottom:2px}
  .attire-note .note-t{font-size:.82rem}
  .attire-notes .note-list{gap:5px}
}

/* ---- Round 91: the bubbles, all one size and evenly spaced -------------- */
.pu-grid{grid-template-columns:repeat(auto-fit,170px);justify-content:center;gap:18px}
.pu-bub{width:170px;max-width:none}
.pu-egrid{grid-template-columns:repeat(auto-fit,210px)}
.pu-egrid .pu-bub{width:210px}
@media (max-width:560px){
  .pu-grid{grid-template-columns:repeat(auto-fit,140px);gap:14px}
  .pu-bub{width:140px}
  .pu-egrid,.pu-egrid .pu-bub{grid-template-columns:repeat(auto-fit,minmax(0,1fr));width:auto}
}

/* ---- Round 92: the onboarding heading, in less room --------------------
   The name of the chapter and whose checklist it is share one line, and the
   bar and its count share the next, so the days start higher up the page. */
.onb-top-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.onb-title{font-size:1.05rem}
.onb-intro{margin:4px 0 0;font-size:.78rem}
.onb-mini{display:flex;align-items:center;gap:10px;margin-top:10px}
.onb-mini-bar{flex:1;min-width:60px}
.onb-mini-txt{margin:0;flex:none;font-size:.74rem}
.onb-top .onb-pick{margin:0;flex:none;gap:6px}
.onb-top .onb-pick select{font-size:.78rem;padding:5px 8px}
.onb-line{margin-top:12px}
@media (max-width:560px){
  .onb-top-head{flex-direction:column;gap:8px}
  .onb-top .onb-pick{width:100%}
  .onb-mini{flex-wrap:wrap;gap:6px}
  .onb-mini-txt{flex:1 0 100%}
}

/* ---- Round 93: the values as tiles -------------------------------------
   Eleven values, all of them on the screen at once - on a phone as well,
   where a card each meant scrolling past ten to reach the eleventh. The name
   is the tile; the quote sits under it where there is room; the rest opens
   when the tile is tapped. */
.culture-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.card.cult{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:14px;text-align:left;cursor:pointer;font:inherit;width:100%;
  border-top:3px solid var(--velvet);transition:transform .12s, box-shadow .12s}
.card.cult:hover,.card.cult:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.cult-art{width:38px;height:38px;flex:none}
.cult-art svg{width:100%;height:100%;display:block}
.cult-ht{display:flex;align-items:baseline;gap:7px;min-width:0}
.cult-no{flex:none;width:19px;height:19px;border-radius:50%;background:var(--velvet);color:#fff;
  display:grid;place-items:center;font-size:.62rem;font-weight:700;font-variant-numeric:tabular-nums}
.cult-name{font-family:var(--font-head);font-size:.92rem;font-weight:600;line-height:1.2;color:var(--text)}
.card.cult .cult-q{display:block;margin:0;padding:0;border:0;background:none;
  font-size:.75rem;line-height:1.4;color:var(--muted);font-style:italic}
@media (max-width:620px){
  /* All eleven in one screenful: two to a row, the quote left for the tap. */
  .culture-grid{grid-template-columns:1fr 1fr;gap:8px}
  .card.cult{padding:9px 10px;gap:5px;border-top-width:2px}
  .card.cult .cult-q{display:none}
  .cult-art{width:26px;height:26px}
  .cult-name{font-size:.76rem}
  .cult-no{width:16px;height:16px;font-size:.55rem}
}

/* ---- Round 94: everything else, from the tab bar ----------------------- */
.bottom-nav button{min-width:0;padding:0 2px}

/* ---- Round 95: the handbook on a phone, in less room -------------------
   Eleven values did not fit on one screen because of what sat above them:
   a subtitle repeating the tabs, a tall banner, and a medallion on every
   tile. Trimmed, the whole set fits without scrolling. */
@media (max-width:620px){
  /* The subtitle under "Handbook" lists the chapters the tab strip already
     shows, so on a phone it goes. */
  .content:has(.hb-hero) .topbar{padding-top:14px;padding-bottom:2px}
  .content:has(.hb-hero) .topbar .sub{display:none}
  .hb-hero{padding:12px 13px}
  .hb-hero h2{font-size:1rem}
  .hb-hero .hint{font-size:.72rem}
  .hb-tabs{margin-top:8px}
  /* The chapter's opening banner, said once and small. */
  .culture-grid ~ .notice-card,.notice-card{padding:11px 13px}
  .notice-card b{font-size:.86rem;line-height:1.25}
  .notice-card .hint{font-size:.72rem;margin-top:4px}
  /* The tile is its name and its number; the medallion needs room it does
     not have here. */
  .card.cult .cult-art{display:none}
  .card.cult{padding:8px 9px;gap:4px}
  .cult-name{font-size:.74rem}
  .culture-grid{gap:7px}
}

/* ---- Round 96: two fixes the phone found -------------------------------
   A bubble is a button, and a button sizes itself to its words unless it is
   told otherwise - so they came out three different sizes. And a column of
   flex children aligned to the start shrinks each one to its content, which
   left the drawing narrower than the screen. */
.pu-ball{width:100%}

/* ---- Round 97: the opening banners, in less room -----------------------
   The oak banner at the top of a chapter is one sentence: it does not need
   the full width of the page or the padding of a card to say it. */
.notice-card{max-width:640px;padding:11px 15px;border-left-width:5px}
.notice-card b{font-size:.92rem;line-height:1.3}
.notice-card .hint{font-size:.78rem;margin-top:4px}
.notice-card .policy-list{margin-top:6px;font-size:.82rem}

/* ---- Round 99: the drawer ----------------------------------------------
   On a phone the sidebar is the same nav, slid in from the left over the page
   rather than replacing it. Nothing navigates when it opens, so closing it
   leaves the page exactly where it was. It stops short of the right-hand edge
   on purpose: the strip of page still showing is what tells you it is a
   drawer over your page, not a new one. */
@media(max-width:920px){
  .side-nav{display:flex;position:fixed;top:0;bottom:0;left:0;z-index:56;
    width:68vw;max-width:300px;height:100%;overflow-y:auto;
    transform:translateX(-102%);transition:transform .24s ease;
    border-right:1px solid var(--line)}
  body.drawer-open .side-nav{transform:none;box-shadow:var(--shadow-lg)}
  body.drawer-open{overflow:hidden}
  .drawer-back{position:fixed;inset:0;z-index:55;background:rgba(43,19,48,.45);
    backdrop-filter:blur(2px);border:0;animation:drawer-fade .18s ease}
  .side-nav .side-brand{padding:18px 18px 16px}
  .side-nav .side-groups{padding:10px 10px 16px}
  .side-nav .side-group button{padding:9px 11px;font-size:.86rem}
}
@keyframes drawer-fade{from{opacity:0}to{opacity:1}}

/* The "switch on editing" notice: message and button on one line, wrapping to
   two on a phone rather than squeezing the button to nothing. */
.hb-publish-note{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hb-publish-note .btn{flex-shrink:0}

/* --------------------------------------------------------- activation codes
   A code is shown once and never again, so it is set large, spaced, and in a
   face where 0 and O cannot be confused - it will be read down a phone line
   or copied by hand off a printed slip. */
.code-slip{font-family:ui-monospace,'SFMono-Regular','Consolas',monospace;font-size:2rem;
  letter-spacing:.28em;text-align:center;padding:18px 10px 18px 18px;border-radius:var(--radius);
  background:var(--velvet-soft);border:1px solid var(--velvet-line);color:var(--velvet-deep)}
.code-sheet{display:grid;gap:10px}
.code-slip-full{border:1px dashed var(--line-strong);border-radius:var(--radius);padding:14px 16px;
  display:flex;flex-direction:column;gap:4px;break-inside:avoid}
.code-slip-full .n{font-weight:600}
.code-slip-full b{font-family:ui-monospace,'SFMono-Regular','Consolas',monospace;font-size:1.6rem;
  letter-spacing:.26em;color:var(--velvet-deep)}

/* Printing a sheet of codes is the only copy that leaves the screen, so the
   page furniture is dropped and only the modal's contents reach the paper. */
@media print{
  body>*:not(#modal-root){display:none !important}
  .modal-back,.modal{position:static !important;background:none !important;box-shadow:none !important;
    max-height:none !important;overflow:visible !important;padding:0 !important;border:0 !important}
  .modal-foot,.modal-head .x{display:none !important}
  .code-sheet{gap:6px}
  .code-slip-full{border-color:#999}
}

/* ---- Showrooms & Team, rearranged 30 Aug 2026 ---------------------------
   Three outlets across one row rather than three full-width blocks down the
   page, and the whole directory in one place under them instead of split into
   a pile per outlet. The cards are the compact version of the same card: a
   shorter photo, tighter body, smaller week. */
.loc-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.loc-grid .loc-shot{max-height:150px}
.loc-grid .loc-body{padding:11px 13px 13px;gap:3px}
.loc-grid .loc-name{font-size:.95rem}
.loc-grid .loc-addr{font-size:.78rem;line-height:1.4}
.loc-grid .loc-meta{margin-top:6px;font-size:.78rem}
.loc-grid .loc-week{font-size:.76rem}
.loc-grid .loc-week th,.loc-grid .loc-week td{padding:1px 0}

/* The directory, once, below the outlets. */
.dir-head{margin-top:26px}
.dir-all{display:flex;flex-direction:column;gap:14px;margin-top:12px}

/* ========================================================================
   VIEW AS — the director looking at the portal through somebody else's eyes.

   Oak, not velvet. Velvet is the portal's own chrome, so a velvet strip
   would read as part of the furniture; Oak is the other primary and reads
   as the app speaking about itself. It sits along the bottom rather than
   the top because the top is sticky on both shapes and the grid sidebar is
   pinned to 100vh — a bottom strip disturbs nothing and is still unmissable.
   ======================================================================== */
#preview-bar{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));z-index:46;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 16px;background:var(--oak);color:#fff;
  font-size:.82rem;line-height:1.35;box-shadow:0 -6px 20px rgba(43,19,48,.16)}
#preview-bar .pv-tag{flex:none;font-size:.66rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;background:rgba(255,255,255,.18);border-radius:99px;padding:3px 10px}
#preview-bar .pv-txt{flex:1 1 220px;min-width:0}
#preview-bar .pv-txt b{font-weight:700}
/* On a phone the strip has room for the point, not the aside. */
@media(max-width:560px){#preview-bar .pv-more{display:none}}
#preview-bar .pv-btn{flex:none;font-size:.78rem;font-weight:700;color:#fff;
  border:1px solid rgba(255,255,255,.5);border-radius:99px;padding:6px 14px;transition:background .15s}
#preview-bar .pv-btn:hover{background:rgba(255,255,255,.16)}
#preview-bar .pv-btn.solid{background:#fff;color:var(--oak);border-color:#fff}
#preview-bar .pv-btn.solid:hover{background:var(--oak-soft)}
/* room for the strip, on top of the room the tab bar already takes */
body.previewing #app{padding-bottom:calc(var(--nav-h) + 96px + env(safe-area-inset-bottom))}
@media(min-width:921px){
  #preview-bar{bottom:0}
  body.previewing #app{padding-bottom:96px}
}

/* The strip is fixed over the bottom of the viewport, and the sidebar is a
   full-height column that scrolls inside it - so without this the switcher
   itself would sit under the strip, unreachable at the one moment it is most
   wanted. The room is given to the scroll, not taken from the layout. */
body.previewing .side-nav{padding-bottom:calc(var(--nav-h) + 124px)}
@media(min-width:921px){body.previewing .side-nav{padding-bottom:66px}}

/* The switcher, under her name in the sidebar. One row of state: Me is her
   own portal and wears velvet because that is the portal's own colour; the
   titles wear Oak, the same Oak as the strip along the bottom, so the sidebar
   and the strip always agree about what is on. A title nobody holds has no
   chip, and the list under a lit chip names real people only. */
.side-as{margin-top:12px}
.side-as .gl{font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.side-as-chips{display:flex;flex-wrap:wrap;gap:5px}
.side-as-chips button{font-size:.72rem;font-weight:600;color:var(--muted);background:var(--bg);
  border:1px solid var(--line-strong);border-radius:99px;padding:4px 10px;
  transition:background .12s,border-color .12s,color .12s}
.side-as-chips button:hover{border-color:var(--oak);color:var(--oak);background:var(--oak-soft)}
.side-as-chips button.on{background:var(--oak);border-color:var(--oak);color:#fff}
.side-as-chips button[data-viewas-set=""].on{background:var(--velvet);border-color:var(--velvet)}

.side-as select{margin-top:7px;width:100%;font-size:.78rem;padding:6px 9px;border-radius:9px;
  border:1px solid var(--oak);color:var(--oak);background:var(--oak-soft);font-weight:600}

/* The WhatsApp button on the short-notice dialog. Hillside, not WhatsApp's
   own green: it is the brand's green and reads as "go and message" just as
   well. One per manager, so the list wraps. */
.wa-list{display:flex;flex-wrap:wrap;gap:8px}
.btn.wa{background:var(--hillside-deep);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn.wa:hover{background:#4c6136}
.btn.wa.off{background:var(--hillside-soft);color:var(--muted);cursor:default;box-shadow:none}

/* Grading lines scored from a number rather than a tick: the tick still
   shows the answer, but reads as a fact, not a button. The Auto badge on a
   deduction row says the same about a late clock-in or a case note the
   clinic system reported. */
.tick.auto{cursor:default;border-style:double}
.crit.from-number .crit-w .hint{font-weight:500}
.rv-list{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.rv{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:.8rem}
.rv-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rv-stars{color:#c9a227;letter-spacing:1px;font-size:.85rem}
.rv.bad .rv-stars{color:var(--rose)}
.rv-who{font-weight:600}
.rv-when{color:var(--muted);font-size:.72rem}
.rv-body{margin-top:4px;line-height:1.45;color:var(--text);font-weight:400;white-space:pre-line}
/* A bad review's words, folded until tapped (6 Oct 2026). */
.rv-more{margin-top:4px}
.rv-more summary{width:fit-content;cursor:pointer;color:var(--muted);font-size:.74rem;font-weight:600}
.rv-more[open] summary{margin-bottom:2px}
.dd-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dd-presets:empty{display:none}
.dd-presets .btn{white-space:normal;text-align:left;line-height:1.3}
.crit-r.auto{color:var(--hillside-deep);font-weight:600}
.item.auto{background:var(--walnut-soft)}

/* The Wi-Fi line on a showroom card: state first, then the one button. */
/* The clock-in network on a showroom card (4 Oct 2026): a head with its
   badge, the network, who asked, and the next step - one column. */
.loc-net{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px;padding-top:10px;border-top:1px solid var(--line)}
.loc-net-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.loc-net-title{font-size:.8rem;font-weight:600;color:var(--text)}
.loc-net-line{font-size:.82rem;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.loc-net-sub{font-size:.75rem;color:var(--muted);line-height:1.4}
.loc-net-req{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:var(--radius);background:var(--skin-soft)}
.loc-net-acts{display:flex;gap:8px;margin-top:6px}
.loc-net-btn{align-self:flex-start;margin-top:2px}
/* A privacy relay registered or waiting as a showroom's network (4 Oct 2026). */
.relay-warn,.loc-net-sub.relay-warn{color:var(--rose);font-weight:600}

/* Live numbers on My Grade: one row per figure the sheet is scored from -
   what it is, what it is now, and how far to the next line. */
.live-list{display:flex;flex-direction:column;gap:6px}
.live-row{display:grid;grid-template-columns:minmax(120px,1.2fr) minmax(90px,.8fr) 2fr;gap:10px;align-items:center;
  padding:8px 10px;border-radius:10px;background:var(--bg)}
.live-row.none{opacity:.7}
.live-l{font-weight:600;font-size:.86rem}
.live-v{font-variant-numeric:tabular-nums;font-weight:700;color:var(--velvet);font-size:.95rem}
.live-n{font-size:.76rem;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.live-bar{display:block;height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.live-bar i{display:block;height:100%;background:var(--hillside-deep);border-radius:99px}
.live-nums.compact{margin-top:12px;padding:12px 14px}
.live-nums.compact .live-row{padding:6px 8px}
@media(max-width:560px){.live-row{grid-template-columns:1fr 1fr}.live-n{grid-column:1/-1}}

/* The receipt scanner's running commentary under the picture. */
.scan-status{color:var(--hillside-deep);font-weight:600}

/* ---- Payment voucher for a month's claims (10 Sep 2026) -----------------
   Drawn inside the modal so the print rule above turns it into the PDF. */
.vou{font-size:.9rem;color:#111;background:#fff}
.vou .vou-co{text-align:center;line-height:1.3}
.vou .vou-co span{font-size:.8rem}
.vou .vou-addr{font-size:.72rem;color:#555;margin-top:2px}
.vou .vou-title{margin:12px 0 10px;padding:6px;text-align:center;font-weight:700;letter-spacing:.04em;border:1px solid #111;background:#f3f0f6}
.vou table{width:100%;border-collapse:collapse}
.vou .vou-meta th,.vou .vou-meta td{border:1px solid #bbb;padding:5px 8px;text-align:left;font-size:.82rem}
.vou .vou-meta th{width:16%;background:#f7f5fa;font-weight:600}
.vou .vou-lines{margin-top:10px}
.vou .vou-lines th,.vou .vou-lines td{border:1px solid #bbb;padding:6px 8px;font-size:.82rem;vertical-align:top}
.vou .vou-lines th{background:#f7f5fa;text-align:left}
.vou .vou-lines .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.vou .vou-lines .tot td{font-weight:700;text-align:right}
.vou .vou-sign{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px;font-size:.78rem;text-align:center}
.vou .vou-sign .line{border-top:1px solid #111;margin-bottom:6px}
@media print{.vou{font-size:11pt}.vou .vou-sign{margin-top:48pt}}

/* ---- Payslips Admin as chips + the PDF pop-up (10 Sep 2026) ----------- */
.chip.person{text-align:left;padding:10px 12px}
.chip.person .n{font-size:.9rem;line-height:1.25;word-break:break-word}
.chip.person.slip{cursor:pointer}
.chip.person.slip:hover,.chip.person.slip:focus-visible{border-color:var(--velvet);box-shadow:var(--shadow-sm);outline:none}
.chip.person.figures{border-style:dashed}
.chip.person.none{opacity:.5;background:#fff}
.modal.wide{max-width:960px}
.pdf-frame{width:100%;height:72dvh;border:0;border-radius:10px;background:#f3f0f6}
@media(max-width:640px){.pdf-frame{height:64dvh}}

/* ---- The Lunites logo (10 Sep 2026) ------------------------------------
   Transparent PNGs: the purple lockup on the login page, and a white-and-
   lavender version straight on the velvet sidebar and top bar. */
.side-brand img{height:46px;width:auto;display:block}
.brandbar .mark{height:30px}
.login-logo{height:84px}

/* ---- Claimed claims fold away (10 Sep 2026) ---------------------------- */
.claimed-fold{margin-top:12px;border-top:1px solid var(--line);padding-top:6px}
/* Monthly bills a director pays first and then claims (views.js, 2 Oct 2026) */
.bill-item{align-items:center}
.bill-item .bill-mark{width:22px;height:22px;flex:none;border-radius:50%;border:2px solid var(--line);
  display:grid;place-items:center;color:#fff}
.bill-item .bill-mark svg{width:14px;height:14px}
.bill-item.done .bill-mark{background:var(--hillside-deep);border-color:var(--hillside-deep)}
.bill-item.done .t{color:var(--muted)}
.bill-item .bill-acts{gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* Your cards - last 4 digits only (4 Oct 2026). */
.bill-cards{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.bill-cards-h{display:flex;flex-direction:column;gap:2px}
.bill-cards-list{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.card-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:999px;background:var(--velvet-soft);
  color:var(--velvet);font-weight:700;font-size:.84rem;font-variant-numeric:tabular-nums}
.card-chip button{width:22px;height:22px;border-radius:50%;color:var(--velvet);font-weight:700;line-height:1}
.card-chip button:focus-visible{outline:2px solid var(--velvet);outline-offset:1px}
@media (hover: hover){ .card-chip button:hover{background:#fff} }
.bill-card-add{gap:6px;flex-wrap:nowrap}
.bill-card-add input{width:130px;flex:none}
.meta-cards{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
/* The bill's claim for the month on screen and its payroll month, at the top
   of Edit bill (4 Oct 2026). */
.bill-claim-pm{border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px;margin:0 0 12px;background:var(--velvet-soft)}
.bill-claim-pm label{margin-top:8px}
/* One fold per month since 28 Sep 2026: the months read as one list. */
.claimed-fold + .claimed-fold{margin-top:0}

/* A person's time-off-in-lieu days, each with change and remove (29 Sep 2026). */
.toil-list{display:flex;flex-direction:column}
.toil-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.toil-row:last-child{border-bottom:0}
.toil-main{display:flex;flex-direction:column;min-width:0}
.toil-main .hint{font-size:.8rem}
.toil-acts{display:flex;gap:4px;flex-shrink:0}
.claimed-fold summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 4px;font-weight:600;color:var(--velvet)}
.claimed-fold summary::-webkit-details-marker{display:none}
.claimed-fold summary::before{content:"▸";margin-right:8px;color:var(--muted);transition:transform .15s}
.claimed-fold[open] summary::before{transform:rotate(90deg)}
.claimed-fold summary span:first-child{flex:1}
/* A month paid on a claim PV reads as that PV (28 Sep 2026): the voucher is
   the row, and the claims it pays fold away under it. */
.pv-month{margin-top:12px;border-top:1px solid var(--line);padding-top:2px}
.pv-month + .pv-month,.pv-month + .claimed-fold,.claimed-fold + .pv-month{margin-top:0}
button.rcpt{padding:0;font:inherit;cursor:pointer}
.pv-claims{margin-top:0;border-top:0;padding-top:0}
.pv-claims summary{padding:0 4px 10px;font-size:.86rem}

/* ---- Round 78: a claim is corrected or dropped, not re-filed -------------
   Giselle, 13 Sep 2026: "edit and delete button pls use icon". The pair sits
   under the status badge on the Claims list, so it has to read at a glance
   and take almost no room. Delete already had its manner - quiet grey until
   the cursor is on it, then rose; edit answers it in the brand's purple, so
   the dangerous one is the only one that reddens. */
.btn.iconbtn.edit{width:32px;height:32px;border-radius:9px;color:var(--muted);border-color:transparent;
  background:none;box-shadow:none}
.btn.iconbtn.edit svg{width:17px;height:17px}
.btn.iconbtn.edit:hover{background:var(--velvet-soft);color:var(--velvet)}

/* On a phone the same two icons are pressed with a thumb, not pointed at with
   a cursor, so they are given a little more to aim at. Scoped to a list row:
   the delete on a sticky note and the one in the terms editor are sized for
   where they sit and must keep their own. */
@media (max-width:560px){
  .item .side .btn.iconbtn.edit, .item .side .btn.iconbtn.del{width:38px;height:38px;border-radius:10px}
  .item .side .btn.iconbtn.edit svg, .item .side .btn.iconbtn.del svg{width:19px;height:19px}
}


/* Leave Register (26-27 Sep 2026): filter bar, the two tables, the pop-up. */
.lv-reg-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.lv-reg-filters select,.lv-reg-filters input{width:auto;padding:7px 10px;border-radius:10px;font-size:.86rem}
.lv-reg-filters input{flex:1 1 150px;min-width:140px;max-width:240px}
.lr-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.tabs.lr-tabs{display:inline-flex;width:fit-content;margin-bottom:0}
.tabs.lr-tabs button{flex:0 0 auto;padding:8px 18px}
.tbl.lv-reg td.sub{color:var(--muted)}
.tbl.lv-reg{table-layout:fixed;min-width:860px}
.tbl.lv-reg th,.tbl.lv-reg td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;padding:9px 10px}
.tbl.lv-reg td.who b{display:block;overflow:hidden;text-overflow:ellipsis}
/* The Overtime tab's team total (30 Sep 2026). */
.tbl.lv-ot tfoot td{font-weight:700;border-top:2px solid var(--line-strong);background:var(--velvet-soft)}
.tbl.lv-ot th.num,.tbl.lv-ot td.num{text-align:right}
.tbl.lv-reg td.who .s,.tbl.lv-reg td .s{color:var(--muted);font-size:.74rem;font-weight:400;overflow:hidden;text-overflow:ellipsis}
.tbl.lv-reg td.num,.tbl.lv-reg th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl.lv-reg tbody tr.click{cursor:pointer}
@media (hover:hover){.tbl.lv-reg tbody tr.click:hover td{background:var(--velvet-soft)}}
.modal.lr-modal{max-width:720px}
.lr-who{color:var(--muted);font-size:.86rem;padding-top:2px}
.lr-items{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.lr-item{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.lr-item.on{border-color:var(--velvet);background:var(--velvet-soft)}
.lr-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lr-type{font-weight:600}
.lr-dates{font-size:.92rem;margin-top:3px}
.lr-meta{color:var(--muted);font-size:.78rem;margin-top:3px}
.lr-reason{font-size:.88rem;margin-top:7px;line-height:1.45;word-break:break-word}
.lr-note{color:var(--muted);font-size:.8rem;margin-top:4px;font-style:italic}
.lr-act{display:flex;gap:8px;margin-top:10px}
.lr-sort{position:relative;display:inline-block}
.lr-sort .btn svg{width:14px;height:14px;vertical-align:-2px;margin-left:4px}
.lr-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);min-width:220px;padding:6px 0}
.lr-menu .gl{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:8px 14px 4px}
.lr-menu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:9px 14px;font:inherit;font-size:.9rem;background:none;border:0;color:var(--text);cursor:pointer;border-radius:0}
.lr-menu button[aria-checked="true"]{background:var(--velvet-soft)}
.lr-menu button .tick{width:16px;display:inline-block;color:var(--velvet);font-weight:700}
@media (hover:hover){.lr-menu button:hover{background:var(--velvet-soft)}}
.lr-menu .sep{height:1px;background:var(--line);margin:4px 0}
.list .item.click{cursor:pointer}
@media (hover:hover){.list .item.click:hover{background:var(--velvet-soft)}}
.lv-credits{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.lv-credit{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:.9rem;cursor:pointer}
.lv-credit input{width:20px;height:20px;margin:0;flex:none}
/* The shared TOIL form (app.js TOIL_FORM) inside the Register pop-up. */
.lr-grant{margin-top:2px}
.lr-grant input,.lr-grant select{padding:9px 11px;border-radius:10px;font-size:.88rem}
.lr-grant label{margin:10px 0 4px}
.lr-grant .hint.tiny{margin:4px 0 0}
.lr-grant > .btn{margin-top:10px}

/* PH and TOIL days under the balance circles (29 Sep 2026): the day worked,
   what it was, and what became of it - one line each. */
.lieu{margin-top:16px}
.lieu-h{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;
  padding-bottom:5px;border-bottom:1px solid var(--line)}
.lieu-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:baseline;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:.82rem;line-height:1.35}
.lieu-row:last-child{border-bottom:0}
.lieu-d{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.lieu-n{font-weight:600;min-width:0;word-break:break-word}
.lieu-n small{display:block;font-weight:400;font-size:.74rem;color:var(--muted)}
.lieu-half{font-weight:500;font-size:.72rem;color:var(--muted);white-space:nowrap}
.lieu-s{font-size:.74rem;color:var(--muted);text-align:right;max-width:130px}
.lieu-s.free{color:var(--hillside-deep);font-weight:600}
.lieu-s.held{color:var(--oak)}
.card .lieu-none{margin:6px 0 0;font-size:.8rem}
.badge.ph{background:#fff1d9;color:#8a4b12}
/* The day each list ends on, and the rest of the year's public holidays
   under the PH days (30 Sep 2026: "Where's Christmas day?"). */
.lieu-by{float:right;text-transform:none;letter-spacing:0;font-weight:500}
.lieu-soon-h{font-size:.72rem;color:var(--muted);margin:12px 0 0;padding-bottom:4px;border-bottom:1px dashed var(--line-strong)}
.lieu-row.soon .lieu-n{font-weight:500}
.lieu-s.soon{color:#8a4b12;font-weight:600}
/* How the leave rules land on this person (30 Sep 2026): the order, when
   each kind ends, what happens to what is left - with their own days. */
.lv-rules{margin-top:16px}
.lv-rule{display:grid;gap:2px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.82rem;line-height:1.45}
.lv-rule:last-child{border-bottom:0}
.lv-rule b{font-weight:600;color:var(--velvet-deep)}
.lv-rule span{color:var(--text)}
/* How a request splits - TOIL, then PH, then Annual Leave - shown on the
   apply form before anything is filed. */
.lv-plan{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--hillside-soft);font-size:.84rem;line-height:1.45}
.lv-plan b{display:block;font-size:.8rem;margin-bottom:4px;color:var(--hillside-deep)}
.lv-plan ul{margin:0;padding-left:18px}
/* Last year's leftover: carried forward at half value or cashed out in full
   (30 Sep 2026). On My balances from 1 January, and the March pop-up. */
.ye-card{margin-top:16px;padding:14px;border:1px solid var(--velvet-line);border-radius:14px;background:var(--velvet-soft)}
.ye-h{font-weight:600;font-size:.92rem;color:var(--velvet)}
.ye-p{margin:4px 0 10px;font-size:.84rem}
.ye-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.ye-opt{display:flex;flex-direction:column;gap:3px;text-align:left;padding:11px 12px;border-radius:12px;
  border:1.5px solid var(--line-strong);background:#fff;color:var(--text);font:inherit;cursor:pointer}
.ye-opt b{font-size:.9rem}
.ye-opt span{font-size:.76rem;color:var(--muted);line-height:1.35}
.ye-opt.on{border-color:var(--velvet);box-shadow:0 0 0 3px var(--velvet-line)}
.ye-opt:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
@media (hover: hover){ .ye-opt:hover{border-color:var(--velvet-mid)} }
.ye-note{margin:8px 0 0;font-size:.78rem}
.ye-line{margin:12px 0 0;font-size:.82rem;padding:9px 12px;border-radius:12px;background:var(--velvet-soft);color:var(--velvet-deep)}

/* Apply for all (29 Sep 2026): one form, the people ticked, a check of what
   will happen to each before anything is filed, and what did afterwards. */
.bk-tools{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.bk-quick{display:flex;flex-wrap:wrap;gap:6px}
.bk-chip{font-size:.76rem;font-weight:600;padding:5px 12px;border-radius:99px;border:1px solid var(--line-strong);
  background:#fff;color:var(--velvet)}
@media (hover:hover){.bk-chip:hover{background:var(--velvet-soft);border-color:var(--velvet-line)}}
.bk-chip:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.bk-list{display:flex;flex-direction:column;margin-top:10px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.bk-row{display:flex;align-items:center;gap:10px;margin:0;padding:9px 12px;border-bottom:1px solid var(--line);
  cursor:pointer;font-weight:400;font-size:.9rem;color:var(--text);letter-spacing:0}
.bk-row:last-child{border-bottom:0}
.bk-row[hidden]{display:none}
.bk-row input{width:20px;height:20px;padding:0;margin:0;flex:none;accent-color:var(--velvet)}
.bk-row:has(input:checked){background:var(--velvet-soft)}
.bk-row .bk-who{display:flex;flex-direction:column;min-width:0}
.bk-row .bk-who b{font-weight:600}
.bk-row small{font-size:.76rem;color:var(--muted)}
/* Somebody you cannot file this for stays listed, greyed, with the reason. */
.bk-row.off{cursor:default;color:var(--muted)}
.bk-row.off input{opacity:.35}
.bk-row .bk-why{font-style:italic}
.bk-plan{display:flex;flex-direction:column;margin-top:6px}
.bk-line{display:grid;grid-template-columns:18px minmax(0,1fr);gap:2px 8px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:.88rem}
.bk-line:last-child{border-bottom:0}
.bk-mark{font-weight:700;color:var(--hillside-deep);text-align:center}
.bk-line .bk-who{font-weight:600;min-width:0}
.bk-line .bk-what{grid-column:2;font-size:.82rem;color:var(--muted);line-height:1.45}
.bk-line.warn .bk-mark,.bk-line.warn .bk-what{color:var(--oak)}
.bk-line.bad .bk-mark,.bk-line.bad .bk-what{color:var(--rose)}
.bk-line.skip .bk-mark{color:var(--muted)}
.bk-line.skip .bk-who{color:var(--muted)}
/* A list the search has hidden a row of stays hidden: .list .item sets its
   own display, which beats the hidden attribute by itself. */
.list .item[hidden]{display:none}

/* Job titles on the profile (30 Sep 2026): a tag each, manager titles in lavender. */
.jt-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.jt-tag{padding:3px 9px;border-radius:999px;background:var(--velvet-soft);color:var(--velvet);
  font-size:.72rem;font-weight:600;line-height:1.3}
.jt-tag.mgr{background:var(--lavender-soft);color:var(--lavender)}

/* Employees: why a row has no code button (30 Sep 2026). Quiet, in the
   button's place, and short enough to sit beside the pencil. */
.item .side .emp-why{display:inline-block;max-width:190px;margin-right:6px;font-size:.76rem;
  font-style:italic;line-height:1.3;color:var(--muted);text-align:right;vertical-align:middle}
@media (max-width:560px){.item .side .emp-why{max-width:110px;font-size:.7rem}}

/* ===================================================== registration + staff details (30 Sep 2026)
   The three-step registration, the checkbox lists with "+ Add", the
   onboarding panel HR reviews from, and the staff's own three-section form.
   Plum for what is chosen, lavender for manager titles, the page's own
   greys for everything else. */
.lu{width:18px;height:18px;flex:none;vertical-align:-3px}
.btn .lu{width:17px;height:17px}
.req{color:var(--rose);font-weight:700}
.modal.wide{max-width:640px}
button.link{background:none;border:0;padding:0;color:var(--velvet);font-weight:600;font-size:.82rem;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}

/* fields with their own help and error lines */
.fld{margin-top:2px}
.fld-help{margin:5px 0 0;font-size:.78rem;line-height:1.45;color:var(--muted)}
.fld-err{margin:5px 0 0;font-size:.8rem;line-height:1.4;color:var(--rose);font-weight:600}
/* A label with the official site to look the number up on (10 Oct 2026). */
.fld-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fld-top label{margin-bottom:0;flex:1 1 auto;min-width:0}
.fld-top + input,.fld-top + textarea{margin-top:6px}
.fld-find{flex:none;font-size:.76rem;font-weight:600;color:var(--velvet);background:var(--velvet-soft);border:1px solid var(--velvet-line);
  padding:3px 10px;border-radius:999px;text-decoration:none;white-space:nowrap}
.fld-find:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
@media (hover:hover){ .fld-find:hover{background:var(--velvet-line)} }
.sf-epfnone{display:flex;align-items:center;gap:8px;margin:10px 0 6px;font-size:.85rem;color:var(--muted);font-weight:500;cursor:pointer}
.sf-epfnone input{width:16px;height:16px;margin:0;accent-color:var(--velvet);flex:none}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:var(--rose);box-shadow:0 0 0 3px var(--rose-soft)}

/* step bar: registration and the staff form alike */
.wz-steps{list-style:none;margin:2px 0 12px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.wz-step{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:12px;background:var(--bg);
  border:1px solid var(--line);color:var(--muted);min-width:0}
.wz-step.now{background:var(--velvet-soft);border-color:var(--velvet-line);color:var(--velvet)}
.wz-step.done{color:var(--hillside-deep)}
.wz-dot{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;border:1.5px solid currentColor;flex:none}
.wz-step.now .wz-dot{background:var(--velvet);border-color:var(--velvet);color:#fff}
.wz-lbl{display:flex;flex-direction:column;font-size:.8rem;font-weight:600;line-height:1.2;min-width:0}
.wz-lbl small{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.wz-jump{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:0;color:inherit;text-align:left;cursor:pointer;min-width:0}
@media (max-width:520px){.wz-lbl{font-size:.72rem}.wz-step{padding:7px 6px;gap:6px}.wz-dot{width:26px;height:26px}}
@media (max-width:380px){.wz-lbl small{display:none}}

/* a checkbox list, with what is chosen named above it */
.lp{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg);min-width:0}
.lp-h{display:flex;align-items:center;gap:7px;padding:0;font-size:.86rem;font-weight:700;color:var(--text)}
.lp-h .lu{color:var(--velvet)}
.lp-sel{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 8px;min-height:24px}
.lp-chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;background:var(--velvet);color:#fff;
  font-size:.75rem;font-weight:600;line-height:1.35}
.lp-chip.mgr{background:var(--lavender)}
.lp-none{font-size:.8rem;color:var(--muted);font-style:italic;margin:0}
.lp-list{display:flex;flex-direction:column;max-height:228px;overflow:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.lp-row{display:flex;align-items:center;gap:10px;margin:0;padding:9px 12px;border-bottom:1px solid var(--line);
  font-weight:500;font-size:.88rem;color:var(--text);letter-spacing:0;cursor:pointer}
.lp-row:last-child{border-bottom:0}
.lp-row input{width:18px;height:18px;padding:0;margin:0;flex:none;accent-color:var(--velvet)}
.lp-row:has(input:checked){background:var(--velvet-soft)}
.lp-row.off{cursor:default;color:var(--muted)}
.lp-name{flex:1;min-width:0}
.lp-tag{font-size:.68rem;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--lavender-soft);color:var(--lavender);white-space:nowrap}
.lp-add{display:inline-flex;align-items:center;gap:5px;margin-top:9px;padding:6px 2px;background:none;border:0;
  color:var(--velvet);font-weight:700;font-size:.84rem;cursor:pointer}
.lp-add-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:9px}
.lp-add-form input{flex:1 1 180px;min-width:0;padding:9px 11px}
.lp-add-form .fld-err{flex-basis:100%}
.lp-hint{margin:7px 0 0;font-size:.76rem;color:var(--muted);line-height:1.45}
.lp-hint:empty{display:none}
.lp .fld-err[hidden]{display:none}

/* review screens: label / value lines */
.rv-sec{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px}
.rv-h{display:flex;align-items:center;gap:7px;font-weight:700;font-size:.86rem;margin-bottom:6px}
.rv-h .lu{color:var(--velvet)}
.rv-h .link{margin-left:auto}
.rv-l{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:10px;padding:6px 0;border-top:1px solid var(--line);font-size:.86rem}
.rv-l:first-of-type{border-top:0}
.rv-l span{color:var(--muted)}
.rv-l b{font-weight:600;white-space:pre-line;overflow-wrap:anywhere}
.rv-chips{display:flex;flex-wrap:wrap;gap:4px}
.rv-check{display:flex;align-items:flex-start;gap:9px;margin:6px 0 0;font-weight:500;font-size:.86rem;color:var(--text);cursor:pointer}
.rv-check input{width:18px;height:18px;margin:1px 0 0;padding:0;flex:none;accent-color:var(--velvet)}
@media (max-width:480px){.rv-l{grid-template-columns:1fr;gap:2px}}

/* after registering */
.done-card{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;background:var(--hillside-soft);color:var(--text)}
.done-ico{color:var(--hillside-deep)}
.done-ico .lu{width:30px;height:30px}
.done-code{margin-top:12px}
.done-acts{display:grid;gap:8px;margin-top:14px}
.done-acts .btn{justify-content:flex-start}

/* onboarding: account and staff details side by side */
.ob-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ob-box{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:12px 14px;border:1px solid var(--line);border-radius:14px}
.ob-box .hint{margin:0}
.ob-k{display:flex;align-items:center;gap:6px;font-weight:700;font-size:.86rem}
.ob-k .lu{color:var(--velvet)}
.ob-hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ob-hist li{display:flex;flex-direction:column;gap:2px;padding-left:12px;border-left:2px solid var(--velvet-line);font-size:.84rem}
.ob-hist span{color:var(--muted);font-size:.78rem}
.ob-hist q{color:var(--text);font-style:italic}
.ob-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 12px;margin:0 0 4px;border-radius:12px;
  background:var(--bg);border:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.ob-strip > span{display:inline-flex;align-items:center;gap:5px}
.emp-details{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:.76rem;color:var(--muted)}
.emp-details .lu{width:14px;height:14px}
button.emp-ob{border:0;cursor:pointer;font:inherit;font-size:.73rem;font-weight:600}
@media (max-width:560px){.ob-grid{grid-template-columns:1fr}}

/* Home: the staff details card */
.onb-card{border-color:var(--velvet-line);background:linear-gradient(180deg,var(--velvet-soft),#fff 75%)}
.onb-top{display:flex;gap:12px;align-items:flex-start}
.onb-top h2{margin:0 0 4px}
.onb-top p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
.onb-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--velvet);color:#fff;flex:none}
.onb-ico .lu{width:22px;height:22px}
.onb-state{margin:12px 0 0;font-size:.86rem;color:var(--muted)}
.onb-note{display:flex;gap:10px;margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--rose-soft);color:var(--rose)}
.onb-note p{margin:3px 0 0;color:var(--text)}
.onb-card .btn{margin-top:14px}

/* the staff form */
.sf-card{padding:16px}
.sf-body{min-height:120px}
.sf-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;
  padding-top:14px;border-top:1px solid var(--line)}
.sf-right{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.sf-saved{display:flex;align-items:center;gap:5px;margin:10px 0 0;font-size:.78rem;color:var(--hillside-deep);font-weight:600}
.sf-info{display:flex;gap:10px;align-items:flex-start;margin:10px 0 2px;padding:11px 13px;border-radius:12px;
  background:var(--lavender-soft);color:var(--lavender);font-size:.86rem;line-height:1.45}
.sf-info p{margin:0;color:var(--text)}
.sf-banner{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;padding:12px 14px;border-radius:14px;
  background:var(--velvet-soft);border:1px solid var(--velvet-line);color:var(--velvet)}
.sf-banner p{margin:0;color:var(--text);font-size:.9rem;line-height:1.5}
.sf-banner.ok{background:var(--hillside-soft);border-color:#d9e3c9;color:var(--hillside-deep)}
.sf-banner.warn{background:var(--skin-soft);border-color:#f0d9c2;color:var(--oak)}
.sf-prev{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;min-width:0}
.sf-prev.bad{border-color:var(--rose)}
.sf-prev legend{float:left;width:100%;padding:0;margin:0 0 2px;font-weight:600;font-size:.88rem;color:var(--text)}
.sf-prev legend + *{clear:both}
.lp-h{float:left;width:100%}
.lp-h + *{clear:both}
.sf-radio{display:flex;align-items:flex-start;gap:10px;margin:10px 0 0;font-weight:500;font-size:.9rem;color:var(--text);cursor:pointer}
.sf-radio input{width:19px;height:19px;margin:1px 0 0;padding:0;flex:none;accent-color:var(--velvet)}
.sf-sub{margin:8px 0 4px 29px}
.sf-yn{display:flex;flex-wrap:wrap;gap:0 28px}
/* Ticks on Claims to Pay (1 Oct 2026): one payroll month for many claims. */
.cl-bulk{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.cl-bulk #cl-bulk-month{margin-left:auto}
.cl-tick-all{display:flex;align-items:center;gap:8px;margin:0;font-weight:600;cursor:pointer}
.cl-tick{display:flex;align-items:center;margin:0;cursor:pointer;flex:none}
.cl-tick-person{display:inline-flex;align-items:center;gap:10px;margin:0;cursor:pointer;font:inherit;color:inherit}
.cl-tick input,.cl-tick-all input,.cl-tick-person input{width:19px;height:19px;margin:0;padding:0;flex:none;accent-color:var(--velvet)}
.cl-item > .main{flex:1 1 auto;min-width:0}
.sf-upload{cursor:pointer;margin-top:8px}
.sf-slips{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.sf-slips li{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;font-size:.86rem}
.sf-slips li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-money{display:flex;align-items:center;gap:8px;max-width:260px}
.sf-money span{font-weight:700;color:var(--muted)}
input[readonly],textarea[readonly]{background:var(--bg);color:var(--text)}
@media (hover:hover){
  .lp-row:not(.off):hover{background:var(--velvet-soft)}
  .lp-add:hover,button.link:hover{color:var(--velvet-mid)}
  .wz-jump:hover .wz-dot{border-color:var(--velvet)}
}
@media (max-width:520px){.sf-sub{margin-left:0}.sf-actions .btn{flex:1 1 auto}}
/* A row's words give way before its buttons do: a long payroll email no
   longer pushes Reset password off a phone's screen. */
.list .item > .row{min-width:0;flex:1 1 auto}
.item .main .s{overflow-wrap:anywhere}

/* ---- Work Schedule, in three tabs (4 Oct 2026) ----------------------------
   Team Schedule, Regular Working Days, My Schedule (extra.js). Words carry
   every state - an outlet's code, Off, Leave, PH - and colour only helps. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* A .btn sets its own display, which beats the hidden attribute; the
   schedule's buttons are shown and hidden by that attribute. */
.modal-foot .btn[hidden],.sc-panel .btn[hidden],.sc-change[hidden]{display:none!important}
.sc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;border-bottom:1px solid var(--line);padding-bottom:8px}
.sc-tabs [role="tab"]{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;font-weight:600;
  font-size:.88rem;color:var(--muted);background:transparent;border:1px solid transparent}
.sc-tabs [role="tab"] .lu{width:17px;height:17px;flex:none}
.sc-tabs [role="tab"][aria-selected="true"]{background:var(--velvet-soft);color:var(--velvet);border-color:var(--velvet-line)}
.sc-tabs [role="tab"]:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.sc-panel{min-width:0}
.sc-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.sc-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sc-arrow{padding-left:8px;padding-right:8px}
.sc-arrow .lu{width:18px;height:18px;display:block}
.sc-goto{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:.82rem}
.sc-goto input,.sc-nav input[type="month"]{width:auto;padding:7px 9px}
.sc-seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;background:var(--card)}
.sc-seg button{padding:7px 14px;font-size:.84rem;font-weight:600;color:var(--muted)}
.sc-seg button[aria-pressed="true"]{background:var(--velvet);color:#fff}
.sc-seg button:focus-visible{outline:2px solid var(--velvet);outline-offset:-2px}
.sc-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.sc-search{display:flex;align-items:center;gap:6px;flex:1 1 200px;margin:0;padding:0 10px;border:1px solid var(--line-strong);
  border-radius:12px;background:#fff;color:var(--text);font-weight:400}
.sc-search .lu{width:16px;height:16px;color:var(--muted);flex:none}
.sc-search input{border:0;padding:10px 0;box-shadow:none;background:transparent}
.sc-search input:focus{box-shadow:none}
.sc-search:focus-within{border-color:var(--velvet);box-shadow:0 0 0 3px rgba(71,0,84,.12)}
.sc-filters select{width:auto;min-width:160px;flex:0 1 auto}
.sc-check{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:.85rem;color:var(--text)}
.sc-check input{width:18px;height:18px}
.sc-title{font-size:1.1rem;margin:4px 0 10px}
.sc-body{min-height:60px}
.sc-loading,.sc-empty{color:var(--muted);padding:18px 4px;margin:0}
.sc-state{border:1px solid var(--rose);background:var(--rose-soft);color:var(--rose);border-radius:12px;padding:12px 14px}
.sc-state p{margin:0 0 8px}
.sc-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px;background:var(--card);max-width:100%}
.sc-table{border-collapse:separate;border-spacing:0;width:100%;font-size:.8rem}
.sc-table th,.sc-table td{padding:4px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.sc-table thead th{background:var(--card);color:var(--muted);font-weight:600}
.sc-who-h,.sc-who{position:sticky;left:0;background:var(--card);z-index:1;text-align:left!important;min-width:118px;max-width:150px;
  padding-left:10px!important;box-shadow:1px 0 0 var(--line)}
.sc-who-h{z-index:2}
.sc-who .nm{display:block;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-who .sub{display:block;font-size:.7rem;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-dh .w,.sc-dh .n{display:block;line-height:1.25}
.sc-dh .n{color:var(--text);font-weight:600}
.sc-dh.we .w{color:var(--velvet-mid)}
.sc-dh.is-today{background:var(--velvet-soft);color:var(--velvet)}
.sc-table td.is-today{background:#faf3fb}
.sc-tag{display:block;font-size:.62rem;font-weight:700;color:var(--velvet)}
.sc-grp th{background:var(--bg);text-align:left!important;font-size:.74rem;font-weight:700;color:var(--text);padding:8px 10px!important}
.sc-grp th span{position:sticky;left:10px}
.sc-c{display:inline-flex;align-items:center;justify-content:center;gap:2px;position:relative;min-width:52px;min-height:36px;
  padding:2px 6px;border-radius:8px;font-weight:700;font-size:.78rem;border:1px solid transparent;font-style:normal;line-height:1.1}
.sc-table.month .sc-c{min-width:36px;min-height:30px;font-size:.7rem;padding:1px 3px}
.sc-table.month .sc-who-h,.sc-table.month .sc-who{min-width:104px}
.sc-c.work.b-zp{background:#ead6f0;color:#5b1a6b}
.sc-c.work.b-8t{background:#d4ddf4;color:#34477f}
.sc-c.work.b-ru{background:#d9e6c4;color:#3b5524}
.sc-c.work.b-ap{background:#cde8e4;color:#1f5f58}
.sc-c.work.b-cs{background:#f3ddc0;color:#7a4a17}
.sc-c.away{border:1.5px dashed currentColor}
.sc-c.off{background:transparent;color:var(--muted);border:1px solid var(--line-strong);font-weight:600}
.sc-c.leave{background:#f6cbd8;color:#a11d4b;border:1px solid #e79ab3}
.sc-c.none{color:var(--muted)}
button.sc-c:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
@media (hover: hover){ button.sc-c:hover{filter:brightness(.96);border-color:var(--velvet-mid)} }
.sc-phmark{display:inline-block;font-size:.56rem;font-weight:700;color:#8a5528;background:#fde0c8;border-radius:4px;padding:0 3px;
  margin-left:2px;font-style:normal;line-height:1.4}
.sc-dh .sc-phmark{display:block;margin:2px auto 0;width:max-content}
.sc-key{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:12px 0 0;padding:0;font-size:.76rem;color:var(--muted)}
.sc-key li{display:flex;align-items:center;gap:6px}
.sc-key .sc-c{min-width:36px;min-height:24px;font-size:.68rem}
.sc-foot{margin:8px 2px 0}
.sc-dl{display:grid;gap:8px;margin:0 0 12px}
.sc-dl div{display:grid;grid-template-columns:130px 1fr;gap:8px}
.sc-dl dt{color:var(--muted);font-size:.84rem}
.sc-dl dd{margin:0;font-weight:600}
.sc-change{border:1px solid var(--line-strong);border-radius:12px;padding:10px 12px;margin:6px 0 0}
.sc-change legend{font-weight:700;padding:0 4px}
.sc-change-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sc-change select{width:auto}
.sc-radio{display:inline-flex;align-items:center;gap:6px;margin:6px 0;color:var(--text);font-size:.92rem;font-weight:500}
.sc-radio input{width:18px;height:18px}
.sc-err{color:var(--rose);font-weight:600;margin:8px 0 0}
.sc-intro{margin:0 0 10px}
.sc-warn{background:#fff4e0;border:1px solid #f2c97d;color:#7a4a17;border-radius:12px;padding:10px 12px;margin:0 0 10px;font-size:.88rem}
.sc-reg{border-collapse:separate;border-spacing:0;width:100%;font-size:.8rem}
.sc-reg th,.sc-reg td{padding:6px;border-bottom:1px solid var(--line);vertical-align:middle;text-align:left}
.sc-reg thead th{color:var(--muted);font-weight:600;background:var(--card)}
.sc-reg thead abbr{text-decoration:none}
.sc-reg .d{text-align:center;padding:4px 2px}
.sc-wd{display:inline-flex;flex-direction:column;align-items:center;gap:1px;min-width:40px;padding:3px 2px;border-radius:6px;
  font-size:.7rem;font-weight:700;text-align:center;line-height:1.15}
/* The day on each chip, so a row reads on its own (4 Oct 2026). */
.sc-wd .sc-wd-day{font-size:.6rem;font-weight:600;letter-spacing:.02em}
.sc-wd.on{background:#e6f0da;color:#3b5524}
.sc-wd.off{background:transparent;color:var(--muted);border:1px solid var(--line-strong)}
.sc-reg .tot{white-space:nowrap;color:var(--text)}
.sc-reg .src{min-width:170px}
.sc-reg .sc-who .sc-reg-btn{display:inline-flex;margin-top:5px;padding:4px 12px;font-size:.74rem}
.sc-badge{display:inline-block;margin:2px 4px 2px 0;padding:2px 8px;border-radius:999px;font-size:.7rem;font-weight:600;
  background:var(--velvet-soft);color:var(--velvet)}
.sc-badge.warn{background:#fff4e0;color:#7a4a17;border:1px solid #f2c97d}
.sc-badge.bed{background:var(--lavender-soft);color:var(--lavender)}
.sc-badge.next{background:var(--hillside-soft);color:var(--hillside-deep)}
.sc-ed-who{margin:0 0 8px;font-weight:600}
.sc-week-ed{border:0;padding:0;margin:4px 0 8px;display:grid;gap:6px;min-width:0}
.sc-week-ed legend{font-weight:700;margin:0 0 6px;padding:0}
.sc-wd-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;border-radius:10px;background:var(--bg)}
.sc-wd-n{font-weight:600}
.sc-week-ed .sc-seg label{display:inline-flex;margin:0;cursor:pointer;position:relative}
.sc-week-ed .sc-seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.sc-week-ed .sc-seg span{padding:6px 16px;font-size:.84rem;font-weight:600;color:var(--muted)}
.sc-week-ed .sc-seg input:checked + span{background:var(--velvet);color:#fff}
.sc-week-ed .sc-seg input:focus-visible + span{outline:2px solid var(--velvet);outline-offset:-2px}
.sc-ed-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:6px 0}
.sc-rv-head{margin:0 0 10px}
.sc-rv{border-collapse:collapse;width:100%;font-size:.86rem}
.sc-rv th,.sc-rv td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
.sc-rv tr.chg td,.sc-rv tr.chg th{background:#fff8e8}
.sc-chg{display:inline-block;font-size:.68rem;font-weight:700;color:#7a4a17;background:#fde7bf;border-radius:999px;padding:1px 7px;margin-left:4px}
.sc-rv-notes{margin:12px 0 0;padding-left:18px;display:grid;gap:6px;font-size:.86rem}
.sc-rv-notes li.warn{color:#7a4a17;font-weight:600}
.sc-mine-top{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.sc-mine-tally{margin:0}
.sc-mine-week{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.86rem;color:var(--text);background:var(--velvet-soft);
  border-radius:12px;padding:8px 12px}
.sc-mine-week .lu{width:16px;height:16px;color:var(--velvet);flex:none}
.sc-mine-week span{flex:1 1 220px}
.rw-sum{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 12px;
  border:1px solid var(--line-strong);border-radius:12px}
.rw-sum .hint{display:block;margin:2px 0 0}
@media (max-width:640px){
  .sc-tabs [role="tab"]{padding:8px 10px;font-size:.8rem}
  .sc-filters select{min-width:0;flex:1 1 140px}
  .sc-dl div{grid-template-columns:1fr;gap:2px}
  .sc-c{min-width:44px}
  .sc-who-h,.sc-who{min-width:96px;max-width:116px}
}

/* Payroll's door (js/payroll.js, 7 Oct 2026): setting up the authenticator,
   the 6-digit code, the recovery codes. Big, plain and thumb-sized - it is
   used on a phone with the authenticator app open beside it. */
.pr-card p{margin:0 0 10px}
.pr-steps{margin:6px 0 4px 20px;display:flex;flex-direction:column;gap:14px}
.pr-steps li{padding-left:2px;line-height:1.5}
.pr-key{margin:10px 0 8px;padding:12px 14px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--velvet-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.05rem;letter-spacing:.06em;word-break:break-all;color:var(--velvet-deep)}
.pr-code-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.pr-code-row .btn{flex:none}
input.pr-code{width:9.5em;font-size:1.4rem;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
input.pr-rec{width:13em;text-transform:uppercase;letter-spacing:.12em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.pr-recovery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 14px}
.pr-recovery span{padding:9px 10px;border:1px solid var(--line-strong);border-radius:10px;text-align:center;background:var(--bg);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.98rem;letter-spacing:.08em}
.pr-lost{margin-top:14px}
.pr-lost summary{cursor:pointer;color:var(--velvet);font-weight:600;font-size:.9rem}
.pr-warn{color:var(--rose);font-weight:600}

/* Private project lists on the to-do page (js/manager.js). One card; each
   section folds; each item is one row you tap to open. Same velvet, badges
   and type as the rest. */
.pj-card{display:flex;flex-direction:column;gap:12px}
.pj-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pj-head h2{margin:0;font-size:1.12rem;letter-spacing:.01em}
.pj-private{font-size:.72rem;font-weight:600;color:var(--velvet);background:var(--velvet-soft);border:1px solid var(--velvet-line);
  border-radius:99px;padding:3px 10px;white-space:nowrap}
.pj-desc{margin:-4px 0 0;max-width:68ch}
.pj-overall{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.pj-bar{display:inline-block;position:relative;width:64px;height:6px;border-radius:99px;background:var(--line);overflow:hidden;vertical-align:middle}
.pj-bar i{position:absolute;inset:0 auto 0 0;background:var(--hillside-deep);border-radius:99px}
.pj-bar.big{width:100%;height:8px}
.pj-sec{border:1px solid var(--line);border-radius:12px;background:var(--card)}
.pj-sec>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:11px 14px;font-weight:600;color:var(--text)}
.pj-sec>summary::-webkit-details-marker{display:none}
.pj-sec>summary::before{content:"▸";color:var(--velvet);margin-right:2px;transition:transform .15s}
.pj-sec[open]>summary::before{transform:rotate(90deg)}
.pj-sec-t{flex:1}
.pj-sec-n{font-size:.78rem;font-weight:500;color:var(--muted);white-space:nowrap}
.pj-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.pj-item{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px 14px;border-bottom:1px solid var(--line);background:none;color:inherit}
.pj-item:last-child{border-bottom:none}
.pj-item:focus-visible{outline:2px solid var(--velvet);outline-offset:-2px}
.pj-num{font-variant-numeric:tabular-nums;font-weight:700;color:var(--velvet);font-size:.9rem}
.pj-main{display:flex;flex-direction:column;min-width:0}
.pj-title{font-weight:600;line-height:1.3}
.pj-sub{font-size:.78rem;color:var(--muted)}
.pj-side{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pj-prog{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.pj-item.is-done .pj-title{color:var(--muted)}
@media (hover: hover){ .pj-item:hover{background:var(--velvet-soft)} .pj-sec>summary:hover{color:var(--velvet)} }
@media (max-width:640px){
  .pj-item{grid-template-columns:2em minmax(0,1fr)}
  .pj-side{grid-column:2;justify-content:flex-start}
}
.pj-detail h4{font-size:.92rem;margin:14px 0 4px;color:var(--velvet-deep)}
.pj-detail p{margin:0 0 4px;line-height:1.5}
.pj-important{padding:9px 12px;border-radius:10px;background:var(--skin-soft);color:var(--oak);font-size:.88rem}
.pj-cl-head span{font-weight:500;color:var(--muted);font-size:.82rem;margin-left:4px}
.pj-checks{display:flex;flex-direction:column;gap:2px}
.pj-check{display:flex;align-items:center;gap:10px;margin:0;padding:7px 8px;border-radius:9px;color:var(--text);font-weight:500;font-size:.9rem;cursor:pointer}
.pj-check input{width:18px;height:18px;flex:none;accent-color:var(--velvet)}
.pj-check span{flex:1}
.pj-check em{font-style:normal;font-size:.72rem;color:var(--muted);white-space:nowrap}
.pj-check.on span{color:var(--muted);text-decoration:line-through}
@media (hover: hover){ .pj-check:hover{background:var(--bg)} }

/* The payroll workspace (js/payroll-ui.js, 7 Oct 2026): the payroll app's seven
   sections inside Lunites. A month picker and the company's figures at the top,
   the sections and their pages as two rows of tabs, then the page. Numbers line
   up (tabular), wide tables scroll inside their own box, never the page. */
.pw{display:flex;flex-direction:column;gap:12px}
.pw-back{align-self:flex-start}
.pw-back .pf-link{font-size:.9rem}
.pw-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 14px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius)}
.pw-period{display:flex;align-items:center;gap:6px}
.pw-period input[type=month]{width:auto;min-width:150px;padding:7px 10px;font-weight:600}
.pw-step{width:34px;height:34px;border-radius:10px;border:1px solid var(--line-strong);background:var(--card);color:var(--velvet);
  font-size:1.2rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pw-step:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.pw-chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--velvet-soft);color:var(--velvet);
  font-size:.78rem;font-weight:600;white-space:nowrap}
.pw-chip.warn{background:var(--oak-soft);color:var(--oak)}
.pw-chip.good{background:var(--hillside-soft);color:var(--hillside-deep)}
.pw-co{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-left:auto}
.pw-co label{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);margin:0;font-weight:500}
.pw-co input{width:120px;padding:6px 8px;font-variant-numeric:tabular-nums;text-align:right}
.pw-pill{font-size:.74rem;padding:3px 9px;border-radius:999px;background:var(--bg);color:var(--muted);white-space:nowrap}
.pw-pill.good{background:var(--hillside-soft);color:var(--hillside-deep)}
.pw-pill.stop{background:var(--rose-soft);color:var(--rose)}
.pw-headbtns{gap:6px}
.pw-sections,.pw-pages,.pw-who{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pw-sections::-webkit-scrollbar,.pw-pages::-webkit-scrollbar,.pw-who::-webkit-scrollbar{display:none}
.pw-sections button{flex:none;padding:8px 14px;border-radius:12px;border:1px solid transparent;background:none;color:var(--muted);
  font-weight:600;font-size:.88rem;cursor:pointer;white-space:nowrap}
.pw-sections button.on{background:var(--velvet);color:#fff}
.pw-pages{border-bottom:1px solid var(--line);gap:2px}
.pw-pages button{flex:none;padding:8px 12px;border:none;border-bottom:2px solid transparent;background:none;color:var(--muted);
  font-size:.82rem;cursor:pointer;white-space:nowrap;margin-bottom:-1px}
.pw-pages button.on{color:var(--velvet);border-bottom-color:var(--velvet);font-weight:600}
.pw-sections button:focus-visible,.pw-pages button:focus-visible,.pw-who button:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.pw-body{display:flex;flex-direction:column;gap:12px}
.pw-body > .card{margin:0}
.pw-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pw-tiles-10{grid-template-columns:repeat(5,minmax(0,1fr))}
.pw-tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.pw-tile span{font-size:.74rem;color:var(--muted)}
.pw-tile b{font-size:1.15rem;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw-tile small{font-size:.7rem;color:var(--muted)}
.pw-tile.good b{color:var(--hillside-deep)}
.pw-tile.stop b{color:var(--rose)}
.pw-grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px}
.pw-grid2 > .card{margin:0}
.pw-big{font-size:1.6rem;font-weight:700;margin:4px 0 0;font-variant-numeric:tabular-nums}
.pw-progress{width:100%;height:8px;accent-color:var(--velvet)}
.pw-dots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pw-dots li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 8px 26px;border-radius:10px;
  background:var(--bg);position:relative;font-size:.86rem;line-height:1.4}
.pw-dots li::before{content:"";position:absolute;left:10px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--muted)}
.pw-dots li.warn::before{background:var(--oak)}
.pw-dots li.stop::before{background:var(--rose)}
.pw-dots li.good::before{background:var(--hillside)}
.pw-dots li .btn{flex:none}
.pw-rows{display:flex;flex-direction:column;gap:6px}
.pw-rows > div{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--bg);
  font-size:.86rem;font-variant-numeric:tabular-nums}
.pw-cardhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.pw-cardhead h2{margin:0}
.pw-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px}
.pw-table{width:100%;border-collapse:collapse;font-size:.8rem;font-variant-numeric:tabular-nums}
.pw-table th{position:sticky;top:0;background:var(--velvet-soft);color:var(--velvet);font-weight:600;text-align:left;padding:7px 8px;white-space:nowrap}
.pw-table td{padding:6px 8px;border-top:1px solid var(--line);white-space:nowrap}
.pw-table .n{text-align:right}
.pw-table tr.pw-group td{background:var(--bg);font-weight:600;color:var(--velvet)}
.pw-table tr.pw-sub td{font-weight:600;background:var(--walnut-soft)}
.pw-pt{color:var(--lavender);font-weight:600}
.pw-tag{display:inline-block;font-size:.68rem;padding:1px 7px;border-radius:999px;background:var(--velvet-soft);color:var(--velvet);font-weight:600;vertical-align:1px}
.pw-tag.warn{background:var(--oak-soft);color:var(--oak)}
.pw-tag.good{background:var(--hillside-soft);color:var(--hillside-deep)}
.pw-tag.stop{background:var(--rose-soft);color:var(--rose)}
.pw-upl{display:flex;gap:5px;align-items:center;font-size:.72rem;margin-top:4px;white-space:nowrap}
.pw-note{margin:10px 0 0;padding:8px 10px;border-radius:10px;background:var(--bg);font-size:.82rem;line-height:1.45}
.pw-note.warn{background:var(--oak-soft);color:var(--oak)}
.pw-note.stop{background:var(--rose-soft);color:var(--rose)}
.pw-note.good{background:var(--hillside-soft);color:var(--hillside-deep)}
.pw-stop{color:var(--rose)}
.pw-acc{margin-top:10px;font-size:.84rem}
.pw-acc summary{cursor:pointer;color:var(--muted)}
.pw-acc ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.pw-acc li.stop{color:var(--rose)}
.pw-status.confirmed{border-color:var(--oak-soft)}
.pw-status.sent{border-color:var(--hillside-soft)}
.pw-status p{margin:0 0 6px}
.pw-who{padding:2px 0}
.pw-who button{flex:none;padding:6px 11px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);color:var(--text);
  font-size:.8rem;cursor:pointer;white-space:nowrap}
.pw-who button.on{background:var(--velvet);border-color:var(--velvet);color:#fff}
.pw-slip{display:flex;flex-direction:column;gap:8px}
.pw-slipbar{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;font-size:.86rem}
.pw-slipbar .pw-note{margin-top:6px}
.pw-docwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pw-docwrap .doc{margin:0 auto}
@media (hover: hover){
  .pw-step:hover{background:var(--velvet-soft)}
  .pw-sections button:not(.on):hover{background:var(--velvet-soft);color:var(--velvet)}
  .pw-pages button:not(.on):hover{color:var(--velvet)}
  .pw-who button:not(.on):hover{border-color:var(--velvet)}
}
/* Month Entry: the person's cards on the left, their figures on the right,
   kept in view while the lines are typed. */
.pw-pick label{display:flex;align-items:center;gap:10px;margin:0;font-weight:600;font-size:.86rem}
.pw-pick select{max-width:320px}
.pw-lockbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.86rem;border-color:var(--velvet-line)}
.pw-lockbar.editing{background:var(--oak-soft);border-color:var(--oak-soft)}
/* Pinned under the top bar as Month Entry scrolls (Giselle, 8 Oct 2026: she was at
   the Overtime table with the Edit button out of sight at the top). */
.pw-lockbar{position:sticky;top:74px;z-index:30;box-shadow:var(--shadow-sm)}
.pw-entry{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:12px;align-items:start}
.pw-entry-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.pw-entry-main > .card{margin:0}
.pw-entry-side{position:sticky;top:12px;margin:0}
.pw-entry-side h2{font-size:1rem}
.pw-fields{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;margin-bottom:8px}
.pw-fields label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:var(--muted);margin:0}
.pw-fields input{width:160px;font-variant-numeric:tabular-nums}
.pw-total{margin:8px 0 0;font-size:.86rem}
.pw-lines input,.pw-lines select{padding:5px 7px;font-size:.82rem;min-width:0}
.pw-lines td{vertical-align:middle}
.pw-lines + .btn{margin-top:8px}
.pw-table tr.pw-synced td{background:var(--velvet-soft)}
.pw-sum{display:flex;flex-direction:column;gap:2px;font-size:.84rem;font-variant-numeric:tabular-nums}
.pw-sum > div{display:flex;justify-content:space-between;gap:8px;padding:3px 0}
.pw-sum > div.t{border-top:1px solid var(--line);margin-top:4px;padding-top:6px;font-weight:700}
.pw-sum > div.pw-basiclink{justify-content:flex-end;padding:0 0 4px}
.pw-sum > div.good b{color:var(--hillside-deep)}
.pw-sum span{color:var(--muted)}
.pw-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.pw-personcard{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px 14px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;cursor:pointer;font:inherit;color:var(--text)}
.pw-personcard:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.pw-personsum{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
@media (hover: hover){ .pw-personcard:hover{border-color:var(--velvet)} }
@media (max-width:900px){ .pw-entry{grid-template-columns:1fr} .pw-entry-side{position:static;order:-1} }
/* Settings: locked cards of fields, address lists, the import report. */
.pw-fields-wide input{width:240px;max-width:100%}
.pw-h3{font-size:.92rem;margin:14px 0 6px;color:var(--velvet)}
.pw-table td.pw-wrap{white-space:normal;min-width:220px}
.pw-list{margin-top:12px}
.pw-list > b{font-size:.86rem}
.pw-list p{margin:2px 0 6px}
.pw-listrow{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:.86rem}
.pw-listrow input{max-width:280px}
.pw-filebtn{cursor:pointer}
.pw-import{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.pw-import .pw-note ul{margin:6px 0 0;padding-left:18px}
#pw-import-confirm{max-width:180px}
/* People: a row per person that opens to their details or the edit form. */
.pw-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.pw-chipbtn{padding:5px 11px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);font-size:.78rem;cursor:pointer;color:var(--text)}
.pw-chipbtn.on{background:var(--velvet);border-color:var(--velvet);color:#fff}
.pw-check{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;margin:0;cursor:pointer}
.pw-check input{width:16px;height:16px;flex:none;accent-color:var(--velvet)}
.pw-staffrow{border-top:1px solid var(--line)}
.pw-staffrow:first-of-type{border-top:none}
.pw-staffhead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;width:100%;padding:10px 4px;background:none;border:none;text-align:left;
  font:inherit;color:var(--text);cursor:pointer}
.pw-staffhead:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.pw-caret{color:var(--muted);width:12px}
.pw-staffsum{flex-basis:100%;padding-left:20px;font-size:.78rem;color:var(--muted)}
.pw-staffbody{padding:4px 4px 14px 20px;display:flex;flex-direction:column;gap:10px}
.pw-kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 16px}
.pw-kv > div{display:flex;flex-direction:column;gap:1px;font-size:.84rem}
.pw-kv span{font-size:.72rem;color:var(--muted)}
.pw-kv b{font-weight:600;overflow-wrap:anywhere}
.pw-ul{margin:4px 0 0;padding-left:18px;font-size:.84rem}
.pw-edit{display:flex;flex-direction:column;gap:6px}
.pw-editbtns{margin-top:10px}
.pw-danger{color:var(--rose)}
/* Payments: a voucher beside its paid card; the bank files three across. */
.pw-vou{display:flex;flex-direction:column;gap:10px}
.pw-less{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px dashed var(--line-strong);border-radius:12px;font-size:.84rem}
.pw-less .btn{align-self:flex-start}
.pw-vourow{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:12px;align-items:start}
.pw-paidcard{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);font-size:.84rem;display:flex;flex-direction:column;gap:8px}
.pw-paidcard p{margin:0}
.pw-paidcard hr{border:none;border-top:1px solid var(--line);margin:4px 0}
.pw-good{color:var(--hillside-deep)}
.pw-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pw-grid3 > .card{margin:0}
.pw-bankcard p{margin:4px 0}
.pw-actions{display:flex;gap:4px;flex-wrap:wrap}
.pw-claimpick{display:flex;flex-direction:column;gap:12px;max-height:60vh;overflow:auto}
.pw-claimperson{display:flex;flex-direction:column;gap:4px}
.pw-dim{opacity:.55}
/* The bills: voucher cards, payee details, the bills table and its list. */
.pw-said{white-space:pre-line;margin:0 0 10px}
.pw-packticks{display:grid;gap:6px;margin:8px 0 12px}
.pw-bill{display:flex;flex-direction:column;gap:10px}
.pw-bill .pw-fields{margin-bottom:0}
.pw-bill .pw-fields .pw-check{align-self:flex-end;padding-bottom:8px}
.pw-fields label.pw-check{flex-direction:row;align-items:center;color:var(--text);font-size:.84rem}
#pw-bv-who{width:auto;min-width:200px;max-width:340px}
.pw-payee{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.pw-payee p{margin:8px 0 4px}
.pw-payee-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px}
.pw-payee-grid label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:var(--muted);margin:0;min-width:0}
.pw-payee-grid input,.pw-payee-grid select,.pw-payee-grid textarea{width:100%;box-sizing:border-box}
.pw-payee-grid .pw-span{grid-column:1 / -1}
.pw-fold{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.pw-amt{width:8em;text-align:right;font-variant-numeric:tabular-nums}
.pw-listrow input:not(.pw-amt){flex:1 1 auto;min-width:0}
.pw-docwrap [data-pvk]{outline:1px dashed var(--velvet);outline-offset:-2px;cursor:text}
.pw-docwrap [data-pvk]:focus{outline-style:solid;background:var(--velvet-soft)}
.pw-bad{color:var(--rose);font-size:.76rem;margin-top:3px;white-space:normal}
.pw-readtext{white-space:pre-wrap;font-size:.7rem;max-height:220px;overflow:auto;margin:4px 0 0}
.pw-scope{display:flex;gap:10px;align-items:flex-start;margin:10px 0;cursor:pointer;font-size:.9rem}
.pw-scope input{margin-top:3px;flex:none;accent-color:var(--velvet)}
.pw-scope span{display:flex;flex-direction:column;gap:2px}
.pw-refgrp{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.pw-refgrp input{width:9em}
.pw-billtable td{vertical-align:top}
.pw-billtable td.pw-wrap{min-width:0}
.pw-billtable td:nth-child(1){min-width:130px}
.pw-billtable td:nth-child(2){min-width:150px}
.pw-billtable td:nth-child(5){min-width:110px}
.pw-billtable td:nth-child(6){min-width:180px}
.pw-billtable input[data-bc-inv]{width:9em}
.modal.pw-xwide{max-width:min(960px,96vw)}
.pw-billtable td .pw-check{display:flex;margin-top:4px}
.pw-billtable tr.pw-billsub td:first-child{padding-left:22px}
.pw-billtable input[type=date]{margin-top:4px}
.pw-billreg{margin-top:12px}
.pw-billreg summary{cursor:pointer;padding:6px 0}
.pw-billreg textarea{width:200px}
.pw-billreg td{vertical-align:top}
@media (max-width:760px){ .pw-payee-grid{grid-template-columns:1fr} }
@media (max-width:900px){ .pw-vourow{grid-template-columns:1fr} .pw-grid3{grid-template-columns:1fr} }
@media (hover: hover){ .pw-chipbtn:not(.on):hover{border-color:var(--velvet)} .pw-staffhead:hover b{color:var(--velvet)} }
@media (max-width:1100px){ .pw-tiles-10{grid-template-columns:repeat(3,minmax(0,1fr))} .pw-grid2{grid-template-columns:1fr} }
@media (max-width:760px){
  .pw-head{padding:10px}
  .pw-co{margin-left:0;width:100%}
  .pw-co label{flex:1 1 140px}
  .pw-co input{width:100%;min-width:0}
  .pw-tiles,.pw-tiles-10{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pw-rows > div{grid-template-columns:1fr auto}
  .pw-rows > div span:nth-child(2){grid-column:1 / -1;order:3;font-size:.78rem;color:var(--muted)}
}

/* Events a claim is made under (8 Oct 2026): the budget line, over budget in rose. */
.ev-over{color:var(--rose)}
.ev-left{color:var(--hillside-deep)}
.ev-line{margin-top:2px}
.ev-approvers{display:grid;gap:6px;max-height:220px;overflow:auto;padding:4px 0}
.events-card .ev-off{opacity:.6}
.events-card .ev-side{display:flex;gap:6px;align-items:center}

/* An event's report (8 Oct 2026): where the budget stands, then each person
   and every claim, for whoever reviews the event's spending. */
.modal.evr-modal{max-width:960px}
.evr h4{margin:18px 0 6px;font-size:.9rem}
.evr-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 10px}
.evr-tile{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;background:var(--card);display:flex;flex-direction:column;gap:2px}
.evr-tile span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.evr-tile b{font-size:1.1rem;font-variant-numeric:tabular-nums}
.evr-tile small{font-size:.72rem;color:var(--muted)}
.evr-tile.good b{color:var(--hillside-deep)}
.evr-tile.bad{border-color:var(--rose);background:var(--rose-soft)}
.evr-tile.bad b{color:var(--rose)}
.evr-bar{display:flex;height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.evr-bar i{display:block;height:100%}
.evr-bar .c,.evr-key .c{background:var(--velvet)}
.evr-bar .p,.evr-key .p{background:var(--oak)}
.evr-key{display:flex;gap:14px;margin-top:4px}
.evr-key i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.evr-scroll{overflow-x:auto}
.evr-t{width:100%;border-collapse:collapse;font-size:.85rem}
.evr-t th{text-align:left;font-weight:600;color:var(--muted);font-size:.75rem;padding:6px 8px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.evr-t td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.evr-t .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.evr-t tr.rejected td{opacity:.55}
.evr-t tr.rejected td.n{text-decoration:line-through}
.evr-chip{display:inline-block;margin-top:3px;padding:1px 6px;border-radius:99px;background:var(--lavender-soft);font-size:.7rem;white-space:nowrap}
.evr-st{display:inline-block;padding:1px 8px;border-radius:99px;font-size:.75rem;background:var(--line)}
.evr-st.pending{background:var(--oak-soft)}
.evr-st.approved{background:var(--hillside-soft)}
.evr-st.paid{background:var(--velvet-soft)}
.evr-st.rejected{background:var(--rose-soft)}
@media(max-width:640px){.evr-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media print{.evr-t a{color:inherit;text-decoration:none}.evr-scroll{overflow:visible}}
.cpay-card .cpay-side{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.cpay-card .badge.ok{background:var(--hillside-soft)}

/* Progress reported on a task (8 Oct 2026). */
.note .tk-prog{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;font-size:.78rem;color:var(--muted)}
.tk-pbar{display:inline-block;width:64px;height:6px;border-radius:99px;background:var(--line);overflow:hidden;vertical-align:middle}
.tk-pbar i{display:block;height:100%;background:var(--velvet)}
.tk-reports{display:grid;gap:8px;max-height:320px;overflow:auto}
.tk-report{border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px;display:grid;gap:4px}
.tk-report .s{font-size:.78rem;color:var(--muted)}
.tk-report-t{white-space:pre-wrap;font-size:.9rem}
.tk-report .rcpt{width:72px;height:72px}

/* Staff details shown in the employee box (8 Oct 2026), the owner's only. */
.emp-info{margin:12px 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--lavender-soft)}
.emp-det-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.emp-det-grid .rv-sec{margin-top:0;background:var(--card)}
@media (max-width:640px){.emp-det-grid{grid-template-columns:1fr}}
.cp-to{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:0 0 8px}
.cp-to .pw-check{margin:0}

/* Leave overlapping a team meeting - the notice (Giselle, 9 Oct 2026). */
.lm{display:flex;flex-direction:column;gap:12px;font-size:.9rem;line-height:1.55}
.lm .lm-note{display:flex;gap:10px;align-items:flex-start;margin:0}
.lm .lm-note p{margin:0}
.lm-bang{flex:none;width:22px;height:22px;border-radius:50%;background:#f2b33d;color:#fff;font-weight:800;font-size:.85rem;
  display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.lm-label{margin:0;color:var(--muted);font-size:.85rem}
.lm .wed-days li{flex-wrap:wrap}
.lm .wed-pill{background:var(--velvet-soft);color:var(--velvet);border-color:var(--velvet-line)}
.lm .wed-pill.lm-mtg{background:var(--bg);color:var(--muted);border-color:var(--line);font-weight:500}
.lm-guide{border:1px solid var(--velvet-line);border-radius:14px;overflow:hidden;background:var(--card)}
.lm-toggle{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;cursor:pointer;font-weight:700;color:var(--velvet);background:var(--velvet-soft)}
.lm-toggle:focus-visible{outline:2px solid var(--velvet);outline-offset:-2px}
.lm-chev{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);
  margin:-4px 4px 0 0;transition:transform .15s}
.lm-toggle[aria-expanded="false"] .lm-chev{transform:rotate(-45deg);margin:0 6px 0 0}
@media (prefers-reduced-motion: reduce){.lm-chev{transition:none}}
.lm-guide-body{padding:14px;display:flex;flex-direction:column;gap:12px}
.lm-guide-body[hidden]{display:none}
.lm-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.lm-steps li{display:flex;gap:11px;align-items:flex-start}
.lm-num{flex:none;width:24px;height:24px;border-radius:50%;background:var(--lavender-soft);color:var(--velvet);font-weight:700;
  font-size:.78rem;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.lm-steps h5{margin:0 0 3px;font-size:.92rem;font-weight:700;color:var(--velvet)}
.lm-steps p{margin:0;color:var(--text)}
.lm-mc{background:var(--lavender-soft);border-radius:12px;padding:11px 13px;color:var(--text)}
.lm-thanks{margin:0;color:var(--muted)}
.lm-grade{margin:0;padding:6px 0 6px 12px;border-left:3px solid var(--velvet);color:var(--text);font-weight:400}
.lm-grade b{font-weight:700}
.lm-ack{display:flex;gap:10px;align-items:flex-start}
.lm-ack input{width:20px;height:20px;flex:none;margin:2px 0 0;accent-color:var(--velvet)}
.lm-ack label{margin:0;font-weight:500;color:var(--text);cursor:pointer;font-size:.9rem;text-transform:none;letter-spacing:0}
.lm-ack a{color:var(--velvet);text-decoration:underline;font-weight:600}
.lm-need{margin:-6px 0 0 30px;font-size:.8rem;color:var(--rose)}
.lm-need[hidden]{display:none}
#wm-go:disabled{background:var(--lavender-soft);color:var(--muted);border-color:var(--lavender-soft);opacity:1}
.lm-intro{margin:0;color:var(--text)}
.lm-steps li > div > p + p{margin-top:6px}
.lm-remark{display:block;background:var(--velvet-soft);border-radius:10px;padding:8px 11px;font-size:.86rem}
.lm-rec{display:flex;width:fit-content;align-items:center;gap:6px;margin-top:8px;padding:6px 12px;border-radius:999px;background:var(--card);
  color:var(--velvet);font-weight:600;text-decoration:none;border:1px solid var(--lavender-soft)}
.lm-rec svg{width:15px;height:15px}
@media (hover: hover){.lm-rec:hover{background:var(--velvet);color:#fff;border-color:var(--velvet)}}

/* ---- Leave & MC: two tabs (9 Oct 2026) ---------------------------------
   Leave Guidelines and T&C (guidelines beside the public-holiday rules) and
   My Leave (balances, team calendar, requests). Stacks below 760px. */
.lv-tabs{margin-bottom:16px}
.lvg-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start}
.lvg-grid > *{min-width:0}
.card.lvg-main,.card.lvg-ph{padding:0;overflow:hidden;margin:0}
.lvg-side{display:flex;flex-direction:column;gap:16px}
.lvg-head{padding:18px 20px;border-bottom:1px solid var(--line)}
.lvg-head h2{margin:0}
.lvg-head .hint{margin:4px 0 0}
.lvg-rule{border-bottom:1px solid var(--line)}
.lvg-rule:last-child{border-bottom:0}
.lvg-rule > summary,.lvg-hols > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:15px 20px}
.lvg-rule > summary::-webkit-details-marker,.lvg-hols > summary::-webkit-details-marker,
.lvg-mtg > summary::-webkit-details-marker,.lvb-more > summary::-webkit-details-marker,.lvr-row > summary::-webkit-details-marker{display:none}
.lvg-rule > summary::after,.lvg-hols > summary::after,.lvg-mtg > summary::after,.lvb-more > summary::after,.lvr-row > summary::after{
  content:"";flex:none;margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);margin-top:-4px}
.lvg-rule[open] > summary::after,.lvg-hols[open] > summary::after,.lvg-mtg[open] > summary::after,
.lvb-more[open] > summary::after,.lvr-row[open] > summary::after{transform:rotate(-135deg);margin-top:4px}
.lvg-rule > summary:focus-visible,.lvg-hols > summary:focus-visible,.lvg-mtg > summary:focus-visible,
.lvb-more > summary:focus-visible,.lvr-row > summary:focus-visible{outline:2px solid var(--velvet);outline-offset:-2px;border-radius:8px}
.lvg-ico{display:flex;flex:none;color:var(--velvet);background:var(--velvet-soft);border-radius:10px;padding:8px}
.lvg-ico .lu{width:18px;height:18px}
.lvg-label{font-weight:600;color:var(--text)}
.lvg-cap{display:block;font-size:.78rem;font-weight:400;color:var(--muted);margin-top:1px}
.lvg-body{padding:0 20px 18px;font-size:.92rem;line-height:1.6;display:flex;flex-direction:column;gap:10px}
.lvg-body p{margin:0}
.lvg-sub{color:var(--muted);font-size:.86rem}
.lvg-callout{background:var(--velvet-soft);color:var(--velvet-mid);border:1px solid var(--velvet-line);border-radius:12px;padding:14px 16px;display:flex;gap:11px;align-items:flex-start}
.lvg-callout > .lu,.lvg-att-intro > .lu{width:20px;height:20px;flex:none;margin-top:2px}
.lvg-callout p{margin:0}
.lvg-att{display:block;margin-top:6px}
.lvg-att-intro{display:flex;gap:11px;align-items:flex-start}
.lvg-mtg{margin-top:12px;border-top:1px solid var(--velvet-line)}
.lvg-mtg > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 0 0;font-size:.88rem;font-weight:600;color:var(--velvet-mid)}
.lvg-mtg > summary::after{border-color:var(--velvet-mid)}
.lvg-mtg-body{margin-top:12px;background:var(--card);color:var(--text);border-radius:10px;padding:16px}
.lvg-mtg-body > p:first-child{padding-bottom:12px;border-bottom:1px solid var(--line)}
.lvg-also{margin:0;color:var(--muted);font-size:.86rem}
.lvg-link{color:var(--velvet);text-decoration:underline;text-underline-offset:2px;font-weight:600;padding:0;font-size:inherit}
.lvg-link:focus-visible{outline:2px solid var(--velvet);outline-offset:2px;border-radius:4px}
.lvg-tbl{font-size:.85rem}
.lvg-tbl td{vertical-align:top}
.lvg-ph .tnc-bar{padding:0 20px}
.lvg-terms{margin:0;padding:16px 20px 16px 38px;font-size:.9rem;line-height:1.55;display:flex;flex-direction:column;gap:7px}
.lvg-ph .hb-add,.lvg-ph > .tnc-form{margin:0 20px 14px}
.lvg-hols{border-top:1px solid var(--line)}
.lvg-hols .tnc-phhead{margin:0}
.lvg-hd{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)}
.lvg-where{display:block;font-size:.76rem;color:var(--muted)}
.lvg-state{display:inline-block;font-size:.74rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--hillside-soft);color:var(--hillside-deep);white-space:nowrap}
.lvg-state.shut{background:var(--rose-soft);color:var(--rose)}

.lvm{display:flex;flex-direction:column;gap:16px}
.lvm[hidden]{display:none}
.lvm > .card{margin:0}
.lvm-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lvm-top h2{margin:0}
.lvm-top .hint{margin:2px 0 0}
.lvb-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:12px}
.lvb{border:1px solid var(--line);border-top:4px solid var(--bub);border-radius:14px;padding:14px 16px;background:var(--card)}
.lvb-name{font-weight:600;font-size:.9rem}
.lvb-val{font-family:var(--font-head);font-weight:600;font-size:1.9rem;color:var(--bub);line-height:1.1;margin:6px 0;font-variant-numeric:tabular-nums}
.lvb-val small{font-family:var(--font-body);font-size:.78rem;font-weight:500;color:var(--muted)}
.lvb-sub{font-size:.78rem;color:var(--muted);line-height:1.45}
.lvm .cal td.calc:focus-visible{outline:2px solid var(--velvet);outline-offset:-2px}
.lvm .cal td.calc.sel{background:var(--velvet-soft);box-shadow:inset 0 0 0 2px var(--velvet)}
.lvm .cal .cal-who .wn.pend,.wn-key.pend{font-style:italic;text-decoration:underline dashed;text-underline-offset:2px}
.wn-key{font-size:.72rem;font-weight:600;color:#8d8494}
.lvc-detail{margin-top:12px;border-top:1px solid var(--line);padding-top:12px;font-size:.9rem}
.lvc-detail .hint{margin:6px 0 0}
.lvc-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.lvc-hol{font-size:.8rem;color:#8a4b12}
.lvc-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.lvc-list li{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lvc-name{font-weight:600}
.lvc-part{color:var(--muted);font-size:.85rem}
.lvc-list .badge{margin-left:auto}
.card.lvr{padding:0;overflow:hidden}
.lvr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 20px;border-bottom:1px solid var(--line)}
.lvr-head h2{margin:0}
.lvr-head .hint{margin:2px 0 0}
.lvr-filter{display:flex;align-items:center;gap:8px}
.lvr-filter label{margin:0}
.lvr-filter select{width:auto;padding:8px 10px}
.lvr-row{border-bottom:1px solid var(--line)}
.lvr-row:last-child{border-bottom:0}
.lvr-row[hidden]{display:none}
.lvr-row > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 20px}
.lvr-main{min-width:0;flex:1}
.lvr-when{display:block;font-weight:600}
.lvr-meta{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
.lvr-detail{padding:0 20px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;font-size:.88rem}
.lvr-detail p{margin:2px 0 0}
.lvr-k{display:block;font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.lvr-act{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;grid-column:1 / -1}
.lvr > .empty{margin:0;padding:20px}
@media (hover: hover){
  .lvg-rule > summary:hover,.lvg-hols > summary:hover,.lvr-row > summary:hover{background:var(--velvet-soft)}
}
@media (max-width:760px){
  .lvg-grid{grid-template-columns:1fr}
  .lvg-head,.lvr-head{padding:14px 16px}
  .lvg-rule > summary,.lvg-hols > summary,.lvr-row > summary{padding:13px 16px}
  .lvg-body{padding:0 16px 16px}
  .lvr-detail{padding:0 16px 14px}
  .lvg-terms{padding:14px 16px 14px 32px}
  .lvg-ph .tnc-bar{padding:0 16px}
}

/* ---- My balances, compact (9 Oct 2026) --------------------------------
   Cards in the order leave is taken (TOIL, PH, Annual leave), each opening
   its details underneath; "What if I have unused leave?" in a dialog. */
.lvb-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap}
.lvb-head h2{margin:0}
.lvb-help{margin:0;font-size:.86rem;color:var(--muted)}
.lvb-nudge{margin:10px 0 0;padding:9px 12px;border-radius:10px;background:#fff4e0;color:#6e4512;font-size:.86rem}
button.lvb{display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%;cursor:pointer;font:inherit;color:var(--text)}
button.lvb > span{display:block}
button.lvb[aria-expanded="true"]{border-color:var(--bub);box-shadow:0 0 0 2px var(--bub-soft),inset 0 0 0 1px var(--bub)}
button.lvb:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.lvb-more-link{margin-top:auto;padding-top:8px;font-size:.8rem;font-weight:600;color:var(--velvet)}
.lvd{margin-top:14px;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:16px 18px}
.lvd[hidden]{display:none}
.lvd-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lvd-head h3{margin:0;font-size:1.02rem;color:var(--velvet)}
.lvd-head h3:focus{outline:none}
.lvd-x{flex:none;width:34px;height:34px;border-radius:10px;font-size:1.35rem;line-height:1;color:var(--muted)}
.lvd-x:focus-visible{outline:2px solid var(--velvet);outline-offset:1px}
.lvd-def{margin:6px 0 4px;color:var(--text);font-size:.9rem}
.lvd-sum{margin:0 0 10px;color:var(--muted);font-size:.84rem}
.lvd-sum b{color:var(--text)}
.lvd-tbl{font-size:.84rem}
.lvd-tbl td{vertical-align:top}
.lvd-d{white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}
.lvd-n{white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}
.lvd-n.plus{color:var(--hillside-deep)}
.lvd-n.minus{color:var(--text)}
.lvd-tbl small{display:block;color:var(--muted)}
.lvd-split{display:block;font-size:.76rem;color:var(--muted)}
.lvd-req{font-size:.78rem}
.lvd-st{display:inline-block;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap;background:var(--bg);color:var(--muted)}
.lvd-st.pend{background:var(--skin-soft);color:var(--oak)}
.lvd-st.ok{background:var(--hillside-soft);color:var(--hillside-deep)}
.lvd-st.free{background:var(--velvet-soft);color:var(--velvet)}
.lvd-st.gone{background:var(--rose-soft);color:var(--rose)}
.lvd-empty{margin:4px 0 0;padding:12px;border-radius:10px;background:var(--bg);color:var(--muted);font-size:.86rem}
.lvd-note{margin:8px 0 0}
.lvd .ye-line{margin:10px 0 0;font-size:.86rem}
/* margin:auto puts it back in the middle: the stylesheet zeroes every margin (*{margin:0}). */
dialog.lvu{margin:auto;width:min(640px,calc(100% - 24px));max-height:min(88vh,860px);padding:0;border:1px solid var(--line);border-radius:18px;
  background:var(--card);color:var(--text);box-shadow:var(--shadow-lg);overflow:hidden}
dialog.lvu[open]{display:flex;flex-direction:column}
dialog.lvu::backdrop{background:rgba(43,19,48,.42)}
.lvu-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 12px;border-bottom:1px solid var(--line);flex:none}
.lvu-head h2{margin:0;font-size:1.15rem;color:var(--velvet)}
.lvu-body{padding:16px 18px 20px;overflow-y:auto;font-size:.9rem;line-height:1.55;-webkit-overflow-scrolling:touch}
.lvu-order{background:var(--velvet-soft);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.lvu-order p{margin:4px 0 0}
.lvu-tbl{font-size:.84rem}
.lvu-tbl td{vertical-align:top}
.lvu-tbl td span{display:block;font-size:.76rem;color:var(--muted)}
.lvu-tbl tr.mine td:first-child{box-shadow:inset 3px 0 0 var(--velvet)}
.lvu-p{margin:10px 0 0}
.lvu-h{margin:18px 0 0;font-size:1rem}
.lvu-now{margin-top:10px}
.lvu-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.lvu-opt{background:var(--bg);border-radius:12px;padding:12px 14px}
.lvu-opt span{font-size:.8rem;color:var(--muted)}
.lvu-opt b{display:block;font-family:var(--font-head);font-size:1.25rem;color:var(--velvet);margin:2px 0}
.lvu-opt .hint{margin:0}
@media (max-width:560px){
  .lvu-opts{grid-template-columns:1fr}
  .lvd{padding:14px}
  .lvd-tbl th:nth-child(4),.lvd-tbl td:nth-child(4){white-space:normal}
}

/* ---- Team training days (9 Oct 2026) ----------------------------------- */
.lvg-train{margin-top:2px}
.lvt:focus{outline:none}
.lvt-list{list-style:none;margin:0;padding:6px 20px 12px;display:flex;flex-direction:column}
.lvt-row{display:grid;grid-template-columns:118px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.lvt-row:last-child{border-bottom:0}
.lvt-d{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.lvt-t small{display:block;color:var(--muted);font-size:.76rem}
.lvt-del{width:30px;height:30px;border-radius:8px}
.lvt-none{margin:0;padding:14px 20px}
.lvt-add{border-top:1px solid var(--line)}
.lvt-add > summary{list-style:none;cursor:pointer;padding:13px 20px;font-weight:600;font-size:.88rem;color:var(--velvet)}
.lvt-add > summary::-webkit-details-marker{display:none}
.lvt-add > summary:focus-visible{outline:2px solid var(--velvet);outline-offset:-2px;border-radius:8px}
.lvt-form{padding:0 20px 16px}
.lvt-form label{margin:8px 0 4px}
.lvt-who{border:0;padding:0;margin:10px 0 0}
.lvt-who legend{font-weight:500;font-size:.88rem;color:var(--muted);padding:0}
.lvt-who .hint.tiny{margin:2px 0 6px}
.lvt-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.lvt-chip{display:inline-flex;align-items:center;gap:6px;margin:0;padding:5px 10px;border:1px solid var(--line-strong);border-radius:999px;
  font-size:.8rem;font-weight:500;color:var(--text);cursor:pointer;text-transform:none;letter-spacing:0}
.lvt-chip input{width:auto;margin:0;accent-color:var(--velvet)}
.lvt-chip:has(input:checked){background:var(--velvet-soft);border-color:var(--velvet-line);color:var(--velvet)}
.lvt-form > .btn{margin-top:6px}
.cal .cal-tr{display:inline-block;font-size:.5rem;font-weight:700;line-height:1.25;color:#fff;background:var(--velvet);border-radius:4px;padding:0 4px;margin-left:2px}
.lvc-tr{font-size:.8rem;color:var(--velvet);font-weight:600}
@media (max-width:760px){
  .lvt-list{padding:4px 16px 10px}
  .lvt-row{grid-template-columns:96px minmax(0,1fr) auto}
  .lvt-add > summary,.lvt-none{padding-left:16px;padding-right:16px}
  .lvt-form{padding:0 16px 14px}
}

/* ---- The hotel-style range picker (app.js RANGE_PICK), Bedrock's look
   (lunox/prototype/styles.css .date-pop / .mc-*): a flat month, one filled
   purple circle on each end, the days between tinted. */
.rp{display:inline-block;position:relative}
.rp-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border:1px solid var(--line-strong);border-radius:12px;
  background:#fff;color:var(--text);font-size:.92rem;white-space:nowrap;min-width:200px}
.rp-btn .lu{width:17px;height:17px;color:var(--velvet);flex:none}
.rp-btn:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.rp-pop{position:fixed;z-index:400;width:260px;padding:10px 12px 8px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 16px 40px rgba(42,31,46,.22)}
.rp-pop[hidden]{display:none !important}
.rp-head{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:4px}
.rp-title{font-size:.86rem;font-weight:700;color:var(--text)}
.rp-nav{font-size:1.1rem;line-height:1;padding:2px 10px;border-radius:999px;color:var(--muted)}
.rp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.rp-wd{font-size:.66rem;color:var(--muted);text-align:center;font-weight:600;padding-bottom:2px}
.rp-day{height:30px;border-radius:999px;font-size:.8rem;font-weight:500;color:var(--text);padding:0}
.rp-day.pad{visibility:hidden}
.rp-day.inrange{background:var(--velvet-soft);border-radius:6px}
.rp-day.today{color:var(--velvet);font-weight:800}
.rp-day.sel{background:var(--velvet);color:#fff;font-weight:700}
.rp-day[disabled]{color:var(--line-strong);cursor:default}
.rp-day:focus-visible,.rp-nav:focus-visible,.rp-link:focus-visible{outline:2px solid var(--velvet);outline-offset:1px}
.rp-foot{display:flex;align-items:center;gap:6px;margin-top:4px}
.rp-link{font-size:.76rem;font-weight:700;color:var(--muted);padding:3px 8px}
.rp-link.rp-today{color:var(--velvet)}
.rp-hint{flex:1;text-align:center;font-size:.7rem;color:var(--muted)}
@media (hover: hover){
  .rp-day:not([disabled]):not(.sel):hover,.rp-nav:hover{background:var(--velvet-soft);color:var(--velvet)}
  .rp-link:hover{color:var(--velvet)}
}
.lvt-form .rp,.lvt-form .rp-btn{width:100%}
.lvt-form .grid2{grid-template-columns:1fr;gap:0}
/* The date over the title, so a period ("Wed, 18 Nov – Fri, 20 Nov 2026") has the width it needs. */
.lvt-row{grid-template-columns:minmax(0,1fr) auto;row-gap:1px}
.lvt-row .lvt-d{grid-column:1;white-space:normal;font-size:.78rem}
.lvt-row .lvt-t{grid-column:1}
.lvt-row .lvt-del{grid-column:2;grid-row:1 / 3}
@media (max-width:760px){.lvt-row{grid-template-columns:minmax(0,1fr) auto}}
/* Edit beside Remove on each training; the form tinted while it edits one (9 Oct 2026). */
.lvt-row .lvt-acts{grid-column:2;grid-row:1 / 3;display:flex;gap:4px;align-items:center}
.lvt-edit{width:30px;height:30px;border-radius:8px}
.lvt-edit svg{width:15px;height:15px}
.lvt-add.editing{background:var(--velvet-soft)}
.lvt-btns{gap:8px;margin-top:6px}
.lvt-btns .btn{flex:1}

/* ---- Leave & MC, final layout (9 Oct 2026) -----------------------------
   One column of guidelines; one team-training panel under the tabs. */
.lvg-stack{display:flex;flex-direction:column;gap:16px}
.lvg-stack > .lvg-side{display:block}
.card.lvg-main .lvg-rule:first-child > summary{border-top-left-radius:16px;border-top-right-radius:16px}
#btn-apply[hidden],.lv-train[hidden]{display:none !important}
.lv-train{margin-top:8px}
.lvt-shared{margin:0 0 16px}
.lvt-shared:empty{display:none}
/* None coming (or loading, or failed): one slim neutral row - never a big empty box. */
.lvt-slim{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--muted);font-size:.9rem}
.lvt-slim .lu{width:18px;height:18px;flex:none;color:var(--muted)}
.lvt-slim > span{flex:1;min-width:0}
.lvt-slim.err{border-color:var(--rose-soft);color:var(--rose)}
.lvt-slim.err .lu{color:var(--rose)}
/* Upcoming training: pale yellow, the dates and title the biggest things in it. */
/* Compact (9 Oct 2026: "a bit too big ... not so crowded"). */
.lvt-up{background:#fff4e0;border:1px solid #f1d9a8;border-radius:14px;padding:12px 16px 13px;color:#5a3a10}
.lvt-up-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lvt-up-ico{display:flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:8px;background:#fde8bf;color:#7a4a17;flex:none}
.lvt-up-ico .lu{width:14px;height:14px}
.lvt-up-top h2{margin:0;font-family:var(--font-body);font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7a4a17}
.lvt-now{font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;background:#7a4a17;color:#fff}
.lvt-sp{flex:1}
.lvt-up-main{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;margin-top:8px}
.lvt-up-when{margin:0;font-family:var(--font-head);font-size:1.12rem;font-weight:600;line-height:1.25;color:var(--text)}
.lvt-up-title{margin:0;font-size:.95rem;font-weight:700;color:var(--text)}
.lvt-up-who{color:#6b4a1c}
.lvt-up-rule{margin:4px 0 0;font-size:.84rem;color:#5a3a10;display:flex;flex-wrap:wrap;gap:2px 14px}
.lvt-up-acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:9px}
.lvt-manage{font-size:.86rem}
/* Training dates on the team calendar: the whole cell pale yellow, a short
   label; the leave names and slots stay readable on top. */
.cal td.calc.trn{background:#fff6dc}
.cal .cal-trn{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  font-size:.55rem;font-weight:700;line-height:1.3;color:#7a4a17;letter-spacing:.01em;overflow-wrap:anywhere}
.lvm .cal td.calc.trn.sel{background:#fdeec4;box-shadow:inset 0 0 0 2px var(--velvet)}
.trn-key{display:inline-block;width:11px;height:11px;border-radius:3px;background:#fff6dc;border:1px solid #f1d9a8;vertical-align:-1px}
.lvc-trn{margin-top:8px;padding:9px 12px;border-radius:10px;background:#fff4e0;color:#5a3a10;display:flex;flex-direction:column;gap:2px;font-size:.86rem}
.lvc-trn b{color:var(--text)}
.lvc-trn-rule{font-weight:600}
.lvc-clash{font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--rose-soft);color:var(--rose)}
/* The training pop-ups. */
dialog.lvt-dlg .lvt-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column}
.lvt-li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.lvt-li:last-child{border-bottom:0}
.lvt-li.on{background:var(--velvet-soft);border-radius:10px;padding-left:8px;padding-right:8px}
.lvt-li > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:.9rem}
.lvt-li-when{font-size:.8rem;color:var(--muted)}
.lvt-li small{color:var(--muted);font-size:.78rem}
dialog.lvt-dlg .lvt-form{padding:14px 0 0;border-top:1px solid var(--line)}
dialog.lvt-dlg .lvt-form h3{margin:0 0 4px;font-size:1rem}
dialog.lvt-dlg .lvt-form.editing h3{color:var(--velvet)}
.lvt-err{margin:8px 0 0;color:var(--rose);font-size:.86rem}
.lvt-err[hidden]{display:none}
.lvt-del.armed{background:var(--rose);color:#fff}
@media (max-width:560px){
  .lvt-up{padding:11px 13px 12px}
  .lvt-up-when{font-size:1.04rem}
  .lvt-li{flex-wrap:wrap}
}
.btn.lv-blocked{opacity:.55}

/* ---- Leave slots: per-pool counts, manager +/-, approval notices (9 Oct 2026) ---- */
.cal-pool{display:inline-flex;gap:4px;margin-left:auto;margin-right:8px}
.cal-pool .btn{padding:4px 10px}
.lvs{margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.lvs-h{margin:0 0 6px;font-size:.86rem}
.lvs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lvs-row{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;font-size:.86rem}
.lvs-name{font-weight:600;min-width:120px}
.lvs-n{flex:1;min-width:0;color:var(--muted)}
.lvs-n b{color:var(--text)}
.lvs-acts{display:inline-flex;gap:6px;align-items:center}
.lvs-set{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:.8rem;font-weight:600;color:var(--muted)}
.lvs-set input{width:64px;padding:6px 8px;font-size:.9rem;text-align:center;border-radius:9px}
.lvs .hint.tiny{margin:8px 0 0}
.item .main .s.lv-cover{margin-top:4px;line-height:1.4;padding:6px 9px;border-radius:8px}
.item .main .s.lv-cover[hidden]{display:none}
.item .main .s.lv-cover.no{background:var(--rose-soft);color:var(--rose)}
.item .main .s.lv-cover.warn{background:#fff4e0;color:#7a4a17}

/* ---- Leave-slot counts and outlets, labelled in Bedrock's branch colours (9 Oct 2026) ----
   ZP #470054, 8T #0e7490, RU #a13d63 - the inks Bedrock uses for its
   branches. An open slot is a solid dot in its outlet's colour; taken stays
   bright red, waiting a red ring, an open slot no outlet accounts for a
   green ring. */
.br{display:inline-block;font-size:.68rem;font-weight:700;line-height:1.35;padding:0 5px;border-radius:4px;white-space:nowrap;color:#fff;margin-right:4px}
.br-zp{background:#470054}
.br-8t{background:#0e7490}
.br-ru{background:#a13d63}
.br.short{outline:2px solid #f5333f;outline-offset:1px}
.lvs-br{display:block;margin-top:3px;color:var(--muted)}
.ptag{display:inline-block;font-size:.5rem;font-weight:700;line-height:1.4;padding:0 3px;border-radius:3px;color:#fff;margin-right:2px;letter-spacing:.02em;vertical-align:1px}
.ptag-kl{background:linear-gradient(90deg,#470054 0 50%,#0e7490 50% 100%)}
.ptag-ru{background:#a13d63}
.ptag-jb{background:#0f766e}
.ptag-cs{background:#0b5fa5}
.cal-foot .ptag,.lvs .ptag{font-size:.66rem;padding:0 5px}
.slot-row.all + .slot-row.all{margin-top:2px}

/* ---- Tasks (9 Oct 2026): My team / My tasks, tracked assignments ---------- */
.tk-tabs{display:flex;gap:6px;margin:0 0 14px;border-bottom:1px solid var(--line)}
.tk-tabs [role=tab]{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:0;background:none;border-bottom:2px solid transparent;
  color:var(--muted);font:inherit;font-weight:600;cursor:pointer;border-radius:10px 10px 0 0}
.tk-tabs [role=tab][aria-selected=true]{color:var(--velvet);border-bottom-color:var(--velvet);background:var(--velvet-soft)}
.tk-tabs .lu{width:16px;height:16px}
.tk-top{display:flex;justify-content:flex-start;margin:0 0 12px}
.tk-top .btn .lu{width:16px;height:16px;vertical-align:-3px}
.tk-h{margin:0 0 10px}
.tk-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px}
.tk-f{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:999px;padding:5px 11px;font:inherit;font-size:.84rem;cursor:pointer}
.tk-f b{font-variant-numeric:tabular-nums;margin-left:2px;color:var(--muted)}
.tk-f.on{background:var(--velvet);border-color:var(--velvet);color:#fff}
.tk-f.on b{color:#fff}
.tk-how{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:.84rem}
.tk-how .lu{width:15px;height:15px}
.tk-list{display:flex;flex-direction:column}
.tkr{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,1.4fr);gap:10px;align-items:center;
  padding:10px 4px;border-bottom:1px solid var(--line)}
.tkr:last-child{border-bottom:0}
.tkr-head{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding-top:0}
.tkr-main{display:flex;flex-direction:column;gap:2px;text-align:left;background:none;border:0;padding:4px;margin:-4px;font:inherit;color:inherit;cursor:pointer;border-radius:8px;min-width:0}
.tkr-main:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.tkr-title{font-weight:600}
.tkr-legacy{font-size:.7rem;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0 6px;margin-left:4px;white-space:nowrap}
.tkr-latest{font-size:.82rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tkr-work,.tkr-rev{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.tkr-dates{display:flex;flex-direction:column;gap:2px;font-size:.82rem;font-variant-numeric:tabular-nums}
.tkr-dates .late{color:var(--rose);font-weight:600}
.tkr-dates .muted{color:var(--muted)}
.tkr-lbl{display:none;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tk-rg .tkr-lbl,.tk-subm .tkr-lbl{display:block;margin-bottom:2px}
@media (max-width:760px){
  .tkr-head{display:none}
  .tkr{grid-template-columns:1fr 1fr;gap:6px 10px;padding:12px 2px}
  .tkr-main{grid-column:1 / -1}
  .tkr-lbl{display:block;width:100%}
  .tkr-rev{grid-column:1 / -1}
}
.tk-rem{margin-top:16px}
.tk-rem > summary{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;cursor:pointer;list-style:none}
.tk-rem > summary::-webkit-details-marker{display:none}
.tk-rem > summary h2{margin:0}
.tk-rem > summary::before{content:"▸";color:var(--muted);transition:transform .15s}
.tk-rem[open] > summary::before{transform:rotate(90deg)}
.tk-rem .addbar{margin-top:12px}
.tk-rem-done{margin-top:10px}
.tk-rem-done > summary{cursor:pointer;color:var(--muted);font-size:.86rem}
.tk-pj{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.tk-form label{margin-top:10px}
.tk-form .hint.tiny{margin:2px 0 0}
.tk-more{margin-top:12px}
.tk-more > summary{cursor:pointer;color:var(--velvet);font-weight:600;font-size:.88rem}
.tk-notice{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--velvet-soft);color:var(--text);font-size:.86rem;line-height:1.45}
.tk-warn{margin:8px 0 0;padding:8px 10px;border-radius:8px;background:var(--rose-soft);color:var(--rose);font-size:.86rem}
.tk-err{margin:10px 0 0;color:var(--rose);font-size:.88rem}
.tk-err[hidden]{display:none}
.tk-radio{border:0;padding:0;margin:10px 0 0;display:flex;gap:16px;flex-wrap:wrap}
.tk-radio legend{font-weight:600;font-size:.88rem;margin-bottom:4px;padding:0}
.tk-radio label{margin:0;display:inline-flex;gap:6px;align-items:center;font-weight:500}
.tk-rg{display:grid;gap:10px;padding:12px;border-radius:12px;background:var(--velvet-soft);margin:0 0 12px}
.tk-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 16px;margin:0 0 10px}
.tk-dl div{display:flex;flex-direction:column;gap:2px}
.tk-dl dt{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tk-dl dd{margin:0}
.tk-state{margin:8px 0;padding:8px 12px;border-radius:10px;background:var(--velvet-soft);font-size:.9rem}
.tk-state.warn{background:#fff4e0;color:#7a4a17}
.tk-state.bad{background:var(--rose-soft);color:var(--rose)}
.tk-state.ok{background:#e9f5ec;color:#2f6b3f}
.tk-detail h4{margin:16px 0 6px}
.tk-cps{margin:0;padding-left:18px;font-size:.88rem;display:flex;flex-direction:column;gap:4px}
.tk-subm{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 8px}
.tk-subm.cur{border-color:var(--velvet)}
.tk-subm-h{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:.86rem}
.tk-subm-t{margin:6px 0 0;white-space:pre-wrap}
.tk-files{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0}
.tk-files a{display:inline-flex;align-items:center;gap:4px}
.tk-files .lu{width:15px;height:15px}
.tk-rev-line{margin:8px 0 0;font-size:.86rem;color:var(--muted)}
.tk-rev-note{color:var(--text);white-space:pre-wrap}
.tk-hist{margin:8px 0}
.tk-hist > summary{cursor:pointer;color:var(--velvet);font-weight:600;font-size:.88rem;margin-bottom:6px}
.tk-grade{padding:10px 12px;border-radius:12px;border:1px solid var(--line)}
.tk-grade p{margin:0 0 4px}
.tk-ded b{color:var(--rose)}
.tk-ded.rev b,.tk-ded.wait b{color:var(--text)}
.tk-inc{margin:6px 0;padding-left:18px;font-size:.86rem}
.tk-manage-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tk-manage-acts .lu{width:15px;height:15px;vertical-align:-3px}
.tk-how-body ul{padding-left:18px;display:flex;flex-direction:column;gap:6px}
.tick-assigned{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;flex:none;color:var(--velvet)}
.tick-assigned .lu{width:18px;height:18px}
/* Short-notice shift cover (9 Oct 2026). */
.sn-cover{border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px;margin:12px 0 0}
.sn-cover legend{font-weight:700;font-size:.88rem;padding:0 4px}
.sn-check{display:flex;gap:8px;align-items:flex-start;font-weight:500;margin:6px 0 0}
.sn-check input{margin:3px 0 0;width:auto;flex:none;min-height:0}
.sn-check{justify-content:flex-start;text-align:left}
#sn-sub[hidden]{display:none}
#sn-sub label[for]{margin-top:10px}

/* ---- Work Schedule (9 Oct 2026, matched to Giselle's approved preview) ----
   Soft panels, dark readable text, colour mainly on the small branch labels.
   Everything is scoped to .ws (the page), .ws-modal (its dialogs) and
   .ws-btn (incl. the header's Manage rosters) - no global modal or button
   styling changes. The portal has no dark mode, so these are the only values.
   Every text pair is at least 4.5:1 (#2F2636 / #5E5268 on white and on the
   soft fills; each branch label on its own background). No reduced opacity. */
.ws,.modal.ws-modal,.ws-btn{--ws-page:#FAF8FB;--ws-panel:#FFFFFF;--ws-text:#2F2636;--ws-sub:#5E5268;--ws-plum:#5B286F;--ws-line:#EDE8F0;
  --ws-soft:#F2ECF7;--ws-soft-line:#E5D9ED;--ws-day-sel:#FAF6FD;--ws-day-sel-line:#D8C5E4;--ws-hover:#FBF8FD;
  --ws-temp-bg:#FCF4E4;--ws-temp:#674A24}
.ws{color:var(--ws-text);font-size:14px;line-height:1.45}
.ws [hidden],.ws-modal [hidden],.ws-btn[hidden]{display:none !important}
.ws-small{font-size:12px;color:var(--ws-sub);margin:0}
.ws-strong{color:var(--ws-text);font-weight:600}
.ws-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ws-loading,.ws-empty-msg{color:var(--ws-sub);font-size:13px;padding:18px;margin:0}
/* Buttons: white with a hairline, plum text; the primary one soft lavender. */
.ws-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--ws-panel);color:var(--ws-plum);
  border:1px solid var(--ws-line);border-radius:11px;padding:9px 13px;font:500 13px/1.2 var(--font-body);min-height:0;cursor:pointer}
.ws-btn .lu{width:16px;height:16px}
.ws-btn.ws-primary{background:var(--ws-soft);border-color:#E6DBEF;color:var(--ws-plum);font-weight:600}
.ws-btn.ws-small{font-size:12px;padding:7px 10px;color:var(--ws-plum)}
.ws-btn.ws-sq{width:34px;height:34px;padding:0;font-size:18px;line-height:1}
.ws-btn.ws-danger{color:#8e2f4a;border-color:#ECD3DB}
.ws-btn.ws-back-btn{color:var(--ws-text)}
.ws-btn:disabled{color:var(--ws-sub);background:var(--ws-page);cursor:not-allowed}
.ws-link{background:none;border:0;padding:0;color:var(--ws-plum);font:500 13px/1.3 var(--font-body);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ws-link.ws-small{font-size:12px}
.ws-btn:focus-visible,.ws-link:focus-visible,.ws-tab:focus-visible,.ws-dep:focus-visible,.ws-cell:focus-visible,.ws-pcell:focus-visible,
.ws-mday:focus-visible,.ws-mscroll:focus-visible{outline:2px solid #5B286F;outline-offset:2px}
@media (hover: hover){
  .ws-btn:not(:disabled):hover{background:var(--ws-hover);border-color:var(--ws-day-sel-line)}
  .ws-btn.ws-primary:not(:disabled):hover{background:#ECE2F4}
  .ws-dep:hover{background:#F4EFF7}
  .ws-cell:hover,.ws-mday:hover{background:var(--ws-hover)}
  .ws-pcell:hover{box-shadow:inset 0 0 0 1px var(--ws-day-sel-line)}
  .ws-tab:hover{color:var(--ws-plum)}
}
/* Tabs: two words with an underline - Team Schedule | My Schedule. */
.ws-tabs{display:flex;gap:24px;margin:0 0 22px;border-bottom:1px solid var(--ws-line)}
.ws-tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:11px 0;font:500 14px/1.2 var(--font-body);color:var(--ws-sub);cursor:pointer}
.ws-tab[aria-selected="true"]{color:var(--ws-plum);border-bottom-color:var(--ws-plum)}
/* Previous / Month / Next / Today. */
.ws-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px}
.ws-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ws-period{font-size:14px;font-weight:700;color:var(--ws-text);min-width:8.5em;text-align:center}
.ws-search{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ws-line);border-radius:11px;background:var(--ws-panel);padding:0 10px;color:var(--ws-sub)}
.ws-search .lu{width:15px;height:15px}
.ws-search input{border:0;background:none;padding:8px 0;font-size:13px;min-width:10em;outline:none;min-height:0}
/* The temporary-cover notice. */
.ws-cover{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;background:var(--ws-temp-bg);color:var(--ws-temp);
  border-radius:9px;padding:13px 16px;margin:0 0 14px}
.ws-cover strong{display:block;font-size:13px;font-weight:600}
.ws-cover p{margin:2px 0 0;font-size:13px}
.ws-cover .ws-link{color:var(--ws-temp)}
.ws-cover-more{margin:-6px 0 14px}
/* The month panel: intro, department buttons, the grid, the legend. */
.ws-month{background:var(--ws-panel);border:1px solid var(--ws-line);border-radius:16px;overflow:hidden}
.ws-intro{padding:17px 18px;border-bottom:1px solid var(--ws-line)}
.ws-intro strong{display:block;font-size:14px;font-weight:500;color:var(--ws-text)}
.ws-intro .ws-small{margin-top:3px}
.ws-deps{display:flex;flex-wrap:wrap;gap:8px;padding:13px 18px;border-bottom:1px solid var(--ws-line)}
.ws-dep{background:var(--ws-page);border:1px solid transparent;border-radius:10px;padding:8px 13px;font:500 12px/1.2 var(--font-body);color:var(--ws-text);cursor:pointer}
.ws-dep[aria-pressed="true"]{background:var(--ws-soft);border-color:var(--ws-soft-line);color:var(--ws-plum);font-weight:600}
.ws-dep-none{font-style:normal}
.ws-mscroll{overflow-x:auto}
.ws-mgrid{display:grid;grid-template-columns:repeat(7,minmax(108px,1fr));min-width:790px}
.ws-wdh{background:var(--ws-page);color:var(--ws-sub);font-size:12px;text-align:center;padding:12px 8px;border-bottom:1px solid var(--ws-line)}
.ws-pad{background:var(--ws-page);border-right:1px solid var(--ws-line);border-bottom:1px solid var(--ws-line);min-height:120px}
.ws-cell{display:flex;flex-direction:column;align-items:stretch;text-align:left;background:var(--ws-panel);color:var(--ws-text);
  border:0;border-right:1px solid var(--ws-line);border-bottom:1px solid var(--ws-line);border-radius:0;padding:12px 10px;min-height:222px;
  font:400 11px/1.5 var(--font-body);cursor:pointer}
.ws-mgrid>:nth-child(7n){border-right:0}
.ws-cell[aria-pressed="true"]{background:var(--ws-day-sel);box-shadow:inset 0 0 0 1px var(--ws-day-sel-line)}
.ws-date{display:flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:13px;font-weight:600;color:var(--ws-text);margin-bottom:10px}
.ws-today{font-size:10px;font-weight:600;color:var(--ws-plum);background:var(--ws-soft);border-radius:5px;padding:1px 6px}
.ws-ph{font-size:10px;font-weight:600;color:var(--ws-temp);background:var(--ws-temp-bg);border-radius:5px;padding:1px 5px}
.ws-trn{display:block;font-size:10px;font-weight:600;color:#33516D;background:#EDF3F8;border-radius:5px;padding:2px 6px;margin:-4px 0 9px}
.ws-br{display:block;margin-bottom:9px}
.ws-b{display:inline-block;font-size:10px;font-weight:600;line-height:1.5;border-radius:5px;padding:2px 6px;background:#F5F3F6;color:var(--ws-text,#2F2636)}
.ws-b.b-zp{background:#F1EAF6;color:#5B326D}
.ws-b.b-8t{background:#EDF3F8;color:#33516D}
.ws-b.b-ru{background:#EEF4EF;color:#365840}
.ws-b.b-ap{background:#E6F3F1;color:#245E57}
.ws-b.b-cs{background:#F8EFE5;color:#6E3A0B}
.ws-unconf{display:inline-block;margin-left:5px;font-size:10px;font-weight:600;color:var(--ws-temp);background:var(--ws-temp-bg);border-radius:5px;padding:2px 5px;vertical-align:1px}
.ws-names{display:flex;flex-wrap:wrap;align-items:baseline;margin-top:3px;font-size:11px;font-weight:500;line-height:1.5;color:var(--ws-text)}
.ws-role{flex:none;font-size:10px;font-weight:400;color:var(--ws-sub);min-width:27px}
.ws-n{color:var(--ws-text)}
.ws-n small{font-size:10px;color:var(--ws-sub)}
.ws-u{text-decoration:underline dotted #8A7A93;text-underline-offset:3px}
.ws-dot{color:var(--ws-sub);white-space:pre}
.ws-empty{color:var(--ws-sub);font-weight:400}
.ws-away{display:block;margin-top:8px;font-size:10px;color:var(--ws-sub);line-height:1.4}
.ws-more{display:block;margin-top:auto;padding-top:8px;font-size:10px;color:var(--ws-plum)}
.ws-mfoot{padding:15px 18px;border-top:1px solid var(--ws-line);line-height:1.6}
/* The day popup and the editors - shared modal, scoped by .ws-modal. */
.modal.ws-modal{max-width:690px;color:var(--ws-text)}
.modal.ws-modal.wide{max-width:740px}
.ws-modal .modal-head{padding:22px 24px 6px}
.ws-modal .modal-head h3{font-size:22px;font-weight:600;color:var(--ws-text)}
.ws-modal .modal-body{padding:4px 24px 14px;font-size:13px;color:var(--ws-text)}
.ws-modal .modal-foot{padding:14px 24px calc(18px + env(safe-area-inset-bottom));justify-content:flex-end;gap:10px;flex-wrap:wrap}
.ws-modal .modal-foot .ws-btn{flex:0 0 auto}
.ws-modal .modal-foot .ws-back-btn{margin-right:auto}
.ws-dsum{font-size:12px;color:var(--ws-sub);margin:0 0 12px}
.ws-note{background:var(--ws-temp-bg);color:var(--ws-temp);border-radius:8px;padding:9px 12px;font-size:12px;margin:0 0 12px}
.ws-dsec{border-top:1px solid var(--ws-line);padding-top:12px;margin-top:4px}
.ws-dsec h4{display:flex;align-items:center;gap:7px;margin:0 0 2px;font:700 14px/1.3 var(--font-body);color:var(--ws-plum)}
.ws-cnt{font-size:12px;font-weight:600;color:var(--ws-sub)}
.ws-rows{list-style:none;margin:0 0 10px;padding:0}
.ws-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:11px 0;border-bottom:1px solid var(--ws-line)}
.ws-row:last-child{border-bottom:0}
.ws-rmain{display:flex;flex-direction:column;min-width:0}
.ws-rname{font-size:13px;font-weight:600;color:var(--ws-text)}
.ws-rsub{font-size:12px;color:var(--ws-sub)}
.ws-ract{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ws-rempty{font-size:12px;color:var(--ws-sub);margin:0 0 12px}
.ws-pill{display:inline-block;font-size:11px;font-weight:500;border-radius:6px;padding:4px 7px;background:var(--ws-soft);color:var(--ws-plum)}
.ws-pill.off{background:#F5F3F6;color:var(--ws-sub)}
.ws-pill.away,.ws-pill.temp{background:var(--ws-temp-bg);color:var(--ws-temp)}
.ws-pill.unconf{background:var(--ws-temp-bg);color:var(--ws-temp)}
/* One day / roster editors. */
.ws-now{font-size:12px;color:var(--ws-sub);margin:0 0 4px}
.ws-lead{margin:0 0 4px}
.ws-fields,.ws-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:13px 0}
.ws-span{grid-column:1 / -1}
.ws-field{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:500;color:var(--ws-text);margin:13px 0 0}
.ws-fields .ws-field,.ws-two .ws-field{margin:0}
.ws-field input,.ws-field select,.ws-pattern select,.ws-pattern input{padding:9px;border:1px solid var(--ws-line);border-radius:7px;font-size:13px;
  background:var(--ws-panel);color:var(--ws-text);min-height:0;width:100%;font-weight:400}
.ws-req{font-weight:400;color:var(--ws-sub);font-size:12px}
.ws-hint{margin:6px 0 0}
.ws-ed-who{display:flex;flex-direction:column;gap:1px;padding:9px 11px;border:1px solid var(--ws-line);border-radius:7px;background:var(--ws-page)}
.ws-ed-who b{font-weight:600;color:var(--ws-text)}
.ws-ed-who span{font-size:12px;font-weight:400;color:var(--ws-sub)}
.ws-weekset{margin:4px 0 0}
.ws-wl{display:block;font-size:13px;font-weight:600;color:var(--ws-text);margin:0 0 7px}
.ws-pattern{border:1px solid var(--ws-line);border-radius:9px;overflow:hidden}
.ws-wd{display:grid;grid-template-columns:55px minmax(0,1fr) 122px 122px;gap:8px;align-items:center;padding:7px 11px;border-bottom:1px solid var(--ws-line)}
.ws-wd:last-child{border-bottom:0}
.ws-wd.nohours{grid-template-columns:55px minmax(0,1fr)}
.ws-wd.ws-rv3{grid-template-columns:55px minmax(0,1fr) minmax(0,1fr)}
.ws-wd-head{background:var(--ws-page);font-size:11px;color:var(--ws-sub)}
.ws-wd-n{font-size:13px;font-weight:600;color:var(--ws-text)}
.ws-wd input[hidden]{display:none}
.ws-wd.chg{background:var(--ws-day-sel)}
.ws-wd.chg>:last-child{font-weight:600;color:var(--ws-plum)}
.ws-wd-sum{margin:7px 0 0}
.ws-resume{background:var(--ws-soft);color:var(--ws-text);border-radius:8px;padding:12px 14px;font-size:13px;margin:13px 0}
.ws-resume-warn{background:var(--ws-temp-bg);color:var(--ws-temp)}
.ws-rv-dl{display:grid;gap:5px;margin:0 0 4px}
.ws-rv-dl div{display:grid;grid-template-columns:8.5em 1fr;gap:8px}
.ws-rv-dl dt{font-size:12px;color:var(--ws-sub)}
.ws-rv-dl dd{margin:0;font-weight:600;color:var(--ws-text)}
.ws-check{display:flex;gap:8px;align-items:flex-start;font-weight:600;color:var(--ws-text);margin:6px 0 0}
.ws-check input{width:auto;flex:none;margin:3px 0 0;min-height:0}
/* Manage rosters. */
.ws-backcal{margin:0 0 14px}
.ws-mhead{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 16px}
.ws-h2{font-size:22px;font-weight:600;color:var(--ws-text);margin:0 0 3px}
.ws-h3{font:700 14px/1.3 var(--font-body);color:var(--ws-text);margin:22px 0 10px}
.ws-mhead+#ws-dept-slot .ws-deps,.ws-backcal~#ws-dept-slot .ws-deps{padding:0;border:0;margin:0 0 14px}
.ws-tscroll{overflow-x:auto;border:1px solid var(--ws-line);border-radius:12px;background:var(--ws-panel)}
.ws-wt{border-collapse:collapse;width:100%;min-width:860px;table-layout:fixed}
.ws-wt th,.ws-wt td{border-bottom:1px solid var(--ws-line);padding:6px 5px;vertical-align:top;text-align:left}
.ws-wt tbody tr:last-child>*{border-bottom:0}
.ws-wt thead th{background:var(--ws-page);font-size:12px;font-weight:600;color:var(--ws-sub);padding:10px 7px}
.ws-wt thead th:first-child{width:125px}
.ws-wt thead th.is-today{color:var(--ws-plum)}
.ws-wt tbody th{padding:10px 7px;font-weight:400}
.ws-pname{display:block;font-size:13px;font-weight:600;color:var(--ws-text)}
.ws-wt th .ws-small{display:block}
.ws-flag{display:block;margin-top:5px;font-size:11px;font-weight:600;color:var(--ws-temp)}
.ws-tflag{display:block;margin-top:4px;font-size:11px;color:var(--ws-temp)}
.ws-rowlinks{display:flex;gap:10px;margin-top:4px}
.ws-pcell{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;min-height:66px;padding:7px;border:0;border-radius:6px;
  background:var(--ws-soft);color:var(--ws-text);text-align:left;cursor:pointer;font:400 11px/1.4 var(--font-body)}
.ws-pcell strong{font-size:12px;font-weight:600}
.ws-pcell.off,.ws-pcell.none{background:var(--ws-page);color:var(--ws-sub)}
.ws-pcell.leave{background:#F9EAEF;color:#8e2f4a}
.ws-pcell.temp{background:var(--ws-temp-bg);color:var(--ws-temp)}
.ws-pcell.unsure strong{text-decoration:underline dotted #8A7A93;text-underline-offset:3px}
.ws-src{font-size:10px;color:var(--ws-sub)}
.ws-pcell.temp .ws-src{color:var(--ws-temp)}
.ws-gap{margin-top:10px}
.ws-tlist{list-style:none;margin:0;padding:0;border:1px solid var(--ws-line);border-radius:12px;background:var(--ws-panel)}
.ws-tlist li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--ws-line);font-size:13px}
.ws-tlist li:last-child{border-bottom:0}
.ws-tlist .ws-small{display:block}
/* My Schedule: a card a day. */
.ws-mine-top{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.ws-mine-week{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13px;color:var(--ws-text);background:var(--ws-panel);
  border:1px solid var(--ws-line);border-radius:9px;padding:11px 14px}
.ws-mine-week b{font-weight:600}
.ws-mgrid-mine{grid-template-columns:repeat(7,minmax(96px,1fr));min-width:700px;gap:6px;padding:10px}
.ws-mgrid-mine .ws-wdh{border:0;border-radius:6px;padding:8px}
.ws-mgrid-mine .ws-pad{border:0;background:none;min-height:0}
.ws-mday{display:flex;flex-direction:column;gap:2px;border:1px solid var(--ws-line);border-radius:9px;padding:13px 9px;min-height:135px;
  background:var(--ws-panel);color:var(--ws-text);font-size:12px;cursor:pointer}
.ws-mday .ws-date{margin-bottom:6px}
.ws-mday.temp{background:var(--ws-temp-bg);border-color:#F1E3C4}
.ws-mday.off{background:var(--ws-page)}
.ws-mday.leave{background:#FBF2F5}
.ws-mday.is-today{box-shadow:inset 0 0 0 1px var(--ws-day-sel-line)}
.ws-mday.unsure .ws-mmain span:not(.ws-b){text-decoration:underline dotted #8A7A93;text-underline-offset:3px}
.ws-mmain{display:flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:12px;font-weight:600;color:var(--ws-text)}
.ws-mday.off .ws-mmain{color:var(--ws-sub);font-weight:500}
.ws-mday.leave .ws-mmain{color:#8e2f4a}
.ws-msub{font-size:11px;color:var(--ws-sub)}
.ws-mtag{align-self:flex-start;margin-top:3px;font-size:10px;font-weight:600;border-radius:5px;padding:1px 6px;background:var(--ws-soft);color:var(--ws-plum)}
.ws-mday.temp .ws-mtag{background:#F6E6C6;color:var(--ws-temp)}
.ws-mtag.unconf{background:var(--ws-temp-bg);color:var(--ws-temp)}
.ws-mday .rota-chip{margin-top:4px}
/* Narrow screens: one-column fields, the month and the week scroll in
   their own boxes, popups scroll in their body. */
@media (max-width:650px){
  .ws-tabs{gap:18px;margin-bottom:16px}
  .ws-fields,.ws-two{grid-template-columns:1fr}
  .ws-wd{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr);row-gap:6px}
  .ws-wd select{grid-column:2 / -1}
  .ws-wd-head:not(.ws-rv3) span:nth-child(n+3){display:none}
  .ws-wd.nohours{grid-template-columns:40px minmax(0,1fr)}
  .ws-wd input:first-of-type{grid-column:2}
  .ws-wd.ws-rv3{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr)}
  .ws-modal .modal-head{padding:18px 16px 6px}
  .ws-modal .modal-body{padding:4px 16px 12px}
  .ws-modal .modal-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
  .ws-modal .modal-foot .ws-back-btn{margin-right:0}
  .ws-row{align-items:flex-start}
  .ws-rv-dl div{grid-template-columns:1fr;gap:0}
  .ws-intro,.ws-deps,.ws-mfoot{padding-left:14px;padding-right:14px}
  .ws-deps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
  .ws-dep{flex:none;white-space:nowrap}
}

/* ---- Leave quotas on the calendar (9 Oct 2026, the manager's leave calendar
   spec). Soft lavender, dark readable text, light borders; the calendar
   itself keeps its own look. Every text pair here is 4.5:1 or better. */
.cal-today{min-height:32px;padding:4px 12px}
.lvq-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:10px 0 8px}
.lvq-dep{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.lvq-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #D8C5E4;background:#F2ECF7;color:#5B286F;border-radius:999px;
  font-weight:600;font-size:.88rem;padding:6px 14px;min-height:34px}
.lvq-btn.small{font-size:.8rem;padding:4px 11px;min-height:30px;white-space:nowrap}
.lvq-btn:focus-visible,.lvq-link:focus-visible{outline:2px solid #5B286F;outline-offset:2px}
@media (hover: hover){ .lvq-btn:hover{background:#ECE3F3} }
.lvq-sum{font-size:.84rem;color:#5E5268;min-width:0}
.lvq-link{background:none;border:0;color:#5B286F;font-weight:600;font-size:.86rem;padding:2px 0;text-decoration:underline;text-underline-offset:2px}
/* The Departments picker. */
.lvq-dlg{margin:auto;border:1px solid #EDE8F0;border-radius:18px;padding:18px 20px;width:min(420px,calc(100vw - 32px));color:#2F2636;background:#fff;box-shadow:var(--shadow-lg)}
.lvq-dlg::backdrop{background:rgba(47,38,54,.35)}
.lvq-dlg h2{font-size:1.15rem;margin:0 0 4px}
.lvq-dlg .hint{margin:0 0 10px}
.lvq-quick{display:flex;gap:16px;margin:0 0 8px}
.lvq-checks{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:4px;max-height:50vh;overflow:auto}
.lvq-check{display:flex;align-items:center;gap:10px;margin:0;padding:7px 8px;border-radius:10px;font-weight:500;font-size:.92rem;color:#2F2636;cursor:pointer}
.lvq-check input{width:18px;height:18px;flex:none;margin:0;min-height:0;accent-color:#5B286F}
@media (hover: hover){ .lvq-check:hover{background:#FAF6FD} }
.lvq-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
/* The selected date's quota table. */
.lvq-quota{margin-top:12px}
.lvq-table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:520px}
.lvq-table th,.lvq-table td{padding:7px 8px;border-bottom:1px solid #EDE8F0;text-align:left;vertical-align:middle;color:#2F2636}
.lvq-table thead th{font-size:.74rem;font-weight:600;color:#5E5268;background:#FAF8FB}
.lvq-table td{font-variant-numeric:tabular-nums}
.lvq-table td:nth-child(n+2):nth-child(-n+5){width:11%}
.lvq-table tbody th{font-weight:600}
.qd-g{display:inline-flex;align-items:center;gap:4px}
.qd-src{display:block;font-size:.72rem;font-weight:400;color:#5E5268}
.qd-half{display:block;font-size:.7rem;color:#5E5268}
.qd-muted{color:#5E5268;font-size:.8rem}
.qd-flag{display:inline-block;font-size:.7rem;font-weight:600;border-radius:999px;padding:0 7px;background:#F5F3F6;color:#5E5268;white-space:nowrap}
.qd-flag.bad{background:#F9EAEF;color:#8E2F4A}
.qd-flag.tbc{background:#FBF1E4;color:#7A4206}
.qd-tagname{font-size:.72rem;color:#5E5268;margin-right:4px}
.lvq-warn{list-style:none;margin:8px 0 0;padding:8px 10px;border-radius:10px;background:#FBF1E4;color:#7A4206;font-size:.84rem;display:flex;flex-direction:column;gap:3px}
.lvq-staff{margin-top:10px;border:1px solid #EDE8F0;border-radius:12px;padding:6px 12px;background:#FAF8FB}
.lvq-staff summary{cursor:pointer;font-weight:600;font-size:.86rem;color:#5B286F;padding:4px 0}
.lvq-staff summary:focus-visible{outline:2px solid #5B286F;outline-offset:2px;border-radius:6px}
.lvq-staff ul{margin:6px 0 4px;padding-left:18px;font-size:.84rem;color:#2F2636;display:flex;flex-direction:column;gap:4px}
.qd-outlets{display:block;color:#5E5268;font-size:.8rem}
.ptag-dept{background:#5E5268}
/* Adjust this day and Manage quotas. */
.lvq-modal .modal-body{color:#2F2636}
.lvq-dl{display:grid;gap:4px;margin:0 0 6px}
.lvq-dl div{display:grid;grid-template-columns:7.5em 1fr;gap:8px}
.lvq-dl dt{font-size:.82rem;color:#5E5268}
.lvq-dl dd{margin:0;font-weight:600}
.lvq-modal .ptag{font-size:.66rem;padding:0 5px}
.lvq-impact{margin-top:12px;font-size:.88rem;background:#FAF6FD;border:1px solid #EDE8F0;border-radius:10px;padding:8px 10px}
.lvq-impact p{margin:0;font-variant-numeric:tabular-nums}
.lvq-modes{display:inline-flex;border:1px solid #D8C5E4;border-radius:999px;padding:3px;gap:2px;background:#FAF8FB}
.lvq-modes label{margin:0;display:inline-flex}
.lvq-modes input{position:absolute;opacity:0;width:1px;height:1px}
.lvq-modes span{padding:6px 14px;border-radius:999px;font-weight:600;font-size:.86rem;color:#5E5268;cursor:pointer}
.lvq-modes input:checked + span{background:#F2ECF7;color:#5B286F}
.lvq-modes input:focus-visible + span{outline:2px solid #5B286F;outline-offset:1px}
.lvq-week{border:1px solid #EDE8F0;border-radius:12px;padding:8px 10px 10px;margin:12px 0 0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.lvq-week legend{font-weight:600;font-size:.86rem;color:#2F2636;padding:0 4px}
.lvq-wd{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;font-size:.78rem;font-weight:600;color:#5E5268}
.lvq-wd input{padding:6px 4px;text-align:center;font-size:.92rem;border-radius:9px}
.lvq-conf{margin-top:12px;border:1px solid #D8C5E4;background:#FAF6FD;border-radius:12px;padding:10px 12px;font-size:.86rem}
.lvq-conf ul{margin:6px 0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.lvq-conf .lvq-check{padding:4px 0}
@media (max-width:600px){
  .lvq-week{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lvq-dl div{grid-template-columns:1fr}
}

/* ---- Company Bills & Payments (9 Oct 2026, the approved "Soft rows" design)
   Scoped to .cbp (the page), .cbp-modal (its dialogs) and the header's
   Upload invoice button. White rows a few pixels apart with rounded ends on
   a very light lavender page; the chosen rows pale lavender with a slightly
   stronger edge; plum buttons; dark text. The portal has no dark mode, so
   these are the only values. Every :hover sits behind (hover: hover). */
.cbp,.modal.cbp-modal,.cbp-btn{--cb-bg:#faf8fb;--cb-panel:#fff;--cb-ink:#302538;--cb-muted:#685a72;--cb-line:#eae3ef;--cb-plum:#5e2973;
  --cb-primary:#603475;--cb-lav:#f2eaf8;--cb-sel:#f5f0f9;--cb-sel-line:#d9c8e5;--cb-green:#edf5ee;--cb-greenink:#366044;--cb-amber:#fff4df;--cb-amberink:#79501b;
  --cb-red:#fbecef;--cb-redink:#8e2f4a}
.cbp{color:var(--cb-ink);font-size:14px;line-height:1.45}
.cbp [hidden],.cbp-modal [hidden]{display:none !important}
.cbp-small{display:block;font-size:12px;color:var(--cb-muted);margin:0}
.cbp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cbp-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--cb-panel);border:1px solid var(--cb-line);color:var(--cb-plum);
  padding:9px 12px;border-radius:9px;font:500 13px/1.2 var(--font-body);cursor:pointer;text-decoration:none;min-height:0}
.cbp-btn .lu{width:16px;height:16px}
.cbp-btn.cbp-primary{background:var(--cb-primary);border-color:var(--cb-primary);color:#fff}
.cbp-btn.cbp-danger{color:var(--cb-redink);border-color:#ecd3db}
.cbp-btn:disabled{opacity:.45;cursor:not-allowed}
.cbp-btn.cbp-sq{width:32px;height:32px;padding:0}
.cbp-link{background:transparent;border:0;color:var(--cb-plum);padding:0;text-align:left;font:500 12px/1.4 var(--font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cbp-link.is-off{color:var(--cb-muted);cursor:not-allowed;text-decoration-style:dotted}
.cbp-btn:focus-visible,.cbp-link:focus-visible,.cbp-tab:focus-visible,.cbp-name:focus-visible,.cbp input:focus-visible,.cbp-modal input:focus-visible,
.cbp-modal select:focus-visible,.cbp-modal textarea:focus-visible{outline:2px solid var(--cb-plum);outline-offset:2px}
@media (hover: hover){
  .cbp-btn:not(:disabled):hover{background:var(--cb-sel);border-color:var(--cb-sel-line)}
  .cbp-btn.cbp-primary:not(:disabled):hover{background:#52296a;border-color:#52296a}
  .cbp-tab:hover{color:var(--cb-plum)}
  .cbp-name:hover{text-decoration:underline}
}
/* the tabs: the original horizontal ones, the voucher pair pushed right */
.cbp-tabs{display:flex;gap:22px;flex-wrap:wrap;border-bottom:1px solid var(--cb-line)}
.cbp-tab{display:inline-flex;align-items:center;gap:6px;padding:12px 3px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;
  color:var(--cb-muted);font:400 13px/1.2 var(--font-body);cursor:pointer}
.cbp-tab .lu{width:15px;height:15px}
.cbp-tab[aria-selected="true"]{color:var(--cb-plum);border-bottom-color:var(--cb-plum);font-weight:600}
.cbp-tab.cbp-vstart{margin-left:auto}
/* the compact summary strip */
.cbp-summary{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:17px 20px;background:var(--cb-panel);border:1px solid var(--cb-line);
  border-radius:12px;margin:20px 0;color:var(--cb-muted);font-size:12px}
.cbp-summary span{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.cbp-summary strong{font-size:18px;color:var(--cb-ink);font-weight:500;margin-right:5px}
.cbp-summary .cbp-warn{font-style:normal;color:var(--cb-amberink)}
/* the records */
.cbp-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:0 0 6px}
.cbp-toolbar h2{font:500 18px/1.3 var(--font-body);color:var(--cb-ink);margin:0}
.cbp-toolbar .cbp-small{margin-top:3px}
.cbp-month{display:flex;align-items:center;gap:8px}
.cbp-pill{display:inline-block;background:var(--cb-lav);color:var(--cb-plum);padding:4px 7px;border-radius:6px;font-size:11px;line-height:1.3;white-space:nowrap}
.cbp-pill.green{background:var(--cb-green);color:var(--cb-greenink)}
.cbp-pill.amber{background:var(--cb-amber);color:var(--cb-amberink)}
.cbp-pill.red{background:var(--cb-red);color:var(--cb-redink);font-weight:600}
.cbp-mt{margin-top:6px}
.cbp-monthpick{position:relative;cursor:pointer;font-size:12px;padding:6px 10px}
.cbp-monthpick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.cbp-scroll{overflow-x:auto;position:relative}
.cbp{position:relative}
.cbp-table{width:100%;border-collapse:separate;border-spacing:0 10px;min-width:800px;font-size:12px}
.cbp-table th{text-align:left;color:var(--cb-muted);font-weight:500;background:transparent;padding:0 10px;font-size:12px}
.cbp-table td{background:var(--cb-panel);border-top:1px solid var(--cb-line);border-bottom:1px solid var(--cb-line);padding:19px 10px;vertical-align:middle;color:var(--cb-ink)}
.cbp-table th:first-child,.cbp-table td:first-child{width:35px;padding-left:17px}
.cbp-table td:first-child{border-left:1px solid var(--cb-line);border-radius:11px 0 0 11px}
.cbp-table td:last-child{border-right:1px solid var(--cb-line);border-radius:0 11px 11px 0}
.cbp-table tr.is-sel td{background:var(--cb-sel);border-top-color:var(--cb-sel-line);border-bottom-color:var(--cb-sel-line)}
.cbp-table tr.is-sel td:first-child{border-left-color:var(--cb-sel-line)}
.cbp-table tr.is-sel td:last-child{border-right-color:var(--cb-sel-line)}
.cbp-table td strong{font-size:13px;font-weight:500}
.cbp-table td .cbp-small{font-size:11px;margin-top:4px}
.cbp-num{text-align:right !important;white-space:nowrap;font-variant-numeric:tabular-nums}
.cbp-amt{font-size:13px;font-weight:600;color:var(--cb-ink)}
.cbp-none{font-weight:400;color:var(--cb-muted)}
.cbp-name{background:none;border:0;padding:0;font:500 13px/1.35 var(--font-body);color:var(--cb-ink);text-align:left;cursor:pointer}
.cbp-due{font-weight:500}
.cbp input[type=checkbox],.cbp-modal input[type=checkbox],.cbp-modal input[type=radio]{accent-color:var(--cb-plum);width:16px;height:16px;margin:0;flex:none;min-height:0}
.cbp-acc{font-size:12px;color:var(--cb-ink)}
.cbp-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:4px;border:1px solid var(--cb-line);
  background:var(--cb-panel);border-radius:12px;padding:17px 20px}
.cbp-footer strong{font-size:14px;font-weight:600}
.cbp-footer .cbp-small{margin-top:3px}
.cbp-footbtns{display:flex;gap:8px;flex-wrap:wrap}
.cbp-sent{display:flex;flex-wrap:wrap;gap:4px}
.cbp-sent .cbp-pill{font-size:11.5px}
.cbp-empty{padding:40px 20px;text-align:center;color:var(--cb-muted);background:var(--cb-panel);border:1px solid var(--cb-line);border-radius:12px;margin-top:10px}
.cbp-empty p{margin:0 0 6px}
.cbp-status{font-size:12px;color:var(--cb-plum);margin-top:12px}
.cbp-gap{margin-top:10px}
/* the dialogs (the shared modal, scoped by .cbp-modal) */
.modal.cbp-modal{max-width:660px;color:var(--cb-ink)}
.modal.cbp-modal.wide{max-width:780px}
.modal.cbp-modal.xwide{max-width:1100px}
.cbp-modal .modal-head{padding:22px 23px 6px}
.cbp-modal .modal-head h3{font-size:20px;font-weight:500;color:var(--cb-ink)}
.cbp-modal .modal-body{padding:4px 23px 14px;font-size:13px}
.cbp-modal .modal-foot{padding:14px 23px calc(18px + env(safe-area-inset-bottom));justify-content:flex-end;gap:9px;flex-wrap:wrap}
.cbp-modal .modal-foot .cbp-btn{flex:0 0 auto}
.cbp-modal h3{font-size:14px;margin:0;color:var(--cb-ink)}
.cbp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cbp-steps{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin:0 0 12px;padding:0;counter-reset:s}
.cbp-steps li{counter-increment:s;font-size:12px;color:var(--cb-muted);background:var(--cb-bg);border:1px solid var(--cb-line);border-radius:999px;padding:4px 10px}
.cbp-steps li::before{content:counter(s) ". "}
/* Several photos joined into one invoice (10 Oct 2026) */
.cbp-parts{display:grid;gap:8px;margin-top:10px}
.cbp-parts ol{margin:0;padding-left:20px;display:grid;gap:4px;font-size:12px}
.cbp-parts li span{overflow-wrap:anywhere;margin-right:10px}
.cbp-parts .cbp-btn{justify-self:start}
.cbp-brs .cbb-code{flex:0 0 5.5em;min-width:0}
.cbp-addbr{display:flex;gap:8px;flex-wrap:wrap}
.cbp-addbr #cbb-code{flex:0 0 8em;min-width:0}
.cbp-addbr #cbb-name{flex:1 1 10em;min-width:0}
.cbp-steps li.on{color:var(--cb-plum);background:var(--cb-lav);border-color:var(--cb-sel-line);font-weight:600}
.cbp-read{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.cbp-read-preview{position:sticky;top:0}
.cbp-preview,.cbp-preview-empty{border:1px solid var(--cb-line);border-radius:10px;background:var(--cb-bg);min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cbp-preview-empty{padding:20px;text-align:center;color:var(--cb-muted);font-size:12px}
.cbp-preview iframe{width:100%;height:68vh;border:0;background:#fff}
.cbp-preview img{max-width:100%;max-height:68vh;display:block}
.cbp-upload{padding:15px;border:1px dashed var(--cb-sel-line);border-radius:10px;background:var(--cb-bg)}
.cbp-upload .cbp-small{margin-top:4px}
.cbp-file{display:flex;flex-direction:column;gap:5px;font-size:12px;margin-top:13px}
.cbp-file input{padding:8px;border:1px solid var(--cb-line);border-radius:8px;background:var(--cb-panel);font-size:13px}
.cbp-legend{display:flex;flex-wrap:wrap;gap:6px 12px;margin:8px 0 2px}
.cbp-legend .k::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px;border:1px solid}
.cbp-legend .k.read::before{background:var(--cb-green);border-color:#b9d6c0}
.cbp-legend .k.unsure::before{background:var(--cb-amber);border-color:#ecd4a6}
.cbp-legend .k.missing::before{background:var(--cb-red);border-color:#e3b5c2}
.cbp-legend .k.suggest::before{background:var(--cb-lav);border-color:var(--cb-sel-line)}
.cbp-fields{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:13px 0}
.cbp-span{grid-column:1 / -1}
.cbp-f{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--cb-ink);margin:0}
.cbp-f input,.cbp-f select,.cbp-f textarea,.cbp-fields select{width:100%;min-width:0;padding:10px;border:1px solid var(--cb-line);border-radius:8px;background:var(--cb-panel);
  color:var(--cb-ink);font:400 13px/1.3 var(--font-body);min-height:0}
.cbp-f textarea{resize:vertical}
.cbp-fnote{font-size:11px;color:var(--cb-muted)}
.cbp-fnote:empty{display:none}
.cbp-f[data-state="read"] input,.cbp-f[data-state="read"] select{background:var(--cb-green);border-color:#b9d6c0}
.cbp-f[data-state="read"] .cbp-fnote{color:var(--cb-greenink)}
.cbp-f[data-state="unsure"] input,.cbp-f[data-state="unsure"] select{background:var(--cb-amber);border-color:#ecd4a6}
.cbp-f[data-state="unsure"] .cbp-fnote{color:var(--cb-amberink)}
.cbp-f[data-state="missing"] input,.cbp-f[data-state="missing"] select{background:var(--cb-red);border-color:#e3b5c2}
.cbp-f[data-state="missing"] .cbp-fnote{color:var(--cb-redink);font-weight:600}
.cbp-f[data-state="suggest"] input,.cbp-f[data-state="suggest"] select{background:var(--cb-lav);border-color:var(--cb-sel-line)}
.cbp-f[data-state="suggest"] .cbp-fnote{color:var(--cb-plum)}
.cbp-note{font-size:12px;padding:11px 13px;border-radius:9px;margin:12px 0;background:var(--cb-bg);border:1px solid var(--cb-line)}
.cbp-note p{margin:4px 0 0}
.cbp-note ul{margin:6px 0 0;padding-left:18px}
.cbp-note.cbp-amber{background:var(--cb-amber);color:var(--cb-amberink);border-color:#f0dfbb}
.cbp-note.cbp-green{background:var(--cb-green);color:var(--cb-greenink);border-color:#cfe3d4}
.cbp-note.cbp-soft{background:var(--cb-lav);color:var(--cb-ink);border-color:var(--cb-sel-line)}
.cbp-note.cbp-amber .cbp-small,.cbp-note.cbp-green .cbp-small{color:inherit}
.cbp-err{color:var(--cb-redink);font-weight:600;font-size:13px;margin:10px 0 0}
.cbp-check{display:flex;gap:9px;align-items:flex-start;font-size:13px;margin:10px 0}
.cbp-check input{margin-top:2px}
.cbp-fs{border:0;padding:0;margin:12px 0}
.cbp-radio{display:flex;align-items:flex-start;gap:9px;padding:13px;border:1px solid var(--cb-line);border-radius:9px;margin:8px 0;cursor:pointer}
.cbp-radio input{margin-top:2px}
.cbp-radio strong{display:block;font-weight:600;font-size:13px}
.cbp-radio:has(input:checked){background:var(--cb-sel);border-color:var(--cb-sel-line)}
.cbp-dl{display:grid;gap:6px;margin:0 0 6px}
.cbp-dl div{display:grid;grid-template-columns:9.5em 1fr;gap:8px}
.cbp-dl dt{font-size:12px;color:var(--cb-muted)}
.cbp-dl dd{margin:0;color:var(--cb-ink)}
.cbp-h3{margin:16px 0 0 !important}
.cbp-hist{margin-top:14px;font-size:12px}
.cbp-hist summary{cursor:pointer;color:var(--cb-plum)}
.cbp-hist ul{padding-left:18px;margin:6px 0 0}
/* Edit / Delete on a record, its category, the categories list, the voucher preview (10 Oct 2026) */
.cbp-cat{color:var(--cb-plum)}
.cbp-rowact{display:flex;gap:12px;margin-top:4px}
.cbp-link.cbp-redlink{color:var(--cb-redink)}
.cbp-radios{border:0;padding:0;margin:0 0 6px}
.cbp-radios legend{font-weight:600;font-size:13px;margin-bottom:4px}
.cbp-cats{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.cbp-cats li{display:flex;gap:6px;align-items:center}
.cbp-cats li input{flex:1;min-width:0}
.cbp-cats li span{flex:1}
.cbp-pvbar{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;padding:8px 10px;margin-bottom:8px;border-radius:10px;background:var(--cb-lav)}
#cbk-new{flex:1;min-width:0}
.cbp-plan{display:flex;flex-direction:column;margin:10px 0}
.cbp-plan-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--cb-line)}
.cbp-plan-row ul{margin:6px 0 0;padding-left:16px}
.cbp-paper{border:1px solid var(--cb-line);padding:22px;margin-top:10px;border-radius:8px;background:#fff}
.cbp-brand{font:600 20px/1.2 var(--font-head);color:var(--cb-plum)}
.cbp-ptitle{font-size:15px !important;letter-spacing:.03em;margin:14px 0 2px !important}
.cbp-lines{width:100%;border-collapse:collapse;margin-top:14px;font-size:12px}
.cbp-lines th{text-align:left;color:var(--cb-muted);font-weight:500;background:var(--cb-bg);padding:9px 10px}
.cbp-lines td{padding:11px 10px;border-top:1px solid var(--cb-line);vertical-align:top}
.cbp-total{border-top:2px solid var(--cb-line);padding-top:12px;margin-top:10px;text-align:right;font-size:18px;font-weight:600}
.cbp-mail{padding:15px;background:var(--cb-bg);border:1px solid var(--cb-line);border-radius:9px;margin-top:12px}
.cbp-mail strong{display:block;margin-top:6px;font-size:13px}
.cbp-pre{white-space:pre-wrap;margin:8px 0 0;font-size:13px}
.cbp-attachments{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.cbp-attachment{border:1px solid var(--cb-line);border-radius:5px;padding:5px 7px;font-size:11px;background:var(--cb-panel)}
.cbp-viewer iframe{width:100%;height:72vh;border:1px solid var(--cb-line);border-radius:8px;background:#fff}
@media (max-width:860px){
  .cbp-read{grid-template-columns:1fr}
  .cbp-read-preview{position:static;order:-1}
  .cbp-preview,.cbp-preview-empty{min-height:0}
  .cbp-preview iframe{height:46vh}
  .cbp-preview-empty{display:none}
}
@media (max-width:700px){
  .cbp-tabs{gap:16px}
  .cbp-tab.cbp-vstart{margin-left:0}
  .cbp-fields{grid-template-columns:1fr}
  .cbp-summary{padding:14px 15px}
  .cbp-modal .modal-head{padding:18px 16px 6px}
  .cbp-modal .modal-body{padding:4px 16px 12px}
  .cbp-modal .modal-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
  .cbp-dl div{grid-template-columns:1fr;gap:0}
  .cbp-footer{padding:14px 15px}
  .cbp-footer .cbp-btn{width:100%}
  .cbp-footbtns{width:100%;flex-wrap:nowrap}
  .cbp-footbtns .cbp-btn{flex:1;width:auto}
}
.cbp-table .cbp-link,.cbp-table .cbp-pill{white-space:nowrap}
.cbp-table col.c-pick{width:44px}.cbp-table col.c-name{width:27%}.cbp-table col.c-due{width:13%}.cbp-table col.c-amt{width:13%}
.cbp-table col.c-inv{width:13%}.cbp-table col.c-pay{width:16%}.cbp-table col.c-act{width:15%}
/* Company Bills on a phone (Giselle, 10 Oct 2026: "mobile version messy").
   The header's two buttons go under the title instead of squeezing it to
   a letter a line; each table row becomes a card - tick, name and amount
   on top, then due date, invoice, payment and the voucher link stacked -
   so nothing scrolls sideways. */
@media (max-width:700px){
  .topbar:has(#cbp-upload){flex-wrap:wrap;align-items:flex-start}
  .topbar:has(#cbp-upload) > div:first-child{flex:1 1 100%}
  .topbar:has(#cbp-upload) .topbar-actions{flex:1 1 100%;flex-wrap:wrap}
  .topbar:has(#cbp-upload) .topbar-actions .cbp-btn{flex:1 1 auto;justify-content:center}
  .cbp-tabs{gap:4px 16px}
  .cbp-tab{padding:10px 2px}
  .cbp-toolbar{flex-direction:column;align-items:stretch}
  .cbp-month{flex-wrap:wrap}
  .cbp-scroll{overflow-x:visible}
  .cbp-table{min-width:0;display:block;border-spacing:0}
  .cbp-table colgroup{display:none}
  .cbp-table thead,.cbp-table tbody{display:block}
  .cbp-table thead tr{display:flex;align-items:center;gap:10px;padding:4px 0 8px 17px}
  .cbp-table thead th{display:none;padding:0}
  .cbp-table thead th:first-child{display:block;width:auto}
  .cbp-table thead th:first-child::after{content:"Select all";font-size:12px;color:var(--cb-muted);margin-left:8px;vertical-align:2px}
  .cbp-table tbody tr{display:grid;grid-template-columns:26px minmax(0,1fr) auto;column-gap:10px;row-gap:8px;align-items:start;
    background:var(--cb-panel);border:1px solid var(--cb-line);border-radius:12px;padding:14px 14px 14px 12px;margin-bottom:10px}
  .cbp-table tbody tr.is-sel{background:var(--cb-sel);border-color:var(--cb-sel-line)}
  .cbp-table tbody tr td,.cbp-table tbody tr td:first-child,.cbp-table tbody tr td:last-child,.cbp-table tbody tr.is-sel td{display:block;background:transparent;border:0;border-radius:0;padding:0;width:auto;min-width:0}
  .cbp-table tbody tr td:first-child{grid-column:1;grid-row:1 / span 6;padding-top:2px}
  .cbp-table tbody td:nth-child(2){grid-column:2;grid-row:1}
  .cbp-table tbody td.cbp-num{grid-column:3;grid-row:1;text-align:right;max-width:9.5em}
  .cbp-table tbody td.cbp-num .cbp-small{display:block}
  .cbp-table tbody td:nth-child(n+3):not(.cbp-num){grid-column:2 / span 2;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
  .cbp-table tbody td:nth-child(n+3):not(.cbp-num) .cbp-small{margin-top:0}
  .cbp-table tbody td:empty{display:none}
  /* A payment on a phone (13 Oct 2026: "Mobile version messy"): name and
     amount; then due date beside the invoice; then paid/unpaid; then the
     voucher - four lines, not five. */
  .cbp-table.cbp-rec tbody tr{row-gap:6px}
  .cbp-table.cbp-rec tbody tr td:nth-child(3),.cbp-table.cbp-rec tbody tr td:nth-child(5){grid-row:2;margin-top:6px}
  .cbp-table.cbp-rec tbody td.cbp-num{justify-self:end;max-width:none}
  .cbp-table.cbp-rec tbody td:nth-child(5) .cbp-small{display:none}
  .cbp-table.cbp-rec tbody tr td:nth-child(3){grid-column:2}
  .cbp-table.cbp-rec tbody tr td:nth-child(5){grid-column:3;justify-content:flex-end;text-align:right;max-width:11em}
  .cbp-table.cbp-rec tbody tr td:nth-child(6){grid-row:3}
  .cbp-table.cbp-rec tbody tr td:nth-child(7){grid-row:4}
  .cbp-table .cbp-link,.cbp-table .cbp-pill{white-space:normal}
  .cbp-table .cbp-name{text-align:left}
  .cbp-rowact{gap:16px;margin-top:6px}
  .cbp-rowact .cbp-link{font-size:13px;padding:4px 0}
  .cbp-table thead tr{padding-left:13px}
  .cbp-modal .modal-foot{display:flex;flex-wrap:wrap;gap:8px}
  .cbp-modal .modal-foot > *,.cbp-modal .modal-foot > .cbp-btn{flex:1 1 0;justify-content:center;text-align:center;margin:0}
  .cbp-modal .modal-foot > .cbp-btn.cbp-primary{flex-basis:100%}
  .cbp-steps{gap:6px}
  .cbp-steps li{font-size:11px;padding:4px 8px}
}

/* ---- Work Schedule: Team calendar | Weekly staff overview, branch and
   department filters, the Manage rosters box (9 Oct 2026). */
.ws-subtabs{display:inline-flex;gap:4px;padding:4px;margin:0 0 16px;background:var(--ws-panel);border:1px solid var(--ws-line);border-radius:12px}
.ws-subtab{background:transparent;border:0;border-radius:9px;padding:8px 14px;font:500 13px/1.2 var(--font-body);color:var(--ws-sub);cursor:pointer}
.ws-subtab[aria-selected="true"]{background:var(--ws-soft);color:var(--ws-plum);font-weight:600}
.ws-subtab:focus-visible{outline:2px solid #5B286F;outline-offset:2px}
@media (hover: hover){ .ws-subtab:not([aria-selected="true"]):hover{color:var(--ws-plum)} }
.ws-deps.ws-brs{align-items:center;padding-top:0}
.ws-barlbl{margin-right:4px}
.ws-dep .ws-b{margin-right:2px}
.ws-wkbody{padding:14px 18px 16px}
.ws-wkbody .ws-tscroll{border-radius:10px}
.ws-pcell.ro{cursor:default}
.ws-choose{border:0;padding:0;margin:8px 0 6px;display:flex;flex-direction:column;gap:10px}
.ws-choice{display:flex;align-items:flex-start;gap:10px;padding:14px;border:1px solid var(--ws-line);border-radius:10px;cursor:pointer;margin:0}
.ws-choice input{accent-color:#5B286F;width:16px;height:16px;margin:2px 0 0;flex:none;min-height:0}
.ws-choice strong{display:block;font-size:14px;font-weight:600;color:var(--ws-text);margin-bottom:2px}
.ws-choice:has(input:checked){background:var(--ws-day-sel);border-color:var(--ws-day-sel-line)}
@media (max-width:650px){
  .ws-subtabs{display:flex}
  .ws-subtab{flex:1;padding:8px 6px}
  .ws-brs{flex-wrap:nowrap;overflow-x:auto}
  .ws-wkbody{padding:12px 10px 14px}
}

/* ---- Work Schedule filters: two drop-downs with tick boxes (9 Oct 2026) */
.ws-filters{display:flex;flex-wrap:wrap;gap:10px;padding:13px 18px;border-bottom:1px solid var(--ws-line)}
.ws-dd{position:relative}
.ws-dd-btn{display:inline-flex;align-items:center;gap:8px;max-width:100%;background:var(--ws-panel);border:1px solid var(--ws-line);border-radius:10px;
  padding:8px 12px;font:400 13px/1.2 var(--font-body);color:var(--ws-text);cursor:pointer}
.ws-dd-btn[aria-expanded="true"]{border-color:var(--ws-day-sel-line);background:var(--ws-day-sel)}
.ws-dd-k{font-size:12px;color:var(--ws-sub)}
.ws-dd-v{font-weight:600;color:var(--ws-plum);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.ws-dd-caret{font-size:11px;color:var(--ws-sub)}
.ws-dd-btn:focus-visible{outline:2px solid #5B286F;outline-offset:2px}
.ws-dd-panel{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:240px;max-height:340px;overflow-y:auto;background:var(--ws-panel);
  border:1px solid var(--ws-line);border-radius:12px;box-shadow:0 10px 30px rgba(47,38,54,.14);padding:8px}
.ws-dd-quick{display:flex;justify-content:flex-end;padding:2px 6px 6px;border-bottom:1px solid var(--ws-line);margin-bottom:4px}
.ws-dd-opt{display:flex;align-items:center;gap:9px;padding:8px;border-radius:8px;font-size:13px;color:var(--ws-text);cursor:pointer;margin:0}
.ws-dd-opt input{accent-color:#5B286F;width:16px;height:16px;margin:0;flex:none;min-height:0}
.ws-dd-opt:has(input:checked){background:var(--ws-day-sel)}
.ws-dd-allbr{border-bottom:1px solid var(--ws-line);border-radius:8px 8px 0 0;margin-bottom:4px}
@media (hover: hover){ .ws-dd-opt:hover{background:var(--ws-hover)} .ws-dd-btn:hover{border-color:var(--ws-day-sel-line)} }
@media (max-width:650px){
  .ws-filters{padding:12px 14px}
  .ws-dd{flex:1 1 140px}
  .ws-dd-btn{width:100%;justify-content:space-between}
  .ws-dd-v{max-width:150px}
  .ws-dd-panel{left:0;right:auto;min-width:min(280px,calc(100vw - 40px))}
  .ws-dd[data-dd="br"] .ws-dd-panel{left:auto;right:0}
}
/* the filter drop-downs open over the panel, so it does not clip */
.ws-month{overflow:visible}
.ws-month>.ws-mfoot{border-radius:0 0 16px 16px}
/* Paid / Unpaid pressed to change them (9 Oct 2026) */
.cbp-pillbtn{border:1px solid transparent;cursor:pointer;font-family:var(--font-body);line-height:1.3}
.cbp-pillbtn span{font-size:9px;opacity:.8}
.cbp-pillbtn:focus-visible{outline:2px solid var(--cb-plum);outline-offset:2px}
@media (hover: hover){ .cbp-pillbtn:hover{border-color:var(--cb-sel-line)} }
.cbp-pp .pp-grid{margin-top:8px}

/* ---- Shared files (10 Oct 2026): files shared to Lunites from a phone ---- */
.sh{display:grid;gap:14px}
.sh-items{display:grid;gap:10px;margin-top:10px}
.sh-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card, #fff)}
.sh-ico{flex:none;width:42px;height:50px;border-radius:8px;display:grid;place-items:center;font:600 .68rem/1 var(--font-body);color:var(--velvet);background:var(--velvet-soft)}
.sh-main{flex:1;min-width:0;display:grid;gap:4px}
.sh-name{overflow-wrap:anywhere}
.sh-go{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sh-more{display:flex;gap:16px;margin-top:2px}
.sh-more .btn-link{background:none;border:0;padding:4px 0;color:var(--velvet);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:.82rem}
.sh-more .sh-rm{color:var(--rose)}
.sh-used summary{cursor:pointer;font-weight:600}
.sh-h{font-size:1.1rem;margin:6px 0 0}
.sh-steps{padding-left:20px;display:grid;gap:6px;margin:10px 0}
.sh-steps code,.sh-key code{font-size:.8rem;background:var(--velvet-soft);color:var(--velvet);padding:1px 5px;border-radius:5px;overflow-wrap:anywhere}
.sh-keybtns{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.sh-key{border:1px solid var(--oak-soft);background:var(--oak-soft);border-radius:10px;padding:10px 12px;display:grid;gap:8px;margin:8px 0}
.sh-key code{font-size:.95rem;user-select:all;padding:6px 8px}
@media (max-width:700px){ .sh-go .btn{flex:1 1 100%} }
/* "From my phone" beside a form's file buttons, and its short list (10 Oct 2026). */
.sh-phone .sh-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:var(--velvet);color:#fff;font-size:.7rem;font-weight:600}
.sh-pick{display:grid;gap:6px;margin:8px 0 4px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--velvet-soft)}
.sh-pick-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;background:var(--card, #fff)}
.sh-pick-row .sh-ico{width:34px;height:40px}
.sh-pick-nm{flex:1;min-width:0;display:grid;gap:1px;overflow-wrap:anywhere}
.cbp-phone{margin-top:8px}
.cbp-phone:empty{display:none}

/* ========================================================================
   "What do you want to do?" (10 Oct 2026). A pill in the top strip opens a
   box that finds the job and takes you to it (js/app.js FIND). On a phone
   the pill is an icon beside the others; on a desktop it is a wide field at
   the left of the white strip, where a search box is looked for.
   ======================================================================== */
.find-btn{display:flex;align-items:center;gap:8px;margin-left:auto;background:none;border:0;color:#fff;
  padding:7px;border-radius:10px;cursor:pointer;font:inherit}
.find-btn svg{width:21px;height:21px}
.find-btn span,.find-btn kbd{display:none}
.find-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(min-width:921px){
  .find-btn{margin:0 auto 0 0;width:min(420px,100%);border:1px solid var(--line-strong);background:var(--bg);
    color:var(--muted);border-radius:99px;padding:8px 14px;font-size:.88rem}
  .find-btn svg{width:17px;height:17px;color:var(--velvet);flex:none}
  .find-btn span{display:inline;flex:1;text-align:left}
  .find-btn kbd{display:inline;font:600 .7rem var(--font-body);color:var(--muted);border:1px solid var(--line-strong);
    border-radius:6px;padding:1px 6px;background:#fff}
  .find-btn:focus-visible{outline-color:var(--velvet)}
}
@media (hover: hover){ .find-btn:hover{background:rgba(255,255,255,.14)} }
@media (hover: hover) and (min-width:921px){ .find-btn:hover{border-color:var(--velvet-line);background:var(--velvet-soft)} }

.finder-back{position:fixed;inset:0;z-index:55;background:rgba(43,19,48,.38);display:flex;justify-content:center;
  align-items:flex-start;padding:calc(10vh + env(safe-area-inset-top)) 16px 16px}
.finder{width:min(640px,100%);background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;max-height:76vh;overflow:hidden}
.finder-in{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.finder-in > svg{width:20px;height:20px;color:var(--velvet);flex:none}
.finder-in input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:1.02rem;background:none;color:var(--text);padding:6px 0}
.finder-in input::-webkit-search-cancel-button{display:none}
.finder-x{border:0;background:none;font-size:1.5rem;line-height:1;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:8px}
.finder-list{overflow-y:auto;padding:6px}
.finder-h{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 10px 4px}
.finder-item{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;width:100%;
  text-align:left;border:0;background:none;border-radius:12px;padding:9px 10px;cursor:pointer;font:inherit;color:var(--text)}
.finder-t{font-weight:600;font-size:.95rem}
.finder-w{grid-row:2;font-size:.8rem;color:var(--muted)}
.finder-item > svg{grid-row:1/3;grid-column:2;width:16px;height:16px;color:var(--velvet);opacity:0}
.finder-item.on{background:var(--velvet-soft)}
.finder-item.on > svg{opacity:1}
.finder-item:focus-visible{outline:2px solid var(--velvet);outline-offset:-2px}
.finder-none{color:var(--muted);padding:14px 10px;margin:0;font-size:.9rem}
@media(max-width:560px){
  .finder-back{padding-top:calc(8px + env(safe-area-inset-top));padding-left:8px;padding-right:8px}
  .finder{max-height:calc(100vh - 24px)}
}

/* Payroll → Overview: the month-end checklist (10 Oct 2026). */
.pw-ck-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.pw-ck-list li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;
  border:1px solid var(--line);border-radius:12px;background:#fff}
.pw-ck-list li.next{border-color:var(--velvet-line);background:var(--velvet-soft)}
.pw-ck-mark{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;
  border:2px solid var(--line-strong);color:var(--muted);background:#fff}
.pw-ck-done .pw-ck-mark{background:var(--hillside-soft);border-color:var(--hillside);color:var(--hillside-deep)}
.pw-ck-warn .pw-ck-mark{background:var(--oak-soft);border-color:var(--oak);color:var(--oak)}
.pw-ck-skip .pw-ck-mark,.pw-ck-unknown .pw-ck-mark{border-style:dashed}
.pw-ck-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pw-ck-txt b{font-size:.93rem}
.pw-ck-txt span{font-size:.82rem;color:var(--muted)}
.pw-ck-done .pw-ck-txt b{color:var(--muted)}
.pw-ck-skip{opacity:.75}
.pw-ck-act{display:flex;justify-content:flex-end}
@media(max-width:600px){
  .pw-ck-list li{grid-template-columns:28px minmax(0,1fr)}
  .pw-ck-act{grid-column:2;justify-content:flex-start}
}
/* On a phone the top strip has no room for one more icon, so the box is
   opened from the top of the slide-in menu (More / ☰) instead. */
.side-find{display:none}
@media(max-width:920px){
  .side-find{display:flex;align-items:center;gap:10px;margin:12px 14px 4px;padding:11px 14px;border-radius:12px;
    border:1px solid var(--line-strong);background:var(--bg);color:var(--muted);font:inherit;font-size:.92rem;cursor:pointer;text-align:left}
  .side-find svg{width:18px;height:18px;color:var(--velvet);flex:none}
  .side-find span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.86rem}
  .side-find{padding:10px 12px;gap:8px}
}
@media(max-width:560px){ .brandbar .find-btn{display:none} }

/* What each page is for, under its title, and where to go instead
   (10 Oct 2026, js/app.js PURPOSE). */
.topbar .purpose{color:var(--muted);font-size:.9rem;margin:4px 0 0;max-width:62ch;line-height:1.45}
.topbar .looking{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:8px 0 0;padding:6px 12px;
  border-radius:10px;background:var(--velvet-soft);color:var(--velvet);font-size:.84rem}
.topbar .looking .link{font-weight:700;color:var(--velvet);padding:0}

/* Home: "Things I can do" - six buttons by role (views.js quickFor). */
.qt-h{margin:0 0 10px}
.quick-grid.qt-six{grid-template-columns:repeat(3,minmax(0,1fr))}
.quick-tile{position:relative;text-align:center;line-height:1.2}
.qt-badge{position:absolute;top:6px;right:8px;min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  background:var(--oak);color:#fff;font-size:.68rem;font-weight:700;display:grid;place-items:center}
/* "My Leave", "My Claims", "My Payslips" (10 Oct 2026) stay on one line on a
   narrow phone: a touch smaller there rather than wrapping. */
.bottom-nav button{white-space:nowrap}
@media(max-width:400px){ .bottom-nav button{font-size:.62rem;letter-spacing:-.01em} }

/* The bell and the megaphone: a red number, and a panel under the button
   instead of a page (js/topbar.js, 10 Oct 2026). */
.bell .nb{position:absolute;top:0;right:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#d92d20;color:#fff;
  font:600 10.5px/17px var(--font-body);text-align:center;box-shadow:0 0 0 2px var(--velvet);pointer-events:none}
@media (min-width:921px){ .brandbar .bell .nb{box-shadow:0 0 0 2px #fff} }
.tb-panel{position:fixed;z-index:60;width:380px;max-width:calc(100vw - 24px);max-height:min(72vh,560px);display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}
.tb-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.tb-head h3{margin:0;font-size:1.05rem}
.tb-x{background:none;border:0;font-size:1.4rem;line-height:1;color:var(--muted, #6b6070);cursor:pointer;padding:2px 6px;border-radius:8px}
.tb-body{overflow-y:auto;overscroll-behavior:contain}
.tb-empty{padding:16px;margin:0}
.tb-item{display:grid;gap:3px;width:100%;text-align:left;padding:11px 16px;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;color:inherit}
button.tb-item{cursor:pointer}
.tb-item.unread,.tb-ann.unread{background:var(--velvet-soft)}
.tb-item.unread .tb-text,.tb-ann.unread .tb-text{font-weight:600}
.tb-text{font-size:.9rem;line-height:1.4;overflow-wrap:anywhere}
.tb-when{font-size:.75rem;color:var(--muted, #6b6070)}
.tb-ann{border-bottom:1px solid var(--line)}
.tb-ann summary{display:grid;gap:3px;padding:11px 36px 11px 16px;cursor:pointer;list-style:none;position:relative}
.tb-ann summary::-webkit-details-marker{display:none}
.tb-ann summary::after{content:"▾";position:absolute;right:16px;top:12px;color:var(--velvet);transition:transform .15s}
.tb-ann[open] summary::after{transform:rotate(180deg)}
.tb-annbody{margin:0;padding:0 16px 14px;white-space:pre-wrap;font-size:.88rem;line-height:1.5}
.tb-new{color:#d92d20;font-weight:600}
.tb-foot{display:block;width:100%;padding:12px 16px;border:0;background:none;color:var(--velvet);font:600 .85rem var(--font-body);text-align:left;cursor:pointer}
@media (hover:hover){ button.tb-item:hover,.tb-ann summary:hover,.tb-foot:hover{background:var(--velvet-soft)} .tb-x:hover{background:var(--velvet-soft)} }
/* The bell's own list of tasks still to do (10 Oct 2026). */
.tb-sec{display:flex;align-items:center;gap:6px;padding:10px 16px 6px;font:600 .72rem var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted, #6b6070);background:var(--card)}
.tb-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#d92d20;color:#fff;font-size:.68rem;letter-spacing:0}
.tb-task{border-left:3px solid var(--velvet)}
.tb-task.late{border-left-color:#d92d20}
.tb-task.waiting{border-left-color:var(--line)}
.tb-task.waiting .tb-text{color:var(--muted, #6b6070)}
.tb-late{color:#d92d20}

/* ========================================================================
   Joiner / leaver checklists (10 Oct 2026, js/checklist.js): Employees →
   the person, Home, and Payroll → Reports → Joiners & leavers.
   ======================================================================== */
.hrc-person + .hrc-person{margin-top:14px}
.hrc-ph{margin-bottom:6px}
.hrc-ph span{color:var(--muted);font-size:.85rem}
.hrc-list + .hrc-list{margin-top:14px}
.hrc-lh{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.hrc-lh > span{display:flex;gap:6px;flex-wrap:wrap}
.hrc-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.hrc-step{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.hrc-mk{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-strong);display:grid;place-items:center;font-size:.75rem;font-weight:700;color:var(--muted)}
.hrc-step.d .hrc-mk{background:var(--hillside-soft);border-color:var(--hillside);color:var(--hillside-deep)}
.hrc-step.o .hrc-mk{background:var(--rose-soft);border-color:var(--rose);color:var(--rose)}
.hrc-step.n .hrc-mk{border-style:dashed}
.hrc-step.l .hrc-mk{font-size:.65rem;border-style:dashed}
.hrc-step.d .hrc-t,.hrc-step.n .hrc-t{color:var(--muted)}
.hrc-t{font-weight:600;font-size:.93rem}
.hrc-s{font-size:.82rem;color:var(--muted);margin-top:2px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.hrc-hint{font-size:.8rem;color:var(--muted);margin-top:3px}
.hrc-hold{font-size:.8rem;margin-top:5px;padding:6px 10px;border-radius:9px;background:var(--oak-soft);color:var(--oak)}
.hrc-hold a{color:var(--oak);font-weight:700}
.hrc-legal{font-size:.78rem;color:var(--muted)}
.hrc-due{font-size:.82rem}
.hrc-dates{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:6px;align-items:center}
.hrc-date{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text);margin:0}
.hrc-date input{width:auto;padding:4px 8px;font-size:.82rem}
.hrc-acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center}
.hrc-go{font-size:.75rem;font-weight:700;border:1px solid var(--velvet-line);color:var(--velvet);border-radius:99px;padding:3px 10px;white-space:nowrap;text-decoration:none}
.hrc-chip{font-size:.72rem;font-weight:700;border-radius:99px;padding:2px 8px;white-space:nowrap}
.hrc-chip.late{background:var(--rose-soft);color:var(--rose)}
.hrc-chip.soon{background:var(--oak-soft);color:var(--oak)}
.hrc-chip.ok{background:var(--hillside-soft);color:var(--hillside-deep)}
.hrc-late-t{color:var(--rose)}
.hrc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 8px}
.hrc-tabs button{border:1px solid var(--line-strong);background:#fff;border-radius:99px;padding:5px 12px;font:inherit;font-size:.84rem;cursor:pointer;color:var(--muted)}
.hrc-tabs button.on{background:var(--velvet-soft);border-color:var(--velvet-line);color:var(--velvet);font-weight:700}
@media (hover: hover){ .hrc-go:hover{background:var(--velvet-soft)} }
@media(max-width:620px){
  .hrc-step{grid-template-columns:24px minmax(0,1fr)}
  .hrc-acts{grid-column:2;justify-content:flex-start}
}

/* Company Bills: a PDF drawn page by page (voucher, invoice preview, email
   preview) - fits a phone, unlike an <iframe> (13 Oct 2026). */
.cbp-pdf{display:flex;flex-direction:column;gap:8px;max-height:72vh;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:8px;border:1px solid var(--cb-line);border-radius:10px;background:var(--cb-bg);width:100%}
.cbp-pdf .cbp-small{margin:20px auto;text-align:center}
.cbp-pdfpage{display:block;width:100%;height:auto;background:#fff;border-radius:4px;box-shadow:0 1px 4px rgba(43,19,48,.12)}
.cbp-pdf-mail{max-height:46vh;margin-bottom:10px}
.cbp-pdfhead{margin:8px 0 4px;font-weight:600}
.cbp-preview .cbp-pdf{border:0;border-radius:0;max-height:68vh;align-self:stretch}
@media (max-width:700px){ .cbp-preview .cbp-pdf{max-height:46vh} }

/* ---- Branch picker + Branch Expenses (13 Oct 2026) ---------------------
   Tick one branch, or several with an optional share each; a blank share
   takes an even part of what is left. */
.bxp{display:flex;flex-direction:column;gap:2px;margin:4px 0 10px;border:1px solid var(--line);border-radius:12px;padding:6px 10px;background:var(--card)}
.bxp-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;min-height:36px}
.bxp-tick{display:flex;align-items:center;gap:9px;margin:0;font-weight:500;font-size:.9rem;color:var(--text);text-transform:none;letter-spacing:0;cursor:pointer}
.bxp-tick input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--velvet)}
.bxp-pctw{display:none;align-items:center;gap:3px;color:var(--muted);font-size:.85rem}
.bxp.multi .bxp-row.on .bxp-pctw{display:inline-flex}
.bxp-pct{width:64px !important;height:32px;padding:4px 8px !important;text-align:right;margin:0 !important}
.bxp-amt{font-size:.8rem;color:var(--muted);min-width:0;text-align:right;white-space:nowrap}
.bxp-note{margin:4px 0 2px;font-size:.8rem;color:var(--muted)}
.bxp-note:empty{display:none}
.bxp-note.bxp-err{color:var(--rose)}
.bxp-add{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-top:4px;border-top:1px dashed var(--line);margin-top:4px}
.bxp-addform{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.bxp-addform[hidden]{display:none}
.bxp-addform input{height:32px;margin:0 !important;width:auto}
.bxp-code{max-width:90px}
@media (max-width:420px){ .bxp-row{grid-template-columns:minmax(0,1fr) auto} .bxp-amt{grid-column:1 / -1;text-align:left;padding-left:27px} }

.cbp-bybranch{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;width:100%;padding-top:8px;margin-top:4px;border-top:1px solid var(--cb-line)}
.cbp-brt{font-size:12px;color:var(--cb-muted)}
.cbp-brt b{color:var(--cb-ink);font-weight:600}
.cbp-bybranch .cbp-link{margin-left:auto}
.cbp-payee-wait{width:100%;margin-top:8px;padding:10px 12px;border:1px solid #e0b252;background:#fff8e6;border-radius:10px;display:grid;gap:8px;color:#5a3d00}
.cbp-pw-row{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px dashed #e8cf96}
.cbp-pw-btns{display:flex;gap:10px;align-items:center}

/* ---- Branch Expenses, the monthly report (20 Oct 2026, the approved
   "polished" design): a white report on the soft page, plum accents, thin
   dividers, one lavender total, the branch comparison as the main thing. ---- */
.bxr,.bxr-modal,#bx-printdoc{--bxr-plum:var(--velvet-mid);--bxr-soft:#f3edf7;--bxr-sub:#665971;--bxr-warn:#7a5418}
.bxr{display:flex;flex-direction:column;gap:18px}
.bxr-loading{color:var(--muted);padding:24px 4px;margin:0}
.bxr-fail{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--card);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.bxr-fail p{margin:0}
.bxr-controls{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end}
.bxr-ctl{display:flex;flex-direction:column;gap:4px;min-width:0}
.bxr-lbl{display:block;margin:0;font-size:12px;font-weight:500;color:var(--bxr-sub);letter-spacing:0}
.bxr-month{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bxr-sq{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);color:var(--bxr-plum)}
.bxr-sq .lu{width:18px;height:18px}
.bxr-mpick{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);margin:0;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;letter-spacing:0}
.bxr-mpick input{position:absolute;inset:0;opacity:0;cursor:pointer;padding:0;border:0;width:100%;height:100%}
.bxr-mpick:focus-within{outline:2px solid var(--velvet);outline-offset:2px}
#bx-scope{min-height:40px;padding:8px 12px;border-radius:8px;font-size:14px;width:auto;min-width:240px;max-width:100%;background:var(--card)}
.bxr-acts{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.bxr-btn{min-height:40px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:8px;background:transparent;color:var(--bxr-plum);font-size:13px;font-weight:600}
.bxr-btn:hover{background:var(--card)}
.bxr-link{border:0;background:none;padding:6px 0;color:var(--bxr-plum);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:left}
.bxr-link:hover{text-decoration:underline;text-underline-offset:3px}
.bxr :is(button,select,a,summary,[tabindex]):focus-visible,.bxr-modal :is(button,a):focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.bxr-paper{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px;box-shadow:0 4px 18px rgba(36,21,44,.03);transition:opacity .15s}
.bxr-paper.bxr-stale{opacity:.55}
.bxr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.bxr-kicker{font-size:10px;letter-spacing:1.8px;font-weight:600;color:var(--bxr-plum);margin-bottom:7px}
.bxr-title{font:500 29px/1.25 var(--font-head);letter-spacing:-.4px;margin:0;color:var(--text)}
.bxr-scope{padding:5px 9px;background:var(--bg);border-radius:5px;font-size:12px;color:var(--bxr-sub);max-width:100%;overflow-wrap:anywhere}
.bxr-stats{display:grid;grid-template-columns:1.25fr 1fr 1fr;align-items:center;margin:26px 0 14px;padding-bottom:23px;border-bottom:1px solid var(--line)}
.bxr-stat{display:flex;flex-direction:column;padding:8px 23px;border-right:1px solid var(--line);min-width:0}
.bxr-stat:last-child{border-right:0}
.bxr-stat.bxr-main{padding:18px 20px;background:var(--bxr-soft);border:0;border-radius:9px;margin-right:8px}
.bxr-slbl{font-size:12px;color:var(--bxr-sub)}
.bxr-val{font-size:26px;font-weight:600;letter-spacing:-.8px;margin:4px 0 5px;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.bxr-main .bxr-val{font-size:32px;color:var(--bxr-plum)}
.bxr-cap{font-size:12px;color:var(--bxr-sub)}
.bxr-issues{display:flex;flex-direction:column;gap:4px;margin:0 0 22px}
.bxr-issue{margin:0;font-size:12.5px;color:var(--bxr-warn);padding-left:14px;position:relative}
.bxr-issue::before{content:"\2022";position:absolute;left:2px}
.bxr-issue.strong{font-weight:600}
.bxr-issue .bxr-link{color:var(--bxr-warn);font-size:12.5px;padding:2px 0;margin-left:8px;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.bxr-sec{padding-top:22px;border-top:1px solid var(--line);margin-top:24px}
.bxr-stats+.bxr-sec,.bxr-issues+.bxr-sec{border-top:0;padding-top:0;margin-top:0}
.bxr-sechead{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.bxr-sechead h3{font-family:var(--font-body);font-size:15px;font-weight:600;margin:0;color:var(--text);letter-spacing:0}
.bxr-small{font-size:12px;color:var(--bxr-sub)}
.bxr-scroll{overflow-x:auto;margin:12px 0 0;-webkit-overflow-scrolling:touch;position:relative}
.bxr-tbl{border-collapse:collapse;width:100%;font-size:13px}
.bxr-tbl th,.bxr-tbl td{padding:15px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.bxr-tbl thead th{font-size:11px;font-weight:500;color:var(--bxr-sub);background:var(--bg);padding:12px 10px;vertical-align:bottom}
.bxr-tbl .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.bxr-tbl tbody th{font-weight:400}
.bxr-tbl tbody tr:hover>*{background:var(--bg)}
.bxr-tbl td.bxr-rec{font-weight:600;color:var(--bxr-plum)}
.bxr-tbl tfoot th,.bxr-tbl tfoot td{background:var(--bxr-soft);font-weight:600;font-size:12.5px;padding:14px 10px;border-bottom:0}
.bxr-none{color:var(--bxr-sub)}
.bxr-unit{border:0;background:none;padding:0;font:inherit;font-weight:600;font-size:13px;color:var(--text);cursor:pointer;text-align:left;min-height:24px}
.bxr-unit:hover{color:var(--bxr-plum);text-decoration:underline;text-underline-offset:3px}
.bxr-usub{display:block;font-size:11.5px;color:var(--bxr-sub);margin-top:2px}
.bxr-miss{display:block;font-size:11px;color:var(--bxr-warn);font-weight:500}
.bxr-foot{font-size:11.5px;color:var(--bxr-sub);margin:11px 0 0}
.bxr-cats{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;row-gap:17px;margin-top:19px}
.bxr-cat{min-width:0}
.bxr-cattop{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:13px;margin-bottom:6px}
.bxr-cattop span{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}
.bxr-catname{border:0;background:none;padding:2px 0;font:inherit;font-size:13px;color:var(--text);cursor:pointer;text-align:left;min-width:0;overflow-wrap:anywhere}
.bxr-catname:hover{color:var(--bxr-plum);text-decoration:underline;text-underline-offset:3px}
.bxr-track{height:4px;background:var(--bg);border-radius:2px;overflow:hidden}
.bxr-fill{height:4px;background:var(--bxr-plum);opacity:.55;border-radius:2px}
.bxr-aside{margin-top:20px;padding-top:14px;border-top:1px dashed var(--line)}
.bxr-aside h4{font-family:var(--font-body);font-size:13px;font-weight:600;margin:0 0 8px;letter-spacing:0}
.bxr-aside .bxr-small{margin:4px 0 0}
.bxr-gap{margin-top:12px}
.bxr-empty{color:var(--bxr-sub);padding:18px 0;margin:0}
.bxr-basis{border-top:1px solid var(--line);margin-top:26px;padding-top:10px}
.bxr-basis summary{font-size:12.5px;color:var(--bxr-plum);font-weight:600;padding:8px 0;cursor:pointer;width:max-content;max-width:100%}
.bxr-basistext{display:flex;flex-direction:column;gap:8px;max-width:72ch;padding:4px 0 6px}
.bxr-basistext p{font-size:12.5px;color:var(--bxr-sub);margin:0;line-height:1.55}
.bxr-basistext b{color:var(--text);font-weight:600}
/* The transactions behind a figure, and one transaction. */
.modal.bxr-modal{max-width:820px}
.bxr-dsum{font-size:13px;padding:12px;background:var(--bxr-soft);border-radius:8px;margin:0 0 14px;line-height:1.6}
.bxr-txs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.bxr-tx{display:grid;grid-template-columns:minmax(0,1fr) auto 128px;gap:6px 14px;align-items:center;width:100%;padding:12px 6px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;color:var(--text);cursor:pointer}
.bxr-tx:hover{background:var(--bg)}
.bxr-tx .bxr-chip{justify-self:start}
.bxr-txmain{display:flex;flex-direction:column;min-width:0;gap:1px}
.bxr-txmain b{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.bxr-txamt{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums;white-space:nowrap}
.bxr-plum{color:var(--bxr-plum)}
.bxr-chip{display:inline-block;padding:3px 8px;border-radius:5px;background:var(--bxr-soft);color:var(--bxr-plum);font-size:11.5px;font-weight:600;white-space:nowrap}
.bxr-chip.good{background:var(--hillside-soft);color:#3f5a2a}
.bxr-chip.warn{background:#fbf1de;color:var(--bxr-warn)}
.bxr-back{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:4px 0 10px;color:var(--bxr-plum);font-size:13px;font-weight:600;cursor:pointer;text-align:left}
.bxr-back .lu{width:16px;height:16px;flex-shrink:0}
.bxr-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;margin:0}
.bxr-f{padding:9px 0;border-bottom:1px solid var(--line);min-width:0}
.bxr-f dt{font-size:11.5px;color:var(--bxr-sub)}
.bxr-f dd{margin:2px 0 0;font-size:14px;overflow-wrap:anywhere}
.bxr-f code{font-size:12px;word-break:break-all}
.bxr-h4{font-family:var(--font-body);font-size:13px;font-weight:600;margin:16px 0 6px;letter-spacing:0}
.bxr-docs{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.bxr-docs a{font-size:13px;font-weight:600;padding:6px 0;color:var(--bxr-plum)}
.bxr-hist{margin:0;padding-left:18px;font-size:13px;color:var(--bxr-sub)}
.bxr-check{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--text);margin:10px 0 0;font-weight:400}
.bxr-check input{width:18px;height:18px;accent-color:var(--velvet)}
@media (max-width:700px){
  .bxr-paper{padding:18px 16px}
  .bxr-controls{flex-direction:column;align-items:stretch}
  #bx-scope{width:100%;min-width:0}
  .bxr-acts{margin-left:0}
  .bxr-acts .bxr-btn{flex:1}
  .bxr-title{font-size:25px}
  .bxr-stats{grid-template-columns:1fr;gap:8px;padding-bottom:16px;margin-top:18px}
  .bxr-stat,.bxr-stat.bxr-main{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;margin:0;border:0;padding:10px 12px;gap:2px 10px}
  .bxr-val{font-size:22px;margin:0}
  .bxr-main .bxr-val{font-size:26px}
  .bxr-cap{display:none}
  .bxr-main .bxr-cap{display:block;width:100%}
  .bxr-cats{grid-template-columns:1fr}
  .bxr-tbl{min-width:620px}
  .bxr-tbl th:first-child{position:sticky;left:0;z-index:1;background:var(--card);box-shadow:1px 0 0 var(--line);max-width:150px}
  .bxr-tbl thead th:first-child{background:var(--bg)}
  .bxr-tbl tfoot th:first-child{background:var(--bxr-soft)}
  .bxr-fields{grid-template-columns:1fr}
  .bxr-tx{grid-template-columns:minmax(0,1fr) auto}
  .bxr-tx .bxr-chip{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.bxr-paper{transition:none}}
/* Print / PDF: the report alone, no menus or buttons (the browser's print window). */
#bx-printdoc{display:none}
@media print{
  body.bx-printing>*:not(#bx-printdoc){display:none !important}
  body.bx-printing>#bx-printdoc{display:block !important}
  body.bx-printing{background:#fff}
  #bx-printdoc{font:10pt/1.45 var(--font-body);color:#111;background:#fff}
  #bx-printdoc .bxp-tx td:first-child{white-space:nowrap}
  #bx-printdoc .bxr-kicker{color:#470054}
  #bx-printdoc h1{font:600 17pt/1.2 var(--font-head);margin:2pt 0 4pt}
  #bx-printdoc h2{font:600 11.5pt/1.3 var(--font-body);margin:16pt 0 6pt;break-after:avoid;page-break-after:avoid}
  #bx-printdoc h2 small{font-weight:400;font-size:8.5pt;color:#555;margin-left:6pt}
  #bx-printdoc .bxp-h p{font-size:9pt;color:#444;margin:0}
  #bx-printdoc .bxp-stats{width:100%;border-collapse:collapse;margin:10pt 0 6pt}
  #bx-printdoc .bxp-stats td{border:1px solid #ccc;padding:6pt 8pt;width:33%}
  #bx-printdoc .bxp-stats span{display:block;font-size:8pt;color:#555}
  #bx-printdoc .bxp-stats b{font-size:13pt;font-variant-numeric:tabular-nums}
  #bx-printdoc .bxp-issues p{margin:2pt 0;font-size:9pt;color:#5b3f10}
  #bx-printdoc .bxr-tbl{font-size:8.5pt;width:100%;min-width:0;border-collapse:collapse}
  #bx-printdoc .bxr-tbl th,#bx-printdoc .bxr-tbl td{padding:4pt 5pt;border-bottom:1px solid #ccc;background:none;box-shadow:none;position:static}
  #bx-printdoc .bxr-tbl thead{display:table-header-group}
  #bx-printdoc .bxr-tbl tfoot{display:table-row-group}
  #bx-printdoc .bxr-tbl tfoot th,#bx-printdoc .bxr-tbl tfoot td{border-top:1.5px solid #888;font-weight:700}
  #bx-printdoc .bxr-tbl tr{break-inside:avoid;page-break-inside:avoid}
  #bx-printdoc .bxr-tbl small{color:#555}
  #bx-printdoc .bxr-miss,#bx-printdoc .bxr-usub{font-size:7.5pt}
  #bx-printdoc .bxr-basistext{max-width:none}
  #bx-printdoc .bxr-basistext p{font-size:8pt;color:#333}
  @page{margin:14mm}
}

/* Company Bills: a payment's attachments in its Edit window (13 Oct 2026). */
.cbp-atts-wrap{margin-top:10px}
.cbp-atts{list-style:none;margin:6px 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.cbp-atts li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--cb-line);border-radius:10px;background:var(--cb-panel)}
.cbp-attname{display:inline-flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font-size:13px}
.cbp-attname svg{width:15px;height:15px;flex:none}
.cbp-attbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cbp-attadd{cursor:pointer}

/* The receipt crop (13 Oct 2026): over everything, like the file viewer. */
.crop-viewer{position:fixed;inset:0;z-index:61;background:#1d1220;display:flex;flex-direction:column;color:#fff;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.crop-viewer .cv-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.06)}
.crop-viewer .sv-title{flex:1;font-weight:600;color:#fff}
.crop-viewer .sv-x{color:#fff}
.cv-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.cv-frame{position:relative}
.cv-img{display:block;border-radius:4px}
.cv-svg{position:absolute;inset:0;touch-action:none}
.cv-shade{fill:rgba(0,0,0,.45)}
.cv-poly{fill:none;stroke:#fff;stroke-width:2}
.cv-h{fill:rgba(255,255,255,.25);stroke:#fff;stroke-width:2.5;cursor:grab}
.cv-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px}
.cv-tools .btn.ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.cv-msg{color:rgba(255,255,255,.8) !important}

/* My Claims on a phone (13 Oct 2026: "Messy, pls fix it"): a monthly bill
   and an event each read across the full width, with their buttons in one
   row underneath - not squeezed beside a name broken onto many lines. */
@media (max-width:640px){
  .bills-card .list .bill-item,.events-card .list .ev-item{flex-wrap:wrap;align-items:flex-start;row-gap:10px}
  .bills-card .bill-item .main{flex:1 1 calc(100% - 40px)}
  .events-card .ev-item .main{flex:1 1 100%}
  .bills-card .bill-item .bill-mark{margin-top:1px}
  .bills-card .bill-item .bill-acts,.events-card .ev-item .ev-side{flex:1 1 100%;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;justify-content:flex-start;text-align:left}
  .bills-card .bill-item .bill-acts{padding-left:34px}
  .bills-card .bill-item .bill-acts .btn:not(.iconbtn),.events-card .ev-item .ev-side .btn:not(.iconbtn){flex:1 1 0;min-width:0;white-space:nowrap;justify-content:center}
  .bills-card .bill-item .bill-acts .iconbtn,.events-card .ev-item .ev-side .iconbtn{flex:none}
}

/* My Claims: each section folds (13 Oct 2026). */
.cl-fold > summary.cl-sum{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cl-fold > summary.cl-sum::-webkit-details-marker{display:none}
.cl-fold > summary.cl-sum::after{content:"";width:9px;height:9px;flex:none;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:-4px 6px 0 0;transition:transform .15s}
.cl-fold[open] > summary.cl-sum::after{transform:rotate(-135deg);margin-top:4px}
.cl-head{display:flex;flex-direction:column;gap:2px;min-width:0}
.cl-head h2{margin:0}
.cl-cap{font-size:.82rem;color:var(--muted)}
.cl-body{margin-top:12px}
.cl-fold > summary.cl-sum:focus-visible{outline:2px solid var(--velvet);outline-offset:4px;border-radius:8px}

/* Earn TOIL (14 Oct 2026): earning ADDS days, so it is green and says "+". */
.te-card{border:1.5px solid color-mix(in srgb,var(--hillside-deep) 45%,transparent)}
.te-head{display:flex;gap:12px;align-items:flex-start}
.te-head h2{margin:0}
.te-head .hint{margin:2px 0 0}
.te-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border-radius:50%;background:var(--hillside-soft,#e7f2ea);color:var(--hillside-deep)}
.te-ico svg{width:18px;height:18px}
.te-note{margin:12px 0;padding:9px 12px;border-radius:10px;background:var(--hillside-soft,#e7f2ea);color:var(--hillside-deep);font-size:.88rem}
.te-bar{align-items:center;gap:10px;flex-wrap:wrap}
.btn.te-go{background:var(--hillside-deep);border-color:var(--hillside-deep);color:#fff}
.te-list{margin-top:10px}
.te-list .side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.te-pick{gap:8px;align-items:center;flex-wrap:wrap}
.te-pick input[type=date]{width:auto;margin:0}
.te-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.te-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 10px;border-radius:999px;background:var(--hillside-soft,#e7f2ea);color:var(--hillside-deep);font-size:.85rem}
.te-chip button{border:0;background:none;color:inherit;font-size:1.1rem;line-height:1;cursor:pointer;padding:0 4px}
.te-sum{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:10px;margin-top:4px;border-top:1px solid var(--line);font-size:.9rem}
.te-sum:empty{display:none}
.te-sum b{color:var(--hillside-deep)}
.te-apr{border:1.5px solid color-mix(in srgb,var(--hillside-deep) 45%,transparent)}
.te-req{padding:12px 0;border-top:1px solid var(--line)}
.te-req .t{font-weight:600;margin-top:6px}
.te-req .s{color:var(--muted);font-size:.85rem;margin-top:2px}
.te-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;background:var(--hillside-soft,#e7f2ea);color:var(--hillside-deep);font-size:.78rem;font-weight:600}
.te-tag svg{width:13px;height:13px}
.te-plus{font-size:1.25rem;font-weight:700;color:var(--hillside-deep)}
.te-acts{gap:8px;margin-top:10px}
.te-acts .btn{flex:1}
.te-link{border:0;background:none;padding:0;color:var(--velvet);text-decoration:underline;font:inherit;cursor:pointer}

/* Staff details in Employees (14 Oct 2026): from the form and Payroll, edited in place. */
.sr-src{display:block;font-style:normal;font-weight:400;font-size:.72rem;color:var(--muted)}
.sr-edit{display:flex;flex-direction:column;gap:3px;margin:0 0 8px;font-size:.8rem;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500}
.sr-edit input,.sr-edit select,.sr-edit textarea{margin:0;font-size:.9rem}
.sr-pend{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin:0 0 10px;border-radius:10px;background:#fdf3e1;color:#7a4a00}
.sr-pend > svg{width:18px;height:18px;flex:none;margin-top:2px}
.sr-pend span{display:block;font-size:.85rem;margin-top:2px}
.sr-apr .te-req .s b{color:var(--text)}
.sr-certs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.sr-cert{display:inline-flex;align-items:center;gap:2px}
.sr-x{border:0;background:none;color:var(--muted);font-size:1.2rem;line-height:1;cursor:pointer;padding:2px 6px}
.sr-upload{cursor:pointer}
.sr-upload.busy{opacity:.6;pointer-events:none}
.sr-docs{margin-top:10px}
.sr-doc{padding:8px 0;border-top:1px solid var(--line)}
.sr-doc:first-of-type{border-top:0}
.sr-doc-h{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:.88rem}

/* Employees window in folding sections (14 Oct 2026: "This whole session very messy"). */
.ep-tip{margin:4px 0 10px}
.ep-sec{border:1px solid var(--line);border-radius:14px;margin:0 0 10px;background:var(--card)}
.ep-sec > summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer}
.ep-sec > summary::-webkit-details-marker{display:none}
.ep-sec > summary::after{content:"";width:9px;height:9px;flex:none;margin-left:auto;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-top:-4px}
.ep-sec[open] > summary::after{transform:rotate(-135deg);margin-top:4px}
.ep-sec[open] > summary{border-bottom:1px solid var(--line)}
.ep-ico{display:inline-flex;width:32px;height:32px;flex:none;align-items:center;justify-content:center;border-radius:10px;background:var(--velvet-soft);color:var(--velvet)}
.ep-ico svg{width:17px;height:17px}
.ep-st{display:flex;flex-direction:column;min-width:0}
.ep-st b{font-size:.95rem}
.ep-st small{color:var(--muted);font-size:.78rem}
.ep-body{padding:12px 14px 14px}
.ep-body > label:first-child{margin-top:0}
.ep-body .emp-info{margin:0;border:0;padding:0;background:none}
.sf-gate{display:flex;gap:10px;align-items:flex-start}
.sf-gate > svg{width:18px;height:18px;flex:none;margin-top:2px}

/* My Profile = who they are, My details, then the rest folded (14 Oct 2026). */
.pf-dhead{align-items:flex-start;gap:10px;margin-bottom:10px}
.pf-dhead h2{margin:0}
.pf-folds{margin-top:4px}
.pf-sec .list .item:last-child{border-bottom:0}
.pf-acct{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.pf-acct .btn{flex:1 1 180px}

/* My details: one page in sections, compact boxes (14 Oct 2026) */
.sf-sec{padding:14px 0 4px;border-top:1px solid var(--line)}
.sf-sec:first-child{border-top:0;padding-top:4px}
.sf-sec-h{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:.98rem;color:var(--velvet)}
.sf-sec-h svg{width:18px;height:18px}
.sf-grid{display:grid;grid-template-columns:1fr;gap:0 16px}
@media (min-width:720px){.sf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sf-grid > .sf-prev,.sf-grid > .sf-info,.sf-grid > p,.sf-grid > div:has(> textarea){grid-column:1/-1}
.sf-card .fld{margin:0 0 10px}
.sf-card .fld label{font-size:.82rem;margin-bottom:3px}
.sf-card .fld input,.sf-card .fld select,.sf-card .fld textarea{padding:7px 10px;font-size:.9rem;min-height:0;border-radius:9px}
.sf-card .fld textarea{min-height:58px}
.sf-card .fld-help{font-size:.75rem;margin-top:3px}
.sf-card .sf-prev{margin:6px 0 10px;padding:10px 12px}
.sf-card .sf-info{margin:0 0 10px;padding:8px 11px;font-size:.85rem}
.sf-sec:last-child .sf-grid > .sf-prev{grid-column:auto}
.emp-pref{font-weight:500;color:var(--muted)}

/* Register a new employee: one page, compact (14 Oct 2026) */
.wz-one .fld{margin:0 0 10px}
.wz-one .fld label{font-size:.82rem;margin-bottom:3px}
.wz-one .fld input,.wz-one .fld select{padding:7px 10px;font-size:.9rem;min-height:0;border-radius:9px}
.wz-one .fld-help{font-size:.75rem;margin-top:3px}

/* Employees edit window: bigger, every section open, two per row (14 Oct 2026) */
.modal.wide.ep-modal{max-width:1180px;width:calc(100vw - 32px)}
.ep-grid{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
@media (min-width:900px){.ep-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ep-grid > [data-ep-sec="details"]{grid-column:1/-1}
.ep-flat{margin:0}
.ep-sh{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line)}
.ep-flat .ep-body{padding:10px 14px 12px}
.ep-flat label{font-size:.82rem;margin:8px 0 3px}
.ep-flat input:not([type=checkbox]):not([type=radio]),.ep-flat select{padding:7px 10px;font-size:.9rem;min-height:0;border-radius:9px}

/* Leave retrievals (14 Oct 2026) */
.lvret-line{display:flex;gap:6px;align-items:flex-start;margin:6px 0 0;font-size:.82rem;color:var(--muted)}
.lvret-line svg{width:15px;height:15px;flex:none;margin-top:2px}
.lvret-line.pend{color:var(--oak)}
.lvret-line.ok{color:var(--hillside-deep)}

/* X-ray Referral (15 Oct 2026) */
.xr-card{max-width:860px}
.xr-kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:0 0 14px}
.xr-kind{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;margin:0}
.xr-kind.on{border-color:var(--velvet);background:var(--velvet-soft)}
.xr-kind input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--velvet)}
.xr-kind span{display:flex;flex-direction:column;gap:2px}
.xr-kind small{color:var(--muted);font-size:.78rem}
.xr-miss{font-style:normal;font-size:.75rem;color:var(--rose)}
.xr-grid{display:grid;grid-template-columns:1fr;gap:0 16px}
@media (min-width:720px){.xr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.xr-card .fld{margin:0 0 10px}
.xr-card .fld label{font-size:.82rem;margin-bottom:3px}
.xr-card .fld input:not([type=radio]):not([type=checkbox]),.xr-card .fld textarea{padding:7px 10px;font-size:.92rem;border-radius:9px}
.xr-sex{display:flex;gap:18px;padding:6px 0}
.xr-sex label{display:flex;align-items:center;gap:6px;margin:0;font-size:.92rem;color:var(--text)}
.xr-sex input{width:17px;height:17px;margin:0;accent-color:var(--velvet)}
.xr-tick{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:.9rem}
.xr-tick input{width:17px;height:17px;margin:0;accent-color:var(--velvet)}
.xr-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;padding:12px;border-radius:12px;background:var(--velvet-soft);margin-top:4px}
.xr-out div{display:flex;flex-direction:column;gap:2px}
.xr-out span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.xr-out b{font-variant-numeric:tabular-nums}
.xr-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center;margin-top:12px}
/* X-ray Referral on a phone: compact (15 Oct 2026, "mobile version messy") */
@media (max-width:719px){
  .xr-card{padding:14px}
  .xr-kinds{grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
  .xr-kind{padding:8px 10px;gap:8px;align-items:center}
  .xr-kind small{display:none}
  .xr-kind b{font-size:.88rem}
  .xr-miss{font-size:.7rem}
  .xr-card .fld{margin-bottom:8px}
  .xr-card .fld-help{font-size:.72rem}
  .xr-sex{padding:2px 0}
  .xr-out{grid-template-columns:1fr 1fr;gap:6px 12px;padding:10px 12px}
  .xr-out div:first-child,.xr-out div:last-child{grid-column:1/-1}
  .xr-out span{font-size:.66rem}
  .xr-out b{font-size:.9rem}
  .xr-acts{flex-direction:column-reverse;align-items:stretch;gap:6px}
  .xr-acts #xr-make{width:100%;justify-content:center}
  .xr-acts label.btn{align-self:center;border:0;background:none;box-shadow:none;font-size:.8rem;padding:4px 8px}
}
/* a receipt preview opens full screen to zoom (19 Oct 2026) */
.receipt-preview{cursor:zoom-in}

/* ---- Monthly payroll (js/payroll-flow.js, 20 Oct 2026) ---------------------
   The portal palette: plum for where you are, soft neutrals behind, white
   surfaces, dark text. Rows are compact, amounts tabular, badges small. */
.pf{display:flex;flex-direction:column;gap:14px}
.pf-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pf-month{display:flex;align-items:center;gap:6px}
.pf-month input{width:auto;padding:8px 10px;border-radius:10px}
.pf-step-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--line-strong);background:var(--card);color:var(--velvet);font-size:1.1rem}
.pf-headbtns{display:flex;gap:8px;flex-wrap:wrap}
.pf-headbtns .lu{width:16px;height:16px;vertical-align:-3px}
.pf-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.pf-steps button{display:flex;gap:8px;align-items:center;text-align:left;padding:10px;border:1px solid var(--line-strong);border-radius:12px;background:var(--card);color:var(--muted);min-width:0}
.pf-steps button[aria-current="step"]{border-color:var(--velvet);background:var(--velvet-soft);color:var(--velvet)}
.pf-steps button:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.pf-num{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg);font-size:.8rem;font-weight:600}
.pf-steps button.done .pf-num{background:var(--hillside-soft);color:var(--hillside-deep)}
.pf-steps button.warn .pf-num{background:var(--oak-soft);color:var(--oak)}
.pf-steptxt{display:flex;flex-direction:column;min-width:0}
.pf-steptxt b{font-size:.82rem;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-steptxt small{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-body{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px}
.pf-title h2{font-size:1.2rem;color:var(--text)}
.pf-title p{margin-top:2px}
.pf-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pf-filters{display:flex;gap:6px;flex-wrap:wrap;margin-right:auto}
.pf-chipbtn{padding:6px 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);font-size:.8rem;color:var(--muted)}
.pf-chipbtn.on{border-color:var(--velvet);background:var(--velvet-soft);color:var(--velvet);font-weight:600}
.pf-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px}
.pf-table{width:100%;border-collapse:collapse;font-size:.84rem;font-variant-numeric:tabular-nums}
.pf-table th{background:var(--bg);color:var(--muted);font-weight:600;font-size:.74rem;text-align:left;padding:8px 10px;white-space:nowrap}
.pf-table td{padding:9px 10px;border-top:1px solid var(--line);vertical-align:top}
.pf-table .n{text-align:right;white-space:nowrap}
.pf-table input[type=checkbox]{width:18px;height:18px;accent-color:var(--velvet)}
.pf-table .pf-own{padding:6px 8px;border-radius:8px;font-size:.82rem;min-width:9em}
.pf-sub{display:block;font-size:.74rem;color:var(--muted);font-weight:400}
.pf-dept{color:var(--muted);font-size:.78rem}
.pf-vno{font-size:.78rem;font-weight:600;color:var(--text)}
.pf-act{white-space:nowrap;text-align:right}
.pf-link{color:var(--velvet);text-decoration:underline;text-underline-offset:3px;font-size:.82rem;padding:2px 0}
.pf-link.muted{color:var(--muted)}
.pf-pill{display:inline-block;padding:2px 8px;border-radius:7px;background:var(--velvet-soft);color:var(--velvet);font-size:.72rem;white-space:nowrap}
.pf-pill.good{background:var(--hillside-soft);color:var(--hillside-deep)}
.pf-pill.warn{background:var(--oak-soft);color:var(--oak)}
.pf-pill.stop{background:var(--rose-soft);color:var(--rose)}
.pf-miss{display:block;margin-top:3px;font-size:.72rem;color:var(--oak)}
.pf-miss.block{margin:0;font-size:.82rem}
.pf-notice{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:10px;background:var(--oak-soft);color:var(--oak);font-size:.85rem}
.pf-notice.good{background:var(--hillside-soft);color:var(--hillside-deep)}
.pf-todo{padding:10px 14px;border-radius:10px;background:var(--oak-soft);color:var(--oak);font-size:.85rem}
.pf-todo ul{margin:4px 0 0 18px}
.pf-empty{padding:18px;text-align:center;color:var(--muted);border:1px dashed var(--line-strong);border-radius:12px}
.pf-next{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--line)}
.pf-card{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.pf-cardhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.pf-cardhead h3{font-size:1rem}
.pf-sum{font-size:.85rem;color:var(--muted)}
.pf-sum b{color:var(--text)}
.pf-warntxt{color:var(--oak)}
.pf-seq{display:flex;flex-wrap:wrap;gap:6px;list-style:none;counter-reset:pfseq;font-size:.78rem;color:var(--muted)}
.pf-seq li{counter-increment:pfseq;padding:4px 10px;background:var(--bg);border-radius:8px}
.pf-seq li::before{content:counter(pfseq) ". ";color:var(--velvet);font-weight:600}
.pf-details summary{cursor:pointer;color:var(--velvet);font-size:.85rem;padding:4px 0}
.pf-details[open] summary{margin-bottom:6px}
.pf-hist{list-style:none;display:flex;flex-direction:column;gap:4px;font-size:.82rem}
.pf-batches{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:.82rem}
.pf-batches li{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:10px}
.pf-batches li > span:first-child{margin-right:auto}
.pf-check{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:.85rem;color:var(--text);font-weight:400}
.pf-check input{width:18px;height:18px;flex-shrink:0;accent-color:var(--velvet)}
.pf-grp{font-family:var(--font-body);font-size:.82rem;font-weight:600;color:var(--velvet);margin-top:10px;text-transform:none}
.pf-grp small{font-weight:400;color:var(--muted)}
.pf-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pf-fields label{margin:6px 0 0}
.modal.wide.pf-modal{max-width:880px}
.pf-slip{display:flex;flex-direction:column;gap:6px}
.pf-sliphead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.pf-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.84rem}
.pf-kv span{color:var(--muted)}
.pf-line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:.86rem;font-variant-numeric:tabular-nums}
.pf-line span{display:flex;flex-direction:column}
.pf-line small{font-size:.72rem;color:var(--muted)}
.pf-line.sub{font-weight:600}
.pf-ovr input{width:9em;padding:6px 8px;border-radius:8px;text-align:right}
.pf-ovr.on input{border-color:var(--oak);background:var(--oak-soft)}
.pf-editline{display:grid;grid-template-columns:minmax(0,1fr) 8em 30px;gap:8px;align-items:center;margin:4px 0}
.pf-editline input{padding:7px 9px;border-radius:8px;font-size:.85rem}
.pf-editline input[inputmode]{text-align:right}
.pf-x{font-size:1.3rem;color:var(--muted);line-height:1}
.pf-err{grid-column:1 / -1;font-size:.75rem;color:var(--rose)}
.pf-err:empty{display:none}
.pf-err.block{display:block}
.pf-addrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.pf-addrow select{width:auto;padding:7px 9px;border-radius:8px;font-size:.82rem}
.pf-total{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;margin-top:8px;background:var(--velvet-soft);border-radius:10px;color:var(--velvet)}
.pf-total strong{font-size:1.3rem;font-variant-numeric:tabular-nums}
.pf-stop{color:var(--rose)}
.pf-vouhead{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pf-paper{border:1px solid var(--line);border-radius:10px;padding:8px;margin-top:8px}
.pf-receipts{list-style:none;font-size:.82rem;display:flex;flex-direction:column;gap:3px}
.pf-receipts .bad{color:var(--oak)}
.pf-toolgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
.pf-toolgrid h4{font-size:.78rem;color:var(--muted);text-transform:none;margin-bottom:4px}
.pf-toolgrid .pf-link{display:block;text-align:left;margin:3px 0}
@media (max-width:760px){
  .pf-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-steps button:last-child{grid-column:1 / -1}
  .pf-fields{grid-template-columns:1fr}
  .pf-toolgrid{grid-template-columns:1fr 1fr}
  .pf-body{padding:12px}
  .pf-table th.pf-hide-sm,.pf-table td.pf-dept{display:none}
}
@media (prefers-reduced-motion:reduce){.pf *{transition:none!important}}

/* ---- Company Bills & Payments, the 20 Oct 2026 layout (js/company-bills-flow.js) ----
   The approved designs: plum actions, light neutral ground, compact soft rows
   with fine borders, a lavender total. One list markup: a table-like grid on a
   computer, a plain stacked list on a phone. */
.cb2{display:flex;flex-direction:column;gap:12px}
.cb2-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--cb-line)}
.cb2-tabs{display:flex;gap:26px}
.cb2-tabs button{padding:12px 2px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:var(--cb-muted);font:600 14px/1.2 var(--font-body);cursor:pointer;min-height:44px}
.cb2-tabs button[aria-selected="true"]{color:var(--cb-plum);border-bottom-color:var(--cb-plum)}
.cb2-tabs button:focus-visible{outline:2px solid var(--cb-plum);outline-offset:2px}
.cb2-month{display:flex;align-items:center;gap:6px;padding-bottom:8px}
.cb2-mpick{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--cb-line);border-radius:999px;background:var(--cb-panel);font-weight:600;font-size:13px;color:var(--cb-ink);cursor:pointer}
.cb2-mpick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.cb2-desc{margin:0;font-size:12px;color:var(--cb-muted)}
.cb2-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.cb2-steps button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid var(--cb-line);border-radius:10px;background:var(--cb-panel);color:var(--cb-ink);text-align:left;cursor:pointer;min-width:0}
.cb2-steps button[aria-current="step"]{background:var(--cb-lav);border-color:var(--cb-sel-line);color:var(--cb-plum)}
.cb2-steps button:focus-visible{outline:2px solid var(--cb-plum);outline-offset:2px}
.cb2-stepname{font-weight:600;font-size:13px}
.cb2-stepnote{font-size:11px;color:var(--cb-muted)}
.cb2-body{background:var(--cb-panel);border:1px solid var(--cb-line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.cb2-headrow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.cb2-headrow h2{font-size:18px;margin:0 0 2px;color:var(--cb-ink)}
.cb2-headacts{display:flex;gap:8px;flex-wrap:wrap}
.cb2-back{display:none;margin-top:6px}
.cb2-notes:empty{display:none}
.cb2-grp{font-size:12px;font-weight:600;color:var(--cb-muted);margin:6px 0 2px;letter-spacing:.02em}
.cb2-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cb2-row{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.3fr) 240px;gap:12px;align-items:center;
  padding:10px 14px;border:1px solid var(--cb-line);border-radius:10px;background:var(--cb-panel)}
.cb2-row.cb2-haspick{grid-template-columns:24px minmax(0,2.4fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.3fr) 240px}
/* Paid and sent, folded under the list (22 Oct 2026). */
.cb2-donefold{margin-top:12px}
.cb2-donefold > summary{cursor:pointer;color:var(--cb-plum);font-size:14px;font-weight:600;padding:8px 2px;list-style:revert}
.cb2-donefold > .cb2-list{margin-top:6px}
.cb2-headrow-list{border:0;background:transparent;padding:2px 14px;font-size:11px;font-weight:600;color:var(--cb-muted);text-transform:uppercase;letter-spacing:.04em}
.cb2-pick input{width:18px;height:18px;accent-color:var(--cb-plum)}
.cb2-what{display:flex;flex-direction:column;min-width:0}
.cb2-name{border:0;background:transparent;padding:0;text-align:left;font:600 13.5px/1.35 var(--font-body);color:var(--cb-ink);cursor:pointer;overflow-wrap:anywhere}
.cb2-name:focus-visible,.cb2-open:focus-visible{outline:2px solid var(--cb-plum);outline-offset:2px}
.cb2-sub{font-size:12px;color:var(--cb-muted);overflow-wrap:anywhere}
.cb2-why{color:var(--cb-amberink)}
.cb2-amt{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;display:flex;flex-direction:column}
.cb2-headrow-list .cb2-amt{font-weight:600}
.cb2-none{font-weight:400;color:var(--cb-muted);font-size:12px;white-space:normal}
.cb2-st{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--cb-sel);color:var(--cb-plum);font-size:11.5px;line-height:1.3}
.cb2-st.good{background:var(--cb-green);color:var(--cb-greenink)}
.cb2-st.warn{background:var(--cb-amber);color:var(--cb-amberink)}
.cb2-act{display:flex;gap:12px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.cb2-open{text-decoration:none;font-weight:600}
.cb2-ownref{width:100%;padding:6px 8px;border:1px solid var(--cb-line);border-radius:8px;font-size:12.5px}
.cb2-empty{padding:22px;text-align:center;border:1px dashed var(--cb-line);border-radius:12px;color:var(--cb-muted)}
.cb2-empty p{margin:0}
.cb2-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:var(--cb-lav);font-size:13px}
.cb2-bottomacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cb2-warntxt{color:var(--cb-amberink)}
.cb2-gap{margin-top:6px}
.cb2-packnote{margin:0;padding:10px 12px;border-radius:10px;font-size:13px}
.cb2-packnote.good{background:var(--cb-green);color:var(--cb-greenink)}
.cb2-packnote.warn{background:var(--cb-amber);color:var(--cb-amberink)}
.cb2-recform{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cb2-done summary{cursor:pointer;color:var(--cb-plum);font-size:13px;padding:4px 0}
.cb2-actlist{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.cb2-actlist .cbp-btn{justify-content:flex-start;min-height:44px}
.cb2-mini .cb2-row{grid-template-columns:minmax(0,1fr) auto}
.cb2-phonemore{display:none}

/* One bill, opened: the approved sheet. */
.modal.cb2-sheet{max-width:560px}
.cb2-sheet .modal-body{display:flex;flex-direction:column}
.cb2-vendor{font-size:13px;color:var(--cb-muted);margin:0 0 14px}
.cb2-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--cb-lav);border-radius:12px;padding:16px;margin-bottom:20px}
.cb2-cap{display:block;font-size:11px;letter-spacing:.06em;color:var(--cb-muted);margin-bottom:3px}
.cb2-amount{font-size:26px;font-weight:600;color:var(--cb-ink);line-height:1.2;font-variant-numeric:tabular-nums}
.cb2-herost{font-size:12px;max-width:140px;text-align:right;color:var(--cb-plum);line-height:1.4}
.cb2-sec{font-size:12px;color:var(--cb-muted);font-weight:600;margin:0 0 4px;letter-spacing:.04em}
.cb2-docrow{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--cb-line)}
.cb2-icon{width:36px;height:40px;border-radius:8px;background:var(--cb-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--cb-plum)}
.cb2-icon .lu{width:18px;height:18px}
.cb2-doccopy{flex:1;min-width:0}
.cb2-docname{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.cb2-docmeta{font-size:12px;color:var(--cb-muted);margin-top:2px;overflow-wrap:anywhere}
.cb2-docacts{display:flex;gap:12px;flex-shrink:0}
.cb2-docacts .cbp-link{min-height:40px;font-size:13px;text-decoration:none;font-weight:600}
.cb2-pay{margin-top:20px}
.cb2-pay h3{font-size:15px;font-weight:600;margin:0 0 10px}
.cb2-payform{display:flex;flex-direction:column;gap:8px}
.cb2-payform input,.cb2-payform select{width:100%;min-height:44px;font-size:15px;border-radius:9px}
.cb2-paymore summary{cursor:pointer;color:var(--cb-plum);font-size:13px;padding:6px 0}
.cb2-save{width:100%;min-height:46px;margin-top:4px}
.cb2-saved{color:var(--cb-greenink);font-size:12.5px;margin:0 0 8px}
.cb2-rec{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:7px 0;border-bottom:1px solid var(--cb-line);overflow-wrap:anywhere}
.cb2-rec span:first-child{color:var(--cb-muted);flex-shrink:0}
.cb2-rec span:last-child{text-align:right}
.cb2-pay .cbp-link{margin-top:8px}
.cb2-foot{border-top:1px solid var(--cb-line);margin-top:20px;padding-top:14px}
.cb2-foot>p{margin:0 0 10px}
.cb2-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cb2-actions .cbp-btn{min-height:44px}
.cb2-sentline{margin-top:8px}
.cb2-moreacts{margin-top:14px}
.cb2-moreacts summary{cursor:pointer;color:var(--cb-muted);font-size:13px}
.cb2-morebtns{display:flex;gap:16px;flex-wrap:wrap;padding:8px 0}

@media (max-width:900px){
  .cb2-row,.cb2-row.cb2-haspick{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"what amt" "state act";row-gap:6px}
  .cb2-row.cb2-haspick{grid-template-columns:24px minmax(0,1fr) auto;grid-template-areas:"pick what amt" "pick state act"}
  .cb2-pick{grid-area:pick;align-self:start;padding-top:2px}
  .cb2-what{grid-area:what}.cb2-amt{grid-area:amt;align-items:flex-end;text-align:right}.cb2-state{grid-area:state}.cb2-act{grid-area:act}
  .cb2-doc{display:none}
  .cb2-row:has(.cb2-ownref) .cb2-doc{display:block;grid-column:1/-1}
  .cb2-headrow-list{display:none}
}
/* A phone: the plain list of the approved design - no step boxes, rows
   divided by thin lines rather than boxed, one big upload button. */
@media (max-width:700px){
  .cb2-steps,.cb2-desc{display:none}
  .cb2-bar{flex-direction:column;align-items:stretch;gap:0}
  .cb2-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .cb2-tabs button{text-align:center}
  .cb2-month{padding:10px 0 2px}
  .cb2-body{border:0;padding:0;background:transparent}
  .cb2-back{display:inline-block}
  .cb2-headrow h2{font-size:16px}
  .cb2-headacts,.cb2-upload{width:100%}
  .cb2-headacts .cbp-btn{flex:1;min-height:46px}
  .cb2-list{gap:0}
  .cb2-row{border:0;border-bottom:1px solid var(--cb-line);border-radius:0;padding:14px 2px;background:transparent}
  .cb2-nextbtn{display:none}
  .cb2-nextbtn.cb2-nextup{display:inline}
  .cb2-recform{grid-template-columns:1fr}
  .cb2-bottom{flex-direction:column;align-items:stretch}
  .cb2-bottomacts .cbp-btn{flex:1;min-height:44px}
  .modal.cb2-sheet{max-width:none}
  .content:has(.cb2) .topbar-actions{display:none}
  .cb2-phonemore{display:flex;gap:18px;flex-wrap:wrap;padding:6px 0 4px}
}
@media (prefers-reduced-motion:reduce){.cb2 *{transition:none!important}}

/* ---- Apply for Staff, laid out again 20 Oct 2026 (the approved
   "personalised" design): the five actions once at the top, only the chosen
   one below; soft panels, fine borders, plum for what is chosen. ---- */
:root{--afs-plum:var(--velvet-mid);--afs-soft:#f3edf7;--afs-sub:#665971}
.afs{display:flex;flex-direction:column}
.afs-reglink{font-size:.85rem;font-weight:600;color:var(--velvet);white-space:nowrap}
.afs-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:4px 0 12px}
.afs-act{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 10px;border:1px solid var(--line-strong);border-radius:10px;background:var(--card);color:var(--afs-sub);font-size:.88rem;font-weight:600}
.afs-act .lu{width:18px;height:18px;flex-shrink:0}
.afs-act[aria-pressed="true"]{background:var(--afs-soft);color:var(--afs-plum);border-color:var(--afs-plum)}
.afs-act:hover{border-color:var(--afs-plum)}
.afs :is(button,input,select,a,textarea,summary):focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.afs-hint{font-size:.82rem;color:var(--afs-sub);margin:0 0 18px}
.afs-panel{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:22px}
.afs-row{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
.afs-row h2,.afs-row h3{font-family:var(--font-body);font-size:1.02rem;font-weight:600;margin:0;letter-spacing:0}
.afs-small{font-size:.78rem;color:var(--afs-sub)}
.afs-link{border:0;background:none;padding:6px 0;color:var(--afs-plum);font-size:.82rem;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.afs-tools{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:10px;margin:16px 0 10px}
.afs-flbl{display:flex;flex-direction:column;gap:5px;margin:0;font-size:.8rem;font-weight:500;color:var(--afs-sub)}
.afs-flbl input,.afs-flbl select{padding:10px 12px;border-radius:9px;font-size:.92rem;color:var(--text)}
.afs-countrow{margin-bottom:4px}
.afs-note{font-size:.8rem;color:var(--afs-sub);background:var(--afs-soft);border-radius:9px;padding:9px 12px;margin:8px 0}
.afs-people{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);max-height:min(60vh,560px);overflow:auto}
.afs-prow[hidden]{display:none}
.afs-person{display:flex;align-items:center;gap:12px;padding:12px 4px;margin:0;border-bottom:1px solid var(--line);cursor:pointer;font-weight:400;color:var(--text);letter-spacing:0}
.afs-person input{width:18px;height:18px;padding:0;accent-color:var(--velvet);flex-shrink:0}
.afs-av{width:34px;height:34px;border-radius:50%;background:var(--afs-soft);color:var(--afs-plum);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;flex-shrink:0}
.afs-pmain{display:flex;flex-direction:column;min-width:0}
.afs-pmain b{font-size:.92rem;font-weight:600}
.afs-pmain .afs-small{overflow-wrap:anywhere}
.afs-prow.off .afs-person{cursor:default;opacity:.62}
.afs-why{font-size:.75rem;color:var(--oak)}
.afs-empty{padding:18px 4px;color:var(--afs-sub);margin:0;list-style:none}
.afs-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.afs-selection{font-size:.84rem;color:var(--afs-sub);margin:0}
.afs-fail{padding:14px;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.afs-fail p{margin:0}
.afs-req{font-weight:400;color:var(--afs-sub)}
/* The claim, on the page. */
.afs-panel.afs-claimpanel{padding:0}
.afs-chead{padding:20px 24px 14px;border-bottom:1px solid var(--line)}
.afs-chead h2{font-family:var(--font-body);font-size:1.15rem;font-weight:600;margin:0;letter-spacing:0}
.afs-cbody{padding:18px 24px}
.afs-cfor>label,.afs-cgrid>div>label,.afs-flabel{display:block;font-size:.82rem;font-weight:600;color:var(--text);margin:14px 0 6px;letter-spacing:0}
.afs-cfor>label{margin-top:0}
.afs-cfor .afs-small{margin:6px 0 0}
.afs-receipt{margin:18px 0 6px;padding:14px 16px;border-radius:12px;background:var(--afs-soft);border:1px solid var(--line)}
.afs-rtop{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.afs-receipt .file-btns .btn{display:inline-flex;align-items:center;gap:6px}
.afs-receipt .file-btns .lu{width:16px;height:16px}
.afs-cgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.afs-cgrid>div{min-width:0}
.afs-full{grid-column:1/-1}
/* The branch boxes as a row of chips; ticking a second opens the shares. */
.afs-cbody .bxp:not(.multi){flex-direction:row;flex-wrap:wrap;gap:8px;border:0;padding:0;background:none}
.afs-cbody .bxp:not(.multi) .bxp-row{display:flex;min-height:40px;padding:0 12px;border:1px solid var(--line-strong);border-radius:9px;background:var(--card)}
.afs-cbody .bxp:not(.multi) .bxp-row.on{border-color:var(--velvet);background:var(--afs-soft)}
.afs-cbody .bxp:not(.multi) .bxp-pctw,.afs-cbody .bxp:not(.multi) .bxp-amt{display:none}
.afs-cbody .bxp:not(.multi) .bxp-note,.afs-cbody .bxp:not(.multi) .bxp-add{flex-basis:100%}
.afs-auto{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:5px;background:var(--afs-soft);color:var(--afs-plum);font-size:.7rem;font-weight:600}
.afs-auto[hidden]{display:none}
.afs-static{margin:0;padding:11px 12px;border:1px dashed var(--line-strong);border-radius:12px;color:var(--afs-sub);font-size:.9rem}
.afs-cnote{font-size:.8rem;color:var(--afs-sub);margin:16px 0 0}
.afs-cfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 24px;border-top:1px solid var(--line)}
.afs-done h2{font-family:var(--font-body);font-size:1.1rem;font-weight:600;margin:0 0 6px;letter-spacing:0}
.afs-done p{margin:0 0 14px;color:var(--afs-sub)}
.afs-doneacts{display:flex;gap:10px;flex-wrap:wrap}
/* The reviews. */
.afs-rvlist{margin:0}
.afs-rv{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.afs-rv dt{color:var(--afs-sub);font-size:.82rem}
.afs-rv dd{margin:0;overflow-wrap:anywhere}
.bk-for{margin:4px 0 0;font-size:.9rem}
/* One person from a searchable list. */
.afs-pick{position:relative}
.afs-pickbox{position:relative}
input.afs-pickin{padding-right:38px;font-weight:500}
.afs-pickchev{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--afs-sub);display:flex}
.afs-pickchev .lu{width:18px;height:18px}
.afs-picklist{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;margin:0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow-md);max-height:300px;overflow:auto}
.afs-picklist [role=option]{display:flex;flex-direction:column;padding:9px 10px;border-radius:7px;cursor:pointer}
.afs-picklist [role=option] b{font-size:.92rem;font-weight:600}
.afs-picklist [role=option] span{font-size:.76rem;color:var(--afs-sub)}
.afs-picklist [role=option].on,.afs-picklist [role=option]:hover{background:var(--afs-soft)}
.afs-picklist [aria-selected=true] b{color:var(--velvet)}
.afs-picknone{padding:10px;color:var(--afs-sub);font-size:.85rem}
.afs-picked{margin:6px 0 0;font-size:.8rem;color:var(--afs-sub)}
/* The roster, one person's week. */
.ro-person{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.ro-pickwrap{width:min(380px,100%)}
.ro-pickwrap>label{display:block;font-size:.82rem;font-weight:600;color:var(--text);margin:0 0 6px;letter-spacing:0}
.ro-scope{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px;padding:14px 16px;background:var(--afs-soft);border-radius:10px;margin-bottom:18px;align-items:end}
.ro-scope .afs-flbl[hidden]{display:none}
.ro-help{grid-column:1/-1;font-size:.8rem;color:var(--afs-sub);margin:0}
.ro-weekhead{margin:4px 0 8px}
.ro-week{border-top:1px solid var(--line)}
.ro-week .ro-day{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1.4fr) 56px;gap:12px;align-items:center;padding:11px 8px;border-bottom:1px solid var(--line)}
.ro-week .ro-head{font-size:.74rem;color:var(--afs-sub);padding:8px}
.ro-week .ro-day.changed{background:var(--afs-soft);border-radius:8px}
.ro-week .ro-day.picked .ro-dname b{color:var(--velvet)}
.ro-dname{display:flex;flex-direction:column;gap:1px;min-width:0}
.ro-dname b{font-size:.88rem;font-weight:600}
.ro-chg{font-size:.7rem;font-weight:600;color:var(--velvet)}
.ro-dbr{position:relative;min-width:0}
.ro-brbtn{display:inline-flex;align-items:center;gap:4px;min-height:38px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:7px;background:var(--afs-soft);color:var(--velvet);font-size:.84rem;font-weight:600;cursor:pointer;max-width:100%}
.ro-brbtn .lu{width:14px;height:14px;opacity:.7}
.ro-brbtn.off,.ro-brtxt.off{background:var(--bg);color:var(--afs-sub)}
.ro-brbtn:hover{border-color:var(--velvet)}
.ro-brtxt{display:inline-block;padding:6px 10px;border-radius:7px;background:var(--afs-soft);color:var(--velvet);font-size:.84rem;font-weight:600}
.ro-dh{display:flex;flex-direction:column;gap:2px;font-size:.86rem;font-variant-numeric:tabular-nums;min-width:0}
.ro-warn{font-size:.74rem;color:var(--oak)}
.ro-dedit{text-align:right}
.ro-menu{position:absolute;left:0;top:calc(100% + 4px);z-index:30;min-width:200px;margin:0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow-md)}
.ro-menu [role=option]{padding:9px 10px;border-radius:7px;cursor:pointer;font-size:.88rem;outline:none}
.ro-menu [role=option]:hover,.ro-menu [role=option]:focus{background:var(--afs-soft)}
.ro-menu [role=option]:focus-visible{box-shadow:inset 0 0 0 2px var(--velvet)}
.ro-menu [aria-selected=true]{font-weight:600;color:var(--velvet)}
.ro-reason{margin-top:16px}
.ro-saved{margin:10px 0 0;padding:9px 12px;border-radius:9px;background:var(--hillside-soft);color:#3f5a2a;font-size:.86rem}
.ro-foot{display:flex;gap:8px;flex-wrap:wrap}
.ro-note{margin-bottom:10px}
@media (max-width:700px){
  .afs-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .afs-act{flex-direction:column;gap:4px;font-size:.78rem;padding:10px 6px}
  .afs-panel{padding:16px}
  .afs-tools{grid-template-columns:1fr}
  .afs-flbl input,.afs-flbl select,.afs-cbody input,.afs-cbody select,.afs-cbody textarea,input.afs-pickin{font-size:16px}
  .afs-footer>.btn,.afs-cfoot>.btn{width:100%}
  .afs-chead,.afs-cbody,.afs-cfoot{padding-left:16px;padding-right:16px}
  .afs-cgrid{grid-template-columns:1fr}
  .afs-rv{grid-template-columns:1fr;gap:2px}
  .ro-scope{grid-template-columns:1fr 1fr}
  .ro-scope .afs-flbl:first-child{grid-column:1/-1}
  .ro-week .ro-day{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name br" "hrs edit";row-gap:6px}
  .ro-week .ro-head{display:none}
  .ro-dname{grid-area:name}.ro-dbr{grid-area:br;justify-self:end}.ro-dh{grid-area:hrs}.ro-dedit{grid-area:edit}
  .ro-menu{left:auto;right:0}
  .ro-foot{width:100%}.ro-foot .btn{flex:1}
}
/* My Claims as tabs (22 Oct 2026): the tab names the section, so its own
   fold header is not shown again. */
.cl-tabs{margin:4px 0 12px}
.cl-fold.cl-tabbed > summary{display:none}
.cl-fold.cl-tabbed > .cl-body{padding-top:4px}
.cl-tabn{display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;border-radius:10px;background:var(--velvet-soft);color:var(--velvet);font-size:.78rem;font-weight:700}
/* On a phone the three claim tabs fit the screen instead of pushing the
   page sideways (Giselle, 24 Oct 2026: "Fix this mobile version"). */
.tabs.lr-tabs.cl-tabs{display:flex;width:100%;max-width:100%;box-sizing:border-box;overflow-x:auto}
.tabs.lr-tabs.cl-tabs button{flex:1 1 auto;white-space:nowrap;min-width:0}
@media (max-width:560px){
  .tabs.lr-tabs.cl-tabs button{padding:8px 8px;font-size:.84rem}
  .cl-tabn{margin-left:2px;padding:0 5px}
}
/* Company Bills: the simpler payment and email pop-ups (24 Oct 2026). */
.cbm-head{display:grid;gap:4px;margin:0 0 12px;font-size:.88rem}
.cbm-head > div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px}
.cbm-head dt{color:var(--muted);margin:0}
.cbm-head dd{margin:0;overflow-wrap:anywhere}
.cbm-atts{margin:4px 0 0;padding-left:18px}
.cbm-mode{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 10px;font-size:.88rem}
.cbm-mode label{display:flex;align-items:center;gap:6px;margin:0}
.cbm-msg{margin:6px 0 4px}
.cbm-msg > summary{cursor:pointer;color:var(--cb-plum,var(--velvet));font-size:.88rem;padding:4px 0}
.cbm-msg textarea{width:100%;margin-top:6px}
.cbm-prev{margin-right:auto}
.cb2-paidline{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font-size:.92rem}
.cb2-tick{color:var(--hillside-deep,#3b6d11);font-weight:700}
.cb2-mailbig{width:100%;min-height:44px}
.cb2-smalllinks{display:flex;justify-content:center;gap:18px;margin-top:8px}
/* Read invoice: receipt or no receipt, as two plain choices (25 Oct 2026). */
.cbr-choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:0 0 14px}
.cbr-choice button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:12px 14px;border:1px solid var(--cb-line,#eae3ef);border-radius:12px;background:var(--cb-panel,#fff);color:var(--cb-ink,#302538);cursor:pointer;font:inherit}
.cbr-choice button b{font-size:.95rem}
.cbr-choice button span{font-size:.8rem;color:var(--cb-muted,#685a72)}
.cbr-choice button.on{border:2px solid var(--cb-plum,#5e2973);background:#f6eef9;padding:11px 13px}
.cbr-choice button:focus-visible{outline:2px solid var(--cb-plum,#5e2973);outline-offset:2px}
/* The amount column wraps inside itself, never under the next one (25 Oct 2026). */
.cb2-amt{min-width:0;white-space:normal;overflow-wrap:anywhere}
.cb2-usual{font-weight:500;color:var(--cb-muted)}