/* ==========================================================================
   Components – reusable primitives shared by every page
   --------------------------------------------------------------------------
   Order: icons · eyebrow · section head · links · buttons · fields · notes ·
          skip link · header · mobile navigation · footer
   ========================================================================== */

/* ------------------------------------------------------------------ icons */

.icon {
  display: block;
  flex: none;
  width: 0.875rem;   /* 14px – the arrow size used across the design */
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--field {
  width: 1.125rem;
  height: 1.125rem;
  stroke: var(--color-text-muted);
  stroke-width: 1.25;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------------------------------------------------------------- eyebrow */

.eyebrow {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold-deep);
}

.surface-ink .eyebrow,
.surface-ink-raised .eyebrow,
.eyebrow--on-ink {
  color: var(--color-gold-light);
}

/* ----------------------------------------------------------- section head */

.section-head__title {
  margin-block-start: var(--space-sm);
}

.section-head__lead {
  font-size: var(--font-size-lead);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}

.surface-ink .section-head__lead,
.surface-ink-raised .section-head__lead {
  color: var(--color-text-on-ink-muted);
}

/* ------------------------------------------------------------------ links */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
}

.link-arrow .icon {
  transition: transform var(--transition-base);
}

.link-arrow:hover .icon,
.link-arrow:focus-visible .icon {
  transform: translateX(3px);
}

.link-arrow--on-ink {
  color: var(--color-text-on-ink);
}

.link-arrow--on-ink:hover {
  color: var(--color-text-on-ink);
}

/* Text link with the fine champagne rule underneath. */
.link-rule {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding-block-end: var(--space-3xs);
  border-block-end: var(--border-width-hairline) solid var(--color-gold);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
}

.link-rule .icon {
  transition: transform var(--transition-base);
}

.link-rule:hover .icon,
.link-rule:focus-visible .icon {
  transform: translateX(3px);
}

/* ---------------------------------------------------------------- buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 2.75rem;         /* 44px – touch target */
  padding: 1.0625rem 1.25rem;
  border: var(--border-width-hairline) solid transparent;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-align: center;
  transition: background-color var(--transition-base), border-color var(--transition-base),
    color var(--transition-base);
}

.button--primary {
  background-color: var(--color-ink);
  color: var(--color-text-on-ink);
}

.button--primary:hover {
  background-color: var(--color-ink-hover);
  color: var(--color-text-on-ink);
}

.button--primary .icon {
  stroke: var(--color-gold-light);
}

.button--gold {
  background-color: var(--color-gold-light);
  color: var(--color-ink);
}

.button--gold:hover {
  background-color: var(--color-gold-light-hover);
  color: var(--color-ink);
}

.button--gold .icon {
  stroke: var(--color-ink);
}

/* Outline on ink – used by the header CTA. */
.button--outline-light {
  border-color: var(--color-border-on-ink-control);
  color: var(--color-text-on-ink);
  font-size: var(--font-size-sm);
  padding: 0.75rem 1.25rem;
}

.button--outline-light:hover {
  background-color: var(--color-text-on-ink);
  border-color: var(--color-text-on-ink);
  color: var(--color-ink);
}

/* Quieter outline on ink – used by the secondary contact actions. */
.button--outline-subtle {
  border-color: var(--color-border-on-ink-strong);
  color: var(--color-text-on-ink);
  padding: 1.125rem 1.25rem;
  gap: 0.625rem;
}

.button--outline-subtle:hover {
  border-color: var(--color-text-on-ink);
  color: var(--color-text-on-ink);
}

.button--block {
  width: 100%;
}

/* ----------------------------------------------------------------- fields */
/*
  Enquiry field primitive. The approved booking module shows a label above a
  large value; in production the value is a real form control that keeps the
  same visual weight.
*/

.field {
  display: flex;
  gap: var(--space-xs);
  min-width: 0;
  padding: var(--space-md) 1.375rem;
}

.field__icon {
  margin-block-start: 0.125rem;
}

.field__body {
  min-width: 0;
  flex: 1;
}

