@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   Local Web Launch — single stylesheet for the entire app UI.
   Every page loads this file and nothing else. It replaced the old per-area
   stylesheets (_shared / admin-common / auth-common / custom-ui /
   dashboard-common), deleted 2026-08-02 once nothing loaded them. Do not
   reintroduce a second stylesheet: a rule living in two files is a rule that
   gets changed in one.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Neutrals — cool blue-grey, not warm */
  --n-0:   #ffffff;
  --n-25:  #fafbfc;
  --n-50:  #f4f6f9;
  --n-100: #eaeef3;
  --n-200: #dce2ea;
  --n-300: #c2cbd6;
  --n-400: #93a0b0;
  --n-500: #6b7a8c;
  --n-600: #4e5d6e;
  --n-700: #39485a;
  --n-800: #233247;
  --n-900: #0f1e30;

  /* Brand — deep navy chrome, clear blue for action */
  --brand-900: #0c1f35;
  --brand-800: #12304f;
  --brand-700: #17436e;
  --brand-600: #1d6fe0;
  --brand-500: #3a87f0;
  --brand-100: #e3eefc;
  --brand-50:  #f1f7fe;

  /* Status — each pairs a text-safe 700 with a 100 surface */
  --ok-700:     #0e6b45;
  --ok-100:     #dcf5e9;
  --warn-700:   #8a5200;
  --warn-100:   #fdf0d9;
  --danger-700: #a8322a;
  --danger-600: #c24138;
  --danger-100: #fbe6e4;

  /* Semantic */
  --bg:            var(--n-50);
  --surface:       var(--n-0);
  --surface-sunk:  var(--n-25);
  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --text:          var(--n-900);
  --text-muted:    var(--n-500);
  --text-subtle:   var(--n-400);
  --accent:        var(--brand-600);
  --accent-hover:  #1a62c7;

  /* Type */
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Radius */
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-full: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(15, 30, 48, .06);
  --sh-2: 0 2px 8px rgba(15, 30, 48, .08);
  --sh-3: 0 12px 32px rgba(15, 30, 48, .16);

  /* Motion */
  --fast: 120ms; --norm: 200ms; --ease: cubic-bezier(.2, .7, .3, 1);

  --sidebar-w: 248px;
  --topbar-h: 60px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
h4 { font-size: .9375rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Every icon in this app is an inline SVG. Never an emoji, never a glyph. */
.icon { width: 18px; height: 18px; flex: none; stroke-width: 1.75; }
.icon-sm { width: 15px; height: 15px; }
.icon-lg { width: 22px; height: 22px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

.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;
}

::selection { background: var(--brand-100); color: var(--brand-900); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3. App shell — navy rail on desktop, slide-over on mobile
   -------------------------------------------------------------------------- */
.app { min-height: 100vh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: var(--sidebar-w);
  background: var(--brand-900);
  display: flex; flex-direction: column;
  padding: var(--s4) var(--s3);
  transform: translateX(-100%);
  transition: transform var(--norm) var(--ease);
}
.sidebar.is-open { transform: none; }

.sidebar-brand {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3) var(--s5);
  color: #fff; font-weight: 800; letter-spacing: -.02em; font-size: 1rem;
}
.sidebar-brand:hover { text-decoration: none; }
.sidebar-brand .mark {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: linear-gradient(140deg, var(--brand-500), var(--brand-600));
  display: grid; place-items: center; color: #fff;
}

.sidebar-group { margin-bottom: var(--s5); }
.sidebar-group-label {
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #6d8199;
  padding: 0 var(--s3) var(--s2);
}

.nav-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s3); border-radius: var(--r-sm);
  color: #b8c6d6; font-weight: 500; font-size: .9375rem;
  transition: background var(--fast), color var(--fast);
}
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav-item[aria-current="page"] { background: var(--brand-600); color: #fff; font-weight: 600; }
.nav-item .icon { opacity: .85; }
.nav-item[aria-current="page"] .icon { opacity: 1; }

.sidebar-foot { margin-top: auto; padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-who { padding: var(--s2) var(--s3); color: #8fa3b8; font-size: .8125rem; }
.sidebar-who strong { display: block; color: #fff; font-weight: 600; font-size: .875rem; }

.scrim {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(12, 31, 53, .5);
  opacity: 0; pointer-events: none;
  transition: opacity var(--norm) var(--ease);
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s4);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-title { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }

.main { min-height: 100vh; display: flex; flex-direction: column; }
.page { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s8); }
.page-narrow { max-width: 760px; }

.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--s4); margin-bottom: var(--s5);
}
.page-head-text { flex: 1 1 260px; min-width: 0; }
.page-head h1 { margin-bottom: 2px; }
.page-head p { color: var(--text-muted); font-size: .9375rem; }
.page-head-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

@media (min-width: 1024px) {
  .sidebar { transform: none; }
  .main { margin-left: var(--sidebar-w); }
  .scrim { display: none; }
  .nav-toggle { display: none; }
  .topbar { padding: 0 var(--s5); }
  .page { padding: var(--s6) var(--s5) var(--s8); }
}

/* --------------------------------------------------------------------------
   4. Surfaces
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.card + .card { margin-top: var(--s4); }
.card-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
}
.card-head-text { flex: 1 1 200px; min-width: 0; }
.card-head h2, .card-head h3 { font-size: 1rem; }
.card-head p { font-size: .875rem; color: var(--text-muted); margin-top: 2px; }
.card-body { padding: var(--s5); }
.card-body-flush { padding: 0; }
.card-foot {
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--border);
  background: var(--surface-sunk);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end;
}

.grid { display: grid; gap: var(--s4); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Stat tile */
.stat { padding: var(--s4) var(--s5); }
.stat-label {
  font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-subtle);
}
/* Proportional figures deliberately: tabular-nums gives every digit the width
   of a 0, which makes a value like 121 look loose at display sizes. Tabular is
   reserved for columns that must align vertically (table cells, axis ticks). */
