/*
 * lead-form.css — Soft Product UI lead form for Van Thats Quick.
 *
 * Design language: Ben's Soft Product system (~/design-language) — type scale,
 * ink ladder, radii, motion curves and dark ladder are the locked tokens.
 * Palette is VTQ's own (primary lime #a3e635) rather than the system's default
 * soft blue, per project brief.
 *
 * Self-contained plain CSS on purpose: the site's Tailwind build (`npm run
 * build:css`) purges against ./**\/*.html, and a token-locked 12/13/14/24 type
 * scale fights Tailwind's default scale. Keeping this standalone means the
 * component cannot be broken by a missed rebuild.
 */

.vtq-lf {
  /* Layout responds to the CONTAINER, not the viewport — the same component
     renders full-width in a section and ~380px in the hero column, and on a
     wide desktop a viewport query would wrongly give the hero column the wide
     layout. */
  container-type: inline-size;
  container-name: vtqlf;

  /* --- Soft Product locked tokens --- */
  --lf-ink: #292929;
  --lf-ink-muted: #5d5d5d;
  --lf-ink-faint: #9e9e9e;
  --lf-surface: #ffffff;
  --lf-surface-subtle: #f7f7f7;
  --lf-surface-hover: #f3f3f3;
  --lf-border: #e5e5e5;

  /* --- VTQ palette (project brief overrides the system's soft blue) --- */
  --lf-accent: #a3e635;
  --lf-accent-strong: #84cc16;
  --lf-accent-ink: #1a2e05;
  --lf-accent-soft: #f2fbe3;
  --lf-accent-ring: rgba(163, 230, 53, 0.45);

  --lf-success: #22c55e;
  --lf-danger: #dc2626;

  /* --- Radii (8 nav / 16 card / pill CTA) --- */
  --lf-r-nav: 8px;
  --lf-r-card: 16px;
  --lf-r-pill: 9999px;

  /* --- Elevation --- */
  --lf-shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.06);
  --lf-shadow-float: 0 12px 40px rgba(0, 0, 0, 0.08);

  /* --- Motion (named tokens — never invented per project) --- */
  --lf-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --lf-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --lf-dur-instant: 150ms;
  --lf-dur-quick: 200ms;
  --lf-dur-enter: 340ms;
  --lf-dur-exit: 260ms;
  --lf-stagger: 26ms;

  font-family: "SF Pro Text", "SF Pro Display", "SF Pro", -apple-system,
    BlinkMacSystemFont, Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.15px;
  color: var(--lf-ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.dark .vtq-lf {
  --lf-ink: #ededed;
  --lf-ink-muted: #a5a5a5;
  --lf-ink-faint: #767676;
  --lf-surface: #171717;
  --lf-surface-subtle: #0f0f0f;
  --lf-surface-hover: #1f1f1f;
  --lf-border: #2a2a2a;
  --lf-accent-ink: #1a2e05;
  --lf-accent-soft: rgba(163, 230, 53, 0.1);
  --lf-shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.4);
  --lf-shadow-float: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------- shell -- */

.vtq-lf * {
  box-sizing: border-box;
}

.vtq-lf-shell {
  background: var(--lf-surface);
  border: 1px solid var(--lf-border);
  border-radius: 24px;
  box-shadow: var(--lf-shadow-soft);
  overflow: hidden;
  max-width: 640px;
  margin: 0 auto;
}

.vtq-lf-head {
  padding: 28px 28px 0;
}

.vtq-lf-title {
  font-size: 24px;
  font-weight: 500;
  color: var(--lf-ink);
  margin: 0 0 6px;
  letter-spacing: -0.15px;
  line-height: 1.25;
}

.vtq-lf-sub {
  font-size: 13px;
  color: var(--lf-ink-muted);
  margin: 0;
}

/* ------------------------------------------------------------ step rail -- */
/* shadcn `progress` semantics (role=progressbar + aria-valuenow), Soft
   Product chrome: a quiet 3-dot rail rather than a heavy wizard header. */

.vtq-lf-rail {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 28px 0;
}

.vtq-lf-rail-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.vtq-lf-dot {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: var(--lf-r-pill);
  border: 1.5px solid var(--lf-border);
  background: var(--lf-surface);
  color: var(--lf-ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background var(--lf-dur-instant) var(--lf-ease-out),
    border-color var(--lf-dur-instant) var(--lf-ease-out),
    color var(--lf-dur-instant) var(--lf-ease-out);
}

.vtq-lf-track {
  height: 2px;
  flex: 1;
  border-radius: var(--lf-r-pill);
  background: var(--lf-border);
  overflow: hidden;
}

.vtq-lf-track span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--lf-accent);
  transition: width var(--lf-dur-enter) var(--lf-ease-out);
}