.field__label {
  display: block;
  margin-block-end: var(--space-2xs);
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.field__control {
  width: 100%;
  /* Extends the pointer target into the field padding without moving it. */
  padding: 0 0 0.625rem;
  margin-block-end: -0.625rem;
  border: 0;
  background-color: transparent;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  color: var(--color-text-strong);
  text-overflow: ellipsis;
}

.field__control::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.field__control:focus {
  outline: none;
}

/* The whole field lights up when its control has keyboard focus, so the
   focus indicator is never a hairline inside a dense row. */
.field:has(.field__control:focus-visible) {
  outline: 2px solid var(--color-gold);
  outline-offset: -2px;
}

.field__control--numeric {
  font-variant-numeric: tabular-nums;
}

/*
  Error state. A hairline inside the field marks it without competing with the
  focus ring, so both can be visible at the same time.
*/
.field.is-invalid {
  box-shadow: inset 0 0 0 1px var(--color-error);
}

.field__error {
  display: block;
  margin-block-start: var(--space-3xs);
  font-size: var(--font-size-3xs);
  line-height: 1.35;
  color: var(--color-error);
}

/* A control that shares its line with a derived value (e.g. a duration). */
.field__value-row {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  min-width: 0;
}

.field__value-row .field__control {
  flex: 0 1 auto;
  width: auto;
}

select.field__control {
  appearance: none;
  cursor: pointer;
}

.field--select {
  justify-content: space-between;
  align-items: flex-start;
}

.field__chevron {
  align-self: center;
  width: 0.875rem;
  height: 0.875rem;
  stroke: var(--color-text-muted);
  stroke-width: 1.25;
}

/* ------------------------------------------------------------------ notes */

.note {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-text);
  color: var(--color-text-muted);
}

.note--on-ink {
  color: var(--color-text-on-ink-faint);
}

/* Replaces the prototype submit control where JavaScript is unavailable and
   the form therefore cannot be sent. Only ever rendered inside <noscript>. */
.note--noscript {
  margin-block-start: var(--space-xs);
  max-width: 28rem;
}

/* Prototype-only scaffolding notice (no backend in this phase). */
.note--prototype {
  margin: 0;
  padding: var(--space-xs) 1.375rem var(--space-sm);
  border-block-start: var(--border-width-hairline) solid var(--color-border);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------ fleet card */
/*
  Vehicle card with its specification list. Used by the homepage fleet preview
  and by the Fuhrpark overview, so it lives with the shared components.
*/


.fleet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
  margin-block-start: var(--section-head-gap);
}

.fleet-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface-card);
}

.fleet-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--gradient-photo-cool);
  overflow: hidden;
}

.fleet-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fleet-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.75rem 1.75rem 1.875rem;
}

.fleet-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-block-end: var(--space-md);
}

.fleet-card__title {
  margin: 0;
  font-size: var(--font-size-heading-sm);
}

.fleet-card__type {
  flex: none;
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
}

.fleet-specs {
  margin: 0;
}

.fleet-specs__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 0.6875rem;
  border-block-start: var(--border-width-hairline) solid var(--color-border-cool);
}

.fleet-specs__row:last-child {
  border-block-end: var(--border-width-hairline) solid var(--color-border-cool);
}

.fleet-specs__label {
  flex: none;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.fleet-specs__value {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-strong);
  text-align: end;
}

.fleet-card__cta {
  margin-block-start: auto;
  padding-block-start: var(--space-lg);
}

@media (max-width: 479px) {
  .fleet-specs__row {
    flex-direction: column;
    gap: 0.125rem;
  }

  .fleet-specs__value {
    text-align: start;
  }
}

@media (min-width: 680px) {
  .fleet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .fleet-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Optional positioning line under the vehicle name (Fuhrpark overview). */
.fleet-card__tagline {
  margin: var(--space-2xs) 0 var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gold-deep);
}

/* -------------------------------------------------------------- skip link */

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-sm);
  inset-block-start: var(--space-sm);
  z-index: var(--z-skip-link);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-ink);
  color: var(--color-text-on-ink);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transform: translateY(-200%);
  transition: transform var(--transition-base);
}

.skip-link:focus-visible {
  color: var(--color-text-on-ink);
  transform: translateY(0);
}

/* ----------------------------------------------------------------- header */
/*
  The approved design places the header over the hero with no background.
  It is fixed so that the navigation stays reachable on long pages; once the
  user scrolls away from the top it picks up the Ink surface. Composition,
  spacing and type are unchanged from the approved design.
*/

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  background-color: transparent;
  border-block-end: var(--border-width-hairline) solid var(--color-border-on-ink-hairline);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  height: var(--header-height-compact);
}

.site-header--scrolled,
.site-header--menu-open {
  background-color: var(--color-ink);
  border-block-end-color: var(--color-border-on-ink);
}

/* Pages without a dark hero use the solid variant from the start. */
.site-header--solid {
  background-color: var(--color-ink);
}

/*
  Light variant – for a page that opens on a warm surface instead of a dark
  photograph (Kontakt & Anfrage). It only applies while the header is at rest:
  as soon as it is scrolled or the mobile panel is open, the shared ink state
  above wins again, so the transition between both states is the existing one.

  The brand link may carry a second, decorative wordmark for this variant. It
  is cross-faded rather than toggled with `display`, so the labelled image
  never leaves the accessibility tree.
*/
.site-header--light:not(.site-header--scrolled):not(.site-header--menu-open) {
  background-color: var(--color-surface);
  border-block-end-color: var(--color-border-warm);
}

