/* ==========================================================================
   Bookanic design system (brand.css)
   Loaded FIRST on every page (views.js shell() adds it), so page styles
   (app.css, admin.css, booking.css) can use and override everything here.

   Contents
     1. Tokens: palette, light + dark surfaces, type, space, radii,
        shadows, motion, layers
     2. Base: font, colours, focus ring, selection, gentle transitions
     3. Keyframes
     4. Motion helpers + motion for existing components
     5. Brand: mark, wordmark, "Powered by Bookanic"
     6. Components: buttons, inputs, cards, chips/pills, plate, stage
        chips, docket, monogram, banners, hex steps, day strip, tabs,
        dialogs, toasts, empty states, icons
     7. Loading: skeletons, spinner, success tick
     8. Utilities
     9. Reduced motion

   Theme switching (unchanged from before):
     - follows the computer/phone (prefers-color-scheme) by default
     - <html data-theme="light|dark"> (set by the Light/Dark/Auto buttons and
       the inline script in shell()) wins over the system setting
     - <html class="bk-light-only"> pins a page to light (the public booking
       page, which sits inside workshops' own websites)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- fixed brand palette (same in light and dark) --- */
  --bk-teal: #0B6B66;            /* petrol teal: the brand colour */
  --bk-teal-deep: #074744;       /* hover / pressed on light */
  --bk-teal-tint: #E3F2F0;       /* soft panels on light */
  --bk-teal-bright: #3CC7B4;     /* teal on dark backgrounds */
  --bk-amber: #FFB21E;           /* safety amber: ONE call-to-action per screen */
  --bk-ink: #13212B;             /* text, and "Book" in the wordmark */
  --bk-ink-on-dark: #F3F7F7;

  /* --- font --- */
  --bk-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --bk-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --bk-font-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", SFMono-Regular, Menlo, Consolas, monospace;

  /* --- type scale (px so the dense counter screens stay predictable) --- */
  --bk-fs-2xs: 11.5px;   /* tiny labels, pill text */
  --bk-fs-xs: 12.5px;    /* hints, meta */
  --bk-fs-sm: 13.5px;    /* secondary text, buttons, labels */
  --bk-fs-base: 15px;    /* body */
  --bk-fs-md: 16.5px;    /* card titles */
  --bk-fs-lg: 19px;      /* dialog titles, section heads */
  --bk-fs-xl: 24px;      /* page titles */
  --bk-fs-2xl: 30px;     /* big numbers, auth headings on desktop */
  --bk-fs-3xl: clamp(32px, 5.2vw, 48px); /* home page hero */
  --bk-fw-regular: 400;
  --bk-fw-medium: 600;
  --bk-fw-bold: 700;
  --bk-fw-heavy: 800;
  --bk-lh-tight: 1.2;
  --bk-lh-snug: 1.35;
  --bk-lh-base: 1.5;
  --bk-lh-loose: 1.65;
  --bk-tracking-tight: -0.02em;  /* headings */
  --bk-tracking-caps: 0.06em;    /* small uppercase labels */

  /* --- spacing (4 px grid) --- */
  --bk-space-1: 4px;
  --bk-space-2: 8px;
  --bk-space-3: 12px;
  --bk-space-4: 16px;
  --bk-space-5: 20px;
  --bk-space-6: 24px;
  --bk-space-7: 32px;
  --bk-space-8: 40px;
  --bk-space-9: 48px;
  --bk-space-10: 64px;

  /* --- radii --- */
  --bk-radius-xs: 6px;    /* pills inside rows, small tags */
  --bk-radius-sm: 8px;    /* inputs, small buttons */
  --bk-radius-md: 10px;   /* buttons, rows */
  --bk-radius-lg: 14px;   /* cards */
  --bk-radius-xl: 20px;   /* dialogs, hero panels */
  --bk-radius-pill: 999px;

  /* --- motion --- */
  --bk-ease: cubic-bezier(.2, .8, .2, 1);       /* the house easing: quick out, soft landing */
  --bk-ease-in-out: cubic-bezier(.4, 0, .2, 1); /* for things that move both ways (indicators) */
  --bk-ease-in: cubic-bezier(.4, 0, 1, 1);      /* only for leaving the screen */
  --bk-dur-fast: 120ms;   /* hover, press, colour changes */
  --bk-dur-base: 200ms;   /* content appearing, rows opening, tab ink */
  --bk-dur-slow: 240ms;   /* dialogs, toasts, page-level changes */
  --bk-dur-shimmer: 1400ms;
  --bk-rise: 8px;         /* how far rise-in content travels */

  /* --- layers --- */
  --bk-z-sticky: 10;
  --bk-z-dropdown: 20;
  --bk-z-overlay: 50;
  --bk-z-toast: 100;

  /* --- semantic colours: LIGHT --- */
  --bk-bg: #F6F8F8;              /* page background */
  --bk-surface: #FFFFFF;         /* cards, top bar, dialogs */
  --bk-surface-2: #F0F4F4;       /* hover rows, code boxes, segmented controls */
  --bk-surface-3: #FAFBFB;       /* notes, quiet insets */
  --bk-surface-raised: #FFFFFF;  /* menus, popovers */
  --bk-border: #DCE4E5;
  --bk-border-soft: #E9EEEF;     /* dividers inside cards */
  --bk-border-strong: #C2CDCF;   /* card edges, dividers, tear lines (typing boxes use --bk-field-border) */
  --bk-text: #13212B;            /* ink */
  --bk-text-2: #364852;          /* body copy that is not the main thing */
  --bk-muted: #5B6E76;           /* hints, meta, labels */
  --bk-faint: #8C9CA3;           /* disabled text, placeholders */

  --bk-brand: #0B6B66;           /* buttons, active tabs, selected */
  --bk-brand-strong: #074744;    /* hover / pressed */
  --bk-brand-text: #0B6B66;      /* links and brand-coloured text */
  --bk-brand-tint: #E3F2F0;      /* soft panels, chips, selected rows */
  --bk-brand-tint-strong: #CDE8E4; /* hover on tint */
  --bk-on-brand: #FFFFFF;        /* text on --bk-brand */

  --bk-accent: #FFB21E;          /* amber CTA (one per screen) */
  --bk-accent-strong: #F2A100;   /* amber hover */
  --bk-accent-tint: #FFF4DC;
  --bk-on-accent: #13212B;       /* text on amber is always ink */

  --bk-success: #1E9E6A;
  --bk-success-text: #12784E;
  --bk-success-bg: #E6F6EF;
  --bk-success-border: #B5E1CC;
  --bk-warning: #FFB21E;
  --bk-warning-text: #8A5A00;
  --bk-warning-bg: #FFF5DE;
  --bk-warning-border: #F3D58C;
  --bk-danger: #D64545;
  --bk-danger-text: #B4302F;
  --bk-danger-bg: #FDEFEF;
  --bk-danger-border: #F1C4C4;
  --bk-info: #2F7FB8;
  --bk-info-text: #22669A;
  --bk-info-bg: #E9F2FA;
  --bk-info-border: #BFD8EE;

  --bk-chip-bg: #EDF2F2;         /* neutral pills */
  --bk-chip-text: #55666E;
  --bk-overlay: rgba(12, 22, 28, .46);  /* behind dialogs */
  --bk-toast-bg: #13212B;
  --bk-toast-text: #F3F7F7;
  --bk-toast-accent: #3CC7B4;
  --bk-skeleton: #E8EEEF;
  --bk-skeleton-shine: rgba(255, 255, 255, .7);

  --bk-focus: #3CC7B4;
  --bk-focus-ring: 0 0 0 3px rgba(60, 199, 180, .45);
  --bk-selection: rgba(11, 107, 102, .18);
  --bk-mark-tile: #0B6B66;
  /* inputs, checkboxes, radios: 3:1 against the surface (WCAG 1.4.11) */
  --bk-field-border: #7E8F97;
  --bk-field-border-hover: #5B6E76;
  /* the number plate: the same in light and dark, like a real plate */
  --bk-plate-bg: #FFFFFF;
  --bk-plate-ink: #13212B;
  /* re-check / pink slip */
  --bk-pink-text: #A82C5B;
  --bk-pink-bg: #FCEBF2;
  /* the hex nut, for step numbers */
  --bk-hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  --bk-stripe: 4px;          /* a service's colour stripe */
  --bk-tap: 44px;            /* minimum tap target on phones */

  /* soft, layered shadows (light) */
  --bk-shadow-xs: 0 1px 2px rgba(19, 33, 43, .06);
  --bk-shadow-sm: 0 1px 2px rgba(19, 33, 43, .05), 0 2px 8px rgba(19, 33, 43, .05);
  --bk-shadow-md: 0 1px 3px rgba(19, 33, 43, .05), 0 6px 18px rgba(19, 33, 43, .08);
  --bk-shadow-lg: 0 2px 6px rgba(19, 33, 43, .05), 0 14px 36px rgba(19, 33, 43, .12);
  --bk-shadow-xl: 0 4px 12px rgba(19, 33, 43, .07), 0 28px 70px rgba(19, 33, 43, .22);

  color-scheme: light;
}

