/*
 * BunkerWeb Meet, "Aurora glass" live theme (round 2). Round-2 rules cite their critic finding: FG = finish-gate,
 * A = accessibility, C = taste/craft critic (r1 reports under .superpowers/sdd/2026-09-30-cal-diy-selfhost/).
 * Served from the bind mount /calcom/apps/web/public/bw-theme/ and linked as the last child of <head>, so it wins
 * over the baked theme (appended to globals.css) and over Next's hoisted CSS by source order, no !important.
 *
 * SCOPE. This file loads on every page, admin UI included. Everything visual lives under
 *   body:has(<booker | profile | booking | 404 marker>)
 * markers (upstream cal.diy 54343aa685ae8f33159d2f485ec4a57bad5c574a):
 *   [data-testid="booker-container"]  apps/web/modules/bookings/components/Booker.tsx:349 (booker, form step, reschedule)
 *   [data-testid="name-title"]        public profile page /<user> (h1 of the host card)
 *   [data-testid="success-page"]      booking success / cancel / reschedule-confirm page /booking/<uid>
 *   [data-testid="404-page"]          not-found page
 * Admin pages carry none of them, so they render exactly like the baked theme. The only global rule is @font-face.
 *
 * Aurora glass is a web glassmorphism approximation (no Apple Liquid Glass claim). Palette: BunkerWeb navy
 * #0b354a / #0c283a / #133044, blue #0b5577, cyan #6ac1e0. Font: Geist (SIL OFL 1.1, fonts/OFL.txt).
 */

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

/* ---------- tokens (light) ---------- */
body:has([data-testid="booker-container"], [data-testid="name-title"], [data-testid="success-page"], [data-testid="404-page"]) {
  --font-sans: "Geist", "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-cal: var(--font-sans);

  --ax-bg: #e6f1f6;
  --ax-orb-a: rgba(106, 193, 224, 0.8);
  --ax-orb-b: rgba(11, 85, 119, 0.34);
  --ax-orb-c: rgba(46, 172, 104, 0.22);
  --ax-ink: #0c283a;
  --ax-ink-2: #2f4f61;
  --ax-line: rgba(12, 40, 58, 0.16);
  --ax-glass: rgba(255, 255, 255, 0.66);
  --ax-solid: #f1f8fb;
  --ax-shell: rgba(255, 255, 255, 0.36);
  --ax-edge: rgba(255, 255, 255, 0.85);
  --ax-edge-out: rgba(12, 40, 58, 0.24);
  --ax-day-ring: rgb(12 40 58 / 0.55); /* R5 F3: available-day ring, >= 3:1 on glass and on the disc fill (own token: --ax-edge-out is shared with trays) */
  --ax-slot-stroke: color-mix(in srgb, var(--ax-ink) 34%, transparent); /* R5 F5: column slot edge, light only (about 2:1) */
  --ax-hi: rgba(255, 255, 255, 0.9);
  --ax-shadow: rgba(11, 53, 74, 0.25);
  --ax-field: rgba(255, 255, 255, 0.86);
  --ax-slot: rgba(255, 255, 255, 0.78);
  --ax-accent: #0b354a;
  --ax-on-accent: #ffffff;
  --ax-glow: #6ac1e0;
  --ax-soft: rgba(11, 85, 119, 0.12);
  --ax-danger: #a61e14;
  --ax-focus: #0c283a;
  --ax-control: #5f7a8a;
  --ax-logo: url("/cal-logo-word.svg");
  --ax-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ax-out: cubic-bezier(0.16, 1, 0.3, 1); /* motion pass: entrances (taste-skill 4-7 dial) */
  --ax-t: 0.16s; /* motion pass: hover / state change, frequent (Emil: under 180 ms) */

  /* re-point the upstream text tokens so every upstream text utility lands on Aurora ink */
  --cal-text-emphasis: var(--ax-ink);
  --cal-text: var(--ax-ink);
  --cal-text-subtle: var(--ax-ink-2);
  --cal-text-muted: var(--ax-ink-2);
  --cal-border-emphasis: var(--ax-control);

  background:
    radial-gradient(60% 55% at 12% 8%, var(--ax-orb-a), transparent 70%),
    radial-gradient(55% 60% at 92% 20%, var(--ax-orb-b), transparent 70%),
    radial-gradient(60% 50% at 55% 108%, var(--ax-orb-c), transparent 72%), var(--ax-bg);
  background-attachment: fixed;
  color: var(--ax-ink);
  font-family: var(--font-sans);
  position: relative;
}

/* ---------- tokens (dark: html.dark is set by upstream when appearance is "system" and the OS is dark) ---------- */
.dark body:has([data-testid="booker-container"], [data-testid="name-title"], [data-testid="success-page"], [data-testid="404-page"]) {
  --ax-bg: #06202e;
  --ax-orb-a: rgba(11, 85, 119, 0.95);
  --ax-orb-b: rgba(106, 193, 224, 0.42);
  --ax-orb-c: rgba(46, 172, 104, 0.24);
  --ax-ink: #f0f8fc;
  --ax-ink-2: #bcd3df;
  --ax-line: rgba(255, 255, 255, 0.16);
  --ax-glass: rgba(12, 40, 58, 0.72);
  --ax-solid: #0c283a;
  --ax-shell: rgba(255, 255, 255, 0.07);
  --ax-edge: rgba(255, 255, 255, 0.2);
  --ax-edge-out: rgba(255, 255, 255, 0.18);
  --ax-day-ring: rgb(240 248 252 / 0.4);
  --ax-slot-stroke: var(--ax-line);
  --ax-hi: rgba(255, 255, 255, 0.22);
  --ax-shadow: rgba(0, 0, 0, 0.5);
  --ax-field: rgba(255, 255, 255, 0.08);
  --ax-slot: rgba(255, 255, 255, 0.09);
  --ax-accent: #6ac1e0;
  --ax-on-accent: #06222f;
  --ax-glow: #6ac1e0;
  --ax-soft: rgba(106, 193, 224, 0.16);
  --ax-danger: #ffb09e;
  --ax-focus: #f0f8fc;
  --ax-control: #7fa3b8;
  --ax-logo: url("/cal-logo-word-dark.svg");
  --cal-border-emphasis: var(--ax-control);
}

/* A11: light unavailable days run at full ink-2 (>= 4.5:1); in dark the dim opacity is kept so they stay clearly off */
.dark body:has([data-testid="booker-container"]) button[data-testid="day"]:disabled {
  opacity: 0.7;
}

