/* ptr-booking - PTR Admin Dashboard theme tokens (ported verbatim), Calendly-like
   booking UI. Mobile-first, light+dark (auto + explicit toggle), WCAG AA.

   Ported unchanged from the pre-React web/styles.css (Task 10). Every value here
   is the value that page already shipped; nothing was re-derived. */

/* ---------- Design tokens ---------- */
:root {
  color-scheme: light;

  --brand-cyan: #00b4cb;
  --brand-cyan-400: #27b5d0;
  --brand-cyan-300: #4fc9dd;
  --brand-glow: #83f1f2;
  --brand-lavender: #a57dc3;
  --brand-lavender-2: #979bbe;
  --navy: #0f2435;

  --status-good: #1fae8f;
  --status-watch: #e0a23c;
  --status-act: #e05a5a;

  --text: #22303a;
  --text-muted: #566169;
  --text-faint: #8795a0;
  --white: #ffffff;

  --glass-bg: rgba(255, 255, 255, .5);
  --glass-bg-strong: rgba(255, 255, 255, .72);
  --glass-2: rgba(255, 255, 255, .4);
  --glass-border: rgba(255, 255, 255, .66);
  --hairline: rgba(15, 36, 53, .09);

  --glass-shadow: 0 8px 30px rgba(15, 36, 53, .12), 0 1px 2px rgba(15, 36, 53, .05);
  --glass-shadow-lg: 0 20px 50px rgba(15, 36, 53, .18), 0 2px 6px rgba(15, 36, 53, .08);

  --modal-surface: rgba(255, 255, 255, .96);
  --modal-field-bg: rgba(255, 255, 255, .88);
  --modal-overlay: rgba(6, 13, 22, .62);

  --app-bg:
    radial-gradient(120% 80% at 12% -5%, rgba(131, 241, 242, .42) 0%, transparent 52%),
    radial-gradient(110% 90% at 105% 6%, rgba(165, 125, 195, .26) 0%, transparent 50%),
    linear-gradient(180deg, #f4fbfc 0%, #e3f1f1 56%, #efe9f3 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --white: #0f2435;
    --text: #e9f1f4;
    --text-muted: #9fb1bb;
    --text-faint: #6f818c;

    --glass-bg: rgba(20, 29, 40, .5);
    --glass-bg-strong: rgba(20, 29, 40, .66);
    --glass-2: rgba(40, 52, 68, .4);
    --glass-border: rgba(131, 241, 242, .16);
    --hairline: rgba(131, 241, 242, .1);

    --glass-shadow: 0 10px 36px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .35);
    --glass-shadow-lg: 0 22px 56px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);

    --modal-surface: rgba(14, 24, 34, .97);
    --modal-field-bg: rgba(28, 40, 54, .94);
    --modal-overlay: rgba(3, 8, 14, .72);

    --app-bg:
      radial-gradient(120% 80% at 12% -5%, rgba(0, 180, 203, .22) 0%, transparent 52%),
      radial-gradient(110% 90% at 105% 6%, rgba(165, 125, 195, .2) 0%, transparent 50%),
      linear-gradient(180deg, #0a1420 0%, #0f2435 56%, #15131f 100%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --white: #0f2435;
  --text: #e9f1f4;
  --text-muted: #9fb1bb;
  --text-faint: #6f818c;

  --glass-bg: rgba(20, 29, 40, .5);
  --glass-bg-strong: rgba(20, 29, 40, .66);
  --glass-2: rgba(40, 52, 68, .4);
  --glass-border: rgba(131, 241, 242, .16);
  --hairline: rgba(131, 241, 242, .1);

  --glass-shadow: 0 10px 36px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .35);
  --glass-shadow-lg: 0 22px 56px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);

  --modal-surface: rgba(14, 24, 34, .97);
  --modal-field-bg: rgba(28, 40, 54, .94);
  --modal-overlay: rgba(3, 8, 14, .72);

  --app-bg:
    radial-gradient(120% 80% at 12% -5%, rgba(0, 180, 203, .22) 0%, transparent 52%),
    radial-gradient(110% 90% at 105% 6%, rgba(165, 125, 195, .2) 0%, transparent 50%),
    linear-gradient(180deg, #0a1420 0%, #0f2435 56%, #15131f 100%);
}

