/* ============================================
   <xm-date-range /> — preset rail + calendar range picker.

   A field-styled trigger opens an anchored popover (role="dialog") holding a
   vertical preset rail and a calendar grid. The popover surface chrome
   (inverse-surface fill, hairline border, level3 elevation, edge-flip, motion)
   is owned by the composed <xm-overlay> in the `menu` tier; this file styles the
   trigger and the panel that rides inside the overlay body. Inputs are the
   card tier, so all ink is inverse-on-surface (POLICIES 7a).

   Selected endpoints fill with --md-sys-color-primary-container (circular,
   corner-full). The in-range band is a softer translucent coral derived from
   that same container via color-mix (token-only ingredients) so the run between
   the two endpoints reads as one continuous selection. The active preset is a
   solid --md-sys-color-primary pill. Severity is never hue here — no error
   tokens; the invalid-range message is icon + copy (AD-11).

   BEM block: `date-range`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
   Elements: __trigger __icon __value __panel __layout __rail __preset
     __calendar __cal-head __month __nav __grid __weekday __cell __day __sr-only
     __alert __alert-icon __footer __btn.
   Modifiers: __trigger--open · __value--placeholder · __preset--active ·
     __cell--in-range/--start/--end · __day--today/--selected/--muted ·
     __btn--apply.
   ============================================ */

/* ---------- Trigger ---------- */
.date-range__trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 220px;
  padding: var(--s-2) var(--s-3);
  background: var(--md-sys-color-inverse-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-button);
  color: var(--md-sys-color-inverse-on-surface);
  cursor: pointer;
  text-align: start;
  font:
    var(--md-sys-typescale-body-small-weight)
    var(--md-sys-typescale-body-small-size) /
    var(--md-sys-typescale-body-small-line-height)
    var(--md-sys-typescale-body-small-font);
  transition:
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.date-range__trigger:hover { border-color: var(--md-sys-color-outline); }
.date-range__trigger:focus { outline: none; }
.date-range__trigger:focus-visible,
.date-range__trigger--open {
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--xm-state-focus-ring);
}

.date-range__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--xm-color-inverse-on-surface-muted);
}

.date-range__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.date-range__value--placeholder {
  color: var(--xm-color-inverse-on-surface-muted);
}

/* ---------- Panel (rides inside overlay body; no chrome of its own) ---------- */
.date-range__panel {
  display: flex;
  flex-direction: column;
  outline: none;
}

.date-range__layout {
  display: flex;
  gap: var(--s-4);
}

/* ---------- Preset rail ---------- */
.date-range__rail {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 132px;
  padding-inline-end: var(--s-3);
  border-inline-end: 1px solid var(--md-sys-color-outline-variant);
}