.stat-value {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em;
  margin-top: var(--s2);
}
.stat-sub { font-size: .8125rem; color: var(--text-muted); margin-top: 2px; }
.stat-link {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; cursor: pointer; border-radius: var(--r-lg);
}
.stat-link:hover { background: var(--surface-sunk); }

/* --------------------------------------------------------------------------
   5b. Chart — single-series column chart
   Thin capped marks, hairline recessive grid, selective direct labels, a
   hover/focus tooltip, and a table-view twin so no value is tooltip-gated.
   -------------------------------------------------------------------------- */
/* Geometry lives in these two values and is shared by JS (see admin-dashboard)
   so the y-axis column and the gridlines are laid out in the same coordinate
   space. Getting this wrong drifts the ticks off the gridlines. */
.chart { --plot-h: 190px; --plot-pad: 16px; position: relative; }

/* The y-axis sits OUTSIDE the horizontal scroller so it stays put while the
   columns scroll on narrow screens. */
.chart-body { display: flex; align-items: flex-start; }
.chart-yaxis { flex: none; width: 48px; height: var(--plot-h); position: relative; }
.chart-scroll { flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.chart-plot {
  position: relative; display: flex; align-items: flex-end; gap: var(--s2);
  height: var(--plot-h); min-width: 420px;
  padding: var(--plot-pad) 0 0;
  border-bottom: 1px solid var(--border);
}
.chart-grid { position: absolute; inset: var(--plot-pad) 0 0 0; pointer-events: none; }
.chart-grid span {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--border);            /* solid hairline, never dashed */
}
.chart-ytick {
  position: absolute; right: var(--s2); transform: translateY(-50%);
  text-align: right; font-size: .6875rem; color: var(--text-subtle);
  font-variant-numeric: tabular-nums;   /* ticks DO align vertically */
  white-space: nowrap;
}

.chart-col {
  position: relative; flex: 1; min-width: 26px; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: none; border: 0; padding: 0; cursor: default;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.chart-col:hover, .chart-col:focus-visible { background: var(--brand-50); }
.chart-bar {
  width: 100%; max-width: 24px; margin: 0 auto;   /* cap thickness; rest is air */
  background: var(--accent);
  border-radius: 4px 4px 0 0;                     /* rounded data-end, square base */
  min-height: 2px;
  transition: background var(--fast);
}
.chart-col:hover .chart-bar, .chart-col:focus-visible .chart-bar { background: var(--brand-700); }
.chart-peak {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: .6875rem; font-weight: 700; color: var(--text-muted);
  white-space: nowrap;
}
.chart-xaxis {
  display: flex; gap: var(--s2); min-width: 420px;
  padding: 6px 0 0;
}
.chart-xaxis span {
  flex: 1; min-width: 26px; text-align: center;
  font-size: .6875rem; color: var(--text-subtle);
}

.chart-tip {
  position: absolute; z-index: 30; pointer-events: none;
  padding: 6px var(--s3); border-radius: var(--r-sm);
  background: var(--n-900); color: #fff;
  font-size: .8125rem; white-space: nowrap; box-shadow: var(--sh-2);
  transform: translate(-50%, -100%);
}
.chart-tip[hidden] { display: none; }
.chart-tip strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: 40px; padding: 0 var(--s4);
  border: 1px solid transparent; border-radius: var(--r);
  font-size: .9375rem; font-weight: 600; letter-spacing: -.01em;
  cursor: pointer; white-space: nowrap;
  transition: background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.985); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-secondary { background: var(--surface); color: var(--n-800); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--n-50); border-color: var(--n-400); }

