/*
 * bike.tools' one stylesheet: tokens, base, components, then page layouts.
 * No framework. The tokens are the bike.tools design system's (navy and orange,
 * Inter, 6px controls and 12px cards; the system's README and tokens.json are the
 * reference). Shops recolour their own pages through /t/:slug/theme.css, which sets
 * --accent and --accent-text (and --link with Custom branding); everything else
 * derives from those.
 *
 * Names: the design system's own (--navy-900, --orange-700, --link, --focus, ...),
 * plus the names the rest of this file uses: --bg is the page (the system's
 * surface-alt in light, surface in dark), --surface a card on it, --surface-2 a
 * quiet panel inside one, --muted and --faint the system's text-muted and
 * text-subtle, --border-strong its border-control.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Inter-400.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Inter-500.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Inter-600.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Inter-700.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Inter-800.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'Cascadia Code', SFMono-Regular, Consolas, monospace;

  /* The design system's colours (Light). */
  --navy-900: #14284b;
  --blue-600: #225481;
  --orange-500: #d96c20;
  --orange-700: #b9530f;
  --orange-300: #f2a66b;
  --surface-alt: #f3f5f9;
  --on-navy: #ffffff;
  --on-navy-muted: #c9d3e6;
  --border-soft: #e8ebf1;
  --border-control: #7d8aa1;
  --border-on-navy: #6479a0;
  --link: var(--blue-600);
  --link-hover: var(--navy-900);
  --focus: var(--blue-600);
  /* Orange as text: orange-700 passes on white only, so dark uses orange-300. */
  --orange-text: var(--orange-700);

  /* The page of bike.tools' own public pages (the system's `surface`); --bg is the admin's. */
  --page: #ffffff;
  --bg: var(--surface-alt);
  --surface: #ffffff;
  --surface-2: var(--surface-alt);
  --text: var(--navy-900);
  --muted: #3a4a66;
  --faint: #56637c;
  --text-muted: var(--muted);
  --text-subtle: var(--faint);
  --border: #dce1ea;
  --border-strong: var(--border-control);

  /* Action orange: primary buttons. A shop's theme.css replaces it on its own pages. */
  --accent: var(--orange-700);
  --accent-text: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --accent-line: color-mix(in srgb, var(--accent) 35%, var(--surface));
  /* The accent as text, and as a button's hover. */
  --accent-strong: color-mix(in srgb, var(--accent) 85%, #000);
  --accent-hover: color-mix(in srgb, var(--accent) 85%, #000);

  --ok: #1a7f4b;
  --ok-soft: #e4f4ea;
  --info: var(--blue-600);
  --info-soft: #e6eef7;
  --warn: #9a6200;
  --warn-soft: #fdf2d8;
  --danger: #c0352b;
  --danger-soft: #fce8e6;

  /* The admin sidebar: navy, like the hero band and footer. */
  --side-bg: var(--navy-900);
  --side-text: var(--on-navy-muted);
  --side-muted: #98a8c6;
  --side-hover: #1d345c;
  --side-active: #26416d;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --container: 1120px;
  --measure: 660px;
  --touch-min: 44px;
  --shadow-sm: 0 1px 2px rgb(20 40 75 / 6%);
  --shadow: 0 1px 2px rgb(20 40 75 / 5%);
  --shadow-lg: 0 12px 32px rgb(20 40 75 / 16%), 0 2px 6px rgb(20 40 75 / 6%);
  /* The focus ring: 2px of --focus, 2px off the edge. */
  --ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);
  color-scheme: light;
}

/* The admin (the dashboard) in light: the neutral greys and whites, with a near-black sidebar (the owner's call,
   2026-11-03). Orange still marks the action, links are still blue, and the type and corners are the system's.
   The dark rules below outrank it on body.admin, so dark wins in the admin too. */
body.admin {
  --bg: #f4f5f7;
  --surface-alt: #f8f9fb;
  --surface-2: #f8f9fb;
  --text: #15181d;
  --muted: #5d6470;
  --faint: #6b727e;
  --border: #e1e4e9;
  --border-soft: #eceef1;
  --border-strong: #c9ced6;
  --border-control: #c9ced6;
  --side-bg: #15181d;
  --side-text: #c9ced6;
  --side-muted: #8a919c;
  --side-hover: #22262d;
  --side-active: #2b3038;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 6%);
  --shadow: 0 1px 3px rgb(16 24 40 / 8%), 0 1px 2px rgb(16 24 40 / 4%);
}

/* Dark: neutral greys rather than the design system's navy-tinted grounds (the owner's call, 2026-11-03). Navy stays
   for the deliberate navy pieces (the hero band, footer, featured card); orange and blue keep their dark-theme lifts.
   Layers are separated by rules, not shadows. It applies when the shop chose Dark (Settings → Branding → Appearance,
   <html data-theme="dark">), or chose System on a device in dark mode; the two copies must match. */
:root[data-theme='dark'],
:root[data-theme='dark'] body.admin {
  --navy-900: #1e3156;
  --blue-600: #5b9bd5;
  --orange-500: #e07a2e;
  --surface-alt: #181b20;
  --border-soft: #23272d;
  --border-control: #4a505a;
  --border-on-navy: #6e85ae;
  --link-hover: var(--text);
  --orange-text: var(--orange-300);

  --page: #0f1114;
  --bg: #0f1114;
  --surface: #181b20;
  --surface-2: #1d2026;
  --text: #e9ebee;
  --muted: #a2a8b2;
  --faint: #7a818c;
  --border: #2b2f36;
  --border-strong: #3a3f48;

  --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--surface));
  --accent-line: color-mix(in srgb, var(--accent) 50%, var(--surface));
  /* Accent text in dark is lifted, so it reads on the dark surfaces. */
  --accent-strong: color-mix(in srgb, var(--accent) 60%, #fff);
  --ok: #4cc386;
  --ok-soft: #173326;
  --info-soft: #1a2740;
  --warn: #e5b04a;
  --warn-soft: #362a12;
  --danger: #f2837a;
  --danger-soft: #3b1d1b;
  --side-bg: #0b0d10;
  --side-text: #c9ced6;
  --side-muted: #8a919c;
  --side-hover: #171a1f;
  --side-active: #1f232a;
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 50%);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']),
  :root:not([data-theme='light']) body.admin {
    --navy-900: #1e3156;
    --blue-600: #5b9bd5;
    --orange-500: #e07a2e;
    --surface-alt: #181b20;
    --border-soft: #23272d;
    --border-control: #4a505a;
    --border-on-navy: #6e85ae;
    --link-hover: var(--text);
    --orange-text: var(--orange-300);

    --page: #0f1114;
    --bg: #0f1114;
    --surface: #181b20;
    --surface-2: #1d2026;
    --text: #e9ebee;
    --muted: #a2a8b2;
    --faint: #7a818c;
    --border: #2b2f36;
    --border-strong: #3a3f48;

    --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--surface));
    --accent-line: color-mix(in srgb, var(--accent) 50%, var(--surface));
    /* Accent text in dark is lifted, so it reads on the dark surfaces. */
    --accent-strong: color-mix(in srgb, var(--accent) 60%, #fff);
    --ok: #4cc386;
    --ok-soft: #173326;
    --info-soft: #1a2740;
    --warn: #e5b04a;
    --warn-soft: #362a12;
    --danger: #f2837a;
    --danger-soft: #3b1d1b;
    --side-bg: #0b0d10;
    --side-text: #c9ced6;
    --side-muted: #8a919c;
    --side-hover: #171a1f;
    --side-active: #1f232a;
    --shadow-sm: none;
    --shadow: none;
    --shadow-lg: 0 16px 40px rgb(0 0 0 / 50%);
    color-scheme: dark;
  }
}

/* The logo's two marks (views/_brand.njk): full colour on light, the dark-mode mark on dark. */
.mark-on-dark {
  display: none !important;
}

:root[data-theme='dark'] .mark-on-light {
  display: none !important;
}

:root[data-theme='dark'] .mark-on-dark {
  display: block !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .mark-on-light {
    display: none !important;
  }

  :root:not([data-theme='light']) .mark-on-dark {
    display: block !important;
  }
}

/* ---------------------------------------------------------------- Base */

[hidden] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--link);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--link-hover);
}

h1,
h2,
h3 {
  line-height: 1.25;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

/* Headings are Inter at 800 with tight tracking; card titles 700. */
h1 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

h2 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

h3 {
  font-size: 1rem;
  font-weight: 700;
}

p {
  margin: 0 0 1em;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

img {
  max-width: 100%;
}

.icon {
  width: 18px;
  height: 18px;
  flex: none;
  vertical-align: -3px;
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px;
}

.narrow {
  max-width: 640px;
}

.muted {
  color: var(--muted);
}

.faint {
  color: var(--faint);
}

.small {
  font-size: 0.86rem;
}

.tiny {
  font-size: 0.78rem;
}

.mt {
  margin-top: 16px;
}

.mt-lg {
  margin-top: 28px;
}

.mb-0 {
  margin-bottom: 0;
}

.row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.row.tight {
  gap: 6px;
}

.stack {
  display: grid;
  gap: 12px;
}

.spread {
  justify-content: space-between;
}

.grow {
  flex: 1;
  min-width: 200px;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.nowrap {
  white-space: nowrap;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

code,
.code,
kbd {
  font-family: var(--mono);
  font-size: 0.84rem;
}

.code {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow-x: auto;
  white-space: pre;
}

/* A link to copy: it wraps rather than scrolls. */
.code.url {
  white-space: normal;
  overflow-wrap: anywhere;
}

kbd {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--surface);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

a:focus-visible {
  border-radius: 3px;
}

/* ---------------------------------------------------------------- Buttons */

.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--touch-min);
  padding: 9px 18px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.button:hover,
button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-text);
}

.button.secondary,
button.secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-control);
  font-weight: 600;
}

.button.secondary:hover,
button.secondary:hover {
  background: var(--surface-2);
  border-color: var(--text);
  color: var(--text);
}

.button.ghost,
button.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--link);
  font-weight: 600;
  box-shadow: none;
}

.button.ghost:hover,
button.ghost:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
}

button.danger,
.button.danger {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--surface));
  color: var(--danger);
}

button.danger:hover,
.button.danger:hover {
  background: var(--danger-soft);
}

.button.small,
button.small {
  min-height: 32px;
  padding: 4px 11px;
  font-size: 0.86rem;
  border-radius: var(--radius-sm);
}

.button.icon-only,
button.icon-only {
  padding: 0;
  width: var(--touch-min);
}

button.small.icon-only {
  width: 32px;
}