.date-range__preset {
  appearance: none;
  text-align: start;
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-inverse-on-surface);
  cursor: pointer;
  font:
    var(--md-sys-typescale-label-large-weight)
    var(--md-sys-typescale-label-large-size) /
    var(--md-sys-typescale-label-large-line-height)
    var(--md-sys-typescale-label-large-font);
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.date-range__preset:hover {
  background: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
}
.date-range__preset:focus { outline: none; }
.date-range__preset:focus-visible { box-shadow: var(--xm-state-focus-ring); }
.date-range__preset--active {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.date-range__preset--active:hover { background: var(--md-sys-color-primary); }

/* ---------- Calendar ---------- */
.date-range__calendar {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.date-range__cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.date-range__month {
  flex: 1;
  text-align: center;
  color: var(--md-sys-color-inverse-on-surface);
  font:
    var(--md-sys-typescale-title-small-weight)
    var(--md-sys-typescale-title-small-size) /
    var(--md-sys-typescale-title-small-line-height)
    var(--md-sys-typescale-title-small-font);
}

.date-range__nav {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--md-sys-shape-corner-extra-small);
  color: var(--xm-color-inverse-on-surface-muted);
  cursor: pointer;
  transition: color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.date-range__nav:hover { color: var(--md-sys-color-inverse-on-surface); }
.date-range__nav:focus { outline: none; }
.date-range__nav:focus-visible { box-shadow: var(--xm-state-focus-ring); }

.date-range__grid {
  display: grid;
  grid-template-columns: repeat(7, 36px);
  gap: 0;
}

/* Row wrappers carry role="row" for the ARIA grid; display:contents keeps the
   columnheaders/gridcells as direct items of the 7-column grid so the visual
   layout is unchanged. */
.date-range__weekdays,
.date-range__week {
  display: contents;
}

.date-range__weekday {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  color: var(--xm-color-inverse-on-surface-muted);
  font:
    var(--md-sys-typescale-label-medium-weight)
    var(--md-sys-typescale-label-medium-size) /
    var(--md-sys-typescale-label-medium-line-height)
    var(--md-sys-typescale-label-medium-font);
}

/* The cell carries the in-range band so it spans the full 36px column with no
   inter-cell gap — the band reads continuous across a week. */
.date-range__cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.date-range__cell--in-range {
  background: color-mix(in oklab, var(--md-sys-color-primary-container) 55%, transparent);
}
/* Round the band ends at the endpoints so the run has soft caps. */
.date-range__cell--start {
  background: color-mix(in oklab, var(--md-sys-color-primary-container) 55%, transparent);
  border-start-start-radius: var(--md-sys-shape-corner-full);
  border-end-start-radius: var(--md-sys-shape-corner-full);
}
.date-range__cell--end {
  background: color-mix(in oklab, var(--md-sys-color-primary-container) 55%, transparent);
  border-start-end-radius: var(--md-sys-shape-corner-full);
  border-end-end-radius: var(--md-sys-shape-corner-full);
}

.date-range__day {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-inverse-on-surface);
  cursor: pointer;
  font:
    var(--md-sys-typescale-body-small-weight)
    var(--md-sys-typescale-body-small-size) /
    var(--md-sys-typescale-body-small-line-height)
    var(--md-sys-typescale-body-small-font);
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.date-range__day:hover {
  background: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
}
.date-range__day:focus { outline: none; }
.date-range__day:focus-visible { box-shadow: var(--xm-state-focus-ring); }

.date-range__day--muted { color: var(--xm-color-inverse-on-surface-muted); }

.date-range__day--today { border-color: var(--md-sys-color-primary); }

.date-range__day--selected {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.date-range__day--selected:hover { background: var(--md-sys-color-primary-container); }

/* ---------- Screen-reader-only live region + invalid alert ---------- */
.date-range__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.date-range__alert {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  color: var(--md-sys-color-inverse-on-surface);
  font:
    var(--md-sys-typescale-label-medium-weight)
    var(--md-sys-typescale-label-medium-size) /
    var(--md-sys-typescale-label-medium-line-height)
    var(--md-sys-typescale-label-medium-font);
}
.date-range__alert-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--md-sys-color-primary);
}

/* ---------- Footer ---------- */
.date-range__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.date-range__btn {
  appearance: none;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--md-sys-shape-corner-button);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: transparent;
  color: var(--md-sys-color-inverse-on-surface);
  cursor: pointer;
  font:
    var(--md-sys-typescale-label-large-weight)
    var(--md-sys-typescale-label-large-size) /
    var(--md-sys-typescale-label-large-line-height)
    var(--md-sys-typescale-label-large-font);
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.date-range__btn:hover {
  background: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
}
.date-range__btn:focus { outline: none; }
.date-range__btn:focus-visible { box-shadow: var(--xm-state-focus-ring); }

.date-range__btn--apply {
  background: var(--md-sys-color-primary);
  border-color: transparent;
  color: var(--md-sys-color-on-primary);
}
.date-range__btn--apply:hover { background: var(--md-sys-color-primary); }
.date-range__btn--apply[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}