.vtq-lf-rail-step[data-state="active"] .vtq-lf-dot {
  border-color: var(--lf-accent-strong);
  background: var(--lf-accent);
  color: var(--lf-accent-ink);
}

.vtq-lf-rail-step[data-state="done"] .vtq-lf-dot {
  border-color: var(--lf-accent-strong);
  background: var(--lf-accent);
  color: var(--lf-accent-ink);
}

.vtq-lf-rail-step[data-state="done"] .vtq-lf-track span {
  width: 100%;
}

/* Specificity note: the generic `.vtq-lf .lm { display:inline-block }` rule
   lives further down the file, so these need the extra `.vtq-lf` to win.
   A done step swaps its number for the tick — never shows both. */
.vtq-lf .vtq-lf-dot .lm {
  display: none;
}

.vtq-lf .vtq-lf-rail-step[data-state="done"] .vtq-lf-dot .lm {
  display: block;
}

.vtq-lf .vtq-lf-rail-step[data-state="done"] .vtq-lf-dot .vtq-lf-dot-n {
  display: none;
}

/* ----------------------------------------------------------- step body -- */

.vtq-lf-body {
  padding: 24px 28px 28px;
}

/* Progressive enhancement: without JS every step is visible and the form is
   one long, fully working page. The stepper only engages once lead-form.js has
   set data-enhanced — so a script failure degrades to a usable form rather
   than one stranded on step 1. */
/* Keyed off the data attribute the markup actually carries — the steps are
   structural, not styled objects, so there is no class to hang this on. */
[data-lf-step] {
  display: block;
  margin-bottom: 22px;
}

.vtq-lf[data-enhanced] [data-lf-step] {
  display: none;
  margin-bottom: 0;
}

.vtq-lf[data-enhanced] [data-lf-step][data-active] {
  display: block;
  animation: vtq-lf-rise var(--lf-dur-enter) var(--lf-ease-out) both;
}

/* The rail and the Back/Next pair are meaningless without the stepper. */
.vtq-lf-rail,
.vtq-lf [data-lf-next],
.vtq-lf [data-lf-back] {
  display: none;
}

.vtq-lf[data-enhanced] .vtq-lf-rail {
  display: flex;
}

.vtq-lf[data-enhanced] [data-lf-next],
.vtq-lf[data-enhanced] [data-lf-back] {
  display: inline-flex;
}

@keyframes vtq-lf-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.vtq-lf-legend {
  font-size: 14px;
  font-weight: 500;
  color: var(--lf-ink);
  margin: 0 0 4px;
  padding: 0;
  display: block;
}

.vtq-lf-hint {
  font-size: 12px;
  color: var(--lf-ink-faint);
  margin: 0 0 16px;
}

/* -------------------------------------------------- load size selector -- */
/* shadcn `radio-group` semantics ported to static HTML: a real
   role="radiogroup" with roving aria-checked children, keyboard arrow
   support, and a native hidden input carrying the value on submit. */

.vtq-lf-sizes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 4px;
  align-items: stretch;
}

@container vtqlf (min-width: 470px) {
  .vtq-lf-sizes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.vtq-lf-size {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: 8px;
  padding: 14px 8px 12px;
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-r-card);
  background: var(--lf-surface);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--lf-dur-instant) var(--lf-ease-out),
    background var(--lf-dur-instant) var(--lf-ease-out),
    box-shadow var(--lf-dur-instant) var(--lf-ease-out),
    transform var(--lf-dur-instant) var(--lf-ease-out);
  animation: vtq-lf-rise var(--lf-dur-enter) var(--lf-ease-out) both;
}

.vtq-lf-size:nth-child(1) { animation-delay: 0ms; }
.vtq-lf-size:nth-child(2) { animation-delay: var(--lf-stagger); }
.vtq-lf-size:nth-child(3) { animation-delay: calc(var(--lf-stagger) * 2); }
.vtq-lf-size:nth-child(4) { animation-delay: calc(var(--lf-stagger) * 3); }

.vtq-lf-size:hover {
  border-color: var(--lf-ink-faint);
  background: var(--lf-surface-hover);
}

.vtq-lf-size:focus-visible {
  outline: none;
  border-color: var(--lf-accent-strong);
  box-shadow: 0 0 0 3px var(--lf-accent-ring);
}

.vtq-lf-size[aria-checked="true"] {
  border-color: var(--lf-accent-strong);
  background: var(--lf-accent-soft);
  box-shadow: 0 0 0 1px var(--lf-accent-strong);
}

