:root {
  /* Clean, Instagram-inspired look: white screens, hairline grey lines, bold black text, a blue main action
     and the pink-to-purple gradient for highlights (profile rings, the page you're on). */
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --text: #0c1014;
  --muted: #737373;
  --border: #dbdbdb;
  --brand: #0095f6;
  --brand-deep: #1877f2;
  --brand-contrast: #ffffff;
  --brand-soft: #e6f4fe;
  --accent: #e1306c;
  --accent-soft: #fde8ef;
  --gradient: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
  --good: #1e7a4c;
  --good-soft: #dff2e7;
  --warn: #9a6200;
  --warn-soft: #fbefd6;
  --bad: #ed4956;
  --bad-soft: #fde7e9;
  --radius: 12px;
  --shadow: none;
  --shadow-lift: 0 4px 24px rgba(0, 0, 0, 0.14);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font);
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --div-neg: #1c5cab;
  --div-pos: #c23b3a;
  --div-mid: #f0efec;
  --div-ink-strong: #ffffff;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --surface: #121212;
    --surface-2: #1f1f1f;
    --text: #f5f5f5;
    --muted: #a8a8a8;
    --border: #363636;
    --brand: #0095f6;
    --brand-deep: #1877f2;
    --brand-contrast: #ffffff;
    --brand-soft: #0b2a44;
    --accent: #e1306c;
    --accent-soft: #3a1422;
    --good: #58c322;
    --good-soft: #1b3312;
    --warn: #f5b93c;
    --warn-soft: #3a2f18;
    --bad: #ff6b76;
    --bad-soft: #3d1b1f;
    --shadow: none;
    --shadow-lift: 0 8px 30px rgba(0, 0, 0, 0.7);
    --series-1: #3987e5;
    --series-2: #d95926;
    --div-neg: #5598e7;
    --div-pos: #e66767;
    --div-mid: #383835;
    --div-ink-strong: #111111;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #000000;
  --surface: #121212;
  --surface-2: #1f1f1f;
  --text: #f5f5f5;
  --muted: #a8a8a8;
  --border: #363636;
  --brand: #0095f6;
  --brand-deep: #1877f2;
  --brand-contrast: #ffffff;
  --brand-soft: #0b2a44;
  --accent: #e1306c;
  --accent-soft: #3a1422;
  --good: #58c322;
  --good-soft: #1b3312;
  --warn: #f5b93c;
  --warn-soft: #3a2f18;
  --bad: #ff6b76;
  --bad-soft: #3d1b1f;
  --shadow: none;
  --shadow-lift: 0 8px 30px rgba(0, 0, 0, 0.7);
  --series-1: #3987e5;
  --series-2: #d95926;
  --div-neg: #5598e7;
  --div-pos: #e66767;
  --div-mid: #383835;
  --div-ink-strong: #111111;
  color-scheme: dark;
}


* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 400 15px/1.45 var(--font);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  color: var(--text);
}
a { color: var(--brand); }
h1 { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
h2 { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.75rem; }
h3 { font-size: 0.74rem; margin: 0 0 0.35rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 600; }
small { display: block; color: var(--muted); font-size: 0.8rem; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.block { display: block; }
[hidden] { display: none !important; }

/* Brand band: the group's logos across the top of every page (scrolls away; the green bar stays). Kept light in
   dark mode because the logos are dark ink. --h is each logo's height in the artwork, so they keep their balance. */
.brand-band {
  display: flex; align-items: center; justify-content: space-evenly; gap: 1rem;
  padding: 0.35rem 1rem; background: #efebe6; border-bottom: 1px solid #ddd6cc;
}
.brand-band img { display: block; height: calc(var(--h) * 0.4px); width: auto; max-width: 24%; object-fit: contain; }
@media (max-width: 800px) {
  .brand-band { padding: 0.3rem 0.75rem; gap: 0.5rem; }
  .brand-band img { height: calc(var(--h) * 0.24px); }
}
@media print { .brand-band { display: none; } }

/* Layout */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.45rem 1rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--text);
  backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar a { color: inherit; text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.1rem; }
.logo { display: inline-flex; align-items: center; gap: 0.45rem; --logo-accent: #e2b04a; }
.logo-mark { flex-shrink: 0; display: block; }
.logo-word { font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.login-logo { margin: 0 0 0.25rem; color: var(--brand); font-size: 1.7rem; }
.login-logo .logo { --logo-accent: #c8902a; }
.topbar-gap { margin-left: auto; }
.topbar .menu-toggle { color: inherit; margin: -0.2rem -0.3rem; font-size: 1.3rem; border-radius: 6px; }
.topbar .menu-toggle:hover { background: var(--surface-2); }

.layout { display: flex; min-height: calc(100vh - 46px); }
.sidebar {
  overflow-y: auto; overscroll-behavior: contain;
  width: 200px; flex-shrink: 0; padding: 0.6rem 0.5rem;
  border-right: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 70%, var(--bg));
  display: flex; flex-direction: column; gap: 2px;
}
.sidebar a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.65rem; border-radius: 10px;
  color: var(--text); text-decoration: none; white-space: nowrap; font-weight: 500;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.sidebar a:hover { background: var(--surface-2); }
.sidebar a.active { background: var(--surface); color: var(--brand); font-weight: 700; box-shadow: var(--shadow), inset 3px 0 0 var(--accent); }
.nav-icon { width: 1.2rem; flex-shrink: 0; text-align: center; }
.nav-label { overflow: hidden; text-overflow: ellipsis; }
.nav-toggle { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 1.4rem); background: none; border: 0; padding: 0.2rem 0; cursor: pointer; font: inherit; text-align: left; border-radius: 4px; }
.nav-toggle:hover { color: var(--text); }
.nav-caret { font-size: 0.8rem; }
.nav-group.is-folded .nav-links { display: none; }
.nav-heading { margin: 0.7rem 0.7rem 0.25rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
main { flex: 1; min-width: 0; padding: 1rem 1.25rem 2.5rem; }

/* Menu across the top (computers and larger tablets): each section opens a drop-down of its pages. */
.topnav { display: flex; align-items: center; gap: 0.15rem; min-width: 0; }
.topnav-group { position: relative; }
.topnav-btn {
  display: inline-flex; align-items: center; gap: 0.3rem; height: 34px; padding: 0 0.7rem; border: 0; border-radius: 9px;
  background: transparent; color: var(--text); font: inherit; font-size: 0.92rem; font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer; position: relative; transition: background 0.15s, color 0.15s;
}
.topbar a.topnav-btn { color: var(--text); }
.topnav-btn:hover, .topnav-group.is-open > .topnav-btn { background: var(--surface-2); }
.topnav-btn.is-active, .topbar a.topnav-btn.is-active { font-weight: 700; }
.topnav-btn.is-active::after { content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 2px; height: 3px; border-radius: 3px; background: var(--gradient); }
.topnav-caret { font-size: 0.65rem; opacity: 0.75; transition: transform 0.15s; }
.topnav-group.is-open .topnav-caret { transform: rotate(180deg); }
.nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
.topnav-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 45; min-width: 240px; padding: 0.4rem;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lift); animation: pop-in 0.14s ease-out;
  border-top: 4px solid var(--menu-tone, var(--brand));
}
/* An invisible bridge so the menu stays open while the mouse moves down into it. */
.topnav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 10px; }
.topnav-menu-right { left: auto; right: 0; }
.topnav-menu.is-wide { min-width: 420px; }
.topnav-menu.is-wide .topnav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.2rem; }
.topnav-heading { margin: 0.25rem 0.6rem 0.35rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--menu-ink, var(--muted)); }
.topnav-menu a {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 9px;
  color: var(--text); text-decoration: none; font-weight: 500; white-space: nowrap;
}
.topnav-menu a:hover, .topnav-menu a:focus-visible { background: var(--menu-soft, var(--surface-2)); outline: none; }
.topnav-menu a.active { background: var(--menu-soft, var(--brand-soft)); color: var(--brand); font-weight: 700; }
.topnav-menu .nav-icon { color: var(--menu-ink, var(--muted)); }
.topnav-group[data-tone="team"] { --menu-tone: var(--tone-team-ink); --menu-ink: var(--tone-team-ink); --menu-soft: var(--tone-team); }
.topnav-group[data-tone="events"] { --menu-tone: var(--tone-events-ink); --menu-ink: var(--tone-events-ink); --menu-soft: var(--tone-events); }
.topnav-group[data-tone="people"] { --menu-tone: var(--tone-people-ink); --menu-ink: var(--tone-people-ink); --menu-soft: var(--tone-people); }
.topnav-group[data-tone="trail"] { --menu-tone: var(--tone-trail-ink); --menu-ink: var(--tone-trail-ink); --menu-soft: var(--tone-trail); }
.topnav-group[data-tone="stock"] { --menu-tone: var(--tone-stock-ink); --menu-ink: var(--tone-stock-ink); --menu-soft: var(--tone-stock); }
.topnav-group[data-tone="reporting"] { --menu-tone: var(--tone-reporting-ink); --menu-ink: var(--tone-reporting-ink); --menu-soft: var(--tone-reporting); }
.user-btn {
  display: inline-flex; align-items: center; gap: 0.45rem; height: 36px; padding: 0 0.5rem 0 0.25rem; border: 0; border-radius: 99px;
  background: transparent; color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.user-btn:hover, .user-menu.is-open .user-btn { background: var(--surface-2); }
.avatar {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2); color: var(--text); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}
.user-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1280px) { .user-name { display: none; } }

/* Behind the open side menu: dims the page; tapping it closes the menu. */
.nav-scrim { display: none; position: fixed; inset: 0; z-index: 29; background: rgba(20, 28, 24, 0.3); animation: fade-in 0.15s ease-out; }

/* Larger screens: the menu is across the top, so the side menu and ☰ are hidden. */
@media (min-width: 1001px) {
  .sidebar, .topbar .menu-toggle { display: none; }
}
/* Phones and smaller tablets: ☰ slides the full menu out from the side instead. */
@media (max-width: 1000px) {
  .topnav { display: none; }
  .sidebar {
    position: fixed; top: var(--nav-top, 46px); bottom: 0; left: 0; z-index: 30; width: 240px;
    transform: translateX(-100%); transition: transform 0.2s;
  }
  body.nav-open .sidebar { transform: none; box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); }
  body.nav-open .nav-scrim { display: block; }
}

.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.8rem; }
.actions, .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.filters { margin-bottom: 1rem; }