.btn-ghost { background: transparent; color: var(--n-700); }
.btn-ghost:hover:not(:disabled) { background: var(--n-100); }

.btn-danger { background: var(--danger-700); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #8f2a23; }

.btn-danger-quiet { background: transparent; color: var(--danger-700); border-color: #ecc9c5; }
.btn-danger-quiet:hover:not(:disabled) { background: var(--danger-100); }

.btn-sm { min-height: 32px; padding: 0 var(--s3); font-size: .875rem; border-radius: var(--r-sm); }
.btn-lg { min-height: 48px; padding: 0 var(--s5); font-size: 1rem; }
.btn-block { width: 100%; }

/* Icon-only buttons still carry an aria-label — see CLAUDE.md Part 6. */
.btn-icon {
  min-height: 36px; width: 36px; padding: 0; flex: none;
  background: transparent; color: var(--n-600); border-radius: var(--r-sm);
}
.btn-icon:hover:not(:disabled) { background: var(--n-100); color: var(--n-900); }
.btn-icon-danger:hover:not(:disabled) { background: var(--danger-100); color: var(--danger-700); }

.btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  color: #fff; animation: spin .6s linear infinite;
}
.btn-secondary.is-loading::after, .btn-ghost.is-loading::after { color: var(--n-600); }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: var(--s4); }
.field:last-child { margin-bottom: 0; }

.label {
  display: block; font-size: .875rem; font-weight: 600;
  color: var(--n-800); margin-bottom: 6px;
}
.label .req { color: var(--danger-700); }
.label .opt { color: var(--text-subtle); font-weight: 500; }

.input, .textarea {
  width: 100%; min-height: 42px; padding: 9px var(--s3);
  font-size: 16px; /* 16px stops iOS zooming on focus */
  background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:hover, .textarea:hover { border-color: var(--n-400); }
.input:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.input:disabled, .textarea:disabled { background: var(--n-50); color: var(--text-muted); cursor: not-allowed; }
.textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.textarea-code { font-family: var(--mono); font-size: 13px; line-height: 1.6; min-height: 220px; }

.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger-700); background: #fffafa;
}

.hint { font-size: .8125rem; color: var(--text-muted); margin-top: 6px; }

/* Error carries an icon as well as colour — colour alone is not enough. */
.field-error {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: .8125rem; font-weight: 500; color: var(--danger-700); margin-top: 6px;
}
.field-error .icon { width: 15px; height: 15px; margin-top: 2px; }
.field-error:empty { display: none; }

/* "Come back in [− 2 +] [hours|days|months]" — the amount stepper and the
   unit picker sit side by side on one row. Used by the "Call back later"
   modal on both the Leads and Call queue pages.

   The unit is a segmented control rather than a dropdown on purpose. Three
   short, mutually exclusive options do not need a popup, and the popup was
   actively wrong here: .select-menu is absolutely positioned inside
   .modal-body, which scrolls (overflow-y: auto), so in a modal this short
   the menu was clipped by its own scroll container and overlapped the
   amount box instead of opening cleanly below. A segmented control has no
   layer to clip. */
.snooze-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* Amount stepper. A text input with inputmode="numeric", never
   <input type="number"> — the native spinner arrows are browser chrome we
   don't style and can't theme (see the "no native browser UI" rule). */
.stepper {
  display: flex; align-items: center; flex: 0 0 auto;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
  overflow: hidden;
}
/* Same focus ring as .input, so the stepper reads as one field. */
.stepper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--brand-100); }
.stepper button {
  display: flex; align-items: center; justify-content: center;
  width: 38px; align-self: stretch; padding: 0;
  border: 0; background: none; color: var(--text-muted); cursor: pointer;
}
.stepper button:hover:not(:disabled) { background: var(--n-100); color: var(--text); }
.stepper button:disabled { opacity: .4; cursor: not-allowed; }
.stepper input {
  width: 52px; padding: 10px 0; border: 0; background: none;
  font: inherit; font-variant-numeric: tabular-nums; color: var(--text); text-align: center;
}
.stepper input:focus { outline: none; }