:root[data-theme="light"] {
  color-scheme: light;
  --white: #ffffff;
  --text: #22303a;
  --text-muted: #566169;
  --text-faint: #8795a0;

  --glass-bg: rgba(255, 255, 255, .5);
  --glass-bg-strong: rgba(255, 255, 255, .72);
  --glass-2: rgba(255, 255, 255, .4);
  --glass-border: rgba(255, 255, 255, .66);
  --hairline: rgba(15, 36, 53, .09);

  --glass-shadow: 0 8px 30px rgba(15, 36, 53, .12), 0 1px 2px rgba(15, 36, 53, .05);
  --glass-shadow-lg: 0 20px 50px rgba(15, 36, 53, .18), 0 2px 6px rgba(15, 36, 53, .08);

  --modal-surface: rgba(255, 255, 255, .96);
  --modal-field-bg: rgba(255, 255, 255, .88);
  --modal-overlay: rgba(6, 13, 22, .62);

  --app-bg:
    radial-gradient(120% 80% at 12% -5%, rgba(131, 241, 242, .42) 0%, transparent 52%),
    radial-gradient(110% 90% at 105% 6%, rgba(165, 125, 195, .26) 0%, transparent 50%),
    linear-gradient(180deg, #f4fbfc 0%, #e3f1f1 56%, #efe9f3 100%);
}

/* ---------- Base / reset ---------- */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--text);
  background: var(--app-bg);
  background-attachment: fixed;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brand-cyan);
  color: #04212a;
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

a { color: var(--brand-cyan-400); }
a:hover { color: var(--brand-cyan); }

:focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

.page {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
}

/* ---------- Utility ---------- */
[hidden] { display: none !important; }
/* ============================================================================
   THE STAGING20 SITE HEADER.

   Every number and colour in this file was read from staging20.ptrvr.com's LIVE
   served theme CSS + computed styles on 2026-07-17 and is pinned as data in
   tests/test_web_assets.py (STAGING20_HEADER_SPEC). Those pins are asserted
   against the BUILT stylesheet, i.e. this file after `npm --prefix web run
   build`, because the built stylesheet is what ships.

   This bar has been rebuilt twice after regressions. It is a SPEC, not an
   inspiration: if a value here disagrees with the pin, the pin is right.
   Task 10 ported it from the pre-React web/styles.css without changing a single
   value.

   FIXED, like staging20's header (operator 2026-07-16: "booking.ptrvr.com must
   have same sticky header navigation as staging20.ptrvr.com"; 2026-07-17:
   "header is not fixed on booking.ptrvr.com"). body carries the matching
   padding-top per breakpoint because a fixed bar is out of flow.

   Do NOT put overflow-x: clip/hidden on html/body: it silently disables
   position:sticky/fixed descendants (the exact bug that killed ptrvr.com's
   sticky header, see WEB-STICKY-HEADER in siteground-ptrvr-website).
   ============================================================================ */

@font-face {
  /* staging20 loads Outfit from a font CDN; booking self-hosts the same face
     (latin subset, variable 400-700) because this page promises "no
     third-party trackers" - no runtime request to any font CDN. The guard test
     greps for the CDN hostnames, so they are deliberately not written here.
     The file lives in web/public/fonts/ so the build copies it to web/dist/,
     the only directory the container ships. */
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/outfit-latin-400-700.woff2") format("woff2");
}

/* The bar is identical in booking's light and dark themes: staging20 paints
   rgba(0,0,0,.5) over dark page content, which composites to near-black smoke -
   booking pages can be light, so the bar carries that composited colour itself
   instead of trusting what is underneath it. That is why the values below are
   the theme's own constants rather than booking's tokens. */
.site-header {
  position: fixed;                   /* staging20: header is FIXED (operator
                                        2026-07-17: "header is not fixed") */
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: 90px;                      /* staging20: header height 90px */
  padding: 0 40px;                   /* staging20: padding 0 40px */
  display: flex;
  align-items: center;
  background: rgba(9, 13, 20, .94);
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif; /* staging20: outfit */
}

/* The bar is out of flow (fixed), so the document compensates or the toolbar
   starts hidden underneath it. Must track the bar height per breakpoint. */
body { padding-top: 90px; }

