/* 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: #f6f7f5;
  --surface: #ffffff;
  --surface-2: #eef2ee;
  --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: 14px;
  --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: 15rem;
  --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: 1.75rem; 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: #edf1ed; 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: var(--surface); 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%; 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, tablet, or a narrow column on a wide screen). */
@container (max-width: 44rem) {
  .table-wrap { overflow: visible; margin: 0; padding: 0; }
  .table.table thead, .table.table tfoot th { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table.table, .table.table tbody, .table.table tfoot { display: block; width: 100%; }
  /* Each row is a small card: the first column is its title, the other values sit two to a row with their
     label above, and the actions get a row of real buttons. */
  .table.table tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: .55rem 1rem; width: 100%; padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .table.table tbody tr:last-child { border-bottom: 0; }
  .table.table td, .table.table tbody th { display: block; width: auto; min-width: 0; padding: 0; border: 0; text-align: left; overflow-wrap: break-word; }
  .table.table td:empty { display: none; }
  .table.table td[data-label]::before { content: attr(data-label); display: block; margin: 0 0 .1rem; color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-align: left; }
  .table.table tbody tr > :first-child, .table.table tbody tr > th[scope="row"] { grid-column: 1 / -1; font-size: 1rem; font-weight: 650; color: var(--ink); }
  .table.table tbody tr > :first-child::before, .table.table tbody tr > th[scope="row"]::before { display: none !important; }
  .table.table td[colspan] { grid-column: 1 / -1; }
  .table.table .num { text-align: left; }
  .table.table .actions { grid-column: 1 / -1; width: auto; display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .2rem; text-align: left; white-space: normal; }
  .table.table .actions::before { display: none !important; }
  .table.table .actions .button, .table.table .actions summary.button { min-height: 2.25rem; padding: .35rem .85rem; }
  .table.table .actions .button-ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
  .table.table .actions .button-ghost.button-danger, .table.table .actions .button-danger.button-ghost { color: var(--danger, #b42318); }
}

/* ---------- 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; }
/* Phones: the day name on its own line, then opens / closes / closed side by side with room for "08:00 PM". */
@media (max-width: 40rem) {
  .hours-table:not(.schedule-table) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hours-table:not(.schedule-table), .hours-table:not(.schedule-table) tbody { display: block; }
  .hours-table:not(.schedule-table) tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: .3rem .5rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
  .hours-table:not(.schedule-table) th, .hours-table:not(.schedule-table) td { display: block; width: auto !important; padding: 0; border: 0; }
  .hours-table:not(.schedule-table) tbody th { grid-column: 1 / -1; }
  .hours-table:not(.schedule-table) td:last-child { display: flex; flex-direction: column; align-items: center; gap: .2rem; font-size: .72rem; color: var(--muted); font-weight: 600; }
  .hours-table:not(.schedule-table) td:last-child::before { content: "Closed"; }
}

/* ---------- 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; display: grid; gap: .5rem; justify-items: center; }
.public-footer p { margin: 0; }
.public-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.1rem; }
.public-footer-links a { color: var(--ink-2); }
.site-page { width: min(100%, 46rem); margin: 0 auto; line-height: 1.7; }
.site-page h1 { margin: .2rem 0 .3rem; }
.site-page-body h2 { font-size: 1.15rem; margin: 1.5rem 0 .4rem; }
.site-page-body h3 { font-size: 1rem; margin: 1.1rem 0 .3rem; }
.site-page-body ul, .site-page-body ol { padding-left: 1.3rem; }
.public-main:has(.site-page) { width: min(100% - 2rem, 48rem); }
.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; flex: 1 1 12rem; } /* beside the day buttons when it fits, below them when not */
  .cal-filters input[type="date"] { flex: 1 1 auto; }
}

/* 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 > span { justify-content: flex-end; } /* when it doesn't fit, cut the start, never the "/book/" next to the field */
.input-prefix .prefix-text { flex: none; padding: 0; background: none; max-width: none; }
.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; }
/* Phones and tablets: each day is its own small card (day, then labelled times) instead of a 64rem-wide table. */
@media (max-width: 64rem) {
  .schedule-form .table-scroll { overflow: visible; }
  .schedule-table { min-width: 0; }
  .schedule-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .schedule-table, .schedule-table tbody { display: block; }
  .schedule-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .75rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .schedule-table tbody th, .schedule-table td { display: block; width: auto !important; padding: 0; border: 0; text-align: left !important; }
  .schedule-table tbody th { grid-column: 1 / -1; }
  .schedule-table td::before { content: attr(data-label); display: block; margin-bottom: .2rem; font-size: .75rem; font-weight: 600; color: var(--muted); }
  .schedule-table td.break-cell { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; white-space: normal; }
  .schedule-table td.break-cell::before { flex-basis: 100%; margin-bottom: 0; }
  .schedule-table .break-cell input { width: auto !important; flex: 1 1 0; min-width: 0; }
  .schedule-table td.off-cell { display: flex; align-items: center; gap: .5rem; }
  .schedule-table td.off-cell::before { margin: 0; order: 2; font-size: .875rem; color: var(--ink-2); }
  .schedule-table td[data-label="At"] { grid-column: 1 / -1; }
}
.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; }
/* Fieldsets would otherwise never shrink below their content, pushing wide tables past the screen edge. */
fieldset { min-width: 0; min-inline-size: 0; }
@media (max-width: 40rem) {
  .assign-table { min-width: 0; }
  .assign-table th, .assign-table td { padding-inline: .25rem; }
  .assign-table thead th { font-size: .68rem; letter-spacing: .02em; }
  .assign-table input:not([type]), .assign-table input[inputmode] { width: 100%; padding-inline: .45rem; }
  .assign-table td:nth-child(3) { width: 5.6rem; } .assign-table td:nth-child(4) { width: 3.6rem; } .assign-table td:first-child { width: 1.8rem; }
}
.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: 1 1 18rem; max-width: 25rem; 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; }
.cancel-note { margin: 0; padding: .6rem .85rem; border-radius: 12px; border: 1px dashed var(--line-strong, var(--line)); color: var(--ink-2); }
.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; }
/* A long label wraps instead of running off the screen (e.g. "Confirm booking with the first available stylist" on a phone). */
.button { max-width: 100%; }
.button-block { white-space: normal; text-align: center; }
@media (max-width: 40rem) { .button { white-space: normal; text-align: 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; }
.change-requests .inline-form input { min-height: 2.25rem; width: 11rem; font-size: .875rem; padding-block: .25rem; }
.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; }
.period-field { display: inline-flex; align-items: center; gap: .4rem; } /* a label stays with its date */
@media (max-width: 40rem) {
  .period-field { flex: 1 1 100%; } .period-field label { width: 2.6rem; } .period-field input { flex: 1; min-width: 0; }
}
.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; }
.chart-ticks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: .3rem; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-ticks span { overflow: visible; white-space: nowrap; }
@media (max-width: 40rem) { .chart-ticks span.tick-alt { visibility: hidden; } } /* every other date on a phone, so they don't run together */
.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(min(100%, 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; }
.download-box { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.download-box h2 { margin: 0; font-size: 1.05rem; }
.download-box p { margin: 0; }

/* Reception workspace. Actions lead; reporting stays below the day's work. */
::selection { background: var(--accent-soft); color: var(--ink); }
input, textarea { caret-color: var(--accent); }
.button, .nav a, .desk-actions a { transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out; }
.button:active { background: var(--accent-hover); }
.button-secondary:active, .button-ghost:active { background: var(--surface-2); }
.sidebar-account { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.sidebar-user { min-width: 0; overflow-wrap: anywhere; }
.sidebar-user strong { font-weight: 650; }
.sidebar-help { display: flex; align-items: center; gap: .6rem; min-height: var(--tap); font-size: .875rem; text-decoration: none; color: var(--ink-2); }
.sidebar-foot form .button { justify-content: start; padding-inline: 0; }
.nav a[aria-current="page"] { background: var(--surface); box-shadow: 0 1px 3px rgb(16 28 22 / .08); font-weight: 650; }
.page-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.reception-header { align-items: center; }
.reception-header .lead { font-size: .875rem; margin-top: .5rem; }
.dashboard-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .35rem 0; }
.summary-item { padding: 1rem 1.4rem; border-right: 1px solid var(--line); min-width: 0; }
.summary-item:last-child { border-right: 0; }
.summary-item h2 { color: var(--muted); font-size: .8125rem; font-weight: 550; }
.summary-value { font-size: 1.625rem; font-weight: 650; letter-spacing: -.025em; font-variant-numeric: tabular-nums; margin-block: .3rem .2rem; overflow-wrap: anywhere; }
.summary-note { font-size: .75rem; color: var(--muted); }
.reception-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); align-items: start; gap: 1.25rem; }
.reception-schedule, .reception-desk { display: grid; gap: 1.25rem; min-width: 0; }
.reception-grid .card { padding: 1.25rem; box-shadow: none; }
.reception-grid .card-header { align-items: start; margin-bottom: .75rem; }
.reception-grid .card-header h2 { margin-bottom: .35rem; }
.arrival-panel { background: #f0f6f1; border-color: #d1e1d5; }
.reception-appointments li { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr) auto; align-items: center; gap: .5rem .85rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.reception-appointments li:first-child { border-top: 0; }
.reception-appointments time { font-size: .8125rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.reception-customer { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.reception-customer > div { display: grid; min-width: 0; gap: .15rem; }
.reception-customer strong { font-size: .9375rem; font-weight: 650; overflow-wrap: anywhere; }
.reception-customer strong a { color: var(--ink); text-decoration: none; }
.reception-customer strong a:hover { color: var(--accent); text-decoration: underline; }
.reception-customer span, .reception-customer small { font-size: .8125rem; color: var(--muted); overflow-wrap: anywhere; }
.reception-customer .avatar { width: 2.25rem; height: 2.25rem; font-size: .75rem; flex-shrink: 0; }
.reception-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; }
.reception-status .badge { font-size: .75rem; }
.reception-action { grid-column: 2 / -1; justify-self: end; }
.reception-empty { display: flex; gap: .85rem; align-items: start; padding: 1rem 0 .35rem; }
.reception-empty h3 { font-size: .9375rem; font-weight: 600; margin-bottom: .35rem; }
.reception-empty p { color: var(--muted); font-size: .875rem; max-width: 48ch; }
.empty-symbol { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem; color: var(--accent); }
.desk-empty { font-size: .875rem; color: var(--muted); line-height: 1.65; padding-bottom: .75rem; }
.desk-queue li { display: flex; gap: .75rem; align-items: center; padding: .85rem 0; border-top: 1px solid var(--line); }
.desk-queue li:first-child { border-top: 0; }
.queue-position { display: grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; background: var(--surface-2); border-radius: .5rem; font-size: .875rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.desk-queue strong { display: block; font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.desk-queue small { color: var(--muted); font-size: .8125rem; }
.queue-panel .button-block { margin-top: .75rem; }
.queue-panel > .small { margin-top: .65rem; }
.attention-list li { display: flex; gap: .7rem; padding-block: .75rem; border-top: 1px solid var(--line); }
.attention-list li:first-child { border-top: 0; }
.attention-symbol { color: var(--warning); margin-top: .1rem; }
.attention-list a { font-size: .875rem; font-weight: 600; }
.attention-list p { color: var(--muted); font-size: .8125rem; margin-top: .2rem; }
.snapshot-note { color: var(--muted); font-size: .75rem; padding-top: .65rem; border-top: 1px solid var(--line); }
.desk-actions { padding: .25rem .5rem; }
.desk-actions h2 { font-size: .8125rem; color: var(--muted); margin: .25rem .4rem .5rem; }
.desk-actions a { display: flex; align-items: center; gap: .75rem; padding: .75rem .4rem; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink-2); font-size: .875rem; }
.desk-actions a:hover { color: var(--accent); background: var(--surface-2); }
.desk-actions a span { flex: 1; }
.desk-actions a > .icon:last-child { width: 1rem; }
@container (min-width: 43rem) {
  .reception-appointments li { grid-template-columns: 4.25rem minmax(0, 1fr) auto auto; }
  .reception-action { grid-column: auto; }
}
@container (max-width: 25rem) {
  /* Narrow: the time on one line, then who and what, then the status with its button beside it. */
  .reception-appointments li { grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem; padding: .8rem 0; }
  .reception-appointments time { grid-column: 1 / -1; color: var(--accent); }
  .reception-customer { grid-column: 1 / -1; }
  .reception-customer .avatar { display: none; }
  .reception-status { grid-column: 1; justify-content: start; }
  .reception-action { grid-column: 2; justify-self: end; }
}
@media (max-width: 76rem) { .reception-grid { grid-template-columns: minmax(0, 1fr) 18rem; } }
@media (max-width: 56rem) { .reception-grid { grid-template-columns: minmax(0, 1fr); } .reception-desk { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } }
@media (max-width: 40rem) {
  .dashboard-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-item { padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
  .summary-item:nth-child(even) { border-right: 0; }
  .summary-item:nth-last-child(-n+2) { border-bottom: 0; }
  .reception-header .page-actions { width: 100%; }
  .reception-header .page-actions > .button { flex: 1; padding-inline: .75rem; }
  .reception-desk { grid-template-columns: minmax(0, 1fr); }
  .reception-grid .card { padding: 1rem; }
  .topbar .quick-new { margin-left: auto; }
}
/* Native page transitions preserve normal links, form posts, history, and server authorization. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .app-workspace .sidebar { view-transition-name: app-sidebar; }
  .app-workspace .topbar { view-transition-name: app-topbar; }
  ::view-transition-group(*) { animation-duration: 180ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  ::view-transition-old(app-sidebar), ::view-transition-new(app-sidebar),
  ::view-transition-old(app-topbar), ::view-transition-new(app-topbar) { animation: none; mix-blend-mode: normal; }
}
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } .button, .nav a, .desk-actions a { transition: none; } }
@media print { .reception-grid { display: block; } .reception-desk, .reception-action { display: none; } .reception-schedule { gap: 1rem; } }

.help-intro p { max-width: 70ch; color: var(--muted); line-height: 1.7; }
.help-workflows { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1.25rem; }
.help-workflows .card { display: flex; flex-direction: column; gap: 1rem; }
.help-workflows .card > h2 { margin: 0; }
.help-workflows .button { align-self: start; }
.help-workflows p { max-width: 70ch; }
.help-steps { margin: 0; padding-left: 1.25rem; color: var(--ink-2); display: grid; gap: .65rem; font-size: .9375rem; line-height: 1.65; }
/* Keep identity and sign-out visible while the long desktop menu scrolls independently. */
.sidebar { overflow: hidden; }
.sidebar > .brand, .sidebar-org, .sidebar-foot { flex-shrink: 0; }
.sidebar > .nav { flex: 1; min-height: 0; overflow-y: auto; }
.sidebar-foot { margin-top: .75rem; }

/* =====================================================================================================
   Design refresh: a deep-forest navigation rail, a floating top bar, a command palette (Ctrl/⌘ K),
   calmer surfaces and clearer hierarchy. Everything derives from the same tokens, so a white-label
   accent colour (brand.css) recolours the rail and buttons too. Loaded last so it refines the rules above.
   ===================================================================================================== */
:root {
  --bg: #f3f5f2;
  --surface-2: #edf1ed;
  --line: #e2e7e1;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgb(16 28 22 / .05), 0 8px 24px -12px rgb(16 28 22 / .10);
  --shadow-pop: 0 24px 60px -12px rgb(10 24 18 / .28), 0 4px 12px rgb(10 24 18 / .08);
  --sidebar: 16.5rem;
  --rail: color-mix(in srgb, var(--accent) 32%, #07130e);
  --rail-2: color-mix(in srgb, var(--accent) 22%, #050f0b);
  --rail-ink: #d4e4db;
  --rail-muted: #8db0a0;
  --rail-line: rgb(255 255 255 / .09);
  --rail-hover: rgb(255 255 255 / .07);
  --rail-active: rgb(255 255 255 / .13);
  --rail-mark: #8fe0bf;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
body { background: var(--bg); background-image: radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%); background-attachment: fixed; }
h1 { font-weight: 750; letter-spacing: -.025em; }
h2 { letter-spacing: -.01em; }

/* ----- Navigation rail ----- */
.shell { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar { background: linear-gradient(180deg, var(--rail), var(--rail-2)); border-right: 0; padding: 1.25rem .75rem 1rem; color: var(--rail-ink); gap: 0; }
.sidebar .brand { color: #fff; }
.sidebar > .brand { padding: .25rem .625rem; font-size: 1.125rem; }
.brand-mark { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 55%, #9fe9c9), var(--accent)); color: var(--accent-ink); font-weight: 750; box-shadow: 0 0 0 1px rgb(255 255 255 / .18) inset, 0 4px 12px -2px rgb(0 0 0 / .35); }
.brand-logo { border-radius: 9px; background: #fff; object-fit: contain; }
.sidebar-org { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; max-width: calc(100% - 1rem); margin: .65rem .625rem .5rem; padding: .2rem .65rem; border-radius: 999px; background: var(--rail-hover); color: var(--rail-ink); font-size: .75rem; font-weight: 600; letter-spacing: .01em; }
.sidebar-org::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--rail-mark); flex: none; }
.sidebar > .nav { padding: .25rem 0 .5rem; margin-inline: -.25rem; padding-inline: .25rem; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .2) transparent; }
.sidebar .nav-heading, .sidebar .nav-group > summary { color: var(--rail-muted); }
.nav-group { margin-top: .25rem; }
.nav-group > summary.nav-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .5rem 0 .15rem; padding: .35rem .75rem; border-radius: 8px; list-style: none; cursor: pointer; user-select: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary .icon { width: .9rem; height: .9rem; transition: transform 200ms var(--ease); opacity: .8; }
.nav-group[open] > summary .icon { transform: rotate(90deg); }
.sidebar .nav-group > summary:hover { color: #fff; background: var(--rail-hover); }
.nav-group > summary:focus-visible { outline-offset: -2px; }
.nav-group > ul { display: grid; gap: 1px; padding-bottom: .25rem; }
.sidebar .nav a { position: relative; min-height: 2.5rem; padding: .45rem .75rem; border-radius: 10px; color: var(--rail-ink); font-weight: 550; box-shadow: none; transition: background-color 160ms ease-out, color 160ms ease-out; }
.sidebar .nav a .icon { color: var(--rail-muted); transition: color 160ms ease-out; }
.sidebar .nav a:hover { background: var(--rail-hover); color: #fff; }
.sidebar .nav a:hover .icon { color: #fff; }
.sidebar .nav a[aria-current="page"] { background: var(--rail-active); color: #fff; font-weight: 650; box-shadow: none; }
.sidebar .nav a[aria-current="page"] .icon { color: var(--rail-mark); }
.sidebar .nav a[aria-current="page"]::before { content: ""; position: absolute; left: -.25rem; top: .55rem; bottom: .55rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--rail-mark); }
.sidebar-foot { margin-top: .5rem; padding: .75rem .25rem 0; border-top: 1px solid var(--rail-line); gap: .25rem; }
.sidebar-account { padding: .35rem .5rem; border-radius: 12px; background: var(--rail-hover); }
.sidebar-user { color: #fff; }
.sidebar-user span { color: var(--rail-muted); }
.sidebar .avatar-initials { background: rgb(255 255 255 / .16); color: #fff; }
.sidebar-help { padding: 0 .5rem; color: var(--rail-ink); border-radius: 8px; }
.sidebar-help:hover { color: #fff; background: var(--rail-hover); }
.sidebar-foot form .button { color: var(--rail-muted); padding-inline: .5rem; min-height: 2.25rem; }
.sidebar-foot form .button:hover { background: var(--rail-hover); color: #fff; }
.sidebar :focus-visible { outline-color: #ffd7b8; }

/* The phone menu is light: restore the light link colours there. */
.menu-panel .nav-group > summary.nav-heading { color: var(--muted); }
.menu-panel .nav a { color: var(--ink-2); }
.menu-panel .nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

/* ----- Top bar ----- */
.topbar { min-height: 3.75rem; gap: .65rem; background: rgb(255 255 255 / .8); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid rgb(16 28 22 / .07); }
.branch-switch select { border-radius: 999px; padding-inline: 1rem 2rem; background-color: var(--surface-2); border-color: transparent; font-size: .875rem; min-height: 2.25rem; }
.branch-switch select:hover { border-color: var(--line-strong); }
.branch-label { padding: .3rem .85rem; border-radius: 999px; background: var(--surface-2); font-size: .875rem; }
.top-search { position: relative; }
.top-search .icon { position: absolute; left: .85rem; top: 50%; width: 1.05rem; height: 1.05rem; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.top-search input { min-height: 2.5rem; padding-left: 2.5rem; padding-right: 4rem; border-radius: 999px; border-color: transparent; background: var(--surface-2); font-size: .9375rem; transition: background-color 160ms, border-color 160ms, box-shadow 160ms; }
.top-search input:hover { background: #e7ece7; }
.top-search input:focus-visible { background: var(--surface); border-color: var(--line-strong); box-shadow: var(--shadow); }
.kbd-hint, .palette kbd { font: 600 .6875rem/1 var(--font); padding: .22rem .45rem; border-radius: 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--surface); color: var(--muted); }
.top-search .kbd-hint { position: absolute; right: .65rem; top: 50%; transform: translateY(-50%); display: inline-block; pointer-events: none; }
.quick-new > summary { border-radius: 999px; padding-inline: 1.1rem; }
.menu-panel { border-radius: 14px; padding: .4rem; box-shadow: var(--shadow-pop); border-color: rgb(16 28 22 / .08); animation: pop 160ms var(--ease); }
.menu-panel > li > a { border-radius: 9px; }
.bell-count { box-shadow: 0 0 0 2px var(--surface); }

/* ----- Page structure ----- */
.content { gap: 1.5rem; padding-block: clamp(1.25rem, 3vw, 2.25rem) 4rem; }
.page-header { align-items: center; padding-bottom: .25rem; }
.page-header h1 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
.lead { font-size: .9375rem; line-height: 1.55; }
.card { border-color: rgb(16 28 22 / .07); border-radius: var(--radius); box-shadow: var(--shadow); }
.card > h2:first-child, .card .card-header h2 { display: flex; align-items: center; gap: .5rem; }
.tabs, .segmented { background: rgb(16 28 22 / .05); border-radius: 12px; padding: .25rem; }
.tabs a, .segmented a { border-radius: 9px; transition: background-color 160ms, color 160ms; }
.tabs a:hover:not([aria-current]), .segmented a:hover:not([aria-current]) { background: rgb(255 255 255 / .6); color: var(--ink); }
.tabs a[aria-current="page"], .segmented a[aria-current="page"] { box-shadow: 0 1px 3px rgb(16 28 22 / .12); }

/* ----- Buttons ----- */
.button { border-radius: 10px; font-weight: 650; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 90%, #fff), var(--accent)); border-color: var(--accent-hover); box-shadow: 0 1px 0 rgb(255 255 255 / .22) inset, 0 1px 2px rgb(16 28 22 / .22); transition: background-color 160ms, border-color 160ms, color 160ms, box-shadow 160ms, transform 120ms var(--ease); }
.button:hover { background: linear-gradient(180deg, var(--accent), var(--accent-hover)); box-shadow: 0 1px 0 rgb(255 255 255 / .16) inset, 0 4px 12px -4px color-mix(in srgb, var(--accent) 70%, transparent); }
.button:active { transform: translateY(1px); box-shadow: none; background: var(--accent-hover); }
.button-secondary { background: var(--surface); border-color: var(--line-strong); box-shadow: 0 1px 2px rgb(16 28 22 / .06); }
.button-secondary:hover { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)); box-shadow: 0 2px 8px -3px rgb(16 28 22 / .18); }
.button-secondary:active { background: var(--surface-2); }
.button-ghost { background: transparent; box-shadow: none; border-color: transparent; }
.button-ghost:hover { background: var(--surface-2); box-shadow: none; }
.button-danger { background: var(--surface); box-shadow: 0 1px 2px rgb(16 28 22 / .06); }
.button-danger:hover { background: var(--danger-soft); box-shadow: none; }

/* ----- Forms, tables, badges ----- */
input, select, textarea { border-radius: 10px; transition: border-color 140ms, box-shadow 140ms; }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 18%, transparent); }
.table th { background: color-mix(in srgb, var(--surface-2) 60%, transparent); font-size: .6875rem; letter-spacing: .06em; }
.table th:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.table th:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.table th { border-bottom-color: transparent; }
.table td { border-bottom-color: rgb(16 28 22 / .06); }
.table tbody tr { transition: background-color 120ms; }
.table tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, #fff); }
.badge { padding: .2rem .65rem; font-size: .75rem; letter-spacing: .01em; }
.count { background: var(--accent-soft); color: var(--accent); }
.flash { border-radius: 12px; }
.empty { border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.metric, .dashboard-summary { border-color: rgb(16 28 22 / .07); }
.metric-value { font-size: 2.1rem; font-weight: 750; }
.details div { border-bottom-color: rgb(16 28 22 / .07); }

/* ----- Command palette ----- */
.palette { width: min(38rem, calc(100vw - 2rem)); max-height: min(30rem, 76dvh); margin: 12dvh auto auto; padding: 0; border: 1px solid rgb(16 28 22 / .1); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); overflow: hidden; }
.palette[open] { animation: pop 180ms var(--ease); }
.palette::backdrop { background: rgb(8 20 15 / .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.palette-box { display: flex; flex-direction: column; max-height: inherit; }
.palette-input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; min-height: 3.5rem; padding: 1rem 1.25rem; font-size: 1.0625rem; background: transparent; box-shadow: none !important; }
.palette-input:focus-visible { outline: none; }
.palette-list { margin: 0; padding: .4rem; list-style: none; overflow-y: auto; min-height: 4rem; }
.palette-list [role="option"] { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .65rem .8rem; border-radius: 10px; cursor: pointer; font-weight: 550; }
.palette-list [role="option"] small { color: var(--muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; flex: none; }
.palette-list [aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.palette-list [aria-selected="true"] small { color: inherit; opacity: .8; }
.palette-empty { padding: 1.25rem .8rem; color: var(--muted); }
.palette-foot { display: flex; gap: 1.25rem; padding: .6rem 1rem; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: .75rem; }
.palette-foot kbd { padding: .12rem .35rem; }

/* ----- Export data ----- */
.export-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.5rem; align-items: start; }
.export-panel { position: sticky; top: 5.25rem; }
.export-total { font-size: .9375rem; }
.export-total strong { font-size: 2rem; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-right: .25rem; }
.export-quick { display: flex; gap: .5rem; }
.export-group { padding-top: clamp(1rem, 2.5vw, 1.5rem); }
.export-group legend { float: left; width: 100%; padding: 0; margin-bottom: .25rem; font-size: 1rem; font-weight: 650; } /* inside the card, not across its top edge */
.export-group legend + * { clear: both; }
.export-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; }
.export-item { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color 140ms, background-color 140ms, box-shadow 140ms; }
.export-item:hover { border-color: var(--line-strong); }
.export-item:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); }
.export-item:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.export-item input { width: 1.15rem; height: 1.15rem; min-height: 0; margin-top: .15rem; accent-color: var(--accent); flex: none; }
.export-item span { display: flex; flex-direction: column; min-width: 0; }
.export-item small { color: var(--muted); font-size: .8125rem; }
@media (max-width: 64rem) { .export-layout { grid-template-columns: minmax(0, 1fr); } .export-panel { position: static; order: -1; } }

/* ----- Install from a file / system ----- */
#install-file ul, #install-title ~ ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
input[type="file"] { padding: .55rem; background: var(--surface-2); border-style: dashed; cursor: pointer; }
input[type="file"]::file-selector-button { margin-right: .75rem; padding: .45rem .85rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; font-size: .875rem; cursor: pointer; }

/* ----- Sign-in and installer pages ----- */
body.guest { background: radial-gradient(48rem 28rem at 15% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), radial-gradient(40rem 26rem at 100% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), var(--bg); place-items: center; padding-block: clamp(1rem, 8vh, 6rem); }
.guest-card { border-radius: 22px; border-color: rgb(16 28 22 / .06); box-shadow: var(--shadow-pop); padding: clamp(1.75rem, 5vw, 2.75rem); gap: 1.1rem; }
.guest-card .brand { margin-bottom: .75rem; font-size: 1.125rem; }
.guest-card h1 { font-size: 1.75rem; }

/* ----- Motion: pages ease in; nothing moves for people who ask for less motion ----- */
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .content > * { animation: rise 420ms var(--ease) both; }
  .content > :nth-child(2) { animation-delay: 40ms; }
  .content > :nth-child(3) { animation-delay: 80ms; }
  .content > :nth-child(4) { animation-delay: 120ms; }
  .content > :nth-child(n+5) { animation-delay: 160ms; }
}

/* ----- Responsive refinements ----- */
@media (max-width: 64rem) {
  .topbar { background: rgb(255 255 255 / .92); }
}
@media (max-width: 40rem) {
  .metric-value { font-size: 1.75rem; }
  .palette { margin-top: 6dvh; }
  /* Phone top bar: menu, where you are (business/branch), alerts and New: nothing may push past the edge. */
  .topbar { gap: .35rem; padding-inline: .75rem; }
  .topbar .brand-compact { display: none; }
  .topbar .branch-switch, .topbar .branch-label { flex: 1 1 0; min-width: 0; }
  .topbar .branch-switch select { width: 100%; padding-inline: .75rem 1.75rem; }
  .topbar .branch-label { text-align: center; }
  .topbar .bell, .topbar .quick-new { flex: none; }
  .topbar .bell { margin-left: 0; }
  .quick-new > summary { padding-inline: .85rem; }
  .menu-panel-left { width: min(20rem, calc(100vw - 1.5rem)); }
}
@media print {
  body { background: #fff; }
  .palette { display: none; }
}

/* Admin top bar of the license server: the jump box and the main action. */
.top-search-trigger { display: inline-flex; align-items: center; gap: .6rem; flex: 0 1 25rem; min-width: 0; min-height: 2.5rem; padding: 0 .65rem 0 .9rem; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--muted); font: inherit; font-size: .9375rem; cursor: pointer; text-align: left; transition: background-color 160ms, box-shadow 160ms; }
.top-search-trigger:hover { background: #e7ece7; }
.top-search-trigger .icon { width: 1.05rem; height: 1.05rem; }
.top-search-trigger span { flex: 1; }
.top-search-trigger .kbd-hint { flex: none; }
.topbar-action { margin-left: auto; }
@media (max-width: 64rem) { .top-search-trigger { margin-left: auto; flex: 0 0 auto; } .top-search-trigger span, .top-search-trigger .kbd-hint { display: none; } .topbar-action { margin-left: 0; } }

/* Dashboard tiles: a number first, a label under it, a lift on hover; money tiles are twice as wide. */
.report-cards.stat-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.report-card { position: relative; padding: 1.1rem 1.25rem; transition: transform 160ms var(--ease), box-shadow 160ms, border-color 160ms; }
.report-card > span:first-child { order: 2; font-size: .8125rem; font-weight: 550; }
.report-card > strong { order: 1; font-size: 1.75rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
a.report-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: 0 12px 28px -14px rgb(16 28 22 / .25); }
.report-cards .report-card:nth-last-child(-n+2) { grid-column: span 2; background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%); }
@media (max-width: 64rem) { .report-cards.stat-row { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } .report-cards .report-card:nth-last-child(-n+2) { grid-column: auto; } }
.sidebar > .nav { -webkit-mask-image: linear-gradient(#000 calc(100% - 1.25rem), transparent); mask-image: linear-gradient(#000 calc(100% - 1.25rem), transparent); padding-bottom: 1.25rem; }

/* ----- Sign-in: a brand panel beside the form, "keep me signed in", and show/hide password ----- */
body.auth { background: var(--bg); }
.auth-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); min-height: 100dvh; }
.auth-aside { position: relative; display: flex; overflow: hidden; background: linear-gradient(155deg, var(--rail), var(--rail-2)); color: #dcebe3; isolation: isolate; }
.auth-aside::before { content: ""; position: absolute; width: 34rem; height: 34rem; right: -10rem; top: -12rem; border-radius: 50%; background: radial-gradient(closest-side, rgb(143 224 191 / .26), transparent); z-index: -1; }
.auth-aside::after { content: ""; position: absolute; width: 28rem; height: 28rem; left: -9rem; bottom: -12rem; border-radius: 50%; background: radial-gradient(closest-side, rgb(232 184 109 / .18), transparent); z-index: -1; }
.auth-aside-inner { display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; width: min(100%, 34rem); margin: auto; padding: clamp(2rem, 5vw, 4.5rem); }
.auth-brand { display: flex; align-items: center; gap: .7rem; margin: 0; color: #fff; font-size: 1.2rem; font-weight: 750; letter-spacing: -.02em; }
.auth-aside h2 { color: #fff; font-size: clamp(2rem, 3.3vw, 3rem); font-weight: 750; letter-spacing: -.035em; line-height: 1.08; }
ul.auth-points { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; color: #b9d3c5; font-size: 1rem; }
.auth-points li { display: flex; gap: .65rem; align-items: center; }
.auth-points li::before { content: ""; width: 1.1rem; height: 1.1rem; flex: none; border-radius: 50%; background: rgb(143 224 191 / .2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fe0bf' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat; }
.auth-cards { display: grid; gap: .8rem; margin-top: .8rem; }
.auth-card { display: flex; align-items: center; gap: .8rem; width: min(100%, 21rem); padding: .8rem 1rem; border-radius: 14px; background: rgb(255 255 255 / .97); color: var(--ink); box-shadow: 0 24px 44px -20px rgb(0 0 0 / .55); animation: auth-bob 7s ease-in-out infinite; }
.auth-card div { display: grid; flex: 1; min-width: 0; }
.auth-card strong { font-size: .875rem; }
.auth-card small { color: var(--muted); font-size: .78rem; }
.auth-card b { padding: .15rem .6rem; border-radius: 999px; background: var(--success-soft); color: var(--success); font-size: .72rem; font-weight: 650; white-space: nowrap; }
.auth-dot { width: .6rem; height: .6rem; flex: none; border-radius: 50%; background: var(--accent); }
.auth-card-2 { margin-left: 2.5rem; animation-delay: -2.3s; } .auth-card-3 { margin-left: 1rem; animation-delay: -4.6s; }
@keyframes auth-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.auth-main { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3rem); }
.auth-form { display: flex; flex-direction: column; gap: 1.15rem; width: min(100%, 26rem); }
.auth-form h1 { font-size: clamp(1.9rem, 3vw, 2.4rem); letter-spacing: -.03em; }
.auth-form .lead { margin-top: -.5rem; }
.auth-brand-mobile { display: none; }
.input-group { position: relative; display: flex; }
.input-group input { padding-right: 4.75rem; }
.input-toggle { position: absolute; right: .4rem; top: 50%; translate: 0 -50%; min-height: 2rem; padding: .2rem .75rem; border: 0; border-radius: 8px; background: transparent; color: var(--accent); font: inherit; font-weight: 650; font-size: .875rem; cursor: pointer; }
.input-toggle:hover { background: var(--accent-soft); }
.auth .field-check { padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
@media (max-width: 56rem) {
  .auth-split { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { display: none; }
  .auth-brand-mobile { display: inline-flex; margin-bottom: .5rem; font-size: 1.2rem; }
  .auth-main { align-items: start; padding-top: clamp(2rem, 10vh, 5rem); }
}
@media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } }

/* Phones and tablets: one column. (The navigation-rail rules above come later than the responsive block, so this must come last.) */
@media (max-width: 64rem) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .topbar { background: rgb(255 255 255 / .92); }
}

/* =====================================================================================================
   Glass theme (glassmorphism): frosted, translucent panels over a soft aurora, with a bright top edge and a
   deep soft shadow. Shared by the app, the license admin, the sign-in pages and the public website. Only
   chrome and cards go glass; tables and forms sit on a more opaque pane so numbers stay easy to read.
   Falls back to plain white panes where blur isn't supported or when the person asks for less transparency.
   ===================================================================================================== */
:root {
  --glass: rgb(255 255 255 / .56);
  --glass-strong: rgb(255 255 255 / .74);
  --glass-soft: rgb(255 255 255 / .38);
  --glass-edge: rgb(255 255 255 / .72);
  --glass-line: rgb(255 255 255 / .55);
  --glass-shadow: 0 12px 40px -14px rgb(12 64 48 / .24), 0 2px 6px rgb(12 64 48 / .05), inset 0 1px 0 rgb(255 255 255 / .85);
  --glass-blur: blur(22px) saturate(175%);
  --glass-dark: linear-gradient(155deg, rgb(24 80 62 / .78), rgb(9 34 26 / .86));
  --glass-dark-edge: rgb(255 255 255 / .16);
  --aurora-a: #bfe5d1; --aurora-b: #f6e2b2; --aurora-c: #a8d8e4; --aurora-d: #d9cbf0;
}
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46rem 34rem at 10% 6%, var(--aurora-a), transparent 62%),
    radial-gradient(40rem 30rem at 92% 12%, var(--aurora-b), transparent 64%),
    radial-gradient(50rem 38rem at 80% 92%, var(--aurora-c), transparent 62%),
    radial-gradient(36rem 28rem at 6% 94%, var(--aurora-d), transparent 62%),
    var(--bg); }
body.queue-display::before, body.print-page::before, body.public.is-embed::before { display: none; }
body { background: transparent; background-image: none; }
body.public:not(.is-embed), body.print-page, body.queue-display { background: var(--bg); }
body.queue-display { background: #0f2a22; } body.print-page { background: var(--surface-2); }

/* Panes */
.card, .metric, .dashboard-summary, .guest-card, .menu-panel, .palette, .agenda-item, .queue-item, .status-list li, .setup-steps li {
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
/* Menus that open over the page (the phone/tablet menu, the account menu) live inside the frosted top bar, and a
   blur inside a blur shows nothing, so they'd be see-through: they get a solid pane instead. */
.menu-panel { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 18px 50px -12px rgb(8 30 22 / .35), 0 2px 8px rgb(8 30 22 / .08); }
.card-flat { background: var(--glass-soft); box-shadow: none; }
.table-wrap { background: var(--glass-strong); border-radius: 12px; }
.table th { background: rgb(255 255 255 / .5); }
.table tbody tr:hover { background: rgb(255 255 255 / .6); }
.topbar { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-edge); box-shadow: 0 8px 30px -22px rgb(12 64 48 / .4); }
.top-search input, .branch-switch select, .branch-label { background: rgb(255 255 255 / .55); border: 1px solid var(--glass-line); }
.top-search input:focus-visible { background: rgb(255 255 255 / .9); }
input, select, textarea { background: rgb(255 255 255 / .78); border-color: rgb(12 64 48 / .16); }
.badge { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6); }
.tabs, .segmented { background: var(--glass-soft); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tabs a[aria-current="page"], .segmented a[aria-current="page"] { background: var(--glass-strong); }
.field-check, .auth .field-check { background: rgb(255 255 255 / .6); border-color: var(--glass-line); }
.palette::backdrop { background: rgb(8 30 22 / .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.palette { background: var(--glass-strong); }
.palette-foot { background: rgb(255 255 255 / .45); }

/* The navigation rail: dark glass */
.sidebar { background: var(--glass-dark); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset -1px 0 0 var(--glass-dark-edge), 18px 0 50px -30px rgb(8 30 22 / .55); }
.sidebar-account { background: rgb(255 255 255 / .1); border: 1px solid var(--glass-dark-edge); }

/* Sign-in pages */
.auth-aside { background: var(--glass-dark); }
.auth-card { background: rgb(255 255 255 / .95); border: 1px solid rgb(255 255 255 / .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.auth-main { background: transparent; }
.auth-form { padding: clamp(1.5rem, 3.5vw, 2.4rem); border-radius: 26px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
body.guest, body.auth { background: transparent; }
.guest-card { border-radius: 26px; }

/* Admin dashboard bits that were solid */
.reception-desk, .reception-schedule .card, .report-card { background: var(--glass); }
a.report-card:hover { background: var(--glass-strong); }

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root { --glass: rgb(255 255 255 / .94); --glass-strong: #fff; --glass-soft: rgb(255 255 255 / .85); --glass-dark: linear-gradient(155deg, #1b4a3c, #0f2c23); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: #fff; --glass-strong: #fff; --glass-soft: #f1f5ef; --glass-dark: linear-gradient(155deg, #1b4a3c, #0f2c23); --glass-blur: none; }
  .card, .topbar, .sidebar, .auth-form, .palette { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: aurora-drift 40s ease-in-out infinite alternate; }
  @keyframes aurora-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-2%, 1.5%, 0) scale(1.06); } }
}
@media print { body::before { display: none; } .card { background: #fff; box-shadow: none; } }

/* ---- Customer "My account" on the booking site ---- */
.public-header { flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.public-nav { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--glass, rgb(255 255 255 / .6)); border: 1px solid var(--glass-edge, var(--line)); }
.public-nav a { padding: .4rem .9rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .88rem; color: var(--ink-2, inherit); }
.public-nav a[aria-current="page"] { background: var(--accent); color: #fff; }
.public-main:has(.account-head), .public-main:has(.account-sign-in) { width: min(100% - 2rem, 64rem); }
.account-sign-in { display: grid; gap: 1.75rem; width: min(100%, 54rem); margin: 0 auto; padding-bottom: 1rem; }
.account-hero { text-align: center; max-width: 38rem; margin: 1rem auto 0; }
.account-hero .eyebrow { margin: 0; }
.account-hero h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); line-height: 1.15; margin: .35rem 0 .7rem; text-wrap: balance; }
.account-hero .lead { margin: 0; text-wrap: pretty; }
.account-sign-in > .flash { margin: 0; }
.account-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.25rem; align-items: stretch; }
.account-ways > .card { display: flex; flex-direction: column; gap: .9rem; padding: 1.5rem; }
.account-ways > .card h2 { margin: 0; font-size: 1.15rem; }
.account-ways > .card > .muted { margin: -.4rem 0 .2rem; }
.account-ways > .card .field { margin: 0; }
.account-ways > .card > .button { margin-top: auto; }
.account-back { text-align: center; margin: 0; }
.account-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; padding-top: .5rem; }
.account-head h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin: .2rem 0; }
.account-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.account-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .75rem; }
.account-stat { display: grid; gap: .1rem; padding: 1rem 1.1rem; border-radius: 18px; background: var(--glass, var(--surface)); border: 1px solid var(--glass-edge, var(--line)); box-shadow: var(--glass-shadow, none); -webkit-backdrop-filter: var(--glass-blur, none); backdrop-filter: var(--glass-blur, none); }
.account-stat span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.account-stat strong { font-size: 1.7rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.account-stat small { color: var(--muted); font-size: .78rem; }
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1rem; align-items: start; }
.account-section h2 { font-size: 1.1rem; }
.account-list { display: grid; gap: .6rem; margin: 0; padding: 0; }
.account-list li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .75rem .85rem; border-radius: 14px; background: rgb(255 255 255 / .55); border: 1px solid var(--glass-line, var(--line)); }
.account-when { display: grid; line-height: 1.2; } .account-when span { color: var(--muted); font-size: .82rem; }
.account-what { display: grid; gap: .15rem; min-width: 0; } .account-what strong { overflow-wrap: anywhere; }
.account-side { display: grid; justify-items: end; gap: .3rem; }
.coupon-list { display: grid; gap: .6rem; margin: 0; padding: 0; }
.coupon { display: grid; gap: .25rem; padding: .9rem 1rem; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 7%, rgb(255 255 255 / .7)); }
.coupon-value { font-weight: 750; font-size: 1.15rem; color: var(--accent); }
.coupon-code { justify-self: start; padding: .15rem .55rem; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-weight: 700; letter-spacing: .06em; }
.account-points strong { font-size: 2rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.account-mini { display: grid; gap: .35rem; margin: .4rem 0 0; padding: 0; font-size: .88rem; }
.points-plus { color: #137a4b; font-weight: 700; font-variant-numeric: tabular-nums; } .points-minus { color: #a8401f; font-weight: 700; font-variant-numeric: tabular-nums; }
.account-package + .account-package { margin-top: .6rem; }
.account-more summary { cursor: pointer; font-weight: 600; font-size: .88rem; }
.account-table { width: 100%; }
@media (max-width: 40rem) {
  .account-list li { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .account-side { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: .35rem 1rem; }
  .account-side a { white-space: nowrap; }
  /* The totals side by side, two to a row, so the bookings show on the first screen */
  .account-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .account-stats:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-stat { padding: .7rem .85rem; border-radius: 14px; }
  .account-stat strong { font-size: 1.35rem; }
  .account-head { align-items: flex-start; }
}

/* ---- Barcode / QR scanning ---- */
.scan-card { padding-block: 1rem; }
.scan-box { display: grid; gap: .45rem; }
.scan-label { display: inline-flex; align-items: center; gap: .45rem; font-weight: 650; }
.scan-label .icon { width: 20px; height: 20px; color: var(--accent); }
.scan-row { display: flex; gap: .5rem; align-items: center; }
.scan-row input { flex: 1; min-width: 0; font-family: var(--mono, ui-monospace, monospace); letter-spacing: .02em; border-style: dashed; border-width: 1.5px; }
.scan-row input:focus { border-style: solid; }
.scan-hint { margin: 0; }
.scan-result { margin: 0; font-size: .9rem; font-weight: 600; color: var(--success, #137a4b); min-height: 1.2em; }
.scan-result.is-error { color: var(--danger, #b42318); }
.scan-result a { margin-left: .3rem; }
.scan-video { display: grid; gap: .5rem; justify-items: start; }
.scan-video video { width: min(100%, 26rem); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: #0b1f18; }
.scan-note { display: block; color: var(--muted); font-size: .8rem; margin-top: .25rem; }
.purchase-line.is-scanned { animation: scanned 1.2s ease-out; border-radius: 12px; }
@keyframes scanned { from { background: color-mix(in srgb, var(--accent) 22%, transparent); } to { background: transparent; } }

/* ==========================================================================
   Online booking: two-pane studio layout (summary + steps), month calendar,
   grouped times and a bottom action bar. "Classic" is the light version;
   "Studio" (default) is dark glass tinted with the salon's brand colour.
   ========================================================================== */
.public-main:has(.bk-shell) { width: min(100% - 2rem, 72rem); padding-top: .25rem; }
.bk-shell { --bk-panel: var(--surface); --bk-cell: var(--surface-2); --bk-cell-hover: var(--accent-soft); --bk-hi: var(--accent); --bk-hi-ink: var(--accent-ink);
  display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); border-radius: 26px; overflow: hidden; overflow: clip; /* clip, not a scroll box: the Continue bar stays pinned to the bottom of the screen */
  background: var(--bk-panel); border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgb(8 30 22 / .35); }
.bk-aside { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.6rem 1.4rem; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bk-cell) 60%, transparent); }
.bk-salon-name { font-weight: 750; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; }
.bk-salon-name::after { content: " ✳"; color: var(--bk-hi); }
.bk-salon-branch { margin: .35rem 0 0; font-weight: 600; font-size: .9rem; display: grid; gap: .15rem; }
.bk-salon-branch span { color: var(--muted); font-weight: 450; font-size: .8rem; }
.bk-intro { color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
.bk-picked { display: grid; gap: .75rem; margin: 0; padding: 0; }
.bk-picked li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .75rem; align-items: center; }
.bk-picked-mark { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; font-weight: 800; color: var(--bk-hi-ink); background: linear-gradient(140deg, color-mix(in srgb, var(--bk-hi) 85%, #fff), var(--bk-hi)); }
.bk-picked strong { display: block; text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; }
.bk-picked small { color: var(--muted); font-size: .78rem; }
.bk-facts { display: grid; gap: .55rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.bk-facts div { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
.bk-facts dt { color: var(--muted); } .bk-facts dd { margin: 0; font-weight: 650; text-align: right; }
.bk-facts .bk-total { padding-top: .55rem; border-top: 1px dashed var(--line); font-size: .95rem; }
.bk-small { font-size: .8rem; color: var(--muted); margin: 0; }
.bk-help { margin-top: auto; font-size: .8rem; color: var(--muted); }
.bk-help a, .bk-small a { color: inherit; font-weight: 650; }
.bk-stage { display: flex; flex-direction: column; min-width: 0; }
.bk-progress { padding: 1.4rem 1.6rem .9rem; }
.bk-progress-top { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .7rem; }
.bk-progress-title { font-weight: 700; font-size: 1.02rem; }
.bk-progress-pct { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--bk-hi); }
.bk-progress-count { margin-left: auto; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.bk-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.bk-bars li { position: relative; padding-top: .55rem; font-size: .7rem; font-weight: 600; color: var(--muted); }
.bk-bars li::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 3px; background: var(--line-strong); }
.bk-bars li.is-done::before { background: var(--ink); opacity: .85; }
.bk-bars li.is-current::before { background: linear-gradient(90deg, var(--bk-hi) 55%, var(--line-strong) 55%); }
.bk-bars li.is-current { color: var(--ink); }
.bk-bars a { color: inherit; text-decoration: none; } .bk-bars a:hover { color: var(--bk-hi); }
.bk-body { flex: 1; padding: .6rem 1.6rem 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.bk-body > h1 { font-size: 1.35rem; }
.bk-inline-continue { display: none; }
.bk-bar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.6rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bk-panel) 82%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.bk-chip { margin: 0; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bk-cell); font-weight: 650; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bk-bar-actions { display: flex; align-items: center; gap: 1rem; flex: none; }
.bk-back { color: var(--ink); font-weight: 650; text-decoration: none; }
.bk-back:hover { color: var(--bk-hi); }
.bk-next { border-radius: 999px; padding-inline: 1.6rem; }

/* Date and time side by side */
.bk-when { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.bk-calendar { padding: 1.1rem 1.1rem .9rem; border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--bk-hi) 16%, var(--bk-cell)), var(--bk-cell)); border: 1px solid var(--line); }
.bk-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.bk-cal-month { font-weight: 700; }
.bk-cal-nav { display: flex; gap: .25rem; }
.bk-cal-nav a, .bk-cal-nav span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; font-size: 1.3rem; line-height: 1; color: var(--ink); text-decoration: none; }
.bk-cal-nav a:hover { background: var(--bk-cell-hover); } .bk-cal-nav span { opacity: .3; }
.bk-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; text-align: center; }
.bk-cal-dow { font-size: .74rem; font-weight: 650; color: var(--muted); padding-bottom: .35rem; }
.bk-day { display: grid; place-items: center; aspect-ratio: 1; max-height: 2.9rem; border-radius: 10px; font-weight: 600; font-size: .92rem; font-variant-numeric: tabular-nums; color: var(--ink); text-decoration: none; position: relative; }
a.bk-day:hover { background: var(--bk-cell-hover); }
.bk-day.is-free::after { content: ""; position: absolute; bottom: .3rem; width: 4px; height: 4px; border-radius: 50%; background: var(--bk-hi); }
.bk-day.is-off { color: var(--muted); opacity: .45; }
.bk-day.is-outside { opacity: .22; }
.bk-day.is-today { box-shadow: inset 0 0 0 1px var(--line-strong); }
.bk-day.is-selected { background: var(--bk-hi); color: var(--bk-hi-ink); box-shadow: 0 8px 20px -8px var(--bk-hi); }
.bk-day.is-selected::after { background: var(--bk-hi-ink); }
.bk-cal-key { display: flex; align-items: center; gap: .4rem; margin: .7rem 0 0; font-size: .74rem; color: var(--muted); }
.bk-cal-key span { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .bk-key-free { background: var(--bk-hi); } .bk-key-off { background: var(--line-strong); margin-left: .6rem; }
.bk-times { display: grid; gap: .9rem; align-content: start; }
.bk-times-title { font-weight: 700; font-size: 1.02rem; }
.bk-soon { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; margin: 0; padding: 0; }
.bk-soon a { display: grid; gap: .1rem; padding: .65rem .8rem; border-radius: 12px; background: var(--bk-cell); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.bk-soon a:hover { border-color: var(--bk-hi); } .bk-soon span { color: var(--muted); font-size: .8rem; }
.slot-group { display: grid; gap: .6rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.slot-group:last-child { border-bottom: 0; }
.bk-shell .slot-heading, .slot-heading:has(.slot-icon) { display: flex; align-items: center; gap: .65rem; margin: 0; text-transform: none; letter-spacing: 0; font-size: .92rem; color: var(--ink); font-weight: 650; }
.slot-heading > span:last-child { display: grid; } .slot-heading small { color: var(--muted); font-weight: 450; font-size: .76rem; }
.slot-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--bk-cell); border: 1px solid var(--line); font-size: .9rem; }
.bk-shell .slot-grid { grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .45rem; }
.bk-shell .slot { min-height: 2.6rem; border-radius: 10px; background: var(--bk-cell); border-color: transparent; color: var(--ink); font-weight: 600; font-size: .88rem; }
.bk-shell .slot:hover, .bk-shell .slot.is-selected { background: var(--bk-hi); color: var(--bk-hi-ink); border-color: var(--bk-hi); }

/* Choices inside the studio */
.bk-shell .choice { background: var(--bk-cell); border-color: var(--line); border-radius: 14px; }
.bk-shell .choice:hover { border-color: var(--bk-hi); }
.bk-shell .choice-check:has(input:checked) { border-color: var(--bk-hi); background: color-mix(in srgb, var(--bk-hi) 16%, var(--bk-cell)); }
.bk-shell .choice-group { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: .2rem; }
.bk-step-staff .choice-list[role="list"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.bk-step-services .choice-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.bk-step-services .choice-list > legend { grid-column: 1 / -1; }

/* Add to calendar */
.add-calendar { width: 100%; display: grid; gap: .55rem; padding: 1rem; border-radius: 14px; border: 1px dashed var(--line-strong); text-align: left; }
.add-calendar-title { display: flex; align-items: center; gap: .45rem; font-weight: 700; margin: 0; }
.add-calendar-title .icon { width: 20px; height: 20px; color: var(--accent); }
.add-calendar-links { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---- Studio: dark glass in the salon's colour ---- */
body.public.bk-studio { --bg: #06110e; --surface: rgb(255 255 255 / .055); --surface-2: rgb(255 255 255 / .07); --ink: #eef6f2; --ink-2: #c9dbd2; --muted: #8fa89c; --line: rgb(255 255 255 / .09); --line-strong: rgb(255 255 255 / .17); --success-soft: rgb(52 211 153 / .14); --success: #6ee7b7;
  --glass: rgb(255 255 255 / .06); --glass-soft: rgb(255 255 255 / .04); --glass-strong: rgb(255 255 255 / .1); --glass-edge: rgb(255 255 255 / .12); --glass-line: rgb(255 255 255 / .1); --glass-shadow: 0 30px 60px -30px rgb(0 0 0 / .6);
  color: var(--ink); color-scheme: dark;
  background: radial-gradient(56rem 36rem at 50% 40%, color-mix(in oklab, var(--accent) 55%, #2dd4a8 45%), transparent 70%) fixed, radial-gradient(44rem 30rem at 0% 100%, color-mix(in srgb, var(--accent) 50%, transparent), transparent 70%) fixed, radial-gradient(40rem 30rem at 100% 0%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%) fixed, #050d0b; }
body.public.bk-studio.is-embed { background: #06110e; }
body.public.bk-studio::before { display: block;
  background: radial-gradient(56rem 36rem at 50% 42%, color-mix(in oklab, var(--accent) 70%, #2dd4a8 30%), transparent 68%), radial-gradient(44rem 30rem at 0% 100%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%), radial-gradient(40rem 30rem at 100% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%), #050d0b;
  opacity: .9; }
body.bk-studio input[type="checkbox"], body.bk-studio input[type="radio"] { accent-color: color-mix(in oklab, var(--accent) 62%, #9cf3dc); }
body.bk-studio .bk-shell { --bk-panel: rgb(14 32 27 / .62); --bk-cell: rgb(255 255 255 / .06); --bk-cell-hover: rgb(255 255 255 / .1);
  --bk-hi: color-mix(in oklab, var(--accent) 62%, #9cf3dc); --bk-hi-ink: #04140f;
  border-color: rgb(255 255 255 / .1); box-shadow: 0 50px 100px -40px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .08); -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%); }
body.bk-studio .bk-aside { background: rgb(0 0 0 / .18); }
body.bk-studio .bk-bars li.is-done::before { background: #e8f3ee; }
body.bk-studio .bk-next { background: #fff; color: #08140f; border-color: #fff; box-shadow: none; }
body.bk-studio .bk-next:hover { background: #e9f5ef; }
body.bk-studio .button-secondary, body.bk-studio .button-ghost { background: rgb(255 255 255 / .07); color: var(--ink); border-color: rgb(255 255 255 / .16); box-shadow: none; }
body.bk-studio .button-secondary:hover, body.bk-studio .button-ghost:hover { background: rgb(255 255 255 / .13); }
body.bk-studio .button:not(.button-secondary):not(.button-ghost):not(.button-danger):not(.bk-next) { background: var(--bk-hi, color-mix(in oklab, var(--accent) 62%, #9cf3dc)); color: #04140f; border-color: transparent; }
body.bk-studio input, body.bk-studio select, body.bk-studio textarea { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .14); color: var(--ink); }
body.bk-studio input::placeholder { color: var(--muted); }
body.bk-studio .confirmation, body.bk-studio .card, body.bk-studio .account-stat, body.bk-studio .account-list li, body.bk-studio .public-nav { background: rgb(14 32 27 / .62); border-color: rgb(255 255 255 / .1); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
body.bk-studio .public-nav a { color: var(--ink-2); }
body.bk-studio .public-nav a[aria-current="page"] { background: #fff; color: #08140f; }
body.bk-studio .coupon { background: color-mix(in srgb, var(--accent) 14%, rgb(255 255 255 / .04)); border-color: color-mix(in oklab, var(--accent) 60%, #9cf3dc); }
body.bk-studio .coupon-value { color: color-mix(in oklab, var(--accent) 50%, #9cf3dc); }
body.bk-studio .coupon-code { background: rgb(0 0 0 / .3); border-color: rgb(255 255 255 / .2); }
body.bk-studio a:not(.button):not(.bk-day):not(.slot):not(.choice):not(.bk-back):not(.public-nav a):not(.bk-bars a):not(.bk-soon a):not(.bk-cal-nav a) { color: color-mix(in oklab, var(--accent) 45%, #b8f5e4); }
body.bk-studio .public-footer { color: var(--muted); }
body.bk-studio .flash { background: rgb(255 255 255 / .08); color: var(--ink); border-color: rgb(255 255 255 / .14); }
body.bk-studio .pay-note { background: rgb(255 255 255 / .06); }
body.bk-studio .table th { background: rgb(255 255 255 / .05); }
body.bk-studio .table-wrap { background: transparent; }
body.bk-studio .confirm-mark { background: color-mix(in oklab, var(--accent) 30%, transparent); color: #b8f5e4; }

/* Phones and tablets: summary on top, then the step; the action bar stays at the bottom of the screen */
@media (max-width: 56rem) {
  .bk-shell { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  .bk-aside { border-right: 0; border-bottom: 1px solid var(--line); padding: 1.1rem 1.1rem 1rem; gap: .8rem; }
  .bk-facts { padding-top: .7rem; }
  .bk-help { margin-top: 0; }
  .bk-when { grid-template-columns: minmax(0, 1fr); }
  .bk-progress, .bk-body { padding-inline: 1.1rem; }
  .bk-bar { position: sticky; bottom: 0; padding: .75rem 1.1rem calc(.75rem + env(safe-area-inset-bottom)); }
  .bk-progress-pct { display: none; }
  .bk-picked { gap: .5rem; } .bk-picked li { grid-template-columns: 2rem minmax(0, 1fr); gap: .6rem; } .bk-picked-mark { width: 2rem; height: 2rem; border-radius: 9px; font-size: .8rem; }
  .bk-picked strong { font-size: .82rem; } .bk-intro { font-size: .86rem; } .bk-help { display: none; }
  .bk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1rem; }
  .bk-facts div { display: grid; gap: 0; font-size: .82rem; } .bk-facts dd { text-align: left; } .bk-facts .bk-total { border-top: 0; padding-top: 0; }
  .bk-bars li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bk-bars li { padding-top: 0; height: 3px; }
}
@media (max-width: 30rem) {
  .bk-chip { font-size: .8rem; padding-inline: .8rem; }
  .bk-next { padding-inline: 1.1rem; }
}
body.public.is-embed .bk-shell { box-shadow: none; }
.bk-shell .choice-person .avatar { display: grid; place-items: center; flex: none; color: var(--bk-hi-ink); background: linear-gradient(140deg, color-mix(in srgb, var(--bk-hi) 80%, #fff), var(--bk-hi)); font-weight: 750; font-size: .95rem; line-height: 1; }
.bk-shell .choice-person .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.bk-shell a.choice.choice-person { flex-direction: row; align-items: center; justify-content: flex-start; }
.bk-shell .choice-person > span:nth-child(2) { flex: 1; display: grid; gap: .1rem; }
.bk-shell .choice-person > span:nth-child(2) strong { color: var(--ink); }
a.choice.choice-row > span.avatar:first-child { display: grid; place-items: center; flex-direction: initial; }
.bk-shell a.choice.choice-person { gap: .9rem; }

/* Coupon code on the booking page */
.coupon-entry { display: grid; gap: .4rem; padding: .9rem 1rem; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.coupon-entry label { font-weight: 600; font-size: .9rem; }
.coupon-entry-row { display: flex; gap: .5rem; }
.coupon-entry-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.coupon-entry-row .button { flex: none; }
.coupon-entry.is-applied { border-style: solid; border-color: color-mix(in srgb, var(--success, #137a4b) 60%, transparent); background: color-mix(in srgb, var(--success, #137a4b) 8%, transparent); }
.coupon-applied { margin: 0; color: var(--success, #137a4b); font-size: .9rem; }
.coupon-entry .field-error { margin: 0; }
.scan-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.25rem 2rem; align-items: start; }
.scan-product { padding: .9rem 1rem; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, transparent); margin-bottom: .25rem; }
.scan-use-form { display: grid; gap: .45rem; padding: .75rem .9rem; border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); }
.scan-use-form[hidden] { display: none; }
.scan-use-name { margin: 0; font-weight: 650; }
.scan-use-form .scan-row input { max-width: 7rem; flex: none; border-style: solid; font-family: inherit; }
input.is-filled, select.is-filled, textarea.is-filled { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }

/* Invoice: send the receipt through the business's own email / WhatsApp */
.receipt-send { gap: .5rem; }
.receipt-log { display: grid; gap: .3rem; margin: 0; padding: 0; }
.receipt-log li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

/* License server → Settings → Email: the test-email row */
.test-email { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.test-email .field { flex: 1; min-width: min(100%, 16rem); margin: 0; }

/* Menu style: full-page menu (Settings → General). No sidebar; a Menu button opens /menu, every section in the middle. */
body.menu-launcher .shell { grid-template-columns: minmax(0, 1fr); }
body.menu-launcher .workspace { width: 100%; }
body.menu-launcher .topbar .brand-compact { display: inline-flex; }
body.menu-launcher .topbar .mobile-nav { display: none; }
.launcher-open { display: inline-flex; align-items: center; gap: .45rem; font-weight: 650; }
.launcher-open[aria-current="page"] { background: var(--accent); color: #fff; border-color: transparent; }
.launcher-page { width: min(100%, 72rem); margin: 0 auto; padding: 1rem 0 3rem; display: grid; gap: 1.75rem; }
.launcher-head { text-align: center; display: grid; gap: .35rem; justify-items: center; }
.launcher-head h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.02em; }
.launcher-search { width: min(100%, 34rem); margin-top: .6rem; }
.launcher-search input { width: 100%; min-height: 3rem; border-radius: 999px; padding-inline: 1.25rem; font-size: 1rem; }
.launcher { columns: 4 15.5rem; column-gap: 1rem; }
.launcher-section { break-inside: avoid; margin: 0 0 1rem; padding: 1.1rem 1.1rem .8rem; border-radius: 20px; background: var(--glass, var(--surface)); border: 1px solid var(--glass-edge, var(--line)); box-shadow: var(--glass-shadow, none); -webkit-backdrop-filter: var(--glass-blur, none); backdrop-filter: var(--glass-blur, none); }
.launcher-section h2 { margin: 0 0 .6rem; font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.launcher-section ul { margin: 0; padding: 0; display: grid; gap: .15rem; }
.launcher-section a { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 550; }
.launcher-section a:hover, .launcher-section a:focus-visible { background: var(--accent-soft); }
.launcher-section a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.launcher-icon { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 10px; background: var(--accent-soft); color: var(--accent); flex: none; }
.launcher-icon .icon { width: 1.1rem; height: 1.1rem; }
.launcher-foot { text-align: center; margin: 0; }
.steps-list { margin: .25rem 0 .5rem; padding-left: 1.2rem; display: grid; gap: .45rem; }

/* Phones and tablets have no hover to reveal them: text-style buttons in the page get a light outline so they
   read as buttons ("Write off", "Use the original wording", "Edit"…). */
@media (hover: none), (max-width: 64rem) {
  main.content .button-ghost { border-color: var(--line-strong); background: rgb(255 255 255 / .6); color: var(--ink); }
  main.content .button-ghost.button-danger { color: var(--danger); border-color: #f1cbc5; }
}

.cal-swipe { margin: 0 0 .4rem; padding-inline: .25rem; }
form:has(input[name="kind"][value="all_day"]:checked) .time-off-times { display: none; } /* times only for part of a day */
form:has(input[name="closed"][type="checkbox"]:checked) .special-times { display: none; } /* special hours only when not closed */
/* Long tick lists (a coupon's services) use the width instead of one tall column; roomy rows for fingers. */
.check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .25rem 1rem; }
.check-list > legend, .check-list > small, .check-list > p { grid-column: 1 / -1; }
.check-list .inline-check { min-height: 2.5rem; white-space: normal; }
/* Attendance on a tablet: two staff side by side. */
@media (min-width: 40rem) { .attendance-list { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); } }
/* Tax rates: one row each, Edit opens its form; the part fields only show when "two parts" is ticked. */
.tax-rate-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.tax-rate-list > li { border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / .55); }
.tax-rate-list summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .7rem .9rem; cursor: pointer; list-style: none; }
.tax-rate-list summary::-webkit-details-marker { display: none; }
.tax-rate-meta { display: inline-flex; align-items: center; gap: .6rem; }
.tax-rate-list details[open] summary .button { visibility: hidden; }
.tax-rate-list .tax-rate-form { padding: 0 .9rem .9rem; }
.tax-rate-form:not(:has(input[name="split_parts"][type="checkbox"]:checked)) .tax-parts { display: none; }
/* Sign-up on a hosted installation: plans as cards to pick from, one under another. */
.signup-plans { display: grid; gap: .55rem; border: 0; padding: 0; margin: 0; }
.signup-plans > legend { padding: 0; margin-bottom: .45rem; font-weight: 650; }
.signup-plan { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; padding: .8rem .95rem; border: 1.5px solid var(--line-strong); border-radius: 14px; background: rgb(255 255 255 / .7); cursor: pointer; }
.signup-plan:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.signup-plan input[type="radio"] { width: 1.15rem; height: 1.15rem; min-height: 0; margin: .2rem 0 0; padding: 0; accent-color: var(--accent); }
.signup-plan-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .75rem; }
.signup-plan-body > strong { font-size: 1rem; }
.signup-plan-price { font-weight: 700; text-align: right; white-space: nowrap; } .signup-plan-price small { font-weight: 500; color: var(--muted); }
.signup-plan-body > small { grid-column: 1 / -1; }
.signup-plan-trial { color: var(--success); font-weight: 600; }