/* ScripDock styles. Colours are semantic tokens with a light and a dark set: dark mode is for night shifts in a
   dim bar (deep blue-grey, never pure black, lower glare). It follows the device unless the person picks
   Light or Dark in the sidebar (stored as data-theme on <html>). Every text pairing below meets WCAG AA. */
:root{
  color-scheme:light;
  /* Brand constants (also used in the Excel and Word exports). */
  --navy:#00263d;--red:#811429;
  /* Surfaces and text */
  --bg:#f4f7f9;            /* page */
  --surface:#fff;          /* cards, dialogs, warning cards */
  --surface-2:#fbfdfe;     /* boxes inside cards: shifts, the open employee panel */
  --sunken:#f4f7f9;        /* disabled fields */
  --line:#d9e1e7;          /* dividers and card borders */
  --field-bg:#fff;
  --field-line:#7b8a96;    /* form field borders: 3.5:1, so fields are visible (WCAG 1.4.11) */
  --text:#16222b;
  --muted:#5d6d79;         /* secondary text: about 5:1 */
  --heading:#00263d;
  --link:#00263d;
  /* Brand fills and controls */
  --brand:#00263d;         /* primary buttons, active tab, today */
  --on-brand:#fff;
  --btn-bg:#fff;--btn-line:#00263d;--btn-text:#00263d;
  --accent-soft:#e4eef4;--accent-text:#00263d;   /* chips and tags */
  --badge-neutral:#dbe7ef;
  --today-line:#00263d;--today-cell:#f2f7fa;
  /* Sidebar and the roster grid header */
  --side-bg:#00263d;--side-text:#dfe8ee;--side-muted:#b8c7d3;--side-active-bg:#fff;--side-active-text:#00263d;
  --tt-head:#00263d;--tt-head-today:#0b4466;--tt-head-muted:#b8c7d3;--tt-time:#3f4e59;
  /* Grid shift bands (the bar's paper timetable colours) */
  --band-0:#fff2cc;--band-1:#c6e9b4;--band-2:#f8cbad;--band-3:#ddebf7;--band-4:#e4dfec;
  /* Status */
  --danger:#811429;--danger-fill:#811429;--danger-bg:#fdecee;--danger-line:#e9a3ae;--danger-strong:#5c0d1c;
  --final-bg:#fdf6f7;--final-line:#ecc3cb;
  --warn-bg:#fff1d6;--warn-text:#7a4b00;
  --notice-bg:#fff7e0;--notice-line:#ecd58a;
  --ok-bg:#eef7f1;--ok-line:#b9d3c4;--clock-in:#1f7a4d;--on-clock-in:#fff;  /* clocked in: green border and badge */
  --toast-bg:#00263d;--toast-text:#fff;
  --focus:#0b5f8f;
  --backdrop:rgba(0,20,33,.45);
  --shadow:0 18px 48px rgba(0,0,0,.24);
  /* Type roles: one family (the system UI face), six sizes. Weight and colour carry the rest. */
  --fs-page:1.5rem;     /* page title in the header */
  --fs-section:1.125rem;/* card, panel and dialog headings; days; the roster week */
  --fs-title:1rem;      /* items: a shift, a person (semibold) */
  --fs-body:1rem;
  --fs-meta:.875rem;    /* labels, details, small buttons */
  --fs-micro:.75rem;    /* tags, badges, table column labels */
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0d1720;--surface:#142230;--surface-2:#182838;--sunken:#101c27;--line:#2a3d4f;
    --field-bg:#0f1b26;--field-line:#5d7387;--text:#e3eaf0;--muted:#9fb0bf;--heading:#e8f0f6;--link:#8cc4ec;
    --brand:#2f6f96;--on-brand:#fff;--btn-bg:#142230;--btn-line:#6f93ad;--btn-text:#cfe0ec;
    --accent-soft:#20384c;--accent-text:#d6e6f2;--badge-neutral:#2a4357;--today-line:#5b97c0;--today-cell:#1a2c3c;
    --side-bg:#09121a;--side-text:#c9d6e0;--side-muted:#8ea2b3;--side-active-bg:#1d3346;--side-active-text:#fff;
    --tt-head:#1d3346;--tt-head-today:#24506f;--tt-head-muted:#9fb0bf;--tt-time:#b4c3cf;
    --band-0:#3b3418;--band-1:#24361f;--band-2:#3d2a20;--band-3:#1f3043;--band-4:#2e2a3d;
    --danger:#f08a9b;--danger-fill:#b3263f;--danger-bg:#3a1820;--danger-line:#6b2a36;--danger-strong:#f6c1ca;
    --final-bg:#2a1a20;--final-line:#5a2a35;--warn-bg:#3a2c10;--warn-text:#f2c46b;
    --notice-bg:#2e2814;--notice-line:#6b5a22;--ok-bg:#15291f;--ok-line:#2d5a41;--clock-in:#4fbf83;--on-clock-in:#0d1720;
    --toast-bg:#24384b;--toast-text:#e3eaf0;--focus:#7cc0ec;--backdrop:rgba(0,0,0,.6);--shadow:0 18px 48px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0d1720;--surface:#142230;--surface-2:#182838;--sunken:#101c27;--line:#2a3d4f;
  --field-bg:#0f1b26;--field-line:#5d7387;--text:#e3eaf0;--muted:#9fb0bf;--heading:#e8f0f6;--link:#8cc4ec;
  --brand:#2f6f96;--on-brand:#fff;--btn-bg:#142230;--btn-line:#6f93ad;--btn-text:#cfe0ec;
  --accent-soft:#20384c;--accent-text:#d6e6f2;--badge-neutral:#2a4357;--today-line:#5b97c0;--today-cell:#1a2c3c;
  --side-bg:#09121a;--side-text:#c9d6e0;--side-muted:#8ea2b3;--side-active-bg:#1d3346;--side-active-text:#fff;
  --tt-head:#1d3346;--tt-head-today:#24506f;--tt-head-muted:#9fb0bf;--tt-time:#b4c3cf;
  --band-0:#3b3418;--band-1:#24361f;--band-2:#3d2a20;--band-3:#1f3043;--band-4:#2e2a3d;
  --danger:#f08a9b;--danger-fill:#b3263f;--danger-bg:#3a1820;--danger-line:#6b2a36;--danger-strong:#f6c1ca;
  --final-bg:#2a1a20;--final-line:#5a2a35;--warn-bg:#3a2c10;--warn-text:#f2c46b;
  --notice-bg:#2e2814;--notice-line:#6b5a22;--ok-bg:#15291f;--ok-line:#2d5a41;--clock-in:#4fbf83;--on-clock-in:#0d1720;
  --toast-bg:#24384b;--toast-text:#e3eaf0;--focus:#7cc0ec;--backdrop:rgba(0,0,0,.6);--shadow:0 18px 48px rgba(0,0,0,.5);
}