/* Four real van silhouettes drawn in one shared viewBox at true relative
   scale — the Caddy is visibly smaller than the Luton, so size reads before
   the label does. Static SVG: no SMIL anywhere (see js/lead-form.js). */
.vtq-lf-van {
  width: 44px;
  height: 44px;
  color: var(--lf-ink-faint);
  transition: color var(--lf-dur-instant) var(--lf-ease-out);
}

.vtq-lf-size[aria-checked="true"] .vtq-lf-van {
  color: var(--lf-accent-strong);
}

/* Card internals are a flex column that fills the card, so the price can be
   pushed to the bottom with margin-top:auto. Grid stretches all four cards to
   the tallest, so the price row then lines up across every card regardless of
   how many lines the description wraps to. */
.vtq-lf-size-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}

.vtq-lf-size-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--lf-ink);
  display: block;
}

.vtq-lf-size-desc {
  font-size: 12px;
  color: var(--lf-ink-faint);
  display: block;
  margin-top: 1px;
  line-height: 1.3;
}

.vtq-lf-size-price {
  font-size: 13px;
  font-weight: 500;
  color: var(--lf-ink);
  display: block;
  /* Bottom-aligned and never wrapped — a two-line caption would knock the
     row out of level, which is the whole point of pinning it here. */
  margin-top: auto;
  padding-top: 8px;
  white-space: nowrap;
}

.vtq-lf-size[aria-checked="true"] .vtq-lf-size-desc {
  font-size: 12px;
  color: var(--lf-ink-faint);
  display: block;
  margin-top: 1px;
  line-height: 1.3;
}

.vtq-lf-size-price {
  color: var(--lf-ink);
}

.vtq-lf-size-note {
  font-size: 12px;
  color: var(--lf-ink-faint);
  margin: 12px 0 0;
  text-align: center;
}

/* --------------------------------------------------------------- field -- */
/* Ported shadcn `input` / `label` / `textarea` contract: data-slot hooks,
   3px focus ring, aria-invalid styling, disabled opacity. */

.vtq-lf-fields {
  display: grid;
  gap: 14px;
}

@container vtqlf (min-width: 470px) {
  .vtq-lf-row2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

.vtq-lf-field {
  display: block;
}

.vtq-lf-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--lf-ink);
  margin-bottom: 6px;
  user-select: none;
}

.vtq-lf-label .lm {
  color: var(--lf-ink-faint);
  font-size: 14px;
}

.vtq-lf-opt {
  font-size: 12px;
  font-weight: 400;
  color: var(--lf-ink-faint);
  margin-left: auto;
}

.vtq-lf-input,
.vtq-lf-textarea,
.vtq-lf-select {
  width: 100%;
  min-width: 0;
  font-family: inherit;
  letter-spacing: -0.15px;
  font-size: 14px;
  color: var(--lf-ink);
  background: var(--lf-surface);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-r-nav);
  padding: 10px 12px;
  outline: none;
  transition: border-color var(--lf-dur-instant) var(--lf-ease-out),
    box-shadow var(--lf-dur-instant) var(--lf-ease-out);
  -webkit-appearance: none;
  appearance: none;
}

.vtq-lf-textarea {
  min-height: 76px;
  resize: vertical;
}

.vtq-lf-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e9e9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 34px;
}

.vtq-lf-input::placeholder,
.vtq-lf-textarea::placeholder {
  color: var(--lf-ink-faint);
}

.vtq-lf-input:focus-visible,
.vtq-lf-textarea:focus-visible,
.vtq-lf-select:focus-visible {
  border-color: var(--lf-accent-strong);
  box-shadow: 0 0 0 3px var(--lf-accent-ring);
}

.vtq-lf-input[aria-invalid="true"],
.vtq-lf-textarea[aria-invalid="true"] {
  border-color: var(--lf-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.vtq-lf-err {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--lf-danger);
  margin-top: 5px;
}

.vtq-lf-err[data-show] {
  display: flex;
  animation: vtq-lf-rise var(--lf-dur-quick) var(--lf-ease-out) both;
}

/* ------------------------------------------------------------- summary -- */
/* The running estimate. This is the persuasion surface: it answers "what will
   this cost me" before the customer has to ask, which is the single question
   that otherwise forces a phone call. */

.vtq-lf-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--lf-surface-subtle);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-r-card);
  padding: 12px 14px;
  margin-bottom: 16px;
  animation: vtq-lf-rise var(--lf-dur-enter) var(--lf-ease-out) both;
}

