/* SalonOS design system — calm, spacious, touch-friendly. No build step. */
:root {
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #f5f6f3;
  --surface: #ffffff;
  --surface-2: #f0f2ee;
  --ink: #16201b;
  --ink-2: #3d4a43;
  --muted: #5f6d66;
  --line: #e1e5e0;
  --line-strong: #c9d1cb;

  --accent: #0f5f4b;
  --accent-hover: #0b4d3c;
  --accent-soft: #e2f0ea;
  --accent-ink: #ffffff;
  --focus: #b4541a;

  --success: #16603a; --success-soft: #e3f2e8;
  --warning: #7d5100; --warning-soft: #fbf0d9;
  --danger: #a1261b;  --danger-soft: #fbe8e5;
  --info: #1b4b82;    --info-soft: #e5edf8;
  --neutral: #4c5752; --neutral-soft: #eceeeb;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgb(16 28 22 / .04), 0 6px 20px rgb(16 28 22 / .04);
  --shadow-pop: 0 12px 32px rgb(16 28 22 / .14);
  --sidebar: 15.5rem;
  --tap: 2.75rem;

  color-scheme: light;
  font-family: var(--font);
  font-size: 100%;
  color: var(--ink);
  background: var(--bg);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; line-height: 1.5; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -.015em; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 700; }