button:disabled,
.button[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

button.link {
  display: inline;
  min-height: 0;
  background: none;
  border: 0;
  padding: 0;
  color: var(--link);
  font-weight: 500;
  text-decoration: underline;
  box-shadow: none;
}

button.link:hover {
  background: none;
}

.inline-form {
  display: inline;
}

.button-group {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- Forms */

label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 5px;
}

.field {
  margin-bottom: 16px;
}

.hint {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.84rem;
}

input:not([type]),
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'],
input[type='number'],
input[type='date'],
input[type='time'],
input[type='search'],
input[type='url'],
select,
textarea {
  width: 100%;
  min-height: var(--touch-min);
  padding: 9px 12px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  box-shadow: var(--shadow-sm);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: var(--ring);
}

input[type='color'] {
  width: 48px;
  height: var(--touch-min);
  padding: 2px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

input[type='file'] {
  max-width: 100%;
  font: inherit;
}

input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

select.auto-width {
  width: auto;
}

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400;
  margin-bottom: 8px;
}

.check input {
  margin-top: 3px;
  flex: none;
}

/* The shop's consent under a setting that needs it (status page lines). */
.check.consent,
.consent-given {
  margin: -2px 0 10px 26px;
  font-size: 0.875rem;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  min-width: 0;
}

legend {
  font-weight: 650;
  margin-bottom: 8px;
  padding: 0;
}

.two-col {
  display: grid;
  gap: 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 4px;
}

/* ---------------------------------------------------------------- Surfaces */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 16px;
}

.card > :last-child {
  margin-bottom: 0;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.card-head h2,
.card-head h3 {
  margin: 0;
}

.card.flush {
  padding: 0;
  overflow: hidden;
}

.card.flush > .card-head {
  padding: 16px 20px 0;
}

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.grid.cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.stat {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}

.stat-card .stat-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
}

/* Blue, not orange: orange marks the action. */
.stat-card .stat-label .icon {
  color: var(--link);
}

a.stat-card:hover {
  border-color: var(--accent-line);
}

.notice {
  padding: 12px 14px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  background: var(--ok-soft);
  border: 1px solid color-mix(in srgb, var(--ok) 20%, transparent);
}

.notice > :last-child {
  margin-bottom: 0;
}

/* With an icon, the icon sits beside the text. */
.notice:has(> .icon) {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.notice.error {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 25%, transparent);
}

.notice.warn {
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 25%, transparent);
}

.notice.info {
  background: var(--info-soft);
  border-color: color-mix(in srgb, var(--info) 22%, transparent);
}

.empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--muted);
}

.empty .icon {
  width: 32px;
  height: 32px;
  color: var(--faint);
  margin-bottom: 8px;
}

.empty strong {
  display: block;
  color: var(--text);
  margin-bottom: 4px;
}

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

.table-wrap {
  /* Contains sr-only (absolute) header text, which would otherwise widen the page. */
  position: relative;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}

th,
td {
  text-align: left;
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-2);
}

tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 3%, transparent);
}

tbody tr:last-child td {
  border-bottom: 0;
}

.card.flush table th:first-child,
.card.flush table td:first-child {
  padding-left: 20px;
}

.card.flush table th:last-child,
.card.flush table td:last-child {
  padding-right: 20px;
}

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

/* A Lightspeed workorder status in the shop's colour. theme.css sets --st
   (and --st-text, for a solid fill) per status as .st-<id>. */
.status-chip {
  --st: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 2px 10px 2px 8px;
  border: 1px solid color-mix(in srgb, var(--st) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--st) 14%, var(--surface));
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-chip::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--st);
}

.status-chip.small {
  padding: 0 8px 0 6px;
  font-size: 0.72rem;
}

.status-refresh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
}

.status-color {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.status-color input[type='color'] {
  width: 44px;
  height: 32px;
  padding: 2px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.6;
  background: var(--ok-soft);
  color: var(--ok);
  white-space: nowrap;
}

.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge.plain::before {
  display: none;
}

.badge.failed,
.badge.reauth_required,
.badge.danger,
.badge.cancelled,
.badge.void {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge.pending,
.badge.warn,
.badge.requested,
.badge.waiting {
  background: var(--warn-soft);
  color: var(--warn);
}

.badge.info,
.badge.in_progress,
.badge.checked_in {
  background: var(--info-soft);
  color: var(--info);
}

.badge.neutral,
.badge.closed,
.badge.complete {
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--muted);
}

.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.count.neutral {
  background: color-mix(in srgb, var(--text) 9%, transparent);
  color: var(--muted);
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--info-soft);
  color: var(--link);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.avatar.small {
  width: 28px;
  height: 28px;
  font-size: 0.72rem;
}

/* ---------------------------------------------------------------- Lists */

.plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.plain-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.plain-list li:last-child {
  border-bottom: 0;
}

.list-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-rows > li > a,
.list-rows > li > .list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}

.list-rows > li:last-child > a,
.list-rows > li:last-child > .list-row {
  border-bottom: 0;
}

/* A row with its own button (Receive) beside the link: the row's line moves to the item. */
.list-rows > li.has-action {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.list-rows > li.has-action:last-child {
  border-bottom: 0;
}

.list-rows > li.has-action > a {
  flex: 1;
  min-width: 0;
  border-bottom: 0;
}

.list-rows > li.has-action > .receive-form {
  margin: 0;
  padding-right: 20px;
}

.receive-form {
  margin: 0;
}

.list-rows > li > a:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.list-rows .list-main {
  flex: 1;
  min-width: 0;
}

.list-rows .list-main strong {
  display: block;
}

dl.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 0 0 12px;
}

.facts dt {
  color: var(--muted);
  font-size: 0.82rem;
}

.facts dd {
  margin: 0;
  font-weight: 500;
}

dl.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
}

dl.kv dt {
  color: var(--muted);
  font-size: 0.86rem;
}

dl.kv dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- Tabs & segmented filters */

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  overflow-x: auto;
}

.tabs a {
  padding: 9px 12px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 550;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.tabs a[aria-current='page'] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  flex-wrap: wrap;
}

.segmented a {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 550;
  text-decoration: none;
}

.segmented a[aria-current='page'] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

details summary {
  cursor: pointer;
  color: var(--accent-strong);
  font-weight: 550;
}

/* "Remove from …" on Employees: a quiet second step, with what goes. */
details.confirm-remove {
  margin-top: 2px;
}

details.confirm-remove > summary {
  color: var(--muted);
  font-weight: 400;
}

details.confirm-remove[open] > summary {
  color: var(--danger);
}

details.confirm-remove form {
  margin-top: 4px;
}

/* ---------------------------------------------------------------- Public pages (booking, status, rider) */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text);
  text-decoration: none;
}

.brand img {
  max-height: 36px;
  width: auto;
  border-radius: 6px;
}

/* The bike.tools logo (views/_brand.njk): the 46px mark, 12px from the live-text wordmark. */
.bt-brand {
  gap: 12px;
}

.brand img.brand-logo {
  display: block;
  width: 46px;
  height: 46px;
  max-height: none;
  border-radius: 0;
}

.wordmark {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1;
  color: var(--text);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-text);
}

.brand-mark .icon {
  width: 18px;
  height: 18px;
}

/* The bike.tools mark where a shop's logo goes (views/_brand.njk#shopMark), on a white tile so it reads on any ground.
   Only the colour is set, so a shop's uploaded logo (theme.css) still paints over it. */
.brand-mark.shop-logo.bt-tile {
  background-color: #fff;
  padding: 2px;
}

/* On the dark sidebar: the dark-mode mark, no tile. A shop's logo (theme.css, html .brand-mark.shop-logo) outranks this
   and keeps its white ground. */
.brand-mark.bt-plain {
  background: transparent;
}

.brand-mark .bt-mark,
.bt-avatar .bt-mark {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
}

.avatar.bt-avatar,
.side-user .avatar.bt-avatar {
  background: #fff;
  padding: 2px;
}

.brand > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}

.nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

.nav a,
.nav button.link {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 500;
}

.nav a[aria-current='page'],
.nav a:hover {
  background: var(--accent-soft);
  color: var(--text);
}

main {
  padding: 28px 0 56px;
}

.embed main {
  padding: 12px 0;
}

.embed {
  background: transparent;
}

.site-footer {
  color: var(--faint);
  font-size: 0.82rem;
  padding: 24px 0 32px;
}

.site-footer a {
  color: inherit;
}

.page-intro {
  margin-bottom: 20px;
}

.page-intro h1 {
  margin-bottom: 4px;
}

.page-intro p {
  color: var(--muted);
  margin: 0;
}

/* Booking flow */

.options {
  display: grid;
  gap: 8px;
}

.option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 15px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 400;
  cursor: pointer;
}

.option:hover {
  border-color: var(--accent-line);
}

.option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.option input {
  margin-top: 3px;
}

.option .meta {
  margin-left: auto;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.calendar .dow {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--faint);
}

.calendar button {
  min-height: 42px;
  padding: 8px 0;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 550;
  box-shadow: none;
}

.calendar button:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.calendar button:disabled {
  color: var(--faint);
  opacity: 0.5;
  cursor: not-allowed;
  background: transparent;
}

.calendar button[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.calendar button.suggested {
  border-style: dashed;
  border-color: var(--accent);
}

.bike-results {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.bike-results:empty {
  display: none;
}

.bike-results button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 450;
  box-shadow: none;
  white-space: normal;
}

.bike-results button:hover {
  background: var(--accent-soft);
}

.selected-bike {
  margin-top: 8px;
}

/* Status page */

.status-hero {
  display: grid;
  gap: 6px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.status-hero h1 {
  margin: 0;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 0.92rem;
}

.status-pill.cancelled {
  background: var(--danger);
}

.status-pill.ready {
  background: var(--ok);
}

.tracker {
  display: grid;
  grid-template-columns: repeat(var(--steps, 5), 1fr);
  list-style: none;
  margin: 18px 0 4px;
  padding: 0;
  counter-reset: step;
}

.tracker.steps-4 {
  --steps: 4;
}

.tracker li {
  position: relative;
  padding-top: 28px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--faint);
  font-weight: 550;
}

.tracker li::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
  z-index: 1;
}

.tracker li::after {
  content: '';
  position: absolute;
  top: 12px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--border-strong);
}

.tracker li:first-child::after {
  display: none;
}

.tracker li.done,
.tracker li.current {
  color: var(--text);
}

.tracker li.done::before {
  background: var(--accent);
  border-color: var(--accent);
}

.tracker li.done::after,
.tracker li.current::after {
  background: var(--accent);
}

.tracker li.current::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent);
}

.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline li {
  padding: 6px 0 14px 20px;
  border-left: 2px solid var(--border);
  position: relative;
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 11px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--surface);
}

.receipt-note {
  white-space: pre-line;
  padding: 10px 12px;
  border-left: 3px solid var(--accent-line);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.workorder-lines .line-kind {
  min-width: 3.5em;
  text-align: center;
}

.estimate-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 1.15rem;
}

.approval {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  box-shadow: inset 4px 0 0 var(--warn);
}