.vtq-lf-summary-k {
  font-size: 12px;
  color: var(--lf-ink-faint);
  display: block;
  margin-bottom: 1px;
}

.vtq-lf-summary-v {
  font-size: 13px;
  color: var(--lf-ink);
  font-weight: 500;
  display: block;
}

.vtq-lf-summary-price {
  font-size: 24px;
  font-weight: 500;
  color: var(--lf-ink);
  white-space: nowrap;
  line-height: 1.1;
}

.vtq-lf-summary-price small {
  font-size: 12px;
  font-weight: 400;
  color: var(--lf-ink-faint);
  display: block;
  text-align: right;
}

/* -------------------------------------------------------------- action -- */

.vtq-lf-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.vtq-lf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.15px;
  border-radius: var(--lf-r-pill);
  padding: 11px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--lf-dur-instant) var(--lf-ease-out),
    border-color var(--lf-dur-instant) var(--lf-ease-out),
    box-shadow var(--lf-dur-instant) var(--lf-ease-out),
    opacity var(--lf-dur-instant) var(--lf-ease-out);
}

.vtq-lf-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--lf-accent-ring);
}

.vtq-lf-btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.vtq-lf-btn-primary {
  background: var(--lf-accent);
  color: var(--lf-accent-ink);
  flex: 1;
}

.vtq-lf-btn-primary:hover {
  background: var(--lf-accent-strong);
}

.vtq-lf-btn-ghost {
  background: transparent;
  color: var(--lf-ink-muted);
  border-color: var(--lf-border);
}

.vtq-lf-btn-ghost:hover {
  background: var(--lf-surface-hover);
  color: var(--lf-ink);
}

/* Same specificity note as the rail dots: the generic `.vtq-lf .lm` rule is
   further down, so these need `.vtq-lf` to win. The spinner is hidden until
   the form is actually submitting. */
.vtq-lf .vtq-lf-btn .lm-loading {
  display: none;
}

.vtq-lf[data-busy] .vtq-lf-btn .lm-loading {
  display: inline-block;
}

.vtq-lf[data-busy] .vtq-lf-btn .lm-next {
  display: none;
}

/* ------------------------------------------------------------ reassure -- */

.vtq-lf-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--lf-border);
}

.vtq-lf-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--lf-ink-faint);
}

.vtq-lf-trust .lm {
  font-size: 14px;
  color: var(--lf-success);
}

.vtq-lf-alt {
  font-size: 12px;
  color: var(--lf-ink-faint);
  text-align: center;
  margin: 14px 0 0;
}