/* Keyboard focus is always visible; on the sidebar and grid header the ring turns white. */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sidebar :focus-visible,.tt thead :focus-visible{outline-color:#fff}
@media (prefers-reduced-motion:reduce){.sidebar,#toast{transition:none}}
::selection{background:var(--accent-soft);color:var(--accent-text)}
/* Visible to screen readers only. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:var(--fs-body)/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
#app{max-width:760px;margin:0 auto;padding:0 16px 48px}
#app.has-sidebar{max-width:none;padding:0}
.loading{text-align:center;color:var(--muted);margin-top:30vh}
h1,h2,h3{margin:0;color:var(--heading);line-height:1.25;text-wrap:balance}
h1{font-weight:700}
h2,h3{font-weight:600}
h2{font-size:var(--fs-section)}
h3{font-size:var(--fs-title)}
p{text-wrap:pretty}

/* ---------- shell: header, content, sidebar ---------- */
/* Installed on an iPhone (viewport-fit=cover), keep clear of the notch and the home bar. */
header.top{display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 0 14px;position:sticky;top:0;z-index:5;background:var(--bg)}
header.top h1{font-size:var(--fs-page);min-width:0;overflow-wrap:anywhere}
header.top .page-export{margin-left:auto;flex-shrink:0}
@media (max-width:480px){.wide-only{display:none}}
.content{max-width:760px;margin:0 auto;padding:0 max(16px, env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}
.content.wide{max-width:1440px}
.sidebar{position:fixed;top:0;bottom:0;left:0;width:240px;background:var(--side-bg);color:#fff;display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));z-index:30;overflow-y:auto;transform:translateX(-100%);transition:transform .2s}
.sidebar.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.3)}
.sidebar .brand{padding:4px 10px 16px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.15)}
.sidebar .brand-name{margin:0 0 4px;color:#fff;font-size:var(--fs-section);font-weight:700;line-height:1.25}
.sidebar .brand small{display:block;color:var(--side-muted);font-size:var(--fs-meta);overflow-wrap:anywhere}
.side-nav{display:flex;flex-direction:column;gap:4px}
.side-nav button,.side-bottom button{display:flex;justify-content:space-between;align-items:center;width:100%;background:transparent;border:0;color:var(--side-text);text-align:left;border-radius:10px}
.side-nav button:hover,.side-bottom button:hover{background:rgba(255,255,255,.1)}
.side-nav button.nav-active{background:var(--side-active-bg);color:var(--side-active-text);font-weight:600}
.side-nav .count{font-size:var(--fs-meta);opacity:.75;font-variant-numeric:tabular-nums}
.side-bottom{margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.15);display:flex;flex-direction:column;gap:4px}
/* Appearance switch: Auto / Light / Dark, three equal segments. */
.theme-switch{margin:4px 0 8px;padding:0 10px}
.theme-switch .label{display:block;color:var(--side-muted);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.theme-switch .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(255,255,255,.08);border-radius:10px;padding:2px}
.side-bottom .theme-switch button{justify-content:center;min-height:36px;padding:4px;font-size:var(--fs-meta);border-radius:8px}
.side-bottom .theme-switch button[aria-pressed="true"]{background:var(--side-active-bg);color:var(--side-active-text);font-weight:600}
.backdrop{position:fixed;inset:0;background:var(--backdrop);z-index:25}
/* Count on ☰ when something needs attention (hearings, join requests) and the menu is closed. */
header.top .menu{position:relative}
.menu-dot{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--danger-fill);color:#fff;font-size:var(--fs-micro);font-weight:700;line-height:20px;text-align:center}
@media (min-width:900px){
  .sidebar{transform:none}
  .backdrop,header.top .menu{display:none}
  .main{margin-left:240px}
}

/* ---------- controls ---------- */
button,.btn{font:inherit;border:1px solid var(--btn-line);background:var(--btn-bg);color:var(--btn-text);border-radius:10px;padding:10px 14px;cursor:pointer;min-height:44px}
button.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
button.danger{border-color:var(--danger);color:var(--danger)}
button.danger-solid{background:var(--danger-fill);border-color:var(--danger-fill);color:#fff}
/* Destructive actions that sit next to everyday ones: red text without the outline, so they don't shout. */
button.quiet-danger{border-color:transparent;background:transparent;color:var(--danger)}
button.quiet-danger:hover{background:var(--danger-bg)}
button.small,.btn.small{padding:6px 10px;min-height:36px;font-size:var(--fs-meta)}
button:disabled{opacity:.5;cursor:default}
/* Busy: the control's own work is running (saving, loading). */
[aria-busy="true"]{cursor:progress;opacity:.65}
a.btn{display:inline-flex;align-items:center;text-decoration:none}
.link{background:none;border:0;color:var(--link);text-decoration:underline;text-underline-offset:3px;min-height:auto;padding:8px}
input,select{font:inherit;width:100%;padding:10px;border:1px solid var(--field-line);border-radius:10px;background:var(--field-bg);color:var(--text);min-height:44px}
textarea{font:inherit;width:100%;padding:10px;border:1px solid var(--field-line);border-radius:10px;background:var(--field-bg);color:var(--text);resize:vertical}
input:disabled,select:disabled,textarea:disabled{background:var(--sunken);color:var(--text)}
/* iPhone Safari: date, time and search fields keep their own minimum width and styling unless reset, so they
   overflowed and overlapped in narrow rows; an empty date/time field also collapsed to no height. */
input[type="date"],input[type="time"],input[type="search"]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%}
input[type="date"],input[type="time"]{min-height:44px;line-height:1.45;text-align:left}
input::-webkit-date-and-time-value{text-align:left;min-height:1.45em}
/* Grid and row children may shrink below their content's width (Safari's default is to overflow). */
.grid2>*,.grid3>*,.row>*{min-width:0}
.row>input{flex:1}
input::placeholder,textarea::placeholder{color:var(--muted)}
fieldset.plain{border:0;padding:0;margin:0;min-width:0}
label,.label-text{display:block;font-size:var(--fs-meta);color:var(--muted);margin:10px 0 4px}
.checks{border:0;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 16px}
.checks legend{font-size:var(--fs-meta);color:var(--muted);padding:0;margin-bottom:6px}
.checks label{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--fs-body);color:var(--text);min-height:36px}
.checks input{width:20px;height:20px;min-height:0;margin:0;accent-color:var(--brand)}
.upload{display:inline-flex;align-items:center;position:relative;border:1px solid var(--btn-line);color:var(--btn-text);border-radius:10px;padding:8px 14px;margin:8px 0 0;font-size:var(--fs-meta);cursor:pointer}
.upload input{position:absolute;opacity:0;width:1px;height:1px}
.upload:focus-within{outline:3px solid var(--focus);outline-offset:2px}