.approval.approved {
  border-color: var(--border);
  box-shadow: inset 4px 0 0 var(--ok);
}

.approval-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 8px;
}

.approval-amount strong {
  font-size: 1.6rem;
  letter-spacing: -0.01em;
}

.approval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.approval-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.approval-head h2 {
  margin: 0 0 2px;
}

.approval-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
}

.photo-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.photo-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: block;
}

.sign-in {
  margin-top: 8vh;
}

.staff-link {
  margin-top: 32px;
  text-align: center;
}

.shop-services + .shop-services {
  margin-top: 24px;
}

.copy-link {
  display: flex;
  gap: 8px;
  align-items: center;
}

.copy-link .copy-input {
  flex: 1;
  min-width: 14em;
  font-family: var(--mono);
  font-size: 0.8rem;
}

.link-cell {
  min-width: 20em;
}

.domain {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.bars li {
  display: grid;
  grid-template-columns: 3em 1fr 3em;
  gap: 8px;
  align-items: center;
}

.bars meter {
  width: 100%;
  height: 12px;
}

.bays {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.bay.busy {
  border-color: var(--accent);
  box-shadow:
    inset 0 3px 0 var(--accent),
    var(--shadow);
}

.bay .bay-name {
  font-weight: 700;
  border-color: transparent;
  padding-left: 0;
  background: transparent;
  box-shadow: none;
}

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ready-line {
  margin: 8px 0 0;
}

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.check-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.check-list .icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--accent);
}

.shop-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font-size: 0.92rem;
}

.shop-note .icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--accent-strong);
}

.shop-note p {
  margin: 0;
}

/* Login / auth cards */

.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.auth-card {
  width: 100%;
  max-width: 400px;
}

.auth-card .brand {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.auth-card .card {
  padding: 28px;
}

.auth-card h1 {
  margin-bottom: 4px;
}

.auth-foot {
  margin-top: 16px;
  text-align: center;
  color: var(--faint);
  font-size: 0.82rem;
}

button.block,
.button.block {
  display: flex;
  justify-content: center;
  width: 100%;
}

.shop-list {
  margin: 0 -28px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.shop-list > li > a {
  padding-inline: 28px;
}

.shop-list .icon {
  color: var(--faint);
}

/* ---------------------------------------------------------------- Admin app shell */

.app {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* The sidebar fits the window rather than scrolling: links and group labels
   shrink from their full size (flex-basis) to a compact one (min-height) as
   the window gets shorter, and short windows drop the group labels. Only a
   window too short for even that (under about 550px) scrolls. */
.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: var(--side-bg);
  color: var(--side-text);
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 16px 18px 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.sidebar-brand .brand-mark {
  width: 32px;
  height: 32px;
}

.sidebar-brand img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.sidebar-brand span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-nav {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 2px 10px 8px;
}

.side-group {
  display: flex;
  flex: 0 1 34px;
  align-items: flex-end;
  min-height: 20px;
  margin: 0 10px;
  padding-bottom: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--side-muted);
}

.side-link {
  display: flex;
  flex: 0 1 38px;
  align-items: center;
  gap: 11px;
  min-height: 28px;
  padding: 0 10px;
  margin: 1px 0;
  border-radius: var(--radius-sm);
  color: var(--side-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.93rem;
}

.side-link:hover {
  background: var(--side-hover);
  color: #fff;
}

.side-link[aria-current='page'] {
  background: var(--side-active);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--accent);
}

.side-link .icon {
  color: var(--side-muted);
}

.side-link[aria-current='page'] .icon,
.side-link:hover .icon {
  color: #fff;
}

.side-link .count {
  margin-left: auto;
}

/* Pushes what follows (Change requests) to the bottom of the nav. */
.side-spacer {
  flex: 1 1 auto;
}

.side-link.side-quiet {
  font-size: 0.86rem;
  color: var(--side-muted);
}

.side-foot {
  flex: none;
  padding: 10px 10px 12px;
  border-top: 1px solid rgb(255 255 255 / 6%);
}

.side-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0 2px 10px;
  font-size: 0.85rem;
  min-width: 0;
}

.side-user .avatar {
  background: var(--side-active);
  color: #fff;
}

.side-user div {
  flex: 1;
  min-width: 0;
}

.side-user div strong,
.side-user div span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-user strong {
  color: #fff;
  font-weight: 600;
}

.side-user div span {
  color: var(--side-muted);
  font-size: 0.78rem;
}

.side-foot form {
  display: block;
}

.side-icon {
  width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--side-muted);
}

.side-icon:hover {
  background: var(--side-hover);
  color: #fff;
}

@media (max-height: 620px) {
  .side-group {
    display: none;
  }

  .sidebar-brand {
    padding-block: 10px 6px;
  }
}

.app-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 28px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.topbar h1 {
  font-size: 1.2rem;
  margin: 0;
  flex: 1;
  min-width: 0;
}

.topbar form.row {
  flex-wrap: nowrap;
}

/* A page's header actions (block actions): links and one-button forms, side by side. */
.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.topbar-actions form {
  display: contents;
}

.topbar form input,
.topbar form select {
  width: auto;
  min-height: 36px;
  padding: 5px 10px;
}

@media (max-width: 760px) {
  .topbar:has(form.row) {
    flex-wrap: wrap;
  }

  .topbar form.row {
    order: 3;
    width: 100%;
  }

  .topbar form.row input,
  .topbar form.row select {
    flex: 1;
    min-width: 0;
  }
}

.topbar .crumbs {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
}

.topbar .crumbs a {
  color: inherit;
  text-decoration: none;
}

.topbar .crumbs a:hover {
  text-decoration: underline;
}

.page {
  padding: 24px 28px 48px;
  max-width: 1240px;
  width: 100%;
}

.page.wide {
  max-width: none;
}

.page.full {
  padding: 0;
  max-width: none;
  flex: 1;
  min-height: 0;
}

.app-footer {
  padding: 0 28px 24px;
  color: var(--faint);
  font-size: 0.8rem;
}

.nav-toggle,
.menu-button,
.scrim {
  display: none;
}

.app > .sidebar {
  grid-column: 1;
  grid-row: 1;
}

.app > .app-main {
  grid-column: 2;
  grid-row: 1;
}

@media (max-width: 900px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .app > .app-main {
    grid-column: 1;
  }

  /* Visually hidden but focusable, so keyboard users can open the menu. */
  .nav-toggle {
    display: block;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 272px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-lg);
  }

  .nav-toggle:checked ~ .sidebar {
    transform: none;
  }

  .nav-toggle:checked ~ .scrim {
    display: block;
  }

  .scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgb(0 0 0 / 40%);
  }

  .menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 0 0 -8px;
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
  }

  .menu-button:hover {
    background: color-mix(in srgb, var(--text) 6%, transparent);
  }

  .nav-toggle:focus-visible ~ .app-main .menu-button {
    box-shadow: var(--ring);
  }

  .topbar {
    padding: 10px 16px;
  }

  .page {
    padding: 18px 16px 40px;
  }

  .app-footer {
    padding: 0 16px 20px;
  }
}

/* ---------------------------------------------------------------- Workorders */

.sort-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.sort-link:hover {
  color: var(--link);
}

.sort-arrow {
  font-size: 0.7em;
  color: var(--accent);
}

.wo-table td {
  vertical-align: middle;
}

.wo-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.wo-actions form {
  margin: 0;
}

/* ---------------------------------------------------------------- Dashboard */

.dash-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  margin-bottom: 20px;
}

.dash-grid > .card {
  margin: 0;
}

@media (max-width: 1000px) {
  .dash-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.list-rows .list-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.talkers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 0 20px 12px;
  border-bottom: 1px solid var(--border);
}

.talker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
}

.avatar.tiny {
  width: 20px;
  height: 20px;
  font-size: 0.62rem;
}

.preview-stats {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 16px;
}

.preview-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.preview-more {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.report-preview .bars li {
  padding: 2px 0;
  border: 0;
}

.preview-more h3 {
  margin: 0 0 6px;
  color: var(--muted);
}

.health {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.health .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 20%, transparent);
}

.health .dot.bad {
  background: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 20%, transparent);
}

.health .dot.warn {
  background: var(--warn);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 20%, transparent);
}

.stats {
  margin-bottom: 20px;
}

.stat-card.attention {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft), var(--surface) 70%);
}

.connect-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-color: var(--accent-line);
}

.connect-card h2 {
  margin-bottom: 4px;
}

.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------- Messaging: threads and bubbles */

.thread {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msg {
  align-self: flex-start;
  max-width: min(78%, 560px);
  padding: 9px 13px;
  border-radius: 16px 16px 16px 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.msg p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg .msg-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 3px;
  font-size: 0.72rem;
  color: var(--faint);
}

.msg.mine {
  align-self: flex-end;
  border-radius: 16px 16px 5px 16px;
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-text);
}

.msg.mine .msg-meta {
  color: color-mix(in srgb, var(--accent-text) 75%, transparent);
  justify-content: flex-end;
}

.msg .msg-meta .channel-chip {
  color: inherit;
}

.msg.mine.failed {
  background: var(--danger-soft);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}

.msg.mine.failed .msg-meta {
  color: var(--danger);
}

.msg.internal {
  align-self: flex-end;
  background: var(--warn-soft);
  border: 1px dashed color-mix(in srgb, var(--warn) 45%, transparent);
  color: var(--text);
  border-radius: 12px;
}

.msg.internal .msg-meta {
  color: var(--warn);
}

.msg.note {
  align-self: center;
  max-width: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 2px 8px;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

.msg.note .msg-meta {
  justify-content: center;
}

.msg .attachment {
  display: block;
  margin: 4px 0;
  max-width: 260px;
  border-radius: 10px;
  overflow: hidden;
}

.msg .attachment img {
  display: block;
  width: 100%;
}

.day-divider {
  align-self: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 0;
}

.channel-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

.channel-chip .icon {
  width: 13px;
  height: 13px;
}

.composer {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.composer:focus-within {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.composer textarea {
  border: 0;
  box-shadow: none;
  min-height: 72px;
  max-height: 40vh;
  resize: none;
  padding: 12px 14px 6px;
  border-radius: 0;
}

.composer textarea:focus {
  box-shadow: none;
}

.composer.internal {
  background: var(--warn-soft);
}

.composer.internal textarea {
  background: transparent;
}

.composer-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 8px 10px;
  flex-wrap: wrap;
}

.composer-bar select {
  width: auto;
  min-height: 30px;
  padding: 3px 28px 3px 8px;
  font-size: 0.84rem;
  box-shadow: none;
}

.composer .composer-bar select {
  width: auto;
  flex: 0 1 auto;
  max-width: 240px;
}

.composer-bar .spacer {
  flex: 1;
}

.saved-replies {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 5;
}

.saved-replies button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--text);
  border-radius: var(--radius-sm);
  font-weight: 400;
  white-space: normal;
  min-height: 0;
  padding: 7px 10px;
}