/* Segmented unit picker. */
.segmented {
  display: inline-flex; flex: 0 1 auto; padding: 3px; gap: 2px;
  background: var(--n-100); border-radius: var(--r);
}
.segmented button {
  flex: 1 1 auto; padding: 7px var(--s3);
  border: 0; border-radius: calc(var(--r) - 3px); background: none;
  font: inherit; font-size: .875rem; color: var(--text-muted);
  cursor: pointer; white-space: nowrap;
}
.segmented button:hover[aria-checked="false"] { color: var(--text); }
.segmented button[aria-checked="true"] {
  background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--sh-1);
}
.segmented button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.input-affix { position: relative; display: flex; align-items: center; }
.input-affix .input { padding-left: 30px; }
.input-affix .affix {
  position: absolute; left: var(--s3); color: var(--text-muted);
  font-weight: 600; pointer-events: none;
}
.input-affix .btn-icon { position: absolute; right: 4px; }
.input-affix:has(.btn-icon) .input { padding-right: 44px; }

.input-money { font-family: var(--mono); font-variant-numeric: tabular-nums; }

fieldset { border: 0; padding: 0; }
legend {
  font-size: .875rem; font-weight: 700; color: var(--n-800);
  padding: 0 0 var(--s2);
}

.form-grid { display: grid; gap: 0 var(--s4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Checkbox & switch — custom, never the raw browser control */
.check { display: flex; align-items: flex-start; gap: var(--s3); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-box {
  width: 20px; height: 20px; flex: none; margin-top: 1px;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface);
  display: grid; place-items: center;
  transition: background var(--fast), border-color var(--fast);
}
.check-box svg { width: 13px; height: 13px; color: #fff; opacity: 0; }
.check input:checked + .check-box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check-box svg { opacity: 1; }
.check input:focus-visible + .check-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check-text { font-size: .9375rem; }
.check-text small { display: block; color: var(--text-muted); font-size: .8125rem; }

.switch { display: flex; align-items: center; gap: var(--s3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 42px; height: 24px; flex: none; border-radius: var(--r-full);
  background: var(--n-300); position: relative;
  transition: background var(--fast);
}
.switch-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: var(--sh-1); transition: transform var(--norm) var(--ease);
}
.switch input:checked + .switch-track { background: var(--ok-700); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   7. Custom select & date field
   CLAUDE.md Part 6 forbids native <select> / <input type="date"> chrome.
   -------------------------------------------------------------------------- */
.select { position: relative; }
/* Metrics deliberately identical to .input: a select and a text box sit side
   by side in the same form grid, and a 2px height difference between them
   reads as a mistake. */
.select-btn {
  width: 100%; min-height: 42px; padding: 9px var(--s3);
  display: flex; align-items: center; gap: var(--s2);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r); cursor: pointer; text-align: left;
  font-size: 16px;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.select-btn:hover { border-color: var(--n-400); }
.select-btn[aria-expanded="true"] {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--brand-100);
}
.select-btn .select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-btn .select-value.is-placeholder { color: var(--text-subtle); }
.select-btn .chev { color: var(--text-muted); transition: transform var(--fast); }
.select-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.select-menu {
  position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0;
  padding: var(--s1);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--sh-3);
}
.select-menu[hidden] { display: none; }
/* The list scrolls; the filter box stays pinned above it, so it never
   scrolls away from the results it is filtering. */
.select-list { max-height: 280px; overflow-y: auto; }
.select-search {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s2) var(--s2);
  border-bottom: 1px solid var(--border); margin-bottom: var(--s1);
  color: var(--text-muted);
}
.select-search input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 4px 0;
  font: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */
  color: var(--text); outline: none;
}
.select-search input::placeholder { color: var(--text-subtle); }
.select-none { padding: var(--s3); color: var(--text-muted); font-size: .875rem; }
.select-opt {
  display: flex; align-items: center; gap: var(--s2);
  padding: 9px var(--s3); border-radius: var(--r-sm);
  cursor: pointer; font-size: .9375rem;
}
.select-opt:hover, .select-opt.is-active { background: var(--n-100); }
.select-opt[aria-selected="true"] { color: var(--accent); font-weight: 600; }
.select-opt .tick { margin-left: auto; opacity: 0; color: var(--accent); }
.select-opt[aria-selected="true"] .tick { opacity: 1; }