.site-header-container {
  width: 100%;
  max-width: 1260px;                 /* staging20: .container max-width 1260px */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* The PTR logo, inlined from the ptrvr.com theme header (base-theme/header.php)
   so booking.ptrvr.com carries the same mark with no extra request and no asset
   to drift. Paths inherit fill from `currentColor`, so the colour is owned by
   this ONE rule. */
.brand-logo {
  display: inline-flex;
  align-items: center;
  color: #27b5d0;  /* staging20 renders the header logo CYAN: its two embedded
                      global .st0 rules collide and the later #27B5D0 wins for
                      all 23 paths (measured live on /about/, 2026-07-17).
                      Reproduce the RENDERED result, not the svg's own white. */
  flex: none;
}

.brand-logo:hover { opacity: .85; }

.brand-logo-svg {
  display: block;
  width: 150px;   /* staging20: figure width 150px -> svg renders 150x50 */
  height: 50px;
}

/* Narrow phones: shrink the mark before anything wraps. */
@media (max-width: 560px) {
  .brand-logo-svg { width: 92px; height: 31px; }
}

/* ============================================================================
   SITE NAV - staging20.ptrvr.com's `menu-principal`, REPRODUCED
   (Operator directive 2026-07-17: "header menu ... still wrong you clobbered
   it together" - the earlier token-themed approximation is superseded; the
   menu must look exactly like staging20's).

   Functional deviations kept (behaviour-identical, a11y-correct, and pinned by
   the tests): group parents are real <button aria-expanded>, not the theme's
   href="#" dead anchors.
   ============================================================================ */

.site-nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;   /* 44px = the minimum comfortable tap target */
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

.site-nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: #fff;   /* the bar is always dark */
  transition: transform .2s ease, opacity .2s ease;
}

.site-nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav-menu {
  display: flex;
  align-items: center;   /* staging20: header nav ul */
  gap: 30px;             /* staging20: li margin-right 30px */
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav-item { position: relative; }

.site-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;              /* staging20: caret margin-left 8px */
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;       /* staging20: 1rem */
  font-weight: 700;      /* staging20: 700 */
  line-height: 1;        /* staging20: line-height 16px */
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;           /* staging20: #fff on the dark bar */
  white-space: nowrap;
  transition: color .5s; /* staging20: transition .5s */
}

.site-nav-link:hover,
.site-nav-link:focus-visible { color: rgb(39, 181, 208); } /* staging20 hover */

/* staging20: hovered PLAIN links get a 2px cyan bar 10px below. Group toggles
   keep their caret ::after instead (same precedence trick as the theme), and
   Shop/Login opt out exactly like the theme does. */
a.site-nav-link::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgb(39, 181, 208);
  opacity: 0;
}

a.site-nav-link:hover::after,
a.site-nav-link:focus-visible::after { opacity: 1; }

.site-nav-item-shop .site-nav-link::after,
.site-nav-item-login .site-nav-link::after { display: none; }

/* staging20: li.nav-login > a { opacity: .92 } */
.site-nav-item-login .site-nav-link { opacity: .92; }

/* staging20: li.nav-shop > a is the cart glyph (font-size 0 keeps the "Shop"
   text as the accessible name; the icon is the theme's own inline SVG). */
.site-nav-item-shop .site-nav-link {
  font-size: 0;
  line-height: 0;
}

.site-nav-item-shop .site-nav-link::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1.6'/%3E%3Ccircle cx='20' cy='21' r='1.6'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") no-repeat 50% / contain;
}

.site-nav-item-shop .site-nav-link:hover::before { opacity: .8; }

/* Caret on the two group toggles (staging20: 6x6px chevron, rotates
   45deg -> -135deg on open). */
.site-nav-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s ease;   /* staging20: .25s */
  opacity: .85;                      /* staging20 */
}

.site-nav-item-group:hover > .site-nav-toggle::after,
.site-nav-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }

.site-nav-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav-sublink {
  display: block;
  text-decoration: none;
  white-space: nowrap;
}

/* ---- Desktop (>=880px): staging20's white hover panels ------------------ */
@media only screen and (min-width: 880px) {
  .site-nav-submenu {
    position: absolute;
    top: calc(100% + 14px);   /* staging20 */
    left: -16px;              /* staging20 */
    min-width: 224px;         /* staging20 */
    padding: 12px 0;          /* staging20 */
    background: #fff;         /* staging20: white panel */
    border-radius: 14px;      /* staging20 */
    box-shadow: 0 20px 46px rgba(40, 41, 43, .18);   /* staging20 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);   /* staging20 */
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    z-index: 9998;            /* staging20 */
  }

  /* staging20's hover bridge: a 16px strip below the toggle so the cursor
     never crosses a dead gap on its way down to the panel. */
  .site-nav-item-group::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 16px;             /* staging20: 16px */
  }

  .site-nav-item-group:hover > .site-nav-submenu,
  .site-nav-item-group:focus-within > .site-nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .22s ease, transform .22s ease;
  }

  .site-nav-sublink {
    padding: 10px 22px;       /* staging20 */
    font-size: .95rem;        /* staging20 */
    font-weight: 600;         /* staging20 */
    text-transform: none;
    color: #28292b;           /* staging20: dark text on the white panel */
  }

  .site-nav-sublink:hover,
  .site-nav-sublink:focus-visible { color: #00b4cb; }   /* staging20 */
}