.saved-replies button strong {
  display: block;
  font-size: 0.86rem;
}

.saved-replies button span {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-replies button[aria-selected='true'],
.saved-replies button:hover {
  background: var(--accent-soft);
}

.composer-wrap {
  position: relative;
}

/* ---------------------------------------------------------------- Inbox (three panes) */

.inbox-app {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 300px;
  height: calc(100vh - 61px);
  height: calc(100dvh - 61px);
  min-height: 480px;
  background: var(--surface);
}

.inbox-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  min-height: 0;
}

.inbox-tools {
  display: grid;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
}

.inbox-tools .search {
  position: relative;
}

.inbox-tools .search .icon {
  position: absolute;
  left: 10px;
  top: 11px;
  color: var(--faint);
}

.inbox-tools .search input {
  padding-left: 34px;
  min-height: 38px;
}

.conv-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1;
}

.conv-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  position: relative;
}

.conv-item:hover {
  background: var(--surface-2);
}

.conv-item[aria-current='page'] {
  background: var(--accent-soft);
}

.conv-item .conv-body {
  flex: 1;
  min-width: 0;
}

.conv-item .conv-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.conv-item .conv-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-item .conv-time {
  font-size: 0.74rem;
  color: var(--faint);
  white-space: nowrap;
}

.conv-item .conv-preview {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.85rem;
  color: var(--muted);
}

.conv-item .conv-preview .conv-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.conv-item.unread .conv-name,
.conv-item.unread .conv-preview .conv-text {
  color: var(--text);
  font-weight: 650;
}

.conv-item .unread-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.conv-tags {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.thread-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}

.thread-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.thread-head .who {
  flex: 1;
  min-width: 160px;
}

.thread-head .who strong {
  display: block;
  font-size: 1.02rem;
}

.thread-head .who span {
  font-size: 0.82rem;
  color: var(--muted);
}

.thread-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  overscroll-behavior: contain;
}

.thread-compose {
  padding: 10px 18px 16px;
  background: var(--bg);
}

.context-pane {
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 18px;
  background: var(--surface);
}

.context-pane h3 {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 18px 0 8px;
}

.context-pane h3:first-child {
  margin-top: 0;
}

.mini-card {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  color: inherit;
  text-decoration: none;
  font-size: 0.88rem;
}

a.mini-card:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
}

.mini-card .row {
  gap: 6px;
}

.inbox-empty {
  display: grid;
  place-items: center;
  height: 100%;
  text-align: center;
  color: var(--muted);
  padding: 24px;
}

.back-link {
  display: none;
}

@media (max-width: 1200px) {
  .inbox-app {
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .context-pane {
    display: none;
  }
}

@media (max-width: 760px) {
  .inbox-app {
    grid-template-columns: minmax(0, 1fr);
    height: calc(100dvh - 61px);
  }

  .inbox-app.has-thread .inbox-list {
    display: none;
  }

  .inbox-app:not(.has-thread) .thread-pane {
    display: none;
  }

  .back-link {
    display: inline-flex;
  }

  .thread-scroll {
    padding: 14px;
  }

  .thread-compose {
    padding: 8px 10px 10px;
    position: sticky;
    bottom: 0;
  }

  .msg {
    max-width: 88%;
  }
}

.view-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -4px;
}

.view-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}

.view-tabs a:hover {
  background: var(--surface-2);
  color: var(--text);
}

.view-tabs a[aria-current='page'] {
  background: var(--info-soft);
  color: var(--link);
}

.view-tabs .count {
  min-width: 18px;
  height: 18px;
  font-size: 0.7rem;
}

.inbox-filters {
  display: flex;
  gap: 6px;
}

.inbox-filters select {
  min-height: 32px;
  padding-block: 4px;
  font-size: 0.84rem;
}

.thread-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.thread-actions select {
  width: auto;
  max-width: 170px;
  min-height: 32px;
  padding-block: 4px;
  font-size: 0.84rem;
}

.thread-notice {
  margin: 10px 18px 0;
}

details.menu {
  position: relative;
}

details.menu > summary {
  list-style: none;
}

details.menu > summary::-webkit-details-marker {
  display: none;
}

.menu-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: grid;
  gap: 2px;
  min-width: 190px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

details.menu.up .menu-pop {
  top: auto;
  bottom: calc(100% + 6px);
  left: 0;
  right: auto;
}

.menu-pop button.ghost {
  justify-content: flex-start;
  width: 100%;
}

.saved-menu .menu-pop {
  width: min(420px, 80vw);
  max-height: 320px;
  overflow-y: auto;
}

.saved-menu .menu-pop a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}

.saved-menu .menu-pop a:hover,
.saved-menu .menu-pop a:focus-visible {
  background: var(--accent-soft);
}

.saved-menu .menu-pop a strong {
  display: block;
  font-size: 0.86rem;
}