/* --- semantic colours: DARK ---
   Written twice on purpose: once for "follow the system", once for the
   Dark button. Keep the two blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.bk-light-only) {
    --bk-bg: #0E1318;
    --bk-surface: #161D23;
    --bk-surface-2: #1D262D;
    --bk-surface-3: #131A20;
    --bk-surface-raised: #1B232A;
    --bk-border: #26313A;
    --bk-border-soft: #1F2930;
    --bk-border-strong: #364550;
    --bk-text: #F3F7F7;
    --bk-text-2: #C7D2D6;
    --bk-muted: #93A4AC;
    --bk-faint: #66777F;
    --bk-brand: #3CC7B4;
    --bk-brand-strong: #5ED6C5;
    --bk-brand-text: #4FD0BE;
    --bk-brand-tint: #12302E;
    --bk-brand-tint-strong: #18403C;
    --bk-on-brand: #0B1A1C;
    --bk-accent: #FFB21E;
    --bk-accent-strong: #FFC24D;
    --bk-accent-tint: #2D2410;
    --bk-on-accent: #13212B;
    --bk-success: #3DBE8B;
    --bk-success-text: #72D8AA;
    --bk-success-bg: #11291F;
    --bk-success-border: #1F4A37;
    --bk-warning: #FFB21E;
    --bk-warning-text: #FFCB5C;
    --bk-warning-bg: #2C2310;
    --bk-warning-border: #57441A;
    --bk-danger: #EE6B6B;
    --bk-danger-text: #FF9C9C;
    --bk-danger-bg: #2B1719;
    --bk-danger-border: #59292C;
    --bk-info: #5BA6DA;
    --bk-info-text: #8EC4EC;
    --bk-info-bg: #12233A;
    --bk-info-border: #22436A;
    --bk-chip-bg: #222C34;
    --bk-chip-text: #A9B8BF;
    --bk-overlay: rgba(2, 6, 9, .62);
    --bk-toast-bg: #F3F7F7;
    --bk-toast-text: #13212B;
    --bk-toast-accent: #0B6B66;
    --bk-skeleton: #1F2930;
    --bk-skeleton-shine: rgba(255, 255, 255, .06);
    --bk-focus: #3CC7B4;
    --bk-focus-ring: 0 0 0 3px rgba(60, 199, 180, .4);
    --bk-selection: rgba(60, 199, 180, .28);
    --bk-mark-tile: #0E7570;
    --bk-field-border: #647680;
    --bk-field-border-hover: #93A4AC;
    --bk-pink-text: #F48FB4;
    --bk-pink-bg: #2E1720;
    --bk-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --bk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
    --bk-shadow-md: 0 1px 3px rgba(0, 0, 0, .3), 0 8px 20px rgba(0, 0, 0, .35);
    --bk-shadow-lg: 0 2px 6px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .45);
    --bk-shadow-xl: 0 4px 12px rgba(0, 0, 0, .35), 0 30px 80px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]:not(.bk-light-only) {
  --bk-bg: #0E1318;
  --bk-surface: #161D23;
  --bk-surface-2: #1D262D;
  --bk-surface-3: #131A20;
  --bk-surface-raised: #1B232A;
  --bk-border: #26313A;
  --bk-border-soft: #1F2930;
  --bk-border-strong: #364550;
  --bk-text: #F3F7F7;
  --bk-text-2: #C7D2D6;
  --bk-muted: #93A4AC;
  --bk-faint: #66777F;
  --bk-brand: #3CC7B4;
  --bk-brand-strong: #5ED6C5;
  --bk-brand-text: #4FD0BE;
  --bk-brand-tint: #12302E;
  --bk-brand-tint-strong: #18403C;
  --bk-on-brand: #0B1A1C;
  --bk-accent: #FFB21E;
  --bk-accent-strong: #FFC24D;
  --bk-accent-tint: #2D2410;
  --bk-on-accent: #13212B;
  --bk-success: #3DBE8B;
  --bk-success-text: #72D8AA;
  --bk-success-bg: #11291F;
  --bk-success-border: #1F4A37;
  --bk-warning: #FFB21E;
  --bk-warning-text: #FFCB5C;
  --bk-warning-bg: #2C2310;
  --bk-warning-border: #57441A;
  --bk-danger: #EE6B6B;
  --bk-danger-text: #FF9C9C;
  --bk-danger-bg: #2B1719;
  --bk-danger-border: #59292C;
  --bk-info: #5BA6DA;
  --bk-info-text: #8EC4EC;
  --bk-info-bg: #12233A;
  --bk-info-border: #22436A;
  --bk-chip-bg: #222C34;
  --bk-chip-text: #A9B8BF;
  --bk-overlay: rgba(2, 6, 9, .62);
  --bk-toast-bg: #F3F7F7;
  --bk-toast-text: #13212B;
  --bk-toast-accent: #0B6B66;
  --bk-skeleton: #1F2930;
  --bk-skeleton-shine: rgba(255, 255, 255, .06);
  --bk-focus: #3CC7B4;
  --bk-focus-ring: 0 0 0 3px rgba(60, 199, 180, .4);
  --bk-selection: rgba(60, 199, 180, .28);
  --bk-mark-tile: #0E7570;
  --bk-field-border: #647680;
  --bk-field-border-hover: #93A4AC;
  --bk-pink-text: #F48FB4;
  --bk-pink-bg: #2E1720;
  --bk-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --bk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
  --bk-shadow-md: 0 1px 3px rgba(0, 0, 0, .3), 0 8px 20px rgba(0, 0, 0, .35);
  --bk-shadow-lg: 0 2px 6px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .45);
  --bk-shadow-xl: 0 4px 12px rgba(0, 0, 0, .35), 0 30px 80px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--bk-font);
  color: var(--bk-text);
  background: var(--bk-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* The Display face only at 22 px and up: at 15-17 px bold it reads cramped */
