/* The back office's look. It keeps the gym's own brand from nooffdays.com (near-black, bone and a bronze gold,
   Instrument Serif headings and JetBrains Mono for figures and labels) with light working pages, so a day of
   managing the gym is easy on the eyes: only the sidebar is the brand's black. Every colour is defined once,
   here; a tenant's brand may put its own over the tokens marked "brand" (tenancy.ts brandStyle). */

:root {
  /* brand */
  --accent: #b8a47a;          /* the gym's gold: buttons, the current menu item, highlights */
  --accent-ink: #6e5f3c;      /* the gold dark enough to read as text and links on a light page */
  --sidebar: #0e0e0c;         /* the gym's black, for the sidebar only */
  /* surfaces */
  --page: #f6f4ef;
  --surface: #ffffff;
  --surface-2: #faf8f3;
  --line: #e4ded1;
  --line-strong: #cfc7b6;
  /* text */
  --ink: #1a1915;
  --muted: #6c675b;
  --on-sidebar: #ede9e1;
  --on-sidebar-muted: #a8a398;
  --on-accent: #14130f;
  /* states */
  --good: #2e7a4c;
  /* Words on --good (#qa-635): 4.5:1 or more on every theme. */
  --on-good: #fff;
  --good-soft: #e5f2ea;
  --warn: #9a620f;
  --warn-soft: #fbf0dc;
  --bad: #b02a22;
  --bad-soft: #fbe7e5;
  --info-soft: #efeadf;
  /* type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(26, 25, 21, 0.05), 0 2px 8px rgba(26, 25, 21, 0.04);
  --sidebar-width: 236px;
  /* Buttons beside the main one: a bronze tint that stands out from the words around them (Michael, 27 Oct). */
  --button: #efe5cf;
  /* The schedule's Today and its arrows (#vp-573): a yellow and an orange beside the gym's gold, dark words on both. */
  --today: #f2cf63;
  --step: #e3893a;
  --button-hover: #e4d5b2;
  --button-line: #c9b58b;
  --button-ink: #2b2518;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.5 var(--sans); }
a { color: var(--accent-ink); text-underline-offset: 2px; }
a:hover { color: var(--ink); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.2; letter-spacing: 0.005em; margin: 0 0 0.4em; color: var(--ink); }
/* Fraunces at its softest: rounded, not wonky. Other fonts have no such axes and ignore it. */
body { font-variation-settings: "SOFT" 100, "WONK" 0; }
h1 { font-size: 2.1rem; letter-spacing: -0.01em; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 0.8em; }
small, .muted { color: var(--muted); }
.mono, code, kbd { font-family: var(--mono); font-size: 0.86em; }
.eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.2rem 0; }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }

/* ---- The frame: sidebar and page ---------------------------------------------------------------------- */

.frame { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh;
  /* The sidebar's black runs the page's whole height, however long the page. */
  background: linear-gradient(to right, var(--sidebar) var(--sidebar-width), transparent var(--sidebar-width)); }
.sidebar { background: var(--sidebar); color: var(--on-sidebar); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar .brand { display: block; padding: 22px 22px 18px; }
.sidebar .brand img { display: block; max-width: 132px; height: auto; }
.sidebar .brand .name { font-family: var(--serif); font-size: 1.6rem; color: var(--on-sidebar); text-decoration: none; }
.sidebar nav { display: flex; flex-direction: column; padding: 4px 12px; gap: 2px; }
.sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--on-sidebar-muted); text-decoration: none; font-size: 0.95rem; }
.sidebar nav a svg { width: 19px; height: 19px; flex: none; }
.sidebar nav a:hover { color: var(--on-sidebar); background: rgba(237, 233, 225, 0.07); }
.sidebar nav a.on { color: var(--on-accent); background: var(--accent); }
/* What's unread (#vp-309, #vp-330): the same red dot with white words in the menu and on every row and page. */
/* A fixed dark red in every theme (#qa-256): white numbers on it at 6:1, as small text needs 4.5:1. */
.sidebar nav a .nav-count, .count-dot { display: inline-block; flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #a8201a; color: #fff; font-size: 0.72rem; font-weight: 600; line-height: 20px; text-align: center; font-family: inherit; }
.sidebar nav a .nav-count { margin-left: auto; }
.inbox li a > .count-dot { justify-self: start; }
.button .count-dot { margin-left: 6px; vertical-align: 1px; }
/* Messages' search and New message's "To": the box and its button on one line. */
form.form.inline-search, .inline-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.inline-search label { flex: 1 1 260px; margin: 0; }
.inline-search button { flex: none; }
/* A form shown to someone who may not send it (pages/parts.tsx FormFor): as it is, nothing to press. */
fieldset.as-shown { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.as-shown button[type="submit"], fieldset.as-shown button:not([type]) { display: none; }
.inbox.messages .avatar, .inbox.people .avatar, .new-message .avatar { width: 30px; height: 30px; font-size: 0.75rem; }
.new-message .who { display: flex; gap: 8px; align-items: center; }
.new-message + .new-message { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
/* The screen's modes, at the top of the menu (Cian, 28 Oct, #21). */
.sidebar .modes { margin: 0 12px 10px; position: relative; }
.sidebar .modes summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(237, 233, 225, 0.18); color: var(--on-sidebar); font-size: 0.92rem; background: rgba(237, 233, 225, 0.04); }
.sidebar .modes summary::-webkit-details-marker { display: none; }
.sidebar .modes summary:hover, .sidebar .modes[open] summary { border-color: var(--accent); }
.sidebar .modes summary svg { width: 18px; height: 18px; flex: none; }
.sidebar .modes summary .chev { margin-left: auto; width: 15px; height: 15px; color: var(--on-sidebar-muted); transition: transform 0.15s; }
.sidebar .modes[open] summary .chev { transform: rotate(180deg); }
.sidebar .modes-menu { margin-top: 6px; padding: 6px; border-radius: 12px; background: #1b1a17; border: 1px solid rgba(237, 233, 225, 0.12); display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.sidebar .modes-menu form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; }
.sidebar .modes-menu .mode { display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--on-sidebar);
  text-align: left; text-decoration: none; font: inherit; min-height: 0; justify-content: flex-start; cursor: pointer; white-space: normal; }
.sidebar .modes-menu .mode svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.sidebar .modes-menu .mode strong { display: block; font-weight: 600; font-size: 0.9rem; }
.sidebar .modes-menu .mode small { display: block; color: var(--on-sidebar-muted); font-size: 0.76rem; line-height: 1.3; }
.sidebar .modes-menu .mode:hover { background: rgba(237, 233, 225, 0.08); color: var(--on-sidebar); }
.sidebar .modes-menu .mode.on { cursor: default; background: rgba(237, 233, 225, 0.06); }
.sidebar .modes-menu .mode.on svg { color: var(--accent); }
.sidebar .modes-menu select { background: transparent; color: var(--on-sidebar); border-color: rgba(237, 233, 225, 0.25); margin: 4px 0; }
.sidebar .modes-menu .keep { display: flex; gap: 8px; align-items: flex-start; padding: 6px 10px 4px; color: var(--on-sidebar-muted); font-size: 0.74rem; line-height: 1.35; cursor: pointer; }
.sidebar .modes-menu .keep input { margin-top: 2px; flex: none; accent-color: var(--accent); }
.sidebar .who { margin-top: auto; padding: 16px 22px 20px; border-top: 1px solid rgba(237, 233, 225, 0.1); font-size: 0.85rem; }
.sidebar .who strong { display: block; color: var(--on-sidebar); font-weight: 600; }
/* The live dot beside who's signed in (#vp-398); by the logo on a phone, where the foot is hidden. */
.sidebar .who-name { display: flex; align-items: center; gap: 8px; }
.sidebar .live-dot-phone { display: none; }
body.nav-folded .sidebar .who-name { justify-content: center; margin-bottom: 8px; }
.sidebar .who span { color: var(--on-sidebar-muted); }
.sidebar .who .links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
.sidebar .who a, .sidebar .who button.link { color: var(--on-sidebar-muted); font-size: 0.82rem; }
.sidebar .who a:hover, .sidebar .who button.link:hover { color: var(--accent); }

/* Every page in the middle of the screen, not against the menu (Cian, 28 Oct: "Make every page centered"). */
main { padding: 28px clamp(16px, 3vw, 40px) 60px; min-width: 0; max-width: 1400px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-bottom: 18px; }
.pagehead h1 { margin: 0; }
.pagehead .actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
/* The trail back from wherever a person has drilled to (pages/layout.tsx Breadcrumbs), on every page but home. */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; list-style: none; margin: 0 0 14px; padding: 0; font-size: 0.86rem; color: var(--muted); }
.breadcrumb li { display: inline-flex; align-items: center; min-width: 0; }
.breadcrumb li + li::before { content: "›"; margin: 0 9px; color: var(--line-strong); }
.breadcrumb li.back::before { content: none; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb li[aria-current="page"] { color: var(--ink); max-width: 60ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.breadcrumb li.back { margin-left: auto; padding-left: 16px; }
.breadcrumb li.back a { color: var(--accent-ink); font-weight: 500; }

/* A phone or a small tablet: the sidebar becomes a bar on top with a menu that slides sideways. */
@media (max-width: 900px) {
  /* minmax(0, ...): the menu's long row scrolls by itself, and doesn't stretch every page wider than the phone. */
  .frame { grid-template-columns: minmax(0, 1fr); background: none; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; overflow: visible; }
  .sidebar .brand { padding: 12px 16px; }
  .sidebar .brand img { max-width: 76px; }
  .sidebar nav { flex-direction: row; overflow-x: auto; width: 100%; padding: 0 8px 8px; scrollbar-width: none; }
  .sidebar nav a { flex: none; padding: 7px 11px; }
  .sidebar nav a svg { display: none; }
  .sidebar .modes { margin: 0 12px 8px auto; }
  .sidebar .modes-menu { position: absolute; right: 0; z-index: 30; width: 260px; }
  .sidebar .who { display: none; }
  .sidebar .live-dot-phone { display: inline-flex; align-items: center; margin-left: auto; padding-right: 16px; }
  main { padding: 18px 16px 48px; }
  h1 { font-size: 1.7rem; }
}

/* ---- Cards, grids, facts ---------------------------------------------------------------------------- */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; }
.card > h2:first-child, .card > header:first-child { margin-top: 0; }
.card header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 10px; }
.card header h2 { margin: 0; }
.card header .actions { margin-left: auto; display: flex; gap: 8px; }
.stack { display: grid; gap: 18px; }
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.split { display: grid; gap: 18px; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }
/* The dashboard's two columns, each its own stack (Michael, #vp-192): no shared row heights, so no gap under a short
   card. One column when narrower, each card in its old place (its order). */
.dash-cols { display: grid; gap: 18px; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; min-width: 0; }
.dash-col { display: grid; gap: 18px; align-content: start; min-width: 0; }
.dash-card { min-width: 0; }
@media (max-width: 1100px) {
  /* Each card the column's width: started at its own, a card with a long line (Tasks) ran past a phone's edge. */
  .dash-cols { display: flex; flex-direction: column; align-items: stretch; }
  .dash-col { display: contents; }
}

.tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); text-decoration: none; color: inherit; display: block; }
a.tile:hover { border-color: var(--accent); }
.tile .eyebrow { display: block; margin-bottom: 6px; }
.tile .figure { display: block; font-family: var(--serif); font-size: 2.3rem; line-height: 1; }
.tile .sub { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 6px; }
.tile.alert { border-left: 4px solid var(--bad); }
.tile.watch { border-left: 4px solid var(--warn); }

dl.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px 22px; margin: 0; }
dl.fields div { min-width: 0; }
dl.fields dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
dl.fields dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--muted); font-size: 0.9rem; margin: 0 0 10px; }

/* ---- Badges ----------------------------------------------------------------------------------------- */

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font: 500 0.74rem/1.6 var(--mono); letter-spacing: 0.03em; background: var(--info-soft); color: var(--ink); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.badge.good, .badge.s-active, .badge.ai-ready, .badge.ai-done, .badge.allow, .badge.clean, .badge.joined { background: var(--good-soft); color: var(--good); }
.badge.watch, .badge.s-cancelling, .badge.s-trial, .badge.s-starts, .badge.s-past_due, .badge.ai-queued, .badge.ai-running, .badge.ai-starting, .badge.warn, .badge.suspicious, .badge.waiting, .badge.trial, .badge.contacted, .badge.new { background: var(--warn-soft); color: var(--warn); }
.badge.bad, .badge.s-frozen, .badge.s-cancelled, .badge.ai-failed, .badge.deny, .badge.hostile, .badge.lost, .badge.turned_away { background: var(--bad-soft); color: var(--bad); }
.badge.plain::before, .badge.s-no_plan::before { display: none; }
.badge.s-frozen { background: #e6eef6; color: #2c5a85; }
.tag { display: inline-block; padding: 1px 8px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 0.78rem; color: var(--muted); }

/* ---- Tables ----------------------------------------------------------------------------------------- */

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th { text-align: left; font: 500 0.7rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tr.rowlink { cursor: pointer; }
tr.rowlink:hover td, tbody tr:hover td { background: var(--surface-2); }
td.num, th.num { text-align: right; font-family: var(--mono); font-size: 0.86rem; }
td .who { display: flex; align-items: center; gap: 10px; }
.empty { padding: 26px; text-align: center; color: var(--muted); }

/* ---- Filters: a row of tabs with counts, as Gymdesk's ------------------------------------------------- */

.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs a { padding: 9px 14px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 0.92rem; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); border-bottom-color: var(--accent); }
.tabs a .n { font-family: var(--mono); font-size: 0.75rem; margin-left: 6px; color: var(--muted); }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.toolbar form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 360px; }
.toolbar form > * { width: auto; }
.toolbar input[type="search"] { flex: 1 1 240px; }
.toolbar select { flex: 0 1 220px; }

/* ---- Forms and buttons ------------------------------------------------------------------------------ */

form.form { display: grid; gap: 14px; }
.fieldset { display: grid; gap: 14px 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 16px; margin: 0; }
legend { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 0 6px; }
label { display: grid; gap: 5px; font-size: 0.86rem; color: var(--muted); }
label.check { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 0.92rem; }
label.wide, .field-like.wide { grid-column: 1 / -1; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 11px; min-height: 40px; width: 100%; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent-ink); }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(184, 164, 122, 0.3); }
[aria-invalid="true"] { border-color: var(--bad); }
.field-error { color: var(--bad); font-size: 0.82rem; }
.hint { font-size: 0.8rem; color: var(--muted); }
/* A page opened from the staff app (Michael, #vp-378): the page alone. Its own tab bars and trail go too, and the page
   sits close to the window's edges, as a phone's page does. */
.app-view { max-width: 640px; margin: 0 auto; padding: 14px 14px 40px; }
.from-app nav.tabs, .from-app .tabs, .from-app nav.breadcrumb, .from-app .topbar, .from-app .notice-banners, .from-app #toasts, .from-app .toast-more, .from-app .back-link { display: none !important; }