/* ---------- chrome: BunkerWeb logo (above the fold), voice line ---------- */
body:has([data-testid="booker-container"], [data-testid="name-title"], [data-testid="success-page"], [data-testid="404-page"]) {
  /* Unaltered logo file, painted as a background. A4 (ruling): decorative. The page names BunkerWeb in text (title, voice
     line), so the alternative text is empty and no browser announces a partial name. */
  &::before {
    content: "" / "";
    position: absolute;
    top: 20px;
    left: 24px;
    width: 158px;
    height: 44px;
    background: var(--ax-logo) left center / contain no-repeat;
    pointer-events: none;
    z-index: 60; /* stays above the mobile booking-form overlay */
  }
  &::after {
    content: "Open-source WAF, reviewed by the people who build it.";
    display: block;
    padding: 20px 16px 28px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ax-ink-2);
  }

  /* room for the logo bar; the upstream wrappers start at 0-64 px from the top */
  & main:has([data-testid="booker-container"]) {
    min-height: calc(100dvh - 144px);
    margin-top: 76px;
    padding-inline: 16px;
    /* R4 R9: anchored to the top. Upstream centres the sheet vertically, and the sheet changes height between the calendar
       and the form step, so it jumped. */
    align-items: flex-start;
  }
  & [data-testid="success-page"] > main {
    padding: 76px 16px 0;
  }
  /* C1/FG7: upstream pins h-screen, so long confirmations overflowed it and the voice line (normal flow after the
     wrapper) started inside the content. Let the wrapper grow; min-height keeps short pages one viewport tall. */
  & [data-testid="success-page"] {
    height: auto;
    min-height: calc(100dvh - 68px);
  }
  & main:has([data-testid="event-types"]) {
    padding-top: 92px;
  }
  & [data-testid="404-page"] {
    background: transparent;
    min-height: calc(100dvh - 124px);
    padding-top: 76px;
  }

  /* ---------- keyboard focus: one 3 px ring, offset, contrast >= 3:1 on glass ---------- */
  & :is(a, button, input, textarea, select, [role="switch"], [role="radio"], [tabindex]):focus-visible {
    outline: 3px solid var(--ax-focus);
    outline-offset: 3px;
    box-shadow: none;
  }

  /* A1: the focus target is react-select's hidden 4x48 input (outline none), so ring the visible control instead.
     !important: emotion's `.css-*-control` sets `outline: 0 !important`, which nothing else can beat. */
  & [data-testid="timezone-select"] > div:has(input:focus-visible) {
    outline: 3px solid var(--ax-focus) !important;
    outline-offset: 3px !important;
    border-radius: 8px;
  }

  /* R3 a11y-1: the control has no inner padding, so the text and chevron sat on its border and under the 3 px ring.
     Pad it (always, not only on focus, so nothing shifts) to clear both. */
  & [data-testid="timezone-select"] > div {
    padding: 4px 8px;
  }

  /* R4 R10: a long zone ("America/Argentina/Buenos Aires") lost its city to a one-line ellipsis. The select takes the column's
     full width at 13 px and may wrap after a slash; the menu is as wide as its longest option. */
  & .current-timezone {
    height: auto;
    min-height: 24px;
    max-width: 100%;
  }
  & .current-timezone > div {
    max-width: 100%;
  }
  & [data-testid="timezone-select"],
  & [data-testid="timezone-select"] > div {
    width: 100%;
    max-width: 100%;
  }
  & [data-testid="timezone-select"] > div {
    height: auto;
    min-height: 36px;
  }
  & [data-testid="timezone-select"] p.truncate {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    font-size: 13px;
    line-height: 1.25;
  }
  /* upstream sets the menu `w-64!` (an !important utility inside a cascade layer, which no unlayered rule can beat), so the
     width is grown through min-width instead */
  & .current-timezone div.mt-1.border-subtle:has(> .scroll-bar) {
    min-width: max-content;
    max-width: min(440px, calc(100vw - 32px));
  }
  & .current-timezone div.mt-1.border-subtle .scroll-bar > div {
    white-space: nowrap;
  }

  /* slot list scrolls inside a clipped box, so its ring sits inside the pill */
  & button[data-testid="time"]:focus-visible {
    outline-offset: -5px;
  }

  /* ---------- the sheet: double bezel = outer tray (box-shadow rings) + glass core (::before) ---------- */
  & [data-testid="booker-container"],
  & [data-testid="success-page"] [role="dialog"],
  & [data-testid="event-types"],
  & main > div:has(> .p-4 > h1[data-testid="name-title"]) {
    position: relative;
    isolation: isolate;
    background: transparent;
    border: 1px solid var(--ax-edge);
    border-radius: 24px;
    box-shadow:
      0 0 0 8px var(--ax-shell),
      0 0 0 9px var(--ax-edge-out),
      0 40px 90px -30px var(--ax-shadow);
  }
  & [data-testid="booker-container"]::before,
  & [data-testid="success-page"] [role="dialog"]::before,
  & [data-testid="event-types"]::before,
  & main > div:has(> .p-4 > h1[data-testid="name-title"])::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--ax-glass);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    box-shadow:
      inset 0 1px 0 var(--ax-hi),
      inset 0 -1px 0 var(--ax-edge-out);
  }
  & [data-testid="success-page"] [role="dialog"] {
    max-width: 36rem;
    overflow: visible;
  }
  & [data-testid="event-types"] {
    overflow: hidden;
  }
  & [data-testid="event-types"] > a {
    background: transparent;
    border-color: var(--ax-line);
    transition: background-color var(--ax-t) var(--ax-ease);
  }
  & [data-testid="event-types"] > a:hover {
    background: var(--ax-soft);
  }
  & [data-testid="event-types"] h2 {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ax-ink);
  }

  /* column dividers inside the booker */
  & [data-testid="booker-container"] [class~="[grid-area:main]"],
  & [data-testid="booker-container"] [class~="[grid-area:timeslots]"] {
    border-color: var(--ax-line);
  }
  & [data-testid="booker-container"] [class~="[grid-area:timeslots]"] header,
  & [data-testid="booker-container"] [class~="[grid-area:timeslots]"] header::before {
    background: transparent;
  }

  /* ---------- host column ---------- */
  & [data-testid="event-meta"] {
    padding: 32px 28px;
  }
  /* R4 R4: the meeting leads. Avatar (48 px) and host name share one row; the title below is the big, 600 line. DOM order
     (avatar, host, title) and the h1 stay as upstream; only the visual rank changes. */
  & [data-testid="event-meta"] > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
  }
  & [data-testid="event-meta"] > div > * {
    grid-column: 1 / -1;
  }
  & [data-testid="event-meta"] [data-testid="avatar"] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border: 0;
    background: #0b354a;
    box-shadow:
      0 0 0 2px #6ac1e0,
      0 0 0 5px var(--ax-shell);
  }
  & [data-testid="event-meta"] [data-testid="avatar"] img {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border: 0;
    background: transparent;
    filter: invert(1) brightness(1.4);
  }
  & [data-testid="event-meta"] > div > ul {
    grid-column: 1;
    margin: 0;
    padding-left: 5px; /* the ring sits 5 px outside the 48 px disc */
  }
  /* host name: a quiet 16 px / 500 line beside the avatar, never two lines */
  & [data-testid="event-meta"] > div > p:not([data-testid]) {
    grid-column: 2;
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ax-ink-2);
    text-wrap: balance;
  }
  & [data-testid="event-title"] {
    margin: 22px 0 16px;
    font-size: 27px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ax-ink);
    text-wrap: balance;
  }
  & [data-testid="event-meta-description"] {
    font-size: 15px;
    color: var(--ax-ink-2);
    max-width: 34ch;
  }
  & [data-testid="event-meta"] .stack-y-4 {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--ax-ink);
  }

  /* ---------- calendar ---------- */
  /* weekday header: sentence case instead of upstream's tracked caps (no eyebrow-style micro labels) */
  & [data-testid="booker-container"] .uppercase.tracking-widest {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--ax-ink-2);
  }
  /* FG5: header grid is gap-4 (16 px) but the day grid is gap-1 (4 px); same column count, so equal gaps line the
     weekday labels up with the day discs */
  & [data-testid="booker-container"] .grid-cols-7.gap-4 {
    gap: 4px;
  }
  & [data-testid="selected-month-label"] {
    font-size: 20px;
    letter-spacing: -0.02em;
  }
  & [data-testid="selected-month-label"] strong {
    font-weight: 400;
    color: var(--ax-ink);
  }
  & [data-testid="selected-month-label"] span {
    color: var(--ax-ink-2);
  }
  & button[data-testid="decrementMonth"],
  & button[data-testid="incrementMonth"] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin-left: 8px;
    border-radius: 999px;
    border: 1px solid var(--ax-control);
    background: var(--ax-field);
    color: var(--ax-ink);
    opacity: 1;
    box-shadow: inset 0 1px 0 var(--ax-hi);
    transition:
      transform var(--ax-t) var(--ax-ease),
      background-color var(--ax-t) var(--ax-ease);
  }
  & button[data-testid="decrementMonth"]:not(:disabled):hover,
  & button[data-testid="incrementMonth"]:not(:disabled):hover {
    transform: translateY(-1px);
    background: var(--ax-soft);
    border-color: var(--ax-control);
  }
  & button[data-testid="decrementMonth"]:not(:disabled):active,
  & button[data-testid="incrementMonth"]:not(:disabled):active {
    transform: scale(0.96);
  }
  & button[data-testid="decrementMonth"]:disabled,
  & button[data-testid="incrementMonth"]:disabled {
    opacity: 0.45;
  }

  /* R4 R7 days: available = a bezelled disc (translucent slot fill, --ax-edge ring, inset top highlight), unavailable = plain
     muted numeral with no disc (no strike-through: the non-colour cue is disc vs no disc), selected = the one solid, glowing
     object, today = a hollow ring. */
  & button[data-testid="day"] {
    inset: 3px;
    width: auto;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    transition:
      transform var(--ax-t) var(--ax-ease),
      background-color var(--ax-t) var(--ax-ease),
      box-shadow var(--ax-t) var(--ax-ease);
  }
  & button[data-testid="day"]:not(:disabled):not(.bg-brand-default) {
    background: var(--ax-slot);
    color: var(--ax-ink);
    border: 1px solid var(--ax-day-ring);
    box-shadow:
      inset 0 1px 0 var(--ax-hi),
      0 2px 4px -2px var(--ax-shadow);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  & button[data-testid="day"]:not(:disabled):not(.bg-brand-default):hover {
    border-color: var(--ax-accent);
    transform: translateY(-1px);
  }
  & button[data-testid="day"]:not(:disabled):active {
    transform: scale(0.96);
  }
  & button[data-testid="day"]:disabled {
    background: transparent;
    border-color: transparent;
    color: var(--ax-ink-2);
    opacity: 1; /* A11: full-strength ink-2 clears 4.5:1 in light; "no disc" marks unavailable. Dark re-dims below. */
    font-weight: 400;
    font-variant-numeric: tabular-nums;
  }
  & button[data-testid="day"].bg-brand-default {
    background: var(--ax-accent);
    color: var(--ax-on-accent);
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  }
  /* motion pass: the glow is a pseudo so it can grow in with transform + opacity (a box-shadow transition repaints) */
  & button[data-testid="day"].bg-brand-default::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
      0 0 0 6px var(--ax-soft),
      0 12px 30px -8px var(--ax-glow);
  }
  /* today marker: upstream renders a span.bg-brand-default dot under the number (DatePicker.tsx:104). R4 R7: replaced by a
     small hollow ring around the numeral (drawn from currentColor, so it follows forced colours too). */
  & button[data-testid="day"] > span.bg-brand-default {
    display: none;
  }
  /* R5 F4: today must not outrank the available rings. Unavailable today = a 1 px dotted ring in --ax-ink-2 (no darker). Available
     today keeps the normal disc and gets a 4 px --ax-ink-2 dot under the numeral (a shape cue, not colour alone). */
  & button[data-testid="day"]:disabled:has(> span.bg-brand-default) {
    border: 1px dotted var(--ax-ink-2);
  }
  & button[data-testid="day"]:not(:disabled):not(.bg-brand-default):has(> span.bg-brand-default)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--ax-ink-2);
    pointer-events: none;
  }

  /* ---------- time slots ---------- */
  & button[data-testid="time"] {
    min-height: 46px;
    border-radius: 999px;
    border: 1px solid var(--ax-control);
    background: var(--ax-slot);
    color: var(--ax-ink);
    font-size: 15px;
    font-weight: 500;
    box-shadow: inset 0 1px 0 var(--ax-hi);
    transition:
      transform var(--ax-t) var(--ax-ease),
      background-color var(--ax-t) var(--ax-ease);
  }
  & button[data-testid="time"]:not(:disabled):hover {
    transform: translateY(-1px);
    background: var(--ax-soft);
    border-color: var(--ax-control);
    color: var(--ax-ink);
  }
  & button[data-testid="time"]:not(:disabled):active {
    transform: scale(0.97);
  }
  & button[data-testid="time"][aria-pressed="true"],
  & button[data-testid="time"][data-selected="true"] {
    background: var(--ax-accent);
    color: var(--ax-on-accent);
    border-color: transparent;
    box-shadow:
      0 12px 26px -10px var(--ax-glow),
      inset 0 1px 0 rgba(255, 255, 255, 0.45);
  }
  & button[data-testid="time"]:disabled {
    opacity: 1; /* A11, see days */
    background: transparent;
    color: var(--ax-ink-2);
    border-style: dashed;
  }

  /* FG10: the slot column scrolls inside a fixed height. Fade its bottom edge so a cut pill reads as "more below", and
     pad the list by the fade height so the last pill is fully opaque once scrolled to the end. Desktop only: on mobile
     the page scrolls and there is no inner box. */
  @media (min-width: 768px) {
    & [data-testid="booker-container"] [class~="[grid-area:timeslots]"] .no-scrollbar.overflow-y-auto {
      -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent);
      mask-image: linear-gradient(#000 calc(100% - 40px), transparent);
    }
    & [data-testid="booker-container"] [class~="[grid-area:timeslots]"] .no-scrollbar.overflow-y-auto > div > div {
      padding-bottom: 40px;
    }
  }

  /* FG4: a stranger has no account on this instance, so hide "Overlay my calendar" (this also drops the unnamed
     switch and its weak track, A7/A10). Upstream control with no setting, so CSS. The 12h/24h group stays, and since
     the week round the month/week/column switcher is back (the event opens on the week view, week-view block below). */
  & [data-testid="booker-container"] div:has(> div > [data-testid="overlay-calendar-switch"]) {
    display: none;
  }

  /* 12h/24h toggle (FG4: it was the one control off the pill scale) */
  & [role="group"].bg-muted {
    background: var(--ax-field);
    border: 1px solid var(--ax-control);
    border-radius: 999px;
    padding: 2px;
  }
  & [role="group"].bg-muted button {
    min-height: 32px;
    padding-inline: 12px;
    border-radius: 999px;
    color: var(--ax-ink);
  }
  & [role="group"].bg-muted button[aria-checked="true"] {
    background: var(--ax-accent);
    color: var(--ax-on-accent);
    border-color: transparent;
  }

  /* ---------- details form ---------- */
  /* FG2/A2/C5: on mobile the form is a portaled [role="dialog"] outside booker-container, so every form rule covers
     both scopes. C8: min-height 48 belongs to inputs only, otherwise it out-specifies the textarea's 96. */
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) input:not([type="checkbox"], [type="radio"]) {
    min-height: 48px;
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) :is(input:not([type="checkbox"], [type="radio"]), textarea) {
    border-radius: 16px;
    border: 1px solid var(--ax-control);
    background: var(--ax-field);
    color: var(--ax-ink);
    font-size: 16px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) textarea {
    min-height: 96px;
  }
  /* R4 R9: the placeholder is visibly lighter than typed text (65 % of the ink, >= 4.5:1 on the field), so an empty field
     does not read as pre-filled */
  & :is([data-testid="booker-container"], [role="dialog"]) :is(input, textarea)::placeholder {
    color: color-mix(in srgb, var(--ax-ink) 65%, transparent);
    opacity: 1;
  }
  & :is([data-testid="booker-container"], [role="dialog"]) label {
    font-weight: 500;
    color: var(--ax-ink);
  }
  & :is([data-testid="booker-container"], [role="dialog"]) :is(input, textarea)[aria-invalid="true"],
  & :is([data-testid="booker-container"], [role="dialog"]) :is(input, textarea).border-error,
  & :is([data-testid="booker-container"], [role="dialog"]) :is(input, textarea):user-invalid {
    border: 2px solid var(--ax-danger);
  }
  & :is([data-testid="booker-container"], [role="dialog"]) :is(.text-error, .text-red-700, [class*="text-red"]) {
    color: var(--ax-danger);
  }

  /* COMPOSITE FIELDS: upstream draws the field on a WRAPPER and leaves the inner <input> borderless; the generic rule
     above would box the input a second time. One chrome per field: the wrapper takes the Aurora field look, the inner
     input is transparent. Inner inputs = `input.border-0` (guests/addon InputField, packages/ui/components/form/inputs/
     TextField.tsx + apps/web multi-email), `.react-tel-input input.form-control` (phone, react-phone-input-2) and
     react-select's own `input[id^="react-select"]` (select / multi-select questions). Pin 54343aa685ae. */
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) :is(input.border-0, .react-tel-input input.form-control, input[id^="react-select"]):not([type="checkbox"], [type="radio"]) {
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) :is(input.border-0, .react-tel-input input.form-control, input[id^="react-select"]):focus-visible {
    outline: 0;
  }
  /* wrapper = the field: guests row (div[dir=ltr].border with a borderless input child) and the phone box */
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) :is(div:has(> input.border-0), div.react-tel-input) {
    box-sizing: border-box;
    min-height: 48px;
    height: auto;
    border: 1px solid var(--ax-control);
    border-radius: 16px;
    background: var(--ax-field) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    padding-block: 0;
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div:has(> input.border-0) {
    padding-inline: 16px 8px;
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) :is(div:has(> input.border-0), div.react-tel-input):has(:focus-visible) {
    outline: 3px solid var(--ax-focus);
    outline-offset: 3px;
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) :is(div:has(> input.border-0), div.react-tel-input):has(:is(input, textarea)[aria-invalid="true"], .border-error, :user-invalid) {
    border: 2px solid var(--ax-danger);
  }
  /* select / multi-select questions: react-select renders the field as `[data-testid="select-control"] > div` (the
     bordered control) around a borderless inner input; give the control the Aurora field box and ring it on focus */
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) [data-testid="select-control"] > div {
    box-sizing: border-box;
    min-height: 48px;
    height: auto;
    align-items: center;
    border: 1px solid var(--ax-control);
    border-radius: 16px;
    background: var(--ax-field);
    color: var(--ax-ink);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    padding-block: 4px;
    padding-inline: 16px 8px;
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) [data-testid="select-control"] > div:has(input:focus-visible) {
    /* !important: emotion's `.css-*-control` sets `outline: 0 !important` (same trap as the timezone select) */
    outline: 3px solid var(--ax-focus) !important;
    outline-offset: 3px !important;
  }
  /* checkbox / radio questions: upstream's `border-default` is 1.3:1 on the glass; the box and ring need 3:1 */
  & :is([data-testid="booker-container"], [role="dialog"]) :is(button[role="checkbox"], button[role="radio"], input[type="checkbox"], input[type="radio"]):not(:checked, [data-state="checked"]) {
    border: 1px solid var(--ax-control);
  }
  /* phone: the flag dropdown is absolutely positioned against the wrapper's padding box, so no wrapper padding; the
     input reserves room for it instead */
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input {
    padding-inline: 0;
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input input.form-control {
    box-sizing: border-box;
    width: 100% !important;
    height: 46px;
    margin: 0;
    padding-block: 0;
    padding-inline: 48px 16px;
    color: var(--ax-ink);
  }
  /* country search box: a compact field inside the list, ring drawn inward so the list's overflow cannot clip it */
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input input.search-box {
    box-sizing: border-box;
    width: calc(100% - 16px);
    min-height: 40px;
    margin: 8px;
    padding: 0 12px;
    border: 1px solid var(--ax-control);
    border-radius: 12px;
    background: var(--ax-field) !important;
    color: var(--ax-ink);
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input input.search-box:focus-visible {
    outline: 3px solid var(--ax-focus);
    outline-offset: -3px;
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input .selected-flag,
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input .selected-flag:hover,
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input .selected-flag.open {
    background: transparent !important;
    border-radius: 15px 0 0 15px;
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input .selected-flag .arrow {
    border-top: 5px solid var(--ax-ink);
    border-inline-width: 4px;
    margin-top: -2px;
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input .selected-flag .arrow.up {
    border-top: 0;
    border-bottom: 5px solid var(--ax-ink);
    margin-top: -3px;
  }
  /* country list: solid surface, ink text, readable hover/selected rows */
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input ul.country-list {
    background: var(--ax-solid) !important;
    color: var(--ax-ink);
    border: 1px solid var(--ax-control);
    border-radius: 16px;
    box-shadow: 0 20px 40px -16px var(--ax-shadow);
    z-index: 30;
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input ul.country-list li.country {
    color: var(--ax-ink);
    background: transparent;
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input ul.country-list li.country:is(:hover, .highlight, [aria-selected="true"]) {
    background: var(--ax-soft);
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input ul.country-list .dial-code {
    color: var(--ax-ink-2);
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input .flag-dropdown {
    background: transparent !important;
    border: 0;
    border-radius: 15px 0 0 15px;
  }
  /* upstream paints the phone parts with `!bg-default` (= var(--cal-bg) !important, inside a Tailwind layer, so an
     unlayered !important cannot beat it). Re-point the variable per part instead: the wrapper is the one filled
     surface, its parts stay transparent, the list is solid. */
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input {
    --cal-bg: var(--ax-field);
    --cal-bg-emphasis: var(--ax-soft);
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input :is(input.form-control, .flag-dropdown, .selected-flag) {
    --cal-bg: transparent;
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input ul.country-list {
    --cal-bg: var(--ax-solid);
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input .search {
    --cal-bg: var(--ax-solid);
    background: var(--ax-solid);
    padding: 0;
  }
  & :is([data-testid="booker-container"], [role="dialog"], [data-testid="success-page"]) div.react-tel-input input.search-box {
    --cal-bg: var(--ax-field);
  }
  /* the remove (x) button: 44 px target, centred, same ink as the field */
  & :is([data-testid="booker-container"], [role="dialog"]) div:has(> input.border-0) button:has(> svg.lucide-x) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    margin: 0;
    border-radius: 999px;
    color: var(--ax-ink);
  }
  & :is([data-testid="booker-container"], [role="dialog"]) div:has(> input.border-0) button:has(> svg.lucide-x) svg {
    width: 14px;
    height: 14px;
    color: var(--ax-ink);
  }

  /* FG2/C5: the mobile booking sheet takes the glass sheet's surface: solid core (it floats over a dark scrim, where
     translucent glass would lose contrast), 24 px radius, bezel ring, sticky action bar on the same surface */
  & [role="dialog"]:not([data-testid="success-page"] [role="dialog"]) {
    background: var(--ax-solid);
    color: var(--ax-ink);
    border: 1px solid var(--ax-edge);
    border-radius: 24px;
    box-shadow:
      0 0 0 6px var(--ax-shell),
      0 0 0 7px var(--ax-edge-out),
      inset 0 1px 0 var(--ax-hi),
      0 40px 90px -30px var(--ax-shadow);
  }
  & [role="dialog"] .modalsticky {
    background: var(--ax-solid);
    border-top-color: var(--ax-line);
  }
  /* FG3: the logo sits above the dimmed overlay, so it needs the white wordmark whenever a dialog is open */
  &:has([role="dialog"][data-state="open"]) {
    --ax-logo: url("/cal-logo-word-dark.svg");
  }

  /* R3 finish-gate 2: the date/duration chips are `bg-gray-100 text-gray-800`; upstream's `dark:` variant does not reach
     the portaled sheet, so in dark they stayed light grey on navy. Same field fill and ink as the inputs below them. */
  /* R4 R9: both schemes get the same material chip (14 px, tabular numerals) so date / time / duration read as a summary */
  & [role="dialog"] .my-4.flex-wrap > .bg-gray-100 {
    background: var(--ax-field);
    color: var(--ax-ink);
    border: 1px solid var(--ax-line);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-wrap: balance;
  }


  /* Confirm = the one filled pill; Back = ghost pill */
  & [data-testid="confirm-book-button"],
  & [data-testid="back"],
  & [data-testid="success-page"] button {
    min-height: 48px;
    padding-inline: 24px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 500;
    transition:
      transform var(--ax-t) var(--ax-ease),
      box-shadow var(--ax-t) var(--ax-ease);
  }
  & [data-testid="confirm-book-button"] {
    background: var(--ax-accent);
    color: var(--ax-on-accent);
    border: 0;
    box-shadow:
      0 14px 30px -12px var(--ax-glow),
      inset 0 1px 0 rgba(255, 255, 255, 0.45);
  }
  & [data-testid="confirm-book-button"]:not(:disabled):hover {
    transform: translateY(-1px);
    background: var(--ax-accent);
  }
  & [data-testid="back"] {
    background: var(--ax-field);
    color: var(--ax-ink);
    border: 1px solid var(--ax-control);
    box-shadow: inset 0 1px 0 var(--ax-hi);
  }
  & [data-testid="confirm-book-button"]:active,
  & [data-testid="back"]:active {
    transform: scale(0.98);
  }

  /* ---------- booking success / cancel ---------- */
  & [data-testid="success-page"] [role="dialog"] {
    padding: 32px;
  }
  & [data-testid="success-page"] h3 {
    font-size: 24px;
    font-weight: 300;
    letter-spacing: -0.03em;
    color: var(--ax-ink);
  }
  & [data-testid="success-page"] [role="dialog"] .border-subtle {
    border-color: var(--ax-line);
  }
  & [data-testid="success-page"] a {
    color: var(--ax-ink);
    text-underline-offset: 3px;
  }

  /* FG7/C1: action buttons on the accent scale. Primary = accent pill, secondary = field pill, "Cancel" (text
     button after a booking) stays a quiet underline. */
  & [data-testid="success-page"] button:where(:not([data-testid="cancel"])) {
    background: var(--ax-field);
    color: var(--ax-ink);
    border: 1px solid var(--ax-control);
    box-shadow: inset 0 1px 0 var(--ax-hi);
  }
  & [data-testid="success-page"] button[data-testid="confirm_cancel"] {
    background: var(--ax-accent);
    color: var(--ax-on-accent);
    border: 0;
    box-shadow:
      0 14px 30px -12px var(--ax-glow),
      inset 0 1px 0 rgba(255, 255, 255, 0.45);
  }
  & [data-testid="success-page"] button[data-testid="cancel"] {
    background: transparent;
    color: var(--ax-ink);
    border: 0;
    padding-inline: 4px; /* R3 finish-gate 3: the 24 px pill padding put a wide gap between "or" and the link */
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  /* FG12: keep every target at the 44 px the rest of the theme uses (add-to-calendar icons were 40, Reschedule 21 high) */
  & [data-testid="success-page"] a:is(.h-10.w-10) {
    width: 44px;
    height: 44px;
  }
  & [data-testid="success-page"] a[data-testid="reschedule-link"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* R3 finish-gate 3: "Need to make a change? Reschedule or Cancel" wrapped with "or Cancel" alone on a second line and
     a wider gap than "Reschedule". Centred flex-wrap rows, so a narrow sheet breaks between the question and the
     links, and the links stay on one line together. */
  & [data-testid="success-page"] div.text-center:has(> span + span.inline) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 12px;
  }
  & [data-testid="success-page"] div.text-center > span.inline {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 12px;
  }
  /* R3 codex N1: the Add to calendar row (label + four 44 px buttons) and the cancel-reason actions have fixed widths
     wider than a 320 px sheet; let both wrap instead of pushing the sheet wider than its clipping ancestor. */
  & [data-testid="success-page"] [role="dialog"] div.flex-row:has(> span + div > a) {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
  }
  & [data-testid="success-page"] [role="dialog"] div.flex-row > div:has(> a) {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  & [data-testid="success-page"] [role="dialog"] div.flex-row > div > a {
    margin: 0;
  }
  & [data-testid="success-page"] [role="dialog"] div.flex-col-reverse > div.flex.w-full {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  & [data-testid="success-page"] [role="dialog"] div.flex-col-reverse > div.flex.w-full > button {
    margin: 0;
    flex: 1 1 auto;
  }

  /* FG7: the "Try it for free" block advertises cal.com sign-up on a private instance. It only renders when the
     owner's hideBranding is false (bookings-single-view.tsx:1028); that flag is a per-user database value behind a
     paid-plan gate in Appearance, not an env var, so it cannot live in the compose file. Hide it here (scoped to the
     sign-up anchor, with the rule above it). */
  & [data-testid="success-page"] hr:has(+ div.text-xs > a[href*="/signup"]),
  & [data-testid="success-page"] div.text-xs:has(> a[href*="/signup"]) {
    display: none;
  }

  /* ---------- profile ---------- */
  & [data-testid="name-title"] {
    font-size: clamp(30px, 3vw, 40px);
    font-weight: 300;
    letter-spacing: -0.035em;
    color: var(--ax-ink);
  }

  /* ---------- 404 ---------- */
  & [data-testid="404-page"] :is(h1, h2, p, a, span, li) {
    color: var(--ax-ink);
  }
  & [data-testid="404-page"] h1 {
    font-weight: 300;
    letter-spacing: -0.035em;
  }
  & [data-testid="404-page"] :is(h2, p.uppercase) {
    color: var(--ax-ink-2);
  }
  /* FG8/C11: "username is still available" and the Documentation/Blog list are platform growth content
     (notFoundClient.tsx:49-140, gated only by IS_CALCOM/isSubpage, no env or setting). Hide both, keep the message and
     "go back home", and centre what is left. The green upstream claim colour goes to the accent. */
  & [data-testid="404-page"] span.inline-block:has(> strong),
  & [data-testid="404-page"] h2:has(+ ul),
  & [data-testid="404-page"] ul {
    display: none;
  }
  & [data-testid="404-page"] strong {
    color: var(--ax-accent);
  }
  & [data-testid="404-page"] .mt-12 {
    text-align: center;
  }
}

/* ---------- week round: week / column time grid, view switcher, duration pills, location list ----------
 * Upstream's week and column layouts paint every surface `bg-default` (opaque white), draw unavailable time as a grey
 * diagonal stripe in an INLINE style, and park the layout switcher in a `position: fixed; top: 1rem; right: 1rem`
 * wrapper (it only lines up with the header when the page starts at y = 0). This block puts the grid on the glass,
 * swaps the stripe for a dot texture, and returns the switcher to the header row. Selectors hang off
 * `.scheduler-wrapper` (apps/web/modules/calendars/weeklyview) and `data-testid="calendar-empty-cell"` (= an available
 * hour). Pin 54343aa685ae. */
body:has([data-testid="booker-container"]) {
  --ax-bar: var(--ax-solid); /* R4 R3: sticky day header + hour gutter are fully opaque, so no row can show through */
  --ax-avail: #fdfeff; /* R4 R1: available hour = a lit, near-opaque pane, no texture */
  --ax-unavail: rgba(12, 40, 58, 0.06); /* unavailable hour: tint ... */
  --ax-dot: rgba(12, 40, 58, 0.38); /* ... plus the only dot texture on the page (12 px pitch) */
  --ax-rail: var(--ax-control); /* >= 3:1 stroke on the outer edges of an availability block (WCAG 1.4.11) */
  --ax-now: #0b5577;
  --ax-now-label: #0b354a;
  --ax-now-on: #ffffff;
}
.dark body:has([data-testid="booker-container"]) {
  --ax-avail: #133044; /* BunkerWeb navy: one surface-ladder step above the glass (#0c283a), not a glare */
  --ax-unavail: rgba(0, 0, 0, 0.2);
  --ax-dot: rgba(188, 211, 223, 0.34);
  --ax-now: #6ac1e0;
  --ax-now-label: #6ac1e0;
  --ax-now-on: #06222f;
}

body:has([data-testid="booker-container"]) {
  /* the layout switcher: back into the header row (see the comment above), as a pill group like 12h/24h */
  & [data-testid="booker-container"] div.fixed:has(> [role="group"][aria-label="Layout"]) {
    position: static;
  }
  & [role="group"][aria-label="Layout"] button {
    min-width: 40px;
    justify-content: center;
  }
  & [role="group"][aria-label="Layout"] button svg {
    width: 16px;
    height: 16px;
  }

  /* R4 R2: week and column wear the same bounded tray as month: a centred 1400 px sheet, 28 px page padding, the 8 px ring
     visible. Upstream sizes the sheet `width: 100vw; min-height: 100vh` inline (hence !important) and clips it in `.main`
     (overflow-clip), which swallowed the ring; the sheet clips its own content instead (overflow: clip is not a scroll
     container, so the upstream sticky header keeps working). The marker is the sticky `grid-area:header` (month's is fixed). */
  &:has([data-testid="booker-container"] [class~="[grid-area:header]"].sticky) {
    --ax-col: min(1400px, calc(100% - 56px)); /* % = the body / viewport width, where the logo and the switcher live */
    & main:has([data-testid="booker-container"]) {
      padding-inline: 28px;
      margin-top: 96px; /* 20 px logo offset + 44 px mark + 32 px of air */
      min-height: 0;
    }
    & .main:has(> [data-testid="booker-container"]) {
      overflow: visible;
      min-height: 0;
    }
    /* R5 F1: the tray never outgrows the viewport, so the window cannot scroll (upstream's scrollIntoView on the now line moved
       the WINDOW whenever the sheet was taller than the screen, cutting the logo and the ring). Top margin 96 + ring 9 + voice
       line 58 + 5 spare = 168 px. The grid rows become 70 px + the rest (inline style, hence !important); the host column and
       the column-layout lanes scroll inside the tray instead. Below about 708 px of viewport height the 540 px floor wins and
       the page may scroll (by its own, not by the auto-scroll). */
    & [data-testid="booker-container"] {
      width: 100% !important;
      max-width: 1400px;
      min-height: 540px !important;
      max-height: calc(100dvh - 168px);
      grid-template-rows: 70px minmax(0, 1fr) !important;
      overflow: clip;
    }
    & [data-testid="booker-container"] [class~="[grid-area:meta]"],
    & [data-testid="booker-container"] [class~="[grid-area:main]"]:not(:has(.scheduler-wrapper)) {
      min-height: 0;
      overflow-y: auto;
      scrollbar-width: thin;
    }
  }
  & [data-testid="booker-container"] [class~="[grid-area:header]"].sticky {
    background: var(--ax-bar);
    border-radius: 0 24px 0 0;
  }
  /* R4 R12: upstream renders a second, invisible Layout group (opacity-0, pointer-events-none) in the header. It was still in
     the tab order and the accessibility tree; visibility: hidden removes it from both (opacity does not). */
  & div.pointer-events-none.opacity-0:has(> [role="group"][aria-label="Layout"]) {
    visibility: hidden;
  }
  /* R4 R14: upstream draws the now line in every week it shows. The header's Today button exists exactly when the shown week
     does not contain today (verified on Oct 1 vs Oct 12), so it is a reliable hook to drop the line from other weeks. */
  & [data-testid="booker-container"]:has([class~="[grid-area:header]"].sticky button:not([role], [aria-label])) .scheduler-wrapper div.absolute.top-0.z-40.flex.h-px:has(.bg-inverted) {
    visibility: hidden; /* not display: none: upstream scrolls THIS element into view on load, and that needs a box */
  }

  /* R4 R5: logo and month-layout switcher sit on the tray's outer edges (its 8 px ring + 1 px line = 9 px beyond the sheet),
     so logo, switcher, sheet and voice line share one column. Month's sheet is 1040 px; week/column set their own --ax-col
     above. The switcher stays in the header row for week and column. */
  & {
    --ax-col: min(1040px, calc(100% - 32px));
  }
  /* the form step narrows the month sheet (meta + main columns only: 760 px, 720 below 1024), and the column follows it */
  &:has([data-testid="booker-container"] [class~="[grid-area:main]"] > div > form) {
    --ax-col: min(720px, calc(100% - 32px));
  }
  @media (min-width: 1024px) {
    &:has([data-testid="booker-container"] [class~="[grid-area:main]"] > div > form) {
      --ax-col: min(760px, calc(100% - 32px));
    }
  }
  &::before {
    left: max(16px, calc((100% - var(--ax-col)) / 2 - 9px));
  }
  & [data-testid="booker-container"] [class~="[grid-area:header]"].fixed {
    top: 22px;
    right: max(16px, calc((100% - var(--ax-col)) / 2 - 9px));
  }

  /* R4 R3: the grid is its own scroll area (viewport-relative height) so the logo, the tray and the voice line stay put
     while the hours scroll. The upstream day header sticks `66 px` below the page header (a window-scroll offset); inside
     the scroller it sticks at its top, so the offset variable goes to 0. The gutter sticks left as before. */
  /* the grid area stretches to the meta column's height (the sheet is as tall as the host column), and the scroller fills it
     as an absolute box, so its 1 400 px of rows add nothing to the row size. */
  & [data-testid="booker-container"] [class~="[grid-area:main]"]:has(.scheduler-wrapper) {
    position: relative;
    align-self: stretch;
    min-height: 0;
  }
  & [data-testid="booker-container"] [class~="[--calendar-dates-sticky-offset:66px]"] {
    --calendar-dates-sticky-offset: 0px; /* sticks at the scroller's top, not 66 px below a page header */
    position: absolute;
    inset: 0;
  }
  /* a scroll area with no focusable child is itself a keyboard stop in Chromium (arrow keys scroll it): ring it inside */
  & [data-testid="booker-container"] .scheduler-wrapper.flex-col:focus-visible {
    outline: 3px solid var(--ax-focus);
    outline-offset: -3px;
  }
  & [data-testid="booker-container"] .scheduler-wrapper.flex-col {
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ax-control) transparent;
  }
  /* week/column header controls: previous/next week = the month arrows' round 44 px buttons, Today = a pill beside them */
  & [data-testid="booker-container"] [class~="[grid-area:header]"].sticky button:is([aria-label="Previous Day"], [aria-label="Next Day"]) {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 999px;
    border: 1px solid var(--ax-control);
    background: var(--ax-field);
    color: var(--ax-ink);
    box-shadow: inset 0 1px 0 var(--ax-hi);
    justify-content: center;
    transition:
      transform var(--ax-t) var(--ax-ease),
      background-color var(--ax-t) var(--ax-ease);
  }
  & [data-testid="booker-container"] [class~="[grid-area:header]"].sticky button:is([aria-label="Previous Day"], [aria-label="Next Day"]):not(:disabled):hover {
    transform: translateY(-1px);
    background: var(--ax-soft);
  }
  & [data-testid="booker-container"] [class~="[grid-area:header]"].sticky button:is([aria-label="Previous Day"], [aria-label="Next Day"]):disabled {
    opacity: 0.45;
  }
  & [data-testid="booker-container"] [class~="[grid-area:header]"].sticky button:not([role], [aria-label]) {
    min-height: 44px;
    padding-inline: 18px;
    border-radius: 999px;
    border: 1px solid var(--ax-control);
    background: var(--ax-field);
    color: var(--ax-ink);
    font-weight: 500;
    box-shadow: inset 0 1px 0 var(--ax-hi);
  }
  & [data-testid="booker-container"] [class~="[grid-area:header]"].sticky button:not([role], [aria-label]):hover {
    background: var(--ax-soft);
  }
  /* month layout: the same wrapper is the fixed corner chip that holds the switcher; no box behind it */
  & [data-testid="booker-container"] [class~="[grid-area:header]"].fixed {
    background: transparent;
  }
  /* column layout: day headers (upstream `bg-default` + a `before:bg-default` strip) */
  & [data-testid="booker-container"] [class~="[grid-area:main]"] header,
  & [data-testid="booker-container"] [class~="[grid-area:main]"] header::before {
    background: transparent;
  }

  /* R5 F2: the column rules live in `grid-area:main` on the phone's mobile month layout too (its slot list is there), where they
     turned the full-width pills into 168 px boxes and stacked the day header. Column view never renders below 768 px. */
  @media (min-width: 768px) {
    /* R4 R6: day header = a small muted weekday over a 22 px / 600 date */
    & [data-testid="booker-container"] [class~="[grid-area:main]"] header > span:first-child {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      text-transform: none;
      font-size: 12px;
      line-height: 1.2;
      font-weight: 400;
      letter-spacing: 0;
      color: var(--ax-ink-2);
    }
    & [data-testid="booker-container"] [class~="[grid-area:main]"] header > span:first-child > span:first-child + span,
    & [data-testid="booker-container"] [class~="[grid-area:main]"] header > span:first-child > span:last-child:not(:first-child) {
      padding: 0;
      font-size: 22px;
      line-height: 1.15;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: var(--ax-ink);
    }
    /* lanes: no flex gap (the header cells have none, so each date sits over the middle of its lane) and a hairline between
       lanes; the slot buttons are lighter than month's pills (a hairline edge on the slot fill, 12 px radius, 44 px tall,
       centred, capped at 168 px). The label carries the contrast (a boundary of 3:1 is not needed to identify a text
       button), so the stroke stays a hairline. Month's pills are untouched (they live in `grid-area:timeslots`). */
    & [data-testid="booker-container"] [class~="[grid-area:main]"] > div.flex.h-full.flex-row {
      gap: 0;
    }
    & [data-testid="booker-container"] [class~="[grid-area:main]"] > div.flex.h-full.flex-row > .no-scrollbar {
      padding-inline: 10px;
    }
    & [data-testid="booker-container"] [class~="[grid-area:main]"] > div.flex.h-full.flex-row > .no-scrollbar + .no-scrollbar {
      border-left: 1px solid var(--ax-line);
    }
    & [data-testid="booker-container"] [class~="[grid-area:main]"] button[data-testid="time"] {
      width: 100%;
      max-width: 168px;
      margin-inline: auto;
      min-height: 44px;
      border-radius: 12px;
      border-color: var(--ax-slot-stroke);
      background: var(--ax-slot);
      font-size: 14px;
      font-variant-numeric: tabular-nums;
    }
    & [data-testid="booker-container"] [class~="[grid-area:main]"] button[data-testid="time"]:not(:disabled):hover {
      border-color: var(--ax-accent);
      background: var(--ax-soft);
    }
  }

  /* ---- the grid ---- */
  & .scheduler-wrapper :is(.bg-default) {
    background: transparent;
  }
  & .scheduler-wrapper :is(.border-default, .border-b-default, .border-r-default, .border-l-default, .ring-muted) {
    border-color: var(--ax-line);
    --tw-ring-color: var(--ax-line);
  }
  & .scheduler-wrapper :is(.divide-y, .divide-x).divide-default > * {
    border-color: var(--ax-line);
  }
  /* sticky day header and hour gutter */
  & .scheduler-wrapper .sticky.flex-none,
  & .scheduler-wrapper .sticky.left-0 {
    background: var(--ax-bar);
  }
  & .scheduler-wrapper .text-subtle {
    color: var(--ax-ink-2);
  }
  & .scheduler-wrapper .sticky .auto-cols-fr > div {
    flex-direction: column;
  }
  /* hour labels */
  & .scheduler-wrapper .divide-y.divide-default > div,
  & .scheduler-wrapper .sticky.left-0 > * {
    color: var(--ax-ink-2);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }
  /* day header: sentence case, the day number is the heavy part */
  & .scheduler-wrapper .sticky .auto-cols-fr > div,
  & .scheduler-wrapper .sticky .auto-cols-fr button {
    text-transform: none;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ax-ink-2);
  }
  & .scheduler-wrapper .sticky .auto-cols-fr > div > span > span {
    color: var(--ax-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  /* R4 R1: unavailable = tint + the only dot texture on the page, sparse and quiet (12 px pitch). The inline stripe is
     replaced; !important only because the stripe is an inline style. */
  & .scheduler-wrapper div.grid[style*="repeating-linear-gradient"] {
    background-color: var(--ax-unavail) !important;
    background-image: radial-gradient(circle at 1px 1px, var(--ax-dot) 0.9px, transparent 1.3px) !important;
    background-size: 12px 12px !important;
  }
  /* available = a lit, near-opaque, untextured pane. Structure is hairlines (--ax-line): a hairline under every hour and
     on the cell's left edge. The 3:1 stroke (--ax-rail) is kept for the OUTER edge of the availability block only: the
     first and last cell of a day, and the sides of the first and last available day (WCAG 1.4.11). */
  & .scheduler-wrapper [data-testid="calendar-empty-cell"] {
    --cl: var(--ax-line);
    --cr: transparent;
    --ct: transparent;
    --cb: var(--ax-line);
    width: 100%; /* R5 F6: upstream's calc(100% - 1px) left a 1 px slit that let the dot texture show between days */
    background: var(--ax-avail);
    box-shadow:
      inset 1px 0 0 var(--cl),
      inset -1px 0 0 var(--cr),
      inset 0 1px 0 var(--ct),
      inset 0 -1px 0 var(--cb);
    transition: background-color var(--ax-t) var(--ax-ease);
  }
  & .scheduler-wrapper [data-testid="calendar-empty-cell"]:first-child {
    --ct: var(--ax-rail);
  }
  & .scheduler-wrapper [data-testid="calendar-empty-cell"]:last-child {
    --cb: var(--ax-rail);
  }
  /* sides of the block: the first available day (nothing available before it) and the last (nothing after it). A day with no
     available hour renders an EMPTY <li>; :has() cannot nest inside :has()/:not(:has()), so :empty is the "no cells" test. */
  & .scheduler-wrapper li:empty + li > [data-testid="calendar-empty-cell"],
  & .scheduler-wrapper li:first-child > [data-testid="calendar-empty-cell"] {
    --cl: var(--ax-rail);
  }
  & .scheduler-wrapper li:has(+ li:empty) > [data-testid="calendar-empty-cell"],
  & .scheduler-wrapper li:last-child > [data-testid="calendar-empty-cell"] {
    --cr: var(--ax-rail);
  }
  & .scheduler-wrapper [data-testid="calendar-empty-cell"]:hover {
    background: color-mix(in srgb, var(--ax-accent) 14%, var(--ax-avail));
  }

  /* hover chip (upstream: `bg-brand-default text-brand`, shown by group-hover): the accent pill with the slot's time */
  & .scheduler-wrapper [data-testid="calendar-empty-cell"] > .bg-brand-default {
    inset: 3px;
    width: auto !important; /* upstream sets an inline width */
    height: auto !important;
    border-radius: 10px;
    background: var(--ax-accent);
    color: var(--ax-on-accent);
    font-size: 13px;
    box-shadow:
      0 10px 22px -10px var(--ax-glow),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }

  /* now line */
  & .scheduler-wrapper .bg-inverted {
    background: var(--ax-now);
  }
  & .scheduler-wrapper .bg-inverted.h-px {
    height: 2px;
  }
  & .scheduler-wrapper .w-16.pr-2.text-right {
    width: auto;
    margin-right: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ax-now-label);
    color: var(--ax-now-on);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
}

/* duration pills and the location list (meta column), every layout */
body:has([data-testid="booker-container"]) {
  /* R4 R8: the options wrap into rows of pills inside one capsule, so every duration is visible at every width (the old
     strip scrolled sideways behind two arrows and cut "1h 30m"). No arrows, no mask. The capsule fits its content, so
     the form step (one chosen pill) has no empty half. */
  & [data-testid="event-meta"] div.border-default:has(> ul.no-scrollbar) {
    margin-right: 0; /* upstream mr-5 reserved room for the old overflow arrow */
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--ax-control);
    border-radius: 20px;
    background: var(--ax-field);
    box-shadow: inset 0 1px 0 var(--ax-hi);
    overflow: hidden;
  }
  & [data-testid="event-meta"] ul.no-scrollbar {
    background: transparent;
    border-radius: inherit;
    padding: 3px;
    gap: 2px;
    flex-wrap: wrap;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* R5 F7: tidy rows: a 4-column max-content grid (15m 30m 1h 1h 30m / 2h 3h 4h), clock aligned to the first row. */
  & [data-testid="event-meta"] ul.no-scrollbar:has(> li:nth-child(5)) {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: start;
  }
  & [data-testid="event-meta"] ul.no-scrollbar:has(> li:nth-child(5)) > li {
    padding-inline: 7px;
  }
  & [data-testid="event-meta"] div.flex.items-center:has(> svg + div div.border-default > ul.no-scrollbar) {
    align-items: flex-start;
  }
  & [data-testid="event-meta"] div.flex.items-center:has(> svg + div div.border-default > ul.no-scrollbar) > svg {
    margin-top: 10px;
  }
  & [data-testid="event-meta"] ul.no-scrollbar > li {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding-inline: 10px;
    border-radius: 999px;
    color: var(--ax-ink);
    font-weight: 500;
    transition: background-color var(--ax-t) var(--ax-ease);
  }
  & [data-testid="event-meta"] ul.no-scrollbar > li[data-active="false"]:hover {
    background: var(--ax-soft);
    color: var(--ax-ink);
  }
  & [data-testid="event-meta"] ul.no-scrollbar > li[data-active="true"] {
    background: var(--ax-accent);
    color: var(--ax-on-accent);
  }
  & [data-testid="event-meta"] div.border-default > button.absolute {
    display: none;
  }
  /* the event's single location ("Proton Meet (link sent before the call)", a `link` location with a custom label): upstream
     clamps it to one line, which cuts this label in the narrow month-layout meta column. Let it wrap, and keep the icon on
     the first line. (With several locations the same row reads "N location options" and opens the tooltip below.) */
  & [data-testid="event-meta"] p.line-clamp-1[data-state] {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-height: 1.4;
    color: var(--ax-ink);
  }
  & [data-testid="event-meta"] div:has(> img.opacity-70) {
    align-items: flex-start;
  }
  & [data-testid="event-meta"] div:has(> img.opacity-70) > img {
    margin-top: 2px;
    flex: none;
  }
  /* Radix portals the tooltip to <body>, still inside the body scope. Upstream colours it `bg-inverted` and tints the
     link / pin icons with `invert dark:invert-0` for that dark-on-light flip, so keep the inversion: navy chip in light,
     pale chip in dark. */
  & .calcom-tooltip {
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--ax-ink);
    color: var(--ax-bg);
    border: 1px solid var(--ax-edge-out);
    box-shadow: 0 20px 40px -16px var(--ax-shadow);
    font-size: 13px;
    font-weight: 500;
    margin-top: -4px;
  }
  & .calcom-tooltip p {
    color: inherit;
  }
}

/* mobile: the booker stacks; keep the tray ring inside the viewport and the logo compact */
@media (max-width: 480px) {
  body:has([data-testid="booker-container"], [data-testid="name-title"], [data-testid="success-page"], [data-testid="404-page"])::before {
    top: 14px;
    left: 16px;
    width: 132px;
    height: 36px;
  }

  /* R4 R11: compact identity block (R4 sizes, tighter gaps), so the calendar and the slots reach the first screen sooner */
  body:has([data-testid="booker-container"]) [data-testid="event-meta"] {
    padding: 20px 20px 12px;
  }
  body:has([data-testid="booker-container"]) [data-testid="event-title"] {
    margin: 14px 0 12px;
    font-size: 24px;
  }
  body:has([data-testid="booker-container"]) [data-testid="event-meta"] .stack-y-4 > * + * {
    margin-top: 10px;
  }
  /* day hit area: the disc stays ~33 px, but each day answers taps over a 44 px square (34 px disc + 1 px border + 2 x 6 px) (a pseudo-element is part of its
     button for hit testing, so nothing around it moves) */
  body:has([data-testid="booker-container"]) button[data-testid="day"]::before {
    content: "";
    position: absolute;
    inset: -6px;
  }

  /* C7: at this width the 8/9 px outer bezel rings run into upstream's clipping ancestors and lose their corners.
     Draw the bezel inside the core instead (on the glass pseudo, which sits above the element's own shadow). */
  body:has([data-testid="booker-container"], [data-testid="success-page"]) :is([data-testid="booker-container"], [data-testid="success-page"] [role="dialog"]) {
    box-shadow: 0 30px 60px -30px var(--ax-shadow);
  }
  body:has([data-testid="booker-container"], [data-testid="success-page"]) :is([data-testid="booker-container"], [data-testid="success-page"] [role="dialog"])::before {
    box-shadow:
      inset 0 0 0 5px var(--ax-shell),
      inset 0 0 0 6px var(--ax-edge-out),
      inset 0 1px 0 var(--ax-hi),
      inset 0 -1px 0 var(--ax-edge-out);
  }

  /* R3 codex N1/C2/C7: the dialog is `inline-block` and its flex parent `.main` is sized to max-content, so the sheet
     was 372 px (success) / 359 px (cancel) inside upstream's 288-343 px `.overflow-y-auto` ancestor, which clipped its
     edges. Pin both to the ancestor's width and let their children shrink. The bezel rings are inset (above), so
     nothing outside the box is left to clip. Tighter padding gives the wrapped rows room at 320. */
  body:has([data-testid="success-page"]) [data-testid="success-page"] .main:has(> [role="dialog"]) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  body:has([data-testid="success-page"]) [data-testid="success-page"] [role="dialog"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 28px 20px;
    /* R3 finish-gate 1: the drop shadow below the card painted as a blurred ghost band between card and voice line */
    box-shadow: none;
  }

  /* C2: stack each label over its value, so a long attendee address gets the full card width instead of a
     third-column sliver that clipped it */
  body:has([data-testid="success-page"]) [data-testid="success-page"] .grid-cols-3 {
    grid-template-columns: minmax(0, 1fr);
  }
  body:has([data-testid="success-page"]) [data-testid="success-page"] .grid-cols-3 > * {
    grid-column: auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  body:has([data-testid="success-page"]) [data-testid="success-page"] .grid-cols-3 > :not(.col-span-2) {
    margin-bottom: 2px;
  }
  body:has([data-testid="success-page"]) [data-testid="success-page"] .grid-cols-3 > .col-span-2 {
    margin-top: 0; /* upstream mt-3/mt-9 sat on both cells of a row; stacked they doubled the gap */
  }
}

/* ---------- motion pass (design-motion-principles: Jakub primary, Emil secondary, Jhey on the one rare moment) ----------
 * Rules this block keeps: transform/opacity only (two named exceptions: the 24 px tick's stroke-dashoffset, drawn once, and a
 * 4 px blur on the form's one-shot entrance); fill-mode `backwards`, never `both`/`forwards`, so no animated element keeps a
 * stacking context or a containing block for fixed children once it settles; nothing animates `main` or an ancestor of
 * upstream fixed/sticky controls; nothing is keyboard-driven (focus ring stays instant); nothing waits on motion, every
 * element is interactive and complete from frame 0. Every keyframe sits under no-preference, and the reduce block below
 * kills the rest.
 *
 * frequency gate        motion                               duration / easing
 * frequent (hover)      day / slot / arrows hover, press     160 ms / 80 ms press, --ax-ease (Vaul curve)
 * occasional (daily)    selected-day glow grows in           340 ms --ax-out
 * occasional            slot rows enter    240 ms, all rows together, --ax-out
 * occasional            calendar -> form, month change       240 ms (opacity+8px+4px blur) / 220 ms opacity
 * rare (once a booking) confirmation card settle, tick draw  520 ms / 420 ms after 220 ms, --ax-out
 */
@media (prefers-reduced-motion: no-preference) {
  /* selected day: the glow pseudo grows in (not from 0: Emil, start at .7) */
  body:has([data-testid="booker-container"]) button[data-testid="day"].bg-brand-default::after {
    animation: ax-glow-in 0.34s var(--ax-out) backwards;
  }
  @keyframes ax-glow-in {
    from {
      opacity: 0;
      transform: scale(0.7);
    }
  }

  /* month change / back from the form: upstream remounts every day cell (checked: 0 of 30 nodes survive), so an
     on-mount opacity fade is a cross-fade the CSS can reach without touching the DOM */
  body:has([data-testid="booker-container"]) button[data-testid="day"] {
    animation: ax-fade 0.22s var(--ax-ease) backwards;
  }
  @keyframes ax-fade {
    from {
      opacity: 0;
    }
  }

  /* slot rows enter after a day is picked (upstream remounts the list: 0 of 16 survive). Opacity + 6 px, six rows
     together (no stagger: focus is never hidden for long). */
  body:has([data-testid="booker-container"]) .h-full.pb-4 > .flex.gap-2:has(> button[data-testid="time"]) {
    animation: ax-slot-in 0.24s var(--ax-out) backwards;
  }
  @keyframes ax-slot-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
  }

  /* calendar -> details form (desktop: the form takes the calendar's column). Jakub's enter recipe: opacity + 8 px +
     4 px blur to sharp. `backwards` so the filter is gone after, no containing block is left on the form. */
  body:has([data-testid="booker-container"]) [data-testid="booker-container"] [class~="[grid-area:main]"] > div > form {
    animation: ax-form-in 0.24s var(--ax-out) backwards;
  }
  @keyframes ax-form-in {
    from {
      opacity: 0;
      transform: translateY(8px);
      filter: blur(4px);
    }
  }

  /* confirmation: the card settles (transform only: an opacity on the card would make it the backdrop root of its own
     glass and the blur would pop in at the end; `main` already fades it in), the green disc pops, the tick draws */
  body:has([data-testid="success-page"]) [data-testid="success-page"] [role="dialog"] {
    animation: ax-settle 0.52s var(--ax-out) backwards;
  }
  @keyframes ax-settle {
    from {
      transform: translateY(12px) scale(0.985);
    }
  }
  body:has([data-testid="success-page"]) [data-testid="success-page"] div:has(> [data-testid="check-icon"]) {
    animation: ax-disc 0.42s var(--ax-out) 0.12s backwards;
  }
  @keyframes ax-disc {
    from {
      transform: scale(0.8);
      opacity: 0;
    }
  }
  body:has([data-testid="success-page"]) [data-testid="success-page"] [data-testid="check-icon"] path {
    stroke-dasharray: 24; /* the lucide check is 22.6 long */
    animation: ax-tick 0.42s var(--ax-out) 0.22s backwards;
  }
  @keyframes ax-tick {
    from {
      stroke-dashoffset: 24;
    }
  }

  /* press: a dip lands faster than the release springs back (Emil: immediate tactile feedback) */
  body:has([data-testid="booker-container"], [data-testid="success-page"]) :is(button[data-testid="day"], button[data-testid="time"], button[data-testid="decrementMonth"], button[data-testid="incrementMonth"], [data-testid="confirm-book-button"], [data-testid="back"]):active {
    transition-duration: 0.08s;
  }
}

/* static aurora layer: a fixed pseudo on <html> (body's own pseudos hold the logo and voice line), behind everything, no
   animation (the old drift is gone; this is its frame 0). Tokens live on <html>, the layer is a pseudo of it. */
html:has([data-testid="booker-container"], [data-testid="name-title"], [data-testid="success-page"], [data-testid="404-page"])::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(26% 30% at 24% 26%, var(--ax-drift-a), transparent 68%),
    radial-gradient(26% 32% at 76% 70%, var(--ax-drift-b), transparent 68%);
}

/* drift tokens live on <html> (the layer is a pseudo of it, outside body's custom properties) */
html:has([data-testid="booker-container"], [data-testid="name-title"], [data-testid="success-page"], [data-testid="404-page"]) {
  --ax-drift-a: rgba(106, 193, 224, 0.5);
  --ax-drift-b: rgba(46, 172, 104, 0.2);
}
html.dark:has([data-testid="booker-container"], [data-testid="name-title"], [data-testid="success-page"], [data-testid="404-page"]) {
  --ax-drift-a: rgba(106, 193, 224, 0.26);
  --ax-drift-b: rgba(11, 85, 119, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  /* everything stops: no entrance, no lift or dip. State changes stay (colour, border), instantly. Not gated by :has. */
  html::before, body, body *, body *::before, body *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  :is(button[data-testid="day"], button[data-testid="time"], button[data-testid="decrementMonth"], button[data-testid="incrementMonth"], [data-testid="confirm-book-button"], [data-testid="back"]) {
    transform: none !important;
  }
}

/* ---------- forced colours (Windows high contrast): FG6, A3, C3 ----------
   The system palette drops every fill, so the selected day, pressed slot and selected toggle collapsed onto the free
   ones. Restore a state that is not colour alone: Highlight fill, a CanvasText outline (geometry) and weight/underline. */
@media (forced-colors: active) {
  body:has([data-testid="booker-container"]) button[data-testid="day"].bg-brand-default,
  body:has([data-testid="booker-container"]) button[data-testid="time"]:is([aria-pressed="true"], [data-selected="true"]),
  body:has([data-testid="booker-container"]) [role="group"].bg-muted button[aria-checked="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    border: 1px solid HighlightText;
    outline: 2px solid CanvasText;
    outline-offset: 2px;
    font-weight: 700;
  }
  body:has([data-testid="booker-container"]) [role="group"].bg-muted button[aria-checked="true"] {
    text-decoration: underline;
  }
  /* R3 a11y-2: unavailable days take the system disabled colour (text and border), the strike stays. (In High Contrast
     Black the system's own GrayText is green; that is the platform's "disabled", not an upstream mapping.) */
  body:has([data-testid="booker-container"]) button[data-testid="day"]:disabled:has(> span.bg-brand-default) {
    border: 1px dotted GrayText;
  }
  body:has([data-testid="booker-container"]) button[data-testid="day"]:disabled {
    forced-color-adjust: none; /* else the forced palette repaints the transparent border as a GrayText ring, and "ring vs no ring" is lost */
    color: GrayText;
    background: transparent;
    border: 1px solid transparent;
  }
  /* R4 R7: the strike is gone, and the system palette drops the disc fill, so the free days keep their ring in a system
     colour (disc vs no disc survives) */
  body:has([data-testid="booker-container"]) button[data-testid="day"]:not(:disabled):not(.bg-brand-default) {
    forced-color-adjust: none;
    background: Canvas;
    color: ButtonText;
    border: 1px solid ButtonText;
  }
  /* week round: the system palette drops the dot texture, the cell fills and the now line, so unavailable and available
     hours looked identical. Re-draw them from system colours: unavailable = GrayText dots, available = a solid inset
     frame (shape, not colour), now line = Highlight with a Highlight label, hover chip = Highlight. */
  body:has([data-testid="booker-container"]) .scheduler-wrapper div.grid[style*="repeating-linear-gradient"] {
    forced-color-adjust: none;
    background-color: Canvas !important;
    background-image: radial-gradient(circle at 1px 1px, GrayText 0.9px, transparent 1.3px) !important;
  }
  body:has([data-testid="booker-container"]) .scheduler-wrapper [data-testid="calendar-empty-cell"] {
    forced-color-adjust: none;
    background: Canvas;
    outline: 2px solid CanvasText;
    outline-offset: -3px;
    box-shadow: none;
  }
  body:has([data-testid="booker-container"]) .scheduler-wrapper [data-testid="calendar-empty-cell"] > .bg-brand-default {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    outline: 2px solid HighlightText;
    outline-offset: -4px;
    box-shadow: none;
  }
  body:has([data-testid="booker-container"]) .scheduler-wrapper .bg-inverted {
    forced-color-adjust: none;
    background: Highlight;
  }
  body:has([data-testid="booker-container"]) .scheduler-wrapper .w-16.pr-2.text-right {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    border: 1px solid HighlightText;
  }
  body:has([data-testid="booker-container"]) [data-testid="event-meta"] ul.no-scrollbar > li[data-active="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    outline: 2px solid CanvasText;
    outline-offset: 1px;
    text-decoration: underline;
    font-weight: 700;
  }
  /* R3 a11y-3: the 12h/24h wrapper outlined the group and the selected item outlined itself: a double outline. Keep the
     selected item's (state is geometry + underline, above) and drop the wrapper's. */
  body:has([data-testid="booker-container"]) [role="group"].bg-muted {
    border: 0;
    outline: 0;
  }
}

/* ---------- glass needs a solid fallback ---------- */
@media (prefers-reduced-transparency: reduce) {
  body:has([data-testid="booker-container"], [data-testid="name-title"], [data-testid="success-page"], [data-testid="404-page"]) *::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* A9/C4: the dark tokens are `.dark body:has(...)`, one class heavier than the plain scope, so the override must be
     declared under both scopes (later in source, same specificity) to win in dark as well */
  :is(body, .dark body):has([data-testid="booker-container"], [data-testid="name-title"], [data-testid="success-page"], [data-testid="404-page"]) {
    --ax-glass: var(--ax-solid);
    --ax-shell: transparent;
    --ax-field: var(--ax-solid);
    --ax-slot: var(--ax-solid);
  }
}

/* ---------- R6 alignment sweep (perf-r6/before, after) ---------- */
body:has([data-testid="booker-container"]) {
  /* duration capsule: pills hug their label (a stretched grid item left "2h" / "3h" 20 px of dead space on the right and put
     the selected pill off-centre under its label); columns still line up, rows are left-aligned */
  & [data-testid="event-meta"] ul.no-scrollbar:has(> li:nth-child(5)) {
    justify-items: start;
  }
  /* the clock sits on the first row's centre line (row 3 px pad + 16 px = 19 px; icon is 16 px) */
  & [data-testid="event-meta"] div.flex.items-center:has(> svg + div div.border-default > ul.no-scrollbar) > svg {
    margin-top: 12px;
  }
  /* timezone row: the select's 8 px inner padding pushed "Europe/Paris" 6-9 px right of the other rows' text, and its
     36 px control put the label 4 px below the globe */
  & [data-testid="event-meta"] [data-testid="timezone-select"] > div {
    padding-left: 0;
  }
  & [data-testid="event-meta"] div.flex.items-start:has(.current-timezone) > svg {
    margin-top: 6px;
  }
  /* week/column header: the layout switcher (44 px less its 2 px pad) hung from the top of the row, 3 px above 12h/24h */
  & [data-testid="booker-container"] [class~="[grid-area:header]"].sticky .ml-auto.flex.gap-2 {
    align-items: center;
  }
  /* sidebar month (week/column): same 28 px gutter as the host column above it, not 20 px (phone keeps 20: its host column is 21) */
  @media (min-width: 768px) {
    & [class~="[grid-area:meta]"] div.mt-auto.px-5 {
      padding-inline: 28px;
    }
  }
}

/* ---------- R6 perf: Firefox (measured, perf-r6/) ----------
   Firefox re-blurs the booker's full-size glass (backdrop-filter: blur(24px)) behind every hover, scroll step and
   transition frame: p95 50-180 ms at 1280x800 @2x, against 17 ms with the theme off. The page behind is a static
   gradient, so the same translucent tint without the blur reads the same. Chromium keeps the blur. */
@supports (-moz-appearance: none) {
  body:has([data-testid="booker-container"], [data-testid="name-title"], [data-testid="success-page"], [data-testid="404-page"]) *::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}