h1, h2 { font-family: var(--bk-font-display); }
h3, h4 { font-family: var(--bk-font); }
.bk-title-sm { font-family: var(--bk-font); font-size: var(--bk-fs-md); font-weight: var(--bk-fw-bold); letter-spacing: 0; line-height: var(--bk-lh-snug); }
::selection { background: var(--bk-selection); }
a { color: var(--bk-brand-text); text-underline-offset: 2px; }

/* One focus ring everywhere, keyboard only. Components that draw their own
   ring (inputs use border + box-shadow) set outline: none themselves. */
:focus-visible { outline: 2px solid var(--bk-focus); outline-offset: 2px; }

/* Calm, quick colour changes on everything people touch. :where() keeps
   this at zero specificity, so any page style can override it. */
:where(button, a, input, select, textarea, summary, label, [role="button"], [tabindex="0"]) {
  transition:
    background-color var(--bk-dur-fast) var(--bk-ease),
    border-color var(--bk-dur-fast) var(--bk-ease),
    color var(--bk-dur-fast) var(--bk-ease),
    box-shadow var(--bk-dur-fast) var(--bk-ease),
    opacity var(--bk-dur-fast) var(--bk-ease),
    transform var(--bk-dur-fast) var(--bk-ease);
}
:where(input, select, textarea)::placeholder { color: var(--bk-faint); opacity: 1; }
:where(img, svg) { vertical-align: middle; }
:where(.num, time) { font-variant-numeric: tabular-nums; }

/* Light/Dark switch: everything cross-fades for a moment instead of
   snapping. JS adds .bk-theme-anim to <html>, then removes it ~300 ms later. */
html.bk-theme-anim,
html.bk-theme-anim *,
html.bk-theme-anim *::before,
html.bk-theme-anim *::after {
  transition:
    background-color var(--bk-dur-slow) var(--bk-ease),
    border-color var(--bk-dur-slow) var(--bk-ease),
    color var(--bk-dur-slow) var(--bk-ease),
    fill var(--bk-dur-slow) var(--bk-ease),
    box-shadow var(--bk-dur-slow) var(--bk-ease) !important;
}

/* --------------------------------------------------------------------------
   3. Keyframes
   -------------------------------------------------------------------------- */