.card {
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-bottom: 0.9rem; box-shadow: var(--shadow);
}
.card.narrow { max-width: 480px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.card-head h2 { margin: 0; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 1rem; }

.loading, .empty { padding: 2rem; text-align: center; color: var(--muted); }
.notice { background: var(--warn-soft); color: var(--warn); padding: 0.6rem 0.9rem; border-radius: 8px; }
.alert-text { color: var(--bad); font-weight: 600; margin: 0.4rem 0 0; }

/* KPIs & dashboard */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.kpi {
  position: relative; overflow: hidden; background: var(--surface); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: var(--radius); padding: 0.8rem 1rem 0.85rem; box-shadow: var(--shadow);
}
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--brand), var(--accent)); opacity: 0.85; }
.kpi span { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.kpi strong { display: block; margin-top: 0.15rem; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; }
.kpi span.badge { display: inline-block; font-size: 0.85rem; }
.kpi-bad strong { color: var(--bad); }
.site-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 1rem; }
.site-cards .card { margin: 0; }
.site-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.site-grid p { margin: 0; }
.span-2 { grid-column: span 2; }
.site-money { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; padding-bottom: 0.4rem; }
.site-money p { margin: 0; }
.site-money .stat { font-size: 1.15rem; }
.site-compare { margin: 0 0 0.9rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.site-checks { border-top: 1px solid var(--border); padding-top: 0.75rem; }
.clock-list li { display: flex; gap: 0.5rem; align-items: baseline; }
.clock-list .clock-hours { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat { font-size: 1.25rem; font-weight: 700; }
.progress { height: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; overflow: hidden; }
.progress div { height: 100%; }
.progress-good div { background: var(--good); }
.progress-warn div { background: var(--warn); }
.progress-bad div { background: var(--bad); }
.progress-label { font-size: 0.85rem; margin-top: 0.2rem; }
.shift-list { list-style: none; margin: 0; padding: 0; }
.shift-list li { padding: 0.2rem 0; border-bottom: 1px dashed var(--border); }
.shift-list li:last-child { border: 0; }

/* Buttons & forms */
.btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.4rem 0.8rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(64, 44, 20, 0.06);
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s, filter 0.15s;
}
.btn:hover { background: var(--surface-2); box-shadow: 0 3px 10px -4px rgba(64, 44, 20, 0.25); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary { background: linear-gradient(160deg, var(--brand), var(--brand-deep)); border-color: var(--brand-deep); color: var(--brand-contrast); box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--brand) 55%, transparent); }
.btn-primary:hover { background: linear-gradient(160deg, var(--brand), var(--brand-deep)); filter: brightness(1.1); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 70%, transparent); }
.btn-danger { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
.btn-small { padding: 0.25rem 0.6rem; font-size: 0.85rem; }
.btn-block { width: 100%; justify-content: center; }
.icon-btn { background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0.2rem 0.4rem; }

input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 0.4rem 0.6rem;
  min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
input, select, textarea { transition: border-color 0.15s, box-shadow 0.15s; }
textarea { width: 100%; resize: vertical; }
.field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.8rem; flex: 1; }
.field > span { font-size: 0.85rem; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; }
.field-inline { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 0.5rem; }
.field-inline input { width: auto; }
.row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.row > .field { min-width: 140px; }
.check { display: inline-flex; gap: 0.35rem; align-items: center; }
.form-error { color: var(--bad); background: var(--bad-soft); padding: 0.5rem 0.75rem; border-radius: 8px; margin: 0 1.1rem 0.75rem; }
.login .form-error { margin: 0 0 0.75rem; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.42rem 0.55rem; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th { font-size: 0.72rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
td.num, th.num, .num { font-variant-numeric: tabular-nums; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--surface-2); }
tr.inactive td { opacity: 0.5; }
tr.row-warn td { background: var(--warn-soft); }
.qty-input, .count-input { width: 90px; text-align: right; }

.badge { display: inline-block; padding: 0.12rem 0.6rem; border-radius: 99px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.01em; background: var(--surface-2); border: 1px solid var(--border); }
.badge-draft { background: var(--surface-2); }
.badge-sent, .badge-in_progress { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge-received, .badge-completed, .badge-pass { background: var(--good-soft); color: var(--good); border-color: transparent; }
.badge-cancelled, .badge-fail { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.pill { padding: 0.15rem 0.6rem; border-radius: 99px; background: var(--surface-2); font-weight: 600; font-size: 0.85rem; }
.pill-good { background: var(--good-soft); color: var(--good); }

.tabs { display: flex; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs a { padding: 0.5rem 0.9rem; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a { font-weight: 600; transition: color 0.15s; }
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--brand); border-color: var(--accent); font-weight: 700; }

/* Food safety */
.group-title { margin-top: 1rem; }
.task-list { list-style: none; padding: 0; margin: 0; }
.task { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.task:last-child { border-bottom: 0; }
.task-text { flex: 1 1 280px; }
.task-text .range { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.task-action { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.task-pass { background: linear-gradient(90deg, var(--good-soft), transparent 40%); }
.task-fail { background: linear-gradient(90deg, var(--bad-soft), transparent 40%); }
.task-pass, .task-fail { padding-left: 0.6rem; border-radius: 6px; }
.check-done, .check-actions, .reading-form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.reading-form input { width: 90px; }
.corrective { margin: 0; font-size: 0.85rem; color: var(--bad); text-align: right; }
.grid-table td, .grid-table th { text-align: center; white-space: nowrap; font-size: 0.85rem; }
.grid-table tbody th { text-align: left; }
.cell-good { background: var(--good-soft); color: var(--good); }
.cell-warn { background: var(--warn-soft); color: var(--warn); }
.cell-bad { background: var(--bad-soft); color: var(--bad); }
.cell-na { color: var(--muted); }

/* Rota */
.rota th, .rota td { border: 1px solid var(--border); min-width: 110px; }
.rota tbody th { min-width: 150px; }
.rota td.editable { cursor: pointer; }
.rota td.editable:hover { background: var(--surface-2); }
.rota .is-today { background: var(--brand-soft); }
.shift {
  display: block; width: 100%; margin-bottom: 0.25rem; padding: 0.3rem 0.4rem;
  border: 0; border-left: 3px solid var(--brand); border-radius: 6px;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.85rem; font-weight: 600; text-align: left; cursor: pointer;
  white-space: nowrap;
}
.shift:disabled { cursor: default; }
.shift small { font-weight: 400; }
.add-hint { color: var(--muted); opacity: 0; }
td.editable:hover .add-hint { opacity: 1; }
tfoot th, tfoot td { font-weight: 600; }

/* Wastage bars */
.bars { list-style: none; padding: 0; margin: 0; }
.bars li { display: grid; grid-template-columns: minmax(110px, 1.2fr) 2fr auto; gap: 0.6rem; align-items: center; padding: 0.25rem 0; }
.bar { height: 10px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--brand); }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-value { font-variant-numeric: tabular-nums; }

/* Modal & toasts */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20, 28, 24, 0.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade-in 0.15s ease-out; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 1rem; z-index: 50; overflow-y: auto; }
.modal { width: 100%; max-width: 460px; background: var(--surface); border-radius: 18px; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35); animation: pop-in 0.18s ease-out; }
.modal header h2 { font-weight: 700; font-size: 1.1rem; }
.modal-wide { max-width: 680px; }
.modal header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.1rem 0.5rem; }
.modal header h2 { margin: 0; }
.modal-body { padding: 0.5rem 1.1rem; }
.modal footer { display: flex; gap: 0.5rem; padding: 0.75rem 1.1rem 1rem; border-top: 1px solid var(--border); }
.spacer { flex: 1; }
#toasts { position: fixed; bottom: 1rem; right: 1rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 60; }
.toast { padding: 0.7rem 1rem; border-radius: 12px; font-weight: 500; background: var(--text); color: var(--bg); box-shadow: var(--shadow); opacity: 0; transform: translateY(8px); transition: 0.25s; max-width: 360px; }
.toast.show { opacity: 1; transform: none; }
.toast-error { background: var(--bad); color: #fff; }

/* Login */
.login-wrap {
  min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem;
  background:
    radial-gradient(900px 500px at 10% -10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%),
    radial-gradient(700px 500px at 110% 110%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%);
}
.login-wrap .login { padding: 1.8rem 1.8rem 1.5rem; border-radius: 22px; box-shadow: var(--shadow-lift); }
.login { width: 100%; max-width: 380px; }
.login h1 { color: var(--brand); }

/* Mobile */
@media (max-width: 800px) {
  main { padding: 1rem; }
  .site-cards { grid-template-columns: 1fr; }
  .brand .logo-word { display: none; }
  .task-action { align-items: stretch; width: 100%; }
  .check-done, .check-actions, .reading-form { justify-content: flex-start; }
  .corrective { text-align: left; }
}

@media print {
  .topbar, .sidebar, .actions, .filters, .tabs, #toasts, .btn { display: none !important; }
  main { padding: 0; }
  .card { border: 0; box-shadow: none; padding: 0; }
  body { background: #fff; color: #000; }
}
h2.spaced { margin-top: 1.5rem; }

/* Sales */
.tone-good { color: var(--good); font-weight: 600; }
.tone-warn { color: var(--warn); font-weight: 600; }
.tone-bad { color: var(--bad); font-weight: 600; }
.kpi-good strong { color: var(--good); }
.kpi-warn strong { color: var(--warn); }
.bar-col { min-width: 220px; }
.inline-bar { display: inline-block; width: 110px; height: 8px; margin-right: 0.6rem; background: var(--surface-2); border-radius: 99px; overflow: hidden; vertical-align: middle; }
.inline-bar span { display: block; height: 100%; background: var(--brand); }
.steps { padding-left: 1.2rem; }
.steps li { margin-bottom: 0.4rem; }
code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 0 0.3rem; font-size: 0.9em; }
.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }

/* Demo build */
.demo-pill { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.1rem 0.45rem; border-radius: 99px; background: rgba(255, 255, 255, 0.2); vertical-align: middle; }
.demo-accounts { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); display: grid; gap: 0.5rem; }
.demo-accounts p { margin: 0; }
.demo-account { flex-direction: column; align-items: flex-start; gap: 0; white-space: normal; text-align: left; }
.demo-account small { font-weight: 400; }
body.demo #print { display: none; }

/* Recipes */
.chips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.chip { font-size: 0.75rem; padding: 0.05rem 0.5rem; border-radius: 99px; background: var(--warn-soft); color: var(--warn); font-weight: 600; white-space: nowrap; }
.chip-strong { background: var(--bad-soft); color: var(--bad); font-size: 0.85rem; }
.allergen-card p { margin: 0.4rem 0; }
.method { white-space: pre-wrap; line-height: 1.6; max-width: 65ch; }
.allergen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.3rem 1rem; margin-bottom: 0.8rem; }
.allergen-grid .check { font-weight: 400; font-size: 0.9rem; justify-content: flex-start; align-items: flex-start; text-align: left; }
.allergen-grid .check input { width: auto; flex: none; margin: 0.2rem 0 0; }
.ing-row select { max-width: 280px; width: 100%; }
.ing-notes { width: 100%; min-width: 120px; }
.sticky-kpis { position: sticky; top: calc(52px + env(safe-area-inset-top, 0px)); z-index: 5; background: var(--bg); padding-block: 0.5rem; margin-top: -0.5rem; }
.matrix th, .matrix td { text-align: center; padding: 0.35rem 0.4rem; }
.matrix tbody th { text-align: left; white-space: nowrap; }
.matrix th.rot { height: 150px; vertical-align: bottom; white-space: nowrap; font-size: 0.75rem; }
.matrix th.rot span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); }
.matrix td.has { color: var(--bad); font-weight: 700; background: var(--bad-soft); }
.matrix td.may { color: var(--warn); }
.matrix tbody tr:hover td, .matrix tbody tr:hover th { outline: 1px solid var(--border); }
@media (max-width: 800px) { .sticky-kpis { position: static; } }

.kpi strong.small { font-size: 0.95rem; }

