/* Branch tablet — one stylesheet, no build step.
   Light, card-based. The THEME block is the branch's brand; everything below it
   is semantic (done / late / warning) and does not change per branch.

   Belfairs theme: logo blue is the primary (buttons, active tab), logo red is
   kept for alerts so it stays rare and loud, estuary teal for secondary
   accents, "since 1948" gold for warnings, heritage cream as the page wash,
   Fraunces for headings and Open Sans for everything else, as on the website. */
:root {
  /* THEME */
  --brand: #1c3f95; --brand-dark: #17347c; --brand-soft: #eaf0fb; --brand-ink: #14306f;
  --brand-red: #e1251b;
  --teal: #0f8b8d; --teal-soft: #e4f2f0;
  --gold: #c9a227; --cream: #f7f1e6; --cream-deep: #efe4d0;
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* SEMANTIC (derived) */
  --primary: var(--brand); --primary-dark: var(--brand-dark); --primary-soft: var(--brand-soft); --primary-ink: var(--brand-ink);
  --ok: #1e6b3c; --ok-soft: #e6f2ea; --ok-ink: #145a32;                   /* done, clocked in */
  --red: var(--brand-red); --red-soft: #fdecea;                            /* alerts, late, no-show */
  --amber: #8a6a12; --amber-soft: #fbf3d9;                                 /* holiday, warning, to do */
  --purple: #5b3fa8; --purple-soft: #efeafb;                               /* locum */
  --ink: #14203a; --muted: #5b6975; --line: #e6e2d8; --bg: #f8f5ee; --card: #ffffff;
  --shadow: 0 1px 2px rgba(28,63,149,.05), 0 6px 20px rgba(28,63,149,.06);
  --radius: 14px; --radius-sm: 9px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --tap: 44px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { scrollbar-width: thin; scrollbar-color: rgba(20,32,58,.28) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(20,32,58,.28); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(20,32,58,.45); background-clip: padding-box; }
body { font-family: var(--sans); color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--primary); }
.mono, time, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Loading: fills the column and holds the page height so nothing collapses and springs back while data loads. */
.boot { flex: 1; width: 100%; min-height: min(60vh, 520px); display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 2rem 1rem; color: var(--muted); font-size: .95rem; }
.boot::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot::before { animation: none; } }

/* ---------- Shell: sidebar + main column ---------- */
#app { display: flex; min-height: 100vh; }
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#outlet { flex: 1 1 auto; min-width: 0; }

/* Collapsible grouped sidebar, the same pattern as the website admin: navy rail, icon + label,
   groups in small caps, a collapse button in the foot; collapsed = 62px icon rail with hover tooltips. */