@keyframes bk-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bk-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes bk-rise-in {
  from { opacity: 0; transform: translateY(var(--bk-rise, 8px)); }
  to { opacity: 1; transform: none; }
}
@keyframes bk-drop-in {   /* menus and popovers opening downwards */
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@keyframes bk-scale-in {  /* dialogs */
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes bk-scale-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(4px) scale(.98); }
}
@keyframes bk-sheet-in {  /* dialogs on phones slide up from the bottom */
  from { opacity: .6; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes bk-shimmer {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}
@keyframes bk-tick-draw { from { stroke-dashoffset: var(--bk-tick-len, 30); } to { stroke-dashoffset: 0; } }
@keyframes bk-pop-in {    /* the success circle: grows in, no bounce */
  from { opacity: 0; transform: scale(.7); }
  to { opacity: 1; transform: none; }
}
@keyframes bk-spin { to { transform: rotate(360deg); } }
@keyframes bk-flash {     /* a row that was just added or changed */
  from { background-color: var(--bk-brand-tint); }
  to { background-color: transparent; }
}

/* --------------------------------------------------------------------------
   4. Motion helpers (add to any element)
   -------------------------------------------------------------------------- */
.bk-fade-in  { animation: bk-fade-in var(--bk-dur-base) var(--bk-ease) both; }
.bk-rise-in  { animation: bk-rise-in var(--bk-dur-base) var(--bk-ease) both; }
.bk-drop-in  { animation: bk-drop-in var(--bk-dur-fast) var(--bk-ease) both; }
.bk-scale-in { animation: bk-scale-in var(--bk-dur-slow) var(--bk-ease) both; }
.bk-flash    { animation: bk-flash 1200ms var(--bk-ease) both; }
/* A screen that slides in on a forward step; .bk-step-back for Back. None inside an iframe embed (booking adds .is-embed). */
.bk-step-in   { animation: bk-step-in var(--bk-dur-base) var(--bk-ease) both; }
.bk-step-back { animation: bk-step-back var(--bk-dur-base) var(--bk-ease) both; }
@keyframes bk-step-in   { from { opacity: 0; transform: translateX(8px); }  to { opacity: 1; transform: none; } }
@keyframes bk-step-back { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.is-embed .bk-step-in, .is-embed .bk-step-back { animation-name: bk-fade-in; }
/* Children rise in one after another (lists, cards). Up to 10 are staggered,
   the rest arrive with the 10th. Keep lists short: it must never feel slow. */
.bk-stagger > * { animation: bk-rise-in var(--bk-dur-base) var(--bk-ease) both; }
.bk-stagger > :nth-child(2)  { animation-delay: 25ms; }
.bk-stagger > :nth-child(3)  { animation-delay: 50ms; }
.bk-stagger > :nth-child(4)  { animation-delay: 75ms; }
.bk-stagger > :nth-child(5)  { animation-delay: 100ms; }
.bk-stagger > :nth-child(6)  { animation-delay: 120ms; }
.bk-stagger > :nth-child(7)  { animation-delay: 140ms; }
.bk-stagger > :nth-child(8)  { animation-delay: 155ms; }
.bk-stagger > :nth-child(9)  { animation-delay: 170ms; }
.bk-stagger > :nth-child(n+10) { animation-delay: 180ms; }
/* Leaving: add the class, wait for 'animationend', then remove the element */
.bk-leaving { animation: bk-fade-out var(--bk-dur-fast) var(--bk-ease-in) both; pointer-events: none; }

/* Motion for components that already exist in app.css / admin.css. These
   class names are relied on by the JS, so they get their motion here and
   page styles never need to repeat it. */
.modal-back { animation: bk-fade-in var(--bk-dur-base) var(--bk-ease) both; }
.modal { animation: bk-scale-in var(--bk-dur-slow) var(--bk-ease) both; }
.row-body.open { animation: bk-rise-in var(--bk-dur-base) var(--bk-ease) both; --bk-rise: 4px; }
.auth-card { animation: bk-rise-in var(--bk-dur-slow) var(--bk-ease) both; }
.to-results:not(:empty) { animation: bk-drop-in var(--bk-dur-fast) var(--bk-ease) both; }

/* --------------------------------------------------------------------------
   5. Brand
   -------------------------------------------------------------------------- */
/* The mark (LOGO_MARK in views.js, MARK in app.js/admin.js): 24 px tile.
   Size it with width/height on .bf-mark (20-28 px stays crisp). */
.bf-mark { flex-shrink: 0; display: inline-block; border-radius: 6px; }
.bf-mark .bf-mark-tile { fill: var(--bk-mark-tile); }
/* The wordmark: "Book" in ink, "anic" in teal */
.bf-word {
  font-family: var(--bk-font-display); font-weight: var(--bk-fw-bold);
  letter-spacing: -0.025em; color: var(--bk-text); white-space: nowrap;
}
.bf-word > span { color: var(--bk-brand-text); }
/* A lock-up: mark + wordmark side by side */
.bk-lockup { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
/* Booking page footer: the workshop's brand leads, Bookanic is a quiet credit */
.bk-powered {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--bk-fs-xs); color: var(--bk-muted); padding: var(--bk-space-4) 0;
  text-decoration: none;
}
.bk-powered .bf-mark { width: 16px; height: 16px; border-radius: 4px; }
.bk-powered b { font-weight: var(--bk-fw-medium); color: var(--bk-text-2); }
.bk-powered:hover b { color: var(--bk-brand-text); }

/* --------------------------------------------------------------------------
   6. Components (bk- classes for new markup; restyle existing classes with
      the same tokens - see DESIGN.md)
   -------------------------------------------------------------------------- */

/* --- buttons --- */
.bk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 16px; border-radius: var(--bk-radius-md);
  border: 1px solid var(--bk-border); background: var(--bk-surface); color: var(--bk-text);
  font: inherit; font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.bk-btn:hover { background: var(--bk-surface-2); border-color: var(--bk-border-strong); }
.bk-btn:active { transform: translateY(1px); }
.bk-btn:disabled, .bk-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.bk-btn--primary { background: var(--bk-brand); border-color: var(--bk-brand); color: var(--bk-on-brand); box-shadow: var(--bk-shadow-xs); }
.bk-btn--primary:hover { background: var(--bk-brand-strong); border-color: var(--bk-brand-strong); }
.bk-btn--secondary { /* the default look; class kept for readability */ }
.bk-btn--ghost { background: transparent; border-color: transparent; color: var(--bk-brand-text); }
.bk-btn--ghost:hover { background: var(--bk-brand-tint); border-color: transparent; }
.bk-btn--danger { color: var(--bk-danger-text); border-color: var(--bk-danger-border); }
.bk-btn--danger:hover { background: var(--bk-danger-bg); border-color: var(--bk-danger-border); }
.bk-btn--cta { background: var(--bk-accent); border-color: var(--bk-accent); color: var(--bk-on-accent); box-shadow: var(--bk-shadow-sm); font-weight: var(--bk-fw-bold); }
.bk-btn--cta:hover { background: var(--bk-accent-strong); border-color: var(--bk-accent-strong); }
/* Quiet: no box until hovered. Row actions that aren't the main one. */
.bk-btn--quiet { background: transparent; border-color: transparent; color: var(--bk-text-2); box-shadow: none; }
.bk-btn--quiet:hover { background: var(--bk-surface-2); border-color: var(--bk-border); color: var(--bk-text); }
.bk-btn--quiet-danger { background: transparent; border-color: transparent; color: var(--bk-danger-text); box-shadow: none; }
.bk-btn--quiet-danger:hover { background: var(--bk-danger-bg); border-color: var(--bk-danger-border); }
.bk-btn .bk-icon { width: 16px; height: 16px; }
.bk-btn--sm { min-height: 32px; padding: 0 12px; font-size: var(--bk-fs-xs); border-radius: var(--bk-radius-sm); }
.bk-btn--lg { min-height: 46px; padding: 0 24px; font-size: var(--bk-fs-base); border-radius: var(--bk-radius-md); }
.bk-btn--block { display: flex; width: 100%; }
.bk-btn--icon { padding: 0; width: 38px; }
/* phones and touch screens: small buttons still get a finger-sized target
   (after the size modifiers so it wins over them; --sm comes second so it keeps 40) */
@media (pointer: coarse) { .bk-btn { min-height: var(--bk-tap); } .bk-btn--sm { min-height: 40px; } .bk-btn--icon { width: var(--bk-tap); } }
.bk-btn.is-busy { color: transparent !important; position: relative; pointer-events: none; }
.bk-btn.is-busy::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--bk-on-brand) transparent var(--bk-on-brand) var(--bk-on-brand);
  animation: bk-spin 700ms linear infinite;
}

/* --- inputs --- */
.bk-input {
  width: 100%; min-height: 40px; padding: 9px 12px; border-radius: var(--bk-radius-sm);
  border: 1px solid var(--bk-field-border); background: var(--bk-surface); color: var(--bk-text);
  font: inherit; font-size: var(--bk-fs-base);
}
.bk-input:hover { border-color: var(--bk-field-border-hover); }
/* Select chevron: one look everywhere */
select.bk-input:not([multiple]) {
  -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6E76' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.bk-input:focus, .bk-input:focus-visible { outline: none; border-color: var(--bk-brand); box-shadow: var(--bk-focus-ring); }
.bk-input[aria-invalid="true"], .bk-input.err { border-color: var(--bk-danger); }
.bk-label { display: block; font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); color: var(--bk-text); margin: 0 0 6px; }
.bk-hint { font-size: var(--bk-fs-xs); color: var(--bk-muted); margin-top: 5px; line-height: var(--bk-lh-base); }

/* --- cards --- */
.bk-card {
  background: var(--bk-surface); border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-lg); box-shadow: var(--bk-shadow-sm); padding: var(--bk-space-5);
}
.bk-card--hover:hover { box-shadow: var(--bk-shadow-md); border-color: var(--bk-border-strong); }