/* ---- Mobile (<=879px): burger + accordion, on the dark bar --------------- */
@media only screen and (max-width: 879px) {
  .site-header {
    height: auto;
    min-height: 64px;
    padding: 10px 16px;
  }

  /* fixed-bar compensation tracks the mobile bar height; the OPEN menu grows
     the fixed bar downward and overlays the page (staging20 behaviour). */
  body { padding-top: 64px; }

  .site-header-container { flex-wrap: wrap; }

  .site-nav-burger { display: flex; }

  .site-nav {
    display: none;
    order: 10;          /* drop below the logo row inside the container */
    width: 100%;
    padding: 6px 0 10px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }

  .site-nav.is-open { display: block; }

  .site-nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav-item { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .site-nav-item:last-child { border-bottom: 0; }

  .site-nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 13px 2px;   /* generous row height - this is a thumb target */
  }

  /* the 2px hover bar is a desktop affordance */
  a.site-nav-link::after { display: none; }

  /* Accordion: closed by default, opened by the toggle's aria-expanded. */
  .site-nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .22s ease;
  }

  .site-nav-toggle[aria-expanded="true"] + .site-nav-submenu { max-height: 420px; }

  .site-nav-sublink { padding: 10px 12px; color: rgba(255, 255, 255, .75); }

  .site-nav-sublink:hover,
  .site-nav-sublink:focus-visible { color: #fff; }
}

/* Respect reduced motion: no caret spin or panel slide. */
@media (prefers-reduced-motion: reduce) {
  .site-nav-burger span,
  .site-nav-toggle::after,
  .site-nav-submenu { transition: none; }
}
/* Booking's own surfaces: toolbar, calendar, slots, form, confirmation.
   Ported verbatim from the pre-React web/styles.css (Task 10) - these are the
   values that page already shipped.

   Deliberately NOT the staging20 bar (see header.css). staging20's bar carries
   ONLY logo + menu; booking's own controls (back, tagline, timezone, theme) sit
   in the toolbar row inside the page column. Cramming them into the bar is what
   made the earlier port read as clobbered. */

/* ---------- Booking toolbar ---------- */
.booking-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0 2px;
}

.booking-toolbar .brand-tagline {
  flex: 1;
  min-width: 0;
}

/* Back to wherever the user came from. It is navigation, not a form control
   (the form's own "Back" is #backToTimes inside the card), and since Task 11 it
   is a real <a href> to an already-resolved target rather than a <button> that
   walked the session history backwards. Every value below is the one the button
   already shipped; only text-decoration is new, and it is what keeps the pixels
   identical - an <a href> picks up the UA underline that a <button> never had. */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  padding: 6px 10px 6px 7px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--glass-bg-strong);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  min-height: 36px;
}

.btn-back:hover {
  border-color: var(--brand-cyan);
  color: var(--brand-cyan);
}

.back-chevron {
  font-size: 1.15rem;
  line-height: 1;
  margin-top: -2px;
}

.brand-tagline {
  margin: 0;
  font-size: .85rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Narrow phones: keep the back button, drop the tagline and the back button's
   text label before anything wraps or truncates awkwardly. */
@media (max-width: 560px) {
  .brand-tagline { display: none; }
}

@media (max-width: 400px) {
  .back-label { display: none; }
  .btn-back { padding: 6px 8px; }
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.field-label {
  display: block;
  font-size: .72rem;
  color: var(--text-faint);
  margin-bottom: 2px;
}

.tz-picker select {
  font: inherit;
  font-size: .85rem;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--glass-bg-strong);
  color: var(--text);
  max-width: 46vw;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--glass-bg-strong);
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.icon-btn:hover { border-color: var(--brand-cyan); color: var(--brand-cyan-400); }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }

.theme-toggle .theme-icon { font-size: 1.05rem; }

/* ---------- Glass surfaces ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.booking-card {
  padding: 18px;
  position: relative;
  min-height: 320px;
}

/* ---------- Banners / states ---------- */
.banner {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: .9rem;
  margin-bottom: 12px;
}
.banner-error {
  background: color-mix(in srgb, var(--status-act) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-act) 40%, transparent);
  color: var(--text);
}
.banner-loading {
  color: var(--text-muted);
}
.banner[hidden] { display: none; }

/* ---------- Booking layout ---------- */
.booking-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 760px) {
  .booking-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .calendar-panel {
    border-right: 1px solid var(--hairline);
    padding-right: 20px;
  }
}

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

