/* Numeral face for metric figures (the same file login.html's seal uses). Latin subset of the TTF.
   FONT_CACHE_NOTE: browsers keep /static/fonts/ files for a year, so a changed font must ship under a
   new file name (see web/static_pages.py). */
/* Nav + brand face (variant E of the navbar redesign). Self-hosted: font-src is 'self'. Same rule as
   Bodoni -- a changed file ships under a new name. */
@font-face{font-family:"Fraunces";src:url(/static/fonts/Fraunces-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(/static/fonts/BodoniModa-latin.woff2) format("woff2"),url(/static/fonts/BodoniModa-latin.woff) format("woff"),url(/static/fonts/BodoniModa.ttf) format("truetype");font-weight:400 900;font-display:swap}
:root{
  --numeral:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  /* Rose wash: the neutral fill for figure cards (metric tiles, billing cards). Lighter than the
     rose alert tint (.tint-rose) so "normal" and "needs a look" never read the same. */
  --tile-bg:#fef4f5;--tile-line:#f6e1e4;
  --bg:#fffdfc;--surface:#fffefd;--surface-2:#fff9f7;--line:#eee4df;--line-soft:#f4ece8;
  --ink:#261611;--muted:#6c625d;--rose:#d85f75;--rose-2:#ee98a6;--rose-soft:#fdebed;--rose-ink:#a13a52;
  --peach:#f9ede5;--green:#7fa86f;--green-soft:#edf5ea;--amber:#bd7a31;--amber-soft:#fff2e7;
  --brown:#6b4a38;--logo-rose:#9b5161;--shadow:0 1px 2px rgba(69,42,29,.04);
  --plum:#9c4f7c;--plum-soft:#f7e9f1;--teal:#3f8f8c;--teal-soft:#e8f5f4;
  --card-bg:rgba(255,255,255,.78);--hover-bg:var(--rose-soft);--search-highlight:var(--rose-2);--btn-accent:var(--rose);
  --sidebar-bg:rgba(255,250,248,.64);--search-bg:#fffefd;--row-bg:transparent;--today-highlight:#fdebed;
  --logo-ink:#111;--paper:#fff;--track:#f0e9e6;--mix-line:#cfc6c1;--disabled-bg:#e4e0dd;--rose-flush:#f9e1e6;
  --pill-ok-bg:#edf5ea;--pill-ok-text:#5f8753;--pill-warn-bg:#fff2e7;--pill-warn-text:#b06f28;--pill-bad-bg:#fdebed;--pill-bad-text:#a13a52;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scrollbar-gutter:stable}
body{
  margin:0;
  background:radial-gradient(circle at 7% 8%, rgba(244,187,195,.17), transparent 23%),
    radial-gradient(circle at 88% 2%, rgba(242,220,208,.18), transparent 23%),var(--bg);
  /* body is only one viewport tall (height:100%), so a repeating background tiled the corner
     glows down the page every screen -- a faint pink band at the bottom of each scrolled view.
     Painted once, the glows stay at the top and the rest of the page is flat --bg. */
  background-repeat:no-repeat;
  color:var(--ink);font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:13px;
}
button,a{font:inherit;color:inherit}
a{text-decoration:none}
.app{min-height:100vh;display:grid;grid-template-columns:224px 1fr}
.sidebar{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;box-sizing:border-box;border-right:1px solid var(--line);padding:22px 16px 20px;background:var(--sidebar-bg);display:flex;flex-direction:column;gap:16px}
/* Brand: stacked "mbmw" mark (cut from the foundation logo), a thin rule, then the wordmark as
   live text so it stays crisp at any size. Colours are the logo's own. */
.brand{display:flex;align-items:center;justify-content:center;gap:14px;padding:4px 0 12px;min-width:0}
.brand-logo{height:62px;width:auto;display:block;flex:none}
.brand-rule{width:1.5px;align-self:stretch;background:var(--logo-ink);border-radius:1px;flex:none}
.brand-wordmark{display:flex;flex-direction:column;line-height:.95;min-width:0;white-space:nowrap}
.brand-wordmark .wm-1,.brand-wordmark .wm-2{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:23px;letter-spacing:-.01em}
.brand-wordmark .wm-1{color:var(--logo-ink)}
.brand-wordmark .wm-2{color:var(--logo-rose);padding-left:17px}
.brand-wordmark .wm-3{font-size:9px;letter-spacing:.42em;color:var(--logo-ink);margin-top:6px;padding-left:5px}
nav{display:flex;flex-direction:column;gap:5px;position:relative}
/* Quick departure, soft landing -- the pill should dwell at its destination rather than on
   the row it is leaving. */
:root{--pill-move:.42s cubic-bezier(.32,.72,0,1)}
/* Row colours are written by sidebar.js from how much of the row the pill covers, so they
   cannot go dark-on-dark at any pill position. The fallbacks are what render before that JS
   runs, and under the 850px breakpoint where no pill is ever built. */
/* The pill is peach now, so the dark-to-white ramp sidebar.js writes into --row-ink would turn the
   covered row's text white on peach. Rows therefore ignore --row-ink/--row-sub and take their colour
   from .active; sidebar.js and the slide itself are unchanged. */
.nav-item{display:flex;flex-direction:column;justify-content:center;min-height:48px;border-radius:999px;padding:0 18px 0 36px;position:relative;z-index:1;color:var(--muted);transition:color .25s cubic-bezier(.22,1,.36,1),background .25s cubic-bezier(.22,1,.36,1)}
.nav-item .label{font-family:Fraunces,Georgia,serif;font-variation-settings:"opsz" 24;font-weight:500;font-size:16px;letter-spacing:0}
.nav-item.active{color:var(--ink)}
.nav-item.active .label{font-weight:600}
.nav-item:not(.active):hover{background:var(--peach);color:var(--ink)}
.nav-item:not(.active):hover:before{content:"";position:absolute;left:18px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--rose-2)}
.nav-item:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
/* Deliberately a plain empty element: no overflow clip and no animated children. A rounded
   overflow:hidden over a separately composited, transform-animated child made Chrome build
   a mask layer, which painted as a solid black rectangle on the frame it was promoted --
   the pill's first frame at its start position. z-index:0 keeps it under the row text.
   top:0 with the whole offset carried by translateY: nav has no padding of its own (the
   22px belongs to .sidebar), so the first row's offsetTop is 0. */
.nav-indicator{position:absolute;left:0;right:0;top:0;height:48px;border-radius:999px;background:var(--peach);box-shadow:inset 0 0 0 1px var(--line);z-index:0;pointer-events:none;opacity:0}
.nav-indicator.ready{opacity:1}
.nav-indicator:before{content:"";position:absolute;left:18px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--rose)}
/* Height is set per row but never transitioned: it would relayout every frame, and every
   row measures the same 44px today anyway. */