.datefield { position: relative; }
.cal {
  position: absolute; z-index: 50; top: calc(100% + 4px); left: 0;
  width: 280px; padding: var(--s3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--sh-3);
}
.cal[hidden] { display: none; }
.cal-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.cal-title { flex: 1; text-align: center; font-weight: 700; font-size: .9375rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow {
  text-align: center; font-size: .6875rem; font-weight: 700;
  color: var(--text-subtle); padding: var(--s1) 0; text-transform: uppercase;
}
.cal-day {
  aspect-ratio: 1; display: grid; place-items: center;
  border: 0; background: transparent; border-radius: var(--r-sm);
  font-size: .875rem; cursor: pointer; font-variant-numeric: tabular-nums;
}
.cal-day:hover { background: var(--n-100); }
.cal-day.is-muted { color: var(--text-subtle); }
.cal-day.is-today { font-weight: 700; color: var(--accent); box-shadow: inset 0 0 0 1px var(--brand-100); }
.cal-day.is-sel { background: var(--accent); color: #fff; font-weight: 700; }
.cal-foot { display: flex; gap: var(--s2); margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--border); }

/* --------------------------------------------------------------------------
   8. Tables — reflow to cards below 768px
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th, .table td { padding: var(--s3) var(--s4); text-align: left; vertical-align: middle; }
.table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-sunk);
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.table tbody tr { border-bottom: 1px solid var(--border); }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-sunk); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: .875rem; }
.table .actions { text-align: right; white-space: nowrap; }
.table .actions .btn-row { justify-content: flex-end; flex-wrap: nowrap; }

.sort-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
}
.sort-btn .icon { width: 13px; height: 13px; opacity: .4; }
th[aria-sort] .sort-btn .icon { opacity: 1; color: var(--accent); }

.cell-main { font-weight: 600; color: var(--text); }
.cell-sub { font-size: .8125rem; color: var(--text-muted); }

@media (max-width: 767px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tbody tr {
    border: 1px solid var(--border); border-radius: var(--r);
    padding: var(--s3); margin-bottom: var(--s3); background: var(--surface);
  }
  .table td {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
    padding: 6px 0; text-align: right;
  }
  .table td::before {
    content: attr(data-label);
    font-size: .8125rem; font-weight: 600; color: var(--text-muted);
    text-align: left; flex: none;
  }
  .table td:empty { display: none; }
  .table .actions { text-align: right; padding-top: var(--s3); }
  .table .actions .btn-row { justify-content: flex-end; flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   9. Badges, pills, status
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-full);
  font-size: .75rem; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.badge-ok      { background: var(--ok-100);     color: var(--ok-700); }
.badge-warn    { background: var(--warn-100);   color: var(--warn-700); }
.badge-danger  { background: var(--danger-100); color: var(--danger-700); }
.badge-info    { background: var(--brand-100);  color: var(--brand-700); }
.badge-neutral { background: var(--n-100);      color: var(--n-600); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px; border-radius: var(--r-full);
  background: var(--brand-50); color: var(--brand-700);
  border: 1px solid var(--brand-100);
  font-size: .8125rem; font-weight: 600;
}
.chip .btn-icon { min-height: 20px; width: 20px; color: inherit; }

.mono { font-family: var(--mono); font-size: .875rem; font-variant-numeric: tabular-nums; }
.money { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }

/* --------------------------------------------------------------------------
   10. Toolbar / filters
   -------------------------------------------------------------------------- */
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
}
.toolbar .search { flex: 1 1 220px; min-width: 0; }
.toolbar .select { flex: 0 1 180px; }
.toolbar-count { font-size: .8125rem; color: var(--text-muted); margin-left: auto; white-space: nowrap; }

.search { position: relative; }
.search .icon { position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%); color: var(--text-subtle); }
.search .input { padding-left: 38px; }

.bulkbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--brand-50); border-bottom: 1px solid var(--brand-100);
  font-size: .875rem; font-weight: 600; color: var(--brand-700);
}
.bulkbar[hidden] { display: none; }

/* --------------------------------------------------------------------------
   11. Tabs
   -------------------------------------------------------------------------- */