.saved-menu .menu-pop a span {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-pick {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.file-pick input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.composer-subject input {
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font-size: 0.88rem;
}

.file-chosen {
  padding: 4px 14px;
  color: var(--muted);
}

.channel-note {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.empty-icon .icon {
  width: 24px;
  height: 24px;
}

.row.between {
  justify-content: space-between;
}

.mt-xs {
  margin-top: 6px;
}

.ok-text {
  color: var(--ok);
}

.status-pill.small {
  padding: 2px 9px;
  font-size: 0.72rem;
  gap: 4px;
}

.status-pill.waiting_parts,
.status-pill.awaiting_approval {
  background: var(--warn);
  color: #fff;
}

.status-pill.complete {
  background: var(--muted);
}

.context-pane .mini-card .row {
  margin-top: 4px;
}

.context-pane .mini-card .icon {
  width: 14px;
  height: 14px;
}

@media (max-width: 760px) {
  .hide-sm {
    display: none;
  }

  .thread-head {
    padding: 10px 12px;
    gap: 8px;
  }

  .thread-actions {
    width: 100%;
  }

  .channel-note {
    display: none;
  }
}

/* ---------------------------------------------------------------- Chat pages (status page chat, website widget) */

.chat-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.chat-card .card-head {
  padding: 16px 20px 0;
}

.chat-card .thread-scroll {
  max-height: 420px;
  min-height: 140px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.chat-card .thread-compose {
  background: var(--surface);
}

.widget-page {
  background: var(--surface);
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.widget {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.widget-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--accent);
  color: var(--accent-text);
}

.widget-head img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--surface);
}

.widget-head .brand-mark {
  width: 40px;
  height: 40px;
  background: color-mix(in srgb, var(--accent-text) 18%, transparent);
  color: var(--accent-text);
}

.widget-head strong {
  display: block;
  font-size: 1.02rem;
}

.widget-head span {
  font-size: 0.82rem;
  opacity: 0.85;
}

.widget-head .online {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.widget-head .online::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6ee7a8;
}

.widget-head .online.away::before {
  background: #fbbf5a;
}

.widget .thread-scroll {
  flex: 1;
  padding: 16px;
}

.widget .thread-compose {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.widget-intro {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.widget-foot {
  text-align: center;
  font-size: 0.72rem;
  color: var(--faint);
  padding: 0 0 8px;
}

.widget-foot a {
  color: inherit;
}

/* ---------------------------------------------------------------- Quick Book */

.qb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 20px;
  align-items: start;
}

.qb-chat {
  display: flex;
  flex-direction: column;
  min-height: 520px;
}

.qb-chat .thread-scroll {
  flex: 1;
  max-height: 60vh;
}

.qb-draft dl.kv {
  margin-bottom: 12px;
}

.qb-compose {
  margin-top: 12px;
}

.qb-examples {
  margin-top: 14px;
}

.qb-examples .chips {
  flex-direction: column;
  align-items: stretch;
}

.qb-pending p::after {
  content: '';
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: qb-dots 1.2s steps(4) infinite;
}

@keyframes qb-dots {
  0% {
    content: '';
  }
  25% {
    content: '.';
  }
  50% {
    content: '..';
  }
  75% {
    content: '...';
  }
}

.qb-draft .option .grow {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.qb-services {
  display: grid;
  gap: 6px;
}

.qb-services .check {
  display: flex;
  gap: 10px;
  align-items: center;
}

.qb-services .num {
  margin-left: auto;
}

.qb-draft .estimate-total {
  margin: 10px 0 0;
  text-align: right;
}

.qb-done .card-head h2 .icon {
  color: var(--ok);
}

/* Settings → AI assistant & Quick Book: the labor and parts it can use, each with the shop's words for it. */
.qb-catalog {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.qb-item {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.qb-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 8px;
}

.qb-item-name {
  flex: 1 1 260px;
  min-width: 0;
}

.qb-item-price {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.qb-item-minutes input.qty {
  width: 4.5rem;
}

.qb-item-remove {
  margin: 0;
}

.qb-item textarea.qb-use {
  min-height: 0;
}

.qb-attach {
  margin-top: 8px;
}

.qb-attach summary {
  color: var(--link);
}

.qb-attach .item-table input.qty,
.qb-search + .item-table input.qty {
  width: 4.5rem;
}

/* The search's All / Labor / Parts filter, like a segmented control. */
.qb-kinds {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  margin: 0;
  border: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.qb-kinds label {
  margin: 0;
  cursor: pointer;
}

.qb-kinds input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.qb-kinds span {
  display: block;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 550;
}

.qb-kinds input:checked + span {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.qb-kinds input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.qb-choice {
  border: 0;
  padding: 0;
  margin: 0;
}

.qb-option-text {
  display: block;
  margin-top: 2px;
}

.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 550;
  min-height: 0;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
}

.chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

.chip.example {
  font-weight: 450;
  text-align: left;
  white-space: normal;
}

@media (max-width: 900px) {
  .qb {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- Settings */

/* ---------------------------------------------------------------- Messaging settings */

.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 500;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.switch > input + span {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background 0.15s;
}

.switch > input + span::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s;
}

.switch input:checked + span {
  background: var(--accent);
}

.switch input:checked + span::after {
  transform: translateX(16px);
}

.switch input:focus-visible + span {
  box-shadow: var(--ring);
}

.switch input:disabled + span {
  opacity: 0.55;
}

.automation-list {
  display: grid;
  gap: 12px;
}

.automation-list > button {
  justify-self: start;
}

.automation {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.automation.on {
  background: var(--surface);
  border-color: var(--accent-line);
}

.automation-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.automation .hint {
  margin: 4px 0 8px;
}

.days-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.days-field input {
  width: 64px;
  min-height: 30px;
  padding: 3px 8px;
}

.placeholder-help summary {
  font-weight: 600;
}

.placeholder-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px 16px;
  margin: 12px 0 0;
}

.placeholder-list div {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.placeholder-list dt code {
  font-size: 0.8rem;
}

.placeholder-list dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Template boxes (public/js/template-editor.js): the textarea's text is
   transparent and drawn by the backdrop behind it, placeholders marked. */
.tpl-field {
  position: relative;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.tpl-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 8px 12px;
  border: 1px solid transparent;
  color: var(--text);
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  pointer-events: none;
}

.tpl-field textarea {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 64px;
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  resize: none;
}

.tpl-field textarea::placeholder {
  color: var(--faint);
}

.tpl-field textarea::selection {
  background: color-mix(in srgb, var(--info) 28%, transparent);
  color: transparent;
}

.tpl-field:has(textarea:disabled) {
  background: var(--surface-2);
}

.tpl-ph {
  border-radius: 4px;
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-line);
  color: var(--accent);
}

.tpl-ph.bad {
  background: var(--danger-soft);
  box-shadow: 0 0 0 1px var(--danger);
  color: var(--danger);
}

.tpl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.tpl-chip {
  min-height: 24px;
  padding: 1px 7px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  box-shadow: none;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
}

.tpl-chip:hover {
  background: var(--accent);
  color: var(--accent-text);
}

.tpl-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.85rem;
  white-space: pre-wrap;
}

.tpl-preview strong {
  color: var(--text);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tpl-preview span:not(.tpl-count) {
  flex: 1 1 240px;
  color: var(--text);
}

.tpl-count {
  color: var(--faint);
  font-size: 0.75rem;
}

.reply-list details > summary {
  display: flex;
  padding: 10px 0;
  color: inherit;
}

.reply-list details[open] {
  padding-bottom: 12px;
}

.danger-text {
  color: var(--danger);
}

.mb {
  margin-bottom: 14px;
}

.settings-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.settings-nav {
  position: sticky;
  top: 80px;
  display: grid;
  gap: 2px;
}

.settings-nav a {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.92rem;
}

.settings-group {
  margin: 14px 10px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.settings-group:first-child {
  margin-top: 0;
}

/* Settings → General: every section as a card, in the nav's groups. */
.settings-heading {
  margin: 22px 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.settings-heading:first-child {
  margin-top: 0;
}

.settings-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-bottom: 8px;
}

.settings-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.settings-card:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow);
}

.settings-card strong {
  color: var(--link);
}

.settings-card .muted {
  display: block;
  margin-top: 3px;
}

.settings-card-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--orange-text);
}

.settings-body > .card,
.settings-body > form.card,
.settings-body > section {
  margin-bottom: 16px;
}

.three-col {
  display: grid;
  gap: 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.allowance-add {
  margin: 12px 0;
  padding: 10px 12px 2px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

/* Settings → Statuses: what each standard status means. */
.status-legend {
  display: grid;
  gap: 8px 16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.status-legend li .muted {
  display: block;
}

.feature-card .row {
  margin-top: auto;
}

.settings-nav a:hover,
.settings-nav a[aria-current='page'] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.swatch {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.swatch input {
  position: absolute;
  opacity: 0;
}

.swatch span {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
}

.swatch input:checked + span {
  box-shadow: 0 0 0 2px var(--text);
}

.swatch input:focus-visible + span {
  box-shadow: var(--ring);
}

.preview-frame {
  display: block;
  width: 100%;
  height: 520px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

/* Preset colours (services/branding.js PRESET_COLORS, in order). */
.swatch .c0 {
  background: #b9530f;
}

.swatch .c1 {
  background: #1f6f4a;
}

.swatch .c2 {
  background: #2563c9;
}

.swatch .c3 {
  background: #0e7490;
}

.swatch .c4 {
  background: #7c3aed;
}

.swatch .c5 {
  background: #be123c;
}

.swatch .c6 {
  background: #15181d;
}

.swatch.custom span:not(.sr-only) {
  display: grid;
  place-items: center;
  background: conic-gradient(#e11d48, #f59e0b, #16a34a, #2563eb, #7c3aed, #e11d48);
  color: #fff;
}

.swatch.custom .icon {
  width: 16px;
  height: 16px;
}

.color-pick input {
  width: 44px;
  height: 34px;
  padding: 2px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

fieldset.field {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
}

fieldset.field legend {
  font-weight: 600;
  margin-bottom: 8px;
  padding: 0;
}

.logo-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.brand-mark.large {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  flex: none;
}

.brand-mark.large .icon {
  width: 36px;
  height: 36px;
}

@media (max-width: 900px) {
  .settings-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-nav {
    position: static;
    display: flex;
    overflow-x: auto;
  }

  .settings-group {
    display: none;
  }

  .settings-nav a {
    white-space: nowrap;
  }
}

.thread-status {
  margin: 8px 0 0;
  color: var(--danger);
  font-size: 0.86rem;
}

.thread .msg a {
  color: inherit;
  text-decoration: underline;
}

/* ---------------------------------------------------------------- Website chat (/w/:slug) */

.chat-page {
  background: var(--bg);
}

/* In the shop's site the frame is see-through around the bubble. Matching the
   parent's colour scheme keeps browsers from painting an opaque backdrop. */
html:has(body.chat-embed) {
  color-scheme: normal;
}

body.chat-embed {
  background: transparent;
  overflow: hidden;
}

.chat-root {
  --chat-h: 100dvh;
}

.chat-panel {
  display: flex;
  flex-direction: column;
  height: var(--chat-h);
  max-width: 560px;
  margin: 0 auto;
  background: var(--surface);
  border-inline: 1px solid var(--border);
}

.is-embed .chat-panel {
  position: fixed;
  inset: 0;
  height: auto;
  max-width: none;
  border: 0;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--accent);
  color: var(--accent-text);
}

.chat-head .brand-mark {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-text) 16%, transparent);
}

.chat-title {
  display: grid;
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}

.chat-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-presence {
  font-size: 0.78rem;
  opacity: 0.85;
}

.chat-presence::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-text) 45%, transparent);
  vertical-align: 1px;
}

.chat-presence.is-open::before {
  background: #4ade80;
}

.chat-head button.chat-close {
  color: inherit;
}

.chat-head button.chat-close:hover {
  background: color-mix(in srgb, var(--accent-text) 14%, transparent);
  color: inherit;
}

.chat-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  background: var(--surface-2);
  scrollbar-width: thin;
}

.chat-scroll .msg {
  max-width: 85%;
}

.chat-scroll .msg a {
  color: inherit;
  text-decoration: underline;
}

.chat-offline {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: var(--radius);
  background: var(--warn-soft);
  color: var(--text);
  font-size: 0.86rem;
}

.chat-offline .icon {
  flex: none;
  margin-top: 2px;
  color: var(--warn);
}

.chat-error {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.86rem;
}

.chat-textme {
  margin-top: 14px;
  font-size: 0.86rem;
}

.chat-textme summary {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--accent-strong);
  font-weight: 600;
  cursor: pointer;
}

.chat-textme-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.chat-textme-form input {
  flex: 1;
  min-width: 0;
}

.chat-textme-form .hint {
  flex-basis: 100%;
  margin: 0;
}

.chat-hint {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  color: var(--muted);
}

.chat-compose {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.chat-compose textarea {
  flex: 1;
  min-height: 42px;
  max-height: 140px;
  resize: none;
  border-radius: 21px;
  padding: 10px 14px;
}

.chat-compose button {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.chat-start {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.chat-start .field {
  margin: 0;
}

.chat-start-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.chat-start .check {
  font-size: 0.84rem;
}

.chat-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 14px 8px;
  background: var(--surface);
  color: var(--faint);
  font-size: 0.72rem;
}

.chat-foot span:only-child {
  margin-left: auto;
}

.chat-foot a {
  color: var(--muted);
}

/* The bubble (closed). It sits in the frame's corner; the frame is just big enough for it. */
.chat-dock {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: max-content;
  max-width: 320px;
}

.pos-left .chat-dock {
  right: auto;
  left: 16px;
  align-items: flex-start;
}

.chat-launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 20px 0 16px;
  border-radius: 26px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: none;
  box-shadow:
    0 6px 20px rgb(16 24 40 / 22%),
    0 1px 3px rgb(16 24 40 / 12%);
}

.chat-launcher:hover {
  background: var(--accent-strong);
}

.chat-launcher:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, #fff);
  outline-offset: 2px;
}

.chat-launcher .icon {
  width: 22px;
  height: 22px;
}

.chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: 0.72rem;
  line-height: 20px;
  text-align: center;
}

button.chat-peek {
  display: grid;
  gap: 2px;
  justify-items: start;
  max-width: 300px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px 14px 4px 14px;
  background: var(--surface);
  color: var(--text);
  font-weight: 400;
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 20px rgb(16 24 40 / 16%);
}

button.chat-peek:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.chat-peek-who {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
}

/* The frame is only as wide as the bubble, so the host page says when it's a phone. */
.is-phone .chat-launcher-label {
  display: none;
}

.is-phone .chat-launcher {
  width: 56px;
  min-height: 56px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}

@media (max-width: 560px) {
  .chat-panel {
    border: 0;
  }
}

/* ---------------------------------------------------------------- Lightspeed extension */

.steps {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 12px;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 12px;
  align-items: baseline;
}

.steps li::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 800;
  font-size: 0.8125rem;
}

.steps li.done::before {
  content: '✓';
  background: var(--ok);
  color: #fff;
}

.getting-started {
  border-color: var(--accent-line);
}

/* ---------------------------------------------------------------- The demo shop */

.demo-banner {
  padding: 10px 24px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.9rem;
  font-weight: 500;
}

.demo-banner a {
  color: inherit;
  font-weight: 600;
}

td.actions {
  text-align: right;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- Motion */

@media (prefers-reduced-motion: no-preference) {
  .option,
  .calendar button,
  .side-link,
  .conv-item,
  .button,
  button {
    transition:
      background-color 0.12s,
      border-color 0.12s,
      color 0.12s,
      box-shadow 0.12s;
  }

  .msg.fresh {
    animation: rise 0.18s ease-out;
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
  }
}

/* ---------------------------------------------------------------- Employees and schedule */

.role-picks fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
}

.role-picks .check,
.role-row .check {
  margin-bottom: 0;
}

.role-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.role-row input[name='name'] {
  width: auto;
  flex: 1 1 180px;
}

.role-actions {
  white-space: nowrap;
}

button.danger-text {
  color: var(--danger);
}

.schedule-grid th,
.schedule-grid td {
  min-width: 96px;
  font-size: 0.86rem;
}

.schedule-grid tbody th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--surface);
}

.schedule-grid .is-today {
  background: var(--accent-soft);
}

.schedule-grid .is-off {
  background: var(--surface-2);
}