/* --- chips and pills --- */
.bk-chip {   /* clickable filter */
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px;
  border-radius: var(--bk-radius-pill); border: 1px solid var(--bk-border);
  background: var(--bk-surface); color: var(--bk-text-2); font: inherit;
  font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); cursor: pointer;
}
.bk-chip:hover { border-color: var(--bk-border-strong); background: var(--bk-surface-2); }
.bk-chip[aria-pressed="true"], .bk-chip.active { background: var(--bk-brand-tint); border-color: var(--bk-brand); color: var(--bk-brand-text); }
.bk-pill {   /* status label, not clickable */
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border-radius: var(--bk-radius-pill); font-size: var(--bk-fs-2xs); font-weight: var(--bk-fw-bold);
  letter-spacing: .02em; background: var(--bk-chip-bg); color: var(--bk-chip-text); white-space: nowrap;
}
.bk-pill--brand   { background: var(--bk-brand-tint); color: var(--bk-brand-text); }
.bk-pill--success { background: var(--bk-success-bg); color: var(--bk-success-text); }
.bk-pill--warning { background: var(--bk-warning-bg); color: var(--bk-warning-text); }
.bk-pill--danger  { background: var(--bk-danger-bg); color: var(--bk-danger-text); }
.bk-pill--info    { background: var(--bk-info-bg); color: var(--bk-info-text); }
.bk-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; flex-shrink: 0; }

/* --- the number plate: every rego, white with an ink outline (also in dark) ---
   <span class="bk-plate">ABC123</span>   <span class="bk-plate">ABC123 <small>NSW</small></span>
   Not monospace on purpose: a heavy sans reads as a plate, mono reads as code. */