.nav-indicator.animate{transition:transform var(--pill-move)}
@media(prefers-reduced-motion:reduce){
  .sidebar,.nav-backdrop{transition:none!important}
  .nav-indicator.animate{transition:none}
}
.profile{margin-top:auto;border-top:1px solid var(--line-soft);padding:12px 6px 0;display:grid;grid-template-columns:42px 1fr;gap:9px;align-items:center;cursor:default}
.avatar{width:38px;height:38px;border-radius:50%;background:#f8eee8;color:#754;text-align:center;line-height:38px;font-weight:700;font-size:12px;border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line)}
.profile .name{font-weight:700;font-size:12px}
.profile .meta{font-size:10px;line-height:1.45;color:var(--muted)}
main{padding:22px 24px 28px;min-width:0}
/* A sideways trackpad swipe that reaches the end of a horizontal scroller would otherwise
   chain into the browser's back/forward gesture on macOS. */
main *{overscroll-behavior-x:contain}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px}
/* Page titles: Georgia, the heading register (DESIGN.md Display). */
h1{font-family:Georgia,serif;font-size:28px;margin:2px 0 8px;font-weight:400;letter-spacing:-.01em}
.hello-sub{color:#4f4642;font-size:12px}
.grid{display:grid;grid-template-columns:minmax(400px,1.2fr) minmax(320px,1fr);gap:14px}
.leftcol,.rightcol{display:flex;flex-direction:column;gap:14px;min-width:0}
.card{border:1px solid var(--line);border-radius:12px;background:var(--card-bg);box-shadow:var(--shadow);overflow:hidden}
.card-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px 12px;border-bottom:1px solid var(--line-soft)}
.card-head h3{font-family:Georgia,serif;font-size:15px;margin:0}
/* Some pages title their cards with h2 (C to R, Compliance); same Georgia register. */
.card-head h2{font-family:Georgia,serif;font-size:16px;margin:0}
.card-body{padding:16px 18px 18px}
.link{font-size:9.5px;color:var(--rose)}
.schedule{padding:14px 15px 15px}
.schedule-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.schedule-grid .day{text-align:center}
.schedule-grid .dname{font-size:9px;color:var(--muted);margin-bottom:6px}
.shift{background:#fdebed;border-radius:7px;padding:10px 2px;font-size:9px;text-align:center;white-space:nowrap}
.off{background:#fff5f3;color:var(--muted);border-radius:7px;padding:10px 4px;font-size:9.5px;text-align:center}
.empty{padding:18px;text-align:center;color:var(--muted);font-size:10.5px}
/* Shown only on a cold load (no fresh cache entry yet) while a cachedApiFetch is in flight --
   repeat navigation within the cache TTL renders real content immediately and skips this. */
.skeleton,.skeleton-line,.skeleton-card{background:linear-gradient(90deg,var(--line-soft) 25%,var(--line) 37%,var(--line-soft) 63%);background-size:400% 100%;animation:skeleton-pulse 1.4s ease-in-out infinite;border-radius:6px}
.skeleton-line{height:11px;margin:6px 0}
.skeleton-card{display:block;width:100%;height:100%;min-height:52px;border-radius:12px}
@keyframes skeleton-pulse{0%{background-position:100% 50%}100%{background-position:0 50%}}
/* Sign-in hand-off: home opens under the frost login.html ended on, then it clears (home.html <head>).
   Same pane as login.html's .warm-glass; only its opacity moves. */
html.warm-handoff body::after{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),linear-gradient(160deg,rgba(255,255,255,.52),rgba(255,250,247,.38));
  -webkit-backdrop-filter:blur(26px) saturate(1.35);backdrop-filter:blur(26px) saturate(1.35);transition:opacity .62s cubic-bezier(.4,0,.2,1)}
html.warm-handoff.warm-clear body::after{opacity:0}
@media(prefers-reduced-motion:reduce){html.warm-handoff body::after{transition-duration:.2s}}
/* Placeholder rows shown while a page's first data loads (replaces the old "Loading…" line). */
.skel-rows{display:block;padding:14px 2px;list-style:none}
.skel-rows .skeleton-line{height:12px;margin:0 0 14px}
@media(prefers-reduced-motion:reduce){.skeleton,.skeleton-line,.skeleton-card{animation:none}}
.quick{margin-top:4px;border-radius:10px;background:rgba(252,245,242,.65);padding:10px 8px 9px}
.quick h4{font-family:Georgia,serif;margin:0 3px 8px;font-size:12px}
.qbtn{background:var(--paper);border:1px solid var(--line-soft);border-radius:5px;padding:7px 9px;margin:5px 0;display:flex;align-items:center;gap:9px;font-size:10.5px;box-shadow:var(--shadow);width:100%;text-align:left;opacity:.6;cursor:not-allowed}
.top-actions{display:flex;align-items:center;gap:12px}
.top-icon{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--paper);display:grid;place-items:center;font-size:21px;position:relative}
.badge{position:absolute;right:-3px;top:-5px;background:var(--rose);color:#fff;border-radius:20px;font-size:9px;font-weight:700;padding:2px 5px;border:2px solid var(--paper)}
.role{padding-left:18px;border-left:1px solid var(--line);min-width:134px;line-height:1.45}
.role b{font-size:12px}.role span{display:block;font-size:11px;color:var(--muted);overflow-wrap:anywhere}
/* minmax(0,1fr), not minmax(150px,1fr): a 150px floor pins the row at 630px and it overflows
   the viewport below that instead of shrinking. The column-count ladder below is what keeps
   tiles readable -- minmax(0,...) alone would let .metric-label (white-space:nowrap) spill. */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
@media(max-width:1000px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.metrics{grid-template-columns:1fr}}
/* Ledger tiles: Georgia small-caps label, Bodoni numeral, italic Georgia sub-line. A figure's
   denominator or unit goes in <small> and reads smaller and greyer than the figure ("7/9",
   "92%"). */
.metric{min-height:96px;border:1px solid var(--tile-line);border-radius:12px;padding:16px 18px 15px;background:var(--tile-bg);box-shadow:var(--shadow);transition:background-color .2s ease}
.metric-top{display:block}
.metric-label{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 8px;font-family:Georgia,serif;font-size:13px;font-variant-caps:all-small-caps;letter-spacing:.08em;line-height:1.2;color:var(--muted);white-space:nowrap;overflow:hidden}
.metric-value{font-family:var(--numeral);font-weight:500;font-size:44px;line-height:1;letter-spacing:-.03em;font-variant-numeric:lining-nums;margin:10px 0 8px;white-space:nowrap}
.metric-value small{font-size:.45em;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:2px}
.metric-value.placeholder{color:var(--muted)}
/* Dates and other words: the 44px numeral size would overflow a quarter-width tile. */
/* ▲/▼ change on a compliance tile, inline after the % so the tile keeps its size. */
.metric-delta{font-size:13px;font-weight:500;letter-spacing:0;margin-left:8px;vertical-align:middle;white-space:nowrap}
.metric-delta small{font-size:.75em;color:inherit!important}
.metric-delta.up{color:#5f8753}
.metric-delta.down{color:var(--rose-ink)}
.metric-delta.flat{color:var(--muted)}
:root[data-theme="dark"] .metric-delta.up{color:#8fc27f}
:root[data-theme="dark"] .metric-delta.down{color:#f2a3b3}
.metric-value--text{font-family:Georgia,serif;font-size:22px;letter-spacing:0;line-height:1.15;white-space:normal}
.metric-sub{font-family:Georgia,serif;font-style:italic;font-size:12px;color:#5d524d}
/* A sub-line action on its own line: a light outline so it reads as clickable, not a full button. */
.metric-cta{display:inline-block;margin-top:6px;padding:2px 10px;border:1px solid currentColor;border-radius:999px;
  font-style:normal;font-size:11.5px;text-decoration:none;color:inherit;transition:background-color .15s ease}
.metric-cta:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.metric-cta:focus-visible{outline:2px solid var(--rose-2);outline-offset:2px}

/* Reusable Ledger primitives for figures and labels outside a metric tile. */
.ledger-label{font-family:Georgia,serif;font-size:13px;font-variant-caps:all-small-caps;letter-spacing:.08em;line-height:1.2;color:var(--muted)}
.ledger-figure{font-family:var(--numeral);font-weight:500;letter-spacing:-.02em;line-height:1;font-variant-numeric:lining-nums}
.ledger-figure small{font-size:.45em;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:2px}

/* Status tint: tiles stay neutral until a figure needs a look, so colour is a signal rather
   than decoration. Compliance under target -> amber, any strikes -> rose, missing weekend
   reports -> amber. Each hue's ink is >=4.5:1 on its own soft fill. Inside a larger card only
   the figure turns (.is-low), never the whole card. */
.tint-amber,.is-low{--hue-soft:#fff2e7;--hue-hover:#fdeadb;--hue-ink:#82501f}
.tint-rose{--hue-soft:#fbdfe4;--hue-hover:#f9d5dc;--hue-ink:#a13a52}
.metric.tint-amber,.metric.tint-rose{background:var(--hue-soft);border-color:transparent}
.tint-amber :is(.metric-label,.metric-value,.metric-value small,.metric-sub),
.tint-rose :is(.metric-label,.metric-value,.metric-value small,.metric-sub){color:var(--hue-ink)}
.metric-flag{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-variant-caps:normal;letter-spacing:0;font-size:10.5px;font-weight:600;border-radius:5px;padding:2px 6px;background:rgba(255,255,255,.8);color:var(--hue-ink)}
.is-low,.is-low small{color:var(--hue-ink)}
.is-low{font-weight:600}

/* Compliance fault bar (donut.js complianceBar): one segment per fault key, coloured by the
   .bc-fk-* swatches below. No legend -- hovering, clicking or focusing a segment opens the
   same CHW drill-in popover the ring used. */
.cb-bar{display:flex;gap:2px;height:6px;margin:12px 0 2px}
.cb-bar span{border-radius:3px;min-width:4px;cursor:pointer;transition:filter .15s}
.cb-bar span:hover{filter:brightness(.9)}
.cb-bar span:focus-visible{outline:2px solid var(--rose-2);outline-offset:2px}
.cb-bar.cb-empty{background:var(--line);border-radius:3px}
.tint-amber .cb-bar span,.tint-rose .cb-bar span{box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.cb-note{font-size:10.5px;color:var(--muted);margin-top:6px}

/* Cardless section: the same .card (so collapse, drag and masonry measuring all still apply),
   minus the box. A Georgia heading over an ink rule carries the structure instead. The bottom
   padding is part of the measured height, so the masonry leaves room under it with no JS
   change. */
.card.card--flat{border:0;border-radius:0;background:transparent;box-shadow:none;padding-bottom:22px}
.card--flat > .card-head{padding:0 0 9px;border-bottom:1px solid var(--ink)}
/* Out-specifies home.html's `.card.is-collapsed > .card-head{border-bottom:none}`: a collapsed
   flat section still needs its rule, or nothing marks where it is. */
.card.card--flat.is-collapsed > .card-head{border-bottom:1px solid var(--ink)}
.card--flat > .card-head h3{font-size:20px;font-weight:400;letter-spacing:-.01em}
.card--flat .card-head .qa-status{font-family:Georgia,serif;font-style:italic;font-size:11.5px}
.card--flat > .card-body,.card--flat > .schedule{padding:14px 0 0}
.card--flat .teamtable :is(th,td):first-child{padding-left:0}
.card--flat .teamtable :is(th,td):last-child{padding-right:0}
.card--flat .schedule-grid .dname{font-family:Georgia,serif;font-size:12px;font-variant-caps:all-small-caps;letter-spacing:.08em}
.snap{padding:14px 18px 16px;display:flex;flex-direction:column;gap:10px}
.snap-row{display:flex;justify-content:space-between;align-items:center;font-size:10px}
.snap-bar{flex:1;margin:0 10px;height:6px;border-radius:9px;background:var(--track);overflow:hidden}
.snap-bar span{display:block;height:100%;background:var(--progress-fill, linear-gradient(90deg,#ee8ea0,#ed9aaa))}
.list{padding:1px 14px 11px}
.list-row{display:flex;gap:9px;align-items:center;border-bottom:1px solid var(--line-soft);padding:10px 4px;font-size:10px}
.list-row:last-child{border-bottom:0}
.icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}
/* --- weekend report form --- */
form.wr{max-width:640px;display:flex;flex-direction:column;gap:16px}
fieldset{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--paper)}
legend{font-family:Georgia,serif;font-size:13px;padding:0 6px}
label{display:block;font-size:11.5px;font-weight:600;margin:10px 0 4px}
input[type=text],input[type=number],input[type=date],input[type=time],select{width:100%;padding:8px 9px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;background:var(--paper);color:var(--ink)}
input[type=text]:focus,input[type=number]:focus,input[type=date]:focus,input[type=time]:focus,select:focus{outline:none;border-color:var(--rose-2);box-shadow:0 0 0 3px var(--rose-soft)}
input[readonly]{background:var(--surface-2);color:var(--muted)}
input:disabled,select:disabled{background:var(--surface-2);color:var(--muted);border-color:var(--line-soft);cursor:not-allowed;opacity:.75}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d85f75' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;cursor:pointer}
select option{background:var(--paper);color:var(--ink)}
select option:checked{background:var(--rose-soft)}
select option:hover{background:var(--hover-bg)}
.cs{position:relative}
.cs-trigger{width:100%;text-align:left;padding:8px 9px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;background-color:var(--paper);color:var(--ink);cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d85f75' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;font-family:inherit}
.cs-trigger:focus,.cs.open .cs-trigger{outline:none;border-color:var(--rose-2);box-shadow:0 0 0 3px var(--rose-soft)}
.cs-menu{position:absolute;left:0;right:0;top:100%;z-index:20;margin:4px 0 0;padding:4px;list-style:none;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);max-height:240px;overflow-y:auto;
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top center;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .25s cubic-bezier(.2,.7,.2,1),visibility 0s .25s}
.cs.open .cs-menu{opacity:1;transform:none;visibility:visible;pointer-events:auto;
  transition:opacity .3s ease,transform .35s cubic-bezier(.25,.8,.25,1),visibility 0s}
.cs-menu li{transition:background-color .15s ease}
.cs-menu li{padding:8px 10px;border-radius:6px;font-size:12.5px;cursor:pointer}
.cs-menu li:hover,.cs-menu li.selected{background:var(--rose-soft)}
#form-error{color:#b00020;font-size:12px;white-space:pre-wrap}
/* Weekend report submitted: form fades out, confirmation fades in with a drawn check mark. */
form.wr{transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
form.wr.leaving{opacity:0;transform:translateY(8px);pointer-events:none}
form.wr[hidden],form.wr.slip[hidden]{display:none}
.wr-done{position:relative;min-height:60vh;display:flex;align-items:center;justify-content:center;padding:56px 16px 24px}
.wr-done[hidden]{display:none}
.wr-back{position:absolute;top:0;left:0;font-size:13px}
.wr-done-body{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;max-width:640px;
  opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .6s cubic-bezier(.25,.8,.25,1)}
.wr-done.in .wr-done-body{opacity:1;transform:none}
.wr-check{width:88px;height:88px;fill:none;stroke:var(--rose);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.wr-check-ring{stroke-dasharray:151;stroke-dashoffset:151}
.wr-check-tick{stroke-width:3.5;stroke-dasharray:36;stroke-dashoffset:36}
.wr-done.in .wr-check{animation:wr-pop .45s cubic-bezier(.25,.8,.25,1) 1.05s both}
.wr-done.in .wr-check-ring{animation:wr-draw .7s cubic-bezier(.65,0,.35,1) .2s forwards}
.wr-done.in .wr-check-tick{animation:wr-draw .4s cubic-bezier(.65,0,.35,1) .8s forwards}
@keyframes wr-draw{to{stroke-dashoffset:0}}
@keyframes wr-pop{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.wr-done-msg{font-family:Georgia,serif;font-size:18px;line-height:1.5;color:var(--ink);margin:0}
.wr-done-when{white-space:nowrap}
@media (max-width:560px){.wr-done-when{white-space:normal}}
@media (prefers-reduced-motion:reduce){
  form.wr,.wr-done-body{transition:none}
  .wr-done.in .wr-check,.wr-done.in .wr-check-ring,.wr-done.in .wr-check-tick{animation:none;stroke-dashoffset:0}
}

/* One pastel per flag type (compliance.js FLAG_GROUP): Compliance, My Compliance, CHW check-ins.
   Dark values sit with the other dark tokens below. */
:root{
  --flag-calls-bg:#fde2e2;--flag-calls:#c0504d;
  --flag-texts-bg:#dde9fb;--flag-texts:#3f6fb5;
  --flag-soap-bg:#dcf2e0;--flag-soap:#3f8a55;
  --flag-flyers-bg:#ebe1f8;--flag-flyers:#7a52b3;
  --flag-billing-bg:#fdf3c4;--flag-billing:#a8860f;
  --flag-other-bg:#fde4cc;--flag-other:#c06a1f;
}
.fg-calls{--hl:var(--flag-calls);--hl-bg:var(--flag-calls-bg)}
.fg-texts{--hl:var(--flag-texts);--hl-bg:var(--flag-texts-bg)}
.fg-soap{--hl:var(--flag-soap);--hl-bg:var(--flag-soap-bg)}
.fg-flyers{--hl:var(--flag-flyers);--hl-bg:var(--flag-flyers-bg)}
.fg-billing{--hl:var(--flag-billing);--hl-bg:var(--flag-billing-bg)}
.fg-other{--hl:var(--flag-other);--hl-bg:var(--flag-other-bg)}

/* --- CHW check-in slip (checkin_slip.js): My Compliance and the supervisor's preview ---------- */
/* Full content width, like the Forms slip, text included. */
#results-section > .ck-slip{margin-bottom:18px}
.ck-slip p{margin:0 0 12px;font-size:13.5px;line-height:1.65;white-space:pre-wrap}
.ck-slip .slip-head{margin-bottom:16px}
.ck-list{list-style:none;margin:0 0 16px;padding:0}
/* A fixed chip column wide enough for the longest label ("Dates and times") on one line, so
   every chip is the same size and every note starts at the same edge. */
.ck-list li{display:grid;grid-template-columns:112px minmax(0,1fr);gap:4px 14px;padding:12px 0;border-top:1px solid var(--paper-rule)}
.ck-list li:last-child{border-bottom:1px solid var(--paper-rule)}
.ck-chip{align-self:start;justify-self:start;max-width:100%;box-sizing:border-box;margin-top:2px;display:inline-flex;align-items:center;font-size:11px;font-weight:600;line-height:1.25;color:var(--hl);background:var(--hl-bg);padding:3px 8px;border-radius:7px;white-space:normal}
.ck-list li div{font-size:13.5px;line-height:1.6;white-space:pre-wrap}
.ck-list li b{display:block;font-family:Georgia,serif;font-weight:400;font-size:14.5px}
.ck-list .ck-chip{width:100%;justify-content:center;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-none{font-family:Georgia,serif;font-style:italic;color:var(--muted)}
.ck-sig{margin-top:6px;font-family:Georgia,serif;font-style:italic;font-size:13px;color:var(--muted)}
.ck-held-note{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--surface-2);border:1px dashed var(--line);font-size:12px;color:var(--muted)}
@media (max-width:850px){.ck-list li{grid-template-columns:1fr}.ck-list .ck-chip{width:auto}}

/* --- paper slip (Forms + Weekend Report) ---------------------------------------------------
   A front-desk paper form: cream slip with a perforated top edge, underline-only fields, inked
   checkboxes, a ruled timesheet with a double-ruled total, and outlined stamp buttons. Every rule
   is scoped under .slip because label/input/fieldset/.segmented carry global styles other pages
   rely on. Used by forms.html, weekend_report.html and the CHW check-in slip. */
.slip{
  --paper:var(--tile-bg);--paper-line:#efd6db;--paper-rule:#f3e0e3;--paper-ink-line:#d9b9c0;--perf:#e5c4cb;
  position:relative;background:var(--paper);border:1px solid var(--paper-line);border-radius:3px;
  box-shadow:0 1px 0 var(--paper-line),0 18px 30px -22px rgba(69,42,29,.45);padding:26px 30px 28px;
}
/* Perforated top edge: half-circle notches punched in the page colour, each outlined in the
   slip's edge colour so the cut reads as paper edge rather than a gap in the border. */
.slip::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:8px;pointer-events:none;
  background:radial-gradient(circle at 6px -1px,var(--bg) 4px,#efd6db 4px 5px,transparent 5.5px) 0 0/12px 8px repeat-x}
.slip + .slip,.slip[hidden] + .slip{margin-top:22px}
/* Several slip pieces set display (flex/grid), which would otherwise beat the hidden attribute. */
.slip [hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
form.wr.slip{max-width:860px;display:block;gap:0}
.slip h2{font-family:Georgia,serif;font-weight:400;font-size:24px;letter-spacing:-.01em;margin:3px 0 0}
.slip-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.slip-week{text-align:right}
.slip-week .ledger-figure{display:block;font-size:24px;color:var(--rose-ink)}
.slip-date{display:block;margin-top:5px;font-family:Georgia,serif;font-style:italic;font-size:12px;color:var(--muted)}
/* Section divider: a tear line with the section name set in its middle. */
.perf{display:flex;align-items:center;gap:12px;margin:28px 0 14px}
.perf::before,.perf::after{content:"";flex:1;border-top:1.5px dashed var(--perf)}
.perf .ledger-label{color:var(--ink);text-align:center}
.slip .field-hint{margin:0 0 10px;font-size:11px;color:var(--muted)}

/* Fields: underlines on paper, not boxes. */
.slip label{margin:0;font-weight:400}
.slip .f{display:block;margin:0 0 2px}
.slip :is(input[type=text],input[type=number],input[type=time],select),.slip .cs-trigger{
  border:0;border-bottom:1px solid var(--paper-ink-line);border-radius:0;background-color:transparent;
  padding:7px 2px;box-shadow:none;font-size:12.5px;color:var(--ink)}
.slip .cs-trigger{background-position:right 4px center}
.slip :is(input,select):focus,.slip .cs-trigger:focus,.slip .cs.open .cs-trigger{
  outline:none;box-shadow:none;border-bottom:2px solid var(--rose-ink);padding-bottom:6px}
.slip input[readonly]{background:transparent;color:var(--ink)}
.slip input:disabled{opacity:.35;cursor:not-allowed}
.slip input[type=checkbox],.slip input[type=radio]{
  appearance:none;-webkit-appearance:none;width:15px;height:15px;margin:0;flex:none;border:1.5px solid var(--ink);
  border-radius:2px;background:var(--paper);display:inline-grid;place-items:center;cursor:pointer;vertical-align:-3px}
.slip input[type=radio]{border-radius:50%}
/* The X always exists and is absolutely centred (as the radio dot below): inserting it on
   :checked let Chrome draw it at the top edge until something else forced a repaint. */
.slip input[type=checkbox]{position:relative}
.slip input[type=checkbox]::after{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;
  background:linear-gradient(45deg,transparent 43%,var(--ink) 43% 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,var(--ink) 43% 57%,transparent 57%);
  transform:scale(0);transition:transform .18s cubic-bezier(.25,.8,.25,1)}
.slip input[type=checkbox]:checked::after{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.slip input[type=checkbox]::after{transition:none}}
/* Dot always exists and is absolutely centred: inserting it on :checked let Chrome place it at
   the top until the next repaint. It scales in when picked. */
.slip input[type=radio]{position:relative}
.slip input[type=radio]::after{content:"";position:absolute;inset:0;margin:auto;width:7px;height:7px;border-radius:50%;
  background:var(--ink);transform:scale(0);transition:transform .2s cubic-bezier(.25,.8,.25,1)}
.slip input[type=radio]:checked::after{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.slip input[type=radio]::after{transition:none}}
.slip :is(input[type=checkbox],input[type=radio]):focus-visible{outline:2px solid var(--rose-2);outline-offset:2px}
.ufields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px}

/* Timesheet. */
.ts-wrap{overflow-x:auto}
.ts{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ts th{font-family:Georgia,serif;font-size:12px;font-weight:400;font-variant-caps:all-small-caps;letter-spacing:.08em;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--ink);white-space:nowrap}
.ts td{padding:4px 8px;border-bottom:1px solid var(--paper-rule);height:40px;vertical-align:middle}
.ts :is(th,td):first-child{padding-left:0}
.ts :is(th,td):last-child{padding-right:0;text-align:right}
.ts .dn{font-family:Georgia,serif;font-size:14px;white-space:nowrap}
.ts tr.is-off .dn{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--paper-ink-line)}
.ts td.ck{width:56px}
.ts input[type=time]{min-width:110px}
.ts .hrs{font-family:var(--numeral);font-weight:500;font-size:18px;min-width:52px}
.ts .hrs small{font-size:.6em;font-weight:400;color:var(--muted)}
.ts tr.lunch-locked .lunch-toggle{cursor:not-allowed}
.ts [hidden]{display:none!important}
.ts .split-add{margin-left:8px;font-size:12px;opacity:0;transform:translateX(-6px);visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.2,1),text-decoration-color .3s ease,outline-color .3s ease,visibility 0s .35s}
.ts .split-add.shown{opacity:1;transform:none;visibility:visible;pointer-events:auto;
  transition:opacity .45s ease,transform .5s cubic-bezier(.25,.8,.25,1),visibility 0s}
@media (prefers-reduced-motion:reduce){.ts .split-add{transition:none!important}}
.ts .split-row .dn{padding-left:12px;color:var(--muted)}
/* Weekend report: split-schedule + Cairo-time toggles share a line; Cairo column slides out on the right. */
.sched-opts{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 16px}
/* Flex-centre the boxes: a ticked checkbox otherwise changes its baseline and nudges the table 2px. */
.sched-opts label{display:inline-flex;align-items:center;gap:6px}
.sched-opts input[type=checkbox]{vertical-align:0}
.ts td.hrs{text-align:right}
.ts :is(th,td).cairo-col{padding:0;text-align:left;border-left:2px solid transparent;background:transparent;
  transition:padding .35s cubic-bezier(.2,.7,.2,1),background-color .35s,border-color .35s}
.ts .cairo-inner{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .35s cubic-bezier(.2,.7,.2,1),opacity .25s ease}
/* Slide lives on a child so .cairo-inner clips it; nothing pokes past the table and flashes a scrollbar. */
.ts .cairo-slide{display:inline-block;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ts.cairo-on :is(th,td).cairo-col{padding:4px 10px 4px 14px;border-left-color:var(--rose-2);background:color-mix(in srgb,var(--rose-2) 9%,transparent)}
.ts.cairo-on .cairo-inner{max-width:16rem;opacity:1}
.ts.cairo-on .cairo-slide{transform:none}
/* Opening runs slower than closing (transition on the target state applies on the way in). */
.ts.cairo-on :is(th,td).cairo-col{transition:padding .6s cubic-bezier(.25,.8,.25,1),background-color .6s,border-color .6s}
.ts.cairo-on .cairo-inner{transition:max-width .6s cubic-bezier(.25,.8,.25,1),opacity .5s ease .1s}
.ts.cairo-on .cairo-slide{transition:transform .65s cubic-bezier(.25,.8,.25,1)}
/* Same face/size as the time inputs (their font is the browser's; JS copies it into --ts-time-font). */
.ts td.cairo-col{font-family:var(--ts-time-font,inherit);font-size:var(--ts-time-size,12.5px)}
.ts .cairo-col small{color:var(--muted)}
@media (prefers-reduced-motion:reduce){.ts :is(th,td).cairo-col,.ts .cairo-inner,.ts .cairo-slide,.ts.cairo-on :is(th,td).cairo-col,.ts.cairo-on .cairo-inner,.ts.cairo-on .cairo-slide{transition:none}}
/* 2nd-shift row slides open/closed: cells collapse to 0 and their .sx content folds away. */
.ts .split-row td{height:0;border-bottom-color:transparent;transition:height .35s cubic-bezier(.2,.7,.2,1),padding .35s cubic-bezier(.2,.7,.2,1),border-color .35s}
.ts .split-row:not(.open) td{padding-top:0!important;padding-bottom:0!important}
.ts .split-row .sx{max-height:0;opacity:0;transform:translateY(-6px);overflow:clip;overflow-clip-margin:4px;
  transition:max-height .35s cubic-bezier(.2,.7,.2,1),opacity .2s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.ts .split-row.open td{height:36px;border-bottom-color:var(--paper-rule);
  transition:height .5s cubic-bezier(.25,.8,.25,1),padding .5s cubic-bezier(.25,.8,.25,1),border-color .5s}
.ts .split-row.open .sx{max-height:48px;opacity:1;transform:none;
  transition:max-height .5s cubic-bezier(.25,.8,.25,1),opacity .4s ease .1s,transform .5s cubic-bezier(.25,.8,.25,1)}
.ts td.hrs-cell{text-align:right}
/* 2nd-shift content takes no part in column sizing (columns follow the day rows), so showing or
   hiding the row can't nudge the columns. Cairo cell exempt: its times may be wider. */
.ts .split-row .sx:not(.cairo-cell){contain:inline-size;min-width:100%}
.ts .split-row.open .dn .sx{max-height:72px} /* room for a wrapped error message */
@media (prefers-reduced-motion:reduce){.ts .split-row td,.ts .split-row .sx{transition:none!important}}
.ts .split-row.bad .dn,.ts .split-row.bad .hrs{color:#b3261e}
.ts .split-msg{color:#b3261e;white-space:normal}
.totbox{display:flex;justify-content:flex-end;margin-top:14px}
.totbox > div{border:3px double var(--ink);padding:8px 16px;text-align:right;min-width:170px}
.totbox .ledger-figure{display:block;font-size:34px;margin-top:3px}

/* Stamp button: outlined rose ink, inks in on hover. */
.stamp-btn{display:inline-flex;align-items:center;justify-content:center;font:600 12px/1 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.06em;text-transform:uppercase;padding:11px 18px;border:2px solid var(--rose-ink);border-radius:4px;
  background:transparent;color:var(--rose-ink);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color .15s,color .15s,transform .15s,width .38s cubic-bezier(.22,1,.36,1),padding .38s cubic-bezier(.22,1,.36,1)}
/* Submitting: label fades, button folds to a square (--sq = its height), then spins (as login). */
.stamp-btn.is-sizing{overflow:hidden}
.stamp-btn.is-loading,.stamp-btn.is-loading:disabled{width:var(--sq,40px)!important;padding-left:0;padding-right:0;overflow:hidden;color:transparent;background:var(--rose-ink);opacity:1;cursor:progress;pointer-events:none}
.stamp-btn.is-spinning{animation:wr-spin .9s linear infinite}
@keyframes wr-spin{to{transform:rotate(360deg)}}
@keyframes wr-pulse{from{opacity:1}to{opacity:.45}}
@media (prefers-reduced-motion:reduce){
  .stamp-btn,.cs-menu,.cs.open .cs-menu,.slip .link-row,#link-rows,.slip-link,.hm-row input{transition:none!important}
  .stamp-btn.is-spinning{animation:wr-pulse 1.2s ease-in-out infinite alternate}
}
.stamp-btn:hover:not(:disabled){background:var(--rose-ink);color:#fff;transform:rotate(-1deg)}
.stamp-btn:active:not(:disabled){transform:rotate(-1deg) scale(.97)}
.stamp-btn:focus-visible{outline:2px solid var(--rose-2);outline-offset:2px}
.stamp-btn:disabled{opacity:.5;cursor:not-allowed}
/* Text-only action on paper (add a line, remove, show all). */
.slip-link{background:none;border:0;padding:4px 0;font-size:11.5px;color:var(--rose-ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rose-2)}
.slip-link:hover{text-decoration-color:var(--rose-ink)}

/* Intake links. */
.slip .link-row{display:flex;gap:12px;align-items:flex-end;margin-bottom:6px;max-height:64px;
  transition:max-height .4s cubic-bezier(.25,.8,.25,1),opacity .3s ease,transform .4s cubic-bezier(.25,.8,.25,1),margin-bottom .4s cubic-bezier(.25,.8,.25,1)}
.slip .link-row.entering,.slip .link-row.leaving{max-height:0;opacity:0;transform:translateY(-4px);margin-bottom:0;overflow:clip;overflow-clip-margin:4px}
.slip .link-row.leaving{pointer-events:none}
.slip .link-row input{flex:1;min-width:0}
.links-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.links-actions .hm-na{margin-left:0}
#link-rows{transition:opacity .3s ease}
#link-rows.is-na{opacity:.4}
.slip-link,.hm-row input{transition:opacity .3s ease,background-color .3s ease,color .3s ease,text-decoration-color .3s ease}
.slip-link:disabled{opacity:.4;cursor:not-allowed;text-decoration-color:transparent}

/* Yes / No with a line of explanation under each answer. */
.yn{display:flex;gap:36px;flex-wrap:wrap;margin-top:8px}
.yn label{display:grid;grid-template-columns:15px auto;column-gap:10px;align-items:center;cursor:pointer}
.yn .ans{font-family:Georgia,serif;font-size:15px}
.yn .sub{grid-column:2;font-size:11.5px;color:var(--muted);margin-top:1px}
/* Radio centred against both lines (answer + sub), not pinned to the first. */
.yn input[type=radio]{grid-row:1 / span 2;align-self:center}

/* Billing weeks: one ruled row per week, each still its own <fieldset> so the carried week can
   be disabled wholesale. */
.bill-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);gap:0 14px;align-items:center}
.bill-head{border-bottom:1px solid var(--ink);padding:6px 0}
.bill-head .ledger-label{font-size:12px}
.bill-head .ledger-label:last-child{text-align:right}
.slip fieldset.billing-week{border:0;border-radius:0;background:none;padding:0;margin:0;min-width:0}
.billing-week .bill-grid{padding:8px 0;border-bottom:1px solid var(--paper-rule);min-height:48px}
.billing-week .wk{font-family:Georgia,serif;font-size:14px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.billing-week .week-tag{font:600 10px/1 Inter,ui-sans-serif,sans-serif;color:var(--rose-ink);background:var(--rose-soft);border-radius:5px;padding:3px 6px}
.billing-week .carried-tag{font-family:Georgia,serif;font-style:italic;font-size:12px;color:var(--muted)}
.billing-week .bill-actual{text-align:right;font-family:var(--numeral);font-size:15px}
.billing-week.inactive .wk{color:var(--muted)}
.billing-week.inactive input:disabled{opacity:1;color:var(--muted)}
.hm-row{display:flex;align-items:flex-end;gap:6px;flex-wrap:wrap}
.hm-row input[type=number]{width:48px;text-align:center}
.hm-row span{font-size:11.5px;color:var(--muted)}
.hm-na{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;margin-left:8px}
.slip .carried{font-weight:600}
.slip .carried-hint{margin:6px 0 0}

/* Signature + submit. */
.sign{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:32px}
.sign-line{flex:1;min-width:220px}
.sign-name{border-bottom:1px solid var(--ink);padding-bottom:4px;min-height:30px;font-family:Georgia,serif;font-style:italic;font-size:18px}
.sign-line .ledger-label{display:block;margin-top:4px;font-size:12px}
.sign-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px}

/* Forms hub: the form pad, the timesheet editor's roster index, and submission stubs. */
.pad{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end}
.pad p{margin:8px 0 0;color:var(--muted);font-size:12.5px;max-width:52ch}
.sheet{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:28px;margin-top:18px}
.sheet .index{border-right:1px solid var(--paper-rule);padding-right:18px;min-width:0}
.sheet .index input.viewer-search{margin:0 0 6px;font-size:12px}
.ts-roster{max-height:340px;overflow-y:auto}
.ts-group{margin:14px 0 2px;font-size:12px}
.ts-group:first-child{margin-top:6px}
.ts-roster-row{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid #f3e0e3;font-size:12.5px;cursor:pointer;transition:color .15s}
.ts-roster-row:hover{color:var(--rose-ink)}
.ts-roster-row.selected{font-weight:600;color:var(--rose-ink)}
.ts-roster-row.selected::after{content:"\2190";font-weight:400}
.ts-roster-row.none{cursor:default;color:var(--muted)}
.ed-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ed-name{font-family:Georgia,serif;font-size:20px}
.ed-week{font-family:Georgia,serif;font-style:italic;font-size:12px;color:var(--muted)}
.ed-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:16px}
.slip .segmented{gap:16px}
.slip .seg-opt{border:0;border-radius:0;background:none;padding:2px 0;font-size:12px;color:var(--muted);border-bottom:1.5px solid transparent}
.slip .seg-opt.checked{background:none;color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.slip .seg-opt::before,.slip .seg-opt::after{display:none}
.slip .seg-opt:has(input:focus-visible){outline:2px solid var(--rose-2);outline-offset:2px}
.slip .empty{padding:14px 0;color:var(--muted);font-size:12px}
.stubs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stub{position:relative;background:var(--tile-bg);border:1px solid #efd6db;border-radius:3px;padding:14px 14px 16px 18px;box-shadow:0 10px 18px -16px rgba(69,42,29,.5);min-width:0}
/* Torn-off left edge: the same outlined half-circle notches as the slip's top, run vertically. */
.stub::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:8px;pointer-events:none;
  background:radial-gradient(circle at -1px 6px,var(--bg) 4px,#efd6db 4px 5px,transparent 5.5px) 0 0/8px 12px repeat-y}
.stub .ledger-figure{font-size:26px;display:block}
.stub-who{font-family:Georgia,serif;font-size:15px;margin-top:6px;overflow-wrap:anywhere}
.stub-meta{font-size:11px;color:var(--muted)}
.stamp{position:absolute;right:10px;top:12px;transform:rotate(-8deg);border:1.5px solid var(--rose-ink);color:var(--rose-ink);border-radius:4px;padding:1px 6px;font-family:Georgia,serif;font-size:12px;font-variant-caps:all-small-caps;letter-spacing:.1em;opacity:.85}
.stamp.filed{border-color:#d9b9c0;color:var(--muted)}
.stubs-more{margin-top:12px}
@media(max-width:1000px){.stubs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .slip{padding:22px 16px}
  .pad,.sheet,.ufields{grid-template-columns:minmax(0,1fr)}
  .sheet .index{border-right:0;padding-right:0;border-bottom:1px solid var(--paper-rule);padding-bottom:12px}
  .ts-roster{max-height:200px}
  .ts{min-width:540px}
  /* Header and week rows share one grid template, so letting all four minmax(0,…) columns
     shrink together keeps them aligned; a min-width on the scroll wrapper's children only
     reached the header (fieldset.billing-week's min-width:0 out-specifies it). */
  .bill-grid{gap:0 8px}
  .hm-row input[type=number]{width:40px}
  .stubs{grid-template-columns:minmax(0,1fr)}
  .sign-actions{align-items:stretch;width:100%}
}
/* Too narrow for the date range in its own column: it drops to a second line under Week and
   Billed. Header and rows place their four children by the same areas, so they stay aligned. */
@media(max-width:560px){
  .bill-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,.8fr);grid-template-areas:"wk billed hub" "dates dates hub";row-gap:4px}
  .bill-grid > :nth-child(1){grid-area:wk}
  .bill-grid > :nth-child(2){grid-area:dates}
  .bill-grid > :nth-child(3){grid-area:billed}
  .bill-grid > :nth-child(4){grid-area:hub}
  .bill-head > :nth-child(2){display:none}
}

/* --- intern program / hour tracking --- */
.time-remaining{padding:18px 22px 20px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.big-progress{height:14px;border-radius:12px;background:var(--track);overflow:hidden}
.big-progress span{display:block;height:100%;background:var(--progress-fill, linear-gradient(90deg,#ee8ea0,#ed9aaa));border-radius:inherit}
.tr-label{font-family:Georgia,serif;font-size:12px;font-variant-caps:all-small-caps;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.tr-value{font-family:var(--numeral);font-size:34px;font-weight:500;line-height:1;letter-spacing:-.02em;font-variant-numeric:lining-nums}
.tr-value small{font-size:.45em;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:2px}
.tr-note{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px;font-size:10px;color:var(--muted);line-height:1.6;margin-top:14px}
.tr-note b{color:var(--ink)}
.est-box{border:1px solid var(--line);border-radius:10px;padding:14px 18px;text-align:center;min-width:150px}
.est-box .lbl{font-family:Georgia,serif;font-size:12px;font-variant-caps:all-small-caps;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.est-box .val{font-family:Georgia,serif;font-size:15px;font-weight:700}
.hourstable{width:100%;border-collapse:collapse}
/* Table headers app-wide: Georgia small caps, the Ledger label voice. Cells stay Inter. */
.hourstable th{font-family:Georgia,serif;font-size:12px;font-weight:400;font-variant-caps:all-small-caps;letter-spacing:.08em;text-align:left;padding:8px 14px;border-bottom:1px solid var(--line-soft);color:var(--muted)}
.hourstable td{padding:10px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle;font-size:10px}
.mini-progress{width:96px;height:6px;background:var(--track);border-radius:9px;overflow:hidden}
.mini-progress span{display:block;height:100%;background:var(--progress-fill, linear-gradient(90deg,#ee8ea0,#ed9aaa))}

/* --- animated pill button (ported from compliance.html) --- */
@property --btn-ring-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn{
  position:relative;display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(38,22,17,.08);border-radius:999px;padding:9px 18px;font-size:12px;font-weight:700;
  cursor:pointer;background:var(--btn-bg, linear-gradient(180deg,#fbfbfb,#f5f5f5));color:var(--ink);box-shadow:var(--shadow);
  transform:translateY(0) scale(1);transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.16,1,.3,1),border-color .18s,background-color .18s,color .15s,
    width .38s cubic-bezier(.22,1,.36,1),padding .38s cubic-bezier(.22,1,.36,1),border-radius .38s cubic-bezier(.22,1,.36,1);
}
.btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;opacity:0;pointer-events:none;
  padding:2px;box-sizing:border-box;
  background:conic-gradient(from var(--btn-ring-angle),
    #1a1a1a 0deg,#f0f0f0 10deg,#3a3a3a 20deg,#f4c542 35deg,#ff7a3d 42deg,
    #222 50deg,#fff 62deg,#888 72deg,#1a1a1a 82deg,#ddd 90deg,
    #333 102deg,#ccc 115deg,#1a1a1a 125deg,#5ad1ff 140deg,#6a5cff 148deg,
    #222 156deg,#fff 168deg,#777 180deg,#1a1a1a 190deg,#eee 200deg,
    #333 212deg,#ccc 225deg,#7fe08a 233deg,#ff5d5d 241deg,
    #222 249deg,#fff 261deg,#888 271deg,#1a1a1a 281deg,#ddd 290deg,
    #333 302deg,#ccc 315deg,#ffb84d 322deg,#c866f0 330deg,
    #1a1a1a 338deg,#f0f0f0 349deg,#1a1a1a 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  transition:opacity .25s cubic-bezier(.16,1,.3,1);
  animation:btn-ring-spin 16s linear infinite;animation-play-state:paused;
}
.btn:hover::before,.btn:focus-visible::before{opacity:1;animation-play-state:running}
@keyframes btn-ring-spin{to{--btn-ring-angle:360deg}}
/* Customization page's button-style toggle: solid swaps the animated rainbow ring for a flat
   accent color and stops the spin (nothing to rotate on a single-color ring). */
:root[data-btn-style="solid"] .btn::before{background:var(--btn-accent);animation:none}
@media (prefers-reduced-motion: reduce){.btn::before{animation:none}}
.btn.secondary{background:var(--btn-bg, linear-gradient(180deg,#fbfbfb,#f5f5f5))}
.btn.rose{background:var(--btn-bg, linear-gradient(180deg,#fbfbfb,#f5f5f5))}
.btn.danger{background:linear-gradient(180deg,#e14b4b,#c53030);color:#fff;border-color:rgba(0,0,0,.12)}
.btn:disabled,button.btn:disabled{opacity:1;cursor:not-allowed;background:var(--disabled-bg);color:#8a817b;border-color:#d6d1ce;box-shadow:none}
.btn:disabled::before{display:none}
button.btn.btn:disabled{background:var(--disabled-bg);color:#8a817b;border-color:#d6d1ce}
.btn:hover:not(:disabled){transform:translateY(-2px) scale(1);box-shadow:var(--shadow),0 6px 16px -8px rgba(69,42,29,.3)}
.btn:active:not(:disabled){transform:translateY(0) scale(.96);box-shadow:var(--shadow);transition-duration:.08s}
.btn .icon{width:15px;height:15px;stroke-width:2}
.btn:focus-visible{outline:2px solid var(--rose-2);outline-offset:2px}
/* Busy (btn_busy.js): the label fades, the button folds to a square (--sq = its height) and
   spins, as the login button does; it unfolds to its new label when done. is-sizing holds the
   label on one line while the width glides. !important: a busy button is disabled, and the
   disabled greys (light and dark) would otherwise show through. */
.btn.is-loading,.btn.is-sizing{white-space:nowrap;overflow:hidden;justify-content:center}
.btn.is-loading,.btn.is-loading:disabled{width:var(--sq,36px)!important;padding-left:0!important;padding-right:0!important;gap:0;
  color:transparent!important;-webkit-text-fill-color:transparent;border-radius:9px!important;opacity:1;cursor:progress;pointer-events:none;
  background:var(--rose)!important;border-color:transparent!important;box-shadow:none}
.btn.flush.is-loading,.btn.flush.is-loading:disabled,.btn.secondary.is-loading,.btn.secondary.is-loading:disabled{background:var(--rose-flush)!important;border-color:#f1c9d1!important}
.btn.danger.is-loading,.btn.danger.is-loading:disabled{background:#c53030!important}
.btn.is-loading::before{display:none}
.btn.is-loading > *{opacity:0}
/* The explicit from: .btn carries a base transform (translateY(0) scale(1)), and blending that into
   rotate(360deg) goes through matrices -- 360deg is the identity, so it would never visibly turn. */
.btn.is-spinning{animation:btn-busy-spin .9s linear infinite}
@keyframes btn-busy-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes btn-busy-pulse{from{opacity:1}to{opacity:.45}}
/* swapLabel: the new label fades in while the width glides. */
.btn.is-relabel,.stamp-btn.is-relabel{animation:btn-relabel .28s cubic-bezier(.22,1,.36,1)}
@keyframes btn-relabel{from{color:transparent}}
@media (prefers-reduced-motion: reduce){
  .btn{transition-property:transform,box-shadow,border-color,background-color,color} /* no fold or glide */
  .btn.is-spinning{animation:btn-busy-pulse 1.2s ease-in-out infinite alternate}
  .btn.is-relabel,.stamp-btn.is-relabel{animation:none}
}

/* --- search box + result list (ported from compliance.html) --- */
/* input.viewer-search, not .viewer-search: every search box is <input type="text">, and the
   generic input[type=text] rules above match on type too (specificity 0,1,1 / 0,2,1) -- a
   bare class selector (0,1,0 / 0,2,0) loses that tiebreak regardless of source order, which
   silently discarded --search-bg/--search-highlight in favor of the generic white/rose rule. */
input.viewer-search{border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:11.5px;font-family:inherit;margin-bottom:8px;background:var(--search-bg);color:var(--ink);width:100%}
input.viewer-search:focus{outline:none;border-color:var(--search-highlight);box-shadow:0 0 0 3px color-mix(in srgb, var(--search-highlight) 30%, transparent)}
.viewer-list{border:1px solid var(--line-soft);border-radius:10px;max-height:220px;overflow:auto;background:var(--surface)}
.viewer-row{padding:8px 11px;font-size:11px;cursor:pointer;border-bottom:1px solid var(--line-soft);transition:background .15s;background:var(--row-bg)}
.viewer-row:last-child{border-bottom:none}
.viewer-row:hover{background:var(--hover-bg)}
.viewer-row.selected{background:var(--rose-soft)}
.viewer-row .vr-name{font-weight:600;color:var(--ink)}
.viewer-list--team{max-height:162px}
.viewer-list--reports{max-height:182px}
/* Team-picker cards: rosters are small enough to show in full, so no inner scroll --
   only .viewer-list--team's shared max-height needs overriding, the search stays. */
.viewer-list--team-picker{max-height:none;overflow:visible}

.team-cards-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
@media(max-width:1100px){.team-cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.team-cards-grid{grid-template-columns:1fr}}
.team-card .card-head{flex-wrap:wrap;gap:8px}
.team-card .team-send-all .btn{white-space:nowrap}

.team-card .card-head{background:var(--team-accent,var(--line));border-bottom:none}
.team-card .card-head h2{color:#000}
.team-card[data-team="Diamond Team"],[data-team-accent="Diamond Team"]{--team-accent:#D6F6FF}
.team-card[data-team="Amethyst Team"],[data-team-accent="Amethyst Team"]{--team-accent:#D9C6EE}
.team-card[data-team="Emerald Team"],[data-team-accent="Emerald Team"]{--team-accent:#B5E6C6}
.team-card[data-team="Sapphire Team"],[data-team-accent="Sapphire Team"]{--team-accent:#B3C8EE}
.team-card[data-team="Training Team"],[data-team-accent="Training Team"]{--team-accent:#FFD9A0}

.cr-2col-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;align-items:start;margin-bottom:16px}
@media (min-width:860px){.cr-2col-grid{grid-template-columns:1fr 1fr}}

.cr-collapsible .card-head{cursor:pointer}
.cr-collapsible .card-head .chev{display:inline-grid;place-items:center;transition:transform .15s ease;color:var(--muted);margin-left:8px}
.cr-collapsible[aria-expanded="true"] .card-head .chev{transform:rotate(180deg)}
.cr-collapsible .card-body{display:none}

/* --- compact roster table + pill (ported from compliance.html) --- */
.teamtable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.teamtable th{font-family:Georgia,serif;font-size:12px;font-weight:400;font-variant-caps:all-small-caps;letter-spacing:.08em;text-align:left;padding:8px 14px;border-bottom:1px solid var(--line-soft);color:var(--muted)}
.teamtable td{padding:10px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle;font-size:10.5px}
.pill{display:inline-block;padding:5px 8px;border-radius:7px;background:var(--pill-ok-bg);color:var(--pill-ok-text);font-size:9px}
.pill.warn{background:var(--pill-warn-bg);color:var(--pill-warn-text)}
.pill.bad{background:var(--pill-bad-bg);color:var(--pill-bad-text)}

/* --- segmented checkbox/radio control (ported from compliance.html) --- */
@property --seg-sweep{syntax:'<angle>';inherits:false;initial-value:0deg}
.segmented{display:flex;gap:8px;flex-wrap:wrap}
.seg-opt{
  position:relative;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:9px;
  padding:9px 14px;cursor:pointer;background:var(--paper);font-size:11px;color:var(--ink);
  transform:scale(1);
  transition:transform .12s cubic-bezier(.16,1,.3,1),background .35s cubic-bezier(.16,1,.3,1),color .35s,border-color .35s;
}
.seg-opt:active{transform:scale(.94)}
.seg-opt.checked{background:var(--rose-soft);border-color:transparent;color:var(--rose-ink);font-weight:600}
.seg-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.seg-opt::before,.seg-opt::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:2px;box-sizing:border-box;
  background:conic-gradient(from 180deg,var(--rose) 0deg,var(--rose) var(--seg-sweep),transparent var(--seg-sweep));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  transition:--seg-sweep 1.4s cubic-bezier(.16,1,.3,1);
}
.seg-opt::after{transform:scaleX(-1)}
.seg-opt.checked::before,.seg-opt.checked::after{--seg-sweep:180deg}

/* --- floating popover panel (ported from compliance.html week picker) --- */
.popover-panel{
  position:absolute;top:calc(100% + 8px);right:0;z-index:20;width:320px;
  max-height:calc(100vh - 16px);overflow-y:auto;box-sizing:border-box;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:16px;
}
.popover-backdrop{position:fixed;inset:0;z-index:19;background:rgba(38,22,17,.18)}
.popover-panel .field{margin-bottom:12px}
.popover-panel .field label{display:block;font-weight:600;font-size:11px;margin-bottom:6px;color:var(--ink)}
.popover-panel input[type=text],.popover-panel input[type=email],.popover-panel input[type=date],.popover-panel input[type=number]{
  width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-size:12px;color:var(--ink);
}
.popover-panel input:focus{outline:none;border-color:var(--rose-2);box-shadow:0 0 0 3px var(--rose-soft)}
.popover-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}

/* --- label tag (view-mode display + edit-mode dropdown trigger) --- */
.label-tag{display:inline-block;padding:4px 9px;border-radius:7px;background:var(--rose-soft);color:var(--rose-ink);font-size:9.5px;font-weight:600;cursor:default}
.label-tag.editable{cursor:pointer;border:1px dashed transparent;transition:border-color .15s}
.label-tag.editable:hover{border-color:var(--rose-2)}

/* --- pagination --- */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px}
.pager .btn{padding:6px 12px;font-size:11px}
.pager .btn.active{background:var(--rose);color:#fff}
.pager-info{font-size:10.5px;color:var(--muted);margin:0 6px}

/* --- narrow-window nav drawer (sidebar.js initMobileNav) ---
   Under 850px the sidebar leaves the grid and becomes an off-canvas drawer opened from
   .mobile-bar. It is translated out rather than display:none so the nav keeps its layout and
   initNavIndicator can still measure the active row. visibility:hidden takes the closed
   drawer's links out of the tab order; its delay lets the slide-out finish first. */
/* Page changes: the browser crossfades main quickly while the sidebar stays put. The sidebar
   gets its own transition name; its old snapshot is hidden and its new layer is live and
   unanimated, so it never blinks and the nav pill's slide (sidebar.js) still plays in it.
   Desktop only -- the phone drawer is closed on arrival anyway. Firefox ignores all this. */
@view-transition{navigation:auto}
@media(min-width:851px){.sidebar{view-transition-name:sidebar}}
::view-transition-group(sidebar),::view-transition-new(sidebar){animation:none}
::view-transition-old(sidebar){display:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:.14s}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
.mobile-bar,.nav-backdrop{display:none}
@media(max-width:850px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:min(280px,85vw);height:100dvh;z-index:60;background:var(--bg);
    transform:translateX(-100%);visibility:hidden;transition:transform .25s cubic-bezier(.22,1,.36,1),visibility 0s linear .25s}
  .app.nav-open .sidebar{transform:none;visibility:visible;transition-delay:0s;box-shadow:0 0 40px rgba(38,22,17,.18)}
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:55;background:rgba(38,22,17,.35);opacity:0;pointer-events:none;transition:opacity .25s}
  .app.nav-open .nav-backdrop{opacity:1;pointer-events:auto}
  .mobile-bar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:40;margin:-16px -16px 14px;padding:10px 16px;background:var(--bg);border-bottom:1px solid var(--line)}
  .mobile-bar .brand{padding:0;gap:9px;justify-content:flex-start}
  .mobile-bar .brand-logo{height:34px}
  .mobile-bar .brand-wordmark .wm-1,.mobile-bar .brand-wordmark .wm-2{font-size:14px}
  .mobile-bar .brand-wordmark .wm-2{padding-left:10px}
  .mobile-bar .brand-wordmark .wm-3{display:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);cursor:pointer;flex:none}
  .nav-toggle:hover{background:var(--peach)}
  .nav-toggle:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
  body.nav-locked{overflow:hidden}
  .topbar{flex-wrap:wrap;gap:10px}
  .top-actions{flex-wrap:wrap}
  main{padding:16px}
  .grid{grid-template-columns:1fr}
  .schedule-grid{grid-template-columns:repeat(6,minmax(44px,1fr));overflow-x:auto}
  .time-remaining{grid-template-columns:1fr}
  .hourstable{display:block;overflow-x:auto}
  .teamtable{display:block;overflow-x:auto}
}

/* ---- Compliance fault-breakdown donut (see /app/donut.js) ----
   Shared by home.html's billing team cards and team.html's Team Compliance Breakdown, so these
   live here rather than in either page. The legend classes are also used by home.html's
   billing bars. */
  .bc-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 10.5px; color: var(--muted); }
  .bc-legend .bc-item { display: inline-flex; align-items: center; gap: 5px; }
  .bc-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

  /* Compliance flag donut. Stroke-based ring built from <circle> arcs -- hand-rolled SVG, no
     charting library, matching the decision behind home.html's billing bars. Deliberately no
     <title> on the slices: a native browser tooltip would race the custom #donut-popover below,
     the same call compliance.html makes for its own fault popover. */
  .bc-donut-row { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
  .bc-donut-wrap { position: relative; width: 76px; height: 76px; flex: none; }
  .bc-donut-wrap svg { width: 76px; height: 76px; }
  .bc-donut-wrap svg circle { cursor: default; }
  /* The visible ring is 11px of stroke on a 76px box -- far too thin to hover reliably. Each
     slice gets an invisible wider twin on the same arc geometry to catch the pointer. */
  .bc-donut-wrap svg .bc-hit { cursor: pointer; }
  .bc-slice-btn { background: none; border: 0; font: inherit; color: inherit; padding: 2px 4px; border-radius: 6px; cursor: pointer; }
  .bc-slice-btn:hover { background: var(--rose-soft); }
  .bc-slice-btn:focus-visible { outline: 2px solid var(--rose-2); outline-offset: 1px; }
  .bc-donut-legend { justify-content: center; margin-top: 2px; }
  .bc-donut-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
  .bc-donut-pct.bc-none { font-size: 9px; font-weight: 600; color: var(--muted); }
  .bc-donut-note { font-size: 10px; color: var(--muted); text-align: center; }
  /* One color per fault_key: pastel variants of shell.css's amber/teal/green/plum/rose/brown/
     rose-2 tokens, in the same order. template_correct is legacy-only (admins can no longer pick
     it fresh) so it gets a neutral. */
  .bc-fk-calls { background: #F2C48D; color: #F2C48D; }
  .bc-fk-texts { background: #9FD3CF; color: #9FD3CF; }
  .bc-fk-flyers { background: #B9D8AB; color: #B9D8AB; }
  .bc-fk-soap_accuracy { background: #D4A5C4; color: #D4A5C4; }
  .bc-fk-date_time_match { background: #F2A2B1; color: #F2A2B1; }
  .bc-fk-time_spent_correct { background: #CDB29F; color: #CDB29F; }
  .bc-fk-billing_target { background: #F9CCD4; color: #F9CCD4; }
  .bc-fk-template_correct { background: #C9C1BC; color: #C9C1BC; }

  /* Ported from compliance.html's .fault-popover -- same hover-card mechanics (200ms grace,
     click to pin, viewport clamping), different content. Kept local rather than shared: that
     page's version is entangled with its editable fault-tag forms, and only the ~35 lines of
     positioning/state are actually common. */
  .donut-popover { position: fixed; z-index: 40; width: 270px; max-width: 90vw; max-height: calc(100vh - 16px); overflow-y: auto; overflow-x: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 12px; font-size: 11px; display: none; box-sizing: border-box; }
  .dp-head { display: flex; align-items: flex-start; gap: 6px; font-weight: 600; }
  .dp-head .bc-swatch { flex: none; margin-top: 2px; }
  .dp-sub { color: var(--muted); margin-top: 4px; }
  .dp-list { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
  .dp-row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; word-break: break-word; overflow-wrap: break-word; }
  .dp-row a { color: var(--rose); text-decoration: none; font-weight: 600; }
  .dp-row a:hover { text-decoration: underline; }
  .dp-row .dp-n { flex: none; color: var(--muted); }
  .dp-more { background: none; border: 0; padding: 4px 0 0; color: var(--rose); font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; }
  .dp-hint { margin-top: 8px; color: var(--muted); font-size: 10px; }

.logout-btn{margin:10px 6px 0;width:calc(100% - 12px)}

/* Admin alert toasts (alerts.js): shown instead of a desktop pop-up when the person is already
   looking at the portal. */
.alert-toasts{position:fixed;right:16px;bottom:16px;z-index:1000;display:flex;flex-direction:column;gap:8px;max-width:min(360px,calc(100vw - 32px))}
.alert-toast{display:flex;align-items:flex-start;gap:10px;padding:12px 12px 12px 14px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--rose);border-radius:10px;box-shadow:0 6px 20px rgba(69,42,29,.12);animation:alert-toast-in .25s cubic-bezier(.22,1,.36,1)}
.alert-toast-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;color:var(--ink);text-decoration:none}
.alert-toast-text strong{font-weight:600}
.alert-toast-text span{color:var(--muted);overflow-wrap:anywhere}
.alert-toast button{border:0;background:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
@keyframes alert-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.alert-toast{animation:none}}

/* Sign-out warning (session_warning.js): five minutes before the idle or 12-hour sign-out. */
.session-warn{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,12,9,.45)}
.session-warn-card{width:min(400px,100%);padding:22px 22px 18px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-top:3px solid var(--rose);border-radius:14px;box-shadow:0 16px 40px rgba(69,42,29,.22);animation:alert-toast-in .25s cubic-bezier(.22,1,.36,1)}
.session-warn-card h2{margin:0 0 6px;font-size:17px;font-weight:650}
.session-warn-card p{margin:0;color:var(--muted);line-height:1.45}
.session-warn-time{font-variant-numeric:tabular-nums;font-weight:650;color:var(--ink)}
.session-warn-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:18px}
@media (prefers-reduced-motion:reduce){.session-warn-card{animation:none}}

/* ---- Dark mode ----------------------------------------------------------------------------
   Opt-in per browser from Settings (localStorage chw_dark_mode_v1); boot_head.js sets
   html[data-theme="dark"] before first paint. Goal: no large light areas. Every surface goes
   dark; a card keeps its colour only as a dark tint (team cards/panes already mix their accent
   into --paper, so they tint automatically). Small pastels -- role chips, pills, category bands
   -- stay as accents. Selected chips/tabs use the rose accent. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000;--sidebar-bg:#000;--ink:#f2f2f2;--muted:#a3a3a3;--line:#2a2a2a;--line-soft:#1c1c1c;--logo-ink:#f2f2f2;
  --paper:#0f0f0f;--surface:#0f0f0f;--surface-2:#161616;--card-bg:#111;--search-bg:#0f0f0f;
  --track:#262626;--mix-line:#3a3a3a;--disabled-bg:#1f1f1f;--btn-bg:linear-gradient(180deg,#1a1a1a,#141414);
  --tile-bg:color-mix(in srgb,#d85f75 9%,#0f0f0f);--tile-line:color-mix(in srgb,#d85f75 22%,#0f0f0f);
  --rose:#e8798d;--rose-2:#c8687a;--rose-soft:rgba(232,121,141,.14);--rose-ink:#f2a3b2;--rose-flush:rgba(232,121,141,.16);
  --today-highlight:rgba(232,121,141,.12);--hover-bg:rgba(232,121,141,.14);--peach:#1e1416;
  --green:#8fbb7e;--green-soft:rgba(143,187,126,.14);--amber:#d9984f;--amber-soft:rgba(217,152,79,.14);
  --plum-soft:rgba(199,127,169,.14);--teal-soft:rgba(108,188,184,.14);--brown:#c9a893;--shadow:none;
  --pill-ok-bg:rgba(143,187,126,.15);--pill-ok-text:#a7cf98;--pill-warn-bg:rgba(217,152,79,.15);--pill-warn-text:#e3a868;--pill-bad-bg:rgba(232,121,141,.16);--pill-bad-text:#f2a3b2;
}
:root[data-theme="dark"] body{background:var(--bg)}
/* Hard-coded light-mode browns and greys that would vanish on black. */
:root[data-theme="dark"] .hello-sub{color:var(--muted)}
:root[data-theme="dark"] .avatar{background:#1e1e1e;color:var(--ink)}
:root[data-theme="dark"] .shift{background:var(--rose-soft)}
:root[data-theme="dark"] .off{background:var(--surface-2)}
:root[data-theme="dark"] :is(.btn:disabled,button.btn:disabled){color:#7a7a7a;border-color:#2a2a2a}
:root[data-theme="dark"] .btn.secondary.is-loading{border-color:var(--rose-2)!important}
:root[data-theme="dark"] :is(#form-error,.ts .split-msg){color:#f28b82}
:root[data-theme="dark"] .dropzone.drag-over{background:var(--rose-soft)}
:root[data-theme="dark"] :is(.cr-pbar .cr-lost,.cr-legend .cr-lostkey){background:repeating-linear-gradient(-45deg,#2a2a2a 0 3px,#1a1a1a 3px 6px)}
:root[data-theme="dark"] :is(.mls-miss,.banner-ok,.banner-warn){background:var(--surface-2);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .vr-badge{background:var(--surface-2);color:var(--muted)}
/* Sidebar: rose pill with white label; hover a dark grey; the dark-brown "mbmw" mark lightened. */
:root[data-theme="dark"] .nav-indicator{background:var(--rose);box-shadow:none}
:root[data-theme="dark"] .nav-indicator:before{background:#fff}
:root[data-theme="dark"] .nav-item.active{color:#fff}
:root[data-theme="dark"] .nav-item:not(.active):hover{background:#1c1c1c}
:root[data-theme="dark"] .brand-logo{filter:invert(1) hue-rotate(180deg)}
/* Flag boxes: black, flag colour only in the top tint. */
:root[data-theme="dark"] .fgrp{background:linear-gradient(180deg,color-mix(in srgb,var(--ink2) 18%,#000) 0,#000 54px)}
/* Selected chips, tabs and segments: rose accent. */
:root[data-theme="dark"] :is(.ov-chip.is-on,.ml-chip.is-on,.viewer-tab.active,.cmp-seg .seg-opt.checked,.ml-status .seg-opt.checked){background:var(--rose);border-color:var(--rose);color:#fff}
:root[data-theme="dark"] .trend-plot svg{color:var(--rose)}
:root[data-theme="dark"] :is(.stk-ev-note,.ve-dir){color:var(--muted)}
/* Selected team tabs and the roster header use the full team colour in light mode -- a big light
   block. Dark: a stronger tint of the team colour so the selection still reads. */
:root[data-theme="dark"] :is(.team-tab[aria-selected="true"],.cr-tab[aria-selected="true"],.stk-tab[aria-selected="true"]){background:color-mix(in srgb,var(--team,var(--team-accent,var(--line))) 45%,#0f0f0f);color:#fff}
:root[data-theme="dark"] .team-card .card-head{background:color-mix(in srgb,var(--team) 30%,#0f0f0f)}
/* Amber/rose alert tiles: dark tint, light ink. */
:root[data-theme="dark"] .tint-amber,:root[data-theme="dark"] .is-low{--hue-soft:rgba(217,152,79,.16);--hue-hover:rgba(217,152,79,.22);--hue-ink:#e3a868}
:root[data-theme="dark"] .tint-rose{--hue-soft:rgba(232,121,141,.16);--hue-hover:rgba(232,121,141,.22);--hue-ink:#f2a3b2}
:root[data-theme="dark"] .metric-flag{background:rgba(255,255,255,.08);color:var(--hue-ink,var(--rose-ink))}
:root[data-theme="dark"] .stk-rung.is-done{background:color-mix(in srgb,var(--c) 22%,#0f0f0f);color:var(--c)}
/* Team page Intern label: same amber as the "Expired" pill. */
:root[data-theme="dark"] .lb.int{background:var(--pill-warn-bg);color:var(--pill-warn-text)}
/* Compliance roster eyebrow ("Team roster · week of ...") was a hard-coded dark brown. */
:root[data-theme="dark"] .team-week{color:#d6d6d6}
/* SOAP note viewer text was hard-coded dark brown; match Zoom log viewer ink. */
:root[data-theme="dark"] .vd-soap{color:var(--ink)}
/* Flag colours: translucent tints with light inks, so report highlights (mark.fault-cat-*) keep
   white text readable and flag chips/legends match. */
:root[data-theme="dark"]{
  --flag-calls-bg:rgba(192,80,77,.28);--flag-calls:#ec8f8c;--flag-texts-bg:rgba(63,111,181,.3);--flag-texts:#8fb4ec;
  --flag-soap-bg:rgba(63,138,85,.3);--flag-soap:#8fd0a2;--flag-flyers-bg:rgba(122,82,179,.32);--flag-flyers:#bfa0ec;
  --flag-billing-bg:rgba(168,134,15,.3);--flag-billing:#e3c65c;--flag-other-bg:rgba(192,106,31,.3);--flag-other:#eda66a;
}
/* Team page role labels: each in a dark tint of its own hue with a light ink, like the
   "Expired" pill (Intern above already uses the amber pill pair). */
:root[data-theme="dark"] .lb.sup{background:rgba(199,127,169,.16);color:#e3a6c8}
:root[data-theme="dark"] .lb.lead{background:rgba(150,128,212,.16);color:#c4b5ee}
:root[data-theme="dark"] .lb.comp{background:rgba(108,188,184,.15);color:#8fd3cf}
:root[data-theme="dark"] .lb.chw{background:rgba(201,168,147,.15);color:#d9c2b4}
:root[data-theme="dark"] .lb.stk{background:rgba(140,122,214,.17);color:#b8aaf0}
:root[data-theme="dark"] .lb.scr{background:rgba(150,170,90,.16);color:#c3d38f}
:root[data-theme="dark"] .lb.mon{background:rgba(95,145,205,.16);color:#9fc2ee}

/* Portal <-> Resources (mode_switch.js / mode_handoff.js): a fade, and a loading screen only when
   Resources' first reads aren't in yet. */
html.mode-fade-out body{opacity:0;transition:opacity .3s ease}
html.mode-fade-in body{animation:mode-fade-in .3s ease both}
@keyframes mode-fade-in{from{opacity:0}to{opacity:1}}
.mode-loading{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#F8F3EA;color:#6B5B4F;font:500 14px Inter,sans-serif;opacity:1}
.mode-loading i{width:120px;height:3px;border-radius:999px;background:linear-gradient(90deg,#B65F43 0 40%,#EBCFC6 40%);background-size:200% 100%;animation:mode-load 1s linear infinite}
@keyframes mode-load{to{background-position:-200% 0}}
:root[data-theme="dark"] .mode-loading{background:#17120F;color:#B9A99C}
html.mode-fade-out .mode-loading{opacity:1}
@media(prefers-reduced-motion:reduce){
  html.mode-fade-out body{transition:none}
  html.mode-fade-in body{animation:none}
  .mode-loading i{animation:none}
}