/* ---------- layout helpers ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;margin:0 0 12px}
.card h2+p.muted{margin:6px 0 0}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
.actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.form-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.page-actions{display:flex;justify-content:flex-end;margin:0 0 12px}
.push-end{margin-left:auto}
.muted{color:var(--muted);font-size:var(--fs-meta)}
.empty{color:var(--muted);font-style:italic;font-size:var(--fs-meta)}
.name{font-weight:600}
/* Long names and file names wrap between words (and only break a word that can't fit) instead of
   pushing the layout wider. */
.name,.chip,.tt-name,.warn .title span{overflow-wrap:break-word;min-width:0}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.group-label{margin:18px 0 0;font-size:var(--fs-meta);font-weight:600;color:var(--heading);text-transform:uppercase;letter-spacing:.05em}
.group-label:first-of-type{margin-top:4px}
/* Read-only details (head employees): label and value pairs. */
.facts{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:6px 16px;margin:8px 0 0}
.facts dt{color:var(--muted);font-size:var(--fs-meta)}
.facts dd{margin:0;white-space:pre-wrap;overflow-wrap:break-word}
/* Roles: a compact picker next to a person, and one row per role in Settings. */
.role-select{width:auto;min-height:36px;padding:6px 8px;font-size:var(--fs-meta)}
.role-row{border-top:1px solid var(--line);padding:12px 0 6px}
.role-row:first-of-type{margin-top:8px}
.role-row .card-head{margin-bottom:0}
.role-add{border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
/* Create a company: the owner names the roles. */
.setup-roles{border:0;padding:0;margin:20px 0 0;min-width:0}
.setup-roles legend{padding:0;font-size:var(--fs-section);font-weight:600;color:var(--heading)}
.setup-roles>p.muted{margin:6px 0 4px}
.setup-role{border-top:1px solid var(--line);padding:4px 0 8px;margin-top:8px}
/* New role's permissions: one per line, with what each one allows. */
.perm-list{border:0;padding:0;margin:12px 0 0;display:grid;gap:8px}
.perm-list legend{font-size:var(--fs-meta);color:var(--muted);padding:0;margin-bottom:4px}
.perm-list label{display:flex;align-items:flex-start;gap:10px;margin:0;color:var(--text);font-size:var(--fs-body)}
.perm-list input{width:20px;height:20px;min-height:0;margin:2px 0 0;flex:none;accent-color:var(--brand)}
.perm-list .perm-name,.perm-list .muted{display:block}
.search{margin:0 0 12px}
.search input{max-width:360px}
.guide ol{margin:10px 0 0;padding-left:1.25rem}
.guide li{margin:6px 0}
.alert.compact{gap:6px;padding:8px 12px}
.emp{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.emp:first-child{border-top:0}
.tag{display:inline-block;margin-left:8px;background:var(--accent-soft);color:var(--accent-text);border-radius:999px;padding:1px 8px;font-size:var(--fs-micro);font-weight:600;vertical-align:middle}
.badge{background:var(--danger-fill);color:#fff;border-radius:999px;font-size:var(--fs-micro);font-weight:600;padding:2px 8px}
.badge.neutral{background:var(--badge-neutral);color:var(--accent-text)}
.badge.soft{background:var(--warn-bg);color:var(--warn-text)}
.badge.in{background:var(--clock-in);color:var(--on-clock-in)}

/* ---------- clocking in and out ---------- */
/* Each person: green border when clocked in, red when clocked out (the words say it too, not only the colour). */
.clock-me{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-width:2px}
.clock-me.in{border-color:var(--clock-in)}
.clock-me.out{border-color:var(--danger)}
.clock-me button{min-width:140px}
.clock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:0 0 16px}
.clock-card{background:var(--surface);border:2px solid var(--danger);border-radius:12px;padding:10px 12px}
.clock-card.in{border-color:var(--clock-in)}
.clock-flags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
/* Timesheet table */
.table-wrap{overflow-x:auto}
.sheet{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.sheet th,.sheet td{text-align:left;padding:8px;border-bottom:1px solid var(--line)}
.sheet thead th{font-size:var(--fs-meta);color:var(--muted);font-weight:600}
.sheet tbody th{font-weight:600}
.sheet td.diff{color:var(--danger);font-weight:600}
.notice{background:var(--notice-bg);border:1px solid var(--notice-line);border-radius:12px;padding:12px;margin:16px 0}
.alert{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger-strong);border-radius:12px;padding:12px;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.form-error{margin:10px 0 0;padding:8px 10px;border-radius:8px;background:var(--danger-bg);color:var(--danger-strong);font-size:var(--fs-meta)}
.call-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
/* The company PIN is read out and typed by hand: large, spaced, fixed-width digits. */
.pin{margin:0;font-size:var(--fs-page);font-weight:700;letter-spacing:.15em;color:var(--heading);font-variant-numeric:tabular-nums}

/* ---------- roster ---------- */
.deptbar{margin:0 0 6px}
.deptbar label{margin-top:0}
.rosterbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:4px 0 14px}
.weeknav{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.weeknav h2{font-weight:700;margin:0 2px;font-variant-numeric:tabular-nums}
.weeknav .tag{margin-left:2px}
.today-tag{display:inline-block;margin-left:8px;background:var(--brand);color:var(--on-brand);border-radius:999px;padding:1px 8px;font-size:var(--fs-micro);font-weight:600;vertical-align:middle;letter-spacing:.02em}
/* "On leave: …" under a day: who can't be rostered that day. */
.leave-line{display:block;margin:-2px 0 6px;color:var(--muted);font-size:var(--fs-meta)}
.tt-leave{display:block;margin-top:4px;color:var(--tt-head-muted);font-size:var(--fs-micro);font-weight:400;line-height:1.3}
.day{scroll-margin-top:76px}
.day.is-today{border:2px solid var(--today-line)}
.day h3{font-size:var(--fs-section);font-variant-numeric:tabular-nums}
.shift{border:1px solid var(--line);border-radius:12px;padding:10px;margin:8px 0;background:var(--surface-2)}
.shift .title{font-weight:600;display:flex;justify-content:space-between;gap:8px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{background:var(--accent-soft);color:var(--accent-text);border-radius:999px;padding:2px 2px 2px 12px;display:inline-flex;align-items:center;gap:2px;font-size:var(--fs-body)}
/* The remove × is a 32px target: easy to hit, but grey until it is about to be used. */
.chip button{border:0;background:transparent;color:var(--muted);min-height:32px;min-width:32px;padding:0;border-radius:999px;font-size:1.1rem;line-height:1}
.chip button:hover,.chip button:focus-visible{color:var(--danger);background:var(--danger-bg)}

/* Roster as a timetable grid (laptops): mirrors the bar's paper timetable. */
.grid-wrap{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow-x:auto}
/* 744px minimum: the shift column plus seven ~87px days, which fits beside the sidebar from 1024px. */
.tt{width:100%;min-width:744px;border-collapse:collapse;border-style:hidden;table-layout:fixed}
/* When the grid does scroll sideways, the shift names stay in view. */
.tt tbody th,.tt-corner{position:sticky;left:0;z-index:1}
.tt th,.tt td{border:1px solid var(--line);padding:8px;vertical-align:top;text-align:left}
.tt thead th{background:var(--tt-head);color:#fff;font-weight:600;padding:10px 8px}
.tt thead th.is-today{background:var(--tt-head-today)}
.tt thead .today-tag{background:#fff;color:#00263d;margin-left:6px}
.tt-corner{width:132px;vertical-align:bottom!important;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.06em;color:var(--tt-head-muted)!important}
.tt-day{display:block;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.06em}
.tt-date{display:block;font-size:var(--fs-title);font-variant-numeric:tabular-nums}
.tt-add{display:block;margin-top:8px;min-height:30px;padding:2px 10px;font-size:var(--fs-meta);background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.tt-add:hover{background:rgba(255,255,255,.12)}
.tt tbody th{font-weight:400}
.band-0{background:var(--band-0)}.band-1{background:var(--band-1)}.band-2{background:var(--band-2)}.band-3{background:var(--band-3)}.band-4{background:var(--band-4)}
.tt-name{display:block;font-weight:600;color:var(--heading);overflow-wrap:anywhere}
.tt-time{display:block;margin-top:2px;color:var(--tt-time);font-size:var(--fs-meta);font-variant-numeric:tabular-nums}
.tt tbody th .tag{margin:6px 0 0}
.tt td.is-today{background:var(--today-cell)}
/* Monthly rosters: days of the first and last week that fall in the next or previous month. */
.tt thead th.tt-out{color:var(--tt-head-muted)}
.tt td.tt-out{background:var(--sunken)}
.tt-week+.tt-week{margin-top:20px}
.tt-week>h3{margin:0 0 8px}
.tt-shift+.tt-shift{border-top:1px dashed var(--line);margin-top:8px;padding-top:8px}
.tt .chips{margin:0 0 6px;gap:4px}
.tt .chip{font-size:var(--fs-meta);padding:1px 1px 1px 10px;max-width:100%}
.tt .chip button{min-height:26px;min-width:26px}
.tt-once{margin:0 0 6px}
.tt-open{display:block;margin-bottom:6px;color:var(--muted);font-style:italic;font-size:var(--fs-meta)}
.tt-tools{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.tt-assign{min-height:34px;padding:4px 6px;font-size:var(--fs-meta);flex:1;min-width:0}
.tt-edit{padding:4px 2px;font-size:var(--fs-meta)}
.tt-quick{width:100%;min-height:36px;border:1px dashed var(--line);background:transparent;color:var(--muted);font-size:var(--fs-meta)}
.tt-quick:hover,.tt-quick:focus-visible{border-color:var(--btn-line);color:var(--btn-text)}
.tt-empty{padding:24px 12px!important;color:var(--muted);font-style:italic;text-align:center!important}

/* ---------- staff ---------- */
.emp-wrap{border-top:1px solid var(--line)}
.emp-wrap:first-child{border-top:0}
.emp-open{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-radius:8px;padding:10px 4px;text-align:left;color:var(--text)}
.emp-open:hover{background:var(--bg)}
.emp-open>span:first-child{flex:1;min-width:0}
.emp-open .name,.emp-open .muted{display:block}
.emp-wrap.inactive .name{color:var(--muted);text-decoration:line-through}
.chev{color:var(--muted)}
.panel{border:1px solid var(--line);border-radius:12px;padding:12px;margin:0 0 12px;background:var(--surface-2)}
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.subtabs button{min-height:36px;padding:6px 12px;font-size:var(--fs-meta);border-color:var(--line)}
.subtabs button.sub-active{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}

/* ---------- warnings ---------- */
/* Warning cards: the badge carries the status; a final warning gets a soft tint, an expired one recedes in colour
   (not opacity, which made the text too faint to read). */
.warn{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:10px 0;background:var(--surface)}
.warn.final{border-color:var(--final-line);background:var(--final-bg)}
.warn.expired{background:var(--bg)}
.warn.expired .title,.warn.expired .reason{color:var(--muted)}
.warn .title{display:flex;justify-content:space-between;gap:8px;align-items:center;font-weight:600}
.warn .reason{white-space:pre-wrap;margin:8px 0}
.preview.final-text{color:var(--danger);font-weight:600}
/* "What happens next" after issuing a warning. */
.result{border:1px solid var(--ok-line);background:var(--ok-bg);border-radius:12px;padding:12px 14px;margin:8px 0}
.result.final{border-color:var(--danger-line);background:var(--danger-bg)}
.result h3{margin-bottom:4px}
.result p{margin:6px 0}
.result:focus{outline:3px solid var(--focus);outline-offset:2px}

/* ---------- dialog and toast ---------- */
/* In-app dialog (replaces the browser's confirm/prompt). */
.dialog{border:0;border-radius:16px;padding:0;width:min(440px,calc(100vw - 32px));background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.dialog::backdrop{background:var(--backdrop)}
.dialog form{padding:20px}
.dialog h2{margin-bottom:8px;overflow-wrap:anywhere}
.dialog p{margin:8px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:18px}
/* Several ways forward ("Only this week" / "This and following weeks"): full-width rows on phones. */
@media (max-width:480px){.dialog-actions.stacked{flex-direction:column-reverse}.dialog-actions.stacked button{width:100%}}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:var(--toast-bg);color:var(--toast-text);padding:12px 16px;border-radius:12px;max-width:92vw;opacity:0;pointer-events:none;transition:.2s;z-index:20;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* A toast with an action (Undo) can be clicked. */
#toast.has-action{display:flex;align-items:center;gap:12px;pointer-events:auto}
#toast .toast-action{background:transparent;border-color:currentColor;color:inherit;min-height:32px;padding:4px 12px}
#toast.error{background:var(--danger-fill);color:#fff}

/* ---------- sign-in screens ---------- */
.auth{max-width:420px;margin:8vh auto 0}
.auth h1{text-align:center;margin-bottom:6px;font-size:1.75rem}
.auth p.sub{text-align:center;color:var(--muted);margin:0 0 16px}

/* Phones: the shift name gets its own row; start and end share the next. Pairs stack on very narrow screens. */
@media (max-width:480px){.grid3{grid-template-columns:1fr 1fr}.grid3>:first-child{grid-column:1/-1}}
@media (max-width:360px){.grid2{grid-template-columns:1fr}}

/* Printing always uses the light colours, whatever the screen theme. */
@media print{
  :root,:root[data-theme="dark"],:root:not([data-theme="light"]){
    color-scheme:light;--bg:#fff;--surface:#fff;--surface-2:#fff;--line:#c9d2d9;--text:#000;--muted:#3f4e59;
    --heading:#00263d;--accent-soft:#e4eef4;--accent-text:#00263d;--today-cell:#fff;--tt-head:#00263d;--tt-head-today:#00263d;
    --tt-time:#3f4e59;--band-0:#fff2cc;--band-1:#c6e9b4;--band-2:#f8cbad;--band-3:#ddebf7;--band-4:#e4dfec;
  }
  .sidebar,.backdrop,.deptbar,header.top button,.actions,.chip button,.noprint,.tt-panel{display:none!important}
  .main{margin-left:0!important}
  .grid-wrap{overflow:visible;border:0}
  .tt{min-width:0}
}
/* Spacing and layout helpers for app.js, instead of inline styles: one spacing scale (4 / 8 / 12px). */
.flush{margin:0}.flush-top{margin-top:0}
.stack-xs{margin:4px 0 0}.stack-s{margin:8px 0 0}.stack-m{margin:12px 0 0}
.note{margin:4px 0 8px}.gap-below{margin:0 0 12px}
.ml-s{margin-left:8px}.pad0{padding:0}
.wrap{flex-wrap:wrap}.start{justify-content:flex-start}
.center{text-align:center}.text-end{text-align:right}
.full{width:100%}.auto-w{width:auto}
/* Touch screens: everyday buttons get a full 44px target (the dense laptop grid keeps its compact controls).
   Chip remove buttons grow their hit area without making the chip taller. */
@media (pointer:coarse){
  button.small,.subtabs button,.role-select,.side-bottom .theme-switch button,#toast .toast-action{min-height:44px}
  .chip button{min-width:44px;min-height:44px;margin:-6px 0}
}