/* 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}
html{-webkit-text-size-adjust:100%}
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)}
.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}

.bottom-nav{position:fixed;left:0;right:0;bottom:0;height:var(--nav-h);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}
.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.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}

/* 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}

/* 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)}
@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}
.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:block;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. */
.btn.iconbtn.del{width:32px;height:32px;border-radius:9px;color:var(--muted);border-color:transparent}
.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}

/* 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}
.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}

/* 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}
.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[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:11px;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}
.side-group button .ico{line-height:0;color:var(--muted)}
.side-group button .ico svg{width:19px;height:19px}
.side-group button:hover{background:var(--velvet-soft)}
.side-group button.active{background:var(--velvet-soft);color:var(--velvet);font-weight:700}
.side-group button.active .ico{color:var(--velvet)}
.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-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}
/* 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}
.loc-shot{position:relative;aspect-ratio:1080/718;background:var(--velvet-soft)}
.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}
/* 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}
/* 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(4,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. */
.hb-subtabs{display:inline-flex;gap:4px;margin:14px 0 0;padding:4px;
  background:var(--soft);border:1px solid var(--line);border-radius:12px}
.hb-subtabs button{border:0;background:transparent;color:var(--muted);font-weight:600;
  font-size:.9rem;padding:7px 16px;border-radius:9px;cursor:pointer;transition:background .15s,color .15s}
.hb-subtabs button:hover{color:var(--velvet)}
.hb-subtabs button.on{background:var(--card);color:var(--velvet);box-shadow:0 1px 3px rgba(0,0,0,.07)}
.hb-subtag{margin:8px 0 0}

.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}