.tabs {
  display: flex; gap: var(--s1); overflow-x: auto;
  border-bottom: 1px solid var(--border); margin-bottom: var(--s5);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: var(--s3) var(--s4); border: 0; background: none; cursor: pointer;
  font-size: .9375rem; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: color var(--fast), border-color var(--fast);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }

/* --------------------------------------------------------------------------
   12. Modal — closes via the top-right X (CLAUDE.md Part 6)
   -------------------------------------------------------------------------- */
.modal-root { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--s4); }
.modal-root[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(12, 31, 53, .55); animation: fade var(--norm) var(--ease); }
.modal {
  position: relative; width: 100%; max-width: 520px;
  max-height: calc(100vh - var(--s7));
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  animation: pop var(--norm) var(--ease);
}
.modal-lg { max-width: 720px; }
.modal-head {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s5) var(--s5) var(--s4);
}
.modal-head-text { flex: 1; min-width: 0; }
.modal-head h2 { font-size: 1.125rem; }
.modal-head p { font-size: .875rem; color: var(--text-muted); margin-top: 4px; }
.modal-close { margin: -6px -6px 0 0; }
.modal-body { padding: 0 var(--s5) var(--s5); overflow-y: auto; }
.modal-foot {
  display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end;
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--border); background: var(--surface-sunk);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   12b. Booking modal — reference calendar beside the picker
   -------------------------------------------------------------------------- */
.booking { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 800px) { .booking { grid-template-columns: 1fr 1fr; } }
.booking-cal h3 { font-size: .875rem; margin-bottom: var(--s2); }
.booking-cal iframe {
  width: 100%; height: 320px; border: 1px solid var(--border);
  border-radius: var(--r); background: var(--surface);
}
.booking-cal .empty { padding: var(--s5) var(--s3); }

/* --------------------------------------------------------------------------
   13. Toast
   -------------------------------------------------------------------------- */
.toasts {
  position: fixed; z-index: 200; bottom: var(--s4); left: var(--s4); right: var(--s4);
  display: flex; flex-direction: column-reverse; gap: var(--s2);
  pointer-events: none;
}
@media (min-width: 640px) { .toasts { left: auto; width: 380px; } }