/* The staff app's focused pages (#vp-378): one card, the facts, one big button, the way to the full page. */
.task-page { display: grid; gap: 14px; max-width: 560px; }
.task-card h1 { font-size: 1.6rem; margin: 2px 0 10px; }
.task-card .eyebrow { margin: 0; }
.task-facts { display: grid; gap: 6px; margin: 10px 0 16px; }
.task-facts > div { display: flex; gap: 12px; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.task-facts dt { color: var(--muted); }
.task-facts dd { margin: 0; text-align: right; font-weight: 600; }
.task-words { margin: 6px 0 12px; font-size: 1.05rem; white-space: pre-wrap; }
.task-photo { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; margin: 4px 0 10px; }
.task-do { display: grid; gap: 10px; }
.task-do textarea, .task-do input[type="number"] { width: 100%; box-sizing: border-box; font-size: 1.05rem; }
.task-choice { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.task-choice legend { color: var(--muted); margin-bottom: 4px; }
.task-go { width: 100%; padding: 14px 18px; font-size: 1.1rem; }
.task-also { margin-top: 10px; }
.task-also button { width: 100%; }
.task-done { background: var(--good-soft); color: var(--good); padding: 10px 14px; border-radius: 10px; font-weight: 600; margin: 0 0 10px; }
.task-declined { color: var(--bad, #a8201a); margin: 4px 0; }
.task-full { justify-self: start; font-weight: 600; }
.task-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.task-list > li { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 4px; }
.task-who { display: flex; justify-content: space-between; gap: 12px; font-size: 1.05rem; }
.task-who a { font-weight: 600; }

/* "‹ Back" on a conversation (Michael, R111). */
.back-link { align-self: flex-start; font-weight: 600; text-decoration: none; color: var(--ink); }
.back-link:hover { text-decoration: underline; }
/* A set-up code's news (#vp-355 item 7): "Pixel 8 is set up. Here's a new code for another phone." */
.code-said { background: var(--good-soft); color: var(--good); padding: 10px 14px; border-radius: 10px; font-weight: 600; }

button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 500 0.92rem/1 var(--sans); padding: 10px 16px; min-height: 40px; border-radius: 8px;
  border: 1px solid var(--button-line); background: var(--button); color: var(--button-ink); cursor: pointer; text-decoration: none; white-space: nowrap; }
button:hover, .button:hover { background: var(--button-hover); border-color: var(--accent-ink); color: var(--ink); }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.primary:hover, .button.primary:hover { background: #a99567; border-color: #a99567; }
button.dark, .button.dark { background: var(--ink); border-color: var(--ink); color: var(--on-sidebar); }
button.danger, .button.danger { color: var(--bad); border-color: #e6b3ae; background: #fdf3f2; }
button.danger:hover, .button.danger:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
button.link { background: none; border: 0; padding: 0; min-height: 0; color: var(--accent-ink); text-decoration: underline; font: inherit; }
/* A button of a normal size for a table's row (#vp-118), and a green one for switching something on. */
button.small, .button.small { padding: 6px 11px; min-height: 32px; font-size: 0.84rem; white-space: nowrap; }
button.good, .button.good { color: var(--good); border-color: #a9d3b8; background: var(--good-soft); }
button.good:hover, .button.good:hover { border-color: var(--good); color: var(--good); background: var(--good-soft); }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.inline { display: inline; }
ul.bare { list-style: none; padding: 0; margin: 0; }
ul.bare li { padding: 8px 0; border-bottom: 1px solid var(--line); }
ul.bare li:last-child { border-bottom: 0; }

.error, .notice, .ok { padding: 11px 14px; border-radius: 8px; margin: 0 0 12px; font-size: 0.92rem; }
.error { background: var(--bad-soft); color: var(--bad); }
.notice { background: var(--warn-soft); color: var(--warn); }
.notice.good { background: var(--good-soft); color: var(--good); }
.ok { background: var(--good-soft); color: var(--good); }
.secret { font-family: var(--mono); font-size: 0.9rem; background: var(--surface-2); border: 1px dashed var(--accent); padding: 12px 14px; border-radius: 8px; overflow-wrap: anywhere; }

/* ---- People: photo or initials ------------------------------------------------------------------------- */

.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--info-soft); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center;
  font: 500 0.85rem var(--mono); flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.big { width: 84px; height: 84px; font-size: 1.5rem; }
.avatar.huge { width: 132px; height: 132px; font-size: 2.4rem; }

.profile-head { display: flex; flex-wrap: wrap; gap: 18px 22px; align-items: center; }
.profile-head h1 { margin: 0 0 4px; }
.alerts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.alerts span { font-size: 0.82rem; padding: 3px 9px; border-radius: 6px; background: var(--warn-soft); color: var(--warn); }
.alerts span.bad { background: var(--bad-soft); color: var(--bad); }

/* ---- Bars: attendance by day, made of plain CSS ------------------------------------------------------- */

.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 170px; padding-top: 8px; }
.bars a { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; text-decoration: none; color: var(--muted); font-size: 0.75rem; }
.bars .bar { width: 100%; max-width: 46px; background: var(--accent); border-radius: 6px 6px 2px 2px; min-height: 3px; }
.bars a:hover .bar { background: var(--accent-ink); }
.bars .n { font-family: var(--mono); color: var(--ink); }

/* ---- The front desk screen ---------------------------------------------------------------------------- */

body.frontdesk { background: #f1eee7; }
body.frontdesk main { max-width: none; padding: 20px clamp(16px, 2.5vw, 32px); }
.fd-top { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-bottom: 18px; }
.fd-top img { height: 40px; }
.fd-top .gym { font-family: var(--serif); font-size: 1.7rem; }
.fd-top .clock { font-family: var(--mono); color: var(--muted); }
.fd-top .actions { margin-left: auto; }
.fd-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); align-items: start; }
@media (max-width: 1000px) { .fd-grid { grid-template-columns: 1fr; } }
.arrival { background: var(--surface); border-radius: 14px; border: 1px solid var(--line); border-left: 10px solid var(--good); box-shadow: var(--shadow); padding: 22px 24px; display: flex; gap: 22px; align-items: flex-start; }
.arrival.warn { border-left-color: #d4a03c; }
.arrival.deny { border-left-color: var(--bad); }
.arrival .who h2 { font-size: 2.3rem; margin: 0 0 4px; }
.arrival .verdict { font: 500 0.8rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.arrival.allow .verdict { color: var(--good); }
.arrival.warn .verdict { color: var(--warn); }
.arrival.deny .verdict { color: var(--bad); }
.arrival ul { margin: 10px 0 0; padding-left: 18px; }
.arrival.idle { border-left-color: var(--line-strong); color: var(--muted); }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.feed li:last-child { border-bottom: 0; }
.feed .when { margin-left: auto; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
/* A long name or note wraps, and the time stays inside the card (#qa-129). */
.feed li > a, .feed li > span:not(.dot):not(.when), .feed li > small { min-width: 0; overflow-wrap: anywhere; }
.feed .when { flex-shrink: 0; white-space: nowrap; }
.feed li.new { animation: arrive 1.6s ease-out; }
/* A glow over what's there, never its own background (#vp-570: a card went gold, then see-through, three times). */
@keyframes arrive { from { box-shadow: inset 0 0 0 100vmax rgba(184, 164, 122, 0.3); } to { box-shadow: inset 0 0 0 100vmax rgba(184, 164, 122, 0); } }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--good); }
.dot.warn { background: #d4a03c; }
.dot.deny { background: var(--bad); }
.checkin-search { display: flex; gap: 10px; }
.checkin-search input { font-size: 1.15rem; min-height: 52px; }
.checkin-search button { min-height: 52px; padding: 0 22px; }
.choices { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.choices form { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.choices form button { margin-left: auto; }
/* Before Check in (Cian's Check-in 1): the door's verdict, the plan, and what to have a word about. */
.choices .preview { margin-top: 6px; }
.preview-flags { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.preview-flags li { font-size: 0.8rem; padding: 2px 8px; border-radius: 6px; background: var(--info-soft); color: var(--ink); }
.preview-flags li.warn { background: var(--warn-soft); color: var(--warn); }
.preview-flags li.bad { background: var(--bad-soft); color: var(--bad); }

/* ---- The assistant's chat ------------------------------------------------------------------------------ */

/* Cian, 28 Oct: in the middle of the page, with a premium feel. */
.chat-page { max-width: 820px; width: 100%; margin: 0 auto; gap: 22px; }
.chat-page.fresh { padding-top: clamp(8px, 6vh, 64px); }
.chat-head { display: flex; align-items: center; gap: 14px; }
.chat-head h1 { margin: 0; font-size: 1.9rem; }
.chat-head .muted { font-size: 0.9rem; }
.chat-head > .button { margin-left: auto; }
.chat-head > .button ~ .button { margin-left: 0; }
.chat-page.fresh .chat-head { flex-direction: column; text-align: center; gap: 10px; }
.chat-page.fresh .chat-head h1 { font-size: 2.4rem; }
.chat-mark { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; flex: none; color: var(--on-accent, #fff);
  background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--ink))); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 30%, transparent); }
.chat-mark svg { width: 28px; height: 28px; }
.chat-page.fresh .chat-head .chat-mark { width: 68px; height: 68px; border-radius: 20px; }
.chat-page.fresh .chat-head .chat-mark svg { width: 36px; height: 36px; }
.chat-mark.small { width: 30px; height: 30px; border-radius: 10px; box-shadow: none; }
.chat-mark.small svg { width: 17px; height: 17px; }
.chat-hello { text-align: center; color: var(--muted); max-width: 640px; margin: 0 auto; }
.chat-hello p { margin: 0 0 18px; line-height: 1.55; }
.chat-starters { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; text-align: left; }
.chat-starters button { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  box-shadow: var(--shadow); transition: border-color 0.15s, transform 0.15s; }
.chat-starters button:hover { border-color: var(--accent); transform: translateY(-1px); }
.chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.said { display: grid; gap: 6px; max-width: 86%; }
.said.me { justify-self: end; }
.said.ai { grid-template-columns: auto 1fr; column-gap: 12px; max-width: 100%; }
.said.ai > .chat-mark { grid-row: 1 / span 2; align-self: start; margin-top: 2px; }
.said .who { font: 0.72rem var(--mono); letter-spacing: 0.06em; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.said.me .who { justify-content: flex-end; }
.bubble { padding: 14px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); line-height: 1.55; }
.said.me .bubble { background: var(--ink); color: var(--on-sidebar); border-color: var(--ink); border-bottom-right-radius: 6px; }
.said.ai .bubble { border-top-left-radius: 6px; }
.said.ai[data-state="failed"] .bubble { border-color: #e6b3ae; }
.prose > :last-child { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 20px; margin: 0 0 0.8em; }
.chat-page .chat-ask { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 6px 6px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); position: sticky; bottom: 16px; z-index: 2; }
/* A fresh chat (#qa-658): nothing to scroll past, so the box stays under the suggestions, never over them. */
.chat-page.fresh .chat-ask { position: static; }
.chat-page .chat-ask:focus-within { border-color: var(--accent); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.chat-page .chat-ask input { min-height: 44px; font-size: 1rem; border: 0; background: transparent; box-shadow: none; outline: none; padding: 0; flex: 1; min-width: 0; }
.chat-page .chat-ask button { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; flex: none; }
.chat-page .chat-ask button svg { width: 20px; height: 20px; }
.chat-page .chat-small { font-size: 0.82rem; text-align: center; margin: -8px 0 0; }
.chat-page .convos { margin: 0; }
.thinking { display: flex; align-items: center; gap: 10px; color: var(--muted); margin: 0; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.convos { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

/* ---- The AI server panel ---------------------------------------------------------------------------- */

.gauge { display: inline-block; width: 120px; height: 8px; border-radius: 4px; background: var(--info-soft); overflow: hidden; vertical-align: middle; margin-right: 8px; }
.gauge i { display: block; height: 100%; background: var(--good); }
.gauge.high i { background: #d4a03c; }
.gauge.full i { background: var(--bad); }
.ai-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ai-steps li { display: grid; gap: 2px; padding: 8px 12px; border-left: 3px solid var(--line-strong); background: var(--surface-2); border-radius: 0 8px 8px 0; }
.ai-steps li.step-tool { border-left-color: var(--accent); }
.ai-steps li.step-answer { border-left-color: var(--good); }
.ai-steps li.failed { border-left-color: var(--bad); }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 0; font-size: 0.82rem; }

/* ---- Sign-in ---------------------------------------------------------------------------------------- */

body.plain { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 100vh; padding: 20px 16px; }
.signin { width: min(420px, 100%); }
/* A document to sign on its own link (#vp-592): room to read it on a tablet; the phone's width on a phone. */
.signin:has(.sign-doc) { width: min(760px, 100%); }
.signin .logo { display: block; margin: 0 auto 26px; max-width: 170px; }
.signin h1 { text-align: center; font-size: 1.9rem; }
.signin .card { padding: 26px; }

/* ---- Toasts and the modal, from the shared script (client/ui.ts) ----------------------------------------- */

#toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 50; max-width: min(420px, calc(100vw - 32px)); }
/* Only the notices themselves take a click: the space around them is the page's (a kept notice mustn't block a button). */
#toasts { pointer-events: none; }
#toasts > * { pointer-events: auto; }
/* In the theme (Michael, #vp-567: "cheap and off-theme"): the cards' paper and ink, type and radius, a bar of the theme's
   green down the left for what's done and its red for a problem, and a shadow to lift it off the page. The words across
   the top; the link and Acknowledged in a row underneath; the × top right. */
.toast { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 12px; row-gap: 10px; padding: 12px 14px 12px 16px; border-radius: var(--radius); background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-left: 4px solid var(--good); box-shadow: 0 10px 28px rgba(26, 25, 21, 0.14), 0 2px 6px rgba(26, 25, 21, 0.06); font: 0.92rem/1.45 var(--sans); }
.toast .toast-words { grid-column: 1; grid-row: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* On the till, the notices keep clear of Take payment (bottom right): bottom left, over the products. */
body:has([data-take]) #toasts { right: auto; left: 16px; }
body:has([data-take]) .toast-more { justify-self: start; }
.toast .toast-close { grid-column: 2; grid-row: 1; background: none; border: 0; color: var(--muted); font-size: 1.2rem; line-height: 1; padding: 0 2px; min-height: 0; }
.toast .toast-close:hover { color: var(--ink); }
.toast .toast-actions { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; }
.toast a { color: var(--good); font-weight: 600; white-space: nowrap; }
.toast.error { border-left-color: var(--bad); }
.toast.error a { color: var(--bad); }
/* At phone width (#qa-151): along the bottom edge, smaller, two lines, one at a time (ui.ts), so the page shows. */
@media (max-width: 640px) {
  #toasts, body:has([data-take]) #toasts { left: 8px; right: 8px; bottom: 8px; max-width: none; gap: 6px; }
  .toast { padding: 8px 10px 8px 12px; font-size: 0.86rem; row-gap: 6px; }
  .toast .toast-words { -webkit-line-clamp: 2; }
}
dialog#modal { border: 0; border-radius: 14px; padding: 0; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
dialog#modal::backdrop { background: rgba(14, 14, 12, 0.45); }
.modal-body { padding: 22px 24px; }
.just-changed { animation: arrive 1.6s ease-out 3; }
/* A row of a list (no paper of its own to lose) as before. */
tr.just-changed { animation: arrive-row 1.6s ease-out 3; }
@keyframes arrive-row { from { background: rgba(184, 164, 122, 0.35); } to { background: transparent; } }

/* ---- Viewing as someone ------------------------------------------------------------------------------ */

/* Signed in as someone else (#vp-200 item 7): hard to miss, first on every page, staying in sight, the way back on it. */
form.ghost { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #b02a22; color: #fff; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 0.95rem; font-weight: 600; box-shadow: var(--shadow); }
form.ghost button { margin-left: auto; min-height: 34px; padding: 6px 14px; background: #fff; color: #b02a22; border-color: #fff; font-weight: 700; }
form.ghost button:hover { background: #fbe7e5; color: #b02a22; border-color: #fbe7e5; }

/* A team notice as a banner at the top of the page, newest first, until "Got it" (#vp-195, pages/banners.tsx). */
/* A part a notice or the staff app points to (#problems, #due): a little room above it when the page goes there. */
section[id] { scroll-margin-top: 16px; }
.notice-banners:empty { display: none; }
.notice-banners { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.notice-banner { display: flex; align-items: center; gap: 12px; background: var(--accent); color: var(--on-accent); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
/* The mark is red (Michael, #vp-198): a fixed red, so it reads the same on the gold in every theme. */
.notice-banner .nb-mark { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #b02a22; color: #fff; font-weight: 700; font-size: 1rem; }
.notice-banner .nb-words { flex: 1; min-width: 0; }
/* Face and tap entry down (F-27 part 3): red, on every staff screen until it's back. */
.notice-banner.doors-down { background: var(--bad); color: #fff; }
.notice-banner.doors-down .nb-mark { background: #fff; color: var(--bad); }
.notice-banner.doors-down .nb-words small { color: #fff; }
.notice-banner.doors-down .button { flex: none; background: #fff; color: var(--bad); border-color: #fff; }
.notice-banner .nb-words p { margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
/* Who posted it, when, who it's for: the banner's own dark ink at a normal size, 8:1 on the gold (#vp-198). */
.notice-banner .nb-words small { display: block; margin-top: 2px; font-size: 0.95rem; font-weight: 500; color: var(--on-accent); opacity: 1; }
.notice-banner form { flex: none; margin: 0; }
.notice-banner button { min-height: 36px; padding: 6px 14px; background: var(--sidebar); color: #fff; border: 1px solid var(--sidebar); border-radius: 8px; font-weight: 600; cursor: pointer; }
.notice-banner button:hover { background: #2a2925; }
/* On a phone the words take the whole width and Got it goes under them (Michael, #vp-200 item 1). */
@media (max-width: 640px) {
  .notice-banner { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; }
  .notice-banner .nb-words { flex: 1 1 calc(100% - 40px); }
  .notice-banner form { margin-left: 40px; }
}

/* A person's access switches, in Gymdesk's groups. */
fieldset.access { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 4px; margin: 12px 0; }
fieldset.access .access-group { margin-bottom: 10px; }
fieldset.access h4 { margin: 4px 0; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #6b665c); }
fieldset.access .access-group { display: flex; flex-wrap: wrap; gap: 2px 18px; align-items: baseline; }
fieldset.access .access-group h4 { flex-basis: 100%; }

/* ---- The calendar (Cian: month, week and day, like a real calendar) ---- */
.cal-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cal-title { margin: 0 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg a { padding: 6px 12px; text-decoration: none; color: var(--ink); border-right: 1px solid var(--line); font-size: 0.9rem; }
.seg a:last-child { border-right: 0; }
.seg a.on { background: var(--sidebar); color: var(--on-sidebar); }
/* Back, Today and on (#vp-570): the gym's gold, apart from the views beside them, the arrows drawn as arrows. */
.seg.cal-step { border-color: var(--accent-ink); }
.seg.cal-step a { display: inline-flex; align-items: center; color: #14130f; font-weight: 600; border-right-color: color-mix(in srgb, var(--accent-ink) 45%, transparent); }
/* Today in yellow, the arrows in orange (#vp-573): apart from each other and from the white views. */
.seg.cal-step a:not([data-step]) { background: var(--today); }
.seg.cal-step a[data-step] { background: var(--step); }
.seg.cal-step a:hover { filter: brightness(1.07); color: #14130f; }
.seg.cal-step svg { display: block; }
.cal-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; font-size: 0.85rem; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c); }
.chip.on { background: color-mix(in srgb, var(--c) 14%, white); border-color: var(--c); }
.chip.on::before { background: var(--c); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--accent)); vertical-align: middle; }

.month { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.month-head, .month-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-head span { padding: 6px 8px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.month-day { min-height: 112px; padding: 4px 6px 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.month-week .month-day:last-child { border-right: 0; }
.month-day.other { background: var(--page); }
.month-day.other .num { color: var(--muted); }
.month-day .num { align-self: flex-start; font-size: 0.85rem; text-decoration: none; color: var(--ink); padding: 1px 6px; border-radius: 999px; }
.month-day.today .num { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.ev-line { display: block; font-size: 0.78rem; line-height: 1.35; padding: 1px 5px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 12%, white); border-radius: 3px; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-line .t { color: var(--muted); font-family: var(--mono); font-size: 0.72rem; }
.month-day .more { font-size: 0.75rem; color: var(--accent-ink); }

.timegrid { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow-x: auto; }
.tg-head, .tg-body { display: grid; grid-template-columns: 56px repeat(var(--cols, 7), minmax(110px, 1fr)); }
.tg-head { position: sticky; top: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--line); }
.tg-head span { padding: 8px 6px; font-size: 0.85rem; text-align: center; border-left: 1px solid var(--line); }
.tg-head span:first-child { border-left: 0; }
.tg-head span.today a { background: var(--accent); color: var(--on-accent); padding: 2px 8px; border-radius: 999px; }
.tg-head a { color: var(--ink); text-decoration: none; }
.tg-head .col-name { border-bottom: 3px solid var(--c, var(--accent)); padding-bottom: 2px; }
.tg-hours span { display: block; height: 60px; font-size: 0.72rem; color: var(--muted); text-align: right; padding: 0 6px; transform: translateY(-0.6em); font-family: var(--mono); }
.tg-hours span:first-child { transform: none; }
.tg-col { position: relative; border-left: 1px solid var(--line); height: calc(var(--hours) * 60px); }
.tg-col.today { background: color-mix(in srgb, var(--accent) 5%, white); }
.tg-col .slot { display: block; height: 60px; border-top: 1px solid var(--line); }
.tg-col a.slot:hover { background: color-mix(in srgb, var(--accent) 10%, white); }
.ev { position: absolute; top: calc(var(--top) * 1px); height: calc(var(--h) * 1px - 2px); left: calc(var(--lane) * 100% / var(--of) + 2px); width: calc(100% / var(--of) - 4px);
      border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 16%, white); border-radius: 4px; padding: 2px 5px; overflow: hidden; color: var(--ink); text-decoration: none;
      font-size: 0.78rem; line-height: 1.3; box-shadow: 0 1px 2px rgba(0,0,0,0.06); z-index: 1; }
.ev .t { display: block; font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
.ev strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev small { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev.founding strong::after, .ev-line.founding::after { content: " ★"; color: var(--accent-ink); }
.ev.s-done, .ev-line.s-done { opacity: 0.7; }
.ev.s-no_show strong, .ev-line.s-no_show { text-decoration: line-through; }
.ev:hover { z-index: 3; box-shadow: var(--shadow); }
/* The Calendar's layers (#vp-575): each marked its own way, as the legend says; the bookings keep their colours. */
.layer-chips .chip { --c: var(--ink); }
.layer-chips .chip[data-layer="bookings"] { --c: var(--accent-ink); }
.layer-chips .chip[data-layer="trainers"] { --c: #2f6db5; }
.layer-chips .chip[data-layer="maintenance"] { --c: #6b6253; }
.layer-chips .chip[data-layer="staff"] { --c: #0f766e; }
.layer-chips .chip[data-layer="tours"] { --c: #9333ea; }
.layer-chips { padding-right: 8px; margin-right: 4px; border-right: 1px solid var(--line); }
.li-upkeep { --c: #6b6253; }
.li-shift { --c: #0f766e; }
.li-off { --c: #b45309; }
.li-tour { --c: #9333ea; }
.li-trial { --c: #9333ea; }
.ev-line.li-shift, .ev.li-shift { background: color-mix(in srgb, var(--c) 8%, white); border-left-style: dashed; }
.ev-line.li-off, .ev.li-off { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, white) 0 6px, color-mix(in srgb, var(--c) 6%, white) 6px 12px); }
.ev-line.li-upkeep::before { content: "🔧 "; }
.ev-line.li-upkeep.done { text-decoration: line-through; opacity: 0.7; }
.ev-line.li-trial { border-left-style: double; border-left-width: 4px; }
.ev.li { border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 10%, white); color: var(--ink); text-decoration: none; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; font-size: 0.85rem; color: var(--muted); }
.cal-legend li { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 18px; height: 12px; border-radius: 3px; border-left: 3px solid var(--c, var(--accent-ink)); background: color-mix(in srgb, var(--c, var(--accent-ink)) 14%, white); }
.lg.lg-booking { background: linear-gradient(90deg, #e9d8a6, #b8d8c8, #c9d4f0); border-left-color: var(--accent-ink); }
.lg.lg-trainer { background: linear-gradient(90deg, #2f6db5 0 33%, #c2410c 33% 66%, #15803d 66%); border-left: 0; }
.lg.li-shift { border-left-style: dashed; }
.lg.li-off { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, white) 0 3px, white 3px 6px); }
.tg-allday { display: grid; grid-template-columns: 56px repeat(var(--cols, 7), minmax(110px, 1fr)); border-bottom: 1px solid var(--line); background: var(--page); }
.tg-allday-label { font-size: 0.72rem; color: var(--muted); padding: 6px; text-align: right; font-family: var(--mono); }
.tg-allday-cell { display: grid; gap: 2px; padding: 4px; border-left: 1px solid var(--line); min-width: 0; align-content: start; }
.tg-col.layers { background: var(--page); }
.session-list .li-row td { color: var(--ink); }
.appointment header { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-left: 4px solid var(--c); padding-left: 10px; }
.inline-fields { display: inline-flex; gap: 6px; align-items: center; }
.badge.accent { background: color-mix(in srgb, var(--accent) 22%, white); color: var(--accent-ink); }
@media (max-width: 760px) {
  .month-day { min-height: 70px; }
  .month-day .ev-line { font-size: 0; height: 6px; padding: 0; }
}
.cal-filters select { width: auto; min-width: 12em; }
/* A short booking (15 or 30 minutes) on one line: the time, then who. */
.ev.short { display: flex; gap: 6px; align-items: baseline; padding-top: 1px; padding-bottom: 0; }
.ev.short .t { display: inline; flex: none; }
.ev.short small { display: none; }

/* ---- The dashboard (Cian's batch 3) ---- */
.banner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
.banner h2 { margin-top: 0; }
.rings { display: flex; gap: 18px; flex-wrap: wrap; }
.ring { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--ink); }
.ring circle { fill: none; stroke-width: 10; }
.ring .ring-back { stroke: var(--line); }
.ring .ring-plain { stroke: var(--accent); }
.ring .ring-good { stroke: var(--good); }
.ring .ring-bad { stroke: var(--bad); }
.ring .ring-figure { font-family: var(--mono); font-size: 14px; fill: var(--ink); font-weight: 600; }
.ring .ring-label { font-weight: 600; }
.agenda li { display: grid; grid-template-columns: 72px 14px 1fr; align-items: baseline; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.agenda li small { grid-column: 3; }
.agenda .when { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.agenda li.s-done a { color: var(--muted); }
.agenda li.s-no_show a { text-decoration: line-through; }
a.chip { text-decoration: none; color: var(--ink); }
.tasks { list-style: none; margin: 0; padding: 0; }
.task { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.task:last-child { border-bottom: 0; }
.task .what { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.task .what > a { color: var(--ink); text-decoration: none; font-weight: 500; }
.task .what small { display: block; }
.task.high .what > a::before { content: "● "; color: var(--bad); }
/* High priority, shaded (Michael, R117), as the apps have it; and who's on it. */
.task.high { background: var(--bad-soft, #fbe7e5); border-radius: 10px; padding-left: 8px; padding-right: 8px; }
.task .taken-by { display: flex; align-items: center; gap: 10px; color: var(--good); font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.task .take button { padding: 4px 12px; font-size: 0.9rem; }
.task.done .what > a { text-decoration: line-through; color: var(--muted); }
.task .tick { width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 6px; border: 2px solid var(--line-strong); background: var(--surface); color: var(--good); font-weight: 700; line-height: 1; flex: none; }
.task .tick:hover { border-color: var(--good); }
.task .due { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.task .due.late { color: var(--bad); font-weight: 600; }
.team-notice { margin: 0 0 10px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--info-soft); border-radius: 6px; }
.team-notice p { margin: 0 0 4px; }
.milestones li { padding: 5px 0; }
.milestones li.urgent a { font-weight: 600; }
.milestones .icon { display: inline-block; width: 1.4em; }
@media (max-width: 900px) { .banner { grid-template-columns: 1fr; } }

/* ---- Attendance and member data charts (Cian's batch 4) ---- */
svg.chart { width: 100%; height: auto; display: block; }
svg.chart .grid { stroke: var(--line); stroke-width: 1; }
svg.chart .tick { font-size: 11px; fill: var(--muted); font-family: var(--mono); }
svg.chart rect.b1 { fill: var(--accent); }
svg.chart rect.b2 { fill: #8a7f68; }
svg.chart rect.good { fill: var(--good); }
svg.chart rect.bad { fill: var(--bad); }
svg.chart .trend { fill: none; stroke-width: 2; stroke-dasharray: 5 4; }
svg.chart .trend.b1 { stroke: #6e5f3c; }
svg.chart .trend.b2 { stroke: #3d382c; }
svg.chart .trend.good { stroke: #1d5233; }
svg.chart .trend.bad { stroke: #7a1d18; }
svg.chart .line { fill: none; stroke: var(--accent-ink); stroke-width: 2.5; }
svg.chart .dot { fill: var(--accent-ink); }
.legend { font-size: 0.8rem; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.legend .key { display: inline-block; width: 12px; height: 10px; border-radius: 2px; }
.legend .key.b1 { background: var(--accent); } .legend .key.b2 { background: #8a7f68; }
.legend .key.good { background: var(--good); } .legend .key.bad { background: var(--bad); }
.legend .key.trend { height: 0; border-top: 2px dashed #6e5f3c; border-radius: 0; }
.heat { display: grid; grid-template-columns: 34px repeat(var(--cols), minmax(14px, 1fr)); gap: 2px; font-size: 0.7rem; }
.heat .hh { color: var(--muted); text-align: center; font-family: var(--mono); }
.heat .dd { color: var(--muted); align-self: center; }
.heat .cell { aspect-ratio: 1.3; border-radius: 3px; background: color-mix(in srgb, var(--accent) calc(var(--a) * 100%), var(--page)); }
.hbar { display: inline-block; height: 10px; width: calc(var(--w) * 1.2); max-width: 120px; background: var(--accent); border-radius: 3px; vertical-align: middle; }
.sub.up { color: var(--good); } .sub.down { color: var(--bad); }
.mini-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.mini-chart { margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.mini-chart figcaption { font-size: 0.85rem; font-weight: 600; margin-bottom: 2px; }
table.compare td.better { color: var(--good); font-weight: 600; }
table.compare td.worse { color: var(--bad); font-weight: 600; }
details.add-test summary { cursor: pointer; color: var(--accent-ink); font-weight: 500; margin: 6px 0; }
.cal-bar form input[type="date"], .pagehead form input[type="date"] { width: auto; }
.cal-bar form { flex-wrap: nowrap; }

/* ---- Marketing (Cian's batch 5) ---- */
nav.tabs.sub { font-size: 0.9rem; margin-top: -6px; }
.badge.heat-hot { background: var(--bad-soft); color: var(--bad); margin-left: 6px; }
.badge.heat-warm { background: var(--warn-soft); color: var(--warn); margin-left: 6px; }
.badge.heat-cold { background: var(--info-soft); color: var(--muted); margin-left: 6px; }
/* Why a lead is hot, warm or cold (#vp-187 item 6): a line in the list, and its story on the lead's page. */
small.heat-why { display: block; color: var(--muted); font-size: 0.8rem; line-height: 1.35; margin-top: 2px; min-width: 15em; max-width: 24em; }
small.heat-why.heat-hot { color: var(--bad); }
.heat-why-box { margin: 12px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.heat-why-box > p { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.heat-why-box > p .badge { margin-left: 0; }
.heat-steps { margin: 0; display: grid; gap: 4px; }
.heat-steps li { display: grid; grid-template-columns: 11.5em 1fr; gap: 10px; font-size: 0.9rem; }
.heat-steps time { font-size: 0.82rem; white-space: nowrap; }
@media (max-width: 560px) { .heat-steps li { grid-template-columns: 1fr; gap: 0; } }
table.funnel tr.total td { font-weight: 600; background: var(--page); }
pre.snippet { white-space: pre-wrap; word-break: break-all; background: var(--page); border: 1px solid var(--line); border-radius: 6px; padding: 8px; font-size: 0.78rem; }
.public-form { max-width: 560px; margin: 0 auto; }
.public-form h1 { font-family: var(--serif); font-weight: 400; }
.public-form .ok { font-size: 1.1rem; }
label.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Messaging and automations (Cian's batch 5) ---- */
.inbox li a { display: grid; grid-template-columns: minmax(160px, 1.2fr) 3fr 130px 80px; gap: 10px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.inbox .who { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inbox li a > .badge { justify-self: start; }
@media (max-width: 760px) { .inbox li a { grid-template-columns: 1fr auto; } .inbox .snippet { grid-column: 1 / -1; } }
/* An on/off setting (#vp-579, pages/parts.tsx Toggle): a slider, grey off, the theme's green on, saved as it's moved. */
.toggles { display: grid; gap: 4px; margin-top: 12px; }
.toggle-row { display: grid; grid-template-columns: minmax(220px, max-content) 1fr; gap: 4px 18px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 500; margin: 0; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.toggle-track { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--line-strong); transition: background 0.15s ease; }
.toggle-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.15s ease; }
.toggle input:checked + .toggle-track { background: var(--good); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(20px); }
.toggle input:focus-visible + .toggle-track { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.toggle-said { font-size: 0.92rem; }
.toggle-row > :not(label, .toggle-said, input, noscript) { grid-column: 1 / -1; order: 9; margin: 4px 0 0; }
@media (max-width: 640px) { .toggle-row { grid-template-columns: 1fr; } }
/* The pay page's line (#ios-343): what it pays, then the amount, apart; on a narrow phone, the amount under it. */
.pay-what { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.pay-what strong { white-space: nowrap; }
/* One thin line between rows (#vp-580): the row's own, not the list's too. */
ul.bare.inbox li { padding: 0; border-bottom: 0; }
ul.bare.inbox li:last-child a { border-bottom: 0; }
/* Messages' list (#vp-580): the name and its pill on one line and where it came in under it, in a column wide enough
   for both; the last message in the space left, two lines at most; the time a narrow column on the right. On a phone,
   one under another: the name, the message, the time. */
.inbox.messages li a { grid-template-columns: minmax(300px, 32%) minmax(0, 1fr) auto auto; grid-template-areas: "who snip when dot"; gap: 6px 18px; align-items: center; padding: 12px 8px; }
.inbox.messages .who { grid-area: who; display: grid; gap: 4px; min-width: 0; }
.inbox.messages .who-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.inbox.messages .who-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.inbox.messages .who-line > :not(.who-name) { flex: none; }
.inbox.messages .who-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-left: 38px; }
.inbox.messages .snippet { grid-area: snip; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.inbox.messages .when { grid-area: when; justify-self: end; }
.inbox.messages li a > :last-child { grid-area: dot; }
@media (max-width: 760px) {
  .inbox.messages li a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who dot" "snip snip" "when when"; }
  .inbox.messages .snippet { grid-column: auto; padding-left: 38px; }
  .inbox.messages .when { justify-self: start; padding-left: 38px; }
}
.inbox li.unread .who { font-weight: 700; }
.inbox .snippet { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox .when { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.thread { display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 78%; padding: 10px 12px; border-radius: 12px; background: var(--page); border: 1px solid var(--line); }
.bubble.out { align-self: flex-end; background: color-mix(in srgb, var(--accent) 14%, white); border-color: color-mix(in srgb, var(--accent) 40%, white); }
.bubble .body { white-space: pre-wrap; margin: 4px 0; }
.bubble small { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.automation { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.flow { display: flex; flex-direction: column; align-items: stretch; max-width: 560px; }
.flow .step { margin: 0; }
.flow .step header { display: flex; justify-content: space-between; align-items: center; }
.flow .step h3 { margin: 0; font-size: 1rem; }
.flow .step .icon { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--info-soft); margin-right: 4px; }
.flow .step.trigger { border-top: 3px solid var(--accent); }
.flow .step.k-email .icon, .flow .step.k-sms .icon { background: #e3e9f6; }
.flow .step.k-wait .icon, .flow .step.k-branch .icon { background: var(--good-soft); }
.flow .step.k-task .icon, .flow .step.k-contact .icon, .flow .step.k-document .icon { background: var(--warn-soft); }
.flow .step.k-push .icon { background: #e3e9f6; }
.flow .step .numbers { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.85rem; color: var(--muted); margin: 4px 0 0; }
.automation-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.automation-stats strong { font-size: 1.2rem; margin-right: 4px; }
.sequence { letter-spacing: 2px; }
.card.template { display: flex; flex-direction: column; gap: 6px; }
.card.template h3 { margin: 0; }
.card.template form { margin-top: auto; }
.flow .step.end { text-align: center; padding: 8px; }
.flow-add { display: flex; flex-direction: column; align-items: center; }
.flow-add .line { width: 2px; height: 14px; background: var(--line-strong); }
.flow-add .add { font-size: 0.85rem; padding: 2px 10px; border: 1px dashed var(--line-strong); border-radius: 999px; text-decoration: none; color: var(--accent-ink); background: var(--surface); }
.flow-add::after { content: ""; width: 2px; height: 14px; background: var(--line-strong); }
.kind-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.kind-picker .button { justify-content: flex-start; text-align: left; white-space: normal; line-height: 1.25; min-height: 48px; }
.kind-picker .icon { flex: none; width: 1.5em; text-align: center; }
@media (max-width: 900px) { .automation { grid-template-columns: 1fr; } }

/* ---- Plans and documents (Cian's batch 6) ---- */
.plan-form details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 6px 16px 14px; margin-bottom: 12px; }
.plan-form summary { cursor: pointer; font-family: var(--serif); font-size: 1.3rem; padding: 6px 0; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 10px; }
.sign-doc { max-width: 760px; margin: 0 auto; }
.doc-body { white-space: pre-wrap; line-height: 1.6; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; background: var(--page); max-height: 55vh; overflow: auto; margin: 10px 0 16px; }
.signature { position: relative; border: 2px dashed var(--line-strong); border-radius: 10px; background: #fff; margin: 8px 0; }
.signature canvas { display: block; width: 100%; height: 180px; touch-action: none; cursor: crosshair; }
.signature .hint { position: absolute; left: 12px; bottom: 8px; pointer-events: none; }
.signature [data-clear] { position: absolute; right: 10px; top: 6px; }
.signed img { max-width: 320px; border-bottom: 1px solid var(--ink); }

/* ---- The point of sale (Cian's batch 7) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.bad { color: var(--bad); }
td.num.bad { font-weight: 600; }
.thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; display: block; }
.product-photo { width: 140px; height: 140px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.till { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .till { grid-template-columns: 1fr; } }
.till-shelf { position: relative; }
.till-shelf .toolbar input { width: 100%; font-size: 1rem; padding: 10px 12px; }
.till-shelf .chips { margin: 10px 0; }
.till-items, .till-variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.till-item { background: var(--surface); border-color: var(--line-strong); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px; text-align: left; padding: 10px 12px; min-height: 76px; border-radius: 10px; white-space: normal; line-height: 1.25; }
.till-item img { width: 100%; height: 76px; object-fit: cover; border-radius: 6px; background: var(--surface-2); margin-bottom: 4px; }
.till-shelf .chip { min-height: 0; padding: 5px 12px; font-weight: 400; }
.till-shelf .chip.on { background: var(--ink); border-color: var(--ink); color: var(--on-sidebar); }
.till-shelf .chip::before { display: none; }
/* The till's products in their category's colour, and each category's chip with its dot, so the eye finds a product
   by colour first (Michael, 27 Oct: "we're getting into a white wash again"). A product with no category is gold. */
.till-item { --tone: #b8a47a; --tone-soft: #f5edda; background: var(--tone-soft); border-color: color-mix(in srgb, var(--tone) 40%, var(--line-strong)); border-top: 4px solid var(--tone); }
.till-item:hover { background: color-mix(in srgb, var(--tone-soft) 75%, var(--tone)); border-color: var(--tone); }
.till-item .muted { color: color-mix(in srgb, var(--tone) 35%, var(--ink)); }
.till-shelf .chip.tone { --c: var(--tone); }
.till-shelf .chip.tone::before { display: inline-block; width: 9px; height: 9px; border: 0; background: var(--tone); }
.tone-0 { --tone: #b8a47a; --tone-soft: #f5edda; }
.tone-1 { --tone: #5f8a6b; --tone-soft: #e5efe6; }
.tone-2 { --tone: #b8674a; --tone-soft: #f6e3da; }
.tone-3 { --tone: #4f7391; --tone-soft: #e1e9f1; }
.tone-4 { --tone: #8a6a9c; --tone-soft: #eee5f2; }
.tone-5 { --tone: #a8892a; --tone-soft: #f3eacd; }
.tone-6 { --tone: #3f8584; --tone-soft: #dcedec; }
.tone-7 { --tone: #9c5a6e; --tone-soft: #f4e2e7; }
ul.moves li { padding: 7px 0; border-top: 1px solid var(--line); }
ul.moves li:first-child { border-top: 0; }
.till-item[hidden] { display: none; }
.till-picker { position: absolute; inset: 0; background: color-mix(in srgb, var(--surface) 96%, transparent); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px; z-index: 2; }
.till-picker[hidden] { display: none; }
.till-typed { margin-top: 14px; }
.till-typed summary { cursor: pointer; color: var(--accent-ink); }
.till-cart { position: sticky; top: 12px; }
.till-who { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.till-who [data-member-chosen] { font-weight: 600; }
.till-lines { width: 100%; }
.till-lines td { padding: 6px 4px; vertical-align: top; }
.till-lines td.qty { white-space: nowrap; }
.till-lines td.qty span { display: inline-block; min-width: 1.6em; text-align: center; }
.till-lines td.qty button { font-size: 1.1rem; text-decoration: none; padding: 0 4px; }
.till-sums { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 8px 0; }
.till-sums dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.till-sums [hidden] { display: none; }
.till-sums .total, .till-sums .to-pay { font-size: 1.25rem; font-weight: 600; border-top: 1px solid var(--line); padding-top: 4px; }
.till-sums.points-used .total { font-size: inherit; font-weight: 400; }
.till-pay { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.till-pay legend { padding: 0 4px; color: var(--muted); font-size: 0.85rem; }
.till-pay [hidden], .till-cart label[hidden] { display: none; }
button.big { width: 100%; min-height: 52px; font-size: 1.05rem; }
.till-done .change { font-size: 1.6rem; margin: 0; }
.mono.big { font-size: 1.3rem; letter-spacing: 0.06em; }
.receipt { max-width: 380px; margin: 24px auto; background: #fff; padding: 20px 22px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.92rem; }
.receipt h1 { font-size: 1.5rem; margin-bottom: 2px; }
.receipt table { width: 100%; margin: 12px 0; }
.receipt td, .receipt th { padding: 3px 0; }
.receipt tfoot td, .receipt tfoot th { border-top: 0; }
.receipt-head { text-align: center; }
.receipt-head p { margin: 2px 0; }
.receipt-foot { text-align: center; margin-top: 14px; }
@media print {
  body { background: #fff; }
  .receipt { border: 0; margin: 0; padding: 0; max-width: none; }
  .no-print { display: none; }
}

/* ---- The schedule's grid and list (Michael, 26 Oct) ---- */
.card-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: start; }
@media (max-width: 1100px) { .card-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.cg-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.cg-day.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cg-day header { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 6px; border-bottom: 1px solid var(--line); }
.cg-day header > a:first-child { text-decoration: none; color: var(--ink); display: flex; align-items: baseline; gap: 6px; }
.cg-day .num { font-family: var(--serif); font-size: 1.5rem; line-height: 1; }
.cg-day .wd { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cg-day.today .num { color: var(--accent-ink); }
.cg-book { text-decoration: none; font-size: 1.2rem; line-height: 1; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--accent-ink); }
.cg-none { font-size: 0.85rem; margin: 4px; }
.cg-card { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border: 1px solid var(--line); border-left: 4px solid var(--c, var(--accent)); border-radius: 6px; text-decoration: none; color: var(--ink); background: var(--surface); font-size: 0.85rem; line-height: 1.3; }
.cg-card:hover { border-color: var(--line-strong); background: var(--surface-2); }
.cg-card .t { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.cg-card small { color: var(--muted); }
.cg-card.past { opacity: 0.5; }
.cg-card.s-cancelled { text-decoration: line-through; opacity: 0.45; }
.session-list tr.sl-day th { text-align: left; font-family: var(--serif); font-size: 1.15rem; text-transform: none; letter-spacing: 0; color: var(--ink); padding-top: 16px; }
.session-list tr.sl-day th a { color: var(--ink); text-decoration: none; }
.session-list tr.s-cancelled td { color: var(--muted); text-decoration: line-through; }
.session-list .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: 1px; }

/* ---- The member list's filters and bulk actions (Michael, batch 10) ---- */
details.filters { padding: 10px 16px; }
details.filters summary { cursor: pointer; font-weight: 500; }
.filter-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 10px; }
.filter-grid select[multiple] { min-height: 6em; }
section.bulk [hidden] { display: none; }
.tags-edit { margin-top: 6px; }
.tags-edit summary { cursor: pointer; font-size: 0.85rem; }
.filter-grid { align-items: start; }
.filter-grid .inline-fields { display: flex; gap: 6px; }
.filter-grid .inline-fields > * { flex: 1 1 0; min-width: 0; width: auto; }
.hbars { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding-top: 10px; }
.hbar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.hbar-col .bar { width: 100%; max-width: 42px; min-height: 2px; background: var(--accent); border-radius: 4px 4px 0 0; }
.hbar-col small { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.good-text { color: var(--good); }
.keypad-box { margin-top: 8px; }
.keypad-box summary { cursor: pointer; font-size: 0.85rem; }
.keypad { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; margin-top: 8px; }
.keypad button { height: 56px; font-size: 1.3rem; border-radius: 50%; }

/* ---- Michael's walk-through of the sandbox (27 Oct) ---- */
/* A filter bar: the search and its dropdowns on one line, each only as wide as it needs. */
form.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.filters input[type="search"] { flex: 1 1 260px; width: auto; max-width: 440px; }
form.filters select { flex: 0 1 auto; width: auto; max-width: 300px; }
.toolbar input[type="search"] { max-width: 560px; }
/* A form on one line: its fields side by side, the button at their foot. */
form.row-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin-bottom: 10px; }
form.row-form label { flex: 1 1 220px; }
form.row-form button { flex: none; }
table.automations td.name { min-width: 14em; }
/* Two dates (or ages) that make a range, each labelled, side by side where there's room. */
fieldset.range { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-content: start; }
fieldset.range > legend { float: left; width: 100%; padding: 0; margin: 0 0 3px; font: inherit; font-size: 0.86rem; letter-spacing: 0; text-transform: none; color: var(--muted); }
fieldset.range > label { flex: 1 1 9.5em; min-width: 0; gap: 2px; font-size: 0.78rem; }
fieldset.range input { min-width: 0; }
@media (min-width: 1000px) { .filter-grid fieldset.range:has(input[type="date"]) { grid-column: span 2; } }
fieldset.wide-range { margin-top: 16px; }
.filter-go { margin-top: 18px; }
/* Tags to check, and new ones to type. */
.tag-picker { display: grid; gap: 10px; }
.tag-chip { position: relative; }
.tag-chip::before { display: none; }
.tag-chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--on-sidebar); }
.tag-chip:has(input:checked)::after { content: "✓"; font-size: 0.8em; }
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Who a bulk action is done to. */
.who-gets { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0 0 14px; }
/* A form's fields, then its buttons a little below them; a bulk action's fields keep their width when only one shows. */
.fieldset + .actions { margin-top: 16px; }
section.bulk .fieldset { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
/* While members or leads are checked, a bar at the foot of the window says how many and leads to what can be done. */
.bulk-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px;
  background: var(--ink); color: var(--on-sidebar); border-radius: 999px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25); font-size: 0.92rem; }
.bulk-bar .button { min-height: 34px; padding: 6px 14px; border-radius: 999px; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* The menu folded down to its icons (Michael, 27 Oct: "more horizontal space"); the person's choice, in a cookie. */
.sidebar .brand-row { display: flex; align-items: center; justify-content: space-between; }
.sidebar .fold { background: transparent; border: 1px solid rgba(237, 233, 225, 0.2); color: var(--on-sidebar-muted); min-height: 0; width: 28px; height: 28px; padding: 0; margin-right: 14px; border-radius: 6px; font-size: 1rem; flex: none; }
.sidebar .fold:hover { color: var(--accent); border-color: var(--accent); background: transparent; }
body.nav-folded { --sidebar-width: 72px; }
body.nav-folded .sidebar .brand-row { flex-direction: column; gap: 10px; padding-bottom: 6px; }
body.nav-folded .sidebar .brand { padding: 16px 10px 0; }
body.nav-folded .sidebar .brand img { max-width: 50px; }
body.nav-folded .sidebar .fold { margin: 0; }
body.nav-folded .sidebar nav { padding: 4px 10px; }
body.nav-folded .sidebar nav a { justify-content: center; padding: 10px 0; }
body.nav-folded .sidebar nav a span { display: none; }
body.nav-folded .sidebar .modes { margin: 0 10px 8px; }
body.nav-folded .sidebar .modes summary { justify-content: center; padding: 9px 0; }
body.nav-folded .sidebar .modes summary .label, body.nav-folded .sidebar .modes summary .chev { display: none; }
body.nav-folded .sidebar .modes-menu { position: fixed; left: calc(var(--sidebar-width) + 8px); top: 96px; width: 260px; z-index: 30; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
body.nav-folded .sidebar .who { padding: 14px 6px 18px; text-align: center; }
body.nav-folded .sidebar .who strong, body.nav-folded .sidebar .who > span { display: none; }
body.nav-folded .sidebar .who .links { flex-direction: column; align-items: center; gap: 8px; margin: 0; }
body.nav-folded .sidebar .who a, body.nav-folded .sidebar .who button.link { font-size: 0.72rem; }
@media (max-width: 900px) { .sidebar .fold { display: none; } body.nav-folded .sidebar nav a span { display: inline; } }
/* Front desk mode: a bar back to the desk on every page but the desk's own screen, big enough for a finger. */
.fd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px clamp(16px, 2.5vw, 32px); background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.fd-bar img { height: 30px; margin-right: 10px; }
/* Only the bar's own buttons: the bell's panel inside it keeps its own look (Michael, 29 Oct: "looks like crap"). */
.fd-bar > a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; text-decoration: none; color: var(--button-ink); background: var(--button); border: 1px solid var(--button-line); font-weight: 500; }
.fd-bar > a:hover { background: var(--button-hover); color: var(--ink); }
.fd-bar > a.on { background: var(--ink); color: var(--on-sidebar); border-color: var(--ink); }
.fd-grid .keypad { grid-template-columns: repeat(3, 76px); gap: 10px; margin-top: 12px; }
.fd-grid .keypad button { height: 64px; font-size: 1.5rem; }
.to-sign li { gap: 12px; }
/* A grid's or stack's items may be narrower than their widest content, so a wide table scrolls inside its card
   instead of pushing the whole page wider than the window (found on a tablet's width, 27 Oct). */
.stack > *, .grid > *, .split > *, .automation > *, .till > * { min-width: 0; }
.card:has(> table), .card:has(> form > table) { overflow-x: auto; }
.option-row { display: flex; gap: 8px; margin-bottom: 8px; }
.option-row input { width: auto; }
form.actions > input[type="search"] { max-width: 560px; }
/* ---- Inventory and maintenance (batch 15) ---- */
.stock-form input.qty { width: 6.5em; min-height: 34px; padding: 5px 8px; text-align: right; }
.due-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.due-row > div:first-child { min-width: 0; flex: 1 1 260px; }
details.inline-details > summary { list-style: none; min-height: 34px; padding: 6px 14px; }
details.inline-details > summary::-webkit-details-marker { display: none; }
details.inline-details[open] { flex-basis: 100%; }
details.inline-details[open] > summary { display: none; }
details.inline-details form { margin-top: 6px; }
.pagehead > .badge { align-self: center; }
/* ---- Reports (batch 16) ---- */
.report-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); align-items: start; }
.card.report header { justify-content: space-between; }
.card.report header a { font-size: 0.88rem; }
.card.report td { padding: 7px 4px; }
.change { font: 500 0.78rem var(--mono); white-space: nowrap; }
.change.up { color: var(--good); }
.change.down { color: var(--bad); }
.change.level { color: var(--muted); }
.report-top { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.report-top ol { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; font-size: 0.9rem; }
.report-top li span.num { float: right; font-family: var(--mono); font-size: 0.84rem; }
.report-links { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.report-links h3 { margin: 0 0 4px; }
.cal-bar .filters input[type="month"] { width: auto; }
/* Any range (Cian's Reports 3): the period, From and To; wraps on a phone. */
.cal-bar form.report-range { flex-wrap: wrap; gap: 8px; align-items: center; }
.report-range label { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-size: 0.9rem; }
.report-range select { width: auto; }
.card.report .figure-note { display: block; font-size: 0.78rem; line-height: 1.3; }
/* Who's in the building now (Cian's Attendance 10). */
.big-figure { margin: 0 0 6px; font-family: var(--serif, serif); font-size: 2.6rem; line-height: 1.1; }
ul.in-now { display: grid; gap: 3px; max-height: 260px; overflow-y: auto; }
/* The Dashboard (Cian's 13 and 14): free slots today, and the change on last month. */
.free-today { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.free-today h3 { margin: 0 0 6px; font-size: 0.95rem; }
.free-today li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.free-today .free-times { display: flex; flex-wrap: wrap; gap: 4px; }
.free-today .chip { font-size: 0.8rem; padding: 2px 8px; }
.tile .sub.vs, .ring .vs { display: block; margin-top: 4px; white-space: normal; }
/* On a phone, a bar of dates wraps, and a week's heat grid scrolls within its card rather than the page. */
@media (max-width: 600px) {
  .cal-bar form { flex-wrap: wrap; }
}
.card .heat { overflow-x: auto; }
/* Progress photos (Cian's Members 20): each day's in a row, the first and latest of a pose side by side. */
.progress-row, .progress-compare { display: flex; flex-wrap: wrap; gap: 12px; }
.progress-compare { margin-bottom: 14px; }
.progress-row figure, .progress-compare figure { margin: 0; }
.progress-compare .pair { display: flex; gap: 8px; }
.progress-photo img { display: block; width: 140px; height: 180px; object-fit: cover; border-radius: 6px; background: var(--line); }
.progress-row figcaption, .progress-compare figcaption { font-size: 0.85rem; color: var(--muted); display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.progress-day h3, .earlier-intake h3 { font-size: 0.95rem; margin: 12px 0 6px; }
/* The rota (Cian's Payroll 7): a week by person, each shift with how it went. */
table.rota td { vertical-align: top; min-width: 110px; }
table.rota th.today { color: var(--accent); }
table.rota tr.mine td:first-child { font-weight: 600; }
.rota-shift { display: grid; gap: 2px; padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: 0.88rem; }
.rota-shift:last-child { border-bottom: 0; }
.pay-period .cal-bar { margin-bottom: 6px; }
/* Outcome goals (Cian's Members 21): each with its progress and chart. */
.targets { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-bottom: 12px; }
.target { border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: grid; gap: 8px; min-width: 0; }
.target header { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.target .meter { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.target .meter span { display: block; height: 100%; background: var(--good, #2f7d4f); }
.target-chart .target-line { stroke: var(--accent); stroke-dasharray: 5 4; stroke-width: 1.5; }
.target-chart .target-dot { fill: var(--accent); }
.bars.weeks.twelve { grid-template-columns: repeat(12, minmax(0, 1fr)); height: 120px; }
.bars.weeks .bar.met { background: var(--good, #2f7d4f); }
/* A member's visits each week (Cian's Members 18): sixteen narrow bars. */
.bars.weeks { grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; height: 140px; }
.bars.weeks > span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; color: var(--muted); font-size: 0.62rem; min-width: 0; }
.bars.weeks > span > span:last-child { white-space: nowrap; overflow: hidden; max-width: 100%; }
/* ---- The search bar on every page, and the assistant's chat beside it (batch 17) ---- */
.topbar { display: flex; gap: 10px; align-items: center; margin: -8px 0 16px; }
.global-search { position: relative; flex: 1 1 auto; max-width: 640px; }
.global-search input { padding-right: 34px; background: var(--surface); }
.global-search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 500 0.72rem var(--mono); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; pointer-events: none; }
.global-search input:focus + kbd { display: none; }
.search-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 12px 32px rgba(14, 14, 12, 0.18); padding: 6px; max-height: min(70vh, 520px); overflow-y: auto; }
.search-results .group-title { font: 500 0.7rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px; }
.search-results .hit { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 7px 10px; border-radius: 7px; text-decoration: none; color: var(--ink); background: none; border: 0; min-height: 0; font: inherit; text-align: left; white-space: normal; cursor: pointer; }
.search-results .hit small { color: var(--muted); }
.search-results .hit:hover, .search-results .hit.on { background: var(--surface-2); outline: 1px solid var(--line-strong); }
.search-results .hit.ask { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; color: var(--accent-ink); font-weight: 500; }
.search-results .hit.ask.suggested { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.search-results p { padding: 8px 10px; margin: 0; }
.ask-button { flex: none; }
.chat-panel { position: fixed; right: 16px; bottom: 16px; z-index: 55; width: min(420px, calc(100vw - 32px)); height: min(620px, calc(100vh - 32px)); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 20px 60px rgba(14, 14, 12, 0.28); overflow: hidden; }
.chat-panel header { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--sidebar); color: var(--on-sidebar); }
.chat-panel header strong { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin-right: auto; }
.chat-panel header a, .chat-panel header .link { color: var(--on-sidebar-muted); font-size: 0.85rem; }
.chat-panel header .close { background: none; border: 0; color: var(--on-sidebar); min-height: 0; padding: 0 4px; font-size: 1.4rem; }
.chat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-body .said { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 0.93rem; line-height: 1.45; overflow-wrap: anywhere; }
.chat-body .said.me { align-self: flex-end; background: var(--ink); color: var(--on-sidebar); white-space: pre-wrap; }
/* An answer in the pop-up reads top to bottom: not the page's two columns (.said.ai), which put each paragraph side by
   side (#vp-187, Charlie's "add a recipe" steps); its lists, paragraphs and code as prose. */
.chat-body .said.ai { display: block; }
.chat-body .said.ai > :first-child { margin-top: 0; }
.chat-body .said.ai > :last-child { margin-bottom: 0; }
.chat-body .said.ai p { margin: 0 0 0.6em; }
.chat-body .said.ai :is(ul, ol) { padding-left: 20px; margin: 0 0 0.6em; }
.chat-body .said.ai li { margin: 2px 0; }
.chat-body .said.ai :is(h1, h2, h3, h4) { font-size: 1rem; margin: 0.4em 0 0.3em; }
.chat-body .said.ai code { font-family: var(--mono); font-size: 0.86em; background: rgba(0, 0, 0, 0.05); padding: 1px 4px; border-radius: 4px; }
.chat-body .said.ai pre { white-space: pre-wrap; background: rgba(0, 0, 0, 0.05); padding: 8px; border-radius: 8px; overflow-x: auto; }
.chat-body .said.ai { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); }
.chat-body .said.ai > :last-child { margin-bottom: 0; }
.chat-body .said.ai.waiting { color: var(--muted); font-style: italic; }
.chat-body .said.ai.failed { border-color: #e6b3ae; }
.chat-body ul.bare li { padding: 6px 0; }
.chat-ask { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.chat-ask textarea { min-height: 44px; resize: none; }
@media (max-width: 900px) { .topbar { margin-top: 0; } .global-search kbd { display: none; } }

/* Orders from the app (batch 23): on the front desk screen and Sell › Orders, each with the one thing to do next. */
ul.orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.order { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 12px; background: var(--surface-2); }
.order.s-requested { border-left-color: var(--warn); background: var(--warn-soft); }
.order.s-ready { border-left-color: var(--good); background: var(--good-soft); }
.order.s-collected, .order.s-cancelled { opacity: 0.65; }
.order-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.order .bare { margin: 6px 0; }
.order .actions { gap: 10px; align-items: center; flex-wrap: wrap; }

/* The notification queue (Michael, 27 Oct): notices stay until dismissed, three at a time, the rest in the bell. */
.toast-more { justify-self: end; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 0.85rem; min-height: 0; box-shadow: var(--shadow); }
.bell-wrap { position: relative; margin-left: auto; }
.topbar .bell-wrap { margin-left: 0; }
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 999px; }
.bell svg { width: 20px; height: 20px; }
.bell-count { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 0.72rem; font-weight: 600; line-height: 20px; text-align: center; }
.notice-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(400px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 10px 32px rgba(26, 25, 21, 0.18); padding: 12px; z-index: 60; }
.notice-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-list li { display: grid; grid-template-columns: 10px 1fr; column-gap: 10px; row-gap: 4px; padding: 10px 10px 10px 8px; border-top: 1px solid var(--line); font-size: 0.9rem; line-height: 1.4; }
.notice-list li a { color: var(--ink); text-decoration: none; }
.notice-list li a:hover { text-decoration: underline; }
.notice-list li:first-child { border-top: 0; }
.notice-list li .dot { margin-top: 6px; }
.notice-list li small { grid-column: 2; }
.notice-list li.unread, .notices li.unread { font-weight: 600; background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.notice-list li small { font-weight: 400; }
.notice-all { display: block; margin-top: 8px; text-align: center; }

/* The till's discount: the amount, and a switch for dollars or a percentage beside it (Michael, 27 Oct). */
.discount-input { display: inline-flex; align-items: stretch; gap: 6px; }
.kind-switch { display: inline-flex; gap: 4px; }
.kind-switch button { min-height: 0; padding: 0 12px; font-weight: 600; background: var(--surface); color: var(--muted); }
.kind-switch button[aria-pressed="true"] { background: var(--ink); color: var(--on-sidebar); border-color: var(--ink); }
/* The codes this customer can have, as the desk goes to type one. */
.code-choices { margin: 4px 0 0; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); list-style: none; }
.code-choices li { padding: 4px 0; }
.code-choices button { text-align: left; }

/* Charlie's robot beside its name: the Ask button, the chat's head, the search bar's "Ask" line. */
.ask-button svg, svg.robot { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.ask-button { display: inline-flex; align-items: center; gap: 6px; }
.chat-panel svg.robot { margin-right: 6px; }
.hit.ask svg.robot { margin-right: 6px; }

/* The till's first question: a member, or someone who isn't one (Michael, 27 Oct). */
.till-who-ask { margin: 0 0 6px; font-weight: 600; }
.who-switch { display: flex; gap: 8px; margin-bottom: 10px; }
.who-switch button { flex: 1; }
.who-switch button[aria-pressed="true"] { background: var(--ink); color: var(--on-sidebar); border-color: var(--ink); }
/* The till's Member / Not a member as tabs, the one in use plain to see (#vp-406 item 2). */
.who-tabs { gap: 6px; border-bottom: 2px solid var(--line); margin-bottom: 14px; }
.who-tabs button { flex: none; background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; margin-bottom: -2px; padding: 10px 18px; font-weight: 600; color: var(--muted); }
.who-tabs button[aria-pressed="true"] { background: none; color: var(--ink); border-bottom-color: var(--accent); }
/* Who's being charged, at the top of the sale. */
.till-member { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 12px; background: var(--surface-2, #f7f3ea); border: 1px solid var(--line); border-radius: 12px; }
.till-member[hidden] { display: none; }
.till-member-who { display: grid; gap: 6px; flex: 1; min-width: 0; }
.till-member-who strong { font-size: 1.2rem; }
.till-member-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
:root[data-theme="lightning"] .who-tabs button[aria-pressed="true"] { color: var(--ink); }

/* The card form, like a shop's checkout (Michael, 27 Oct). */
.card-entry { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); }
.card-entry label { display: grid; gap: 4px; }
.card-number-box { position: relative; display: block; }
.card-number-box input { width: 100%; font-family: var(--mono); letter-spacing: 0.04em; padding-right: 96px; }
.card-brand { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 0.8rem; font-weight: 600; color: var(--accent-ink); }
.card-row { display: grid; grid-template-columns: 1.2fr 0.8fr 1fr; gap: 10px; }
.card-row input { width: 100%; font-family: var(--mono); }
.card-test { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: 0.85rem; }
.card-entry input[aria-invalid="true"] { border-color: var(--bad); }
/* The discount codes on a sale, each with × to take it off (Michael, 28 Oct). */
.applied-codes { margin: 6px 0 0; padding: 0; list-style: none; }
.applied-codes .chip { --c: var(--accent-ink); cursor: default; }
.applied-codes .chip button { margin-left: 6px; min-height: 0; padding: 0 2px; font-size: 1rem; }
.discount-input .link { align-self: center; }

/* Charlie at work (Michael, 28 Oct): the robot breathing, the dots moving, the seconds counting; a dot on the Ask button. */
.charlie-working { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--ink); font-style: normal; }
.charlie-working svg.robot { width: 22px; height: 22px; color: var(--accent-ink); animation: charlie-breathe 1.6s ease-in-out infinite; }
.charlie-working .dots { display: inline-flex; gap: 4px; }
.charlie-working .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); animation: blink 1.2s infinite both; }
.charlie-working .dots i:nth-child(2) { animation-delay: 0.2s; }
.charlie-working .dots i:nth-child(3) { animation-delay: 0.4s; }
.charlie-working small { margin-left: auto; font-variant-numeric: tabular-nums; }
.chat-body .said.ai.waiting { font-style: normal; color: inherit; }
@keyframes charlie-breathe { 0%, 100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.12); opacity: 1; } }
.ask-button.busy { position: relative; }
.ask-button.busy::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-ink); animation: charlie-breathe 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .charlie-working svg.robot, .charlie-working .dots i, .ask-button.busy::after { animation: none; } }
/* Each discount its own line in the till's sums (Michael, 28 Oct). */
.till-discounts { display: contents; }
.till-discounts dd { color: var(--good); }

/* ---- The trainer view (Cian, 28 Oct, #6): a trainer's day on a tablet or phone, made for a thumb ------------------ */
body.trainer-view { background: var(--page); min-height: 100vh; }
.tv-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px clamp(16px, 3vw, 32px); background: var(--sidebar); color: var(--on-sidebar); }
.tv-brand img { height: 30px; display: block; }
.tv-brand span { font-family: var(--serif); font-size: 1.3rem; color: var(--on-sidebar); }
.tv-brand { text-decoration: none; margin-right: 8px; }
.tv-tabs { display: flex; gap: 6px; }
.tv-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: 999px; color: var(--on-sidebar-muted); text-decoration: none; font-weight: 500; }
.tv-tabs a svg { width: 19px; height: 19px; }
.tv-tabs a:hover { color: var(--on-sidebar); background: rgba(237, 233, 225, 0.08); }
.tv-tabs a.on { background: var(--accent); color: var(--on-accent); }
.tv-bar .bell-wrap { margin-left: auto; }
.tv-bar .bell { color: var(--on-sidebar); background: transparent; border-color: rgba(237, 233, 225, 0.25); }
.tv-out { color: var(--on-sidebar-muted); font-size: 0.88rem; text-decoration: none; padding: 8px 4px; }
.tv-out:hover { color: var(--accent); }
.tv-main { max-width: 900px; margin: 0 auto; padding: clamp(16px, 3vw, 32px) 16px 48px; box-sizing: border-box; }
.tv-stack { display: grid; gap: 18px; }
.tv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tv-head h1 { margin: 2px 0; font-size: clamp(2rem, 5vw, 2.6rem); }
.tv-clock { margin: 0; }
.tv-clock button { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 20px; border-radius: 999px; font-size: 1rem; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); }
.tv-clock button.on { border-color: var(--good); background: var(--good-soft); }
.tv-clock .dot.off { background: var(--line-strong); }
.tv-days { display: flex; gap: 8px; }
.tv-days .button { min-height: 48px; min-width: 52px; justify-content: center; font-size: 1.05rem; }
.tv-empty { padding: 40px 16px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: 16px; margin: 0; }
.tv-sessions, .tv-clients, .tv-notes, .tv-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tv-session { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 16px; padding: 18px 20px; min-height: 76px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--line); border-left: 6px solid var(--sched, var(--accent)); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.tv-session:hover, .tv-session:focus-visible { border-color: var(--accent); border-left-color: var(--sched, var(--accent)); }
.tv-session.next { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow); }
.tv-session.gone { opacity: 0.55; }
.tv-time strong { display: block; font: 600 1.15rem var(--mono); }
.tv-time small, .tv-who small { display: block; color: var(--muted); font-size: 0.85rem; }
.tv-who strong { display: block; font-size: 1.15rem; }
.tv-find { min-height: 52px; font-size: 1.05rem; border-radius: 14px; }
.tv-clients { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tv-client { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; min-height: 84px; }
.tv-client:hover { border-color: var(--accent); }
.tv-client .avatar.big { width: 64px; height: 64px; font-size: 1.2rem; }
.tv-client strong { display: block; font-size: 1.08rem; }
.tv-client small { display: block; color: var(--muted); font-size: 0.85rem; }
.tv-back { color: var(--accent-ink); text-decoration: none; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; justify-self: start; }
.tv-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(16px, 3vw, 24px); box-shadow: var(--shadow); }
.tv-card h3 { margin: 0 0 12px; }
.tv-this { border-top: 6px solid var(--sched, var(--accent)); }
.tv-this-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tv-this-head h1 { margin: 2px 0 4px; font-size: clamp(1.7rem, 4.5vw, 2.2rem); }
.tv-mark { display: grid; gap: 14px; margin-top: 16px; }
.tv-mark textarea { font-size: 1rem; min-height: 110px; }
.tv-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tv-actions .big { min-height: 56px; padding: 12px 26px; font-size: 1.05rem; border-radius: 14px; flex: 1 1 160px; justify-content: center; }
.tv-person { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.tv-person h2 { margin: 0 0 8px; font-size: 1.6rem; }
.tv-person .avatar.huge { width: 104px; height: 104px; font-size: 2rem; }
.tv-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--muted); font-size: 0.92rem; }
.tv-figure-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tv-figures dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 8px 0 0; }
.tv-figures dl div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.tv-figures dt { font-size: 0.78rem; color: var(--muted); }
.tv-figures dd { margin: 2px 0 0; font: 600 1.15rem var(--mono); }
.tv-note-add { display: grid; gap: 8px; margin-bottom: 14px; }
.tv-note-add textarea { font-size: 1rem; }
.tv-note-add button { justify-self: start; min-height: 48px; }
.tv-notes li { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.tv-notes li.pinned { background: var(--warn-soft); border-color: #ecd3a6; }
.tv-notes p { margin: 0 0 4px; white-space: pre-wrap; }
.tv-history li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.tv-history li:last-child { border-bottom: 0; }
.tv-history a { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; min-height: 40px; }
.tv-history p { margin: 2px 0 0; white-space: pre-wrap; font-size: 0.92rem; }
/* On a phone the tabs move to the foot of the screen, under the thumb. */
@media (max-width: 640px) {
  .tv-bar { gap: 8px; }
  .tv-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: space-around; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--sidebar); border-top: 1px solid rgba(237, 233, 225, 0.12); }
  .tv-tabs a { flex: 1; justify-content: center; flex-direction: column; gap: 2px; padding: 6px; border-radius: 12px; font-size: 0.8rem; }
  .tv-main { padding-bottom: 96px; }
  .tv-session { grid-template-columns: 80px 1fr; padding: 14px 16px; }
  .tv-time strong { font-size: 1rem; white-space: nowrap; }
  .tv-session .badge { grid-column: 2; justify-self: start; }
  .tv-head { align-items: flex-start; }
}

/* ---- Arrivals (Michael, 28 Oct): the 15-second toast, and the concierge over every front desk screen --------------- */
dialog.concierge { border: 0; padding: 0; background: transparent; width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
dialog.concierge::backdrop { background: rgba(14, 14, 12, 0.55); }
.concierge-card { position: relative; background: var(--surface); border-radius: 20px; border-top: 10px solid var(--good); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); padding: 26px 28px; display: grid; gap: 18px; }
.concierge-card.warn { border-top-color: #d4a03c; }
.concierge-card.deny { border-top-color: var(--bad); }
.concierge-card .arrival { box-shadow: none; border: 0; padding: 0; }
.concierge-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.3rem; justify-content: center; }
.concierge-head { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; padding-right: 40px; }
.concierge-head > div { flex: 1 1 280px; min-width: 0; }
.concierge-head h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 2px 0 6px; }
.concierge-head .verdict { font: 500 0.8rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--good); }
.concierge-card.warn .concierge-head .verdict { color: var(--warn); }
.concierge-card.deny .concierge-head .verdict { color: var(--bad); }
.concierge-head .facts { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0; color: var(--muted); }
/* Who they train with (#vp-355 item 4, Michael: "Trains with Alexis Grant"): on the member's page, their card and the desk's arrival card. */
.trains-with { margin: 6px 0 8px; color: var(--ink); font-weight: 600; }
.concierge-birthday { margin: 8px 0 0; font-weight: 600; color: var(--accent-ink); }
.concierge-asks { margin: 0; padding: 12px 16px 12px 32px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); }
.concierge-card.deny .concierge-asks { background: var(--bad-soft); color: var(--bad); }
.concierge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.concierge-grid > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.concierge-grid strong { font-size: 1.15rem; }
.concierge-grid .owed { background: var(--bad-soft); border-color: #ecc4c0; }
.concierge-grid .owed strong { color: var(--bad); }
.concierge-list ul { margin: 6px 0 0; padding-left: 20px; }
.concierge-list li { margin: 2px 0; }
.concierge-card .actions { margin: 0; flex-wrap: wrap; }
.concierge-card .actions .primary { margin-left: auto; min-width: 120px; }

/* ---- The front desk's staff screen (Michael, 28 Oct): a screen of its own for clocking in, out and breaks -------- */
.staff-clock { display: grid; place-items: start center; padding-top: clamp(8px, 4vh, 40px); }
.staff-clock-card { width: min(460px, 100%); display: grid; gap: 14px; justify-items: center; text-align: center; padding: 28px; }
.staff-clock-card h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.staff-clock-card p { margin: 0; }
.staff-code { display: flex; gap: 8px; width: 100%; }
.staff-code input { flex: 1; min-height: 56px; font-size: 1.6rem; text-align: center; letter-spacing: 0.3em; }
.staff-code button { min-height: 56px; padding: 0 22px; }
.staff-clock-card .keypad { grid-template-columns: repeat(3, 84px); gap: 12px; justify-content: center; }
.staff-clock-card .keypad button { height: 72px; font-size: 1.5rem; }
.staff-clock-actions { display: grid; gap: 10px; width: 100%; }
.staff-clock-card .big { min-height: 64px; font-size: 1.15rem; border-radius: 14px; width: 100%; justify-content: center; }

/* The keypads' ✓ in green (Michael, 28 Oct): the key that goes on. */
.keypad button.go { background: var(--good); border-color: var(--good); color: var(--on-good); }
.keypad button.go:hover { background: #256640; border-color: #256640; color: #fff; }

/* The arrival briefing (Michael, 28 Oct): two columns, what's on and what they have; what we can do for them. */
.concierge-grid .away { background: var(--warn-soft); border-color: #ecd3a6; }
.concierge-grid .away strong { color: var(--warn); }
.brief-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.brief-col { display: grid; gap: 14px; align-content: start; }
.brief-col section { display: grid; gap: 4px; }
.brief-col ul { margin: 2px 0 0; padding-left: 18px; }
.brief-col li { margin: 2px 0; }
.brief-col p { margin: 2px 0 0; }
.brief-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.brief-chips .chip { padding: 4px 10px; border-radius: 999px; background: var(--info-soft); border: 1px solid var(--line); font-size: 0.9rem; }
.brief-suggest { padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.brief-suggest ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.brief-suggest li { display: grid; gap: 6px; }
.brief-do { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.brief-do select, .brief-do input { flex: 1 1 160px; min-width: 0; }
.brief-done { margin: 0; color: var(--good); font-weight: 600; }

/* Who just came in, each with their account at a glance (Michael, 28 Oct). */
.feed li.came-in { align-items: flex-start; }
.feed li.came-in > .dot { margin-top: 7px; }
.feed li.came-in > div { display: grid; gap: 3px; min-width: 0; flex: 1; }
.feed li.came-in .glance { color: var(--muted); font-size: 0.82rem; }
.glance-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.glance-flags:empty { display: none; }

/* A business with one gym: rows don't name it again and again (Michael, 28 Oct). Several, and they do. */
body.one-gym .gym-part { display: none; }

/* The live dot (Michael, 28 Oct): green while this screen's live connection is up, red while it isn't. */
.live-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); align-self: center; }
.live-dot.on { background: #2fa35c; box-shadow: 0 0 0 3px rgba(47, 163, 92, 0.22); }
.live-dot.off { background: var(--bad); box-shadow: 0 0 0 3px rgba(176, 42, 34, 0.18); animation: blink 1.6s infinite ease-in-out; }
.topbar .live-dot { margin: 0 4px; }
.fd-top .live-dot { margin-left: 8px; }
.fd-bar .live-dot, .tv-bar .live-dot { margin-left: auto; }
.fd-bar .live-dot + .bell-wrap, .tv-bar .live-dot + .bell-wrap { margin-left: 8px; }

/* A founding member, known the moment they walk in (Michael, 28 Oct): a big black pill, white letters, the gym's logo. */
.name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.name-row h1, .name-row h2 { margin: 0; }
.founder-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 12px; border-radius: 999px; background: #0e0e0c; color: #fff;
  font: 600 1.05rem var(--sans); letter-spacing: 0.02em; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.founder-logo { display: inline-block; width: 46px; height: 22px; background: var(--logo-on-dark) no-repeat center / contain; flex: none; }
.founder-pill.small { gap: 6px; padding: 3px 10px 3px 7px; font-size: 0.74rem; box-shadow: none; vertical-align: middle; }
.founder-pill.small .founder-logo { width: 28px; height: 13px; }
/* In "Just came in" (Michael, #vp-192, #vp-194): the pill as everywhere else, black with white words and its logo; the
   list's grey (.came-in span:last-child) no longer reaches it. */
.feed li.came-in .founder-pill.small,
.feed li.came-in .founder-pill.small > span { color: #fff; }
.concierge-head .name-row, .arrival .who .name-row { margin: 2px 0 6px; }

/* The card from a name, and what they ask for handed to Charlie (Michael, 28 Oct). */
.card-page { max-width: 1040px; margin: 0 auto; }
.concierge-card.plain { border-top-color: var(--line-strong); }
.concierge-card.plain .concierge-head .verdict { color: var(--muted); }
.concierge-head h2 a { color: inherit; text-decoration: none; }
.arrival .who h2 a { color: inherit; text-decoration: none; }
.queue-note { margin: -6px 0 0; padding: 8px 14px; border-radius: 10px; background: var(--ink); color: var(--on-sidebar); font-weight: 600; font-size: 0.9rem; }
.charlie-ask { padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
.charlie-form { display: grid; gap: 8px; margin: 4px 0 0; }
.charlie-form textarea { font-size: 1rem; min-height: 64px; resize: vertical; }
.charlie-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.charlie-actions .primary { display: inline-flex; align-items: center; gap: 8px; }
.charlie-actions .robot { width: 18px; height: 18px; }
.brief-chips button.chip { cursor: pointer; font: inherit; font-size: 0.88rem; color: var(--ink); }
.brief-chips button.chip:hover { border-color: var(--accent); }
.brief-asked { padding: 12px 14px; border-radius: 12px; background: var(--good-soft); border: 1px solid #bfe0cb; }
.brief-asked ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.brief-asked li { display: grid; gap: 1px; }
.brief-asked small { color: var(--muted); }
.brief-asked li.missed { padding: 6px 8px; margin: 0 -8px; border-radius: 8px; background: var(--warn-soft); }
.brief-asked li.missed small { color: var(--warn); }

/* Members' asks from the app on the orders board (Michael, 28 Oct). */
.ask-words { margin: 4px 0; font-style: italic; }
.orders.asks { margin-bottom: 12px; }
.order.ask.check { border-color: #ecc4c0; background: var(--bad-soft); }
.order.ask.preparing { border-color: #ecd3a6; background: var(--warn-soft); }
.till-order-note { margin: 0 0 12px; font-weight: 600; }
/* An order from the app being charged: its own colour, so it isn't missed (Michael, 28 Oct: "maybe purple"). */
.notice.till-order-note { background: #f1eafc; border: 1px solid #c4b0ea; color: #4a2a85; }

/* Acknowledged (Cian, 28 Oct): a job stays until someone told of it acknowledges it. */
.toast .ack { background: var(--good); border: 1px solid var(--good); color: var(--on-good); min-height: 36px; padding: 6px 14px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.toast .ack:hover { filter: brightness(1.08); color: var(--on-good); }
.notice-list li .ack { grid-column: 2; justify-self: start; margin-top: 4px; background: var(--good); border-color: var(--good); color: var(--on-good); min-height: 28px; padding: 2px 10px; font-size: 0.82rem; }
.toast.brief { opacity: 0.96; }
/* Orders: to charge, then charged to hand over; Completed a day at a time (Michael, 28 Oct). */
.orders-head { margin: 14px 0 6px; font-size: 0.95rem; }
.order.charged { border-left: 4px solid var(--good); }
.done-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.done-head h2 { margin: 0; flex: 1; text-align: center; }
.orders.done .order { opacity: 0.92; }
/* Their order on their card, first thing (Michael, 28 Oct): green when it's ready to hand over, red when it isn't yet. */
.order-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 20px; border-radius: 14px; color: #fff; margin-right: 44px; }
.order-banner > div { display: grid; gap: 2px; }
.order-banner strong { font: 700 1.35rem var(--sans); letter-spacing: 0.01em; }
.order-banner span { font-size: 1.05rem; }
.order-banner.ready { background: #1f8a4c; }
.order-banner.not-ready { background: #c0392b; }
.order-banner-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.order-banner a.banner-link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.order-banner .button, .order-banner button { background: #fff; color: var(--ink); border-color: #fff; font-weight: 600; }

/* The Orders button's count (Michael, 29 Oct: the orders page needs a real way in), and the till's orders strip. */
.orders-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: #c0392b; color: #fff; font-size: 0.8rem; font-weight: 700; }
.orders-count[hidden] { display: none; }
.notice.till-orders { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.notice.till-orders span { flex: 1 1 auto; font-weight: 600; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card-head h2 { margin: 0; }

/* Where they came in, on their card (Michael, 29 Oct): the door's name, big enough to read across the desk. */
.came-in { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 10px 0 0; padding: 8px 14px; border-radius: 12px; background: var(--button); border: 1px solid var(--button-line); }
.came-in .eyebrow { margin: 0; }
.came-in strong { font-size: 1.25rem; }
.came-in span:last-child { color: var(--muted); }
.came-in.by-door { background: #fff4d6; border-color: #e2b53c; }

/* Ready at one of the gym's pick-up points (Michael, 29 Oct): a button each, the one it's waiting at pressed. */
.ready-at { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-right: 6px; }
.ready-at .muted { margin-right: 2px; }
.ready-at button.on { background: #2e7d4f; border-color: #2e7d4f; color: #fff; }

/* The till's discounts and points, behind a button (Michael, 29 Oct). */
.till-extras { margin: 10px 0; }
.till-extras > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--button-line); background: var(--button); color: var(--button-ink); font-weight: 600; cursor: pointer; list-style: none; }
.till-extras > summary::-webkit-details-marker { display: none; }
.till-extras > summary small { font-weight: 500; color: #1f6b40; }
.till-extras > summary small:empty { display: none; }
.till-extras[open] > summary { background: var(--ink); color: var(--on-sidebar); border-color: var(--ink); }
.till-extras[open] > summary small { color: var(--on-sidebar); }
.till-extras > .fieldset { margin-top: 10px; }

/* The desk's search found nobody (Michael, 29 Oct): said under the search, plainly, with the way to sign them up. */
.no-match { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 12px 0; padding: 14px 16px; border-radius: 12px; background: #fff4d6; border: 2px solid #e2b53c; }
.no-match strong { display: block; font-size: 1.1rem; }
.no-match span { color: var(--muted); }
.no-match-close { background: none; border: 0; min-height: 0; padding: 0 4px; font-size: 1.3rem; line-height: 1; color: var(--ink); align-self: flex-start; }

/* Every chat with the assistant, for the managers (Michael, 29 Oct). */
.chat-log { list-style: none; margin: 0; padding: 0; }
.chat-log > li { padding: 12px 10px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.chat-log > li:first-child { border-top: 0; }
.chat-log > li.refused { box-shadow: inset 3px 0 0 var(--bad); }
.chat-log-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.chat-log-q { margin: 0; font-weight: 600; }
.chat-log-a { margin: 0; white-space: pre-wrap; color: var(--ink); }
.chat-log-held { margin: 6px 0 0; white-space: pre-wrap; color: var(--muted); }

/* Joining (Cian, 2 Nov, #1): what's left of the paperwork, on the tablet. */
.to-sign h3 { margin: 14px 0 6px; }
.text-consent { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.text-consent h3 { margin-top: 0; }
.text-consent p { margin: 0 0 10px; }

/* Personal training packages on a member's profile (Cian, 2 Nov, #23). */
.figure-line { margin: 4px 0 10px; }
.figure-line strong { font-size: 1.6rem; margin-right: 4px; }
.inline-details { margin: 4px 0 8px; }
.inline-details summary { display: inline; cursor: pointer; font-size: 0.85rem; color: var(--muted); }

/* The seller's code at Take payment (Cian, 2 Nov, #24). */
.till-code { display: block; margin: 8px 0; font-weight: 600; }
.till-code input { display: block; width: 100%; margin-top: 4px; }

/* ---- Lightning: dark black with lightning bolts (Cian, 2 Nov, #13). A choice, set with a gym's brand in Cpp Studio; ---------
   the page above is the default and stays as it is. The tenant's accent is kept: only the surfaces and words change here,
   and what's drawn light on purpose (a receipt, a signature box) stays light. */
:root[data-theme="lightning"] {
  color-scheme: dark;
  --accent-ink: #dcc99c;
  --sidebar: #050506;
  --page: #0a0a0c;
  --surface: #15151a;
  --surface-2: #1c1c23;
  --line: #2a2a32;
  --line-strong: #3d3d47;
  --ink: #f2f0ea;
  --muted: #a6a39b;
  --good: #4cc08a;
  --on-good: #0d1f15;
  --good-soft: #14291e;
  --warn: #e6b25c;
  --warn-soft: #2e2513;
  --bad: #f0695d;
  --bad-soft: #331816;
  --info-soft: #23232b;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.4);
  --button: #26262f;
  --button-hover: #33333d;
  --button-line: #4b4b56;
  --button-ink: #f2f0ea;
}
:root[data-theme="lightning"] body, :root[data-theme="lightning"] body.frontdesk {
  background-color: var(--page);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='%23ffffff' fill-opacity='.045'%3E%3Cpath d='M170 40 88 212h74l-54 150 158-214h-84l70-108z'/%3E%3Cpath d='M640 90 560 232h60l-40 118 128-172h-68l58-88z'/%3E%3Cpath d='M380 430 276 636h92l-66 200 196-276H394l84-130z'/%3E%3Cpath d='M800 520 742 628h44l-30 88 94-130h-50l42-66z'/%3E%3Cpath d='M92 560 44 650h38l-26 74 80-108H92l36-56z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23b8a47a' stroke-opacity='.16' stroke-width='2'%3E%3Cpath d='M170 40 88 212h74l-54 150 158-214h-84l70-108z'/%3E%3Cpath d='M380 430 276 636h92l-66 200 196-276H394l84-130z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 900px 900px;
  background-attachment: fixed;
}
/* Words on the light notices keep their own dark ink. */
:root[data-theme="lightning"] .order-banner .button, :root[data-theme="lightning"] .order-banner button { color: #14130f; }
:root[data-theme="lightning"] .receipt { color: #1a1915; }
/* What's selected: the ink is light here, so its words go dark. */
:root[data-theme="lightning"] button.dark,
:root[data-theme="lightning"] .button.dark,
:root[data-theme="lightning"] .said.me .bubble,
:root[data-theme="lightning"] .till-shelf .chip.on,
:root[data-theme="lightning"] .tag-chip:has(input:checked),
:root[data-theme="lightning"] .bulk-bar,
:root[data-theme="lightning"] .fd-bar > a.on,
:root[data-theme="lightning"] .chat-body .said.me,
:root[data-theme="lightning"] .kind-switch button[aria-pressed="true"],
:root[data-theme="lightning"] .who-switch button[aria-pressed="true"],
:root[data-theme="lightning"] .queue-note,
:root[data-theme="lightning"] .till-extras[open] > summary { color: var(--page); }
/* What's a pale tint on a light page is a deep one here. */
:root[data-theme="lightning"] button.danger, :root[data-theme="lightning"] .button.danger { background: transparent; border-color: var(--bad); }
:root[data-theme="lightning"] .came-in.by-door, :root[data-theme="lightning"] .no-match { background: #33290f; border-color: #8c6d1f; }
:root[data-theme="lightning"] .tone-0, :root[data-theme="lightning"] .tone-1, :root[data-theme="lightning"] .tone-2, :root[data-theme="lightning"] .tone-3,
:root[data-theme="lightning"] .tone-4, :root[data-theme="lightning"] .tone-5, :root[data-theme="lightning"] .tone-6, :root[data-theme="lightning"] .tone-7,
:root[data-theme="lightning"] .till-item { --tone-soft: color-mix(in srgb, var(--tone) 20%, var(--surface)); }
:root[data-theme="lightning"] .flow .step.k-email .icon, :root[data-theme="lightning"] .flow .step.k-sms .icon, :root[data-theme="lightning"] .flow .step.k-push .icon { background: #23283a; }
:root[data-theme="lightning"] .ev-line { background: color-mix(in srgb, var(--c) 24%, var(--surface)); }
:root[data-theme="lightning"] .tg-col.today { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); }
:root[data-theme="lightning"] .tg-col a.slot:hover { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); }
:root[data-theme="lightning"] .ev { background: color-mix(in srgb, var(--c) 32%, var(--surface)); }
:root[data-theme="lightning"] .badge.accent { background: color-mix(in srgb, var(--accent) 44%, var(--surface)); }
:root[data-theme="lightning"] .bubble.out { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 80%, var(--surface)); }
:root[data-theme="lightning"] .chip.on { background: color-mix(in srgb, var(--c) 30%, var(--surface)); }
:root[data-theme="lightning"] .till-shelf .chip.on { background: var(--ink); }
/* White reads on the light theme's deep green and red, not on the bright ones here. */
:root[data-theme="lightning"] .keypad button.go:not(:hover), :root[data-theme="lightning"] .bell-count { color: var(--page); }
:root[data-theme="lightning"] .till-extras > summary small { color: var(--good); }
:root[data-theme="lightning"] .till-extras[open] > summary small { color: var(--page); }
:root[data-theme="lightning"] svg.chart .trend.b1 { stroke: var(--accent-ink); }
:root[data-theme="lightning"] svg.chart .trend.b2 { stroke: var(--muted); }
:root[data-theme="lightning"] svg.chart .trend.good { stroke: var(--good); }
:root[data-theme="lightning"] svg.chart .trend.bad { stroke: var(--bad); }
:root[data-theme="lightning"] .legend .key.trend { border-top-color: var(--accent-ink); }
@media print {
  :root[data-theme="lightning"] body { background: #fff; color: #1a1915; }
}

/* Billing's charts (Cian, 2 Nov, #8). Their colours are their own, validated together for colour-blind readers in both
   themes: gold and the status colours side by side aren't. The words stay in the ink. */
:root { --viz-green: #2e7a4c; --viz-blue: #3f6fb0; --viz-red: #b02a22; --viz-gold: #a8741a; }
:root[data-theme="lightning"] { --viz-green: #2fa371; --viz-blue: #5f8ae0; --viz-red: #e5533f; --viz-gold: #bc8626; }
.billing-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px 28px; }
.viz { margin: 0; min-width: 0; }
.viz-wide { grid-column: 1 / -1; }
.viz figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 6px; }
.viz .legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 6px; }
.viz .legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.key.viz-green { background: var(--viz-green); } .key.viz-blue { background: var(--viz-blue); } .key.viz-red { background: var(--viz-red); } .key.viz-gold { background: var(--viz-gold); }
svg.chart path.viz-green { fill: var(--viz-green); } svg.chart path.viz-blue { fill: var(--viz-blue); } svg.chart path.viz-red { fill: var(--viz-red); } svg.chart path.viz-gold { fill: var(--viz-gold); }
svg.chart .viz-hit { fill: transparent; }
svg.chart .viz-col:hover .viz-hit { fill: color-mix(in srgb, var(--ink) 7%, transparent); }
svg.chart .tick.now { fill: var(--ink); font-weight: 600; }
/* Months still to come (Cian's Billing 6): a shaded band, its ticks in italics. */
svg.chart .viz-ahead { fill: color-mix(in srgb, var(--ink) 5%, transparent); }
svg.chart .tick.ahead { font-style: italic; }
.viz-table { margin-top: 4px; font-size: 0.85rem; }
.viz-table summary { cursor: pointer; color: var(--muted); }
.viz-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.viz-bars li { display: grid; grid-template-columns: minmax(110px, 200px) 1fr auto; align-items: center; gap: 10px; font-size: 0.9rem; }
.viz-track { height: 14px; display: block; }
.viz-track i { display: block; height: 100%; background: var(--viz-gold); border-radius: 0 4px 4px 0; }
.viz-value { font-family: var(--mono); font-size: 0.86rem; }
.viz svg.chart .tick { font-size: 12px; }
.viz figcaption small { flex-basis: 100%; }
.family-deal { flex-wrap: nowrap; gap: 6px; }
.family-deal select { min-width: 9.5em; }

/* The email builder (Cian, 2 Nov, #10): the blocks beside the email as it will look. */
.eb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: 20px; align-items: start; }
.eb-block { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); padding: 10px 12px; margin-bottom: 10px; }
.eb-block header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.eb-block header strong { margin-right: auto; font-size: 0.92rem; }
.eb-tool { padding: 2px 8px; font-size: 0.82rem; }
.eb-fields { display: grid; gap: 8px; }
.eb-thumb { display: block; max-width: 100%; max-height: 140px; border-radius: 6px; }
.eb-rule { border: 0; border-top: 1px solid var(--line-strong); margin: 6px 0; }
.eb-add { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.eb-preview { position: sticky; top: 16px; }
.eb-preview iframe { display: block; width: 100%; height: calc(100vh - 110px); min-height: 520px; border: 1px solid var(--line); border-radius: var(--radius); background: #f4f2ec; }
@media (max-width: 1040px) { .eb { grid-template-columns: minmax(0, 1fr); } .eb-preview { position: static; } }

/* Personal training (Cian, 2 Nov, #5): a plan's rows, which stack on a phone in the gym. */
.ex-video { display: block; width: 100%; max-height: 420px; border-radius: var(--radius); background: #000; }
.tp-rows { display: grid; gap: 10px; margin-bottom: 10px; }
.tp-row { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(5, minmax(0, 1fr)); gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.tp-row .tp-note { grid-column: 1 / 5; }
.tp-tools { grid-column: 5 / -1; display: flex; align-items: flex-end; justify-content: flex-end; gap: 4px; }
.eb-block header input { flex: 1; min-width: 0; font-weight: 600; }
@media (max-width: 760px) { .tp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tp-row .tp-pick, .tp-row .tp-note, .tp-tools { grid-column: 1 / -1; } }
.tp-about { display: inline-block; margin-top: 4px; font-size: 0.85rem; }
.ex-about h3 { margin: 10px 0 2px; font-size: 1rem; }

/* A tag's own small form, opened from its card (#vp-107). */
.tag-dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); padding: 20px; width: min(560px, calc(100vw - 32px)); box-shadow: var(--shadow); }
.tag-dialog::backdrop { background: rgba(14, 14, 12, 0.45); }
.tag-dialog h2 { margin-top: 0; }

/* A document's questions (F-22 #17): a PAR-Q's yes-or-no ones, and ones answered in words. */
ol.answers { list-style: none; padding-left: 0; margin: 12px 0; }
ol.answers li { margin: 14px 0; }
fieldset.yes-no { border: 0; padding: 0; margin: 0; min-width: 0; }
/* A question reads as words, not as a field's small label. */
fieldset.yes-no legend { padding: 0; margin-bottom: 6px; font: inherit; text-transform: none; letter-spacing: normal; color: var(--ink); }
fieldset.yes-no label.check { display: inline-flex; margin-right: 20px; }
ol.answers label > span:first-child { font: inherit; color: var(--ink); text-transform: none; letter-spacing: normal; }

/* A key or an address on one line, to read and copy (#vp-114): sideways scrolling, never wrapping. */
.copyable { min-width: 0; margin: 10px 0; }
.copyable-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.copyable code.one-line { display: block; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: var(--mono); font-size: 12px; padding: 6px 8px; background: var(--bg-soft, rgba(0, 0, 0, 0.04)); border-radius: 6px; }

/* Tags at phone width (#vp-118): each a small card, its buttons under it. */
@media (max-width: 640px) {
  table.tag-rows thead { display: none; }
  table.tag-rows tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.tag-rows td { display: block; padding: 0; border: 0; }
  table.tag-rows td:last-child { grid-column: 1 / -1; margin-top: 8px; }
  table.tag-rows .row-actions { justify-content: flex-start; }
}

/* In-app messaging (F-22 #5): a conversation, the member's on one side and the gym's on the other. */
ol.chat { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
/* The app messages' own bubbles only, not the assistant's turns nor the lists in its answers (#vp-187). */
ol.chat > li:is(.from-member, .from-gym) { max-width: 80%; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
ol.chat li.from-member { align-self: flex-start; }
ol.chat li.from-gym { align-self: flex-end; background: var(--accent-soft, #f3eee2); }
ol.chat > li p.chat-body { white-space: pre-wrap; margin: 4px 0; padding: 0; text-indent: 0; text-align: left; }
.chat-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chat-photos img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; display: block; }

/* The Nutrition tab's food log against its targets, and meal photos (F-23 items 1 to 3). */
.day-nav { display: inline-flex; gap: 10px; align-items: center; }
.day-nav a { text-decoration: none; font-size: 1.2rem; padding: 0 6px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 20px; margin: 10px 0 14px; }
.meter-words { display: flex; justify-content: space-between; gap: 8px; font-size: 0.86rem; }
.meter { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin-top: 5px; }
.meter > span { display: block; height: 100%; background: var(--good); border-radius: 4px; }
.meter.over > span { background: var(--warn); }
.micros { columns: 2; font-size: 0.86rem; }
.meal-photos > li { display: grid; grid-template-columns: 140px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.meal-photos img { width: 140px; height: 140px; object-fit: cover; border-radius: 8px; }
.meal-photos .reply { margin: 4px 0; }
@media (max-width: 560px) { .meal-photos > li { grid-template-columns: 1fr; } .meal-photos img { width: 100%; height: auto; max-height: 260px; } .micros { columns: 1; } }

/* The recipe library (F-23 item 4): the ingredient picker, and a recipe's photo. */
.ingredients .ingredient { display: grid; grid-template-columns: 1fr 90px minmax(120px, 220px) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ingredients .ingredient .amount { width: 90px; }
.ingredient-search { position: relative; margin-top: 8px; }
.food-results { max-height: 260px; overflow: auto; }
.food-results li { padding: 4px 0; }
.recipe-summary { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.recipe-photo { width: 180px; height: 180px; object-fit: cover; border-radius: 10px; }
/* A nutrition template's meal plan, a day's meal a line (F-23 item 10). */
.template-meals { display: grid; gap: 4px; font-size: 0.9rem; }
@media (max-width: 560px) { .ingredients .ingredient { grid-template-columns: 1fr 70px; } .ingredients .ingredient select { grid-column: 1 / -1; } .ingredients .ingredient .amount { width: 70px; } }

/* The meal plan builder (F-23 item 5): the palette beside the days; each meal a place to drop. */
.plan-builder { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.plan-palette { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.palette-list { margin: 8px 0 16px; }
.palette-item { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; cursor: grab; background: var(--card, #fff); }
.plan-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.plan-meal { border-top: 1px solid var(--line); padding: 6px 0; min-height: 44px; }
.plan-meal h3 { font-size: 0.8rem; margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, #777); }
.plan-meal.over { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 6px; }
.plan-item { display: flex; gap: 6px; align-items: baseline; justify-content: space-between; padding: 2px 0; cursor: grab; }
.plan-item span { flex: 1; }
.plan-add { display: flex; gap: 6px; margin-top: 4px; }
.plan-add select { flex: 1; min-width: 0; }
/* Without dragging (#qa-121): an item's Change form and a found food's Add form open under it. */
.plan-item { flex-wrap: wrap; }
.plan-item .item-edit, .palette-item .food-add { flex-basis: 100%; font-size: 0.85rem; }
.item-edit summary, .food-add summary { cursor: pointer; color: var(--muted, #777); }
.form.compact { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.form.compact label { font-size: 0.8rem; display: grid; gap: 2px; }
.form.compact input, .form.compact select { min-width: 0; width: 100%; }
.form.compact button { grid-column: 1 / -1; justify-self: start; }
.palette-food-search { display: flex; gap: 6px; }
.palette-food-search input { flex: 1; min-width: 0; }
@media (max-width: 760px) { .plan-builder { grid-template-columns: 1fr; } .plan-palette { position: static; max-height: none; } }

/* A grocery list (F-23 item 6). */
.grocery { columns: 2; column-gap: 28px; }
.grocery > div { break-inside: avoid; margin-bottom: 10px; }
.grocery h3 { font-size: 0.86rem; margin: 6px 0 2px; }
.grocery li.ticked { color: var(--muted, #888); text-decoration: line-through; }
@media (max-width: 560px) { .grocery { columns: 1; } }

/* Vitamins and minerals against their targets (F-23 item 8). */
.micros li.short { color: var(--warn); }
.micro-targets { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* What their health app sent (F-23 item 9). */
.health-line { font-size: 0.86rem; color: var(--muted, #666); margin: 4px 0 8px; }

/* A booking's video link (F-23 item 11): a long address wraps rather than widening the card. */
.break { overflow-wrap: anywhere; }
.video-link { margin-top: 12px; }
/* The Nutrition tab's way to their messages (F-23 item 12). */
.tab-links { margin: 0; text-align: right; }
/* Files on a nutrition plan (F-23 item 13). */
.file-list li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--line); }
.file-list li a { overflow-wrap: anywhere; }
.file-list li form { margin-left: auto; }
.file-add { margin-top: 10px; }
/* Charlie's week of meals on the builder (F-23 item 14). */
.draft-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 10px 0; }
.draft-day { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.draft-day h3 { margin: 0; font-size: 0.95rem; }
.draft-day ul { font-size: 0.86rem; }
/* Branded materials to print or save as PDF (F-23 item 16): the gym's fonts and colours on plain white sheets. */
body.print-doc { background: #fff; color: var(--ink); font-family: var(--sans); max-width: 860px; margin: 0 auto; padding: 16px; }
.print-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.print-head { display: flex; gap: 18px; align-items: center; border-bottom: 3px solid var(--accent); padding-bottom: 12px; margin-bottom: 18px; }
.print-head h1 { font-family: var(--serif); margin: 0; font-size: 1.9rem; }
.print-head p { margin: 2px 0 0; }
.print-logo { max-height: 56px; max-width: 200px; }
.print-gym { font-family: var(--serif); font-size: 1.4rem; }
.print-section { margin-bottom: 22px; }
.print-section h2, h2.print-break { font-family: var(--serif); color: var(--accent-ink); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.print-text { white-space: pre-wrap; line-height: 1.5; }
.print-targets { width: auto; border-collapse: collapse; }
.print-targets th, .print-targets td { text-align: left; padding: 3px 24px 3px 0; border: 0; font-family: var(--sans); font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
.print-targets th { font-weight: 600; }
.print-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.print-day { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; break-inside: avoid; }
.print-day h3 { margin: 0 0 4px; font-family: var(--serif); }
.print-day p { margin: 2px 0; font-size: 0.9rem; }
.print-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.print-recipe { break-inside: avoid; }
.print-aisles { columns: 2; column-gap: 24px; }
.print-aisles > div { break-inside: avoid; }
.print-aisles h3 { margin: 8px 0 2px; font-size: 0.95rem; color: var(--accent-ink); }
.print-ticks { list-style: none; padding: 0; margin: 0; }
.print-ticks li::before { content: "☐ "; }
.print-foot { margin-top: 28px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; }
@media (max-width: 560px) { .print-cols { grid-template-columns: 1fr; } .print-aisles { columns: 1; } .print-head { flex-direction: column; align-items: flex-start; } }
@page { margin: 14mm; }
@media print {
  .print-bar { display: none; }
  body.print-doc { padding: 0; max-width: none; }
  .print-break { break-before: page; }
  .print-head, .print-section h2 { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; text-decoration: none; }
}
/* Note templates, check-in forms and a member's check-ins (F-23 item 17). */
.template-list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.template-list summary { cursor: pointer; display: flex; gap: 8px; align-items: center; }
.checkin-form h3 { margin: 0; }
.checkins > li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.checkins p { margin: 0 0 4px; }
.answers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 12px; margin: 0; font-size: 0.9rem; }
.answers > div { display: contents; }
.answers dt { color: var(--muted); }
.answers dd { margin: 0; overflow-wrap: anywhere; }
/* The emails sent (F-24 items 3 and 5): an email as it went, in a frame where nothing runs or loads from elsewhere. */
.email-shown { width: 100%; min-height: 480px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.email-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--sans); font-size: 0.92rem; margin: 0; }
.email-events li { padding: 4px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }

/* What Charlie proposes to do, under his answer (#vp-200 item 6): the back office's words, Do it / Cancel. */
.action-cards { display: grid; gap: 8px; margin-top: 10px; }
.action-card { border: 1px solid var(--line-strong); border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 12px; background: var(--surface); }
.action-card .ac-says { margin: 0 0 8px; line-height: 1.45; }
.action-card .ac-gym { color: var(--muted); }
.action-card .actions { margin: 0; }
/* Charlie's plan (#vp-233): each step as he works through it. A pulsing bronze dot on the one he's on, a green check
   when done, red with why when not, grey when waiting or left out; what he's waiting on, with its choices. */
.charlie-plan { margin-top: 10px; border: 1px solid var(--line-strong); border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 12px; background: var(--surface); }
.plan-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plan-step { display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; align-items: start; line-height: 1.45; }
.plan-step .says, .plan-step .ac-gym { grid-column: 2; }
.plan-step .ac-gym { color: var(--muted); }
.plan-step .says + .ac-gym { margin-top: -2px; }
.plan-step .step-result { grid-column: 2; margin: 2px 0 0; color: var(--muted); font-size: 0.92rem; }
.plan-step.failed .step-result { color: var(--bad); }
.plan-step .mark { grid-row: 1 / span 3; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; line-height: 1; border: 2px solid var(--line-strong); background: var(--surface); color: var(--muted); box-sizing: border-box; }
/* The step in hand (#vp-570: "barely noticeable"): bigger, a gold ring round a dark core, and a wide gold pulse, calm. */
.plan-step.doing .mark { width: 20px; height: 20px; margin-top: 1px; border: 3px solid var(--accent); background: var(--accent-ink); animation: plan-pulse 1.6s ease-out infinite; }
.plan-step.done .mark { border-color: var(--good); background: var(--good); color: var(--on-good); }
.plan-step.failed .mark { border-color: var(--bad); background: var(--bad); color: #fff; }
.plan-step.paused .mark { border-color: var(--warn); color: var(--warn); }
.plan-step.skipped .says, .plan-step.waiting .says { color: var(--muted); }
.plan-step.skipped .says { text-decoration: line-through; text-decoration-color: var(--line-strong); }
@keyframes plan-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 90%, transparent); transform: scale(1); }
  45% { transform: scale(1.12); }
  75% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .plan-step.doing .mark { animation: none; } }
.plan-question { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--warn-soft); }
.plan-question p { margin: 0 0 8px; }
.plan-question .actions { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.plan-question .actions button { white-space: normal; text-align: left; max-width: 100%; height: auto; min-height: 36px; line-height: 1.3; }
.plan-question form.inline { max-width: 100%; }
.plan-question form.inline { display: inline; margin: 0; }
.charlie-plan .plan-stop { margin: 8px 0 0; display: block; }
.plan-step.undone .says { text-decoration: line-through; text-decoration-color: var(--line-strong); color: var(--muted); }
.plan-step.kept .step-result::after { content: " (kept: it can't be undone)"; color: var(--muted); }
.charlie-plan .plan-rolled-back { margin: 8px 0 0; color: var(--muted); font-size: 0.92rem; }
.charlie-plan form.plan-stop button { padding: 0; }
/* Charlie's question for a task, as his own message in the chat (F-26 part C): open in the plan's waiting amber, with
   what can be tapped; answered or no longer needed, quietly. The step waiting on it points down to it. */
.plan-step .step-ask { grid-column: 2; font-size: 0.88rem; color: var(--warn); }
a.step-ask { text-decoration: underline; text-underline-offset: 2px; }
.charlie-asks { border-left: 4px solid var(--warn); padding: 2px 0 2px 10px; }
.charlie-asks.answered, .charlie-asks.withdrawn { border-left-color: var(--line-strong); }
.charlie-asks .ask-text { margin: 0 0 8px; }
.charlie-asks .actions { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.charlie-asks .actions button { white-space: normal; text-align: left; max-width: 100%; height: auto; min-height: 36px; line-height: 1.3; }
.charlie-asks form.inline { display: inline; margin: 0; max-width: 100%; }
.charlie-asks .ask-note, .charlie-asks .ask-answer { margin: 6px 0 0; font-size: 0.9rem; }
.charlie-asks .ask-answer { color: var(--muted); }
.action-card .ac-result { margin: 0; font-size: 0.9rem; color: var(--muted); }
.action-card.done { border-left-color: var(--good); }
.action-card.done .ac-result { color: var(--good); }
.action-card.failed { border-left-color: var(--bad); }
.action-card.failed .ac-result { color: var(--bad); }
.action-card.cancelled, .action-card.lapsed { border-left-color: var(--line-strong); opacity: 0.85; }
.action-card.done .ac-says, .action-card.failed .ac-says, .action-card.cancelled .ac-says, .action-card.lapsed .ac-says { margin-bottom: 4px; }
.action-cards > button { justify-self: start; }
.chat-log-actions { margin: 4px 0 0; font-size: 0.88rem; color: var(--muted); }

/* Time off (#vp-200 item 8): the ask, side by side when there's room; the lists; who's off on the schedule. */
form.time-off-form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); max-width: 640px; }
form.time-off-form .wide { grid-column: 1 / -1; }
.time-off-list { display: grid; gap: 10px; }
.time-off-list > li { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.time-off-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.time-off-list p { margin: 0 0 4px; }
.off-strip { margin: 0; font-size: 0.9rem; color: var(--muted); }
.off-strip strong { color: var(--ink); }
.pay-off { display: block; color: var(--warn); font-size: 0.8rem; }

/* Say it (#vp-216): the microphone in the Ask box, red while it listens. */
form.chat-ask .mic { flex: none; display: grid; place-items: center; width: 40px; min-height: 40px; padding: 0; border-radius: 50%; background: var(--button); border: 1px solid var(--button-line); color: var(--button-ink); cursor: pointer; }
form.chat-ask .mic svg { width: 20px; height: 20px; }
form.chat-ask .mic.on { background: #b02a22; border-color: #b02a22; color: #fff; animation: mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 6px rgba(176, 42, 34, 0.2); } }
@media (prefers-reduced-motion: reduce) { form.chat-ask .mic.on { animation: none; } }

/* A machine's code and what members see (#vp-200 item 12). */
.machine-code { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.machine-code img { border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.machine-photo { display: block; max-width: 100%; max-height: 220px; margin-top: 12px; border-radius: 8px; object-fit: cover; }
.machine-exercises li { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.machine-exercises li > span:first-child { flex: 1; }
.machine-exercises form.inline { margin: 0 0 0 auto; }
/* Codes to print and stick on: two to a row, each with a dashed edge to cut along. */
.code-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.code-label { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 10px; border: 1px dashed #999; border-radius: 6px; break-inside: avoid; page-break-inside: avoid; background: #fff; color: #111; }
.code-label img { width: 200px; height: 200px; }
.code-label strong { font-size: 1.15rem; }
.code-label .code-how { font-size: 0.85rem; color: #444; }
@media (max-width: 560px) { .code-sheet { grid-template-columns: 1fr; } }

/* Charlie's scripts, for superadmins (F-26 part D): each script's inputs and steps, its decision, its earlier versions. */
.card.script.retired { opacity: 0.75; }
.card.script h3 { font-size: 0.78rem; font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 16px 0 6px; }
.script-steps, .script-inputs { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.script-steps code, .script-inputs code { font-family: var(--mono); font-size: 0.82rem; }
.script-steps .script-args { display: block; margin-top: 2px; color: var(--muted); overflow-wrap: anywhere; white-space: pre-wrap; }
.script-review { margin-top: 14px; max-width: 640px; }
.card.script details { margin-top: 12px; }
.script-version { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }

/* Staff photos (#vp-279): beside a name, or big with the forms to change it. */
.photo-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.photo-row .stack { flex: 1 1 260px; }
/* #qa-686: a long email wraps and the "switched off" badge sits under it, so the row's buttons stay in the panel. */
.staff-who { display: flex; gap: 10px; align-items: center; }
.staff-who .avatar { flex: none; font-size: 0.85rem; }
.staff-names { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.staff-table th, .staff-table td { padding-left: 8px; padding-right: 8px; }
.staff-acts { display: flex; flex-wrap: wrap; gap: 4px 10px; white-space: nowrap; }

/* Reports (F-26 part E): a page of rows under Charlie's answer, its pages, and the CSV. */
.report { margin-top: 10px; }
.report-head { margin: 0 0 6px; }
.report-table { font-size: 0.86rem; }
.report-table th { text-transform: capitalize; white-space: nowrap; }
.report-table td { white-space: nowrap; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; }
.report-pages { margin: 8px 0 0; gap: 14px; }
.chat-body .report-table { font-size: 0.8rem; }
/* A message held as it came in from a member's assistant (#docs-83): said before anyone acts on it. */
.chat-held { margin: 4px 0; padding: 6px 10px; border-radius: 6px; background: var(--warn-soft); font-size: 0.9rem; }

/* Kiosk mode (#vp-410): a tablet for the public. The page alone, big and plain: the gym's logo and two big buttons, then
   each form in large type with room for a finger. Staff leave it from the small link at the foot. */
body.kiosk { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.kiosk-view { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 28px 16px 60px; box-sizing: border-box; }
.kiosk-home { display: grid; justify-items: center; gap: 18px; padding-top: 6vh; text-align: center; }
.kiosk-logo { width: min(420px, 80vw); height: auto; }
[data-kiosk-out], [data-mode-out] { cursor: default; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.kiosk-out-box { max-width: 460px; margin: 6vh auto 0; }
.kiosk-name { font-size: clamp(2.4rem, 7vw, 4rem); margin: 0; }
.kiosk-gym { margin: 0; color: var(--muted); font: 500 0.95rem/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.kiosk-choices { display: grid; gap: 18px; width: 100%; max-width: 560px; margin-top: 4vh; }
.kiosk-big { display: grid; gap: 4px; padding: 30px 24px; border-radius: 16px; background: var(--ink); color: var(--page); text-decoration: none; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08); }
button.kiosk-big { width: 100%; border: 0; cursor: pointer; font: inherit; text-align: center; }
.kiosk-choices form { margin: 0; }
.kiosk-big strong { font: 500 clamp(1.6rem, 4.5vw, 2.1rem)/1.15 var(--serif); }
.kiosk-big small { font-size: 1rem; color: var(--page); opacity: 0.75; }
.kiosk-big:hover, .kiosk-big:focus-visible { color: var(--page); background: #000; outline: 3px solid var(--accent); outline-offset: 3px; }
.kiosk .form label { font-size: 1.05rem; }
.kiosk input, .kiosk select, .kiosk textarea { min-height: 52px; font-size: 1.1rem; }
.kiosk button.primary, .kiosk .button.primary { min-height: 56px; font-size: 1.15rem; padding: 12px 26px; }
.kiosk-step { display: grid; gap: 16px; }
.kiosk-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 16px; }
.kiosk-mark { height: 40px; width: auto; }
.kiosk-mark-name { font: 500 1.3rem/1.2 var(--serif); }
.kiosk-again button { font-size: 1rem; padding: 10px 4px; }
/* Back to start (#vp-590): the top corner on later steps, and beside Next on a first step, where Go back would be. */
.kiosk-to-start { justify-self: end; font-size: 1rem; padding: 10px 4px; color: var(--muted); }
.kiosk-first-moves { display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.kiosk-first-moves > a, .kiosk-moves .sign-moves > a:not(.button) { font-size: 1rem; padding: 10px 4px; color: var(--muted); }
.kiosk-title { grid-column: 1 / -1; }
.kiosk-title h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); margin: 0; }
.kiosk-title .eyebrow { margin: 0 0 4px; }
.kiosk-form .fieldset { gap: 14px 18px; }
.kiosk-visit { display: flex; flex-wrap: wrap; gap: 10px 22px; border: 0; padding: 0; margin: 0 0 6px; }
.kiosk-visit legend { font-weight: 600; margin-bottom: 8px; }
.kiosk .check { font-size: 1.05rem; min-height: 44px; }
.kiosk .check input { width: 24px; height: 24px; }
.kiosk-founders { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--accent-soft, #f3ecdc); font-size: 1.05rem; }
.kiosk-founders.gone { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.kiosk-plans { display: grid; gap: 12px; }
.kiosk-plan { color: var(--ink); display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); cursor: pointer; }
.kiosk-plan input { width: 26px; height: 26px; margin-top: 4px; flex: none; }
.kiosk-plan > span { display: grid; gap: 2px; }
.kiosk-plan strong { font: 500 1.35rem/1.2 var(--serif); color: var(--ink); }
.kiosk-plan .kiosk-price { color: var(--ink); }
.kiosk-plan small { color: var(--muted); font-size: 0.95rem; }
.kiosk-plan:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.kiosk-price { font: 500 1.05rem/1.4 var(--mono); }
/* A document's words read as blocks (#vp-416): headings, lists, the form at the end, and where they initial. */
.doc-rich { white-space: normal; }
.doc-rich h3 { font-size: 1.1rem; margin: 18px 0 6px; }
.doc-rich p { white-space: pre-wrap; margin: 0 0 10px; }
.doc-rich ul { margin: 0 0 10px; padding-left: 22px; }
.doc-rich li { margin: 2px 0; }
.doc-row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 12px; border-top: 1px solid var(--line); padding: 8px 0; align-items: center; }
.doc-label { color: var(--muted); font-size: 0.9rem; }
.initials-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 6px 0 14px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--surface); }
.initials-box label { display: grid; gap: 4px; font-size: 0.9rem; }
.initials-box input[type="text"] { width: 96px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.1rem; text-align: center; }
.initials-draw { width: 180px; margin: 0; }
.initials-draw canvas { height: 64px !important; }
.initials-done { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.initials-done img { height: 34px; width: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.initials-done span { font: 500 1.2rem/1 var(--serif); padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.initials-done small { color: var(--muted); }
.signature-done { height: 48px; width: auto; }
.signoff-box { margin: 8px 0 16px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--surface); display: grid; gap: 6px; max-width: 520px; }
.signoff-draw { margin: 0; }
.signoff-draw canvas { height: 120px !important; }
.signoff-done { display: grid; gap: 2px; margin: 6px 0 14px; }
.signoff-done img { height: 52px; width: auto; }
.kiosk-doc .doc-body { font-size: 1.05rem; max-height: 46vh; overflow: auto; }
.kiosk-doc .signature canvas { height: 180px; }
/* A document signed as DocuSign does it (#vp-592, replacing #vp-571's pages): the whole of it on one page, no scrolling
   box; at each place to initial or sign, a gold tab, "Initial here" or "Sign here", that is the box itself, flagged
   out to the side; red once Next document or Done finds it still to do; the name and signature where the words ask. */
.sign-form .sign-words.doc-body, .kiosk-doc .sign-form .sign-words.doc-body { max-height: none; overflow: visible; }
.sign-form > * { min-width: 0; }
.sign-words { overflow-wrap: anywhere; }
.sign-tab-box { position: relative; margin: 22px 0 16px; padding: 14px 12px 10px; border: 3px solid #ffd600; border-radius: 10px; background: #fff9c4; color: #1a1915; }
.sign-form .initials-box.sign-tab-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
/* Not the theme's (#vp-596, Michael): bright yellow with bold red words, impossible to miss, in every theme. */
.sign-tab { position: absolute; left: -8px; top: -14px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 18px 4px 10px; background: #ffe600; color: #c40000; font: 800 0.84rem/1.3 var(--sans, inherit); letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px 0 0 4px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); white-space: nowrap; }
.sign-tab::before { content: "✎"; }
.sign-main .signature { margin: 4px 0 0; }
.sign-tab-box.missing { border-color: var(--bad); background: var(--bad-soft); }
.sign-tab-box.missing .sign-tab { background: var(--bad); color: #fff; }
.signature.missing { border-color: var(--bad); background: var(--bad-soft); }
.flash-missing { animation: flash-missing 0.9s ease-out 2; }
@keyframes flash-missing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.initials-needed { flex-basis: 100%; margin: 0; color: var(--bad); font-weight: 600; }
.sign-end { display: grid; gap: 12px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); white-space: normal; font-size: 1rem; }
.sign-end h3 { margin: 0; }
.sign-end label:not(.check) { display: grid; gap: 4px; }
.sign-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.sign-moves { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sign-moves button { min-width: 96px; }
.sign-moves button.link { min-width: 0; color: var(--muted); }
.sign-left { color: var(--muted); font-size: 0.92rem; }
/* Where they are among the documents to sign (#vp-592): each one, ticked once signed, this one marked. */
.sign-list { display: flex; flex-wrap: wrap; gap: 6px 4px; list-style: none; margin: 0 0 12px; padding: 0; font-size: 0.92rem; }
.sign-list li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); }
.sign-list li.done { color: var(--ink); }
.sign-list li.done .tick { color: var(--good); font-weight: 700; }
.sign-list li.now { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 600; }
/* The kiosk's steps up front (#vp-592): "Your details › Your plan › Sign 5 documents › Your card". */
.kiosk-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; list-style: none; margin: 0 0 6px; padding: 0; font: 500 0.82rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.kiosk-steps li + li::before { content: "›"; margin: 0 10px; color: var(--line-strong); }
.kiosk-steps li.now { color: var(--ink); font-weight: 700; }
.kiosk-steps li.done { color: var(--accent-ink); }
@media (max-width: 640px) {
  .initials-draw { width: 100%; max-width: 280px; }
  .sign-nav { flex-wrap: wrap; }
  .sign-moves { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .sign-moves button { min-width: 72px; }
  .signin .card.sign-doc { padding: 18px 14px; }
}
.kiosk-texts { align-items: flex-start; }
.kiosk-texts span { font-size: 0.92rem; color: var(--muted); }
.kiosk-done { padding-top: 12vh; gap: 14px; }
.kiosk-done p { font-size: 1.15rem; margin: 0; max-width: 34ch; }
.kiosk-founding { font: 500 1.6rem/1.3 var(--serif) !important; }
/* The finished screen as an achievement (#vp-601): the theme's greens and oranges, the key words on white. */
.kiosk-cheer { padding-top: 6vh; gap: 18px; max-width: 640px; margin: 0 auto; }
.kiosk-cheer .cheer-kicker { margin: 0; font: 800 clamp(2.6rem, 8vw, 4.2rem)/1 var(--serif); color: var(--good); letter-spacing: -0.01em; }
.kiosk-cheer .kiosk-name { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.cheer-label { display: block; font: 600 0.85rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.cheer-founding { display: grid; justify-items: center; gap: 8px; width: min(100%, 460px); padding: 20px 24px; border-radius: 18px; background: linear-gradient(135deg, var(--good), color-mix(in srgb, var(--good) 70%, #0b3d22)); color: #fff; box-shadow: 0 8px 24px color-mix(in srgb, var(--good) 35%, transparent); }
.cheer-number { display: inline-block; font: 700 clamp(3.4rem, 11vw, 5.2rem)/1 var(--serif); color: var(--good); background: #fff; padding: 6px 26px; border-radius: 14px; }
.cheer-signed { grid-auto-flow: row; }
.cheer-signed .cheer-number { font-size: clamp(2.6rem, 8vw, 3.6rem); padding: 4px 22px; }
.cheer-plan { display: grid; justify-items: center; gap: 6px; width: min(100%, 460px); padding: 18px 22px; border-radius: 16px; background: #fff; color: #1a1915; border: 1px solid var(--line); box-shadow: var(--shadow); }
.cheer-plan .cheer-label { color: var(--muted); }
.cheer-plan strong { font: 600 clamp(1.3rem, 3.6vw, 1.7rem)/1.25 var(--serif); }
.cheer-hl { display: inline-block; background: #fff; color: #1a1915; padding: 3px 12px; border-radius: 999px; font-weight: 600; }
.cheer-plan .cheer-hl { background: var(--good-soft); color: var(--good); }
.cheer-founding .cheer-hl { color: var(--good); }
.kiosk-done .cheer-next { width: min(100%, 520px); max-width: none; padding: 16px 20px; border-radius: 14px; background: color-mix(in srgb, var(--step) 22%, #fff); border-left: 6px solid var(--step); color: #1a1915; font-size: 1.15rem; line-height: 1.6; }
.kiosk-done .button { margin-top: 18px; min-width: 200px; min-height: 56px; font-size: 1.15rem; display: inline-flex; align-items: center; justify-content: center; }
dialog.kiosk-still { border: 0; border-radius: 16px; padding: 28px; text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); }
dialog.kiosk-still p { font: 500 1.8rem/1.2 var(--serif); margin: 0 0 18px; }
dialog.kiosk-still::backdrop { background: rgba(26, 25, 21, 0.45); }
/* Settings › Screens (#vp-423). */
.screen-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.screen-list > li { border-top: 1px solid var(--line); padding-top: 12px; }
.screen-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.screen-row input[type="text"] { max-width: 260px; }
.screen-row select { max-width: 260px; }
.inline-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--muted); }
.screen-link { margin: 4px 0; font-size: 0.85rem; word-break: break-all; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px; }
.spot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.spot-list > li { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.spot-list > li.off { opacity: 0.6; }
.spot-list > li > span { display: grid; flex: 1; }
.spot-thumb { width: 72px; height: 48px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.inline-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

/* The knowledge base and drafts from its guides (#vp-426): a note on a card's state; a document's words; lists. */
.notice-card { border-left: 4px solid var(--line); }
.notice-card.good { background: var(--good-soft); border-left-color: var(--good); }
.notice-card.watch { background: var(--warn-soft); border-left-color: var(--warn); }
.notice-card.bad { background: var(--bad-soft); border-left-color: var(--bad); }
.notice-card p { margin: 0 0 8px; }
.notice-card p:last-child { margin-bottom: 0; }
.knowledge-words h3 { margin: 18px 0 6px; font-size: 0.95rem; letter-spacing: 0.02em; }
.knowledge-words p { margin: 0 0 10px; white-space: pre-line; overflow-wrap: anywhere; }
.knowledge-found > li { border-top: 1px solid var(--line); padding: 10px 0; }
.knowledge-found p { margin: 4px 0 0; }
.plain-text { white-space: pre-wrap; font-family: inherit; margin: 6px 0; overflow-wrap: anywhere; }
.bare-list { margin: 4px 0; padding-left: 18px; }
.bare-list li { margin: 2px 0; }
.draft-task .pagehead { gap: 10px; flex-wrap: wrap; }
/* A problem's photos of the damage, and what a warranty claim needs beside it (Arsenal step 5). */
.problem-photos { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.problem-photos img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.warranty-box { margin: 12px 0; padding: 10px 12px; background: var(--surface-2); border-radius: 0 6px 6px 0; }
.warranty-box p { margin: 4px 0; }
@media print { .problem-photos img { width: 96px; height: 96px; } }
/* A guide's sign-off (Arsenal step 6): who has read it, and who hasn't yet. */
.guide-reads li { padding: 3px 0; }
/* Free now (#vp-458): what's free for walk-ins, each start a chip to book it. */
.free-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.free-service h2 { margin: 0; }
.free-spaces li { padding: 4px 0; }
.free-times { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.free-times .chip { display: inline-block; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; color: var(--ink); background: var(--surface); font-variant-numeric: tabular-nums; }
.free-times .chip:hover { border-color: var(--accent); }
.free-times .chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.free-book { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .free-grid { grid-template-columns: 1fr; } }
/* Adding documents (#vp-460): a zone to drop files on, and each file's row as it's sent. */
.drop-zone { border: 2px dashed var(--line-strong); text-align: center; padding: 28px 20px; }
.drop-zone.over { border-color: var(--accent); background: var(--surface-2); }
.drop-zone.sending { opacity: 0.85; }
.drop-zone .drop-here { font-size: 1.15rem; margin: 0 0 6px; }
.drop-zone .drop-list { text-align: left; margin-top: 14px; }
.drop-zone .drop-list li, .drop-docs > li { padding: 6px 0; border-bottom: 1px solid var(--line); }
/* A dropped file's steps (#vp-567), as Arnold's steps card: under its name, and the plans to review at the end, in red. */
.drop-docs > li { padding: 12px 0; }
.drop-docs > li:last-child { border-bottom: 0; }
.drop-docs .plan-steps li { padding: 0; border-bottom: 0; }
.drop-steps { margin-top: 8px; }
.drop-review { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.button.attention { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 600; }
.button.attention:hover { filter: brightness(1.08); }
/* Yes and No, everywhere (#vp-567): the theme's green for the go-ahead (Yes, Go ahead, Book anyway), its red for no or
   cancel (Cancel, Leave it out). The confirm modal, the asking modal, Arnold's choices. */
button.go, .button.go { background: var(--good); border-color: var(--good); color: var(--on-good); font-weight: 600; }
button.no, .button.no { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 600; }
button.go:hover, .button.go:hover, button.no:hover, .button.no:hover { filter: brightness(1.08); color: #fff; }
button.go:hover, .button.go:hover { color: var(--on-good); }
button.go:disabled, button.no:disabled { opacity: 0.6; filter: none; }
/* What a save said, by the button pressed, when the page stays where it was (#vp-567, data-stay). */
.saved-note { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; border-left: 4px solid var(--good); background: var(--good-soft); color: var(--ink); }
.saved-note.bad { border-left-color: var(--bad); background: var(--bad-soft); }
.paste-text > summary { list-style: none; display: inline-block; cursor: pointer; }
.paste-text > summary::-webkit-details-marker { display: none; }
.paste-text[open] > summary { margin-bottom: 10px; }

/* The member picker (Cian's Scheduling 9): a search box with its results under it. */
.member-pick { position: relative; min-width: 260px; flex: 1 1 260px; }
.member-pick input[type="search"] { width: 100%; }
.pick-results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow); max-height: 320px; overflow-y: auto; }
.pick-results li.muted { padding: 8px 10px; font-size: 0.85rem; }
.pick-results button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 7px 10px; border: 0; border-radius: 7px; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.pick-results button:hover, .pick-results button:focus-visible { background: var(--info-soft); outline: none; }
.pick-results small { color: var(--muted); font-size: 0.78rem; }
.field-like { display: grid; gap: 5px; font-size: 0.86rem; color: var(--muted); }
.add-to-class { flex-wrap: wrap; align-items: center; }

/* The door log's filters (Cian's Doors 4). */
.door-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.door-filters input[type="search"] { flex: 1 1 200px; min-width: 160px; }

/* Saved replies (Cian's Messages 5). */
.saved-replies li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.saved-replies li:last-child { border-bottom: 0; }
.saved-replies p { margin: 4px 0 6px; white-space: pre-wrap; }

/* The notifications list (Cian's Notifications 2, 7, 10): urgent ones marked, each line's actions beside it. */
.notices li.urgent { background: color-mix(in srgb, var(--bad-soft) 55%, transparent); border-radius: 8px; }
.notices li { flex-wrap: wrap; }
.notices .notice-text { flex: 1 1 320px; min-width: 0; }
.notices .notice-actions { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.notices .notice-more summary { cursor: pointer; font-size: 0.82rem; color: var(--muted); }
.notices .notice-more form { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }

/* A sortable column heading (Cian's Members 5). */
th .sort-link { color: inherit; text-decoration: none; }
th .sort-link:hover { text-decoration: underline; }

/* A table sorted in the page by its headings (Cian's Attendance 13): the column sorted by shows which way. */
table[data-sortable] th:not([data-nosort]) { cursor: pointer; user-select: none; }
table[data-sortable] th:not([data-nosort]):hover { text-decoration: underline; }
table[data-sortable] th[aria-sort="ascending"]::after { content: " ▲"; font-size: 0.7em; }
table[data-sortable] th[aria-sort="descending"]::after { content: " ▼"; font-size: 0.7em; }