h2 { font-size: 1.0625rem; font-weight: 650; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--accent-hover); }
img, svg { display: block; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--surface); padding: .6rem 1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); }
.skip-link:focus { top: 1rem; }
.muted { color: var(--muted); }
.small { font-size: .8125rem; }
.mono { font-family: var(--mono); font-size: .875em; }
.table .mono { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.js .js-hide { display: none; }
[hidden] { display: none !important; }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: .25rem; padding: 1.25rem .875rem; background: var(--surface); border-right: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 750; font-size: 1.0625rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: .9375rem; }
.sidebar > .brand { padding: 0 .5rem; }
.sidebar-org { margin: .25rem .5rem .75rem; color: var(--muted); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-heading { margin: 1rem .75rem .35rem; font-size: .6875rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nav a { display: flex; align-items: center; gap: .7rem; min-height: 2.5rem; padding: .45rem .75rem; border-radius: var(--radius-sm); color: var(--ink-2); text-decoration: none; font-weight: 550; font-size: .9375rem; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.sidebar-foot { margin-top: auto; padding: 1rem .5rem 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .5rem; }
.sidebar-user { display: flex; flex-direction: column; font-size: .875rem; }
.sidebar-user span { color: var(--muted); font-size: .8125rem; }

.workspace { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .75rem; min-height: 4rem; padding: .625rem clamp(1rem, 3vw, 2.5rem); background: rgb(245 246 243 / .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar .quick-new { margin-left: auto; }
.brand-compact, .mobile-nav { display: none; }
.branch-switch { display: flex; gap: .5rem; align-items: center; }
.branch-switch select { min-height: 2.5rem; padding-block: .35rem; font-weight: 550; }
.branch-label { color: var(--ink-2); font-weight: 550; font-size: .9375rem; }
.content { width: 100%; max-width: 100rem; padding: clamp(1.25rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 1.5rem; }
.content-wide { max-width: none; }
.content:focus { outline: none; }

/* ---------- Menus (details/summary; closes on outside click via app.js) ---------- */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30; min-width: 12rem; padding: .375rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.menu-panel > li > a { display: block; padding: .6rem .75rem; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 550; }
.menu-panel > li > a:hover { background: var(--surface-2); }
.menu-panel-left { left: 0; right: auto; width: min(18rem, calc(100vw - 2rem)); max-height: calc(100dvh - 6rem); overflow-y: auto; }
.menu-signout { padding: .75rem .5rem .25rem; border-top: 1px solid var(--line); margin-top: .5rem; }

/* ---------- Buttons ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: var(--tap); padding: .55rem 1.05rem; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 650; font-size: .9375rem; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; }
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.button-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.button-secondary:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
.button-ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
.button-ghost:hover { background: var(--surface-2); color: var(--ink); border-color: transparent; }
.button-sm { min-height: 2.25rem; padding: .35rem .75rem; font-size: .875rem; }
.button-block { width: 100%; }
.icon-button { padding: .5rem; min-width: var(--tap); }
.quick-new .icon { width: 1.1rem; height: 1.1rem; }

/* ---------- Page structure ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.page-header .lead { margin-top: .35rem; }
.eyebrow { font-size: .8125rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; }
.eyebrow a { color: var(--muted); }
.lead { color: var(--muted); font-size: 1rem; max-width: 60ch; }
.card { container-type: inline-size; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 2.5vw, 1.5rem); box-shadow: var(--shadow); min-width: 0; }
.card > h2 { margin-bottom: 1rem; }
.card-flat { box-shadow: none; background: var(--surface-2); border-color: transparent; }
.card-narrow { max-width: 40rem; }
.card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.count { display: inline-block; margin-left: .35rem; padding: 0 .5rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: .1em; }
.split { display: grid; grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.split > :only-child { grid-column: 1 / -1; }
.empty { padding: 1.5rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); text-align: center; }

/* ---------- Metrics ---------- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.metric { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow); }
.metric h2 { font-size: .875rem; font-weight: 550; color: var(--muted); }
.metric-value { margin: .35rem 0 .15rem; font-size: 2rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.metric-note { font-size: .8125rem; color: var(--muted); }

.setup-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: .5rem; }
.setup-steps li { counter-increment: step; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.setup-steps li::before { content: counter(step); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); font-weight: 650; font-size: .875rem; }
.setup-steps li.is-done::before { content: "✓"; background: var(--success-soft); border-color: transparent; color: var(--success); }
.setup-steps a { font-weight: 650; }
.setup-steps span { color: var(--muted); font-size: .875rem; }

/* ---------- Timeline / agenda / queue ---------- */
.timeline li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.timeline li:first-child { border-top: 0; }
.timeline time { font-weight: 650; font-variant-numeric: tabular-nums; }
.timeline-main, .agenda-main, .queue-main { display: flex; flex-direction: column; min-width: 0; }
.timeline-main span, .agenda-main span, .queue-main span { color: var(--muted); font-size: .9375rem; }
.agenda-main small, .queue-main small { color: var(--muted); font-size: .8125rem; }

.agenda { display: grid; gap: .5rem; }
.agenda-item { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--info); border-radius: var(--radius-sm); background: var(--surface); }
.agenda-item.status-completed { border-left-color: var(--success); }
.agenda-item.status-in_service { border-left-color: var(--accent); }
.agenda-item.status-pending { border-left-color: var(--warning); }
.agenda-item.status-cancelled, .agenda-item.status-no_show { border-left-color: var(--line-strong); background: var(--surface-2); }
.agenda-time { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.agenda-time time { font-weight: 700; }
.agenda-time span { color: var(--muted); font-size: .8125rem; }
.agenda-status, .queue-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.day-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.date-jump { display: flex; gap: .4rem; }
.date-jump input { min-height: 2.25rem; padding-block: .25rem; }
.inline-form { display: flex; gap: .4rem; align-items: center; }
.inline-form select { min-height: 2.25rem; padding-block: .25rem; font-size: .875rem; }

.queue { display: grid; gap: .5rem; }
.queue-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.queue-number { display: grid; place-items: center; min-width: 3.25rem; height: 3.25rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-weight: 750; font-size: 1.125rem; font-variant-numeric: tabular-nums; }

/* Rows stack their status controls when the card itself is narrow (container query, not viewport). */
@container (max-width: 36rem) {
  .agenda-item, .queue-item { grid-template-columns: auto minmax(0, 1fr); }
  .agenda-status, .queue-status { grid-column: 1 / -1; justify-content: flex-start; padding-top: .25rem; }
}

/* Tables turn into labelled cards whenever their card is narrow (phone, or a narrow column on tablet). */
@container (max-width: 34rem) {
  .table-wrap { overflow: visible; margin: 0; padding: 0; }
  .table thead, .table tfoot th { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table, .table tbody, .table tfoot, .table tr, .table td { display: block; width: 100%; }
  .table tr { padding: .75rem 0; border-bottom: 1px solid var(--line); }
  .table tbody tr:last-child { border-bottom: 0; }
  .table td { padding: .3rem 0; border: 0; text-align: right; overflow-wrap: anywhere; }
  .table td[data-label]::before { content: attr(data-label); float: left; margin-right: 1rem; color: var(--muted); font-size: .8125rem; font-weight: 600; text-align: left; }
  .table .actions { width: 100%; text-align: left; padding-top: .5rem; }
  .table .num { text-align: right; }
}

/* ---------- Badges (text + tone; never colour alone) ---------- */
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; white-space: nowrap; background: var(--neutral-soft); color: var(--neutral); }
.badge::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }

/* ---------- Tables (become cards on phones) ---------- */
.table-wrap { overflow-x: auto; margin-inline: calc(clamp(1rem, 2.5vw, 1.5rem) * -1); padding-inline: clamp(1rem, 2.5vw, 1.5rem); }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th { padding: .6rem .75rem; text-align: left; font-size: .75rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: .8rem .75rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fafbf9; }
.table .actions { text-align: right; width: 1%; white-space: nowrap; }
.table .actions .button, .table .actions .inline-form { display: inline-flex; white-space: nowrap; }
/* In a medium-width card the row buttons wrap rather than push the table wider than the card. */
@container (min-width: 34.01rem) and (max-width: 42rem) { .table .actions { white-space: normal; min-width: 9rem; } }
.table th.num { text-align: right; }
.changes li { font-size: .875rem; }
.changes del { color: var(--muted); }

.search { display: flex; gap: .5rem; flex: 1 1 16rem; max-width: 24rem; }
.search input { flex: 1; min-width: 0; min-height: 2.25rem; padding-block: .3rem; }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; margin-top: 1rem; color: var(--muted); font-size: .875rem; }

/* ---------- Forms ---------- */
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack > .button { align-self: flex-start; }
.stack > .button-block { align-self: stretch; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
fieldset { margin: 0; padding: 1.25rem 0 0; border: 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 1rem; }
legend { float: left; width: 100%; padding: 0; margin-bottom: .25rem; font-weight: 700; font-size: 1.0625rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-weight: 600; font-size: .9375rem; }
.field small { color: var(--muted); font-size: .8125rem; }
.optional { font-weight: 450; color: var(--muted); font-size: .8125rem; }
input, select, textarea { width: 100%; min-height: var(--tap); padding: .6rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; }
textarea { resize: vertical; min-height: 5rem; }
input:hover, select:hover, textarea:hover { border-color: #aab5ae; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink-2); }
.has-error input, .has-error select, .has-error textarea { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: .875rem; font-weight: 550; }
.field-check { flex-direction: row; align-items: flex-start; gap: .65rem; }
.field-check input { width: 1.25rem; height: 1.25rem; min-height: 0; margin-top: .15rem; accent-color: var(--accent); flex: none; }
.field-check label { display: flex; flex-direction: column; }
.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.flash { padding: .8rem 1rem; border-radius: var(--radius-sm); font-weight: 550; border: 1px solid transparent; }
.flash-success { background: var(--success-soft); color: var(--success); border-color: #c7e3d1; }
.flash-error { background: var(--danger-soft); color: var(--danger); border-color: #f1cbc5; }

/* ---------- Guest pages (sign-in, installer, errors) ---------- */
body.guest { display: grid; place-items: start center; padding: clamp(1rem, 6vh, 5rem) 1rem; }
.guest-card { width: min(100%, 28rem); display: flex; flex-direction: column; gap: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.5rem, 5vw, 2.5rem); box-shadow: var(--shadow); }
.guest-card-wide { width: min(100%, 40rem); }
.guest-card .brand { margin-bottom: .5rem; }
.checklist { display: grid; gap: .6rem; }
.checklist li { display: flex; gap: .75rem; align-items: flex-start; }
.checklist small { display: block; color: var(--muted); }
.check-mark { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: .8125rem; font-weight: 700; flex: none; }
.is-ok .check-mark { background: var(--success-soft); color: var(--success); }
.is-fail .check-mark { background: var(--danger-soft); color: var(--danger); }
.is-warn .check-mark { background: var(--warning-soft); color: var(--warning); }
.debug { overflow: auto; max-height: 20rem; padding: 1rem; background: var(--surface-2); border-radius: var(--radius-sm); font-size: .75rem; white-space: pre-wrap; }

/* ---------- Phase 1.5 components ---------- */
.js .js-only { display: inline-flex; }
.js-only { display: none; }
.js [data-optional] { display: none; }
.tag { display: inline-block; margin-left: .35rem; padding: 0 .45rem; border-radius: 4px; background: var(--info-soft); color: var(--info); font-size: .75rem; font-weight: 650; vertical-align: .1em; }
.flash-info { background: var(--info-soft); color: var(--info); border-color: #cddcf0; }
.split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split-wide { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr); }
.section-title { margin: 1.5rem 0 .75rem; }
.card h3 { font-size: .9375rem; margin: 1.25rem 0 .5rem; }
.segmented, .tabs { display: flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; background: var(--surface-2); border-radius: var(--radius-sm); }
.segmented a, .tabs a { padding: .4rem .8rem; border-radius: 6px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .875rem; }
.segmented a[aria-current="page"], .tabs a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(16 28 22 / .08); }
.tabs { align-self: flex-start; }
.tabs a { padding: .55rem 1rem; font-size: .9375rem; }

.lines { gap: .75rem; }
.line-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .75rem; }
.lines > .button { align-self: flex-start; }

.totals { margin: 1rem 0 0; display: grid; gap: .35rem; max-width: 22rem; margin-left: auto; }
.totals div { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; }
.totals-strong { padding-top: .35rem; border-top: 1px solid var(--line); font-weight: 700; }
.totals-strong dt { color: var(--ink); }
.totals-due { font-weight: 700; font-size: 1.0625rem; }
.totals-due dt { color: var(--ink); }
.payment-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.payment-list li:first-child { border-top: 0; }
.payment-list small { display: block; color: var(--muted); font-size: .8125rem; }
.due-amount { display: flex; justify-content: space-between; align-items: baseline; padding: .9rem 1rem; margin-bottom: 1rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); }
.due-amount strong { font-size: 1.75rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pay-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; margin: .5rem 0 1rem; }
.pay-buttons .button { width: 100%; min-height: 3rem; }
.split-pay { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .75rem 1rem; }
.split-pay summary { cursor: pointer; font-weight: 600; }
.split-pay[open] summary { margin-bottom: 1rem; }
.pay-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; padding-bottom: .75rem; border-bottom: 1px dashed var(--line); }
.pay-row > :last-child { grid-column: 1 / -1; }
.online-pay { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.online-pay h3 { margin-top: 0; }
.link-box { padding: .6rem .75rem; border-radius: var(--radius-sm); background: var(--surface-2); overflow-wrap: anywhere; margin-bottom: .5rem; }
.paid-card { text-align: center; padding: 2rem 1.5rem; }
.paid-mark { font-size: 1.5rem; font-weight: 700; color: var(--success); margin-bottom: .35rem; }
.paid-mark::before { content: "✓ "; }
.preview-number { font-size: 1.5rem; font-weight: 700; margin: .25rem 0 .75rem; }

.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem 1rem; border: 0; padding: 0; }
.check-grid legend, .radio-row legend { font-weight: 600; font-size: .9375rem; margin-bottom: .5rem; }
.check-grid small { grid-column: 1 / -1; color: var(--muted); font-size: .8125rem; }
.check { display: flex; align-items: flex-start; gap: .5rem; min-height: 2.25rem; padding-top: .35rem; font-size: .9375rem; cursor: pointer; }
.check input { width: 1.15rem; height: 1.15rem; min-height: 0; margin: .15rem 0 0; accent-color: var(--accent); flex: none; }
.radio-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: .25rem 1.5rem; border: 0; padding: 0; margin: .75rem 0; }
.radio-row > legend, .check-grid > legend { float: none; width: 100%; grid-column: 1 / -1; padding: 0; }
.settings-stack { max-width: 60rem; }
.gateway-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.gateway { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem; display: flex; flex-direction: column; gap: .9rem; }
.gateway legend { padding: 0 .35rem; font-weight: 700; }
.field-label { font-weight: 600; font-size: .9375rem; }
.permission-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.permission-group { margin: 0; display: flex; flex-direction: column; gap: .15rem; }
.permission-group legend { float: none; font-weight: 700; padding: 0; margin-bottom: .35rem; }
.permission-group[disabled] { opacity: .75; }
.branch-form > .card { max-width: 44rem; }
.hours-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.hours-table th:first-child { width: 28%; }
.hours-table th:last-child, .hours-table td:last-child { width: 4.25rem; text-align: center; }
.hours-table input[type="time"] { width: 100%; min-width: 0; font-size: .9375rem; }
.hours-table th, .hours-table td { padding: .4rem .35rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.hours-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.hours-table tbody th { font-weight: 600; }
.hours-table input[type="time"] { min-height: 2.5rem; padding: .3rem .5rem; }
.hours-table input[type="checkbox"] { width: 1.2rem; height: 1.2rem; min-height: 0; accent-color: var(--accent); }
.hours-table .field-error { display: block; font-weight: 500; }

/* ---------- Public booking ---------- */
body.public { background: var(--bg); }
.public-header { display: flex; justify-content: center; padding: 1.25rem 1rem .5rem; }
.public-name { display: inline-flex; align-items: center; gap: .6rem; font-weight: 750; font-size: 1.125rem; letter-spacing: -.02em; }
.public-main { width: min(100% - 2rem, 34rem); margin: 0 auto; padding: .5rem 0 3rem; display: flex; flex-direction: column; gap: 1.25rem; }
.public-main h1 { font-size: 1.5rem; }
.public-footer { text-align: center; color: var(--muted); font-size: .8125rem; padding: 0 1rem 2rem; }
.public-intro { color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; }
.steps { display: flex; gap: .35rem; margin: 0; padding: 0; list-style: none; counter-reset: step; overflow-x: auto; }
.steps li { counter-increment: step; flex: 1 0 auto; font-size: .75rem; font-weight: 600; color: var(--muted); padding-top: .5rem; border-top: 3px solid var(--line); }
.steps li.is-done { border-color: var(--accent); }
.steps li.is-current { border-color: var(--accent); color: var(--ink); }
.steps a { color: var(--accent); }
.summary p { margin: 0; }
.summary .muted { margin-top: .2rem; }
.choice-list { display: grid; gap: .5rem; border: 0; padding: 0; margin: 0; }
.choice { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; cursor: pointer; }
a.choice { flex-direction: column; align-items: flex-start; justify-content: center; gap: .1rem; }
a.choice span, .choice small { color: var(--muted); font-size: .875rem; font-weight: 450; }
.choice:hover { border-color: var(--accent); color: var(--ink); }
.choice-check > span:first-of-type { flex: 1; display: flex; flex-direction: column; }
.choice-check input { width: 1.3rem; height: 1.3rem; min-height: 0; accent-color: var(--accent); flex: none; }
.choice-check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice-meta { display: flex; flex-direction: column; align-items: flex-end; font-weight: 650; font-variant-numeric: tabular-nums; }
.day-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); gap: .5rem; }
.day { display: flex; flex-direction: column; align-items: center; padding: .6rem .25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: .75rem; }
.day strong { font-size: 1.35rem; line-height: 1.2; }
a.day:hover { border-color: var(--accent); color: var(--accent); }
.day.is-closed { color: var(--muted); background: var(--surface-2); border-style: dashed; }
.date-other { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.date-other label { width: 100%; font-weight: 600; font-size: .875rem; }
.date-other input { flex: 1; min-width: 10rem; }
.slot-heading { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
.slot { display: grid; place-items: center; min-height: 2.9rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--accent); font-weight: 650; text-decoration: none; font-variant-numeric: tabular-nums; }
.slot:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.confirmation { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.5rem, 5vw, 2.25rem); text-align: center; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.confirm-mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--success-soft); color: var(--success); font-size: 1.75rem; font-weight: 700; }
.confirm-details { width: 100%; margin: 0; display: grid; gap: .6rem; text-align: left; }
.confirm-details div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.confirm-details dt { color: var(--muted); font-size: .875rem; }
.confirm-details dd { margin: 0; font-weight: 600; }