.toast {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--n-900); color: #fff;
  border-radius: var(--r); box-shadow: var(--sh-3);
  font-size: .9375rem; pointer-events: auto;
  animation: toast-in var(--norm) var(--ease);
}
.toast .icon { margin-top: 2px; flex: none; }
.toast-text { flex: 1; min-width: 0; }
.toast-ok .icon     { color: #5fdba7; }
.toast-error .icon  { color: #ff9c94; }
.toast .btn-icon { color: #9fb0c2; margin: -6px -6px 0 0; }
.toast .btn-icon:hover { background: rgba(255,255,255,.12); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* --------------------------------------------------------------------------
   14. Empty, loading, alerts
   -------------------------------------------------------------------------- */
.empty { padding: var(--s7) var(--s5); text-align: center; }
.empty .icon-lg { margin: 0 auto var(--s3); color: var(--text-subtle); width: 32px; height: 32px; }
.empty h3 { margin-bottom: var(--s2); }
.empty p { color: var(--text-muted); max-width: 44ch; margin: 0 auto var(--s4); font-size: .9375rem; }

.skel { background: var(--n-100); border-radius: var(--r-sm); animation: pulse 1.5s ease-in-out infinite; }
.skel-line { height: 13px; margin-bottom: var(--s2); }
.skel-row { display: flex; gap: var(--s4); padding: var(--s3) var(--s4); align-items: center; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.alert {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r);
  font-size: .875rem; border: 1px solid transparent;
}
.alert .icon { flex: none; margin-top: 1px; }
.alert-info    { background: var(--brand-50);   color: var(--brand-700);  border-color: var(--brand-100); }
.alert-warn    { background: var(--warn-100);   color: var(--warn-700);   border-color: #f2ddb4; }
.alert-danger  { background: var(--danger-100); color: var(--danger-700); border-color: #f2cdc9; }
.alert-ok      { background: var(--ok-100);     color: var(--ok-700);     border-color: #bfead6; }
.alert strong { font-weight: 700; }
.alert + .alert, .alert + .field, .field + .alert { margin-top: var(--s4); }

/* --------------------------------------------------------------------------
   15. Auth pages — centred card, no app shell
   -------------------------------------------------------------------------- */
.auth {
  min-height: 100vh; display: grid; place-items: center;
  padding: var(--s5) var(--s4);
  background:
    radial-gradient(1000px 500px at 50% -10%, #e8f0fb 0%, transparent 70%),
    var(--bg);
}
.auth-card { width: 100%; max-width: 420px; }
.auth-brand {
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  margin-bottom: var(--s5); color: var(--brand-900);
  font-weight: 800; font-size: 1.0625rem; letter-spacing: -.02em;
}
.auth-brand:hover { text-decoration: none; }
.auth-brand .mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(140deg, var(--brand-500), var(--brand-600));
  display: grid; place-items: center; color: #fff;
}
.auth-head { text-align: center; margin-bottom: var(--s5); }
.auth-head h1 { font-size: 1.375rem; margin-bottom: var(--s2); }
.auth-head p { color: var(--text-muted); font-size: .9375rem; }
.auth-alt { text-align: center; margin-top: var(--s5); font-size: .9375rem; color: var(--text-muted); }

/* Step progress — two segments on the admin's password → 2FA flow */
.steps { display: flex; gap: var(--s1); margin-bottom: var(--s5); }
.steps-seg {
  height: 4px; flex: 1; border-radius: var(--r-full);
  background: var(--n-200); transition: background var(--norm) var(--ease);
}
.steps-seg.is-current, .steps-seg.is-done { background: var(--accent); }

/* One-time-code input — wide tracking so six digits read as six digits */
.input-code {
  text-align: center; letter-spacing: .4em; text-indent: .4em;
  font-family: var(--mono); font-size: 1.25rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Password strength meter — advisory; the server's hard rule is 10+ chars */
.strength { display: flex; gap: var(--s1); margin-top: var(--s2); }
.strength-seg {
  height: 4px; flex: 1; border-radius: var(--r-full);
  background: var(--n-200); transition: background var(--norm) var(--ease);
}
.strength-seg.is-weak   { background: var(--danger-700); }
.strength-seg.is-fair   { background: #c9862a; }
.strength-seg.is-good   { background: #2f8f5b; }
.strength-seg.is-strong { background: var(--ok-700); }

/* --------------------------------------------------------------------------
   16. Utilities
   -------------------------------------------------------------------------- */
.row { display: flex; align-items: center; gap: var(--s3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: var(--s4); }
.stack-sm > * + * { margin-top: var(--s2); }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.small { font-size: .875rem; }
.tiny { font-size: .8125rem; }
.strong { font-weight: 700; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center { text-align: center; }
.right { text-align: right; }
.mt-0 { margin-top: 0; } .mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); }
.mb-0 { margin-bottom: 0; } .mb-3 { margin-bottom: var(--s3); } .mb-4 { margin-bottom: var(--s4); }
.hidden, [hidden] { display: none !important; }
.divider { height: 1px; background: var(--border); border: 0; margin: var(--s5) 0; }

.kv { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 560px) { .kv { grid-template-columns: 180px 1fr; gap: var(--s3) var(--s4); } }
.kv dt { font-size: .875rem; font-weight: 600; color: var(--text-muted); }
.kv dd { font-size: .9375rem; }

.code {
  font-family: var(--mono); font-size: .8125rem;
  background: var(--n-100); padding: 2px 6px; border-radius: var(--r-sm);
  word-break: break-all;
}
pre.code { padding: var(--s3) var(--s4); overflow-x: auto; white-space: pre; }

/* --------------------------------------------------------------------------
   17. AI receptionist — knowledge base file manager + appointments
        Used by ai-components.js, which serves the admin and business UIs
        from one implementation. Everything below is built from the tokens
        above; no new colours, radii or spacing values are introduced.
   -------------------------------------------------------------------------- */

/* Breadcrumb — every segment except the last is a real button */
.crumbs { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; min-width: 0; }
.crumb {
  border: 0; background: none; padding: 2px 6px; border-radius: var(--r-sm);
  font: inherit; font-size: .875rem; font-weight: 600; color: var(--accent);
  cursor: pointer; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crumb:hover { background: var(--brand-50); }
.crumb.is-current { color: var(--text); cursor: default; }
.crumb.is-current:hover { background: none; }
.crumb-sep { color: var(--text-subtle); font-size: .875rem; }

/* Drop zone. The hint is an overlay so the list underneath never reflows
   when a drag starts — a list that jumps as you drag is unusable. */
.filedrop { position: relative; }
.filedrop-hint {
  position: absolute; inset: var(--s2); z-index: 2;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2);
  background: var(--brand-50); border: 2px dashed var(--accent); border-radius: var(--r);
  color: var(--brand-700); font-weight: 700; font-size: .9375rem;
}
.filedrop.is-over .filedrop-hint { display: flex; }
.filedrop.is-over .filelist, .filedrop.is-over .empty { opacity: .35; }

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

.fileitem {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
}
.fileitem:last-child { border-bottom: 0; }
.fileitem:hover { background: var(--surface-sunk); }
.fileitem-icon { flex: none; display: grid; place-items: center; color: var(--text-subtle); }
.fileitem.is-folder .fileitem-icon { color: var(--accent); }
.fileitem-main { flex: 1; min-width: 0; }

.fileitem-name {
  display: block; font-weight: 600; font-size: .9375rem; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
button.fileitem-name {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 600;
  color: var(--accent); cursor: pointer; text-align: left; width: 100%;
}
button.fileitem-name:hover { text-decoration: underline; }
.fileitem-meta { display: block; font-size: .8125rem; color: var(--text-muted); margin-top: 1px; }
.fileitem-warn {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 6px;
  font-size: .8125rem; color: var(--warn-700);
}
.fileitem-warn .icon { flex: none; margin-top: 1px; }

/* Row actions stay visible on touch, where there is no hover to reveal
   them, and on keyboard focus. */
.fileitem-actions { flex: none; display: flex; gap: 2px; opacity: .55; transition: opacity var(--fast); }
.fileitem:hover .fileitem-actions,
.fileitem:focus-within .fileitem-actions { opacity: 1; }
@media (hover: none) { .fileitem-actions { opacity: 1; } }

@media (max-width: 560px) {
  .fileitem { flex-wrap: wrap; }
  .fileitem-actions { width: 100%; justify-content: flex-end; }
}

/* Working-day toggles — seven small checkable chips */
.daytoggles { display: flex; flex-wrap: wrap; gap: var(--s2); }
.daytoggle { position: relative; cursor: pointer; }
.daytoggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.daytoggle span {
  display: grid; place-items: center; min-width: 52px; min-height: 36px;
  padding: 0 var(--s2); border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: .875rem; font-weight: 600; color: var(--text-muted);
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.daytoggle input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.daytoggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.notes-cell {
  max-width: 34ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Feature toggle list on the admin AI configuration page */
.featurelist { display: grid; gap: var(--s3); }
.featurerow {
  display: flex; align-items: flex-start; gap: var(--s4);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
}
.featurerow.is-locked { opacity: .55; }
.featurerow-text { flex: 1; min-width: 0; }
.featurerow-text strong { display: block; font-size: .9375rem; }
.featurerow-text small { display: block; color: var(--text-muted); font-size: .8125rem; margin-top: 2px; }

/* --------------------------------------------------------------------------
   Appointment types — segmented field-requirement control (2026-08-02)

   Each customer field is required / optional / don't-ask. A three-state choice
   is a radio group semantically, but rendered as radios it reads as three
   unrelated questions stacked down the modal. Segmented buttons keep the three
   states side by side, so the row reads as one decision about one field —
   which is what it is.
   -------------------------------------------------------------------------- */
.field-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s2) 0;
  border-bottom: 1px solid var(--border);
}
.field-row:last-child { border-bottom: 0; }
.field-row .label { margin: 0; }

.seg {
  display: inline-flex; flex: none;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  overflow: hidden; background: var(--surface);
}
.seg-btn {
  padding: var(--s2) var(--s3); border: 0; background: none; cursor: pointer;
  font-size: .8125rem; font-weight: 600; color: var(--text-muted);
  white-space: nowrap;
  transition: background var(--fast), color var(--fast);
}
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn:hover { color: var(--text); }
.seg-btn.is-on { background: var(--accent); color: #fff; }
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* One custom question, boxed so several in a row stay visibly separate. */
.stack-row {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--s4); margin-bottom: var(--s3);
  background: var(--surface-2, transparent);
}
.btn-row-between { justify-content: space-between; align-items: center; }

/* A type that's no longer offered still has to be readable — dimmed, not
   hidden, because the appointments booked under it are still real. */
.row-muted > td { opacity: .6; }

@media (max-width: 520px) {
  .field-row { flex-direction: column; align-items: stretch; }
  .seg { width: 100%; }
  .seg-btn { flex: 1; }
}