.site-header--light:not(.site-header--scrolled):not(.site-header--menu-open) .site-header__nav-link {
  color: var(--color-text);
}

.site-header--light:not(.site-header--scrolled):not(.site-header--menu-open) .site-header__nav-link:hover,
.site-header--light:not(.site-header--scrolled):not(.site-header--menu-open) .site-header__nav-link[aria-current] {
  color: var(--color-text-strong);
}

.site-header--light:not(.site-header--scrolled):not(.site-header--menu-open) .site-header__cta {
  border-color: var(--color-ink);
  color: var(--color-text-strong);
}

.site-header--light:not(.site-header--scrolled):not(.site-header--menu-open) .site-header__cta:hover {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-text-on-ink);
}

.site-header--light:not(.site-header--scrolled):not(.site-header--menu-open) .nav-toggle {
  color: var(--color-text-strong);
}

.site-header--light:not(.site-header--scrolled):not(.site-header--menu-open) .nav-toggle__bar {
  background-color: var(--color-text-strong);
}

.site-header--light:not(.site-header--scrolled):not(.site-header--menu-open) :focus-visible {
  outline-color: var(--color-gold);
}

.site-header__brand {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
}

/* Second wordmark, only present on pages that use the light variant. */
.site-header__logo--alt {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  margin-block-start: -1.0625rem;   /* half of the 34px logo box */
  opacity: 0;
  transition: opacity var(--transition-base);
}

.site-header--light:not(.site-header--scrolled):not(.site-header--menu-open) .site-header__logo--alt {
  opacity: 1;
}

.site-header--light:not(.site-header--scrolled):not(.site-header--menu-open) .site-header__logo:not(.site-header__logo--alt) {
  opacity: 0;
}

.site-header__logo:not(.site-header__logo--alt) {
  transition: opacity var(--transition-base);
}

/*
  The logo PNG carries a large transparent margin, so the wordmark is framed
  by a fixed box and `object-fit: cover` rather than scaled as a whole.
  Box ratios match the 210 x 48 logo area of the approved header.
*/
.site-header__logo {
  width: 9.375rem;   /* 150px */
  height: 2.125rem;  /* 34px  */
  object-fit: cover;
}

.site-header__nav {
  display: none;
}

.site-header__nav-list {
  display: flex;
  align-items: center;
  /* Tighter just above the breakpoint so the navigation and the CTA fit on
     one line at 1024px; the approved 36px spacing returns from 1200px up. */
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1200px) {
  .site-header__nav-list {
    gap: 2.25rem;
  }
}

.site-header__nav-link {
  display: block;
  padding-block: var(--space-2xs);
  font-size: 0.90625rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-on-ink-strong);
}

.site-header__nav-link:hover {
  color: var(--color-text-on-ink);
}

.site-header__nav-link[aria-current] {
  color: var(--color-text-on-ink);
  box-shadow: inset 0 -1px 0 0 var(--color-gold);
}

.site-header__cta {
  display: none;
  flex: none;
  white-space: nowrap;
}

/* ----------------------------------------------------- navigation toggle */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-end: -0.625rem;
  color: var(--color-text-on-ink);
}

.nav-toggle__box {
  display: block;
  position: relative;
  width: 1.375rem;
  height: 0.75rem;
}

.nav-toggle__bar {
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background-color: currentColor;
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

.nav-toggle__bar:nth-child(1) { inset-block-start: 0; }
.nav-toggle__bar:nth-child(2) { inset-block-start: 50%; }
.nav-toggle__bar:nth-child(3) { inset-block-start: 100%; }

.site-header--menu-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(0.375rem) rotate(45deg);
}

.site-header--menu-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.site-header--menu-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-0.375rem) rotate(-45deg);
}

/* ------------------------------------------------------ navigation panel */

.nav-panel {
  position: fixed;
  inset: var(--header-height-compact) 0 0;
  z-index: var(--z-nav-panel);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2xl);
  padding: var(--space-2xl) 0 var(--space-3xl);
  background-color: var(--color-ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  /*
    Visibility switches in one step: immediately when the panel opens, so it
    is focusable right away, and only after the fade when it closes.
  */
  transition: opacity var(--transition-base), visibility 0s linear var(--duration-base);
}

.nav-panel[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition-base), visibility 0s linear 0s;
}

.nav-panel__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-panel__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 1.125rem;
  border-block-end: var(--border-width-hairline) solid var(--color-border-on-ink);
  font-family: var(--font-display);
  font-size: var(--font-size-heading-md);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-on-ink);
}

.nav-panel__link:hover {
  color: var(--color-text-on-ink);
}

.nav-panel__link[aria-current] {
  color: var(--color-gold-light);
}

.nav-panel__link .icon {
  color: var(--color-text-on-ink-faint);
}