.sidebar { --sb-w: 232px; --sb-rail: 62px; width: var(--sb-w); flex: 0 0 var(--sb-w); background: var(--primary-ink); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; transition: width .16s ease, flex-basis .16s ease; z-index: 30; }
.sidebar { box-shadow: 6px 0 22px -6px rgba(20, 32, 58, .55), 1px 0 0 rgba(255, 255, 255, .08); z-index: 30; }
.sidebar.collapsed { width: var(--sb-rail); flex-basis: var(--sb-rail); }
.sb-head { display: flex; align-items: center; justify-content: center; padding: .8rem .95rem .5rem; min-height: 54px; }
.sb-logo { height: 34px; width: auto; max-width: 190px; display: block; }   /* short lockup: no tagline at this size */
.sb-mark { display: none; height: 30px; width: 30px; }
.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: .3rem .4rem; display: flex; flex-direction: column; gap: .08rem; scrollbar-width: none; }
.sb-nav::-webkit-scrollbar { display: none; }
.sb-group { font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.45); padding: .6rem .75rem .2rem; white-space: nowrap; }
.sb-group:first-child { padding-top: .2rem; }
.sb-item { display: flex; align-items: center; gap: .7rem; background: transparent; border: 0; color: rgba(255,255,255,.84); border-radius: 8px; padding: .42rem .7rem; font-weight: 500; font-size: .86rem; width: 100%; text-align: left; white-space: nowrap; position: relative; min-height: 38px; }
.sb-item:hover { background: rgba(255,255,255,.1); color: #fff; }
.sb-item.active { background: #fff; color: var(--primary-ink); font-weight: 700; }
.sb-item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.sb-ic { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.sb-ic svg { width: 19px; height: 19px; }
.sb-label { overflow: hidden; text-overflow: ellipsis; }
.sb-foot { border-top: 1px solid rgba(255,255,255,.12); padding: .4rem; }
.sb-user { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; font-size: .78rem; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; }
.sb-signout { display: inline-flex; align-items: center; gap: .35rem; background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 6px; font-size: .76rem; padding: .3rem .55rem; margin-left: auto; }
.sb-signout svg { width: 15px; height: 15px; }
.sb-signout:hover { background: rgba(255,255,255,.24); }
.sidebar.collapsed .sb-label, .sidebar.collapsed .sb-group, .sidebar.collapsed .sb-logo { display: none; }
.sidebar.collapsed .sb-mark { display: block; }
.sidebar.collapsed .sb-head { padding-inline: 0; }
.sidebar.collapsed .sb-item { justify-content: center; padding: .42rem 0; }
.sidebar.collapsed .sb-collapse .sb-ic { transform: rotate(180deg); }
.sidebar.collapsed .sb-user { justify-content: center; padding-inline: 0; }
.sidebar.collapsed .sb-signout { margin: 0; padding: .3rem; }
.sidebar.collapsed .sb-item:hover::after { content: attr(data-label); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--primary-ink); color: #fff; padding: .32rem .6rem; border-radius: 6px; font-size: .78rem; white-space: nowrap; z-index: 40; box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: none; }
.sidebar.collapsed .sb-item.active:hover::after { background: var(--primary); }

/* ---------- Slim top bar (brand, demo badge, live clock) ---------- */
.topbar { background: var(--card); border-bottom: 2px solid var(--primary); box-shadow: 0 2px 0 var(--gold); position: sticky; top: 0; z-index: 20; }
.topbar__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 1.25rem; min-height: 60px; }
.brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.brand__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__name small { color: var(--muted); font-weight: 500; }
.topbar__right { display: flex; align-items: center; gap: .9rem; }
.clock { font-family: var(--mono); font-size: 1.35rem; font-weight: 600; letter-spacing: .02em; }
.clock small { display: block; font-family: var(--sans); font-size: .75rem; color: var(--muted); font-weight: 500; text-align: right; }
.badge-demo { background: var(--cream-deep); color: var(--primary-ink); border-radius: 999px; padding: .2rem .6rem; font-size: .75rem; font-weight: 700; }
.btn-link { background: none; border: 0; color: var(--muted); font-size: .85rem; padding: .3rem .4rem; border-radius: 6px; }
.btn-link:hover { color: var(--ink); background: var(--bg); }

/* Phones: a "Menu" button in the top bar slides out the full sidebar (labels and groups, whatever the
   desktop collapse setting); the top bar names the current page. */
.topbar__menu, .sb-scrim, .sb-close { display: none; }
.topbar__section { display: block; font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--primary-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

@media (max-width: 640px) {
  .sidebar, .sidebar.collapsed { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 86vw; height: 100dvh; flex-basis: auto; transform: translateX(-105%); transition: transform .22s ease; z-index: 45; }
  body.sb-open .sidebar { transform: none; box-shadow: 10px 0 30px rgba(0,0,0,.28); }
  .sb-scrim { display: block; position: fixed; inset: 0; background: rgba(20,30,40,.42); z-index: 44; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
  body.sb-open .sb-scrim { opacity: 1; pointer-events: auto; }
  body.sb-open { overflow: hidden; }
  .sb-head, .sidebar.collapsed .sb-head { justify-content: space-between; padding: .8rem .6rem .5rem .95rem; }
  .sb-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 8px; background: rgba(255,255,255,.1); color: #fff; }
  .sb-close svg { width: 20px; height: 20px; }
  .sidebar.collapsed .sb-logo { display: block; }
  .sidebar.collapsed .sb-mark, .sb-mark { display: none; }
  .sidebar.collapsed .sb-group { display: block; }
  .sidebar.collapsed .sb-label { display: inline; }
  .sb-item, .sidebar.collapsed .sb-item { justify-content: flex-start; padding: .6rem .8rem; min-height: 44px; font-size: .95rem; }
  .sb-collapse { display: none; }
  .sidebar.collapsed .sb-user { justify-content: flex-start; padding: .45rem .6rem; }
  .sidebar .sb-item:hover::after { display: none; }
  .topbar__row { padding: .45rem .75rem; min-height: 56px; gap: .6rem; }
  .topbar__menu { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .45rem .7rem; font-weight: 700; font-size: .9rem; color: var(--primary-ink); min-height: 42px; }
  .topbar__menu svg { width: 20px; height: 20px; }
  .topbar__section { display: block; font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--primary-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .clock { font-size: 1.05rem; }
  .clock small { font-size: .68rem; }
  .badge-demo { display: none; }
}

/* ---------- Maps (clock-in locations, branch position) ---------- */
/* isolation keeps Leaflet's internal z-indexes (400+) inside the map, so it never draws over the top bar or menus */
.map { position: relative; isolation: isolate; z-index: 0; width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--cream); }
/* Owner report (on screen and printed) */
.report-list { margin: 0; padding-left: 1.2rem; }
.report-list li { margin: .8rem 0; }
.print-only { display: none; }
@media print {
  .sidebar, .sb-scrim, .topbar, .no-print, #toast-root { display: none !important; }
  .print-only { display: block; }
  body, .main { background: #fff; }
  .card { box-shadow: none; break-inside: avoid; }
  .page { padding: 0; max-width: none; }
}

/* Local market: opportunity and watch cards (one box per item, labelled figures) */
.opps { display: flex; flex-direction: column; gap: 1rem; margin-top: .9rem; }
.opp-card, .watch-item { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; }
.opp-card { border-top: 3px solid var(--ok); }
.opp-card__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.opp-card__head h3, .watch-item h3 { margin: 0; font-family: var(--display); font-size: 1.08rem; font-weight: 700; color: var(--primary-ink); line-height: 1.3; }
.opp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: .85rem 0 .7rem; }
@media (max-width: 760px) { .opp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opp-stat { background: var(--bg); border-radius: 10px; padding: .6rem .75rem .65rem; min-width: 0; }
.opp-stat__label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); }
.opp-stat__value { font-family: var(--display); font-size: 1.45rem; font-weight: 700; line-height: 1.2; color: var(--primary-ink); margin-top: .15rem; white-space: nowrap; }
.opp-stat__unit { font-family: var(--sans); font-size: .78rem; font-weight: 600; color: var(--muted); }
.opp-stat__foot { font-size: .76rem; line-height: 1.35; color: var(--muted); margin-top: .2rem; }
.opp-stat--gap { background: var(--amber-soft); } .opp-stat--gap .opp-stat__value { color: var(--amber); }
.opp-stat--worth { background: var(--ok-soft); } .opp-stat--worth .opp-stat__value { color: var(--ok-ink); }
.opp-trend { margin: 0 0 .5rem; }
.opp-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-top: .75rem; }
.leaders, .strengths { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.strengths { margin-top: 1rem; }
.leader { display: inline-flex; align-items: center; gap: .3rem; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; color: var(--ink); }
.leader b { color: var(--primary-ink); }
.leader--good { background: var(--ok-soft); border-color: transparent; color: var(--ok-ink); font-weight: 600; }
.opp-target { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-left: auto; }
.howto { margin-top: .6rem; font-size: .88rem; }
.howto summary { cursor: pointer; color: var(--primary); font-weight: 600; width: max-content; }
.howto ul { margin: .5rem 0 0; padding: .7rem .9rem .7rem 1.9rem; background: var(--bg); border-radius: 10px; color: var(--ink); }
.howto li + li { margin-top: .35rem; }
.watch-item { border-left: 4px solid var(--primary); }
.watch-item--high { border-left-color: var(--red); } .watch-item--medium { border-left-color: var(--amber); }
.watch-item__head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.watch-item__detail { margin: .4rem 0 0; color: var(--muted); font-size: .92rem; }
@media (max-width: 640px) { .opp-card, .watch-item { padding: .9rem .9rem; } .opp-target { margin-left: 0; } }

/* Local market: opportunities */
.opps { display: flex; flex-direction: column; }
.opp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1.2rem; align-items: start; padding: .9rem 0; border-top: 1px solid var(--line); }
.opp:first-child { border-top: 0; }
.opp__title { font-size: 1.02rem; margin-bottom: .2rem; }
.opp__nums { font-size: .9rem; margin-bottom: .3rem; }
.opp__do { font-size: .92rem; background: var(--primary-soft); border-radius: 8px; padding: .45rem .65rem; margin: .35rem 0; color: var(--primary-ink); }
.opp__side { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; text-align: right; min-width: 150px; }
@media (max-width: 640px) { .opp { grid-template-columns: 1fr; } .opp__side { align-items: flex-start; text-align: left; } }

/* Local market */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.market-table { font-size: .9rem; min-width: 880px; }
.market-table th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.market-table th.is-sorted { color: var(--primary-ink); }
.market-table td, .market-table th { padding: .5rem .75rem; }
.market-table td:first-child { min-width: 220px; }
.market-name { display: flex; gap: .5rem; align-items: baseline; }
.market-rank { flex: 0 0 1.2em; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 400; }
@media (max-width: 640px) { .market-table { min-width: 760px; } .market-table td:first-child { min-width: 150px; width: 150px; } .market-rank { display: none; } }
.market-table .num { font-family: var(--sans); }
.market-table tbody tr { cursor: pointer; }
.market-table tbody tr:hover { background: var(--bg); --row-bg: var(--bg); }
.market-table tr.is-me, .market-table tr.is-me:hover { background: var(--primary-soft); --row-bg: var(--primary-soft); }
.market-table td.is-top { font-weight: 700; color: var(--primary-ink); }
.market-table tr.bench td { color: var(--muted); font-style: italic; border-top: 1px dashed var(--line); cursor: default; }
.table .num { text-align: right; white-space: nowrap; font-family: var(--sans); font-variant-numeric: tabular-nums; }   /* same face as the rest of the table, digits line up */
.up { color: var(--ok); } .down { color: var(--red); }
.spark { display: block; }
.day-toggles { display: flex; flex-wrap: wrap; gap: .35rem; }
.day-toggle { position: relative; }
.day-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.day-toggle span { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; min-height: 40px; padding: 0 .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-weight: 600; color: var(--muted); }
.day-toggle input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.day-toggle input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.map__fallback { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1rem; }
.map .leaflet-control-attribution { font-size: .62rem; }
.map-caption { font-size: .85rem; color: var(--muted); margin-top: .4rem; }
.chip--btn.chip--link { cursor: pointer; border: 0; }

/* ---------- Layout ---------- */
.page { max-width: 1280px; margin: 0 auto; padding: 1.25rem 1.25rem 4rem; }
/* One rhythm for the whole app: every block placed on a page, and every box in a column, sits 1.25rem from the next. */
.page > * + *, .stack > * + * { margin-top: 1.25rem; }
.page > .page__head + * { margin-top: 0; }
.page__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
h1 { font-family: var(--display); font-weight: 700; font-size: 1.6rem; margin: 0; letter-spacing: -.01em; color: var(--primary-ink); }
h2 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: 0 0 .75rem; color: var(--primary-ink); }
.grid { display: grid; gap: 1.25rem; }
.grid > * { min-width: 0; }                      /* a wide table inside a column scrolls in its box, not the page */
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--main { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
@media (max-width: 900px) { .grid--2, .grid--3, .grid--4, .grid--main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4, .grid--main { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.2rem; min-width: 0; }
/* Tables wider than a phone scroll sideways inside their card instead of pushing the whole page out */
.card:has(> .table), .card:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card--alert { border-color: #f0b8b8; box-shadow: 0 0 0 3px rgba(198,40,40,.06), var(--shadow); }
.card__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem .75rem; margin-bottom: .6rem; }
.card__head h2 { margin: 0; flex: 1 1 14rem; min-width: 0; }   /* a long title takes the line; buttons drop below it on a phone */
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.empty { color: var(--muted); padding: .6rem 0; }
.row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.spread { justify-content: space-between; }

/* ---------- Buttons, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: var(--tap); padding: .55rem 1rem; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-weight: 600; white-space: nowrap; }
.btn:hover { border-color: #c9d0d6; background: #fafbfa; }
.btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn--danger { color: var(--red); border-color: #f0b8b8; background: #fff; }
.btn--danger:hover { background: var(--red-soft); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--primary); }
.btn--ghost:hover { background: var(--primary-soft); }
.btn--sm { min-height: 36px; padding: .35rem .75rem; font-size: .88rem; }
.btn[disabled] { opacity: .5; cursor: default; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--bg); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.chip--green { background: var(--ok-soft); color: var(--ok-ink); border-color: transparent; }
.chip--red { background: var(--red-soft); color: var(--red); border-color: transparent; }
.chip--amber { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.chip--purple { background: var(--purple-soft); color: var(--purple); border-color: transparent; }
.chip--blue { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
.chip--outline { background: #fff; }
.chip--btn { cursor: pointer; min-height: 32px; }
.chip--btn:hover { border-color: var(--primary); }
.chip--btn.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- Dashboard ---------- */
.banner { background: var(--primary); color: #fff; border-radius: var(--radius); padding: 1.1rem 1.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; box-shadow: var(--shadow); }
.banner strong { font-family: var(--display); font-size: 1.5rem; display: block; }
.banner span { opacity: .9; font-size: .92rem; }
.banner .btn { background: #fff; color: var(--primary); border-color: #fff; }
.banner .btn:hover { background: var(--primary-soft); }
.stat { display: flex; flex-direction: column; gap: .15rem; }
.stat__label { color: var(--muted); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat__value { font-family: var(--display); letter-spacing: -.01em; font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat__value small { font-size: 1rem; color: var(--muted); font-weight: 500; }
.stat--red .stat__value { color: var(--red); }
.stat--green .stat__value { color: var(--ok); }
.stat__sub { color: var(--muted); font-size: .82rem; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; }
.list .who { font-weight: 600; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }   /* long file names without spaces wrap instead of pushing the page wide */
.list .who small { display: block; color: var(--muted); font-weight: 400; font-size: .82rem; }
.alert { padding: .7rem 0; border-top: 1px solid var(--line); }
.alert:first-child { border-top: 0; padding-top: 0; }
.alert__title { font-weight: 700; }
.alert__meta { color: var(--muted); font-size: .82rem; margin: .1rem 0 .5rem; }
.alert__steps { display: flex; gap: .4rem; flex-wrap: wrap; }
.duty { display: flex; flex-wrap: wrap; gap: .4rem; }
.kpi-row { display: flex; align-items: center; justify-content: space-between; padding: .35rem 0; border-top: 1px solid var(--line); font-size: .92rem; }
.kpi-row:first-child { border-top: 0; }
.kpi-row .num { color: var(--muted); }

/* ---------- Tasks ---------- */
.task { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 0 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; }
.task + .task { margin-top: .6rem; }
.task__stripe { background: var(--cat, var(--muted)); }
.task__body { padding: .8rem .2rem .8rem 1rem; min-width: 0; }
.task__title { font-weight: 700; font-size: 1.02rem; }
.task__chips { display: flex; gap: .35rem; flex-wrap: wrap; margin: .3rem 0; }
.task__desc { color: var(--muted); font-size: .9rem; }
.task__meta { color: var(--muted); font-size: .82rem; margin-top: .3rem; }
.task__actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: .4rem; padding: .8rem 1rem .8rem 0; }
.task.is-done .task__title { text-decoration: line-through; color: var(--muted); }
.task.is-done { background: #fbfcfb; }
.task.is-carried { border-left-color: var(--amber); }
.signed { color: var(--ok-ink); font-weight: 600; font-size: .88rem; }
.signed small { display: block; color: var(--muted); font-weight: 400; }
.datebar { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .25rem; max-width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .2rem; }   /* wraps on a phone: the rota bar has four buttons */
.datebar .btn { border: 0; min-height: 38px; }
.section-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--teal); margin: 1.2rem 0 .5rem; }

/* ---------- Modal + PIN keypad ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(20,30,40,.45); display: grid; place-items: center; z-index: 50; padding: 1rem; }
.modal { background: var(--card); border-radius: 18px; width: min(520px, 100%); max-height: 92vh; overflow: auto; box-shadow: 0 24px 60px rgba(0,0,0,.25); padding: 1.25rem 1.4rem 1.4rem; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.modal__head h2 { margin: 0; font-size: 1.25rem; }
.modal__head p { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; }
.modal__close { background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--muted); padding: .2rem .4rem; border-radius: 8px; }
.modal__close:hover { background: var(--bg); color: var(--ink); }
.staff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.staff-btn { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; min-height: 60px; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.staff-btn:hover { border-color: var(--primary); background: var(--primary-soft); }
.staff-btn strong { font-size: 1rem; }
.staff-btn small { color: var(--muted); font-size: .8rem; }
.staff-btn[disabled] { opacity: .45; }
.pin { text-align: center; }
.pin__who { font-weight: 700; margin-bottom: .2rem; }
.pin__who small { display: block; color: var(--muted); font-weight: 400; }
.pin__dots { display: flex; justify-content: center; gap: .9rem; margin: 1rem 0; }
.pin__dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted); display: block; }
.pin__dots i.is-on { background: var(--ink); border-color: var(--ink); }
.pin.is-error .pin__dots i { border-color: var(--red); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.pin__error { color: var(--red); font-weight: 600; min-height: 1.4em; font-size: .92rem; }
.keypad { display: grid; grid-template-columns: repeat(3, 84px); gap: .55rem; justify-content: center; margin-top: .6rem; }
.key { height: 64px; border-radius: 14px; border: 1px solid var(--line); background: #fff; font-family: var(--mono); font-size: 1.5rem; font-weight: 600; }
.key:hover { background: var(--bg); }
.key:active { background: var(--primary-soft); border-color: var(--primary); }
.key--muted { font-family: var(--sans); font-size: .95rem; color: var(--muted); }
.pin__back { margin-top: .8rem; }
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.field label { font-weight: 600; font-size: .9rem; }
.field input, .field textarea, .field select { min-height: var(--tap); padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.error { color: var(--red); font-weight: 600; }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login .card { width: min(420px, 100%); }
.login h1 { margin-bottom: .2rem; }
/* staff sign-in: big targets and a big code box, for people who do not live on their phones */
.login .btn--block { width: 100%; margin-top: .9rem; min-height: 48px; font-size: 1.02rem; }
.login .code-input { font-size: 2rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; padding: .55rem .4rem; }
.login__more { display: grid; gap: .5rem; margin-top: .6rem; justify-items: center; }
.login__more .btn--block { margin-top: 0; }

/* ---------- Toast ---------- */
/* A small card, bottom-right on a tablet/desktop, full width (with a 16px gutter) on a phone. */
#toast-root { position: fixed; z-index: 60; right: 1.25rem; bottom: 1.25rem; width: min(400px, calc(100vw - 2.5rem)); display: flex; flex-direction: column; gap: .6rem; pointer-events: none; }
.toast { pointer-events: auto; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: start;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 12px;
  padding: .8rem .6rem .85rem .85rem; box-shadow: 0 14px 34px rgba(20,32,58,.16), 0 2px 6px rgba(20,32,58,.08);
  font-size: .93rem; line-height: 1.45; text-align: left; animation: toast-in .22s ease-out; }
.toast__icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); margin-top: 1px; }
.toast__icon svg { width: 15px; height: 15px; }
.toast__text { min-width: 0; overflow-wrap: anywhere; padding-top: 2px; }
.toast__text strong { display: block; font-weight: 700; color: var(--ink); margin-bottom: .1rem; }
.toast__text strong + span { color: var(--muted); }
.toast__close { background: none; border: 0; color: var(--muted); font-size: 1.25rem; line-height: 1; width: 28px; height: 28px; border-radius: 8px; margin: -2px 0 0; }
.toast__close:hover { background: var(--bg); color: var(--ink); }
.toast--error { border-left-color: var(--red); } .toast--error .toast__icon { background: var(--red-soft); color: var(--red); }
.toast--info { border-left-color: var(--primary); } .toast--info .toast__icon { background: var(--primary-soft); color: var(--primary); }
.toast--warn { border-left-color: var(--amber); } .toast--warn .toast__icon { background: var(--amber-soft); color: var(--amber); }
.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 640px) { #toast-root { left: 1rem; right: 1rem; width: auto; bottom: calc(1rem + env(safe-area-inset-bottom)); } }

.placeholder { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.placeholder h1 { color: var(--ink); }

.login__logo { width: 260px; max-width: 80%; height: auto; display: block; margin: 0 auto 1.1rem; }

/* ---------- Tables (attendance) ---------- */
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
/* Columns sit a clear 1.5rem apart (0.75rem each side); the outer columns stay flush with the card edge. */
.table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .3rem .75rem .5rem; border-bottom: 1px solid var(--line); vertical-align: bottom; }
.table td { padding: .6rem .75rem; border-top: 1px solid var(--line); vertical-align: middle; }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
/* On a phone, a table wider than its card scrolls inside the card with its first (name) column pinned, so
   every row stays identifiable. The pinned cell carries the row's own background and a hairline edge. */
@media (max-width: 640px) {
  .table { font-size: .9rem; }
  .table th:first-child, .table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--row-bg, var(--card)); box-shadow: inset -1px 0 0 var(--line); padding-right: .75rem; max-width: 46vw; }
  .table td:first-child { min-width: 9rem; overflow-wrap: break-word; hyphens: manual; }
  .table th:first-child { z-index: 2; }
  /* Tables run edge to edge inside their card or pop-up, so nothing scrolls past in the card's side padding;
     the outer cells take over that padding instead. */
  .card { --pad-x: 1.2rem; } .modal { --pad-x: 1.4rem; }
  .dcgrid td.dcgrid__shelf { max-width: 44vw; }
  .card:has(> .table) { padding-left: 0; padding-right: 0; }
  .card:has(> .table) > :not(.table):not(.table-wrap) { margin-left: var(--pad-x) !important; margin-right: var(--pad-x) !important; }   /* !important: an inline margin shorthand on a child must not push it to the card edge */
  .card > .table-wrap, .modal > .table-wrap { margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x)); }
  .card > .table :is(th, td):first-child, :is(.card, .modal) > .table-wrap > .table :is(th, td):first-child { padding-left: var(--pad-x); }
  .card > .table :is(th, td):last-child, :is(.card, .modal) > .table-wrap > .table :is(th, td):last-child { padding-right: var(--pad-x); }
}
.table tr:first-child td { border-top: 0; }
.center { text-align: center; }
.datebar .is-current { color: var(--primary); }