/* Trading dashboard charts */
.kpi small { margin-top: 0.15rem; }
small.inline { display: inline; }
.chart { width: 100%; min-height: 180px; position: relative; }
.chart-svg { display: block; overflow: visible; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-axis { stroke: var(--muted); stroke-width: 1; opacity: 0.6; }
.chart-label { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-bar { transition: opacity 0.1s; }
.chart-bar.is-hot { opacity: 0.75; }
.chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { stroke: var(--surface); stroke-width: 2; }
.chart-ref { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; }
.chart-cross { stroke: var(--muted); stroke-width: 1; }
.chart-hit { fill: transparent; outline: none; cursor: crosshair; }
.chart-hit:focus-visible { stroke: var(--brand); stroke-width: 1.5; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.8rem; color: var(--muted); margin: -0.35rem 0 0.5rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.chart-legend i { display: inline-block; width: 16px; height: 2px; border-radius: 1px; }
.chart-legend i.chart-legend-dash { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 7px) !important; }
.chart-tip {
  position: fixed; z-index: 50; pointer-events: none; min-width: 140px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); padding: 0.45rem 0.6rem; font-size: 0.8rem;
}
.chart-tip-title { color: var(--muted); margin-bottom: 0.2rem; }
.chart-tip-row { display: flex; align-items: center; gap: 0.4rem; }
.chart-tip-row strong { font-variant-numeric: tabular-nums; }
.chart-tip-row span { color: var(--muted); }
.chart-tip-key { display: inline-block; width: 10px; height: 2px; border-radius: 1px; }
h2 .muted.small { font-weight: 400; margin-left: 0.4rem; }

.check-row { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.75rem 0; cursor: pointer; }
.check-row input { margin-top: 0.25rem; flex: none; }

/* Labour heatmap */
.hm-wrap { margin-top: 0.5rem; }
table.hm { border-collapse: separate; border-spacing: 2px; width: auto; min-width: 100%; }
table.hm th, table.hm td { padding: 0; border: 0; text-align: center; vertical-align: middle; }
table.hm thead th { font-size: 0.75rem; color: var(--muted); font-weight: 500; padding-bottom: 0.2rem; font-variant-numeric: tabular-nums; }
table.hm tbody th { text-align: left; font-size: 0.85rem; padding-right: 0.5rem; white-space: nowrap; position: sticky; left: 0; background: var(--surface); z-index: 1; }
table.hm tbody th small { display: block; font-weight: 400; font-size: 0.7rem; }
.hm-cell { min-width: 2.6rem; height: 2.4rem; border-radius: 4px; font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; cursor: default; outline: none; }
.hm-cell:hover, .hm-cell:focus-visible { box-shadow: 0 0 0 2px var(--text) inset; }
.hm-empty { min-width: 2.6rem; }
.hm-nosales { background: repeating-linear-gradient(135deg, var(--div-mid) 0 4px, transparent 4px 8px); color: var(--muted); font-weight: 400; }
.hm-total-col { border-left: 6px solid var(--surface); }
table.hm th.hm-total-col { border-left: 6px solid var(--surface); }
.hm-total-row th, .hm-total-row td { border-top: 6px solid var(--surface); }
.hm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; font-size: 0.78rem; color: var(--muted); margin: 0.25rem 0 0.5rem; }
.hm-legend-bar { position: relative; width: 180px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--div-neg), var(--div-mid) 40%, var(--div-pos)); }
.hm-legend-bar i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); }
.hm-legend-note { flex-basis: 100%; }
.hm-swatch { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: middle; border: 1px solid var(--border); }
@media print {
  .hm-cell, .hm-nosales, .hm-legend-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.cleanup-list { margin: 0 0 0.75rem 1.9rem; }
.cleanup-list li { padding: 0.25rem 0; }
#cleanup details { margin: -0.4rem 0 0.75rem 1.9rem; }

/* Rota: all-sites grouping and shifts at other sites */
.rota tr.rota-group th {
  background: var(--brand-soft); color: var(--brand); text-align: left; padding: 0.55rem 0.75rem;
  border-left: 4px solid var(--brand); border-top: 14px solid var(--surface);
}
.rota tbody tr.rota-group:first-child th { border-top: 0; }
.rota-group-name { font-size: 1.05rem; font-weight: 700; }
.rota-group-meta { margin-left: 0.75rem; font-size: 0.85rem; font-weight: 500; color: var(--text); opacity: 0.75; }
.rota .shift-away { opacity: 0.6; border-left: 3px dashed var(--muted); font-weight: 500; cursor: default; }
.rota tr.rota-cover > th small { color: var(--warn); }
.rota thead th:last-child, .rota tbody td:last-child, .rota tfoot td:last-child { min-width: 64px; }
.rota tbody td { padding: 0.35rem; }

/* Setup → Permissions */
.perm-matrix th, .perm-matrix td { text-align: center; }
.perm-matrix tbody th[scope=row] { text-align: left; font-weight: 400; min-width: 220px; }
.perm-matrix .perm-set { vertical-align: bottom; min-width: 110px; }
.perm-matrix .perm-set small { display: block; font-weight: 400; }
.perm-matrix .perm-area-row th { text-align: left; background: var(--surface-2); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.perm-yes { color: var(--good); font-weight: 700; }
.perm-no { color: var(--muted); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.perm-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.25rem 1.25rem; }
.perm-edit fieldset { border: 0; padding: 0; margin: 0 0 0.5rem; }
.perm-edit legend { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.1rem; }
.perm-edit .check-row { margin: 0.35rem 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Rota publishing */
.publish-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  background: var(--warn-soft); color: var(--text); border-left: 4px solid var(--warn); border-radius: 8px; padding: 0.6rem 0.9rem; margin-bottom: 0.75rem; }
.publish-actions { display: flex; gap: 0.5rem; }
.publish-ok { color: var(--good); font-weight: 600; margin: 0 0 0.5rem; }
.shift .shift-tag { display: table; margin: 0.25rem 0 0.05rem; font-style: normal; font-size: 0.62rem; line-height: 1.5; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 0.4rem; border-radius: 4px; }
.rota .shift-new { border-left: 3px dashed var(--brand); background: var(--brand-soft); }
.rota .shift-new .shift-tag { background: var(--brand); color: var(--brand-contrast); }
.rota .shift-changed { border-left-color: var(--warn); background: var(--warn-soft); }
.rota .shift-changed .shift-tag { background: var(--warn); color: var(--surface); }
.rota .shift-removed { border-left-color: var(--bad); opacity: 0.65; }
.rota .shift-removed .shift-time { text-decoration: line-through; }
.rota .shift-removed .shift-tag { background: var(--bad); color: var(--surface); }
@media print { .publish-bar, .publish-ok { display: none; } }

/* Staff form: sites someone can work with */
.site-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 1rem; margin-top: 0.4rem; }
.site-picks .check-row { margin: 0.25rem 0; align-items: center; }
.site-picks .check-row input { width: auto; margin: 0; }
.site-picks .check-row span { font-size: 0.95rem; font-weight: 400; }
.site-picks small { grid-column: 1 / -1; }

/* Rota: My shifts */
.my-shifts { padding: 0; overflow: hidden; }
.my-day { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--border); }
.my-day:last-child { border-bottom: 0; }
.my-day.is-today { background: var(--brand-soft); }
.my-day.is-off .my-date { opacity: 0.6; }
.my-date span { display: block; color: var(--muted); font-size: 0.85rem; }
.my-list { display: flex; flex-direction: column; gap: 0.6rem; justify-content: center; }
.my-shift { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 1rem; align-items: baseline; }
.my-time { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; border-left: 3px solid var(--brand); padding-left: 0.5rem; }
.my-where { font-weight: 600; }
.my-with { grid-column: 1 / -1; padding-left: calc(0.5rem + 3px); }
.nowrap { white-space: nowrap; }
@media (max-width: 600px) {
  .my-day { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* Time off: holiday and availability */
.leave-list li { justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; padding: 0.7rem 0; }
.leave-list li > div { flex: 1; }
.leave-actions { display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0; }
.avail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.avail-row strong { width: 110px; }
.avail-row select { width: auto; }
.avail-times { display: inline-flex; align-items: center; gap: 0.4rem; }
.avail-times input { width: auto; }
#avail .field { margin-top: 1rem; }
.avail-table td, .avail-table th { white-space: nowrap; }
.avail-table tbody th small { white-space: normal; max-width: 220px; }
.avail-table .avail-any { color: var(--muted); }
.avail-table .avail-none { color: var(--bad); font-weight: 600; }
.avail-table .avail-some { color: var(--warn); font-weight: 600; }
.avail-table tr.avail-group th { background: var(--surface-2); text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
/* On the rota */
.rota .cell-note { display: block; font-size: 0.72rem; color: var(--muted); margin-bottom: 0.2rem; }
.rota .cell-holiday { color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.rota .cell-pending { color: var(--warn); font-weight: 600; }
.rota td.is-covering { background: color-mix(in srgb, var(--muted) 16%, var(--surface)); }
.rota td.is-covering .add-hint { display: none; }
.rota .cover-away { display: block; font-size: 0.72rem; line-height: 1.25; color: var(--muted); font-style: italic; margin: 0.1rem 0; cursor: default; }
.rota .cover-away small { display: block; font-style: normal; font-size: 0.68rem; opacity: 0.85; }
@media print { .rota td.is-covering { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.rota td.is-holiday { background: repeating-linear-gradient(135deg, var(--brand-soft) 0 6px, transparent 6px 12px); }

/* Rota: site picker and folding sites */
#rota-site { width: auto; min-width: 170px; }
.rota-group-toggle { display: flex; align-items: baseline; gap: 0.5rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rota-chevron { display: inline-block; width: 1rem; transition: transform 0.15s; }
.rota tr.rota-group.is-folded .rota-chevron { transform: rotate(-90deg); }
.rota-group-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
@media print { .rota tr[data-in-group][hidden] { display: table-row !important; } }

/* Dashboard: sales & labour by site */
.dash-sites .card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.dash-sites .card-head h2 { margin: 0; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.seg button { border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.3rem 0.8rem; cursor: pointer; transition: background 0.15s, color 0.15s; }
.seg button:hover { color: var(--text); }
.seg button.is-on { background: var(--surface); color: var(--brand); font-weight: 700; box-shadow: 0 1px 3px rgba(64, 44, 20, 0.15); }
.dash-table tbody th, .dash-table tfoot th { text-align: left; white-space: nowrap; }
.dash-table tbody tr { cursor: default; }
.dash-table tbody tr:hover, .dash-table tbody tr:focus-visible { background: var(--surface-2); outline: none; }
.dash-sales, .dash-labour { min-width: 230px; }
.dash-sales, .dash-labour { white-space: nowrap; }
.dash-bar { position: relative; display: inline-block; vertical-align: middle; width: 55%; max-width: 220px; height: 10px; margin-right: 0.6rem; background: var(--surface-2); border-radius: 3px; }
.dash-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 3px 3px 0; background: var(--series-1); }
.dash-bars { display: inline-flex; flex-direction: column; gap: 3px; vertical-align: middle; width: 55%; max-width: 220px; margin-right: 0.6rem; }
.dash-bars .dash-bar { width: 100%; max-width: none; margin: 0; }
.dash-bar-prev { height: 5px; background: transparent; }
.dash-bar-prev .fill { background: var(--muted); opacity: 0.55; }
.dash-vs { font-size: 0.8rem; font-weight: 700; margin-left: 0.3rem; }
.dash-bar .fill.tone-bg-good { background: var(--good); }
.dash-bar .fill.tone-bg-warn { background: var(--warn); }
.dash-bar .fill.tone-bg-bad { background: var(--bad); }
.dash-target { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); opacity: 0.7; }
.dash-table tfoot th, .dash-table tfoot td { border-top: 2px solid var(--border); }
/* On phones each site becomes a small block: name, then sales and labour side by side. */
@media (max-width: 600px) {
  .dash-table thead { display: none; }
  .dash-table, .dash-table tbody, .dash-table tfoot { display: block; }
  .dash-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
  .dash-table th, .dash-table td { border: 0 !important; padding: 0; }
  .dash-table tr > th { grid-column: 1 / -1; }
  .dash-table td.num { display: none; }
  .dash-sales, .dash-labour { min-width: 0; white-space: normal; }
  .dash-bar { display: block; width: 100%; max-width: none; margin: 0.25rem 0 0.2rem; }
  .dash-bars { display: flex; width: 100%; max-width: none; margin: 0.25rem 0 0.3rem; }
  .dash-bars .dash-bar { margin: 0; }
  .dash-table tfoot tr { border-top: 2px solid var(--border); border-bottom: 0; }
}

/* Trail set up */
.setup-list li { justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; gap: 1rem; padding: 0.6rem 0; }
.setup-list li > div { flex: 1; }
.setup-task.is-off > div { opacity: 0.55; }
.setup-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; flex-shrink: 0; max-width: 55%; }
#setup-site { width: auto; min-width: 170px; }
@media (max-width: 700px) {
  .setup-list li { flex-wrap: wrap; }
  .setup-actions { max-width: none; flex: 1 1 100%; justify-content: flex-start; }
}

/* Dashboard as a PDF (printed) */
.print-only { display: none; }
@media print {
  .print-only { display: initial; }
  p.print-only { display: block; }
  .print-meta { margin: -0.6rem 0 0.8rem; color: #555; font-size: 0.85rem; }
  .dash-sites .seg, .notice { display: none !important; }
  .dash-bar .fill, .dash-target, .progress div, .badge, .kpi { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kpis { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .dash-sites { margin-bottom: 1rem; break-inside: avoid; }
  .site-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .site-cards .card.site-card { border: 1px solid #ccc; border-radius: 8px; padding: 0.7rem 0.9rem; break-inside: avoid; }
  .site-card h3 { font-size: 0.7rem; }
  .site-money .stat, .site-card .stat { font-size: 1rem; }
  .clock-list li { padding: 0.05rem 0; font-size: 0.85rem; }
  .chart-tip { display: none !important; }
}

/* Setup → Email reports */
.report-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 1rem; }
.report-cards .card { margin: 0; }
.report-card .card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.report-card .card-head h2 { margin: 0; }
.report-card p { margin: 0.4rem 0; }
.report-card.is-off > *:not(.card-head) { opacity: 0.6; }
.report-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.email-setup ol { padding-left: 1.3rem; line-height: 1.6; }
.email-setup li + li { margin-top: 0.35rem; }
.day-picks { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin-top: 0.3rem; }
.day-picks .check-row, .people-picks .check-row { margin: 0.2rem 0; align-items: center; }
.day-picks .check-row input, .people-picks .check-row input { width: auto; margin: 0; }
.day-picks .check-row span, .people-picks .check-row span { font-weight: 400; }
.people-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 1rem; max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.7rem; margin: 0.35rem 0; }
.pick-links { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
.email-preview { width: 100%; height: 60vh; border: 1px solid var(--border); border-radius: 8px; background: #f4f1ea; }
@media (max-width: 700px) { .report-cards { grid-template-columns: 1fr; } }

/* Setup → Products → Import */
.import-pick { display: flex; align-items: center; gap: 0.75rem; margin: 0.75rem 0 0.5rem; }
.import-paste, .import-help { margin: 0.5rem 0; }
.import-paste summary, .import-help summary { cursor: pointer; color: var(--brand); }
.import-paste textarea { width: 100%; margin-top: 0.4rem; font-family: ui-monospace, monospace; font-size: 0.8rem; }
.import-help ul { margin: 0.4rem 0 0; padding-left: 1.2rem; line-height: 1.5; }
.import-summary { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0.9rem 0 0.3rem; font-size: 1rem; }
.import-table { max-height: 45vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.import-table table { margin: 0; }

/* Supplier invoices */
.notice-warn { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.drop-hint { margin: -0.4rem 0 0.6rem; }
#view.is-dropping { outline: 3px dashed var(--brand); outline-offset: -8px; border-radius: 12px; }
.drop-zone { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1.6rem 1rem; margin: 0.5rem 0; border: 2px dashed var(--border); border-radius: 12px; cursor: pointer; text-align: center; }
.drop-zone:hover, .drop-zone.is-over { border-color: var(--brand); background: var(--brand-soft); }
.drop-zone strong { color: var(--brand); }
.upload-list { list-style: none; margin: 0.4rem 0; padding: 0; }
.upload-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px dashed var(--border); font-size: 0.9rem; }
.upload-list li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-list li.is-reading .upload-state { color: var(--brand); }
.upload-list li.is-done .upload-state { color: var(--good); }
.upload-list li.is-failed .upload-state { color: var(--bad); text-align: right; }
.invoice-layout { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.7fr); gap: 1rem; align-items: start; }
.invoice-layout > * { min-width: 0; }
.invoice-layout .card { margin: 0; }
.invoice-doc { position: sticky; top: calc(var(--nav-top, 60px) + 0.5rem); }
.invoice-frame { width: 100%; height: 72vh; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.invoice-img { display: block; max-width: 100%; border: 1px solid var(--border); border-radius: 8px; }
.invoice-form .field small { display: block; margin-top: 0.25rem; }
.invoice-lines td { vertical-align: top; }
.invoice-lines input { width: 100%; min-width: 0; padding: 0.3rem 0.4rem; font-size: 0.88rem; }
.invoice-lines td.num input { width: 4.6rem; text-align: right; }
.invoice-lines th, .invoice-lines td { padding-left: 0.3rem; padding-right: 0.3rem; }
.invoice-lines .inv-desc { min-width: 150px; }
.invoice-lines .inv-desc small { display: block; }
.invoice-lines .inv-product { min-width: 170px; }
.invoice-lines .inv-product select { width: 100%; font-size: 0.88rem; padding: 0.3rem; }
.invoice-lines .l-newbits { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.3rem; }
.invoice-lines .l-newbits[hidden] { display: none; }
.invoice-lines .l-newbits select { min-width: 0; flex: 1; }
.invoice-lines .l-badge { display: block; margin-top: 0.25rem; }
.cost-change { display: flex; gap: 0.35rem; align-items: flex-start; font-size: 0.85rem; white-space: nowrap; }
.cost-change input { width: auto; margin-top: 0.15rem; }
.cost-change small { display: block; color: var(--muted); }
.invoice-totals { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.5rem 1.25rem; margin-top: 0.75rem; font-size: 0.92rem; }
.invoice-totals input { width: 6.5rem; text-align: right; margin-left: 0.3rem; }
@media (max-width: 1100px) { .invoice-layout { grid-template-columns: 1fr; } .invoice-doc { position: static; } .invoice-frame { height: 55vh; } }

/* Installing the app */
.install-card { margin-top: 1rem; }
.install-steps { padding-left: 1.3rem; line-height: 1.6; }
.install-steps li + li { margin-top: 0.3rem; }
.ios-share { display: inline-block; vertical-align: -3px; color: #0a84ff; }
/* Installed on a phone: keep clear of the notch and home bar. */
@media (display-mode: standalone) {
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* Rota: sub-headings by rota group */
.rota tr.rota-subgroup th { text-align: left; padding: 0.35rem 0.75rem 0.3rem 1rem; background: var(--surface-2); border-left: 4px solid color-mix(in srgb, var(--brand) 40%, transparent); }
.rota-subgroup-name { font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand); }
.rota tr.rota-subgroup .rota-group-meta { font-size: 0.8rem; }
#rota-layout { width: auto; }
@media print { .rota tr.rota-subgroup[hidden] { display: table-row !important; } }

/* List pages: search and ticking rows for bulk edits */
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: -0.25rem 0 0.75rem; }
.list-tools input[type=search] { width: min(340px, 100%); }
.bulk-bar { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem 0.3rem 0.8rem; border-radius: 99px; background: var(--brand-soft); color: var(--brand); }
table.selectable th.pick, table.selectable td.pick { width: 2.2rem; text-align: center; padding-left: 0.4rem; padding-right: 0.2rem; }
table.selectable .pick input { width: auto; margin: 0; cursor: pointer; }
table.selectable tr:has(.pick input:checked) td { background: var(--brand-soft); }

/* Menu sections in colour: Team green, Trail blue, Stock and Ordering light yellow, Reporting light green */
:root { --tone-team: #dcefe2; --tone-team-ink: #1c6b3c; --tone-trail: #dde9f8; --tone-trail-ink: #1d5a9e;
  --tone-stock: #fbf3cf; --tone-stock-ink: #876a00; --tone-reporting: #eaf5d3; --tone-reporting-ink: #557515;
  --tone-people: #efe7fa; --tone-people-ink: #6a3fa8; --tone-events: #fde9e1; --tone-events-ink: #b4461b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tone-team: #1d3527; --tone-team-ink: #8fd6a9; --tone-trail: #1c2c42; --tone-trail-ink: #93bdf0;
    --tone-stock: #3a3317; --tone-stock-ink: #e9cf6a; --tone-reporting: #2a3519; --tone-reporting-ink: #bfe07c;
    --tone-people: #2b2240; --tone-people-ink: #c7aef0; --tone-events: #3a2219; --tone-events-ink: #f2a481; }
}
:root[data-theme="dark"] { --tone-team: #1d3527; --tone-team-ink: #8fd6a9; --tone-trail: #1c2c42; --tone-trail-ink: #93bdf0;
  --tone-stock: #3a3317; --tone-stock-ink: #e9cf6a; --tone-reporting: #2a3519; --tone-reporting-ink: #bfe07c;
    --tone-people: #2b2240; --tone-people-ink: #c7aef0; --tone-events: #3a2219; --tone-events-ink: #f2a481; }
.nav-group[data-tone] { margin: 0.45rem 0; padding: 0.1rem 0.25rem 0.3rem; border-radius: 10px; }
.nav-group[data-tone] .nav-heading { margin-top: 0.4rem; font-weight: 700; }
.nav-group[data-tone="team"] { background: var(--tone-team); }
.nav-group[data-tone="team"] .nav-heading { color: var(--tone-team-ink); }
.nav-group[data-tone="trail"] { background: var(--tone-trail); }
.nav-group[data-tone="trail"] .nav-heading { color: var(--tone-trail-ink); }
.nav-group[data-tone="stock"] { background: var(--tone-stock); }
.nav-group[data-tone="stock"] .nav-heading { color: var(--tone-stock-ink); }
.nav-group[data-tone="reporting"] { background: var(--tone-reporting); }
.nav-group[data-tone="people"] { background: var(--tone-people); }
.nav-group[data-tone="events"] { background: var(--tone-events); }
.nav-group[data-tone="events"] .nav-heading { color: var(--tone-events-ink); }
.nav-group[data-tone="people"] .nav-heading { color: var(--tone-people-ink); }
.nav-group[data-tone="reporting"] .nav-heading { color: var(--tone-reporting-ink); }
.nav-group[data-tone] a:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.nav-group[data-tone] a.active { background: var(--surface); }
.nav-group[data-tone] { border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.nav-badge { margin-left: auto; min-width: 1.3rem; padding: 0.05rem 0.4rem; border-radius: 99px; background: var(--bad); color: #fff; font-size: 0.72rem; font-weight: 700; text-align: center; }

/* My Atlas */
.my-greeting { margin: 0.2rem 0 0; }
/* My Atlas is one column, like a feed: your next shifts, then the news, then company documents. */
.mybrew { max-width: 760px; }
.mybrew-news { margin-bottom: 1rem; }
.mybrew .card { margin: 0 0 1rem; }
.mybrew h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.my-shift-list { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.my-shift-list li { display: grid; grid-template-columns: 6.5rem auto 1fr auto; gap: 0.5rem; align-items: baseline; padding: 0.4rem 0.5rem; border-radius: 8px; }
.my-shift-list li:nth-child(odd) { background: var(--surface-2); }
.my-shift-list li.is-today { background: var(--tone-team); font-weight: 600; }
.my-shift-list .my-shift-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.my-shift-list li > span:nth-child(3) { text-align: right; }
.my-shift-list .my-shift-drop { justify-self: end; font-size: 0.8rem; }
.my-shift-list .my-shift-drop.is-asked { color: #b45f06; font-weight: 600; }
.news-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.7rem; }
.news-head h2 { margin: 0; font-size: 1.2rem; }
.news-post { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: 0.8rem; }
.news-post.is-pinned { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.news-post.needs-read { border-left: 5px solid var(--warn); }
.news-post header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.news-post h3 { margin: 0.5rem 0 0.4rem; font-size: 1.1rem; text-transform: none; letter-spacing: normal; color: var(--text); }
.reads-cols h3, .mybrew h2 { text-transform: none; letter-spacing: normal; }
.news-body p { margin: 0 0 0.6rem; line-height: 1.55; }
.news-body.is-clipped { max-height: 9.5rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.link-btn { border: 0; background: none; padding: 0; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; margin-bottom: 0.5rem; }
.news-tag { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 99px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.news-announcement { background: var(--tone-team); color: var(--tone-team-ink); }
.news-policy { background: var(--tone-trail); color: var(--tone-trail-ink); }
.news-event { background: var(--tone-reporting); color: var(--tone-reporting-ink); }
.news-reminder { background: var(--tone-stock); color: var(--tone-stock-ink); }
.news-pin { font-size: 0.78rem; font-weight: 600; }
.news-read { margin: 0.2rem 0 0; color: var(--good); font-weight: 600; font-size: 0.9rem; }
.news-sites { margin: -0.3rem 0 0.8rem; }
.reads-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.reads-cols h3 { font-size: 0.95rem; }
@media (max-width: 900px) { .reads-cols { grid-template-columns: 1fr; } }

/* News photos and videos */
.news-media { display: grid; gap: 0.4rem; margin: 0.2rem 0 0.8rem; }
.news-media.n-2, .news-media.n-3 { grid-template-columns: 1fr 1fr; }
.news-media img, .news-media video { display: block; width: 100%; border-radius: 10px; background: var(--surface-2); }
.news-media.n-1 img, .news-media.n-1 video { max-height: 460px; object-fit: contain; }
.news-media.n-2 img, .news-media.n-3 img { aspect-ratio: 4 / 3; object-fit: cover; }
.news-media video { max-height: 460px; background: #000; }
.news-img { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }
.news-full { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; border-radius: 8px; }
.media-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.35rem 0 0.5rem; }
.media-picker:empty { display: none; }
.media-thumb { position: relative; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.media-thumb img, .media-thumb video { width: 100%; height: 100%; object-fit: cover; }
.media-thumb.is-failed { width: 220px; border-color: var(--bad); }
.media-state { display: grid; place-items: center; height: 100%; padding: 0.3rem; font-size: 0.72rem; text-align: center; color: var(--muted); }
.media-thumb.is-failed .media-state { color: var(--bad); }
.media-kind { position: absolute; left: 4px; bottom: 4px; padding: 0 0.3rem; border-radius: 4px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.68rem; }
.media-remove { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.9rem; line-height: 1; cursor: pointer; }

/* Rota: day view (a timeline of the day's shifts, site by site) */
.day-title { margin: 0.2rem 0 0.1rem; font-size: 1.25rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.day-site { margin-bottom: 1rem; }
.day-site-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem; margin-bottom: 0.6rem; }
.day-site-head h2 { margin: 0; font-size: 1.1rem; }
.day-list { list-style: none; margin: 0; padding: 0; }
.day-person { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0; border-top: 1px solid var(--border); }
.day-person:first-child { border-top: 0; }
.day-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-card {
  display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; padding: 0.45rem 0.8rem; white-space: nowrap;
  border: 0; border-left: 4px solid var(--brand); border-radius: 8px; background: var(--brand-soft); color: var(--text);
  font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
}
.day-card:disabled { cursor: default; }
.day-card.shift-new { border-left-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--surface)); }
.day-card.shift-changed { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface)); }
.day-card.shift-removed { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--surface)); text-decoration: line-through; opacity: 0.7; }
.day-link { color: inherit; text-decoration: none; }
.day-link:hover { text-decoration: underline; }
.rota th small.bank-hol { display: block; color: var(--warn); font-size: 0.68rem; font-weight: 700; }
.rota-group-line { display: flex; align-items: center; gap: 0.75rem; }
.rota-group-line .rota-group-toggle { flex: 1; width: auto; }
.rota-publish-site { flex-shrink: 0; }
.rota tr.rota-forecast th, .rota tr.rota-forecast td { background: color-mix(in srgb, var(--tone-reporting) 60%, var(--surface)); font-size: 0.8rem; padding-top: 0.25rem; padding-bottom: 0.25rem; }
.rota tr.rota-forecast td small, .rota-forecast-total td small { display: block; font-weight: 700; }
.rota tfoot th small { display: block; font-weight: 400; color: var(--muted); font-size: 0.72rem; }
.publish-one { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; justify-content: space-between; }
@media (max-width: 700px) {
  .day-site-actions { margin-left: 0; }
}
@media print { .rota tr.rota-forecast[hidden] { display: table-row !important; } }

/* Company documents (My Atlas) */
.my-docs input[type=search] { width: 100%; margin-bottom: 0.5rem; }
.doc-group h3 { margin: 0.7rem 0 0.2rem; }
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0.4rem; align-items: start; padding: 0.45rem 0; border-bottom: 1px dashed var(--border); }
.doc-list li:last-child { border-bottom: 0; }
.doc-icon { font-size: 1.15rem; line-height: 1.3; }
.doc-text { display: flex; flex-direction: column; min-width: 0; }
.doc-text a { font-weight: 600; overflow-wrap: anywhere; }
.doc-text small { font-size: 0.78rem; }
.doc-dl { text-decoration: none; font-size: 1.1rem; padding: 0 0.3rem; border-radius: 6px; }
.doc-dl:hover { background: var(--surface-2); }
.doc-sites { margin: -0.3rem 0 0.8rem; }

/* The week rota scrolls inside its own box, keeping the day names across the top and people's names down the side
   in view, so you don't have to scroll the whole page back and forth. */
.rota-scroll { max-height: calc(100vh - 150px); overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.rota-scroll .rota { border-collapse: separate; border-spacing: 0; }
.rota-scroll .rota th, .rota-scroll .rota td { border-width: 0 1px 1px 0; }
.rota-scroll .rota thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); box-shadow: 0 1px 0 var(--border); }
.rota-scroll .rota thead th.is-today { background: color-mix(in srgb, var(--brand) 18%, var(--surface)); }
.rota-scroll .rota thead th:first-child { left: 0; z-index: 4; }
.rota-scroll .rota tbody tr:not(.rota-group):not(.rota-subgroup) > th:first-child,
.rota-scroll .rota tfoot th:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: 1px 0 0 var(--border); }
.rota-scroll .rota tr.rota-forecast > th:first-child { background: color-mix(in srgb, var(--tone-reporting) 60%, var(--surface)); }
@media (max-width: 800px) { .rota-scroll { max-height: none; } }
@media print { .rota-scroll { max-height: none; overflow: visible; border: 0; } .rota-scroll .rota th, .rota-scroll .rota td { position: static !important; } }

/* Phones: tighter spacing and smaller controls so pages fit without zooming. Boxes you type in use 16px text,
   because iPhones zoom the whole page in when you tap into anything smaller. */
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  input, select, textarea { font-size: 16px; padding: 0.4rem 0.55rem; }
  main { padding: 0.75rem 0.7rem 2rem; }
  h1 { font-size: 1.2rem; }
  h2 { font-size: 1.02rem; }
  .card { padding: 0.75rem 0.8rem; margin-bottom: 0.7rem; border-radius: 10px; }
  .page-head { gap: 0.45rem; margin-bottom: 0.65rem; }
  .actions, .filters { gap: 0.35rem; }
  .btn { padding: 0.32rem 0.6rem; font-size: 0.9rem; }
  .btn-small { padding: 0.22rem 0.5rem; font-size: 0.82rem; }
  .page-head #print { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.7rem; }
  .kpi { padding: 0.55rem 0.7rem; }
  .kpi strong { font-size: 1.1rem; }
  .site-money { gap: 0.5rem; }
  .site-money .stat { font-size: 1rem; }
  .site-grid { gap: 0.7rem; }
  .topbar { gap: 0.6rem; padding: 0.45rem 0.7rem; }
  .day-title { font-size: 1.05rem; }
  .rota th, .rota td { min-width: 92px; }
  .rota tbody th { min-width: 96px; max-width: 120px; font-size: 0.85rem; }
  .rota tbody td { padding: 0.25rem; }
  .tabs { overflow-x: auto; scrollbar-width: none; }

  /* A table too wide for the screen becomes a stack of cards (see fitTables in app.js). */
  table.stacked, table.stacked tbody, table.stacked tfoot { display: block; }
  table.stacked thead { display: none; }
  table.stacked tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.8rem; position: relative;
    margin-bottom: 0.5rem; padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  }
  table.stacked tr:last-child { margin-bottom: 0; }
  table.stacked td, table.stacked th { display: block; padding: 0; border: 0; text-align: left; min-width: 0; overflow-wrap: anywhere; }
  table.stacked td[data-label]::before, table.stacked th[data-label]::before {
    content: attr(data-label); display: block; color: var(--muted); font-size: 0.72rem; font-weight: 500; line-height: 1.3;
  }
  table.stacked .cell-title { grid-column: 1 / -1; font-weight: 600; font-size: 1rem; padding-right: 2rem; }
  table.stacked td.cell-title::before, table.stacked th.cell-title::before { display: none; }
  table.stacked tr.clickable:hover td { background: none; }
  table.stacked tr.clickable:active { background: var(--surface-2); }
  table.stacked .cell-tick { position: absolute; top: 0.5rem; right: 0.7rem; }
  table.stacked td:empty { display: none; }
  table.stacked td:not([data-label]):not(.cell-tick), table.stacked tr > [colspan] { grid-column: 1 / -1; }
  table.stacked input:not([type=checkbox]), table.stacked select { width: 100%; }
  .table-wrap:has(> table.stacked) { overflow: visible; }
  .card > .table-wrap:has(> table.stacked) { margin: 0 -0.2rem; }
}

/* "A new version is ready" bar (install.js) */
.update-bar {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 0.75rem; width: max-content; max-width: calc(100vw - 1.5rem);
  padding: 0.55rem 0.6rem 0.55rem 1rem; border-radius: 12px; background: var(--text); color: var(--surface);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); font-size: 0.92rem;
}
@media print { .update-bar { display: none; } }

/* "Your phone is showing the computer version" notice (install.js). Sized up because the page is drawn shrunk. */
.desktop-hint {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; padding: 1.4rem 2rem 1.8rem; background: var(--brand); color: var(--brand-contrast);
  font-size: 2rem; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
}
.desktop-hint p { margin: 0; }
.desktop-hint div { display: flex; gap: 1rem; flex-wrap: wrap; }
.desktop-hint .btn { font-size: 1.8rem; padding: 0.7rem 1.4rem; border-radius: 14px; }
.desktop-hint .btn:not(.btn-primary) { background: transparent; color: inherit; border-color: rgba(255, 255, 255, 0.5); }
.desktop-hint .btn-primary { background: var(--surface); color: var(--brand); }
@media print { .desktop-hint { display: none; } }
body.desktop-mode .modal { font-size: 1.9rem; width: 94vw; max-width: none; }
body.desktop-mode .modal h2 { font-size: 2.2rem; }
body.desktop-mode .modal h3 { font-size: 0.8em; margin-top: 1em; } body.desktop-mode .modal .small, body.desktop-mode .modal .btn { font-size: 0.9em; }

/* Finishing touches: pages ease in, clickable cards lift, focus rings are clear, selections are on-brand. */
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } }
main > * { animation: rise-in 0.28s ease-out both; }
main > :nth-child(2) { animation-delay: 0.03s; }
main > :nth-child(3) { animation-delay: 0.06s; }
main > :nth-child(n+4) { animation-delay: 0.09s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.site-cards .card, .kpi { transition: box-shadow 0.2s, transform 0.2s; }
.site-cards .card:hover { box-shadow: var(--shadow-lift); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.page-head h1 { position: relative; }
.card-head h2, .site-cards .card h2 { font-size: 1.12rem; }
.stat, .site-money .stat { font-weight: 700; letter-spacing: -0.02em; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
@media print { main > * { animation: none; } }

/* ---- Instagram-inspired finish ---- */

.brand-band { border-bottom: 1px solid var(--border); background: var(--surface); }
.brand .logo-word { font-weight: 800; letter-spacing: -0.03em; }

/* Section label above each page title (Team, Trail, …). */
body { --section-ink: var(--muted); }
body[data-section="team"] { --section-ink: var(--tone-team-ink); }
body[data-section="people"] { --section-ink: var(--tone-people-ink); }
body[data-section="events"] { --section-ink: var(--tone-events-ink); }
body[data-section="trail"] { --section-ink: var(--tone-trail-ink); }
body[data-section="stock"] { --section-ink: var(--tone-stock-ink); }
body[data-section="reporting"] { --section-ink: var(--tone-reporting-ink); }
body:not([data-section=""]) main > .page-head:first-child h1::before {
  content: var(--section-label); display: block; margin-bottom: 0.1rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--section-ink);
}

/* Buttons: the blue main action and soft grey secondary buttons. */
.btn { border-radius: 8px; border: 0; background: var(--surface-2); box-shadow: none; font-weight: 600; }
.btn:hover { background: color-mix(in srgb, var(--text) 10%, var(--surface)); box-shadow: none; }
.btn-primary, .btn-primary:hover { background: var(--brand); color: #fff; box-shadow: none; filter: none; }
.btn-primary:hover { background: var(--brand-deep); }
.btn-danger { background: var(--bad-soft); color: var(--bad); }
.btn-ghost { background: transparent; }
.seg { border-radius: 10px; border: 0; background: var(--surface-2); }
.seg button { border-radius: 8px; }
.seg button.is-on { color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.tabs a.active { color: var(--text); border-color: var(--text); }
input, select, textarea { background: var(--surface); border-radius: 8px; }
input:focus, select:focus, textarea:focus { border-color: var(--muted); box-shadow: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); }

/* Flat cards with hairline borders. */
.card, .kpi { border: 1px solid var(--border); box-shadow: none; }
.kpi::before { display: none; }
.kpi { padding-right: 2.4rem; }
.kpi span { text-transform: none; letter-spacing: 0; font-size: 0.8rem; font-weight: 500; }
.kpi[data-icon]::after {
  content: attr(data-icon); position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; line-height: 1; font-weight: 700; color: var(--text); opacity: 0.12;
}
.kpi-feature { border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient) border-box; }
.kpi:hover { transform: none; }
.site-cards .card:hover { box-shadow: none; }
.site-card { padding-top: 0; overflow: hidden; }
.site-card > .card-head { margin: 0 -1.1rem 0.9rem; padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--border); }
.site-card > .card-head h2 { display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; }
.site-card > .card-head h2::before {
  content: attr(data-initials); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  font-size: 0.72rem; font-weight: 700; color: var(--text);
  border: 2px solid var(--surface); background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--gradient) border-box;
  box-shadow: 0 0 0 2px transparent; outline: 2px solid transparent;
}
.notice { border-radius: 10px; }
.empty { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.empty::before { content: "☕"; display: block; font-size: 1.8rem; margin-bottom: 0.35rem; opacity: 0.55; }
.loading::before { content: none; }
.table-wrap tbody tr:hover > td { background: var(--surface-2); }
.modal { border-radius: 12px; }
.login-wrap { background: none; }
.login-wrap .login { border: 1px solid var(--border); border-radius: 12px; box-shadow: none; }

/* Profile pictures with the gradient ring, as used for people and sites. */
.ring { display: inline-grid; place-items: center; padding: 2px; border-radius: 50%; background: var(--gradient); flex-shrink: 0; }
.ring.is-seen { background: var(--border); }
.ring > * { display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--surface); background: var(--surface-2); color: var(--text); font-weight: 700; }
.user-btn .avatar { box-shadow: none; }
.user-btn .ring > .avatar { border-width: 2px; width: 28px; height: 28px; font-size: 0.66rem; }


/* News posts as a feed: who posted it at the top, the picture edge to edge, then the words. */
.news-post { border-radius: 12px; padding: 0; overflow: hidden; }
.news-post.needs-read { border-left: 1px solid var(--border); box-shadow: inset 0 3px 0 var(--accent); }
.news-post.is-pinned { border-color: var(--border); }
.news-post > * { margin-left: 1rem; margin-right: 1rem; }
.post-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0 0.5rem; }
.post-head .ring > span { width: 32px; height: 32px; font-size: 0.7rem; }
.post-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.post-who strong { font-size: 0.9rem; }
.post-who .muted { font-size: 0.75rem; }
.post-head .news-pin { margin-left: auto; font-size: 0.75rem; }
.news-post > .news-media { margin: 0 0 0.7rem; gap: 2px; }
.news-post > .news-media img, .news-post > .news-media video { border-radius: 0; }
.news-post > h3 { margin-top: 0.2rem; font-size: 1rem; }
.news-post > .news-tag-row { margin-top: 0.2rem; }
.news-post > :last-child { margin-bottom: 1rem; }

/* Phones: an icon bar along the bottom for the most used pages, like a social app. */
.tabbar { display: none; }
@media (max-width: 800px) {
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    padding: 0.3rem 0.25rem calc(0.3rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
  }
  .tabbar a, .tabbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.3rem 0; position: relative;
    border: 0; background: none; color: var(--text); font: inherit; font-size: 0.66rem; text-decoration: none; cursor: pointer;
  }
  .tabbar svg { width: 26px; height: 26px; }
  .tabbar .is-on { font-weight: 700; }
  .tabbar .is-on svg { stroke-width: 2.6; }
  .tabbar .nav-badge { position: absolute; top: 0; left: calc(50% + 6px); margin: 0; min-width: 1.1rem; padding: 0 0.3rem; font-size: 0.62rem; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  #toasts { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .update-bar { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

@media (max-width: 640px) {
  .kpi[data-icon]::after { font-size: 1.3rem; right: 0.5rem; }
  .site-card > .card-head { margin: 0 -0.8rem 0.75rem; padding: 0.65rem 0.8rem; }
}
@media print {
  body { background: #fff; padding-bottom: 0; }
  .tabbar { display: none !important; }
  .kpi-feature { border: 1px solid #ccc; background: none; }
  .kpi[data-icon]::after { display: none; }
}
.news-post > .news-tag-row { margin-bottom: 0.4rem; }
.news-post > h3 { margin: 0.1rem 1rem 0.35rem; }
.topbar .demo-pill { background: var(--surface-2); color: var(--muted); }
/* The company logos are dark ink, so their strip stays white in dark mode too. */
.brand-band { background: #ffffff; border-bottom-color: #dbdbdb; }
.login h1.login-logo { color: var(--text); }

/* A page's own site drop-down. */
.site-pick { font-weight: 600; max-width: 240px; }

/* PDFs are for computers; phones leave the dashboard's Download PDF button out. */
@media (max-width: 800px) { .dash-pdf { display: none; } }

/* Permissions: the fixed Admin column. */
.perm-matrix .perm-admin { background: color-mix(in srgb, var(--brand) 6%, transparent); }

/* Breaks (dashboard clock-in list and Reporting → Breaks). */
.clock-list li { flex-wrap: wrap; }
.clock-breaks { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; margin-top: 0.1rem; }
.badge-on-break { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.break-pill { display: inline-block; margin: 0.05rem 0; padding: 0.05rem 0.5rem; border-radius: 99px; background: var(--surface-2); font-size: 0.82rem; white-space: nowrap; }
.break-pill.is-paid { background: var(--good-soft); color: var(--good); }
.kpi small { display: block; color: var(--muted); font-size: 0.78rem; }

/* Rota changes (audit log) */
.log-badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 99px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; background: var(--surface-2); }
.log-add { background: var(--good-soft); color: var(--good); }
.log-change { background: var(--warn-soft); color: var(--warn); }
.log-remove { background: var(--bad-soft); color: var(--bad); }
.log-publish { background: var(--brand-soft); color: var(--brand-deep); }
.rota-log .log-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rota-log td small { display: block; }
.shift-history { margin-top: 0.6rem; }
.shift-history summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.log-list { list-style: none; margin: 0.5rem 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
.log-list li { padding: 0.4rem 0; border-top: 1px solid var(--border); }

/* Staff names on the rota that admins can click to edit the person. */
.person-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 3px; }
.person-link:hover { color: var(--brand); text-decoration-color: currentColor; }
.day-name .person-link { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Week rota: kept calm and neutral so the shifts are what stand out. Each site's heading is a light grey bar with
   a thin strip in the site's own colour. */
.rota tr.rota-group th {
  background: var(--surface-2); color: var(--text); padding: 0.45rem 0.8rem;
  border-left: 0; border-top: 10px solid var(--surface); box-shadow: inset 4px 0 0 var(--site, var(--border));
}
.rota tr.rota-group .rota-group-toggle { align-items: center; }
.rota tr.rota-group .rota-group-name { font-size: 1rem; font-weight: 700; }
.rota tr.rota-group .rota-chevron { color: var(--muted); font-size: 0.8rem; }
.rota tr.rota-group .rota-group-meta { margin-left: 0.6rem; font-size: 0.8rem; font-weight: 500; color: var(--muted); opacity: 1; }
.rota tr.rota-group .rota-group-line { gap: 0.5rem; }
@media print { .rota tr.rota-group th { background: #eee !important; color: #000 !important; } }
@media (max-width: 640px) {
  .rota tr.rota-group th { padding: 0.35rem 0.6rem; }
  .rota tr.rota-group .rota-group-name { font-size: 0.92rem; }
  .rota tr.rota-group .rota-group-meta { font-size: 0.72rem; margin-left: 0.4rem; }
}

/* Reporting → Rota costs */
.rota-costs tbody th, .rota-costs tfoot th { text-align: left; font-weight: 600; white-space: nowrap; }
.rota-costs tbody th small.bank-hol { display: block; color: var(--warn); font-size: 0.72rem; font-weight: 700; }
.rota-costs td small { font-size: 0.75rem; }
.rota-costs tfoot tr th, .rota-costs tfoot tr td { border-top: 2px solid var(--border); font-weight: 700; }
/* Dashboard: clock-ins against the rota. */
.clock-rota { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; margin-top: 0.1rem; }
.chip-muted { background: var(--surface-2); color: var(--muted); }
.clock-missing { margin-top: 0.3rem; }
.clock-missing li { opacity: 0.95; }

/* Invoices: the shared invoice inbox. */
.inbox-card summary { cursor: pointer; }
.inbox-card code { font-size: 0.85em; background: var(--surface-2); padding: 0.05rem 0.35rem; border-radius: 5px; }
.inbox-site { max-width: 420px; }
.inbox-list td small { display: block; }

/* Reporting → Reviews */
.stars { color: #f5a623; letter-spacing: 0.05em; white-space: nowrap; }
.stars-off { color: var(--border); }
.badge-new { background: var(--good-soft); color: var(--good); border-color: transparent; vertical-align: middle; }
.review-error { background: var(--bad-soft); color: var(--bad); }
.review-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.9rem; margin-bottom: 1rem; }
.review-site { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.review-site h3 { margin: 0 0 0.2rem; font-size: 1rem; }
.review-site p { margin: 0; }
.review-site-empty { justify-content: space-between; align-items: flex-start; border-style: dashed; }
.review-score { display: flex; align-items: baseline; gap: 0.5rem; }
.review-score strong { font-size: 2rem; line-height: 1; }
.review-score .stars { font-size: 1.15rem; }
.review-change { display: flex; flex-wrap: wrap; gap: 0.5rem; min-height: 1.2em; }
.review-links { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin-top: auto !important; padding-top: 0.4rem; }
.review-list { list-style: none; margin: 0; padding: 0; }
.review { padding: 0.9rem 0 0.9rem 0.8rem; border-top: 1px solid var(--border); border-left: 3px solid transparent; }
.review:first-child { border-top: 0; }
.review-low { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad-soft) 45%, transparent); }
.review-head { display: flex; gap: 0.6rem; align-items: center; }
.review-photo { width: 36px; height: 36px; border-radius: 50%; flex: none; object-fit: cover; }
.review-initial { display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-deep); font-weight: 700; }
.review-text { margin: 0.5rem 0 0.35rem; white-space: pre-line; overflow-wrap: anywhere; }
.place-search { align-items: flex-end; }
.place-search .field { flex: 1; }
.place-results { list-style: none; margin: 0.6rem 0 0; padding: 0; max-height: 320px; overflow: auto; }
.place-option { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.55rem 0.4rem; border-radius: 8px; cursor: pointer; }
.place-option:hover { background: var(--surface-2); }
.review-links .link-btn { margin: 0; font-weight: 600; }
.kpi .stars { display: inline; color: #f5a623; font-size: 1rem; letter-spacing: 0.05em; }
.kpi .stars .stars-off { color: var(--border); }
.place-search .btn { margin-bottom: 0.8rem; }
.review-more { display: block; margin: 0.6rem auto 0.4rem; }

/* Sign in: forgot password and choosing a password from an emailed link */
.forgot-link { text-align: center; margin: 0.9rem 0 0; }
.forgot-link .link-btn { margin: 0; font-weight: 500; font-size: 0.9rem; }
.set-pw-title { font-size: 1.25rem; margin: 0.4rem 0 0.3rem; }
.login .btn-block + .btn-block { margin-top: 0.5rem; }

/* Staff: who has joined Atlas, and invites */
.join-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.8rem 1rem; }
.join-summary p { margin: 0; flex-basis: 100%; }
.invite-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 0.9rem; margin-bottom: 0.8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.invite-box small { flex-basis: 100%; }
.invite-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.square-box { margin: 0 0 0.8rem; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 10px; }
p.square-box { background: var(--good-soft); border-color: transparent; }
/* Dashboard: gross sales tile's change on last week */
.kpi .kpi-vs span { display: inline; font-size: inherit; text-transform: none; letter-spacing: 0; font-weight: 700; color: inherit; }
.kpi .kpi-vs span.muted { font-weight: 400; color: var(--muted); }
.kpi .kpi-vs span.kpi-open { display: block; margin-top: 2px; }
.kpi .kpi-vs span.tone-good { color: var(--good); }
.kpi .kpi-vs span.tone-bad { color: var(--bad); }
/* "Change site" on a clock-in */
.link-btn.move-card { font-size: 0.78rem; font-weight: 600; margin: 0 0 0 0.4rem; }
@media print { .move-card { display: none !important; } }
/* Editing a clock-in's breaks */
.break-edit { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0.6rem; align-items: end; padding: 0.3rem 0; border-bottom: 1px solid var(--border); }
.break-edit .field { margin-bottom: 0.4rem; }
.break-edit .icon-btn { margin-bottom: 0.5rem; }
.break-rows + .break-none { margin-top: 0; }
@media (max-width: 600px) {
  .break-edit { grid-template-columns: 1fr 1fr auto; }
  .break-edit .field:first-child { grid-column: 1 / -1; }
}
.break-edit select, .break-edit input { height: 2.5rem; box-sizing: border-box; }

/* Rota: dragging shifts between people */
.shift.is-draggable, .day-card.is-draggable { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.shift.is-dragging, .day-card.is-dragging { opacity: 0.35; }
.shift-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; margin: 0; opacity: 0.95; box-shadow: var(--shadow-lift); transform-origin: top left; cursor: grabbing; }
body.rota-dragging, body.rota-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
[data-drop].drop-over { outline: 2px dashed var(--brand); outline-offset: -3px; background: var(--brand-soft) !important; }
.clock-actions { display: inline-flex; gap: 0.5rem; white-space: nowrap; margin-left: 0.4rem; }
.clock-actions .link-btn.move-card { margin: 0; }
.inbox-setup ul { margin: 0.4rem 0; padding-left: 1.1rem; } .inbox-setup li { margin: 0.15rem 0; }
/* Shift window: quick times */
.time-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: -0.3rem 0 0.8rem; }
.chip-btn { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 99px; padding: 0.3rem 0.75rem; font: inherit; font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.chip-btn:hover { border-color: var(--brand); }
.chip-btn.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep); }

/* Dashboard: who's in today (compact: each site its own small table, side by side on wide screens) */
.whos-in-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 0.6rem 1.2rem; }
.whos-in-site-head { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.15rem; padding: 0.25rem 0.5rem; background: var(--surface-2); border-radius: 6px; font-size: 0.85rem; }
.whos-in-site-head strong { font-size: 0.88rem; }
.whos-in-table { width: 100%; font-size: 0.82rem; border-collapse: collapse; }
.whos-in-table th, .whos-in-table td { padding: 0.18rem 0.5rem; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; border-bottom: 1px solid var(--border); }
.whos-in-table thead th { padding-top: 0.1rem; padding-bottom: 0.15rem; font-size: 0.66rem; }
.whos-in-table tr:last-child td { border-bottom: 0; }
.whos-in-table td:first-child { width: 100%; white-space: normal; }
.roster-status { display: inline-block; padding: 0 0.45rem; border-radius: 99px; font-size: 0.7rem; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.roster-row.is-in .roster-status { background: var(--good-soft); color: var(--good); }
.roster-row.is-break .roster-status { background: var(--accent-soft); color: var(--accent); }
.roster-row.is-late .roster-status { background: var(--bad-soft); color: var(--bad); }
.roster-row.is-late td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.roster-row.is-other .roster-status { background: var(--warn-soft); color: var(--warn); }
.roster-row.is-done td { color: var(--muted); }
.roster-row td .muted { font-size: 0.72rem; }
@media (max-width: 700px) {
  .whos-in-table { font-size: 0.76rem; }
  .whos-in-table th, .whos-in-table td { padding: 0.18rem 0.25rem; }
  .whos-in-table .roster-status { font-size: 0.64rem; padding: 0 0.35rem; }
}
.whos-in-site { min-width: 0; }
.whos-in-table td:last-child { white-space: normal; }
.whos-in-table td:first-child { min-width: 6.5rem; }

/* Less white: a soft grey page behind white cards with a gentle shadow, so sections stand apart. */
:root:not([data-theme="dark"]) { --bg: #eceef2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000000; } }
.card, .kpi { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 6px rgba(16, 24, 40, 0.04); border-color: color-mix(in srgb, var(--border) 70%, transparent); }
/* Dashboard section headings get a light band. */
.dash-sites > .card-head, .whos-in > .card-head {
  margin: -1.1rem -1.1rem 0.9rem; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--border);
  background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0;
}
@media (max-width: 700px) {
  .dash-sites > .card-head, .whos-in > .card-head { margin: -0.75rem -0.8rem 0.75rem; padding: 0.6rem 0.8rem; }
}

/* Each site's own colour (set as --site on the element) on the dashboard. */
.site-card { border-top: 5px solid var(--site, var(--border)); }
.site-card > .card-head { background: color-mix(in srgb, var(--site, var(--surface-2)) 10%, var(--surface)); }
.site-card > .card-head h2::before { background: var(--site, var(--surface-2)); color: #fff; border-color: var(--surface); }
.dash-table tbody th { position: relative; padding-left: 1.4rem; }
.dash-table tbody tr[style] th::before { content: ""; position: absolute; left: 0.45rem; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 3px; background: var(--site); }
.dash-table tbody tr[style] .dash-sales .dash-bar:not(.dash-bar-prev) .fill { background: var(--site); }
.whos-in-site-head { background: color-mix(in srgb, var(--site, var(--surface-2)) 13%, var(--surface)); border-left: 4px solid var(--site, var(--border)); }
.security-warning { background: var(--bad-soft); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); }

/* Dashboard: gross sales tile beside the hourly chart (today vs the same day last week, in grey). */
:root { --prev-bar: #a3a8b0; --open-bar: #f08a24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --prev-bar: #6b717a; } }
:root[data-theme="dark"] { --prev-bar: #6b717a; }
.dash-hero { display: grid; grid-template-columns: minmax(220px, 1fr) 3fr; grid-template-rows: auto auto; gap: 0.75rem; margin-bottom: 0.75rem; }
.dash-hourly { grid-column: 2; grid-row: 1 / span 2; }
.dash-hero .kpi { margin: 0; }
.dash-hourly { margin: 0; padding: 0.8rem 1rem 0.4rem; min-width: 0; }
.dash-hourly-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 1rem; }
.dash-hourly-head h2 { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.3rem; }
.dash-hourly-head .chart-legend { margin: 0 0 0.3rem; }
.chart-legend i.chart-legend-bar { width: 10px; height: 10px; border-radius: 3px; }
@media (max-width: 700px) {
  /* Phones: gross sales and labour side by side, the chart full width underneath. */
  .dash-hero { grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem; }
  .dash-hourly { grid-column: 1 / -1; grid-row: auto; }
  .dash-hero .kpi-vs br { display: none; }
}
@media print { .dash-hero { grid-template-columns: 1fr 3fr; } .dash-hourly { grid-column: 2; grid-row: 1 / span 2; } }
/* Dashboard: "Clocked in now" opens a list of who's in */
.kpi-button { font: inherit; text-align: left; color: inherit; cursor: pointer; width: 100%; display: block; }
.kpi-button:hover { border-color: var(--brand); }
.kpi-button u { text-underline-offset: 2px; color: var(--brand); text-decoration-color: currentColor; }
.clocked-site { margin-bottom: 0.9rem; }
.clocked-site h3 { margin: 0 0 0.3rem; padding: 0.3rem 0.6rem; font-size: 0.9rem; border-left: 4px solid var(--site); background: color-mix(in srgb, var(--site) 12%, var(--surface)); border-radius: 6px; }
.clocked-list { list-style: none; margin: 0; padding: 0; }
.clocked-list li { display: grid; grid-template-columns: 1fr auto; gap: 0 0.6rem; padding: 0.4rem 0.2rem; border-bottom: 1px solid var(--border); }
.clocked-list li .muted { grid-column: 1; font-size: 0.8rem; }
.clocked-list li > span:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.clocked-site h3 { text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 700; display: flex; justify-content: space-between; }
.clocked-site h3 .muted { font-weight: 500; }
/* Dashboard: the date, with a small arrow to choose another day (a date picker sits invisibly over it). */
.dash-date { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem; border-radius: 8px; color: var(--muted); cursor: pointer; }
.dash-date:hover { background: var(--surface-2); color: var(--text); }
.dash-date-caret { font-size: 0.8em; }
.dash-date input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.dash-date input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
@media print { .dash-date-caret, #dash-today { display: none; } }
/* Who's in today: folds away to its heading, and each site to its own heading, until tapped. */
details.whos-in > summary, details.whos-in-site > summary { cursor: pointer; list-style: none; }
details.whos-in > summary::-webkit-details-marker, details.whos-in-site > summary::-webkit-details-marker { display: none; }
details.whos-in > summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 1rem; }
details.whos-in > summary h2::before, details.whos-in-site > summary strong::before {
  content: "▸"; display: inline-block; width: 1.1em; color: var(--muted); transition: transform 0.15s;
}
details.whos-in[open] > summary h2::before, details.whos-in-site[open] > summary strong::before { transform: rotate(90deg); }
details.whos-in:not([open]) > summary { margin-bottom: -1.1rem; border-bottom: 0; border-radius: var(--radius); }
details.whos-in-site > summary { margin-bottom: 0; }
details.whos-in-site[open] > summary { margin-bottom: 0.15rem; }
.whos-in-grid { align-items: start; }
@media (max-width: 700px) { details.whos-in:not([open]) > summary { margin-bottom: -0.75rem; } }
@media print { details.whos-in > summary h2::before, details.whos-in-site > summary strong::before { display: none; } }
.whos-in .whos-in-grid { grid-template-columns: 1fr; gap: 0.4rem; }
details.whos-in > summary h2::before, details.whos-in-site > summary strong::before { text-align: center; transform-origin: 50% 55%; }
details.whos-in-site[open] { padding-bottom: 0.4rem; }
.whos-in .whos-in-table { max-width: 720px; }
/* Setup → Payment links */
.pay-links td small { display: block; }
.pay-actions { white-space: nowrap; text-align: right; }
.pay-actions .btn { margin: 0.1rem 0; }
.site-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--site); margin-right: 0.4rem; }
/* Who's in today: when it last came in from Square */
.whos-in .sync-line { margin-left: auto; display: inline-flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; }
@media (max-width: 700px) { .whos-in .sync-line { margin-left: 0; order: 3; width: 100%; } }

/* Site cards: each clocked-in person on one line (name, times, short tags | hours | ☕ ⇄). */
.clock-rows { list-style: none; margin: 0 0 0.4rem; padding: 0; }
.clock-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.32rem 0; border-bottom: 1px dashed var(--border); font-size: 0.88rem; line-height: 1.3; }
/* Someone clocked in right now: a light green row. */
.clock-row.is-in { background: color-mix(in srgb, var(--good) 16%, var(--surface)); margin: 0 -0.4rem; padding-left: 0.4rem; padding-right: 0.4rem; border-radius: 6px; }
.clock-row:last-child { border-bottom: 0; }
.cr-main { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-hours { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-hours .badge { font-size: 0.66rem; padding: 0 0.4rem; }
.clock-row .clock-actions { margin: 0; gap: 0.15rem; }
.icon-action { font-size: 0.95rem !important; text-decoration: none !important; padding: 0.1rem 0.3rem !important; border-radius: 6px; line-height: 1; }
.icon-action:hover { background: var(--surface-2); }
.mini-tag { display: inline-block; padding: 0 0.35rem; margin-left: 0.15rem; border-radius: 5px; font-size: 0.68rem; font-weight: 700; background: var(--surface-2); color: var(--muted); vertical-align: 1px; }
.mini-tag.is-warn { background: var(--warn-soft); color: var(--warn); }
.mini-tag.is-bad { background: var(--bad-soft); color: var(--bad); }
.clock-missing { margin-top: 0.2rem; }
.cr-tags { flex: none; white-space: nowrap; }
.cr-tags .mini-tag:first-child { margin-left: 0; }

/* Dashboard: London's 7-day forecast */
.weather { padding: 0.7rem 1rem; }
.weather-title { font-size: 0.85rem; font-weight: 600; margin: 0 0 0.4rem; color: var(--muted); }
.weather-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; }
.weather-days li { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.35rem 0.1rem; border-radius: 8px; text-align: center; font-size: 0.8rem; }
.weather-days li:first-child { background: var(--surface-2); }
.wd-day { font-weight: 600; }
.wd-icon { font-size: 1.4rem; line-height: 1.2; }
.wd-temp { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wd-rain { font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
.wd-rain.is-wet { color: var(--series-1); font-weight: 600; }
@media (max-width: 420px) { .weather-days { gap: 0.1rem; } .weather-days li { font-size: 0.72rem; } .wd-icon { font-size: 1.15rem; } }
@media print { .weather { display: none; } }
/* Reporting → Open orders, and an order's items */
.open-orders td small, .order-detail td small { display: block; }
.open-orders { width: 100%; }
.open-orders tr.row-link { cursor: pointer; }
.open-orders td { vertical-align: top; }
.open-orders .oo-when { white-space: nowrap; }
.open-orders .num { white-space: nowrap; }
@media (max-width: 640px) {
  /* Phones: a compact list – long item summaries are cut short rather than wrapping. */
  .open-orders th, .open-orders td { padding-left: 0.35rem; padding-right: 0.35rem; }
  .open-orders .oo-when strong, .open-orders .oo-when .muted { display: block; }
  .open-orders .oo-order { max-width: 0; width: 100%; }
  .open-orders .oo-order strong, .open-orders .oo-order small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.open-orders tr.row-link:focus-visible > td { background: var(--surface-2); }
.order-detail { width: 100%; }
.order-detail tfoot td { border-top: 1px solid var(--border); }
.order-detail tfoot tr + tr td { border-top: 0; }
/* Dropped shifts: requests to approve, open shifts to pick up, your own requests (My Atlas and the rota) */
.drops-card h2 { font-size: 1rem; margin: 0 0 0.4rem; display: flex; align-items: center; gap: 0.4rem; }
.drops-card h2:not(:first-child) { margin-top: 0.9rem; }
.drops-list { list-style: none; margin: 0; padding: 0; }
.drops-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--border); }
.drops-list li:first-child { border-top: 0; }
.drops-list small { display: block; color: var(--muted); }
.drops-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
/* The rota's open shifts: a row at the top of the week, and a card on the day view */
.rota tr.rota-open th, .rota tr.rota-open td { background: var(--tone-team, var(--surface-2)); }
.shift.shift-open { border-style: dashed; background: var(--surface); }
.shift .shift-tag.tag-drop, .day-card .shift-tag.tag-drop { background: color-mix(in srgb, #f08a24 25%, transparent); color: inherit; }
/* Rota: neutral shifts and rows – colour is kept for what needs attention (new, changed, removed, open shifts) */
.rota .is-today { background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.rota-scroll .rota thead th.is-today { background: color-mix(in srgb, var(--brand) 10%, var(--surface-2)); }
.shift { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid color-mix(in srgb, var(--text) 30%, transparent); }
.day-card { background: var(--surface-2); border-left-color: color-mix(in srgb, var(--text) 30%, transparent); }
.rota tr.rota-forecast th, .rota tr.rota-forecast td, .rota-scroll .rota tr.rota-forecast > th:first-child { background: var(--surface); color: var(--muted); }
.rota tr.rota-open th, .rota tr.rota-open td { background: var(--surface); }
.person-link { text-decoration: none; }
.person-link:hover { text-decoration: underline; }
/* Sickness: on the rota, the dashboard and the shift window */
.shift.shift-sick, .day-card.shift-sick { opacity: 0.75; background: var(--surface-2); }
.shift.shift-sick .shift-time, .day-card.shift-sick > span:first-child { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text) 45%, transparent); }
.shift .shift-tag.tag-sick, .day-card .shift-tag.tag-sick { background: color-mix(in srgb, #7c5cbf 22%, transparent); color: inherit; }
.mini-tag.is-sick { background: color-mix(in srgb, #7c5cbf 20%, transparent); color: inherit; }
button.mini-tag { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
.mini-tag.sick-btn { background: var(--surface-2); color: var(--muted); }
.mini-tag.sick-btn:hover { color: var(--text); }
.whos-in-table tr.is-sick .roster-status { color: #7c5cbf; }
.roster-sick { font: inherit; color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.sick-line { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 8px; background: var(--surface-2); }
.sick-line-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; }
.sick-line.is-sick { background: color-mix(in srgb, #7c5cbf 14%, var(--surface)); }
.sick-shifts td small { display: block; }
@media (max-width: 640px) {
  /* Phones: a request's buttons go on their own line under it. */
  .drops-list li { flex-wrap: wrap; }
  .drops-list li > div:first-child { flex: 1 1 100%; }
  .drops-actions { margin-left: auto; }
}
/* A menu section's page of tiles (e.g. Stock & Ordering) */
.hub-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.8rem; }
.hub-tile { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1rem; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); text-decoration: none; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); transition: border-color 0.15s, transform 0.15s; }
.hub-tile:hover, .hub-tile:focus-visible { border-color: var(--brand); transform: translateY(-1px); }
.hub-icon { flex-shrink: 0; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 12px; font-size: 1.3rem;
  background: var(--surface-2); color: var(--text); }
.hub-tiles[data-tone="trail"] .hub-icon { background: var(--tone-trail); color: var(--tone-trail-ink); }
.hub-tiles[data-tone="stock"] .hub-icon { background: var(--tone-stock); color: var(--tone-stock-ink); }
.hub-tiles[data-tone="team"] .hub-icon { background: var(--tone-team); color: var(--tone-team-ink); }
.hub-tiles[data-tone="events"] .hub-icon { background: var(--tone-events); color: var(--tone-events-ink); }
.hub-tiles[data-tone="people"] .hub-icon { background: var(--tone-people); color: var(--tone-people-ink); }
.hub-text { flex: 1; min-width: 0; }
.hub-text strong { display: block; font-size: 1.05rem; }
.hub-text small { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 0.15rem; }
.hub-go { color: var(--muted); font-size: 1.4rem; }
@media (max-width: 640px) { .hub-tiles { grid-template-columns: 1fr 1fr; gap: 0.6rem; } .hub-tile { flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 0.9rem; } .hub-go { display: none; } }
.sidebar a.nav-hub .nav-caret { margin-left: auto; color: var(--muted); }
.invoice-lines .l-new { font-size: 0.8rem; margin-left: 0.3rem; white-space: nowrap; }
/* On a computer: a section's tiles down the left, its page to the right */
.hub-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.hub-rail { display: flex; flex-direction: column; gap: 0.5rem; position: sticky; top: 0.8rem; }
.hub-group-head { grid-column: 1 / -1; margin: 0.9rem 0 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.hub-rail-head { margin: 0.2rem 0 0.2rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.hub-rail .hub-tile { padding: 0.65rem 0.7rem; gap: 0.65rem; border-radius: 12px; }
.hub-rail .hub-icon { width: 2.2rem; height: 2.2rem; font-size: 1.05rem; border-radius: 10px; }
.hub-rail .hub-text strong { font-size: 0.95rem; }
.hub-rail .hub-text small { font-size: 0.75rem; }
.hub-rail .hub-go { display: none; }
.hub-rail .hub-tile:hover { transform: none; }
.hub-rail .hub-tile.is-active { border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.hub-main { min-width: 0; }
@media print { .hub-layout { display: block; } .hub-rail { display: none; } }

/* My Atlas home, laid out like a music app's home: filter pills, a grid of shortcuts, then swipeable rows of cards */
.mb-pills { display: flex; gap: 0.5rem; overflow-x: auto; margin: 0.2rem 0 0.9rem; scrollbar-width: none; }
.mb-pill { flex-shrink: 0; border: 0; border-radius: 999px; padding: 0.42rem 1rem; background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.mb-pill.is-on { background: var(--brand); color: var(--brand-contrast); }
.mb-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1.3rem; }
@media (min-width: 900px) { .mb-shortcuts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mb-shortcut { display: flex; align-items: center; gap: 0.65rem; min-height: 58px; overflow: hidden; border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
  color: var(--text); text-decoration: none; transition: background 0.15s; }
.mb-shortcut:hover { background: var(--surface-2); }
.mb-art { flex-shrink: 0; align-self: stretch; width: 58px; display: grid; place-items: center; font-size: 1.45rem; background: linear-gradient(140deg, var(--c1), var(--c2)); }
.mb-shortcut-text { min-width: 0; padding-right: 0.5rem; }
.mb-shortcut-text strong { display: block; font-size: 0.92rem; line-height: 1.2; }
.mb-shortcut-text small { display: block; color: var(--muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-section { margin-bottom: 1.2rem; }
.mb-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; }
.mb-section-head { flex-wrap: wrap; }
.mybrew .mb-section-head h2 { white-space: nowrap; font-size: 1.25rem; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.mb-row { display: flex; gap: 0.8rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.4rem; scrollbar-width: thin; }
.mb-card { flex: 0 0 152px; scroll-snap-align: start; }
.mb-cover { position: relative; height: 152px; border-radius: 10px; padding: 0.75rem; color: #fff; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(155deg, color-mix(in srgb, var(--site) 70%, #fff) 0%, var(--site) 55%, color-mix(in srgb, var(--site) 75%, #000) 100%);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.35); }
.mb-cover.is-today { box-shadow: inset 0 0 0 3px #fff, 0 6px 16px -8px rgba(0, 0, 0, 0.35); }
.mb-cover.is-open { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--site) 85%, #fff) 0 10px, var(--site) 10px 20px); }
.mb-day { font-size: 1.35rem; font-weight: 800; line-height: 1.1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.mb-time { font-size: 1.05rem; font-weight: 700; margin-top: 0.15rem; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.mb-strip { position: absolute; left: 0; bottom: 14px; max-width: 88%; padding: 0.15rem 0.6rem 0.15rem 0.75rem; background: #fff; color: #111; font-weight: 800; font-size: 0.82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 4px solid var(--site); }
.mb-tag { position: absolute; top: 0.55rem; right: 0.55rem; border: 0; border-radius: 999px; padding: 0.1rem 0.55rem; font: inherit; font-size: 0.72rem; font-weight: 700;
  background: rgba(0, 0, 0, 0.32); color: #fff; }
.mb-card-sub .mb-drop { margin-left: auto; font-weight: 700; }
.mb-asked { margin-left: auto; color: #b45f06; font-weight: 700; }
.mb-card-sub { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-height: 1.6rem; }
.mybrew [data-mb][hidden] { display: none; }

/* The red bell beside Rota in the menus while requests are waiting */
.req-bell { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 0.35rem; border-radius: 50%; background: var(--bad); color: #fff;
  vertical-align: -3px; box-shadow: 0 0 0 2px var(--surface); animation: req-ring 2.4s ease-in-out 1; }
.req-bell[hidden] { display: none; }
.req-bell svg { width: 11px; height: 11px; }
.tabbar a { position: relative; }
.tabbar .req-bell { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; }
@keyframes req-ring { 0%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } 50% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .req-bell { animation: none; } }

/* My Atlas → My tasks */
.mb-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.mb-task { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.mb-task-icon { flex-shrink: 0; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--surface-2); font-size: 1.2rem; }
.mb-task-text { flex: 1; min-width: 0; }
.mb-task-text strong { display: block; font-size: 0.95rem; }
.mb-task-text small { display: block; color: var(--muted); font-size: 0.8rem; }
.mb-tasks-done { margin: 0; color: var(--good); font-weight: 600; }

/* Rota: undo the last unpublished change */
.undo-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.75rem; padding: 0.45rem 0.6rem 0.45rem 0.9rem;
  border-radius: 10px; background: var(--surface); border: 1px dashed var(--border); font-size: 0.9rem; }
.undo-bar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* With Trail's tiles down the side, its own tabs aren't needed. */
.hub-main .trail-tabs { display: none; }

/* Invoices: Xero */
.xero-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border); }
.xero-bar.is-sent { border-color: color-mix(in srgb, #13b5ea 45%, var(--border)); background: color-mix(in srgb, #13b5ea 7%, var(--surface)); }
.xero-bar small { flex-basis: 100%; }
.xero-sites { width: 100%; margin: 0.4rem 0 0.8rem; }
.xero-sites select { width: 100%; }

/* People: recruitment, training matrix, performance and areas */
.pp-job-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; }
.pp-job-head h2 { margin-bottom: 0.15rem; }
.pp-job-head .actions { display: flex; gap: 0.4rem; align-items: center; }
.pp-cands td small, .pp-perf td small, .pp-matrix th small { display: block; font-weight: 400; }
.pp-cands tr.is-out td { opacity: 0.55; }
.pp-cands select { width: auto; min-width: 8.5rem; }
.pp-matrix th, .pp-matrix td { white-space: nowrap; }
.pp-matrix thead th { vertical-align: bottom; text-transform: none; letter-spacing: 0; }
.pp-matrix .link-btn { color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.92rem; text-align: left; }
.pp-matrix .link-btn:hover { color: var(--brand); text-decoration: underline; }
.pp-matrix tbody th { text-align: left; }
.pp-matrix td { text-align: center; padding: 0.3rem; }
.pp-cell { width: 100%; min-width: 6.5rem; padding: 0.35rem 0.5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font: inherit; font-size: 0.85rem; cursor: pointer; }
.pp-cell:hover { border-color: var(--brand); }
.pp-cell.pp-done, .pp-cell.pp-trained { background: var(--good-soft); color: var(--good); border-color: transparent; font-weight: 600; }
.pp-cell.pp-due_soon, .pp-cell.pp-learning { background: var(--warn-soft); color: var(--warn); border-color: transparent; font-weight: 600; }
.pp-cell.pp-expired { background: var(--bad-soft); color: var(--bad); border-color: transparent; font-weight: 600; }
.pp-areas tfoot th, .pp-areas tfoot td { border-top: 2px solid var(--border); }
.pp-pick { border: 0; padding: 0; margin: 0 0 0.75rem; min-width: 0; }
.pp-pick legend { font-weight: 600; margin-bottom: 0.4rem; font-size: 0.9rem; padding: 0; }
.pp-pick-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.5rem; }
.pp-pick-tools input[type=search] { flex: 1 1 180px; width: auto; }
.pp-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.15rem 0.75rem; max-height: 300px; overflow-y: auto;
  padding: 0.4rem; border: 1px solid var(--border); border-radius: 10px; }
.pp-pick-item { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.35rem 0.4rem; border-radius: 6px; cursor: pointer; line-height: 1.25; text-align: left; }
.pp-pick-item[hidden] { display: none; }
.pp-pick-item:hover { background: var(--surface-2); }
.pp-pick-item input { width: auto; flex: none; margin: 0.15rem 0 0; }
.pp-pick-item small { display: block; font-size: 0.78rem; }
.pp-pick-item:has(input:checked) { background: var(--brand-soft); }
.pp-history { list-style: none; margin: 0; padding: 0; }
.pp-history li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.pp-history small { display: block; }
.pp-stars { color: #e0a100; letter-spacing: 0.05em; white-space: nowrap; }
.pp-stars span { color: var(--border); }
.pp-review h3 { font-size: 0.9rem; margin: 0.9rem 0 0.2rem; color: var(--muted); }
.pp-text { white-space: pre-wrap; margin: 0; }

/* My Atlas: My training */
.mb-training { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.5rem; }
.mb-training li { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.85rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.mb-training li > span:nth-child(2) { flex: 1; min-width: 0; }
.mb-training small { display: block; color: var(--muted); font-size: 0.82rem; }
.mb-training-mark { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-weight: 700;
  background: var(--good-soft); color: var(--good); }
.mb-training-due_soon .mb-training-mark { background: var(--warn-soft); color: var(--warn); }
.mb-training-expired .mb-training-mark { background: var(--bad-soft); color: var(--bad); }
.mb-training-none .mb-training-mark { background: var(--surface-2); color: var(--muted); }
.mb-training-none strong { color: var(--muted); font-weight: 600; }
.mb-training-tag { flex: none; font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 99px; background: var(--warn-soft); color: var(--warn); }
.mb-training-expired .mb-training-tag { background: var(--bad-soft); color: var(--bad); }

/* People → Recruitment: applications from the careers inbox, and a candidate's profile */
.pp-app-list { list-style: none; margin: 0; padding: 0; }
.pp-app { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 0.8rem 0; border-top: 1px solid var(--border); }
.pp-app:first-child { border-top: 0; }
.pp-app-main { min-width: 0; flex: 1; }
.pp-app-main > * { display: block; }
.pp-app-name { color: var(--text); text-decoration: none; font-size: 1.02rem; }
.pp-app-name:hover { color: var(--brand); }
.pp-app-subject { font-weight: 600; font-size: 0.9rem; margin-top: 0.2rem; }
.pp-app-preview { color: var(--muted); font-size: 0.88rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pp-app-actions { display: flex; gap: 0.4rem; flex: none; }
@media (max-width: 640px) { .pp-app { flex-direction: column; align-items: stretch; gap: 0.6rem; } .pp-app-actions { justify-content: flex-start; flex-wrap: wrap; } }
.pp-profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .pp-profile { grid-template-columns: 1fr; } }
.pp-profile textarea { width: 100%; }
.pp-message { max-height: 420px; overflow-y: auto; font-size: 0.93rem; line-height: 1.5; }
.pp-files { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.pp-files li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
.pp-preview iframe { width: 100%; height: 640px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.pp-preview img { max-width: 100%; border-radius: 8px; border: 1px solid var(--border); }
.pp-email { white-space: pre-wrap; font: inherit; font-size: 0.92rem; background: var(--surface-2); padding: 0.8rem 1rem; border-radius: 10px; max-height: 320px; overflow-y: auto; }
.pp-send-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Stock & Ordering → Suppliers: each supplier's tabs */
.sup-table tbody tr { cursor: pointer; }
.sup-table td small { display: block; }
.sup-table tr.is-off td, .sup-days tr.is-off td { opacity: 0.55; }
.sup-form { max-width: 860px; }
.sup-form textarea { width: 100%; }
.sup-sub { font-size: 1rem; margin: 1.2rem 0 0.3rem; }
.sup-switch { padding: 0.8rem 0.9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); margin-bottom: 1rem; }
.sup-switch small { display: block; font-weight: 400; }
.sup-days td, .sup-days th { vertical-align: middle; }
.sup-days input[type=checkbox] { width: auto; transform: scale(1.15); }
.sup-days select { width: auto; min-width: 9rem; }
.sup-refs select, .sup-refs input { width: 100%; }
.sup-actions { display: flex; gap: 0.5rem; justify-content: space-between; flex-wrap: wrap; margin-top: 0.8rem; }
.sup-xero-search { display: flex; gap: 0.4rem; max-width: 520px; }
.sup-xero-search input { flex: 1; }
.sup-xero-results { list-style: none; padding: 0; margin: 0.5rem 0 1rem; max-width: 520px; }
.sup-xero-results li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }

/* Events: enquiries, the conversation, and the calendar */
.ev-status { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 99px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.ev-new { background: var(--accent-soft); color: var(--accent); }
.ev-replied { background: var(--brand-soft); color: var(--brand); }
.ev-provisional { background: var(--warn-soft); color: var(--warn); }
.ev-confirmed { background: var(--good-soft); color: var(--good); }
.ev-completed { background: var(--surface-2); color: var(--text); }
.ev-lost { background: var(--surface-2); color: var(--muted); text-decoration: line-through; }
.ev-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.ev-row a { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.8rem 0.95rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-decoration: none; }
.ev-row a:hover { border-color: var(--brand); }
.ev-row.is-unread a { border-left: 4px solid var(--accent); }
.ev-row.is-unread .ev-top strong { font-weight: 800; }
.ev-dot { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); margin-top: 0.45rem; }
.ev-dot[hidden] { display: none; }
.ev-main { flex: 1; min-width: 0; display: grid; gap: 0.2rem; }
.ev-title { color: var(--muted); }
.ev-meta { font-size: 0.86rem; color: var(--muted); }
.ev-preview { font-size: 0.88rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-side { flex: none; display: grid; justify-items: end; gap: 0.3rem; }
.ev-side small { font-size: 0.75rem; }
.ev-status-pick { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; }
.ev-status-pick select { width: auto; }
.ev-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .ev-layout { grid-template-columns: 1fr; } }
.ev-thread { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.7rem; max-height: 62vh; overflow-y: auto; }
.ev-msg { max-width: 88%; padding: 0.65rem 0.85rem; border-radius: 14px; background: var(--surface-2); }
.ev-msg-out { justify-self: end; background: var(--brand-soft); }
.ev-msg-note { justify-self: center; max-width: 100%; width: 100%; background: var(--warn-soft); border: 1px dashed color-mix(in srgb, var(--warn) 40%, transparent); }
.ev-msg-head { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.8rem; margin-bottom: 0.25rem; }
.ev-msg-subject { font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 0.25rem; }
.ev-msg-body { white-space: pre-wrap; font-size: 0.93rem; line-height: 1.45; overflow-wrap: anywhere; }
.ev-files { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.ev-compose textarea { width: 100%; }
.ev-compose-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }
.ev-details textarea { width: 100%; }
.ev-sub { font-size: 0.95rem; margin: 1rem 0 0.3rem; }
.ev-details-actions { display: flex; justify-content: space-between; margin-top: 0.75rem; }
.cal-nav { display: flex; align-items: center; gap: 0.5rem; }
.cal-month { min-width: 9.5rem; text-align: center; font-size: 1.05rem; }
.cal-legend { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 1rem; }
.cal-head { background: var(--surface-2); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0.4rem 0.5rem; }
.cal-day { background: var(--surface); min-height: 6.5rem; padding: 0.3rem; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.cal-day.is-other { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.cal-day.is-other .cal-num { color: var(--muted); }
.cal-num { font-size: 0.8rem; font-weight: 700; }
.cal-day.is-today .cal-num { background: var(--accent); color: #fff; border-radius: 99px; padding: 0 0.4rem; align-self: flex-start; }
.ev-chip { display: block; font-size: 0.75rem; line-height: 1.25; padding: 0.15rem 0.4rem; border-radius: 6px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-left: 3px solid var(--site, transparent); background: var(--surface-2); color: var(--text); }
.cal-legend .ev-chip { display: inline-block; }
.ev-chip.ev-confirmed { background: var(--good-soft); color: var(--good); }
.ev-chip.ev-provisional { background: var(--warn-soft); color: var(--warn); }
.ev-chip.ev-new, .ev-chip.ev-replied { background: var(--surface-2); color: var(--muted); border-left-style: dashed; font-style: italic; }
.ev-chip.ev-completed { background: var(--surface-2); color: var(--text); }
.cal-agenda { display: none; }
@media (max-width: 700px) { .cal-grid { display: none; } .cal-agenda { display: block; } }
.ev-details .card-head { margin-bottom: 0.4rem; }
.ev-details .ev-filled { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }

/* Events → Enquiries: the summary at the top */
.ev-kpis a.kpi { color: inherit; text-decoration: none; }
.ev-kpis a.kpi:hover { border-color: var(--brand); }
.ev-summary { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .ev-summary { grid-template-columns: minmax(0, 1fr); } }
.ev-summary > section { min-width: 0; }
.ev-mini { list-style: none; margin: 0; padding: 0; }
.ev-mini li + li { border-top: 1px solid var(--border); }
.ev-mini a { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.55rem 0.2rem; color: var(--text); text-decoration: none; }
.ev-mini a:hover strong { color: var(--brand); }
.ev-mini a > span:first-child { min-width: 0; }
.ev-mini small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-wait { flex: none; font-size: 0.78rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 99px; background: var(--warn-soft); color: var(--warn); white-space: nowrap; }
.ev-wait.is-late { background: var(--bad-soft); color: var(--bad); }
.ev-mini-side { flex: none; display: grid; justify-items: end; gap: 0.2rem; }
.ev-mini-side .link-btn { font-size: 0.75rem; color: var(--muted); }
.ev-mini-side .link-btn:hover { color: var(--brand); }
#ev-reply .card-head { margin-bottom: 0.4rem; }
.ev-mkt { list-style: none; margin: 0; padding: 0; max-height: 55vh; overflow-y: auto; }
.ev-mkt li + li { border-top: 1px solid var(--border); }
.ev-mkt small { display: block; margin-top: 0.15rem; }
.ev-reply-state { margin: -0.4rem 0 0.8rem; }

/* Invoices → Confirmed: filters, sorting and sending several to Xero */
.inv-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; }
.inv-filters input[type=search] { flex: 1 1 220px; width: auto; }
.inv-filters select { width: auto; }
.inv-range { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.inv-range input { width: 9.5rem; }
.inv-range input[type=number] { width: 6rem; }
.inv-bulk { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; min-height: 2.2rem; margin-bottom: 0.5rem; }
.th-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; white-space: nowrap; }
.th-sort:hover { color: var(--brand); }
.inv-table th.pick, .inv-table td.pick { width: 2.2rem; text-align: center; }
.inv-table td.pick input, .inv-table th.pick input { width: auto; margin: 0; cursor: pointer; }
.inv-table tr:has(td.pick input:checked) td { background: var(--brand-soft); }
.pp-row-actions { white-space: nowrap; }
.pp-row-actions .btn + .btn { margin-left: 0.3rem; }
.btn.pp-starred { color: #a8761a; border-color: #e2b04a; }
.pp-junk:hover { color: var(--bad); }

/* Rota: labour so far against the week's budget, at the top while planning. */
.labour-track { padding: 0.7rem 1rem; margin-bottom: 0.8rem; border-left: 4px solid var(--border); }
.labour-track.tone-box-good { border-left-color: var(--good); }
.labour-track.tone-box-warn { border-left-color: var(--warn); }
.labour-track.tone-box-bad { border-left-color: var(--bad); }
.lt-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem 1rem; }
.lt-figures > div { display: flex; flex-direction: column; min-width: 0; }
.lt-figures span { font-size: 0.78rem; color: var(--muted); }
.lt-figures small { font-size: 0.78rem; color: var(--muted); }
.lt-figures small.tone-good { color: var(--good); }
.lt-figures small.tone-bad { color: var(--bad); }
.lt-figures strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.lt-bar { height: 8px; border-radius: 99px; background: var(--surface-2); margin-top: 0.55rem; overflow: hidden; }
.lt-fill { display: block; height: 100%; border-radius: inherit; transition: width 0.3s; }
.tone-bg-good { background: var(--good); }
.tone-bg-warn { background: var(--warn); }
.tone-bg-bad { background: var(--bad); }
.lt-sites { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.5rem; font-size: 0.85rem; }
.lt-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--site); margin-right: 0.3rem; }
@media (max-width: 640px) { .lt-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lt-figures strong { font-size: 1.1rem; } }
@media print { .labour-track { display: none; } }