.vtq-lf-alt a {
  color: var(--lf-ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vtq-lf-alt a:hover {
  color: var(--lf-ink);
}

/* --------------------------------------------------------- form status -- */

.vtq-lf-status {
  font-size: 13px;
  margin-top: 12px;
  color: var(--lf-ink-muted);
}

.vtq-lf-status:empty {
  display: none;
}

/* ---------------------------------------------------------- line motion -- */

.vtq-lf .lm {
  display: inline-block;
  line-height: 0;
  flex: 0 0 auto;
}

.vtq-lf .lm svg {
  display: block;
  width: 1em;
  height: 1em;
}

.vtq-lf .lm-nav {
  font-size: 14px;
}

.vtq-lf .lm-card {
  font-size: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .vtq-lf,
  .vtq-lf * {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Submit spinner — a CSS transform, not SMIL. This is the only motion left in
   the component; everything else is a static settled frame. */
@keyframes vtq-lf-spin {
  to {
    transform: rotate(360deg);
  }
}

.vtq-lf .vtq-lf-spin {
  animation: vtq-lf-spin 900ms linear infinite;
  transform-origin: 50% 50%;
}


/* --------------------------------------------------- preferred day + cal -- */
/* Chips answer the common case in one tap. The calendar below is a shadcn
   `calendar` port — its token roles mapped onto Soft Product / VTQ:
   primary -> lime accent, accent -> surface-hover, muted-foreground ->
   ink-faint. Cell size follows shadcn's --cell-size convention. */

.vtq-lf-when {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vtq-lf-chip {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.15px;
  color: var(--lf-ink-muted);
  background: var(--lf-surface);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-r-pill);
  padding: 8px 15px;
  cursor: pointer;
  transition: background var(--lf-dur-instant) var(--lf-ease-out),
    border-color var(--lf-dur-instant) var(--lf-ease-out),
    color var(--lf-dur-instant) var(--lf-ease-out);
}

.vtq-lf-chip:hover {
  background: var(--lf-surface-hover);
  color: var(--lf-ink);
}

.vtq-lf-chip:focus-visible {
  outline: none;
  border-color: var(--lf-accent-strong);
  box-shadow: 0 0 0 3px var(--lf-accent-ring);
}

.vtq-lf-chip[aria-checked="true"] {
  background: var(--lf-accent);
  border-color: var(--lf-accent-strong);
  color: var(--lf-accent-ink);
}

.vtq-lf-when-echo {
  font-size: 12px;
  color: var(--lf-ink-muted);
  margin: 8px 0 0;
}

.vtq-lf-when-echo:empty {
  display: none;
}

.vtq-lf-cal {
  /* shadcn sizes the calendar `w-fit` off --cell-size rather than letting it
     stretch — a full-width grid with aspect-square cells produces enormous
     rows on desktop. Same model here. */
  --cell-size: 40px;
  width: fit-content;
  max-width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-r-card);
  background: var(--lf-surface);
  animation: vtq-lf-rise var(--lf-dur-enter) var(--lf-ease-out) both;
}

.vtq-lf-cal[hidden] {
  display: none;
}

.vtq-lf-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

.vtq-lf-cal-caption {
  font-size: 13px;
  font-weight: 500;
  color: var(--lf-ink);
}

/* shadcn uses its ghost Button for month nav. */
.vtq-lf-cal-nav-btn {
  width: var(--cell-size);
  height: var(--cell-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--lf-r-nav);
  background: transparent;
  color: var(--lf-ink-muted);
  cursor: pointer;
  font-size: 16px;
  transition: background var(--lf-dur-instant) var(--lf-ease-out);
}

.vtq-lf-cal-nav-btn:hover {
  background: var(--lf-surface-hover);
  color: var(--lf-ink);
}

.vtq-lf-cal-nav-btn:focus-visible {
  outline: none;
  border-color: var(--lf-accent-strong);
  box-shadow: 0 0 0 3px var(--lf-accent-ring);
}

.vtq-lf-cal-nav-btn svg {
  width: 16px;
  height: 16px;
}

.vtq-lf-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, var(--cell-size));
}

.vtq-lf-cal-weekdays span {
  font-size: 12px;
  color: var(--lf-ink-faint);
  text-align: center;
  line-height: 24px;
  user-select: none;
}

.vtq-lf-cal-week {
  display: grid;
  grid-template-columns: repeat(7, var(--cell-size));
  margin-top: 2px;
}

.vtq-lf-cal-day {
  width: var(--cell-size);
  height: var(--cell-size);
}

.vtq-lf-cal-daybtn {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.15px;
  color: var(--lf-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--lf-r-nav);
  cursor: pointer;
  transition: background var(--lf-dur-instant) var(--lf-ease-out),
    color var(--lf-dur-instant) var(--lf-ease-out);
}

.vtq-lf-cal-daybtn:hover:not([disabled]) {
  background: var(--lf-surface-hover);
}

.vtq-lf-cal-daybtn:focus-visible {
  outline: none;
  border-color: var(--lf-accent-strong);
  box-shadow: 0 0 0 3px var(--lf-accent-ring);
}

/* shadcn: today -> bg-accent; selected -> bg-primary text-primary-foreground */
.vtq-lf-cal-daybtn[data-today="true"] {
  background: var(--lf-surface-hover);
  font-weight: 500;
}

.vtq-lf-cal-daybtn[data-outside="true"] {
  color: var(--lf-ink-faint);
}

.vtq-lf-cal-daybtn[data-disabled="true"],
.vtq-lf-cal-daybtn[disabled] {
  color: var(--lf-ink-faint);
  opacity: 0.5;
  cursor: default;
}

.vtq-lf-cal-daybtn[data-selected-single="true"] {
  background: var(--lf-accent);
  color: var(--lf-accent-ink);
  font-weight: 500;
}

.vtq-lf-cal-daybtn[data-selected-single="true"]:hover {
  background: var(--lf-accent-strong);
}

@media (max-width: 420px) {
  .vtq-lf-cal {
    --cell-size: 38px;
  }
}

/* Narrow container (hero column): trim the chrome so the form still fits the
   fold without shrinking the tap targets. */
@container vtqlf (max-width: 469px) {
  .vtq-lf-head {
    padding: 22px 20px 0;
  }
  .vtq-lf-body {
    padding: 18px 20px 22px;
  }
  .vtq-lf-rail {
    padding: 16px 20px 0;
  }
  .vtq-lf-size {
    padding: 12px 6px 10px;
  }
  .vtq-lf-cal {
    --cell-size: 36px;
  }
}