.panel-head h2, .slots-panel h2 {
  margin: 0;
  font-size: 1.05rem;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.month-label {
  font-size: .88rem;
  color: var(--text-muted);
  min-width: 9ch;
  text-align: center;
}

.weekday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}
.weekday-row span {
  text-align: center;
  font-size: .72rem;
  color: var(--text-faint);
  font-weight: 600;
}

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

.cal-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  position: relative;
}
.cal-day.outside-month { color: var(--text-faint); opacity: .5; }
.cal-day.has-slots {
  background: var(--glass-2);
  border-color: var(--hairline);
  font-weight: 600;
}
.cal-day.has-slots::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-cyan);
}
.cal-day.has-slots:hover:not(:disabled) {
  border-color: var(--brand-cyan);
  color: var(--brand-cyan-400);
}
.cal-day.selected {
  background: var(--brand-cyan);
  color: #04212a;
  font-weight: 700;
}
.cal-day.selected::after { background: #04212a; }
.cal-day.is-today:not(.selected) { border-color: var(--brand-lavender); }
.cal-day:disabled {
  cursor: not-allowed;
  color: var(--text-faint);
  opacity: .4;
}

.cal-status {
  margin: 8px 2px 0;
  min-height: 1.2em;
  font-size: .85rem;
  color: var(--text-muted);
}

.step-breadcrumb {
  margin: 0 0 8px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--brand-cyan-400);
}

.slots-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 2px;
}

.slot-btn {
  padding: 10px 8px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--glass-bg-strong);
  color: var(--text);
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
}
.slot-btn:hover { border-color: var(--brand-cyan); color: var(--brand-cyan-400); }
.slot-btn.selected {
  background: var(--brand-cyan);
  border-color: var(--brand-cyan);
  color: #04212a;
  font-weight: 700;
}

.empty-note {
  color: var(--text-muted);
  font-size: .9rem;
  margin: 8px 2px;
}

/* ---------- Form ---------- */
.lead-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chosen-slot {
  margin: -4px 0 4px;
  color: var(--text-muted);
  font-size: .9rem;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 460px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.field { display: flex; flex-direction: column; gap: 4px; }

.field label, legend {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
}

.req { color: var(--status-act); }
.optional { color: var(--text-faint); font-weight: 400; }

input[type="text"], input[type="email"], input[type="tel"], input:not([type]), textarea, select {
  font: inherit;
  font-size: .95rem;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--modal-field-bg);
  color: var(--text);
  width: 100%;
}
textarea { resize: vertical; min-height: 72px; }

input:focus, textarea:focus, select:focus {
  border-color: var(--brand-cyan);
}

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--status-act);
}

.field-error, .form-error {
  margin: 0;
  min-height: 1.1em;
  font-size: .8rem;
  color: var(--status-act);
}

.field-hint {
  margin: 0;
  font-size: .78rem;
  color: var(--text-faint);
}

.meeting-type-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.meeting-type-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--glass-bg-strong);
  cursor: pointer;
  font-size: .9rem;
}
.meeting-type-option:has(input:checked) {
  border-color: var(--brand-cyan);
  color: var(--brand-cyan-400);
  background: color-mix(in srgb, var(--brand-cyan) 12%, var(--glass-bg-strong));
}
.meeting-type-option input { width: auto; margin: 0; }

.turnstile-wrap { margin-top: 4px; }

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
  flex-wrap: wrap;
}

.btn {
  font: inherit;
  font-weight: 700;
  font-size: .92rem;
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-cyan-400) 100%);
  color: #04212a;
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; filter: none; }
.btn-secondary {
  background: var(--glass-2);
  color: var(--text);
  border-color: var(--hairline);
}
.btn-secondary:hover { border-color: var(--brand-cyan); }

/* Availability retry control - the calendar status line's own affordance. */
.add-window-btn {
  align-self: flex-start;
  background: transparent;
  border: 1px dashed var(--hairline);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: .82rem;
  cursor: pointer;
}
.add-window-btn:hover { border-color: var(--brand-cyan); color: var(--brand-cyan-400); }

/* ---------- Confirmation ---------- */
.confirm-view {
  text-align: center;
  padding: 24px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--status-good) 20%, transparent);
  color: var(--status-good);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 4px;
}
.confirm-when { font-size: 1.05rem; font-weight: 600; }
.confirm-detail { margin: 6px 0; }
.confirm-note { color: var(--text-muted); font-size: .88rem; max-width: 40ch; }

/* The .site-footer rules were removed with the footer itself (Task 11): the
   operator asked for both of the lines it carried off the page, so the element
   is gone and these rules had no element left to style. */