.schedule-grid .shift {
  display: block;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.schedule-grid .shift-off {
  color: var(--muted);
  font-weight: 600;
}

.schedule-grid .load {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.schedule-grid .load.some {
  color: var(--ok);
}

.schedule-grid .load.over {
  color: var(--danger);
}

.schedule-grid tfoot th,
.schedule-grid tfoot td {
  border-top: 1px solid var(--border-strong);
  border-bottom: 0;
}

/* ---------------------------------------------------------------- Bookings page */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
}

.filters .field {
  flex: 1 1 150px;
  margin: 0;
}

.filters .field:first-child {
  flex: 2 1 220px;
}

.filters .form-actions {
  flex: 0 0 auto;
}

.booking-day.is-today {
  border-color: var(--accent-line);
}

.bookings-table td {
  vertical-align: top;
}

.bookings-table .block {
  display: block;
}

.bookings-table .clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  max-width: 32ch;
}

.bookings-table tr.is-cancelled td {
  color: var(--faint);
}

.bookings-table tr.is-cancelled strong {
  text-decoration: line-through;
}

/* ---------------------------------------------------------------- Schedule calendar (day view) */
.cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
}

.cal-title {
  margin: 0;
  font-size: 1.1rem;
}

.cal-links {
  margin-left: auto;
}

.cal-card {
  padding: 0;
  overflow: hidden;
}

.cal-card > .hint {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
}

.cal-scroll {
  overflow-x: auto;
}

.cal-day {
  display: flex;
  min-width: min-content;
}

.cal-axis {
  flex: 0 0 56px;
  border-right: 1px solid var(--border);
}

.cal-col {
  flex: 1 0 170px;
  min-width: 170px;
  border-right: 1px solid var(--border-soft);
}

.cal-col:last-child {
  border-right: 0;
}

.cal-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 52px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cal-col.is-off .cal-head strong,
.cal-col.is-unassigned .cal-head strong {
  color: var(--muted);
}

.cal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 13px;
  position: relative;
}

.cal-grid > * {
  grid-column: 1;
}

.cal-hour {
  padding: 0 8px 0 0;
  text-align: right;
  font-size: 0.72rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  transform: translateY(-0.5em);
}

.cal-hour:first-child {
  transform: none;
}

/* Hour lines every four quarter-hour rows. */
.cal-bg {
  background-image: linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px);
  background-size: 100% 52px;
}

.cal-col.is-off .cal-bg {
  background-color: var(--surface-2);
}

.cal-shift {
  margin: 0 3px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}

.cal-job {
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 0;
  margin: 1px 6px;
  padding: 3px 7px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.25;
  text-decoration: none;
}

.cal-job:hover,
.cal-job:focus-visible {
  border-color: var(--accent-line);
  z-index: 2;
}

.cal-job.is-quickbook {
  border-left-color: var(--info);
}

.cal-job.over {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}