.bk-plate {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 22px; padding: 0 7px; border: 1.5px solid var(--bk-plate-ink); border-radius: var(--bk-radius-xs);
  background: var(--bk-plate-bg); color: var(--bk-plate-ink);
  font: var(--bk-fw-heavy) 12.5px/1 var(--bk-font); letter-spacing: .06em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: middle;
  box-shadow: inset 0 0 0 1px var(--bk-plate-bg), inset 0 0 0 2px rgba(19, 33, 43, .08);
}
.bk-plate--sm { height: 20px; padding: 0 6px; font-size: 11.5px; border-width: 1.25px; }
.bk-plate--lg { height: 34px; padding: 0 14px; font-size: 19px; border-width: 2px; letter-spacing: .08em; }
.bk-plate small { font-size: .62em; font-weight: var(--bk-fw-bold); letter-spacing: .04em; opacity: .7; } /* "NSW" */
/* The rego box people type into, styled as a plate */
input.bk-plate-input {
  text-align: center; text-transform: uppercase; font-weight: var(--bk-fw-heavy); letter-spacing: .08em;
  border: 2px solid var(--bk-plate-ink) !important; border-radius: var(--bk-radius-sm); background: var(--bk-plate-bg); color: var(--bk-plate-ink);
}
input.bk-plate-input::placeholder { font-weight: var(--bk-fw-regular); letter-spacing: .04em; text-transform: none; color: var(--bk-faint); }
@media print { .bk-plate { box-shadow: none; border-color: #000; color: #000; background: #fff; } }

/* --- stage chips: a booking/estimate status, ALWAYS an icon and a word ---
   <span class="bk-stage bk-stage--here"><svg class="bk-icon">(door)</svg>Here</span>
   Icons: booked clock, here door, ready check, passed check, noshow ban,
   waiting hourglass, late clock, ordered box, failed alert, recheck undo,
   info info/note, brand user. */
.bk-stage {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px;
  border-radius: var(--bk-radius-pill); font-size: var(--bk-fs-2xs); font-weight: var(--bk-fw-bold);
  letter-spacing: .03em; line-height: 1; white-space: nowrap; vertical-align: middle; font-variant-numeric: tabular-nums;
  background: var(--bk-chip-bg); color: var(--bk-chip-text);
}
.bk-stage > .bk-icon { width: 14px; height: 14px; stroke-width: 2.1; flex: 0 0 auto; }
.bk-stage--booked  { background: var(--bk-surface-2); color: var(--bk-muted); box-shadow: inset 0 0 0 1px var(--bk-border); }
.bk-stage--here    { background: var(--bk-info-bg); color: var(--bk-info-text); }
.bk-stage--ready   { background: var(--bk-success-bg); color: var(--bk-success-text); }
.bk-stage--passed  { background: var(--bk-success-bg); color: var(--bk-success-text); }
.bk-stage--noshow  { background: transparent; color: var(--bk-danger-text); box-shadow: inset 0 0 0 1px var(--bk-danger-border); }
.bk-stage--waiting,
.bk-stage--late    { background: var(--bk-warning-bg); color: var(--bk-text); box-shadow: inset 0 0 0 1px var(--bk-warning-border); }
.bk-stage--waiting > .bk-icon, .bk-stage--late > .bk-icon { color: var(--bk-warning-text); }
.bk-stage--ordered { background: var(--bk-surface-2); color: var(--bk-text-2); box-shadow: inset 0 0 0 1px var(--bk-border); }
.bk-stage--failed  { background: var(--bk-danger-bg); color: var(--bk-danger-text); }
.bk-stage--recheck { background: var(--bk-pink-bg); color: var(--bk-pink-text); }
.bk-stage--info    { background: var(--bk-info-bg); color: var(--bk-info-text); }   /* "Changed by customer", "Quote sent" */
.bk-stage--brand   { background: var(--bk-brand-tint); color: var(--bk-brand-text); } /* "Staff" */
.bk-stage-more     { background: transparent; color: var(--bk-muted); box-shadow: inset 0 0 0 1px var(--bk-border); padding: 0 7px; } /* "+1" */
@media print { .bk-stage { background: none !important; color: #000 !important; box-shadow: inset 0 0 0 1px #000 !important; } }

/* --- the docket: a booking or estimate summary with a dashed tear line ---
   <div class="bk-docket [bk-docket--edge]" style="--svc:#hex">
     <div class="bk-docket-top"><div class="bk-docket-rows"><div class="bk-docket-row">(icon)<span><b>..</b></span></div></div></div>
     <div class="bk-docket-tear" aria-hidden="true"></div>
     <div class="bk-docket-stub"><div><span class="bk-docket-lbl">Reference</span><span class="bk-docket-ref">TLPB3E</span></div>
       <button class="bk-copy">(icon) Copy</button></div>
   </div>
   The notches are clipped circles filled with --bk-docket-notch: set it to the
   colour BEHIND the docket (var(--bk-surface) when it sits on a white card). */
.bk-docket {
  position: relative; text-align: left; background: var(--bk-surface);
  border: 1px solid var(--bk-border); border-radius: var(--bk-radius-lg); box-shadow: var(--bk-shadow-sm);
  --bk-docket-notch: var(--bk-bg);   /* set to the colour BEHIND the docket */
}
.bk-docket--edge { border-left: 3px solid var(--svc, var(--bk-brand)); }
.bk-docket-top { padding: 18px 20px 16px; }
.bk-docket-tear { position: relative; height: 0; margin: 0 14px; border-top: 1.5px dashed var(--bk-border-strong); }
.bk-docket-tear::before, .bk-docket-tear::after {
  content: ""; position: absolute; top: -10.75px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bk-docket-notch); border: 1px solid var(--bk-border);
}
.bk-docket-tear::before { left: -25px; clip-path: inset(0 0 0 50%); }
.bk-docket-tear::after  { right: -25px; clip-path: inset(0 50% 0 0); }
.bk-docket--edge .bk-docket-tear::before { left: -27px; }
.bk-docket-stub {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px;
  padding: 14px 20px 16px; background: var(--bk-surface-3); border-radius: 0 0 var(--bk-radius-lg) var(--bk-radius-lg);
}
.bk-docket-lbl { display: block; margin-bottom: 4px; font-size: var(--bk-fs-2xs); font-weight: var(--bk-fw-bold);
  letter-spacing: var(--bk-tracking-caps); text-transform: uppercase; color: var(--bk-muted); }
.bk-docket-ref { font-family: var(--bk-font-mono); font-size: 20px; font-weight: var(--bk-fw-bold); letter-spacing: .08em;
  color: var(--bk-text); font-variant-numeric: tabular-nums slashed-zero; }
.bk-docket-rows { display: grid; gap: 10px; }
.bk-docket-row { display: flex; gap: 12px; align-items: flex-start; font-size: var(--bk-fs-sm); color: var(--bk-text-2); line-height: 1.45; }
.bk-docket-row > .bk-icon { margin-top: 1px; color: var(--bk-muted); }
.bk-docket-row b { color: var(--bk-text); font-weight: var(--bk-fw-bold); }
/* the copy button with its 1.2 s "Copied" tick (JS adds .is-done) */
.bk-copy { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--bk-border-strong); border-radius: var(--bk-radius-pill); background: var(--bk-surface);
  color: var(--bk-brand-text); font: inherit; font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-bold); cursor: pointer; }
.bk-copy:hover { background: var(--bk-brand-tint); border-color: var(--bk-brand); }
.bk-copy.is-done { background: var(--bk-success-bg); border-color: var(--bk-success-border); color: var(--bk-success-text); }
.bk-copy .bk-icon { width: 14px; height: 14px; }
@media print {
  .bk-docket { box-shadow: none; border-color: #000; }
  .bk-docket-tear { border-top-color: #000; }
  .bk-docket-tear::before, .bk-docket-tear::after { display: none; }
  .bk-docket-stub { background: none; }
  .bk-copy { display: none; }
}

/* --- monogram: initials tile for a workshop with no logo ---
   <span class="bk-monogram" aria-hidden="true">DT</span> next to the printed name.
   Uses the page's --brand / --on-brand (customer pages), else Bookanic teal. */
.bk-monogram {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--bk-radius-md); background: var(--brand, var(--bk-brand)); color: var(--on-brand, var(--bk-on-brand));
  font: var(--bk-fw-bold) 15px/1 var(--bk-font-display); letter-spacing: .02em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(19, 33, 43, .08); user-select: none;
}
html.bf-pale-brand .bk-monogram,
html.est-pale-brand .bk-monogram { box-shadow: inset 0 0 0 1.5px var(--brand-edge); }   /* booking / estimate page */
.bk-monogram--sm { width: 28px; height: 28px; border-radius: var(--bk-radius-sm); font-size: 11.5px; }
.bk-monogram--lg { width: 56px; height: 56px; border-radius: var(--bk-radius-lg); font-size: 21px; }

/* --- banners: full-width strips under a page head, at most 2 at once ---
   <div class="bk-banners">
     <div class="bk-banner bk-banner--warning" role="status">(icon)
       <div class="bk-banner-text"><b>..</b> ..</div>
       <div class="bk-banner-actions">(buttons)</div>
       <button class="bk-banner-x" aria-label="Dismiss">(x icon)</button></div>
   </div>   Order them danger, warning, info. */
.bk-banners { display: grid; gap: 8px; margin: 0 0 16px; }
.bk-banners > .bk-banner:nth-child(n+3) { display: none; }   /* at most 2 at once: danger, warning, info order */
.bk-banner {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; min-height: 48px;
  background: var(--bk-surface); border: 1px solid var(--bk-border); border-left: 4px solid var(--bk-muted);
  border-radius: var(--bk-radius-md); box-shadow: var(--bk-shadow-xs); color: var(--bk-text); font-size: var(--bk-fs-sm);
  animation: bk-drop-in var(--bk-dur-base) var(--bk-ease) both;
}
.bk-banner > .bk-icon:first-child { flex: 0 0 auto; }
.bk-banner-text { flex: 1; min-width: 0; line-height: var(--bk-lh-snug); }
.bk-banner-text b { font-weight: var(--bk-fw-bold); }
.bk-banner-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.bk-banner-x { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--bk-muted); cursor: pointer; }
.bk-banner-x:hover { background: var(--bk-surface-2); color: var(--bk-text); }
.bk-banner--danger  { background: var(--bk-danger-bg);  border-color: var(--bk-danger-border);  border-left-color: var(--bk-danger); }
.bk-banner--danger > .bk-icon:first-child  { color: var(--bk-danger-text); }
.bk-banner--warning { background: var(--bk-warning-bg); border-color: var(--bk-warning-border); border-left-color: var(--bk-warning); }
.bk-banner--warning > .bk-icon:first-child { color: var(--bk-warning-text); }
.bk-banner--info    { background: var(--bk-info-bg);    border-color: var(--bk-info-border);    border-left-color: var(--bk-info); }
.bk-banner--info > .bk-icon:first-child    { color: var(--bk-info-text); }
.bk-banner--brand   { background: var(--bk-brand-tint); border-color: transparent; border-left-color: var(--bk-brand); }
@media (max-width: 600px) {
  .bk-banner { flex-wrap: wrap; }
  .bk-banner-actions { order: 3; width: 100%; padding-left: 30px; }
}

/* --- hex step numbers (the nut from the logo is the only decorative shape) ---
   <span class="bk-hexstep" aria-hidden="true">1</span> */
.bk-hexstep {
  display: inline-grid; place-items: center; width: 26px; height: 23px; flex: 0 0 auto;
  clip-path: var(--bk-hex); background: var(--bk-brand-tint); color: var(--bk-brand-text);
  font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-bold); font-variant-numeric: tabular-nums; line-height: 1;
}
.bk-hexstep--solid { background: var(--bk-brand); color: var(--bk-on-brand); }
.bk-hexstep--lg { width: 44px; height: 38px; font-size: var(--bk-fs-md); }
.bk-hexstep--done { background: var(--bk-success-bg); color: var(--bk-success-text); }
@media print { .bk-hexstep { clip-path: none; border: 1px solid #000; border-radius: 4px; background: none; color: #000; } }

/* --- day strip: the ONLY sideways scroller allowed on a page ---
   <div class="bk-daystrip"><button>(day)(date)(state)</button>...</div>
   Day name --bk-fs-2xs caps, date --bk-fs-lg semibold, state word --bk-fs-2xs;
   the selected day fills --brand (the page styles that). */
.bk-daystrip {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 -16px; padding: 2px 16px 6px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent);
}
.bk-daystrip::-webkit-scrollbar { display: none; }
.bk-daystrip > * {
  flex: 0 0 56px; min-height: 64px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 1px solid var(--bk-border-strong); border-radius: var(--bk-radius-md); background: var(--bk-surface); color: var(--bk-text);
  font-variant-numeric: tabular-nums; cursor: pointer;
}

/* --- tabs with a moving underline ---
   <div class="bk-tabs" role="tablist">
     <button class="bk-tab active" role="tab">Today</button> ...
     <span class="bk-tabs-ink" aria-hidden="true"></span>
   </div>
   JS sets --bk-ink-x / --bk-ink-w on .bk-tabs from the active tab
   (snippet in DESIGN.md). Without JS the active tab still gets its own
   underline via .bk-tabs:not(.has-ink). */
.bk-tabs { position: relative; display: flex; gap: var(--bk-space-5); border-bottom: 1px solid var(--bk-border); overflow-x: auto; scrollbar-width: none; }
.bk-tabs::-webkit-scrollbar { display: none; }
.bk-tab {
  position: relative; padding: 0 2px 12px; background: none; border: 0; font: inherit;
  font-size: var(--bk-fs-base); font-weight: var(--bk-fw-medium); color: var(--bk-muted);
  cursor: pointer; white-space: nowrap;
}
.bk-tab:hover { color: var(--bk-text); }
.bk-tab.active, .bk-tab[aria-selected="true"] { color: var(--bk-brand-text); }
.bk-tabs:not(.has-ink) .bk-tab.active::after,
.bk-tabs:not(.has-ink) .bk-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--bk-brand);
}
.bk-tabs-ink {
  position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--bk-brand);
  width: var(--bk-ink-w, 0); transform: translateX(var(--bk-ink-x, 0));
  transition: transform var(--bk-dur-base) var(--bk-ease-in-out), width var(--bk-dur-base) var(--bk-ease-in-out);
  pointer-events: none;
}
.bk-tabs:not(.has-ink) .bk-tabs-ink { display: none; }