/* ---------- Printable invoice ---------- */
body.print-page { background: var(--surface-2); padding: 1.5rem 1rem; }
.print-actions { justify-content: center; gap: .5rem; margin-bottom: 1rem; }
.js .print-actions { display: flex; }
.receipt { max-width: 42rem; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; }
.receipt-head { display: flex; justify-content: space-between; gap: 1.5rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--ink); }
.receipt-head h1 { font-size: 1.5rem; }
.receipt-head p { color: var(--ink-2); font-size: .875rem; margin-top: .25rem; }
.receipt-meta { text-align: right; }
.receipt-title { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.receipt-to { margin: 1.25rem 0; }
.receipt-table { width: 100%; border-collapse: collapse; }
.receipt-table th, .receipt-table td { padding: .6rem 0; border-bottom: 1px solid var(--line); text-align: left; }
.receipt-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.receipt-table .num { text-align: right; }
.receipt-note { margin-top: 1.25rem; color: var(--ink-2); font-size: .875rem; text-align: center; }
@media print {
  body.print-page { background: #fff; padding: 0; }
  .print-actions { display: none !important; }
  .receipt { border: 0; border-radius: 0; padding: 0; max-width: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 64rem) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .brand-compact, .mobile-nav { display: inline-flex; }
  .topbar { gap: .5rem; }
  .branch-switch, .branch-label { min-width: 0; }
  .branch-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 52rem) {
  .split, .split-even, .split-wide, .gateway-grid { grid-template-columns: minmax(0, 1fr); }
  /* On phones and tablets the list/search comes first; "+ New" still jumps to the form. */
  .split > #new { order: 2; }
}
@media (max-width: 40rem) {
  .receipt { padding: 1.25rem; }
  .receipt-head { flex-direction: column; }
  .receipt-meta { text-align: left; }
  .brand-compact span:last-child { display: none; }
  .topbar { padding-inline: 1rem; }
  .content { padding: 1rem 1rem 3rem; gap: 1rem; }
  .timeline li { grid-template-columns: 4.75rem minmax(0, 1fr); }
  .timeline .badge { grid-column: 2; justify-self: start; }
  .search { max-width: none; }
}
@media (pointer: coarse) {
  .button-sm, .inline-form select, .search input, .date-jump input { min-height: var(--tap); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Narrow cards: stack service rows (kept last so it wins over the base rules above). */
@container (max-width: 26rem) {
  .line-row { grid-template-columns: minmax(0, 1fr); padding-bottom: .75rem; border-bottom: 1px dashed var(--line); }
}

/* ---------- Calendar grid positions (generated; CSP blocks inline styles) ---------- */
.cal-cols-1{grid-template-columns:4.25rem repeat(1,minmax(8.5rem,1fr));min-width:calc(4.25rem + 1 * 8.5rem)}.cal-cols-2{grid-template-columns:4.25rem repeat(2,minmax(8.5rem,1fr));min-width:calc(4.25rem + 2 * 8.5rem)}.cal-cols-3{grid-template-columns:4.25rem repeat(3,minmax(8.5rem,1fr));min-width:calc(4.25rem + 3 * 8.5rem)}.cal-cols-4{grid-template-columns:4.25rem repeat(4,minmax(8.5rem,1fr));min-width:calc(4.25rem + 4 * 8.5rem)}.cal-cols-5{grid-template-columns:4.25rem repeat(5,minmax(8.5rem,1fr));min-width:calc(4.25rem + 5 * 8.5rem)}.cal-cols-6{grid-template-columns:4.25rem repeat(6,minmax(8.5rem,1fr));min-width:calc(4.25rem + 6 * 8.5rem)}.cal-cols-7{grid-template-columns:4.25rem repeat(7,minmax(8.5rem,1fr));min-width:calc(4.25rem + 7 * 8.5rem)}.cal-cols-8{grid-template-columns:4.25rem repeat(8,minmax(8.5rem,1fr));min-width:calc(4.25rem + 8 * 8.5rem)}.cal-cols-9{grid-template-columns:4.25rem repeat(9,minmax(8.5rem,1fr));min-width:calc(4.25rem + 9 * 8.5rem)}.cal-cols-10{grid-template-columns:4.25rem repeat(10,minmax(8.5rem,1fr));min-width:calc(4.25rem + 10 * 8.5rem)}.cal-cols-11{grid-template-columns:4.25rem repeat(11,minmax(8.5rem,1fr));min-width:calc(4.25rem + 11 * 8.5rem)}.cal-cols-12{grid-template-columns:4.25rem repeat(12,minmax(8.5rem,1fr));min-width:calc(4.25rem + 12 * 8.5rem)}.cal-cols-13{grid-template-columns:4.25rem repeat(13,minmax(8.5rem,1fr));min-width:calc(4.25rem + 13 * 8.5rem)}.cal-cols-14{grid-template-columns:4.25rem repeat(14,minmax(8.5rem,1fr));min-width:calc(4.25rem + 14 * 8.5rem)}.cal-cols-15{grid-template-columns:4.25rem repeat(15,minmax(8.5rem,1fr));min-width:calc(4.25rem + 15 * 8.5rem)}.cal-cols-16{grid-template-columns:4.25rem repeat(16,minmax(8.5rem,1fr));min-width:calc(4.25rem + 16 * 8.5rem)}.cal-cols-17{grid-template-columns:4.25rem repeat(17,minmax(8.5rem,1fr));min-width:calc(4.25rem + 17 * 8.5rem)}.cal-cols-18{grid-template-columns:4.25rem repeat(18,minmax(8.5rem,1fr));min-width:calc(4.25rem + 18 * 8.5rem)}.cal-cols-19{grid-template-columns:4.25rem repeat(19,minmax(8.5rem,1fr));min-width:calc(4.25rem + 19 * 8.5rem)}.cal-cols-20{grid-template-columns:4.25rem repeat(20,minmax(8.5rem,1fr));min-width:calc(4.25rem + 20 * 8.5rem)}
.cs-1{grid-column-start:1}.cs-2{grid-column-start:2}.cs-3{grid-column-start:3}.cs-4{grid-column-start:4}.cs-5{grid-column-start:5}.cs-6{grid-column-start:6}.cs-7{grid-column-start:7}.cs-8{grid-column-start:8}.cs-9{grid-column-start:9}.cs-10{grid-column-start:10}.cs-11{grid-column-start:11}.cs-12{grid-column-start:12}.cs-13{grid-column-start:13}.cs-14{grid-column-start:14}.cs-15{grid-column-start:15}.cs-16{grid-column-start:16}.cs-17{grid-column-start:17}.cs-18{grid-column-start:18}.cs-19{grid-column-start:19}.cs-20{grid-column-start:20}.cs-21{grid-column-start:21}.cs-22{grid-column-start:22}
.rs-1{grid-row-start:1}.rs-2{grid-row-start:2}.rs-3{grid-row-start:3}.rs-4{grid-row-start:4}.rs-5{grid-row-start:5}.rs-6{grid-row-start:6}.rs-7{grid-row-start:7}.rs-8{grid-row-start:8}.rs-9{grid-row-start:9}.rs-10{grid-row-start:10}.rs-11{grid-row-start:11}.rs-12{grid-row-start:12}.rs-13{grid-row-start:13}.rs-14{grid-row-start:14}.rs-15{grid-row-start:15}.rs-16{grid-row-start:16}.rs-17{grid-row-start:17}.rs-18{grid-row-start:18}.rs-19{grid-row-start:19}.rs-20{grid-row-start:20}.rs-21{grid-row-start:21}.rs-22{grid-row-start:22}.rs-23{grid-row-start:23}.rs-24{grid-row-start:24}.rs-25{grid-row-start:25}.rs-26{grid-row-start:26}.rs-27{grid-row-start:27}.rs-28{grid-row-start:28}.rs-29{grid-row-start:29}.rs-30{grid-row-start:30}.rs-31{grid-row-start:31}.rs-32{grid-row-start:32}.rs-33{grid-row-start:33}.rs-34{grid-row-start:34}.rs-35{grid-row-start:35}.rs-36{grid-row-start:36}.rs-37{grid-row-start:37}.rs-38{grid-row-start:38}.rs-39{grid-row-start:39}.rs-40{grid-row-start:40}.rs-41{grid-row-start:41}.rs-42{grid-row-start:42}.rs-43{grid-row-start:43}.rs-44{grid-row-start:44}.rs-45{grid-row-start:45}.rs-46{grid-row-start:46}.rs-47{grid-row-start:47}.rs-48{grid-row-start:48}.rs-49{grid-row-start:49}.rs-50{grid-row-start:50}.rs-51{grid-row-start:51}.rs-52{grid-row-start:52}.rs-53{grid-row-start:53}.rs-54{grid-row-start:54}.rs-55{grid-row-start:55}.rs-56{grid-row-start:56}.rs-57{grid-row-start:57}.rs-58{grid-row-start:58}.rs-59{grid-row-start:59}.rs-60{grid-row-start:60}.rs-61{grid-row-start:61}.rs-62{grid-row-start:62}.rs-63{grid-row-start:63}.rs-64{grid-row-start:64}.rs-65{grid-row-start:65}.rs-66{grid-row-start:66}.rs-67{grid-row-start:67}.rs-68{grid-row-start:68}.rs-69{grid-row-start:69}.rs-70{grid-row-start:70}.rs-71{grid-row-start:71}.rs-72{grid-row-start:72}.rs-73{grid-row-start:73}.rs-74{grid-row-start:74}.rs-75{grid-row-start:75}.rs-76{grid-row-start:76}.rs-77{grid-row-start:77}.rs-78{grid-row-start:78}.rs-79{grid-row-start:79}.rs-80{grid-row-start:80}.rs-81{grid-row-start:81}.rs-82{grid-row-start:82}.rs-83{grid-row-start:83}.rs-84{grid-row-start:84}.rs-85{grid-row-start:85}.rs-86{grid-row-start:86}.rs-87{grid-row-start:87}.rs-88{grid-row-start:88}.rs-89{grid-row-start:89}.rs-90{grid-row-start:90}.rs-91{grid-row-start:91}.rs-92{grid-row-start:92}.rs-93{grid-row-start:93}.rs-94{grid-row-start:94}.rs-95{grid-row-start:95}.rs-96{grid-row-start:96}.rs-97{grid-row-start:97}.rs-98{grid-row-start:98}.rs-99{grid-row-start:99}.rs-100{grid-row-start:100}
.re-1{grid-row-end:span 1}.re-2{grid-row-end:span 2}.re-3{grid-row-end:span 3}.re-4{grid-row-end:span 4}.re-5{grid-row-end:span 5}.re-6{grid-row-end:span 6}.re-7{grid-row-end:span 7}.re-8{grid-row-end:span 8}.re-9{grid-row-end:span 9}.re-10{grid-row-end:span 10}.re-11{grid-row-end:span 11}.re-12{grid-row-end:span 12}.re-13{grid-row-end:span 13}.re-14{grid-row-end:span 14}.re-15{grid-row-end:span 15}.re-16{grid-row-end:span 16}.re-17{grid-row-end:span 17}.re-18{grid-row-end:span 18}.re-19{grid-row-end:span 19}.re-20{grid-row-end:span 20}.re-21{grid-row-end:span 21}.re-22{grid-row-end:span 22}.re-23{grid-row-end:span 23}.re-24{grid-row-end:span 24}.re-25{grid-row-end:span 25}.re-26{grid-row-end:span 26}.re-27{grid-row-end:span 27}.re-28{grid-row-end:span 28}.re-29{grid-row-end:span 29}.re-30{grid-row-end:span 30}.re-31{grid-row-end:span 31}.re-32{grid-row-end:span 32}.re-33{grid-row-end:span 33}.re-34{grid-row-end:span 34}.re-35{grid-row-end:span 35}.re-36{grid-row-end:span 36}.re-37{grid-row-end:span 37}.re-38{grid-row-end:span 38}.re-39{grid-row-end:span 39}.re-40{grid-row-end:span 40}.re-41{grid-row-end:span 41}.re-42{grid-row-end:span 42}.re-43{grid-row-end:span 43}.re-44{grid-row-end:span 44}.re-45{grid-row-end:span 45}.re-46{grid-row-end:span 46}.re-47{grid-row-end:span 47}.re-48{grid-row-end:span 48}.re-49{grid-row-end:span 49}.re-50{grid-row-end:span 50}.re-51{grid-row-end:span 51}.re-52{grid-row-end:span 52}.re-53{grid-row-end:span 53}.re-54{grid-row-end:span 54}.re-55{grid-row-end:span 55}.re-56{grid-row-end:span 56}.re-57{grid-row-end:span 57}.re-58{grid-row-end:span 58}.re-59{grid-row-end:span 59}.re-60{grid-row-end:span 60}.re-61{grid-row-end:span 61}.re-62{grid-row-end:span 62}.re-63{grid-row-end:span 63}.re-64{grid-row-end:span 64}.re-65{grid-row-end:span 65}.re-66{grid-row-end:span 66}.re-67{grid-row-end:span 67}.re-68{grid-row-end:span 68}.re-69{grid-row-end:span 69}.re-70{grid-row-end:span 70}.re-71{grid-row-end:span 71}.re-72{grid-row-end:span 72}.re-73{grid-row-end:span 73}.re-74{grid-row-end:span 74}.re-75{grid-row-end:span 75}.re-76{grid-row-end:span 76}.re-77{grid-row-end:span 77}.re-78{grid-row-end:span 78}.re-79{grid-row-end:span 79}.re-80{grid-row-end:span 80}.re-81{grid-row-end:span 81}.re-82{grid-row-end:span 82}.re-83{grid-row-end:span 83}.re-84{grid-row-end:span 84}.re-85{grid-row-end:span 85}.re-86{grid-row-end:span 86}.re-87{grid-row-end:span 87}.re-88{grid-row-end:span 88}.re-89{grid-row-end:span 89}.re-90{grid-row-end:span 90}.re-91{grid-row-end:span 91}.re-92{grid-row-end:span 92}.re-93{grid-row-end:span 93}.re-94{grid-row-end:span 94}.re-95{grid-row-end:span 95}.re-96{grid-row-end:span 96}

/* ---------- Phase 2: calendar ---------- */
.card-flush { padding: 0; overflow: hidden; }
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.cal-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.cal-filters input, .cal-filters select { min-height: 2.25rem; padding-block: .3rem; width: auto; }
.cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cal { display: grid; grid-template-rows: 3.25rem; grid-auto-rows: 1.15rem; position: relative; background: var(--surface); }
.cal-corner, .cal-head { position: sticky; top: 0; z-index: 4; background: var(--surface); border-bottom: 1px solid var(--line-strong); }
.cal-corner { left: 0; z-index: 5; }
.cal-head { display: flex; flex-direction: column; justify-content: center; padding: .35rem .6rem; border-left: 1px solid var(--line); font-size: .875rem; line-height: 1.25; overflow: hidden; }
.cal-head small { color: var(--muted); font-size: .75rem; }
.cal-head.is-today { color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.cal-time { position: sticky; left: 0; z-index: 3; padding: .1rem .5rem 0; background: var(--surface); color: var(--muted); font-size: .75rem; line-height: 1.1; font-variant-numeric: tabular-nums; text-align: right; border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
.cal-line { grid-column: 2 / -1; border-top: 1px solid var(--line); pointer-events: none; }
.cal-end { grid-column: 1 / -1; height: 0; }
.cal-off { background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, #e9ece8 6px 12px); opacity: .9; }
.cal-slot { z-index: 1; border-left: 1px solid var(--line); }
.cal-slot:hover { background: var(--accent-soft); }
.cal-slot:hover::after { content: "+"; display: grid; place-items: center; height: 100%; color: var(--accent); font-weight: 700; }
.cal-event { z-index: 2; margin: 1px 3px; padding: .25rem .45rem; border-radius: 6px; border-left: 4px solid var(--ev); background: var(--ev-soft); color: var(--ink); text-decoration: none; font-size: .8125rem; line-height: 1.25; overflow: hidden; display: flex; flex-direction: column; min-height: 0; box-shadow: 0 1px 2px rgb(16 28 22 / .08); }
.cal-event:hover { color: var(--ink); filter: brightness(.97); z-index: 3; }
.cal-event strong { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-event span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.cal-event .cal-event-time { font-size: .75rem; color: var(--ev); font-weight: 650; }
.cal-event.status-pending { border-left-style: dashed; background: repeating-linear-gradient(135deg, var(--ev-soft) 0 8px, var(--surface) 8px 16px); }
.cal-event.status-completed { opacity: .75; }
.cal-event.is-compact { flex-direction: row; align-items: center; gap: .3rem; padding-block: 0 .05rem; white-space: nowrap; }
.cal-event.is-compact > * { flex: none; }
.cal-event.is-compact > span:last-child { flex: 1 1 auto; min-width: 0; }
.cal-event.lane-1 { margin-left: 35%; }
.cal-event.lane-2 { margin-left: 60%; }
.cal-legend { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-top: 1px solid var(--line); margin: 0; }
.cal-legend-off { width: 1rem; height: .75rem; border-radius: 3px; background: repeating-linear-gradient(135deg, var(--surface-2) 0 3px, #e1e5e0 3px 6px); }
.cal-phone-list { display: none; }
@media (max-width: 40rem) {
  .cal-card-day { display: none; }
  .cal-phone-list { display: block; }
  .cal-filters { margin-left: 0; width: 100%; }
}

/* Service colours (text is dark ink on the soft tint; the strong tone is the edge and time label). */
.svc-teal { --ev: #0f766e; --ev-soft: #e0f2ef; }
.svc-blue { --ev: #1d4ed8; --ev-soft: #e3ebfb; }
.svc-indigo { --ev: #4338ca; --ev-soft: #e8e7fb; }
.svc-violet { --ev: #7c3aed; --ev-soft: #efe7fd; }
.svc-pink { --ev: #be185d; --ev-soft: #fbe7f0; }
.svc-red { --ev: #b91c1c; --ev-soft: #fbe6e6; }
.svc-orange { --ev: #c2410c; --ev-soft: #fdebe0; }
.svc-amber { --ev: #92400e; --ev-soft: #fbf0d6; }
.svc-green { --ev: #15803d; --ev-soft: #e3f3e8; }
.svc-slate { --ev: #475569; --ev-soft: #eceff3; }

.month { display: flex; flex-direction: column; }
.month-head, .month-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-head span { padding: .5rem; font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.month-day { display: flex; flex-direction: column; gap: .15rem; min-height: 6.5rem; padding: .4rem .45rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .75rem; overflow: hidden; }
.month-week .month-day:last-child { border-right: 0; }
.month-day:hover { background: var(--surface-2); color: var(--ink); }
.month-day.is-outside { color: var(--muted); background: #fafbf9; }
.month-date { font-weight: 700; font-size: .875rem; font-variant-numeric: tabular-nums; }
.month-day.is-today .month-date { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.month-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .05rem .3rem; border-radius: 4px; background: var(--accent-soft); color: var(--ink-2); }
.month-item.is-pending { background: var(--warning-soft); }
.month-more { color: var(--muted); font-weight: 600; }
@media (max-width: 40rem) {
  .month-day { min-height: 3.5rem; }
  .month-item { display: none; }
  .month-day:has(.month-item)::after { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); }
  .month-more { display: none; }
}

/* ---------- Phase 2: forms and settings ---------- */
.button-danger { background: var(--surface); color: var(--danger); border-color: #f1cbc5; }
.button-danger:hover { background: var(--danger-soft); color: var(--danger); border-color: #e6a99f; }
.input-prefix { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.input-prefix span { display: flex; align-items: center; padding: 0 .6rem; background: var(--surface-2); color: var(--muted); font-size: .875rem; white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.input-prefix input { border: 0; border-radius: 0; min-width: 0; }
.has-error .input-prefix { border-color: var(--danger); }
.color-input { width: 4.5rem; padding: .25rem; cursor: pointer; }
textarea.code { font-family: var(--mono); font-size: .8125rem; background: var(--surface-2); }
.embed-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; }
.embed-options > div { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.embed-options textarea { width: 100%; }
.table-scroll { overflow-x: auto; }
.schedule-table { min-width: 64rem; table-layout: auto; }
.schedule-table tbody th { width: 9rem; }
.schedule-table th small { display: block; font-weight: 450; font-size: .75rem; }
.break-cell { white-space: nowrap; }
.break-cell input { width: 7.5rem !important; display: inline-block; }
.time-off-list li, .category-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.time-off-list li:first-child, .category-list li:first-child { border-top: 0; }
.time-off-list small { display: block; color: var(--muted); font-size: .8125rem; }
.category-form { display: flex; gap: .5rem; flex: 1 1 16rem; }
.category-form input { min-height: 2.25rem; padding-block: .3rem; }
.category-form .order-input { width: 5rem; flex: none; }
.assign { display: flex; flex-direction: column; gap: .75rem; }
.assign-table { width: 100%; border-collapse: collapse; min-width: 26rem; }
.assign-table th, .assign-table td { padding: .45rem .4rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.assign-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.assign-table tbody th small { display: block; font-weight: 450; }
.assign-table input[type="checkbox"] { width: 1.2rem; height: 1.2rem; min-height: 0; accent-color: var(--accent); }
.assign-table input:not([type]) , .assign-table input[inputmode] { min-height: 2.25rem; padding-block: .3rem; width: 7rem; }
.quick-customer { border-top: 0; padding-top: 0; }
.quick-customer legend { font-size: .9375rem; }
.move-form { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.move-form h3 { margin: 0; }
.special-days { max-width: 44rem; display: flex; flex-direction: column; gap: 1rem; }

/* ---------- Phase 2: public booking ---------- */
.choice-group { float: none; padding: 0; margin: .5rem 0 .25rem; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
fieldset.choice-list { gap: .5rem; }
a.choice.choice-row { flex-direction: row; align-items: center; justify-content: space-between; }
a.choice.choice-row > span:first-child { display: flex; flex-direction: column; gap: .1rem; }
.manage-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.confirm-mark.is-cancelled { background: var(--neutral-soft); color: var(--neutral); }
body.public.is-embed { background: transparent; min-height: 0; }
body.public.is-embed .public-header { padding-top: .5rem; }
body.public.is-embed .public-main { padding-bottom: 1rem; }

/* ---------- Phase 2B: photos, profiles, search, booking payments ---------- */
.avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2); }
.avatar-lg { width: 3.25rem; height: 3.25rem; }
.avatar-xl { width: 4.5rem; height: 4.5rem; }
.avatar-initials, .avatar-any { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; letter-spacing: .02em; }
.avatar-xl.avatar-initials { font-size: 1.5rem; }
.photo-current { display: flex; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.photo-current .field-check { display: flex; align-items: center; gap: .4rem; }
.photo-current input[type="checkbox"] { width: 1.1rem; height: 1.1rem; min-height: 0; accent-color: var(--accent); }
input[type="file"] { padding: .45rem; background: var(--surface-2); }
.profile-id { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.profile-id .lead { overflow-wrap: anywhere; }
.split-profile { grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); }
.details { margin: 0; display: grid; gap: .5rem; }
.details div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.details dt { color: var(--muted); font-size: .875rem; }
.details dd { margin: 0; }
.notes { white-space: normal; overflow-wrap: anywhere; }
.timeline-profile li { grid-template-columns: minmax(0, 1fr) auto; }
.timeline-side { display: flex; align-items: center; gap: .6rem; }
.text-warning { color: var(--warning); font-weight: 600; }
.tag-warning { background: var(--warning-soft); color: var(--warning); }
.heading-link { color: inherit; text-decoration: none; }
.heading-link:hover { color: var(--accent); text-decoration: underline; }
.row-link { font-weight: 600; }
.top-search { flex: 0 1 16rem; min-width: 0; }
.top-search input { width: 100%; min-height: 2.25rem; padding-block: .3rem; }
.search-page { flex: none; max-width: 36rem; align-items: center; }
.search-page input { min-height: var(--tap); }
.result-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.result-list li:first-child { border-top: 0; }
.result-list a { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--ink); }
.result-list a:hover strong { color: var(--accent); text-decoration: underline; }
.result-list .muted { font-size: .875rem; }
.search-group h2 { margin-bottom: .5rem; }
a.choice.choice-person { justify-content: flex-start; }
a.choice.choice-person > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
a.choice.choice-person small { color: var(--muted); font-size: .8125rem; }
.pay-note { display: flex; flex-direction: column; gap: .25rem; padding: .85rem 1rem; border-radius: var(--radius); background: var(--accent-soft); color: var(--ink); }
.pay-note span { color: var(--ink-2); font-size: .9375rem; }
.pay-choice legend { font-weight: 650; margin-bottom: .25rem; }
.pay-choice input[type="radio"] { width: 1.3rem; height: 1.3rem; min-height: 0; accent-color: var(--accent); flex: none; }
.pay-cta { width: 100%; }
.button-lg { min-height: 3.25rem; font-size: 1.0625rem; }
.confirm-mark.is-waiting { background: var(--warning-soft); color: var(--warning); }
@media (max-width: 64rem) {
  .top-search { flex-basis: 10rem; }
}
@media (max-width: 52rem) {
  .split-profile { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .top-search { display: none; }
  .profile-header .page-actions { width: 100%; }
  .timeline-profile li { grid-template-columns: minmax(0, 1fr); }
  .details div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}

/* ---------- Phase 3: POS, invoices, refunds, receipts ---------- */
.split-pos { grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); }
.split-invoice { grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); }
.pos-summary { position: sticky; top: 5rem; display: flex; flex-direction: column; gap: 1rem; }
.pos-summary .totals { max-width: none; margin: 0; }
.pos-summary .totals-strong { font-size: 1.375rem; }
[data-pos-summary].is-stale { opacity: .55; }
.pos-actions { display: flex; flex-direction: column; gap: .5rem; }
.button-block { width: 100%; justify-content: center; }
.pos-line { display: grid; gap: .75rem; margin: 0; padding: .9rem 0 0; border: 0; border-top: 1px solid var(--line); }
.pos-line:first-of-type { border-top: 0; padding-top: 0; }
.pos-line-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .75rem; }
.pos-line-custom { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .75rem; }
.pos-line-numbers { display: grid; grid-template-columns: 6rem 9rem; gap: .75rem; }
.pos-line .field { margin: 0; }
.invoice-lines td small, .receipt-table small { color: var(--muted); }
.totals-after { margin-top: .5rem; }
.danger-zone summary { cursor: pointer; font-weight: 650; color: var(--danger); }
.danger-zone[open] summary { margin-bottom: 1rem; }
.segmented-wrap { margin-bottom: 1rem; width: fit-content; max-width: 100%; }
.rate-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; flex: 1 1 100%; }
.rate-form input[name="rate_name"] { flex: 1 1 10rem; min-height: 2.25rem; padding-block: .3rem; }
.input-suffix { display: inline-flex; align-items: center; gap: .25rem; }
.input-suffix input { width: 5rem; min-height: 2.25rem; padding-block: .3rem; }
.inline-check { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; white-space: nowrap; }
.inline-check input { width: 1.1rem; height: 1.1rem; min-height: 0; accent-color: var(--accent); }
.tax-table { margin-top: 1rem; }
.tax-table caption { text-align: left; font-weight: 650; font-size: .875rem; padding-bottom: .25rem; }
.till { width: 76mm; max-width: 100%; margin: 0 auto; background: #fff; color: #000; padding: 4mm; font: 12px/1.35 var(--mono); }
.till header, .till footer { text-align: center; }
.till h1 { font-size: 15px; margin-bottom: 2px; }
.till header p { margin: 0; }
.till table { width: 100%; border-collapse: collapse; margin-top: 3mm; border-top: 1px dashed #000; }
.till td { padding: 1px 0; vertical-align: top; }
.till td.num { text-align: right; white-space: nowrap; padding-left: 2mm; }
.till-total td { font-weight: 700; font-size: 14px; border-top: 1px dashed #000; padding-top: 2px; }
.till footer { margin-top: 3mm; border-top: 1px dashed #000; padding-top: 2mm; }
@media print {
  .till { width: auto; padding: 0; }
  @page { margin: 6mm; }
}
@media (max-width: 64rem) {
  .split-pos, .split-invoice { grid-template-columns: minmax(0, 1fr); }
  .pos-summary { position: static; }
}
@media (max-width: 40rem) {
  .pos-line-main, .pos-line-custom { grid-template-columns: minmax(0, 1fr); }
  .pos-line-numbers { grid-template-columns: 1fr 1fr; }
  .receipt-table { font-size: .8125rem; }
}
.closed-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.danger-zone .stack { margin-top: .25rem; }

/* ---------- Phase 4: retention ---------- */
.benefits { display: flex; flex-direction: column; gap: .35rem; padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--accent-soft); font-size: .9375rem; }
.benefit-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.benefit-list li:first-child { border-top: 0; }
.benefit-list li > span { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.benefit-list small { color: var(--muted); font-size: .8125rem; }
.benefit-list-compact li { padding: .4rem 0; align-items: center; }
.benefit-list-compact li > span { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
.points-balance { font-size: 1.125rem; }
.points-balance strong { font-size: 1.5rem; }
.inline-cancel { flex: none; }
.inline-cancel[open] { flex-basis: 16rem; }
.inline-cancel summary { list-style: none; }
.inline-cancel summary::-webkit-details-marker { display: none; }
.adjust-points summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.check-list { display: flex; flex-wrap: wrap; gap: .5rem 1rem; border: 0; padding: 0; margin: 0; }
.check-list legend { font-weight: 600; margin-bottom: .35rem; width: 100%; }
.check-list small { width: 100%; }
.package-items { border: 0; padding: 0; margin: 0; }
.package-items legend { font-weight: 650; margin-bottom: .25rem; }
.package-item .field { margin: 0; }
.pos-problems { margin: 0; padding: .6rem .8rem .6rem 1.6rem; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); font-size: .875rem; }
.benefit-list .badge { align-self: flex-start; }
.pay-options { display: flex; flex-direction: column; gap: .5rem; width: 100%; }
.pay-options-inline { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.pay-choose { font-weight: 650; }

/* ---------- Phase 5: team ---------- */
.attendance-list { display: grid; gap: .6rem; }
.attendance-row { display: grid; grid-template-columns: minmax(12rem, 1.2fr) minmax(10rem, 1fr) auto; align-items: center; gap: 1rem; padding-block: .8rem; }
.attendance-who { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.attendance-who > div { display: flex; flex-direction: column; min-width: 0; }
.attendance-state { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.attendance-actions { display: flex; align-items: flex-start; gap: .5rem; justify-content: flex-end; }
.attendance-edit[open] { flex-basis: 18rem; }
.attendance-edit summary { list-style: none; }
.attendance-edit summary::-webkit-details-marker { display: none; }
.leave-actions { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.period-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.period-form label { font-size: .875rem; color: var(--muted); }
.period-form input { min-height: 2.25rem; padding-block: .3rem; width: auto; }
.perf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.perf-card { display: flex; flex-direction: column; gap: .75rem; }
.perf-head { display: flex; align-items: center; gap: .75rem; }
.perf-revenue { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.my-day { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
@media (max-width: 52rem) {
  .attendance-row { grid-template-columns: minmax(0, 1fr); }
  .attendance-actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* ---- Phase 6: messages, notifications ---- */
.topbar .bell { position: relative; margin-left: auto; color: var(--ink-2); }
.topbar .bell + .quick-new { margin-left: 0; }
.bell-count { position: absolute; top: .2rem; right: .15rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--danger); color: #fff; font-size: .6875rem; font-weight: 700; line-height: 1.15rem; text-align: center; }
.notice { border-left: 4px solid var(--warning); background: var(--warning-soft); }
.notice p { margin: 0; }
.status-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.status-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.status-list strong { width: 100%; font-size: .875rem; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.stat-row a { display: flex; flex-direction: column; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow); }
.stat-row a:hover { border-color: var(--line-strong); }
.stat-row strong { font-size: 1.5rem; line-height: 1.2; }
.stat-row span { color: var(--muted); font-size: .8125rem; }
.filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-bottom: 1rem; }
.filter-row .field { flex: 1 1 10rem; margin: 0; }
.table.template-table th[scope="row"] { font-size: .9375rem; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ink); white-space: normal; min-width: 14rem; border-bottom-color: var(--line); }
.template-cell { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.template-cell .tag { margin-left: 0; }
.toggle { display: inline-flex; align-items: center; min-width: 3.5rem; min-height: 2rem; padding: .2rem .7rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-2); color: var(--muted); font: inherit; font-size: .8125rem; font-weight: 650; cursor: pointer; }
.toggle::before { content: ""; width: .6rem; height: .6rem; margin-right: .4rem; border-radius: 50%; background: var(--line-strong); }
.toggle.is-on { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.toggle.is-on::before { background: var(--success); }
.chip-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.chip-list li { padding: .15rem .5rem; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
.message-body { padding: .9rem 1rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); white-space: normal; overflow-wrap: anywhere; font-size: .9375rem; }
.message-list, .notification-list { margin: 0; padding: 0; list-style: none; }
.message-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.message-list li:last-child { border-bottom: 0; }
.message-list .badge { margin-left: auto; }
.notification-list li { border-bottom: 1px solid var(--line); }
.notification-list li:last-child { border-bottom: 0; }
.notification-list a { display: flex; flex-direction: column; gap: .1rem; padding: .8rem .25rem .8rem 1rem; color: inherit; text-decoration: none; border-left: 3px solid transparent; }
.notification-list a:hover { background: var(--surface-2); }
.notification-list .is-unread a { border-left-color: var(--accent); }
.notification-list .is-unread strong::after { content: " •"; color: var(--accent); }
.notification-list span { color: var(--ink-2); font-size: .9375rem; }
.reach { margin: 0; padding: .6rem .8rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-hover); }
.send-message { margin-top: .75rem; }
.public-card { max-width: 32rem; margin: 2rem auto; }
.public-card h1 { margin: 0; font-size: 1.5rem; }
details > summary.button { list-style: none; width: fit-content; }
details > summary.button::-webkit-details-marker { display: none; }
.flash-warning { background: var(--warning-soft); color: var(--warning); border-color: #efdcb1; }

/* ---- Phase 7: inventory ---- */
.purchase-lines { display: grid; gap: .5rem; }
.purchase-line { display: grid; grid-template-columns: minmax(0, 3fr) minmax(5rem, 1fr) minmax(6rem, 1fr); gap: .75rem; align-items: end; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.purchase-line-2 { grid-template-columns: minmax(0, 3fr) minmax(5rem, 1fr); }
.purchase-line .field { margin: 0; }
.purchase-line:not(:first-child) label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.branch-stock { margin: 0; padding: 0; list-style: none; }
.branch-stock li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.branch-stock li:last-child { border-bottom: 0; }
.branch-stock li > span:first-child { flex: 1 1 10rem; }
.big-number { font-size: 1.25rem; line-height: 1.2; }
.table .num.positive { color: var(--success); font-weight: 650; }
.table .num.negative { color: var(--danger); font-weight: 650; }
@media (max-width: 40rem) {
  .purchase-line, .purchase-line-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .purchase-line .field:first-child { grid-column: 1 / -1; }
  .purchase-line:not(:first-child) label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
.search:has(select) { flex-wrap: wrap; max-width: 34rem; }
.search select { flex: 0 1 12rem; min-height: 2.25rem; padding-block: .3rem; }
.search:has(select) input { flex: 1 1 10rem; }
.details.totals { max-width: 22rem; margin-left: auto; }

/* ---- Phase 8: reports ---- */
.report-filters { display: grid; gap: .75rem; margin-bottom: 1.25rem; }
.report-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .75rem; align-items: end; }
.report-filter-grid .field { margin: 0; }
.report-filter-submit { display: flex; align-items: end; }
.range-links { display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.range-links a { padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; font-size: .8125rem; font-weight: 600; }
.range-links a:hover { border-color: var(--line-strong); }
.range-links a[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); }
.stat-row .stat { display: flex; flex-direction: column; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.report-cards small { margin-top: .2rem; font-size: .75rem; }
.change.up { color: var(--success); }
.change.down { color: var(--danger); }
.report-chart { margin: 0 0 1.25rem; }
.report-chart figcaption { font-weight: 650; margin-bottom: .5rem; }
.report-chart svg { display: block; width: 100%; height: 12rem; }
.report-chart .bar { fill: var(--accent); }
.report-chart .bar:hover { fill: var(--accent-hover); }
.report-chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.report-chart .tick { fill: var(--muted); font-size: 11px; }
.report-table .report-totals td { border-top: 2px solid var(--line-strong); background: var(--surface-2); }
.report-notes { margin-top: 1rem; max-width: 60rem; }
.report-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.report-list { margin: 0; padding: 0; list-style: none; }
.report-list a { display: flex; flex-direction: column; gap: .15rem; padding: .6rem 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.report-list li:last-child a { border-bottom: 0; }
.report-list a:hover strong { color: var(--accent); }
@media print {
  .sidebar, .topbar, .report-filters, .page-actions, .skip-link { display: none !important; }
  .shell { display: block; }
  .card, .stat-row a, .report-cards .stat { box-shadow: none; }
  .report-chart svg { height: 9rem; }
}
.report-cards { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.report-cards strong { font-size: 1.25rem; overflow-wrap: anywhere; }
.purchase-line-5 { grid-template-columns: minmax(0, 3fr) minmax(4.5rem, .8fr) minmax(5.5rem, 1fr) minmax(6rem, 1.1fr) minmax(8rem, 1.2fr); }
@media (max-width: 64rem) { .purchase-line-5 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .purchase-line-5 .field:first-child { grid-column: 1 / -1; } .purchase-line-5:not(:first-child) label { position: static; width: auto; height: auto; overflow: visible; clip: auto; } }
.batch-inputs { display: flex; gap: .35rem; margin-top: .35rem; } .batch-inputs input { max-width: 9rem; min-height: 2rem; padding-block: .2rem; font-size: .875rem; }
.push-right { margin-left: auto; }
.dashboard-charts, .dashboard-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.dashboard-charts .report-chart { margin: 0; }
.dashboard-lists { margin-top: 1.25rem; }
/* Waiting-area screen */
body.queue-display { margin: 0; min-height: 100dvh; background: #0f2a22; color: #fff; display: flex; flex-direction: column; font-size: clamp(1rem, 2vw, 1.5rem); }
.queue-display header { display: flex; justify-content: space-between; padding: 1.5rem 2.5rem; border-bottom: 1px solid rgb(255 255 255 / .15); }
.queue-display header p { margin: 0; font-weight: 600; }
.queue-display main { flex: 1; display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; padding: 2.5rem; }
.queue-display h1, .queue-display h2 { margin: 0 0 1rem; font-size: 1em; text-transform: uppercase; letter-spacing: .08em; color: rgb(255 255 255 / .7); }
.qd-now ul { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.qd-now li { display: flex; flex-direction: column; align-items: center; padding: 1.5rem 2.5rem; border-radius: 1rem; background: rgb(255 255 255 / .1); }
.qd-now strong { font-size: clamp(4rem, 12vw, 9rem); line-height: 1; }
.qd-now span { margin-top: .5rem; color: rgb(255 255 255 / .8); }
.qd-empty { font-size: 1.5em; color: rgb(255 255 255 / .7); }
.qd-numbers { font-size: 2em; font-weight: 700; word-spacing: .5em; margin: 0 0 2rem; }
.display-link { width: min(26rem, 90vw); padding: 1rem; }
@media (max-width: 48rem) { .queue-display main { grid-template-columns: 1fr; } }
.release-notes { margin: .25rem 0 1rem; padding-left: 1.2rem; } .release-notes li { margin: .2rem 0; font-size: .9375rem; }
.report-summary { margin-top: 1.25rem; max-width: 40rem; }

/* ---------- Backups ---------- */
.file-name, .table .file-name { display: block; min-width: 0; white-space: normal; overflow-wrap: anywhere; }

/* ---------- Phase 9: license page, license server store and admin ---------- */
.license-banner a { margin-left: .35rem; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; align-items: end; margin-bottom: 1.25rem; }
.filters .field, .filters .form-actions { margin: 0; }
.report-card { display: flex; flex-direction: column; gap: .2rem; color: inherit; text-decoration: none; }
a.report-card:hover { border-color: var(--line-strong); }
.store { background: var(--bg, #f6f7f4); }
.store-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding: .9rem clamp(1rem, 4vw, 2.5rem); background: var(--surface); border-bottom: 1px solid var(--line); }
.store-nav { display: flex; gap: 1.25rem; }
.store-nav a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.store-nav a[aria-current="page"] { color: var(--accent-hover); }
.store-main { width: min(100% - 2rem, 72rem); margin: 2rem auto 4rem; display: grid; gap: 1.25rem; }
.store-narrow { width: min(100%, 34rem); margin-inline: auto; }
.store-hero { text-align: center; display: grid; gap: .5rem; margin-bottom: .5rem; }
.store-hero h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.store-note { text-align: center; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; align-items: stretch; }
.plan-card { display: flex; flex-direction: column; }
.plan-card > :last-child { margin-top: auto; }
.plan-price strong { font-size: 1.75rem; }
.plan-includes { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.plan-includes li::before { content: "✓"; color: var(--success); font-weight: 700; margin-right: .5rem; }
.license-key { font-size: 1.25rem; text-align: center; letter-spacing: .04em; }
.upgrade-option { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.upgrade-option:last-of-type { border-bottom: 0; }
.check-list .is-ok { color: var(--success); }
.check-list .is-bad { color: var(--danger); }
.store-hero .lead { max-width: 40rem; margin-inline: auto; }

/* ---------- Phase 10: white label, installable app ---------- */
.brand-logo { width: 2rem; height: 2rem; object-fit: contain; border-radius: 6px; }
.brand-preview { font-size: 1.125rem; }
.guest-support { text-align: center; }

/* Settings → Updates */
.update-version { margin: 0; font-size: 1.125rem; }
.release + .release { border-top: 1px solid var(--line); padding-top: 1rem; }
.release h3 { margin: 0 0 .35rem; }