/* ---------- Rota grid ---------- */
.page--wide { max-width: 1400px; }
.rota-card { padding: .6rem .6rem .9rem; overflow-x: auto; }
.rota { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 900px; }
.rota th, .rota td { border-bottom: 1px solid var(--line); vertical-align: top; }
.rota thead th { padding: .5rem .5rem .6rem; text-align: left; font-weight: 600; }
.rota__day { font-weight: 700; }
.rota__hours { color: var(--muted); font-size: .82rem; font-weight: 500; }
.rota__who { width: 170px; padding: .6rem .6rem; text-align: left; font-weight: 400; }
@media (max-width: 640px) { .rota { min-width: 820px; } .rota__who, .rota thead th:first-child, .rota__group th { position: sticky; left: 0; z-index: 2; background: var(--card); box-shadow: inset -1px 0 0 var(--line); } .rota__who, .rota thead th:first-child { width: 120px; } .rota__group th { background: var(--cream); } }
.rota__group th { background: var(--cream); color: var(--teal); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .4rem .6rem; }
.rota__cell { padding: .3rem; height: 74px; }
.rota__cell.is-weekend { background: #faf8f3; }
.rota__cell.is-today, .rota thead th.is-today { box-shadow: inset 0 3px 0 var(--primary); }
.rota__btn { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; min-height: 66px; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; text-align: left; font-size: .85rem; }
.rota__btn:hover { border-color: var(--primary); }
.rota__time { font-weight: 600; }
.rota__state { font-weight: 700; }
.is-off_sick .rota__btn { background: var(--red-soft); border-color: #f3c2c2; color: var(--red); }
.is-holiday .rota__btn { background: var(--amber-soft); border-color: #eadba4; color: var(--amber); }
.rota__locum { background: var(--purple-soft); border: 1.5px dashed var(--purple); color: var(--purple); min-height: 52px; margin-bottom: .25rem; }
.rota__add { width: 100%; min-height: 66px; border: 1px dashed var(--line); border-radius: 9px; background: transparent; color: #b8bfc8; font-size: 1.3rem; }
.is-locumcol .rota__add { min-height: 22px; font-size: .95rem; padding: 0; }
.rota__add:hover { border-color: var(--primary); color: var(--primary); }
.rota__actual { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .15rem; font-size: .8rem; }
.rota__ok { color: var(--ok-ink); font-weight: 600; }
.rota__warn { color: var(--red); font-weight: 700; }
.rota__legend { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; padding: .8rem .6rem 0; font-size: .82rem; color: var(--muted); }
.rota__legend .ok { color: var(--ok-ink); } .rota__legend .warn { color: var(--red); }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; border: 1px solid var(--line); }
.swatch--sick { background: var(--red-soft); border-color: #f3c2c2; }
.swatch--hol { background: var(--amber-soft); border-color: #eadba4; }
.swatch--locum { background: var(--purple-soft); border: 1.5px dashed var(--purple); }

/* ---------- Phone clock-in page ---------- */
.clock-page { background: var(--bg); }
.clock-wrap { max-width: 440px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.clock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.clock-logo { height: 34px; width: auto; }   /* short lockup beside the clock */
.clock-now { font-size: 1.4rem; font-weight: 600; }
.clock-title { text-align: center; font-size: 1.5rem; margin: 0 0 1rem; }
.clock-staff { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
.clock-staff .staff-btn { min-height: 72px; }
.clock-kind { display: flex; justify-content: center; gap: .5rem; margin: .6rem 0 .2rem; }
.clock-kind .chip { font-size: .95rem; padding: .5rem 1.1rem; min-height: 40px; }
.clock-page .keypad { grid-template-columns: repeat(3, 1fr); }
.clock-page .key { height: 64px; }
.clock-done { text-align: center; padding: 2rem 0; }
.clock-done__tick { width: 84px; height: 84px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 2.6rem; display: grid; place-items: center; margin: 0 auto 1rem; }
@media (max-width: 420px) { .clock-staff { grid-template-columns: 1fr; } }

/* ---------- Money + drivers ---------- */
.field__static { min-height: var(--tap); display: flex; align-items: center; padding: .5rem .75rem; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); background: var(--bg); }
.paidout { display: grid; grid-template-columns: 1fr 130px auto; gap: .5rem; margin-bottom: .5rem; }
.paidout input { min-height: var(--tap); padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.callout { background: var(--brand-soft); border-left: 4px solid var(--primary); border-radius: 0 10px 10px 0; padding: .8rem 1rem; margin-bottom: 1rem; color: var(--primary-ink); }
.driver__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.driver__grid > *, .field { min-width: 0; }
.field input, .field select, .field textarea { max-width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 640px) { .driver__grid { grid-template-columns: 1fr 1fr; } .paidout { grid-template-columns: 1fr 100px auto; } }
.datebar input[type="date"] { border: 0; background: transparent; font: inherit; padding: 0 .4rem; min-height: 38px; }
.list .who a { color: inherit; text-decoration: none; }
.list .who a:hover { color: var(--primary); text-decoration: underline; }

/* ---------- KPIs, consumables, stock, date checking ---------- */
.kpi-group { border: 1px solid var(--line); border-radius: 10px; padding: .4rem .9rem .5rem; margin: 0 0 .8rem; }
.kpi-group legend { font-weight: 700; color: var(--teal); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; padding: 0 .4rem; }
.kpi-line { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .6rem 1rem; padding: .35rem 0; border-top: 1px solid var(--line); }
.kpi-line:first-of-type { border-top: 0; }
.kpi-line__name { font-weight: 600; }
.kpi-line__rev { display: flex; align-items: center; gap: .4rem; }
.kpi-line__rev input { width: 110px; min-height: 40px; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 8px; }
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.stepper input { width: 64px; text-align: center; border: 0; font-family: var(--mono); font-size: 1.05rem; font-weight: 600; min-height: 40px; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stepper__btn { width: 44px; border: 0; background: var(--bg); font-size: 1.2rem; font-weight: 600; color: var(--primary); }
.stepper__btn:hover { background: var(--primary-soft); }
.kpi-row .num.ok { color: var(--ok-ink); }
.amber-ink { color: var(--amber); }

.catalogue { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: .8rem; }
@media (max-width: 720px) { .catalogue { grid-template-columns: 1fr; } }
.cat-group { border: 1px solid var(--line); border-radius: 10px; padding: .3rem .7rem .5rem; margin: 0; }
.cat-group legend { font-weight: 700; color: var(--teal); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; padding: 0 .4rem; }
.cat-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; padding: .35rem .2rem; border-radius: 8px; cursor: pointer; min-height: 40px; }
.cat-item:hover { background: var(--bg); }
.cat-item.is-on { background: var(--primary-soft); }
.cat-item input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--primary); }
.cat-item__name { font-weight: 600; }
.cat-item__note { display: block; font-size: .8rem; color: var(--muted); font-style: italic; }
.cat-item__qty { display: flex; align-items: center; gap: .3rem; }
.cat-qty { width: 60px; min-height: 36px; padding: .2rem .4rem; border: 1px solid var(--line); border-radius: 8px; text-align: center; font-family: var(--mono); }
.list--stack li { align-items: flex-start; }
.list--stack .who small { white-space: normal; }

.dc-head { display: grid; grid-template-columns: 1fr 70px 90px 140px 36px; gap: .4rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 0 0 .2rem; }
.dc-row { display: grid; grid-template-columns: 1fr 70px 90px 140px 36px; gap: .4rem; margin-bottom: .4rem; }
.dc-row input { min-height: 40px; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.kpi-row .num { white-space: nowrap; margin-left: .75rem; flex: 0 0 auto; }

/* ---------- Admin ---------- */
.admin { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1rem; align-items: start; }
.admin__nav { display: flex; flex-direction: column; gap: .15rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem; position: sticky; top: 76px; z-index: 5; }
/* Narrow screens: the section list sits in the page (not sticky, so it never floats over the form) as wrapped buttons */
@media (max-width: 800px) {
  .admin { grid-template-columns: 1fr; }
  .admin__nav { position: static; flex-direction: row; flex-wrap: wrap; gap: .35rem; }
  .admin__link { min-height: 36px; padding: .4rem .7rem; font-size: .88rem; border: 1px solid var(--line); background: var(--bg); }
  .admin__link.is-active { border-color: transparent; }
}
.admin__link { text-align: left; background: none; border: 0; border-radius: 8px; padding: .55rem .75rem; font-weight: 600; color: var(--muted); white-space: nowrap; min-height: 40px; }
.admin__link:hover { background: var(--bg); color: var(--ink); }
.admin__link.is-active { background: var(--primary-soft); color: var(--primary-ink); }
.admin__body { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.admin__section { overflow-x: auto; }
.table--admin td { font-size: .92rem; }
.table--admin tr.is-off td { color: var(--muted); }
.table__actions { text-align: right; white-space: nowrap; }
.table__actions .btn + .btn { margin-left: .35rem; }
.target-in { width: 96px; min-height: 38px; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 8px; font-family: var(--mono); text-align: right; }
.table--admin select { min-height: 38px; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.field input[type="file"] { min-height: auto; padding: .4rem 0; border: 0; }
/* ticks and radios inside a field are not text boxes: square, brand-coloured, with a ring that follows their shape */
.field input[type="radio"], .field input[type="checkbox"] { min-height: 0; width: 20px; height: 20px; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; accent-color: var(--primary); flex: 0 0 auto; }
.field input[type="radio"]:focus, .field input[type="checkbox"]:focus { outline: none; }
.field input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
/* radios are drawn by us: the native one ignores corner rounding, so its ring came out square */
.field input[type="radio"] { -webkit-appearance: none; appearance: none; border: 2px solid var(--muted); border-radius: 50%; background: #fff; cursor: pointer; }
.field input[type="radio"]:checked { border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 3px #fff; }
.field input[type="radio"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
a.btn, a.btn:hover { text-decoration: none; color: inherit; }
a.btn--primary, a.btn--primary:hover { color: #fff; }

/* ---------- Stock intelligence ---------- */
.progress { position: relative; height: 22px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; margin: .35rem 0; max-width: 420px; }
.progress__bar { position: absolute; inset: 0 auto 0 0; background: var(--primary); transition: width .4s ease; }
.progress__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .75rem; color: var(--ink); mix-blend-mode: difference; color: #fff; }

/* ---------- Stock: usage table + charts ---------- */
.subtabs { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: .15rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .2rem; }
.subtab { border: 0; background: none; padding: .4rem .9rem; border-radius: 8px; font-weight: 600; color: var(--muted); min-height: 36px; }
.subtab.is-active { background: var(--primary-soft); color: var(--primary-ink); }
.usage-bar { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; padding: .8rem 1rem; }
.usage-bar input[type="search"] { min-height: 38px; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 10px; width: 260px; }
.usage-bar select, .usage-bar input[type="month"] { min-height: 38px; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.usage-wrap { padding: 0; overflow: auto; max-height: 72vh; }
.usage { border-collapse: separate; border-spacing: 0; font-size: .88rem; width: 100%; }
.usage:has(.usage__m) { min-width: 1800px; }   /* only the month-by-month usage grid needs the width */
.usage th, .usage td { padding: .45rem .75rem; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.usage thead th { position: sticky; top: 0; background: var(--card); z-index: 3; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 2px solid var(--line); text-align: left; vertical-align: bottom; }
.usage thead th.num, .usage td.num { text-align: right; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.usage__name { position: sticky; left: 0; background: inherit; z-index: 2; min-width: 300px; max-width: 360px; white-space: normal !important; box-shadow: inset -1px 0 0 var(--line); }
@media (max-width: 640px) { .usage__name, .recon td.usage__name, .purchases td.usage__name { min-width: 150px; max-width: none; } .usage { font-size: .85rem; } }   /* grows to the longest word (Phenoxymethylpenicillin) rather than spilling */
.usage thead th.usage__name { z-index: 4; }
.usage__row { background: var(--card); cursor: pointer; }
.usage__row.is-alt { background: #f6f3ec; }
.usage__row:hover td { background: var(--primary-soft); }
.usage__row.is-first td { border-top: 2px solid #e2dccd; }
.usage__row.is-inactive td { color: var(--muted); }
.usage__drug { font-weight: 700; color: var(--primary-ink); }
.usage__line { color: var(--ink); }
.usage__flags { margin-left: .4rem; }
.usage__flags .chip { padding: .05rem .4rem; font-size: .68rem; margin-right: .15rem; }
.usage__m { min-width: 52px; font-size: .78rem; }
.usage td.usage__m.is-l12 { background: rgba(28,63,149,.04); }
.usage td.is-zero { color: #c7c1b4; }
.usage td.up { color: var(--ok-ink); font-weight: 700; } .usage td.down { color: var(--red); font-weight: 700; } .usage td.strong { font-weight: 700; }
.modal--wide { width: min(760px, 100%); }
.chart { width: 100%; height: auto; display: block; margin: .2rem 0 1rem; }
.chart__title { font-family: var(--sans); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: .6rem 0 .2rem; }
.chart__bar { fill: #b9c5e6; } .chart__bar.is-hi { fill: var(--primary); }
.chart__axis { stroke: var(--line); } .chart__ref { stroke: var(--brand-red); stroke-dasharray: 4 3; }
.chart__tick, .chart__label { font-size: 10px; fill: var(--muted); font-family: var(--mono); }

/* ---------- dm+d mapping ---------- */
.map td { vertical-align: top; }
.dmd-results { display: flex; flex-direction: column; gap: .5rem; max-height: 50vh; overflow: auto; }
.dmd-vmp { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; }
.modal input[type="search"] { min-height: var(--tap); padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 10px; }

/* ---------- Forecast ---------- */
.forecast { min-width: 1100px; }
.table tr.is-chosen td { background: var(--ok-soft); --row-bg: var(--ok-soft); font-weight: 600; }

/* ---------- Generic master: % of volume matched, usage expander ---------- */
.coverage { padding: .7rem 1rem; margin-bottom: .8rem; }
.coverage__pct { font-family: var(--display); font-size: 1.1rem; }
.coverage--green { color: var(--ok-ink); } .coverage--amber { color: var(--amber); } .coverage--red { color: var(--red); }
.coverage__bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--bg); margin-top: .5rem; }
.coverage__bar i { display: block; height: 100%; }
.coverage__bar .is-matched { background: var(--ok); } .coverage__bar .is-review { background: var(--amber); } .coverage__bar .is-unmatched { background: var(--red); }
.subtabs--sm .subtab { padding: .3rem .7rem; min-height: 32px; font-size: .85rem; }
.usage__lines { padding: .1rem .5rem; min-height: 28px; font-size: .8rem; white-space: nowrap; }
.usage__sub td { background: rgba(28,63,149,.03); font-size: .85rem; }
.usage__sub .usage__name { padding-left: 1.2rem; }

/* ---------- Stock count (tablet) and stock on hand ---------- */
.count td input { width: 110px; min-height: 44px; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 8px; font-size: 1.05rem; text-align: right; }
.count td.num, .count th.num { text-align: right; }
.onhand td.warn { color: var(--amber); font-weight: 700; } .onhand td.bad { color: var(--red); font-weight: 700; } .onhand td.good { color: var(--ok-ink); }
.opening td input { width: 96px; min-height: 40px; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 8px; text-align: right; }
.opening__progress { font-family: var(--mono); }

/* ---------- Purchasing and tenders ---------- */
.purchases td.usage__name { min-width: 260px; }
.purchases select { min-height: 34px; padding: .2rem .4rem; font-size: .85rem; }
.recon td.usage__name { min-width: 240px; }

/* ---------- Findings ---------- */
.weekly__list { margin: .3rem 0 0; padding-left: 1.4rem; display: grid; gap: .6rem; }
.weekly__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.weekly__value { font-family: var(--display); font-weight: 700; color: var(--brand-red, #b3261e); margin-left: auto; }
.finding { padding: .8rem 1rem; }
.finding__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.finding__value { font-family: var(--display); font-size: 1.3rem; font-weight: 700; white-space: nowrap; }
.finding__value small { font-size: .8rem; color: var(--muted); font-weight: 500; }
.finding__body { display: grid; gap: .25rem; margin: .45rem 0; }
.finding__actions { justify-content: flex-end; }
.finding__body .btn-link { padding: .1rem .35rem; color: var(--primary); }

/* ---------- Stock intelligence: findings as boxed cards, grouped by kind ---------- */
.finding-card { border-top-color: var(--red); }
.finding-card[data-kind="excess_stock"], .finding-card--open[data-weekly] { border-top-color: var(--red); }
.finding-card--actioned { border-top-color: var(--ok); }
.finding-card--dismissed, .finding-card--resolved { border-top-color: var(--line); }
.finding-card__title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.finding-card__rank { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--primary-ink); color: #fff; font-weight: 700; font-size: .82rem; }
.finding-card__lead { margin: .55rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.finding-card__owner { display: inline-block; margin-left: .2rem; padding: .05rem .5rem; border-radius: 999px; background: rgba(255,255,255,.7); font-size: .76rem; font-weight: 700; color: var(--primary-ink); white-space: nowrap; }
.opp-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opp-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opp-stat--loss { background: var(--red-soft); } .opp-stat--loss .opp-stat__value { color: var(--red); }
.opp-stat--text .opp-stat__value { font-family: var(--sans); font-size: 1rem; white-space: normal; line-height: 1.3; margin-top: .3rem; }
@media (max-width: 760px) {
  .opp-stats--3, .opp-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opp-stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd box out spans the row instead of leaving a hole */
}
.leader.btn-link { cursor: pointer; font: inherit; font-size: .8rem; color: var(--primary); }
.leader.btn-link:hover { border-color: var(--primary); }
.finding-filters { gap: .45rem; flex-wrap: wrap; margin-bottom: .6rem; }
.finding-filters input[type="search"] { flex: 1 1 180px; min-width: 0; }
.finding-tools { gap: .5rem; flex-wrap: wrap; margin-bottom: .2rem; }
.fgroups { display: flex; flex-direction: column; gap: .75rem; margin-top: .9rem; }
.fgroup { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.fgroup > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap; padding: .8rem 1rem; border-radius: 12px; }
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup > summary::before { content: ''; width: .5rem; height: .5rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s ease; margin-right: .2rem; flex: 0 0 auto; }
.fgroup[open] > summary::before { transform: rotate(45deg); }
.fgroup[open] > summary { border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
.fgroup__title { font-weight: 700; color: var(--primary-ink); flex: 1 1 auto; display: inline-flex; align-items: center; gap: .45rem; }
.fgroup__count { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.fgroup__sum { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .88rem; color: var(--muted); }
.fgroup__sum strong { color: var(--red); }
.fgroup__owner { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.fgroup > :not(summary) { padding: 0 .75rem .75rem; }   /* every fold's content sits off the border: opportunities, Tariff lists, concessions */
.fgroup > .list + p, .fgroup > .list + .muted { padding-top: .4rem; }
@media (max-width: 640px) { .fgroup > summary { padding: .75rem .8rem; } .fgroup > :not(summary) { padding: 0 .5rem .5rem; } .fgroup__sum { width: 100%; padding-left: 1.1rem; } }

/* Headline figures: two to a row on a phone instead of one tall card each. */
@media (max-width: 640px) {
  .grid--4:has(> .stat) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .grid--4 > .stat { padding: .85rem .9rem; }
  .grid--4 > .stat .stat__label { font-size: .7rem; }
  .grid--4 > .stat .stat__value { font-size: 1.45rem; overflow-wrap: anywhere; }
  .grid--4 > .stat .stat__sub { font-size: .76rem; line-height: 1.35; }
}
@media (max-width: 640px) { .finding-card .opp-target { width: 100%; } .finding-card .opp-target .btn { flex: 1 1 auto; } }

/* A "How to read this" list sitting between cards (Stock intelligence sections). */
.howto--page { margin-top: 1rem; }
.howto--page summary { padding: .1rem 0; }
.howto--page ul { background: var(--card); border: 1px solid var(--line); }
.usage td.mono { font-family: var(--sans); font-variant-numeric: tabular-nums; }   /* pack sizes in the body typeface, like every other figure */

/* ---------- Stock intelligence: "Add your files" (many files or one .zip, sorted automatically) ---------- */
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; margin-top: .9rem; padding: 1.4rem 1rem; border: 2px dashed var(--line); border-radius: 14px; background: var(--bg); text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.dropzone:hover, .dropzone.is-over, .dropzone:focus-within { border-color: var(--primary); background: var(--primary-soft); }
.dropzone strong { color: var(--primary-ink); font-size: 1.02rem; }
.dropzone__icon { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--primary); font-size: 1.25rem; font-weight: 700; margin-bottom: .2rem; box-shadow: var(--shadow); }
.dropzone__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.filelist { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.filelist__item { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.filelist__item.is-bad { border-color: #f3c2c2; background: #fffafa; }
.filelist__item input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--primary); }
.filelist__dot { width: 1.15rem; flex: 0 0 auto; }
.filelist__body { flex: 1 1 auto; min-width: 0; }
.filelist__name { font-weight: 600; overflow-wrap: anywhere; }
.filelist__status { margin-top: .3rem; }
.filelist__remove { flex: 0 0 auto; background: none; border: 0; color: var(--muted); font-size: 1.2rem; line-height: 1; width: 28px; height: 28px; border-radius: 8px; }
.filelist__remove:hover { background: var(--bg); color: var(--ink); }
.import-actions { margin-top: .9rem; gap: .6rem; flex-wrap: wrap; }

.filelist__status .chip { white-space: normal; text-align: left; line-height: 1.35; }   /* long export names wrap inside the chip */
.filelist__skipped { margin: .6rem 0 0; overflow-wrap: anywhere; }

.callout--red { background: var(--red-soft); border-left-color: var(--red); color: var(--ink); }

/* Stock intelligence: four everyday sections, the workings one tap away */
.subtab--workings { color: var(--muted); font-weight: 600; border: 1px dashed var(--line); }
.subtab--workings.is-open { border-style: solid; }
.subtabs--workings { background: var(--bg); }
.offer-rules { gap: .45rem; flex-wrap: wrap; align-items: center; margin: .2rem 0 .3rem; }
.offer-rules input { min-height: 36px; padding: .25rem .5rem; border: 1px solid var(--line); border-radius: 8px; }
.offer-foot { margin-top: 1rem; gap: .6rem; flex-wrap: wrap; }
.offer-card--bulk { border-top-color: var(--ok); } .offer-card--month { border-top-color: var(--primary); } .offer-card--check { border-top-color: var(--amber); } .offer-card--skip { border-top-color: var(--line); }
.offer-card .finding-card__title input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); }
.fgroup__sum strong.good { color: var(--ok-ink); }

/* figures never clip: the number stays whole, its unit drops to the next line when the box is narrow */
.opp-stat__value { white-space: normal; }
.opp-stat__unit { white-space: nowrap; display: inline-block; }

/* ---------- "Send your details" page (/join) ---------- */
.join-page { background: var(--bg); }
.join-card { width: min(520px, 100%); }
.join-form .field + .field { margin-top: .9rem; }
.join-form .btn--block { width: 100%; margin-top: 1.1rem; min-height: 48px; font-size: 1.02rem; }
.join-privacy { margin: .9rem 0 0; line-height: 1.5; }
.join-done { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.join-done h1 { margin: 0; }
.join-done__tick { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); font-weight: 700; font-size: 1.2rem; }

/* Admin → Staff: the "send your details" link and what came back */
.join-link { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.join-link input { flex: 1 1 260px; min-width: 0; min-height: 40px; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 8px; font-family: var(--mono); font-size: .85rem; background: var(--bg); }
.signup { border-top-color: var(--primary); }
.signup__facts { margin: .7rem 0 .4rem; }

#offer-paste { width: 100%; min-height: 96px; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 10px; font-family: var(--mono); font-size: .82rem; }

/* /join: days and usual hours */
.login { width: 100%; }                                   /* #app is a flex row: without this the sign-in and join cards sat left of centre on desktops */
.login .join-card { width: min(600px, 100%); }
.hours { display: flex; flex-direction: column; gap: .4rem; }
.hours__row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.hours__row.is-on { background: var(--card); border-color: var(--primary); }
.hours__day { display: inline-flex; align-items: center; gap: .5rem; min-width: 4.4rem; font-weight: 600; cursor: pointer; }
.hours__day input { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); }
.hours__times { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.hours__time { min-height: 38px; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 8px; width: 7.2rem; font-size: .95rem; }
.hours__break { min-height: 38px; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 8px; width: 4.2rem; font-size: .95rem; }
@media (max-width: 640px) { .hours__row { padding: .45rem .5rem; } .hours__times { gap: .3rem; } .hours__time { width: 6.4rem; } .hours__break { width: 3.8rem; } }

.join-intro { margin: 0 0 1.1rem; font-size: 1.02rem; color: var(--ink); }

/* Imports: the email drop box */
.inbox__items { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.inbox__item { font-size: .85rem; padding-left: .9rem; position: relative; overflow-wrap: anywhere; }
.inbox__item::before { content: ''; position: absolute; left: 0; top: .5em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--muted); }
.inbox__item--queued::before, .inbox__item--imported::before, .inbox__item--offer::before { background: var(--ok); }
.inbox__item--rejected::before, .inbox__item--failed::before { background: var(--red); }
.inbox__name { font-weight: 600; }

.map__notice { position: absolute; left: .6rem; bottom: .6rem; z-index: 500; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 8px; padding: .3rem .6rem; font-size: .78rem; color: var(--muted); }

/* Drug Tariff card (Tenders): the net £ a month in the summary line */
.small .good, p .good { color: var(--ok-ink); }
.small .bad, p .bad { color: var(--red); }

/* Date checking board: shelves down, months across, this month marked; a cell is a signed check or a due slot */
.dcgrid th.dcgrid__month { text-align: center; white-space: nowrap; font-size: .72rem; }
.dcgrid th.is-now, .dcgrid td.is-now { background: var(--primary-soft); }
.dcgrid td.dcgrid__shelf { min-width: 250px; max-width: 280px; }
.dcgrid td.dcgrid__shelf .small { margin-top: .15rem; }
.dcgrid__now { margin-top: .35rem; }
.dcgrid__cell { text-align: center; white-space: nowrap; font-size: .78rem; min-width: 64px; vertical-align: middle; border-radius: 8px; }
.dcgrid__cell[role="button"] { cursor: pointer; }
.dcgrid__cell[role="button"]:hover, .dcgrid__cell[role="button"]:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.dcgrid__cell.is-done { color: var(--ok-ink); font-weight: 700; }
.dcgrid__cell.is-done .dcgrid__who { font-weight: 600; }
.dcgrid__cell.is-done .dcgrid__day { display: block; font-weight: 400; font-size: .7rem; color: var(--muted); }
.dcgrid__cell.is-due { color: var(--amber); font-weight: 700; }
.dcgrid__cell.is-overdue { color: var(--red); font-weight: 700; }
.dcgrid__cell.is-scheduled { color: var(--muted); font-style: italic; }
.dcgrid__cell.is-past::before, .dcgrid__cell.is-open::before { content: '·'; color: var(--line); }
@media (max-width: 760px) {
  .dcgrid td.dcgrid__shelf { min-width: 128px; max-width: 150px; font-size: .85rem; }
  .dcgrid td.dcgrid__shelf .muted.small { display: none; }   /* last-check detail: tap the tick instead */
  .dcgrid__cell { min-width: 50px; font-size: .7rem; }
}

/* Drop-downs: the same shape as every other field, with our own chevron instead of the browser's */
select { -webkit-appearance: none; appearance: none; padding-right: 2rem !important; background-color: #fff; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231c3f95' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right .7rem center; border: 1px solid var(--line); border-radius: 10px; min-height: 40px; padding: .4rem .75rem; color: var(--ink); }
select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
select:disabled { color: var(--muted); background-color: var(--bg); }

/* Date checking board, by day: six weeks across, this day marked, weekends faint */
.dcgrid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--pad-x, 1.2rem)); }   /* no side padding: the pinned shelf column sits flush with the card edge, so nothing scrolls past behind it */
.dcgrid th.dcgrid__shelfhead, .dcgrid td.dcgrid__shelf { padding-left: var(--pad-x, 1.2rem) !important; }
.dcgrid th:last-child, .dcgrid td:last-child { padding-right: var(--pad-x, 1.2rem); }
.dcgrid th.dcgrid__day { text-align: center; font-size: .74rem; padding: .3rem .8rem; min-width: 50px; }
.dcgrid th.dcgrid__day .dcgrid__moname { color: var(--primary); font-weight: 700; font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; }
.dcgrid th.dcgrid__shelfhead, .dcgrid td.dcgrid__shelf { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 2px 0 0 var(--line); }
.dcgrid th.dcgrid__shelfhead { z-index: 2; }
.dcgrid th.dcgrid__day small { display: block; font-weight: 400; color: var(--muted); font-size: .62rem; }
.dcgrid th.is-wkend, .dcgrid td.is-wkend { background: var(--cream, #f7f1e6); }
.dcgrid__cell { min-width: 50px; padding: .3rem .5rem; font-size: .7rem; line-height: 1.15; }
.dcgrid__cell.is-past::before, .dcgrid__cell.is-open::before { content: ''; }
.dcgrid__mark { display: inline-block; min-width: 1.4rem; padding: .15rem .3rem; border-radius: 6px; font-weight: 700; }
.dcgrid__cell.is-due .dcgrid__mark { background: var(--amber-soft); color: var(--amber); }
.dcgrid__cell.is-overdue .dcgrid__mark, .dcgrid__cell.is-missed .dcgrid__mark { background: var(--red-soft); color: var(--red); }
.dcgrid__cell.is-done .dcgrid__mark { background: var(--ok-soft); color: var(--ok-ink); }
.dcgrid__cell.is-scheduled .dcgrid__mark { background: var(--amber-soft); color: var(--amber); font-style: normal; opacity: .75; }
.sd-form .grid--2 { gap: .5rem; }
.doop__totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .5rem 0 .75rem; }

/* Nominations over time (Local market) */
.trend__wrap { margin: .25rem 0 .75rem; }
.trend__chart { width: 100%; height: auto; display: block; }
.trend__table td.good { color: var(--ok-ink); font-weight: 600; } .trend__table td.bad { color: var(--red); font-weight: 600; }
.trend__table tr.is-me { background: var(--primary-soft); }

/* Consumables: running low, the shelf count */
.cat-item.is-low .cat-item__name { color: var(--amber); }
.cc-list { display: flex; flex-direction: column; gap: .3rem; max-height: 60vh; overflow: auto; }
.cc-row { display: grid; grid-template-columns: 1fr 90px; gap: .5rem; align-items: center; padding: .25rem 0; border-bottom: 1px solid var(--line); }
.cc-row input { min-height: 38px; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 8px; text-align: center; font-family: var(--mono); }
.good { color: var(--ok-ink); }

/* Dashboard: what needs a decision */
.list li.decision { border-left: 4px solid var(--line); padding: .7rem .35rem .7rem 1rem; border-radius: 0 8px 8px 0; }
.decision .who small { margin-top: .2rem; }
.decision .row { flex-wrap: wrap; justify-content: flex-end; gap: .4rem .5rem; }
.decision--red { border-left-color: var(--red); } .decision--amber { border-left-color: var(--amber); } .decision--clear { border-left-color: var(--ok); }

/* Daily KPIs: the month at a glance */
.kpi-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.kpi-tile { background: var(--cream); border-radius: 10px; padding: .7rem .8rem; border-left: 4px solid var(--line); min-width: 0; }
.kpi-tile--worth { border-left-color: var(--ok); } .kpi-tile--loss { border-left-color: var(--red); }
.kpi-tile__head { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.kpi-tile__name { font-weight: 700; color: var(--ink); }
.kpi-tile__big { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--primary-ink); margin-top: .15rem; }
.kpi-tile__of { font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--muted); }
.kpi-bar { height: 6px; background: #fff; border-radius: 999px; overflow: hidden; margin: .35rem 0; border: 1px solid var(--line); }
.kpi-bar__fill { height: 100%; background: var(--primary); border-radius: 999px; }
.kpi-tile--worth .kpi-bar__fill { background: var(--ok); } .kpi-tile--loss .kpi-bar__fill { background: var(--red); }
.kpi-tile__foot { font-size: .8rem; color: var(--muted); }
.kpi-tile__trend { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }

/* SOPs: who has signed what */
.sop-matrix th.sop-matrix__sop { text-align: center; max-width: 120px; white-space: normal; font-size: .72rem; line-height: 1.2; vertical-align: bottom; }
.sop-matrix__cell { text-align: center; font-weight: 700; min-width: 44px; }
.sop-matrix__cell.is-read { color: var(--ok-ink); } .sop-matrix__cell.is-nr { color: var(--muted); font-weight: 600; font-size: .8rem; }
.sop-matrix__cell.is-stale { color: var(--amber); font-size: .78rem; } .sop-matrix__cell.is-none { color: var(--line); }
.kpi-rest { margin: .7rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.6; } .kpi-rest strong { color: var(--ink); } .kpi-rest__n { font-weight: 700; color: var(--ink); font-family: var(--mono, inherit); }

/* Notices: who gets it */
.check { display: inline-flex; align-items: center; gap: .5rem; min-height: 34px; margin-right: .9rem; cursor: pointer; }
.notice-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .3rem .6rem; margin-top: .5rem; padding: .6rem .7rem; background: var(--cream); border-radius: 10px; }
.notice-picks .check { margin: 0; }
.notice-state { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; text-align: right; flex: 0 0 auto; max-width: 45%; }

/* Go-live checklist */
.golive__bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin: .2rem 0 1rem; }
.golive__fill { height: 100%; background: var(--ok); border-radius: 999px; transition: width .3s; }
.golive__group h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 1rem 0 .3rem; }
.golive__list li { display: flex; align-items: center; gap: .7rem; }
.golive__list li .who { flex: 1; }
.golive__dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; background: var(--line); box-shadow: inset 0 0 0 2px var(--card); }
.golive__dot--ok { background: var(--ok); } .golive__dot--warn { background: var(--amber); } .golive__dot--bad { background: var(--red); } .golive__dot--tick { background: transparent; border: 2px solid var(--muted); }

/* The hidden attribute always wins, even on elements with their own display rule (.field, .row, .card). */
[hidden] { display: none !important; }

/* Rota, by day: seven columns of who is in; stacked on narrower screens */
.rota-view { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); }
.rota-view button { border: 0; background: transparent; padding: .35rem .75rem; font: inherit; font-size: .85rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.rota-view button.is-on { background: var(--primary); color: #fff; }
.rota-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.rota-day { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .55rem; min-height: 220px; display: flex; flex-direction: column; gap: .4rem; box-shadow: var(--shadow); }
.rota-day.is-weekend { background: #faf8f3; }
.rota-day.is-today { box-shadow: inset 0 3px 0 var(--primary), var(--shadow); }
.rota-day.is-closed { opacity: .72; }
.rota-day__head { display: flex; flex-direction: column; gap: .15rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
.rota-day__date { font-size: .95rem; display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; }
.rota-day__today { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.rota-day__meta { font-size: .76rem; color: var(--muted); display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.rota-day__meta .chip { font-size: .62rem; padding: .05rem .4rem; }
.rota-day__list { display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.rota-person { text-align: left; width: 100%; border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: .42rem .5rem; display: flex; flex-direction: column; gap: .12rem; font: inherit; font-size: .84rem; cursor: pointer; color: var(--ink); }
.rota-person:hover { border-color: var(--primary); }
.rota-person__name { font-weight: 700; display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; line-height: 1.2; }
.rota-person__name .muted { font-weight: 500; }
.rota-person__tag { font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .08rem .38rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary); }
.rota-person.is-pharmacist { border-left: 3px solid var(--primary); }
.rota-person.is-locum { background: var(--purple-soft); border: 1.5px dashed var(--purple); color: var(--purple); }
.rota-person.is-locum .rota-person__tag { background: #fff; color: var(--purple); }
.rota-person.is-off_sick { background: var(--red-soft); border-color: #f3c2c2; color: var(--red); }
.rota-person.is-holiday { background: var(--amber-soft); border-color: #eadba4; color: var(--amber); }
.rota-person .rota__actual { font-size: .76rem; }
.rota-day__add { border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 9px; padding: .4rem; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.rota-day__add:hover { border-color: var(--primary); color: var(--primary); }
@media (max-width: 1180px) {
  .rota-days { grid-template-columns: 1fr; }
  .rota-day { min-height: 0; }
  .rota-day__head { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .rota-day__list { flex-direction: row; flex-wrap: wrap; }
  .rota-person { width: auto; flex: 1 1 190px; max-width: 320px; }
  .rota-day__add { align-self: flex-start; padding: .4rem .9rem; }
}
.rota-person.is-unavailable { background: repeating-linear-gradient(135deg, #fff 0 6px, var(--bg) 6px 9px); color: var(--muted); cursor: default; }

/* tick lists in a form modal */
.check-list { display: grid; gap: .35rem; }
.check-item { display: flex; align-items: center; gap: .55rem; min-height: 34px; font-size: .95rem; }
.check-item input { width: 20px; height: 20px; accent-color: var(--primary); }

/* Local market: who to watch */
.watch__list { display: grid; gap: .4rem; margin-top: .6rem; }
.watch { border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.watch__row { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .6rem .8rem; cursor: pointer; }
.watch__row::-webkit-details-marker { display: none; }
.watch[open] .watch__row { border-bottom: 1px solid var(--line); }
.watch__body { padding: .6rem .9rem .8rem; display: grid; gap: .5rem; }
.watch__score { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--ink); min-width: 2ch; text-align: right; }
.watch__right { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: .6rem; min-width: 9.5rem; }   /* score and label in one fixed column, so rows line up */
.watch__right .chip { min-width: 5.6rem; justify-content: center; }
@media (max-width: 640px) { .watch__right { min-width: 7.2rem; flex-direction: column; align-items: flex-end; gap: .3rem; } }
.watch__why { margin: 0; padding-left: 1.2rem; }
.watch__why li { font-weight: 600; }
.watch__actions { margin: .2rem 0 0; padding-left: 1.2rem; font-size: .9rem; }
.watch__table { max-width: 520px; }
.watch__row .who small { display: block; }

/* Local market: the tab bar */
.market-tabs { display: flex; width: 100%; margin: 0 0 .9rem; }
.market-tabs .subtab { flex: 1 1 auto; text-align: center; }

/* Phones: nothing on a page can push it sideways; wide tables scroll inside their own wrapper (clip keeps the sticky top bar working) */
@media (max-width: 640px) { .main, .page { overflow-x: clip; } .sa { overflow-x: clip; } }

/* Folding groups on the Daily KPIs and Consumables forms */
.kpi-group, .cat-group { border: 1px solid var(--line); border-radius: 10px; padding: 0; margin: 0 0 .6rem; background: var(--card); }
.kpi-group > summary, .cat-group > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .55rem .8rem; min-height: 40px; font-weight: 700; color: var(--teal); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; border-radius: 10px; }
.kpi-group > summary::-webkit-details-marker, .cat-group > summary::-webkit-details-marker { display: none; }
.kpi-group > summary::after, .cat-group > summary::after { content: ''; flex: 0 0 auto; width: .45rem; height: .45rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.kpi-group[open] > summary::after, .cat-group[open] > summary::after { transform: rotate(45deg); }
.kpi-group[open] > summary, .cat-group[open] > summary { border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.kpi-group__sum, .cat-group__sum { margin-left: auto; margin-right: .6rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); font-size: .8rem; }
.kpi-group > .kpi-line, .cat-group > .cat-item { margin: 0 .6rem; }
.kpi-group[open], .cat-group[open] { padding-bottom: .35rem; }
.kpi-group > .kpi-line:first-of-type { border-top: 0; }
.cat-search { min-height: 36px; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 8px; min-width: 11rem; font: inherit; font-size: .9rem; }
/* Admin: grouped section list */
.admin__group { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: .7rem .75rem .2rem; }
.admin__group:first-child { padding-top: .25rem; }
@media (max-width: 800px) { .admin__group { flex-basis: 100%; padding: .45rem .25rem 0; } }

/* Appointments (Semble) */
.kpi-line__booked { color: var(--muted); font-weight: 500; font-size: .85rem; white-space: nowrap; }
.bk-services { margin: -.2rem 0 .6rem; }
.bk-cancelled { margin-top: .6rem; }
.bk-cancelled > summary { cursor: pointer; }

/* ── How-to guides (views/guides.js) ─────────────────────────────────────────────────────────────────────── */
.topbar__how { display: inline-flex; align-items: center; gap: .35rem; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem .35rem .55rem; font-weight: 700; font-size: .88rem; color: var(--primary-ink); cursor: pointer; min-height: 38px; }
.topbar__how svg { width: 18px; height: 18px; }
.topbar__how:hover { border-color: var(--primary); }
.topbar__how[hidden] { display: none; }
.guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.guide-card { display: flex; flex-direction: column; gap: .35rem; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; cursor: pointer; font: inherit; color: inherit; box-shadow: 0 1px 2px rgba(20,32,58,.04); }
.guide-card:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(20,32,58,.08); }
.guide-card__title { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--primary-ink); }
.guide-card__sum { color: var(--muted); font-size: .92rem; line-height: 1.4; }
.guide-card__meta { margin-top: auto; padding-top: .3rem; font-size: .8rem; color: var(--muted); }
.guides__back { margin-bottom: .6rem; }
.guide-block { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; margin-bottom: 1rem; }
.guide-block--text { grid-template-columns: 1fr; }
.guide-shot { margin: 0; }
.guide-shot__frame { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(20,32,58,.10); }
.guide-shot__frame img { display: block; width: 100%; height: auto; }
.guide-mark { position: absolute; border: 3px solid #e1251b; border-radius: 8px; box-shadow: 0 0 0 3px rgba(255,255,255,.75); pointer-events: none; }
.guide-mark__n { position: absolute; left: -15px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: #e1251b; color: #fff; font-weight: 700; font-size: .82rem; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.guide-mark__n--inline { position: static; transform: none; display: inline-grid; width: 22px; height: 22px; font-size: .74rem; vertical-align: 1px; margin: 0 .1rem; box-shadow: none; }
.guide-steps { margin: 0; padding-left: 1.3rem; display: grid; gap: .85rem; }
.guide-steps li { line-height: 1.5; padding-left: .2rem; }
.guide-steps li::marker { font-weight: 700; color: var(--primary-ink); }
.guide-tips h2 { margin-top: 0; }
.guide-tips ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
@media (max-width: 900px) { .guide-block { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .topbar__how span { display: none; } .topbar__how { padding: .35rem .5rem; } }

/* ── Classroom, manager view (views/classroom.js) ───────────────────────────────────────────────────────── */
.cls-team td { vertical-align: middle; min-width: 150px; }
.cls-mini { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: .25rem; max-width: 180px; }
.cls-mini__fill { height: 100%; background: var(--amber, #c98a1a); border-radius: 999px; }
.cls-mini__fill.is-done { background: var(--ok); }
.cls-detail { margin-top: 1rem; }
.cls-detail > summary { cursor: pointer; padding: .2rem 0; }
.cls-detail[open] > summary { margin-bottom: .6rem; }
.cls-grid__section td { background: var(--bg); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cls-grid__who { text-align: center; white-space: nowrap; }
.cls-grid__cell { text-align: center; font-weight: 700; color: var(--ok); }
.cls-grid__cell.is-done { background: var(--ok-soft); }
.cls-grid__cell.is-na { color: #c3c7cd; font-weight: 400; }
.cls-access td.num, .cls-access th.num { text-align: center; }
.cls-access input[type=checkbox] { width: 20px; height: 20px; }
#outlet .page > .card[data-testid="classroom-access"] { margin-top: 1rem; }
.view-only { background: var(--primary-soft, #eaf0fb); border-left: 4px solid var(--primary); padding: .7rem 1rem; margin-bottom: 1rem; }

/* Training records (Belfairs University): the checklist on the phone and the team matrix in the branch app */
.tr { display: grid; gap: .8rem; }
.tr-summary { display: grid; gap: .55rem; }
.tr-summary__nums { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.tr-summary__nums > div { display: grid; }
.tr-summary__nums strong { font-size: 1.35rem; font-family: var(--display); color: var(--primary-ink); }
.tr-summary__nums .is-bad strong { color: var(--red); }
.tr-summary p { margin: 0; }
.tr-group h2 { margin: 0; padding-top: .2rem; }
.tr-list { list-style: none; margin: 0; padding: 0; }
.tr-list li + li { border-top: 1px solid var(--cls-track, var(--line)); }
.tr-item__main { display: flex; align-items: center; gap: .7rem; width: 100%; background: none; border: 0; padding: .7rem 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.tr-item__text { display: grid; flex: 1; min-width: 0; }
.tr-item__title { font-weight: 600; }
.tr-item__meta { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.tr-item .chip { flex: 0 0 auto; white-space: nowrap; }
.tr-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.tr-dot.is-red { background: var(--red); } .tr-dot.is-amber { background: var(--amber); } .tr-dot.is-green { background: var(--ok); } .tr-dot.is-blue { background: var(--primary); }
.tr-detail { display: grid; gap: .5rem; margin-bottom: .9rem; }
.tr-detail p { margin: 0; }
.tr-detail__rec { display: grid; gap: .35rem; justify-items: start; padding: .7rem .8rem; border-radius: 10px; background: var(--primary-soft); }
.tr-link { text-decoration: none; text-align: center; white-space: normal; height: auto; line-height: 1.3; padding-top: .65rem; padding-bottom: .65rem; }
.tr-detail, .tr-detail > * { min-width: 0; overflow-wrap: anywhere; }
.tr-matrix th, .tr-matrix td { text-align: center; white-space: nowrap; }
.tr-matrix th:first-child, .tr-matrix td:first-child { text-align: left; position: sticky; left: 0; background: var(--card, #fff); z-index: 1; }
.tr-matrix thead th { font-size: .74rem; font-weight: 700; vertical-align: bottom; white-space: normal; min-width: 84px; max-width: 120px; line-height: 1.2; }
.tr-cell { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 .4rem; border-radius: 7px; border: 0; font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; }
.tr-cell.is-missing, .tr-cell.is-expired { background: var(--red-soft); color: var(--red); }
.tr-cell.is-due, .tr-cell.is-progress { background: var(--amber-soft); color: var(--amber); }
.tr-cell.is-unchecked { background: var(--primary-soft); color: var(--primary-ink); }
.tr-cell.is-ok { background: var(--ok-soft); color: var(--ok-ink); }
.tr-cell.is-na { background: none; color: var(--muted); cursor: default; }
.tr-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .8rem; color: var(--muted); }
.tr-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.tr-tabs { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--cls-track, var(--line)); }
.tr-tabs button { border: 0; background: none; font: inherit; font-weight: 700; padding: .45rem 1rem; border-radius: 999px; color: var(--muted); cursor: pointer; }
.tr-tabs button.is-on { background: var(--card, #fff); color: var(--primary-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* "Who is using this computer?": the shared dispensary computer's sign-in list (web/js/views/login.js, people.js) */
.who { width: 100%; max-width: 1100px; margin: 0 auto; padding: 2.5rem 1rem 3rem; }
.who__head { text-align: center; margin-bottom: 1.4rem; }
.who__head h1 { margin: 0 0 .3rem; }
.who-tools { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; justify-content: center; align-items: center; margin-top: 1rem; }
.who-tools input[type=search] { width: min(320px, 100%); min-height: var(--tap); padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; box-sizing: border-box; }
.who-tools input[type=search]:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.who-sorts { display: flex; gap: 1rem; }
.who-sorts .btn-link.is-on { font-weight: 700; text-decoration: underline; }
.who-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; }
.who-tile { position: relative; display: flex; align-items: stretch; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); min-width: 0; }
.who-tile:hover { border-color: var(--primary); }
.who-pick, .who-tile--new { all: unset; box-sizing: border-box; flex: 1; display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; cursor: pointer; min-width: 0; border-radius: 14px; }
.who-tile--new { padding-right: .9rem; border: 1px dashed var(--line); background: transparent; box-shadow: none; }
.who-pick:focus-visible, .who-tile--new:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.who-av { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 700; font-size: 1.1rem; letter-spacing: .02em; }
.who-av--new { background: transparent; color: var(--primary); border: 2px dashed currentColor; font-size: 1.5rem; }
.who-text { display: grid; min-width: 0; }
.who-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; }
.who-text small { color: var(--muted); }
.who-picked { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.who-picked h1 { margin: 0; }
.who-picked p { margin: 0; }

/* iPhone: Safari zooms in on any text box under 16px when it is tapped, and the zoomed page then slides sideways.
   16px on phones and touch screens stops the zoom (the staff app does the same); text-size-adjust stops Safari
   enlarging text on rotation; overflow-x: clip is a backstop so nothing can make the page wider than the screen
   (clip, not hidden, so the sticky top bar keeps working). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
@media (max-width: 900px), (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}