/* --- dialogs ---
   <div class="bk-dialog-backdrop"><div class="bk-dialog" role="dialog" aria-modal="true">...</div></div>
   Closing: add .is-closing to the backdrop, remove it on 'animationend'. */
.bk-dialog-backdrop {
  position: fixed; inset: 0; z-index: var(--bk-z-overlay); background: var(--bk-overlay);
  display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; overflow-y: auto;
  animation: bk-fade-in var(--bk-dur-base) var(--bk-ease) both;
}
.bk-dialog {
  width: 100%; max-width: 560px; background: var(--bk-surface); color: var(--bk-text);
  border-radius: var(--bk-radius-xl); box-shadow: var(--bk-shadow-xl); padding: var(--bk-space-6);
  animation: bk-scale-in var(--bk-dur-slow) var(--bk-ease) both;
}
.bk-dialog-backdrop.is-closing { animation: bk-fade-out var(--bk-dur-fast) var(--bk-ease-in) both; }
.bk-dialog-backdrop.is-closing .bk-dialog { animation: bk-scale-out var(--bk-dur-fast) var(--bk-ease-in) both; }
@media (max-width: 600px) {
  .bk-dialog-backdrop { align-items: flex-end; padding: 0; }
  .bk-dialog { border-radius: var(--bk-radius-xl) var(--bk-radius-xl) 0 0; animation-name: bk-sheet-in; padding-bottom: calc(var(--bk-space-6) + env(safe-area-inset-bottom, 0px)); }
}

/* --- toasts --- */
.bk-toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: var(--bk-z-toast);
  display: inline-flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
  background: var(--bk-toast-bg); color: var(--bk-toast-text); padding: 11px 18px;
  border-radius: var(--bk-radius-pill); box-shadow: var(--bk-shadow-lg); font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity var(--bk-dur-slow) var(--bk-ease), transform var(--bk-dur-slow) var(--bk-ease);
}
.bk-toast.show { opacity: 1; transform: translate(-50%, 0); }
.bk-toast .bk-icon { color: var(--bk-toast-accent); }

/* --- empty states ---
   <div class="bk-empty"><div class="bk-empty-art">(icon svg)</div>
     <h3 class="bk-empty-title">No bookings today</h3>
     <p class="bk-empty-text">New online bookings show up here.</p>
     (optional button)</div> */
.bk-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--bk-space-9) var(--bk-space-5); color: var(--bk-muted);
  animation: bk-rise-in var(--bk-dur-base) var(--bk-ease) both;
}
.bk-empty-art {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bk-brand-tint); color: var(--bk-brand-text); margin-bottom: var(--bk-space-4);
}
.bk-empty-art svg { width: 28px; height: 28px; }
.bk-empty-title { margin: 0 0 4px; font-size: var(--bk-fs-md); font-weight: var(--bk-fw-bold); color: var(--bk-text); }
.bk-empty-text { margin: 0 auto; max-width: 360px; font-size: var(--bk-fs-sm); line-height: var(--bk-lh-base); }
.bk-empty > .bk-btn { margin-top: var(--bk-space-4); }