.cal-job.is-short {
  flex-direction: row;
  gap: 6px;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

.cal-job-title {
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-job-meta {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-job .status-chip {
  align-self: flex-start;
}

.cal-job.is-short .cal-job-meta + .cal-job-meta,
.cal-job.is-short .status-chip,
.cal-job.is-short .badge {
  display: none;
}

.schedule-grid .cal-meter {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 4px;
}

.cal-chip {
  display: block;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.76rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-chip:hover {
  background: var(--accent-soft);
}

/* Placement on the quarter-hour grid (generated: .r-N starts at row N, .rs-N spans N rows, 06:00 to 24:00). */
.r-0 {
  grid-row-start: 1;
}
.r-1 {
  grid-row-start: 2;
}
.r-2 {
  grid-row-start: 3;
}
.r-3 {
  grid-row-start: 4;
}
.r-4 {
  grid-row-start: 5;
}
.r-5 {
  grid-row-start: 6;
}
.r-6 {
  grid-row-start: 7;
}
.r-7 {
  grid-row-start: 8;
}
.r-8 {
  grid-row-start: 9;
}
.r-9 {
  grid-row-start: 10;
}
.r-10 {
  grid-row-start: 11;
}
.r-11 {
  grid-row-start: 12;
}
.r-12 {
  grid-row-start: 13;
}
.r-13 {
  grid-row-start: 14;
}
.r-14 {
  grid-row-start: 15;
}
.r-15 {
  grid-row-start: 16;
}
.r-16 {
  grid-row-start: 17;
}
.r-17 {
  grid-row-start: 18;
}
.r-18 {
  grid-row-start: 19;
}
.r-19 {
  grid-row-start: 20;
}
.r-20 {
  grid-row-start: 21;
}
.r-21 {
  grid-row-start: 22;
}
.r-22 {
  grid-row-start: 23;
}
.r-23 {
  grid-row-start: 24;
}
.r-24 {
  grid-row-start: 25;
}
.r-25 {
  grid-row-start: 26;
}
.r-26 {
  grid-row-start: 27;
}
.r-27 {
  grid-row-start: 28;
}
.r-28 {
  grid-row-start: 29;
}
.r-29 {
  grid-row-start: 30;
}
.r-30 {
  grid-row-start: 31;
}
.r-31 {
  grid-row-start: 32;
}
.r-32 {
  grid-row-start: 33;
}
.r-33 {
  grid-row-start: 34;
}
.r-34 {
  grid-row-start: 35;
}
.r-35 {
  grid-row-start: 36;
}
.r-36 {
  grid-row-start: 37;
}
.r-37 {
  grid-row-start: 38;
}
.r-38 {
  grid-row-start: 39;
}
.r-39 {
  grid-row-start: 40;
}
.r-40 {
  grid-row-start: 41;
}
.r-41 {
  grid-row-start: 42;
}
.r-42 {
  grid-row-start: 43;
}
.r-43 {
  grid-row-start: 44;
}
.r-44 {
  grid-row-start: 45;
}
.r-45 {
  grid-row-start: 46;
}
.r-46 {
  grid-row-start: 47;
}
.r-47 {
  grid-row-start: 48;
}
.r-48 {
  grid-row-start: 49;
}
.r-49 {
  grid-row-start: 50;
}
.r-50 {
  grid-row-start: 51;
}
.r-51 {
  grid-row-start: 52;
}
.r-52 {
  grid-row-start: 53;
}
.r-53 {
  grid-row-start: 54;
}
.r-54 {
  grid-row-start: 55;
}
.r-55 {
  grid-row-start: 56;
}
.r-56 {
  grid-row-start: 57;
}
.r-57 {
  grid-row-start: 58;
}
.r-58 {
  grid-row-start: 59;
}
.r-59 {
  grid-row-start: 60;
}
.r-60 {
  grid-row-start: 61;
}
.r-61 {
  grid-row-start: 62;
}
.r-62 {
  grid-row-start: 63;
}
.r-63 {
  grid-row-start: 64;
}
.r-64 {
  grid-row-start: 65;
}
.r-65 {
  grid-row-start: 66;
}
.r-66 {
  grid-row-start: 67;
}
.r-67 {
  grid-row-start: 68;
}
.r-68 {
  grid-row-start: 69;
}
.r-69 {
  grid-row-start: 70;
}
.r-70 {
  grid-row-start: 71;
}
.r-71 {
  grid-row-start: 72;
}
.rs-1 {
  grid-row-end: span 1;
}
.rs-2 {
  grid-row-end: span 2;
}
.rs-3 {
  grid-row-end: span 3;
}
.rs-4 {
  grid-row-end: span 4;
}
.rs-5 {
  grid-row-end: span 5;
}
.rs-6 {
  grid-row-end: span 6;
}
.rs-7 {
  grid-row-end: span 7;
}
.rs-8 {
  grid-row-end: span 8;
}
.rs-9 {
  grid-row-end: span 9;
}
.rs-10 {
  grid-row-end: span 10;
}
.rs-11 {
  grid-row-end: span 11;
}
.rs-12 {
  grid-row-end: span 12;
}
.rs-13 {
  grid-row-end: span 13;
}
.rs-14 {
  grid-row-end: span 14;
}
.rs-15 {
  grid-row-end: span 15;
}
.rs-16 {
  grid-row-end: span 16;
}
.rs-17 {
  grid-row-end: span 17;
}
.rs-18 {
  grid-row-end: span 18;
}
.rs-19 {
  grid-row-end: span 19;
}
.rs-20 {
  grid-row-end: span 20;
}
.rs-21 {
  grid-row-end: span 21;
}
.rs-22 {
  grid-row-end: span 22;
}
.rs-23 {
  grid-row-end: span 23;
}
.rs-24 {
  grid-row-end: span 24;
}
.rs-25 {
  grid-row-end: span 25;
}
.rs-26 {
  grid-row-end: span 26;
}
.rs-27 {
  grid-row-end: span 27;
}
.rs-28 {
  grid-row-end: span 28;
}
.rs-29 {
  grid-row-end: span 29;
}
.rs-30 {
  grid-row-end: span 30;
}
.rs-31 {
  grid-row-end: span 31;
}
.rs-32 {
  grid-row-end: span 32;
}
.rs-33 {
  grid-row-end: span 33;
}
.rs-34 {
  grid-row-end: span 34;
}
.rs-35 {
  grid-row-end: span 35;
}
.rs-36 {
  grid-row-end: span 36;
}
.rs-37 {
  grid-row-end: span 37;
}
.rs-38 {
  grid-row-end: span 38;
}
.rs-39 {
  grid-row-end: span 39;
}
.rs-40 {
  grid-row-end: span 40;
}
.rs-41 {
  grid-row-end: span 41;
}
.rs-42 {
  grid-row-end: span 42;
}
.rs-43 {
  grid-row-end: span 43;
}
.rs-44 {
  grid-row-end: span 44;
}
.rs-45 {
  grid-row-end: span 45;
}
.rs-46 {
  grid-row-end: span 46;
}
.rs-47 {
  grid-row-end: span 47;
}
.rs-48 {
  grid-row-end: span 48;
}
.rs-49 {
  grid-row-end: span 49;
}
.rs-50 {
  grid-row-end: span 50;
}
.rs-51 {
  grid-row-end: span 51;
}
.rs-52 {
  grid-row-end: span 52;
}
.rs-53 {
  grid-row-end: span 53;
}
.rs-54 {
  grid-row-end: span 54;
}
.rs-55 {
  grid-row-end: span 55;
}
.rs-56 {
  grid-row-end: span 56;
}
.rs-57 {
  grid-row-end: span 57;
}
.rs-58 {
  grid-row-end: span 58;
}
.rs-59 {
  grid-row-end: span 59;
}
.rs-60 {
  grid-row-end: span 60;
}
.rs-61 {
  grid-row-end: span 61;
}
.rs-62 {
  grid-row-end: span 62;
}
.rs-63 {
  grid-row-end: span 63;
}
.rs-64 {
  grid-row-end: span 64;
}
.rs-65 {
  grid-row-end: span 65;
}
.rs-66 {
  grid-row-end: span 66;
}
.rs-67 {
  grid-row-end: span 67;
}
.rs-68 {
  grid-row-end: span 68;
}
.rs-69 {
  grid-row-end: span 69;
}
.rs-70 {
  grid-row-end: span 70;
}
.rs-71 {
  grid-row-end: span 71;
}
.rs-72 {
  grid-row-end: span 72;
}

.hours {
  margin-bottom: 20px;
}

.hours-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 4px 0;
}

.hours-row .check {
  width: 130px;
  margin: 0;
}

.hours-row input[type='time'] {
  width: auto;
}

.hours-shifts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.hours-shift {
  display: inline-flex;
  align-items: center;
  gap: 6px 10px;
}

.days-off li,
.team li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.team li {
  padding: 10px 0;
}

.role-row input[type='email'] {
  width: auto;
  flex: 1 1 220px;
}

/* ---------------------------------------------------------------- Search and shortcuts */

.search-open {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.search-open:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

.search-open kbd {
  margin-left: 10px;
  color: var(--faint);
}

@media (max-width: 640px) {
  .search-open span,
  .search-open kbd {
    display: none;
  }

  .search-open {
    padding: 4px 8px;
  }
}

.kbd-dialog {
  width: min(640px, calc(100vw - 32px));
  max-width: none;
  max-height: none;
  margin: min(12vh, 96px) auto auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.kbd-dialog::backdrop {
  background: rgb(16 24 40 / 28%);
}

.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--faint);
}

.search-field input {
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 1.05rem;
}

.search-field input:focus {
  box-shadow: none;
}

/* At least a few rows tall, growing with the results up to half the window. */
.search-list {
  min-height: 216px;
  max-height: 50vh;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
}

.search-list a,
.search-results a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}

.search-list [aria-selected='true'] a {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.search-crumbs {
  color: var(--muted);
  font-size: 0.8rem;
}

/* A heading over each group of results: Recent, Bookings, Workorders, Pages and settings, Help. */
.search-group-title {
  margin: 0;
  padding: 10px 12px 4px;
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.search-group {
  padding: 4px 0;
}

.search-empty {
  padding: 18px 12px;
  color: var(--muted);
}

.search-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  color: var(--faint);
  font-size: 0.78rem;
}

.search-foot kbd {
  margin-right: 3px;
  font-size: 0.72rem;
}

@media (max-width: 640px) {
  .kbd-dialog {
    width: calc(100vw - 16px);
    margin-top: 8px;
  }

  /* On a phone the results can use the whole screen. */
  .search-list {
    max-height: calc(100dvh - 130px);
  }

  .search-foot {
    display: none;
  }
}

.help-dialog {
  width: min(440px, calc(100vw - 32px));
}

.help-dialog .kbd-dialog-inner {
  padding: 20px 22px;
}

.help-dialog h2 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

.shortcut-list {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
}

.shortcut-list div {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: baseline;
  gap: 12px;
}

.shortcut-list dt {
  display: flex;
  gap: 4px;
}

.shortcut-list dd {
  margin: 0;
  color: var(--muted);
}

.search-page .row {
  flex-wrap: nowrap;
}

.search-results {
  margin: 0;
  padding: 6px;
  list-style: none;
}

.search-results a:hover {
  background: var(--surface-2);
}

h2[id],
.card[id],
section[id] {
  scroll-margin-top: 76px;
}

/* Services: the Lightspeed items a service adds, and the search that finds them. */
.item-search {
  margin: 12px 0 8px;
}

.item-search input[type='search'] {
  flex: 1 1 260px;
  min-width: 0;
}

.item-results {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
}

.item-table td {
  vertical-align: middle;
}

.item-table .check-col {
  width: 2.5rem;
}

.item-table input.qty {
  width: 4.5rem;
}

.service-card h3 {
  margin: 16px 0 8px;
}

.item-table .item-name {
  display: block;
  margin: 0;
  font-weight: 500;
}

.item-table .item-sku {
  display: block;
}

/* Receive under a workorder's status, on Workorders. */
.wo-table .receive-form {
  margin-top: 6px;
}

/* ---------------------------------------------------------------- Help (/help): the guide, sections down the left */

.help-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.help-nav {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 2px;
}

.help-nav > a {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.92rem;
}

.help-nav > a:hover,
.help-nav > a[aria-current='page'] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* The current section's headings, under its link. */
.help-topics {
  list-style: none;
  margin: 2px 0 8px 12px;
  padding: 0 0 0 8px;
  border-left: 2px solid var(--accent-line);
  display: grid;
  gap: 1px;
}

.help-topics a {
  display: block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.86rem;
  color: var(--muted);
  text-decoration: none;
}

.help-topics a:hover {
  color: var(--text);
  background: var(--surface);
}

.help-article {
  max-width: 72ch;
  min-width: 0;
}

.help-kicker {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.help-article h2 {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 1.2rem;
}

.help-article h3 {
  margin-top: 24px;
}

.help-article ol,
.help-article ul {
  padding-left: 1.3em;
  margin: 0 0 1em;
}

.help-article li {
  margin-bottom: 6px;
}

.help-article li > ul,
.help-article li > ol {
  margin-top: 6px;
}

.help-article dl {
  margin: 0 0 1em;
}

.help-article dt {
  font-weight: 600;
  margin-top: 12px;
}

.help-article dd {
  margin: 2px 0 0;
}

.help-article .notice {
  margin: 16px 0;
}

.help-article .code {
  margin: 8px 0 16px;
}

/* Section cards on the first page. */
.help-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 16px 0 8px;
}

.help-cards a {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.help-cards a:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow);
}

.help-cards strong {
  display: block;
  margin-bottom: 4px;
  color: var(--link);
}

.help-cards span {
  color: var(--muted);
  font-size: 0.88rem;
}

/* Previous and next section. */
.help-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
}

.help-foot a {
  text-decoration: none;
  font-weight: 500;
}

.help-foot .next {
  margin-left: auto;
}

@media (max-width: 900px) {
  .help-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .help-nav {
    position: static;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .help-nav > a {
    white-space: nowrap;
  }

  /* The row scrolls, so the current section goes first, where it can be seen. */
  .help-nav > a[aria-current='page'] {
    order: -1;
  }

  .help-topics {
    display: none;
  }
}

/* Platform admin (/platform) and support access inside a shop's admin */
.wrap.wide {
  max-width: 1280px;
}

.support-banner {
  padding: 10px 24px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.9rem;
  font-weight: 500;
}

.support-banner a {
  color: inherit;
}

.platform-table td.wrap-text {
  white-space: normal;
  max-width: 360px;
}

.platform-table .small-cell {
  font-size: 0.82rem;
  color: var(--muted);
}

.feature-switches {
  display: grid;
  gap: 8px;
}

.feature-switches form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feature-switches .check {
  margin: 0;
  flex: 1;
}

/* bike.tools' own pages (views/site-layout.njk): the landing page, pricing, help, privacy and terms, in the
   design system's page rhythm. White header, a navy hero band, white sections, a navy footer. */
body.site {
  background: var(--page);
  font-size: 16px;
  line-height: 1.6;
}

.site .wrap {
  max-width: var(--container);
  padding: 0 24px;
}

.site .site-header {
  background: var(--page);
}

.site .site-header .wrap {
  padding-block: 14px;
  gap: 16px;
}

.site .nav {
  gap: 4px 28px;
}

.site .nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 0;
  border-radius: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}

.site .nav a:hover,
.site .nav a[aria-current='page'] {
  background: none;
  color: var(--text);
}

.site .nav a[aria-current='page'] {
  box-shadow: inset 0 -2px 0 var(--text);
}

.site main {
  padding: 64px 0 80px;
}

.eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.display {
  margin: 0 0 20px;
  font-size: 58px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -2px;
  text-wrap: balance;
}

.lede {
  max-width: var(--measure);
  font-size: 19px;
  line-height: 1.65;
}

.section-heading {
  margin: 0 0 32px;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.8px;
}

.site-section + .site-section {
  margin-top: 64px;
}

/* The hero band: navy, full width, the headline and buttons left and the mark on a white tile right. */
.hero-band {
  background: var(--navy-900);
  color: var(--on-navy-muted);
  padding: 80px 0;
}

.hero-band-short {
  padding: 64px 0;
}

.hero-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.hero-text {
  min-width: 0;
  max-width: 720px;
}

.hero-band .eyebrow {
  color: var(--orange-300);
}

.hero-band .display {
  color: var(--on-navy);
}

.hero-band .lede {
  margin: 0;
  color: var(--on-navy-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.hero-band .hero-actions {
  margin-top: 32px;
}

.button.hero-button {
  min-height: 50px;
  padding: 0 24px;
  font-size: 16px;
}

.hero-band .button.secondary {
  background: transparent;
  color: var(--on-navy);
  border-color: var(--border-on-navy);
}

.hero-band .button.secondary:hover {
  background: rgb(255 255 255 / 8%);
  border-color: var(--on-navy);
}

.hero-band .button.ghost {
  color: var(--on-navy-muted);
  padding-inline: 12px;
}

.hero-band .button.ghost:hover {
  background: rgb(255 255 255 / 8%);
  color: var(--on-navy);
}

.hero-band :focus-visible {
  outline-color: var(--orange-300);
}

/* The full-colour mark always sits on white, in both themes. */
.hero-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 280px;
  height: 280px;
  border-radius: var(--radius-lg);
  background: #fff;
}

.hero-tile img {
  display: block;
  width: 220px;
  height: 220px;
}

@media (max-width: 860px) {
  .hero-tile {
    display: none;
  }
}

@media (max-width: 640px) {
  .display {
    font-size: 40px;
    letter-spacing: -1.2px;
  }

  .lede {
    font-size: 17px;
  }

  .hero-band {
    padding: 56px 0;
  }

  .site main {
    padding: 48px 0 64px;
  }
}

/* How it works: numbered step cards on the quiet panel colour. */
.step-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-cards li {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--surface-alt);
  border-radius: var(--radius);
  color: var(--muted);
}

.step-cards strong {
  color: var(--text);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--orange-700);
  color: var(--on-navy);
  font-weight: 800;
}

/* The plan cards (views/_pricing.njk); `featured` is the one navy card. */
.price-table {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
  margin: 0 0 16px;
}

.price-card {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--page);
}

.price-card h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--blue-600);
}

.price-card .price {
  margin: 0;
  font-size: 40px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text);
}

.price-card .price span {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--faint);
}