.nav-panel__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ------------------------------------------------------------- desktop nav */

@media (min-width: 1024px) {
  .site-header__inner {
    height: var(--header-height);
  }

  .site-header__logo {
    width: 13.125rem;  /* 210px – the logo box of the approved header */
    height: 3rem;      /* 48px  */
  }

  .site-header__nav {
    display: block;
  }

  .site-header__cta {
    display: inline-flex;
  }

  .nav-toggle {
    display: none;
  }

  .nav-panel {
    display: none;
  }
}

/* ----------------------------------------------------------------- footer */

.site-footer {
  padding-block: var(--space-5xl) var(--space-2xl);
  border-block-start: var(--border-width-hairline) solid var(--color-border-on-ink-faint);
  background-color: var(--color-ink);
  color: var(--color-text-on-ink-soft);
}

.site-footer__brand-name {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-on-ink);
}

.site-footer__brand-text {
  max-width: 19rem;
  margin-block-start: var(--space-sm);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.62);
}

.site-footer__contact {
  margin-block-start: 1.75rem;
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  color: rgba(255, 255, 255, 0.62);
  font-style: normal;
}

.site-footer__nav-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--grid-gap);
  margin-block-start: var(--space-3xl);
}

.site-footer__nav-title {
  margin-block-end: var(--space-md);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-footer-label);
  text-transform: uppercase;
  color: var(--color-text-on-ink-faint);
}

.site-footer__nav-list {
  display: flex;
  flex-direction: column;
  /* The link padding below carries the remaining half of the 12px rhythm. */
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-base);
}

.site-footer__nav-link {
  display: block;
  padding-block: 0.1875rem;
  color: rgba(255, 255, 255, 0.82);
}

.site-footer__nav-link:hover {
  color: var(--color-text-on-ink);
}

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block-start: var(--space-4xl);
  padding-block-start: var(--space-md);
  border-block-start: var(--border-width-hairline) solid var(--color-border-on-ink-faint);
  font-size: var(--font-size-xs);
  color: var(--color-text-on-ink-faint);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__legal a {
  display: block;
  padding-block: var(--space-3xs);
  margin-block: calc(-1 * var(--space-3xs));
}

.site-footer__legal a:hover {
  color: var(--color-text-on-ink);
}

@media (min-width: 768px) {
  .site-footer__nav-groups {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .site-footer__nav-groups {
    margin-block-start: 0;
  }
}

/* ------------------------------------------------------- date/time picker */

/*
  Popover of js/date-time-picker.js. It never exists without JavaScript, so
  there is no closed state to style. Fixed to the viewport and appended to the
  body: opening it moves nothing on the page, and no clipping or transformed
  ancestor can cut it off. The square hairline language of the booking module
  is kept – no rounded card, no blur, no browser calendar blue.
*/
.picker {
  position: fixed;
  z-index: var(--z-picker);
  inset-block-start: 0;
  inset-inline-start: 0;
  max-width: calc(100vw - 1rem);
  max-height: calc(100vh - 1rem);
  padding: var(--space-sm);
  border: var(--border-width-hairline) solid var(--color-border-warm);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-raised);
  overflow: auto;
  overscroll-behavior: contain;
}

.picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  margin-block-end: var(--space-2xs);
}

.picker__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-strong);
}

.picker__nav {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: var(--border-width-hairline) solid var(--color-border-warm);
  background-color: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.picker__nav:hover {
  background-color: var(--color-surface-warm);
  color: var(--color-text-strong);
}

.picker__nav .icon {
  width: 1rem;
  height: 1rem;
}

.picker__grid {
  border-collapse: collapse;
  table-layout: fixed;
}

.picker__weekday {
  padding-block-end: var(--space-3xs);
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-footer-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.picker__cell {
  padding: 1px;
}

.picker__day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background-color: transparent;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.picker__day:hover {
  background-color: var(--color-surface-warm);
  color: var(--color-text-strong);
}

/* Today is marked, never preselected. */
.picker__day[aria-current="date"] {
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--color-gold);
  color: var(--color-text-strong);
}

.picker__day[aria-pressed="true"] {
  background-color: var(--color-ink);
  color: var(--color-text-on-ink);
}

.picker__times {
  display: grid;
  gap: 1px;
  max-height: 14rem;
  min-width: 7.5rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.picker__time {
  display: block;
  width: 100%;
  padding: var(--space-2xs) var(--space-sm);
  border: 0;
  background-color: transparent;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  text-align: start;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.picker__time:hover {
  background-color: var(--color-surface-warm);
  color: var(--color-text-strong);
}

.picker__time[aria-pressed="true"] {
  background-color: var(--color-ink);
  color: var(--color-text-on-ink);
}

.picker :focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: -2px;
}