/* --- icons: small inline SVGs, 24 grid, stroke currentColor ---
   <svg class="bk-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="..."/></svg> */
.bk-icon {
  width: 18px; height: 18px; flex-shrink: 0; display: inline-block;
  fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round;
}
.bk-icon--sm { width: 16px; height: 16px; }
.bk-icon--lg { width: 22px; height: 22px; stroke-width: 1.75; }

/* --- notices (inline messages) --- */
.bk-notice {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px;
  border-radius: var(--bk-radius-md); border: 1px solid var(--bk-border);
  background: var(--bk-surface-2); color: var(--bk-text-2); font-size: var(--bk-fs-sm); line-height: var(--bk-lh-base);
}
.bk-notice--brand   { background: var(--bk-brand-tint); border-color: transparent; color: var(--bk-text); }
.bk-notice--success { background: var(--bk-success-bg); border-color: var(--bk-success-border); color: var(--bk-text); }
.bk-notice--warning { background: var(--bk-warning-bg); border-color: var(--bk-warning-border); color: var(--bk-text); }
.bk-notice--danger  { background: var(--bk-danger-bg); border-color: var(--bk-danger-border); color: var(--bk-danger-text); }
.bk-notice--info    { background: var(--bk-info-bg); border-color: var(--bk-info-border); color: var(--bk-text); }

/* --------------------------------------------------------------------------
   7. Loading
   -------------------------------------------------------------------------- */
/* Skeletons: grey shapes where content is about to appear. Give them the
   size of the real thing so nothing jumps when it arrives.
   <div class="bk-skeleton bk-skel-row"></div>
   <span class="bk-skeleton bk-skel-text" style="width:60%"></span> */
.bk-skeleton {
  display: block; border-radius: var(--bk-radius-sm);
  background-color: var(--bk-skeleton);
  background-image: linear-gradient(100deg, transparent 30%, var(--bk-skeleton-shine) 50%, transparent 70%);
  background-size: 200% 100%; background-repeat: no-repeat;
  animation: bk-shimmer var(--bk-dur-shimmer) linear infinite;
  color: transparent !important; user-select: none; pointer-events: none;
}
.bk-skel-text { height: 12px; margin: 6px 0; border-radius: var(--bk-radius-xs); width: 100%; }
.bk-skel-title { height: 20px; width: 40%; margin: 4px 0 10px; border-radius: var(--bk-radius-xs); }
.bk-skel-circle { width: 36px; height: 36px; border-radius: 50%; }
.bk-skel-row { height: 66px; border-radius: var(--bk-radius-md); margin-bottom: 8px; }
.bk-skel-card { height: 120px; border-radius: var(--bk-radius-lg); margin-bottom: 16px; }
/* the second, third... skeleton rows fade a little, so the eye reads "a list" */
.bk-skel-row:nth-child(2) { opacity: .8; }
.bk-skel-row:nth-child(3) { opacity: .6; }
.bk-skel-row:nth-child(n+4) { opacity: .4; }

/* Spinner for small inline waits (prefer skeletons for whole sections) */
.bk-spinner {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--bk-border); border-top-color: var(--bk-brand);
  animation: bk-spin 700ms linear infinite; vertical-align: middle;
}

/* Success tick: a circle that grows in, then the tick draws itself.
   <svg class="bk-tick" viewBox="0 0 52 52" aria-hidden="true">
     <circle class="bk-tick-circle" cx="26" cy="26" r="25"/>
     <path class="bk-tick-path" d="M15 27l7 7 15-16"/>
   </svg> */
.bk-tick { width: 64px; height: 64px; display: block; }
.bk-tick-circle { fill: var(--bk-success-bg); stroke: none; transform-origin: center; transform-box: fill-box; animation: bk-pop-in var(--bk-dur-slow) var(--bk-ease) both; }
.bk-tick-path {
  fill: none; stroke: var(--bk-success); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30; --bk-tick-len: 30;
  animation: bk-tick-draw 320ms var(--bk-ease) 160ms forwards;
}

/* --------------------------------------------------------------------------
   8. Utilities
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Spam trap fields (bk_hp_note): out of sight and out of the tab order, but
   still in the page so form-filling robots find and fill them. Not
   display:none - some robots skip hidden fields. The wrapper is aria-hidden. */
.bk-hp {
  position: absolute !important; left: -10000px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}
/* A real tick box drawn to match the design (put on <input type="checkbox">) */
.bk-check {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; position: relative;
  width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; cursor: pointer;
  border: 1.5px solid var(--bk-field-border); border-radius: 6px; background: var(--bk-surface);
  transition: background-color var(--bk-dur-fast) var(--bk-ease), border-color var(--bk-dur-fast) var(--bk-ease);
}
.bk-check:hover { border-color: var(--bk-brand); }
.bk-check::after {
  content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 5px; height: 10px;
  border: solid var(--bk-on-brand); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg) scale(.4);
  opacity: 0; transition: opacity var(--bk-dur-fast) var(--bk-ease), transform var(--bk-dur-fast) var(--bk-ease);
}
.bk-check:checked { background: var(--bk-brand); border-color: var(--bk-brand); }
.bk-check:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
.bk-check:focus-visible { outline: 2px solid var(--bk-focus); outline-offset: 2px; }
.bk-check[aria-invalid="true"] { border-color: var(--bk-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bk-danger) 22%, transparent); }
.bk-muted { color: var(--bk-muted); }
.bk-nums { font-variant-numeric: tabular-nums; }
.bk-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bk-stack { display: flex; flex-direction: column; gap: var(--bk-space-3); }
.bk-row { display: flex; align-items: center; gap: var(--bk-space-3); flex-wrap: wrap; }
.bk-divider { height: 1px; background: var(--bk-border-soft); border: 0; margin: var(--bk-space-4) 0; }
.bk-caps { font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-bold); letter-spacing: var(--bk-tracking-caps); text-transform: uppercase; color: var(--bk-muted); }

/* --------------------------------------------------------------------------
   9. Reduced motion: everything still works, it just changes instantly.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bk-dur-fast: 0ms;
    --bk-dur-base: 0ms;
    --bk-dur-slow: 0ms;
    --bk-rise: 0px;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .bk-skeleton { animation: none !important; background-image: none; }
  .bk-spinner, .bk-btn.is-busy::after { animation: bk-spin 1.6s linear infinite !important; } /* a spinner must still say "working" */
  .bk-tick-path { stroke-dashoffset: 0; }
}