.price-base {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.price-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.price-base.price-extra {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 14px;
  font-weight: 700;
  color: var(--orange-text);
}

.price-card.featured {
  background: var(--navy-900);
  border-color: var(--navy-900);
}

.price-card.featured h3,
.price-card.featured a {
  color: var(--orange-300);
}

.price-card.featured .price,
.price-card.featured .price-base {
  color: var(--on-navy);
}

.price-card.featured .price-extra {
  color: var(--orange-300);
}

.price-card.featured .price span,
.price-card.featured .price-features {
  color: var(--on-navy-muted);
}

.price-card.featured :focus-visible {
  outline-color: var(--orange-300);
}

/* The footer of bike.tools' own pages: navy, the dark-mode mark, orange-300 links. */
.site-footer.site-footer-navy {
  margin-top: 0;
  padding: 48px 0;
  background: var(--navy-900);
  color: var(--on-navy-muted);
  font-size: 14px;
}

.site-footer-navy .wrap {
  display: grid;
  gap: 24px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.site-footer-navy .wordmark {
  color: var(--on-navy);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

.site-footer-navy a {
  color: var(--orange-300);
}

.site-footer-navy a:hover {
  color: var(--on-navy);
}

.site-footer-navy .bt-brand {
  text-decoration: none;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  font-weight: 500;
  text-decoration: none;
}

.footer-credit {
  margin: 0;
  max-width: var(--measure);
}

.site-footer-navy :focus-visible {
  outline-color: var(--orange-300);
}

.free-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px 20px;
  padding: 0;
  list-style: none;
}

.free-list strong {
  display: block;
}

.free-list span {
  color: var(--muted);
  font-size: 0.88rem;
}

/* Settings → Lightspeed extension: one row per module, grouped. */
.module-group legend {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.module-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.module-row label {
  margin: 0;
}

.module-row .hint {
  display: block;
}

.module-row.unavailable label {
  color: var(--muted);
}

/* ---------------------------------------------------------------- Printed status tag */
/* The tag (views/admin/tag.njk): white paper on screen, then just the tag when
   printed. Laid out for 80 mm receipt rolls (72 mm printable); it fills a 58 mm
   roll, and prints larger and centred on letter paper. Sizes are in mm so the
   print is the same on every printer. */
body.tag-page {
  background: var(--bg);
}

.tag-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
}

.tag {
  box-sizing: border-box;
  width: 100%;
  max-width: 80mm;
  margin: 0 auto 32px;
  padding: 4mm;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: #000;
}

.tag-text {
  margin: 0;
  font-family: var(--font);
  font-size: 3.4mm;
  line-height: 1.3;
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tag-head::first-line {
  font-size: 4.4mm;
  font-weight: 700;
}

.tag-qr {
  max-width: 56mm;
  margin: 3mm auto;
}

.tag-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.tag-none {
  margin: 4mm 0;
  color: #333;
}

/* The settings card: the form beside a framed preview. */
.tag-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
  align-items: start;
}

.tag-preview {
  margin: 0;
}

.tag-preview-frame {
  display: block;
  width: 100%;
  height: 520px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.tag-placeholders {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 8px 0 0;
}

.tag-placeholders dd {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 800px) {
  .tag-editor {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  @page {
    size: auto;
    margin: 3mm;
  }

  body.tag-page {
    background: #fff;
  }

  body.tag-page .no-print {
    display: none !important;
  }

  .tag {
    max-width: 72mm;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* 58 mm rolls (48 mm printable): smaller type, the QR code across the roll. */
@media print and (max-width: 54mm) {
  .tag-text {
    font-size: 3mm;
  }

  .tag-head::first-line {
    font-size: 3.8mm;
  }

  .tag-qr {
    max-width: none;
  }
}

/* Letter and A4: a larger card in the middle of the page. */
@media print and (min-width: 150mm) {
  .tag {
    max-width: 120mm;
    margin-top: 10mm;
  }

  .tag-text {
    font-size: 4.6mm;
  }

  .tag-head::first-line {
    font-size: 6mm;
  }

  .tag-qr {
    max-width: 70mm;
    margin: 6mm auto;
  }
}

/* ---- Workorder photos (the phone bridge): status pages and the phone pages ---- */

.photo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.photo-strip img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.workorder-photos-title {
  margin: 16px 0 8px;
  font-size: 1rem;
}

.phone-page main {
  padding-top: 12px;
}

.phone-card h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 1.4rem;
}

.phone-kicker {
  margin: 0 0 12px;
  color: var(--muted);
}

.phone-expiry.phone-expired {
  color: var(--danger);
}

.phone-count {
  margin: 12px 0;
  font-weight: 600;
}

.phone-big {
  width: 100%;
  min-height: 52px;
  justify-content: center;
  font-size: 1.05rem;
}

.phone-photo-form input[type='file'] {
  width: 100%;
  min-height: 44px;
}

.phone-photos {
  margin-top: 16px;
}

.phone-photos img {
  width: 30vw;
  max-width: 120px;
  height: auto;
  aspect-ratio: 1;
}

.phone-camera {
  margin-bottom: 12px;
}

.phone-video {
  display: block;
  width: 100%;
  max-height: 50vh;
  object-fit: cover;
  border-radius: var(--radius);
  background: #000;
}

/* The picture: the live camera, or a frozen frame or photo, with a box drawn around each code (phone.js). */
.phone-view {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
}

.phone-view > video,
.phone-view > canvas {
  grid-area: 1 / 1;
}

.phone-still {
  display: block;
  width: 100%;
  max-height: 50vh;
  object-fit: cover;
}

.phone-view.is-photo .phone-still {
  object-fit: contain;
}

/* Where to hold the code, while the camera is reading. */
.phone-view.is-live::after {
  position: absolute;
  inset: 14% 10%;
  border: 2px solid rgb(255 255 255 / 55%);
  border-radius: 12px;
  content: '';
  pointer-events: none;
}

.phone-boxes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.phone-box {
  fill: none;
  stroke-width: 4px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.phone-box.good {
  fill: rgb(34 197 94 / 16%);
  stroke: #22c55e;
}

.phone-box.bad {
  stroke: #f59e0b;
}

/* Blue and slate show on a white label and on a dark background alike. */
.phone-box.done {
  stroke: #2563eb;
  stroke-dasharray: 8 6;
}

.phone-box.dim {
  stroke: rgb(100 116 139 / 85%);
}

.phone-box-badge {
  fill: #22c55e;
  stroke: #fff;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.phone-box-number {
  fill: #fff;
  font-family: var(--font);
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

/* "Sent 012345678905" over the frozen picture. */
.phone-stamp {
  position: absolute;
  bottom: 12px;
  left: 50%;
  max-width: calc(100% - 24px);
  margin: 0;
  overflow: hidden;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgb(0 0 0 / 72%);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateX(-50%);
}

.phone-stamp.ok {
  background: var(--ok);
}

.phone-stamp.error {
  background: var(--danger);
}

.phone-camera > .hint {
  margin: 8px 0 0;
}

.phone-camera-actions {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.phone-camera-actions .button {
  width: 100%;
  justify-content: center;
}

/* "Read a photo of the code": a label that looks like a button, with its file input hidden inside. */
.phone-file-button {
  position: relative;
  cursor: pointer;
}

.phone-file-button:focus-within {
  box-shadow: var(--ring);
}

.phone-choices {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.phone-choices:empty {
  display: none;
}

.phone-choice {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
}

.phone-choice .hint {
  margin-left: auto;
}

/* A long web link in a choice wraps rather than pushing the kind off the button. */
.phone-choice strong {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: left;
}

.phone-anyway {
  width: 100%;
  justify-content: center;
}

/* The code's number on the picture. */
.phone-choice-number {
  display: inline-grid;
  flex: none;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

.phone-sent {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ok);
}

.phone-done {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.phone-done .button {
  width: 100%;
  justify-content: center;
}

/* The privacy and terms pages: a readable column. */
.legal {
  max-width: 46rem;
}

.legal h2 {
  font-size: 1.1rem;
  margin: 28px 0 8px;
}

.legal li {
  margin-bottom: 6px;
}

/* --- Customer page layouts and status page (v2) --- */

/* The customer's name and workorder number, above the status. */
.status-meta {
  margin: 0;
  color: var(--muted);
}

.status-meta strong {
  color: var(--text);
}

.ready-note {
  margin: 8px 0 0;
}

/* Layout styles (services/pageLayouts.js#layoutClasses on the customer pages' <body>). */
body.density-compact main {
  padding: 18px 0 40px;
}

body.density-compact .card {
  padding: 14px 16px;
  margin-bottom: 10px;
}

body.density-compact .card h2 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

body.density-compact .status-hero {
  padding: 16px;
  gap: 4px;
  margin-bottom: 10px;
}

body.density-compact .tracker {
  margin: 10px 0 2px;
}

body.density-compact .option {
  padding: 9px 12px;
}

body.density-compact .options {
  gap: 6px;
}

body.header-plain .site-header {
  background: transparent;
  border-bottom-color: transparent;
}

body.header-bold .site-header {
  background: var(--accent);
  border-bottom-color: transparent;
}

body.header-bold .site-header .brand,
body.header-bold .site-header .nav a,
body.header-bold .site-header .nav button.link {
  color: var(--accent-text);
}

body.header-bold .site-header .nav a[aria-current='page'],
body.header-bold .site-header .nav a:hover {
  background: color-mix(in srgb, var(--accent-text) 18%, transparent);
  color: var(--accent-text);
}

body.hero-tracker-first .status-hero .tracker {
  order: -1;
  margin-top: 0;
}

body.hero-minimal .tracker {
  display: none;
}

body.hero-minimal .status-hero {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

/* The settings preview: nothing in it does anything. */
body.preview-page form,
body.preview-page a,
body.preview-page button,
body.preview-page summary {
  pointer-events: none;
}

/* Booking page: labor items by search, and the starting price. */
.catalog {
  margin-top: 16px;
}

.catalog-title {
  margin: 0 0 8px;
  font-size: 1rem;
}

.catalog-search {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.catalog-search input {
  flex: 1;
  min-width: 0;
}

.catalog-results:empty {
  display: none;
}

.estimate-line {
  margin: 12px 0 0;
  color: var(--text);
  font-weight: 600;
}

.parts-note {
  margin-top: 8px;
}

/* The layout editor (views/admin/settings/_layout-editor.njk). */
.layout-preset select {
  flex: 1;
  min-width: 0;
}

.layout-presets {
  margin: 8px 0 0;
  padding-left: 18px;
}

.layout-heading {
  margin: 20px 0 6px;
  font-size: 1rem;
}

.layout-blocks {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.layout-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  background: var(--surface);
}

.layout-block + .layout-block {
  border-top: 1px solid var(--border-soft);
}

.layout-block .check {
  margin: 0;
}

.layout-block.draggable {
  cursor: grab;
}

.layout-block.dragging {
  opacity: 0.5;
  background: var(--surface-2);
}

.layout-move {
  display: inline-flex;
  gap: 4px;
  flex: none;
}

.layout-move button {
  min-width: 34px;
  padding: 4px 8px;
}

.layout-styles {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.preview-frame {
  display: block;
  width: 100%;
  height: 640px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Reports: the section links under the dates. */
.report-nav {
  margin: -4px 0 18px;
  color: var(--faint);
}