/* ============================================================
   date-range-picker — two-block @scope per ADR-0003.
   Block 1 (TOKENS): :where(:scope) — token defaults.
   Block 2 (BASE): :scope + descendant selectors.
   Popover surfaces live OUTSIDE @scope because the Popover API
   lifts them into the top layer; custom-property inheritance
   still cascades from the host so --date-range-picker-* tokens
   reach the popover.
   ============================================================ */

@scope (date-range-picker-ui) {
  /* ── Block 1 — TOKENS ── */
  :where(:scope) {
    --date-range-picker-bg:               var(--a-bg);
    --date-range-picker-fg:               var(--a-fg);

    /* Popover surface */
    --date-range-picker-popover-bg:       var(--a-bg-subtle);
    --date-range-picker-popover-border:   var(--a-border-subtle);
    --date-range-picker-popover-radius:   var(--a-radius-lg);
    --date-range-picker-popover-shadow:   var(--a-shadow-lg);
    --date-range-picker-popover-padding:  var(--a-space-3);
    --date-range-picker-popover-gap:      var(--a-space-3);
    /* Wide enough for the preset rail + two side-by-side month panes; raises
       anchor.js's default 32rem cap (which clipped the second month). */
    --date-range-picker-popover-max-width: 48rem;

    /* Preset rail */
    --date-range-picker-preset-bg:        transparent;
    --date-range-picker-preset-bg-hover:  var(--a-bg-hover);
    --date-range-picker-preset-min-width: 10em;
    --date-range-picker-preset-gap:       var(--a-space-1);

    /* Selected / preview day cells (cascade into calendar) */
    --date-range-picker-selected-bg:      var(--a-accent);
    --date-range-picker-selected-fg:      var(--a-accent-fg);
    --date-range-picker-preview-bg:       var(--a-accent-muted);

    /* Trigger — mirrors the canonical trigger surface used by
       <select-ui> and <calendar-picker-ui> so consumers see a
       consistent open-picker chrome across the input/picker family.
       The values are deliberately the same tokens select/calendar
       cascade onto their own `--*-trigger-*` aliases. */
    --date-range-picker-trigger-min-width: 14em;
    --date-range-picker-trigger-height:    var(--a-size);
    --date-range-picker-trigger-px:        var(--a-ui-px);
    --date-range-picker-trigger-gap:       var(--a-space-1);
    --date-range-picker-trigger-radius:    var(--a-radius);
    --date-range-picker-trigger-bg:        var(--a-ui-bg);
    --date-range-picker-trigger-bg-hover:  var(--a-ui-bg-hover);
    /* Placeholder state by default; a committed value bumps to --a-ui-text
       via [data-has-value] (matches input-ui / select-ui value vs placeholder). */
    --date-range-picker-trigger-fg:        var(--a-ui-text-placeholder);
    --date-range-picker-trigger-border:    var(--a-ui-border);
    --date-range-picker-trigger-border-hover: var(--a-ui-border-hover);
    --date-range-picker-trigger-focus-ring:   var(--a-focus-ring);

    /* Popover-internal padding (NOT the trigger — kept distinct from
       --date-range-picker-trigger-px to avoid the historical conflation
       that made the trigger render with --a-space-3 vertical inflation). */
    --date-range-picker-px:               var(--a-space-3);
    --date-range-picker-py:               var(--a-space-2);

    /* Motion */
    --date-range-picker-duration:         var(--a-duration-fast);
    --date-range-picker-easing:           var(--a-easing);
  }

  /* ── Block 2 — BASE ── */
  /* Host is a transparent inline wrapper — trigger button-ui paints its
     own surface. Mirrors the datetime-picker decision (2026-05-24): a host
     background paint creates an off-axis rectangle inside field-ui because
     the field-ui's value-cell expands beyond the inline-block host. */
  :scope {
    box-sizing: border-box;
    position: relative;
    display: block;
    color: var(--date-range-picker-fg);
    font-size: var(--a-ui-size);
  }

  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
  :scope[inline] { display: inline-block; }

  /* ── Trigger ──
     Canonical trigger surface matching <select-ui> + <calendar-picker-ui>:
     flex row, --a-size min-height, --a-ui-px padding, --a-radius corner,
     --a-ui-border outline. The trigger is a <button-ui slot="trigger">
     stamped by date-range-picker.class.js — these rules override button-ui's defaults at
     equal specificity so the picker trigger reads as part of the
     input/picker family rather than a generic button. */
  :scope [slot="trigger"] {
    min-width: var(--date-range-picker-trigger-min-width);
    min-height: var(--date-range-picker-trigger-height);
    padding: 0 var(--date-range-picker-trigger-px);
    gap: var(--date-range-picker-trigger-gap);
    border-radius: var(--date-range-picker-trigger-radius);
    border: 1px solid var(--date-range-picker-trigger-border);
    background: var(--date-range-picker-trigger-bg);
    color: var(--date-range-picker-trigger-fg);
    /* Justify content so leading icon + label sit at start, trailing
       caret at end — same shape select-ui's trigger uses via
       `justify-content: space-between` on a [leading|display|caret]
       slot triplet. button-ui's natural alignment is `center`; our
       leading+text+trailing layout reads better as space-between. */
    justify-content: space-between;
    line-height: 1;
    transition:
      border-color var(--date-range-picker-duration) var(--date-range-picker-easing),
      background   var(--date-range-picker-duration) var(--date-range-picker-easing);
  }
  :scope [slot="trigger"]:hover {
    border-color: var(--date-range-picker-trigger-border-hover);
    background: var(--date-range-picker-trigger-bg-hover);
  }
  /* Committed value reads as filled content (matches input-ui/select-ui),
     not as the muted placeholder. Marked by the class when a range is set. */
  :scope [slot="trigger"][data-has-value] {
    color: var(--a-ui-text);
  }
  :scope:focus-visible { outline: none; }
  :scope:focus-visible [slot="trigger"] {
    box-shadow: var(--date-range-picker-trigger-focus-ring);
  }

  /* States */
  :scope[disabled] {
    opacity: 0.5;
    pointer-events: none;
  }
  :scope[readonly] [slot="trigger"] {
    cursor: default;
  }
}

/* ============================================================
   Popover surface — outside @scope (lifted to top layer).
   Custom properties inherit from the host so
   --date-range-picker-* tokens are available here.
   ============================================================ */

/* §FB-Wave1-QA — `display: grid` MUST be guarded by `:popover-open` so the
   popover honors the UA `popover` `display: none` while closed. Without
   the guard, the popover renders in normal flow on first paint. Mirrors
   the popover-ui pattern that uses `:not(:popover-open) { display: none }`. */
date-range-picker-ui [slot="popover"] {
  margin: 0;
  /* Opt into a wider anchor.js max-width cap so both month panes fit side-by-side
     (the 32rem default clipped the second month). Viewport safety still applies. */
  --popover-max-width: var(--date-range-picker-popover-max-width);
  padding: var(--date-range-picker-py) var(--date-range-picker-px);
  border: 1px solid var(--date-range-picker-popover-border);
  border-radius: var(--date-range-picker-popover-radius);
  background: var(--date-range-picker-popover-bg);
  box-shadow: var(--date-range-picker-popover-shadow);
  color: var(--a-fg);
  /* Anchor-positioning fallback — popover.css and anchor.js handle
     placement; layout here just sets the grid. */
  inset: auto;
  /* Fade + lift in on first paint via @starting-style. */
  opacity: 1;
  translate: 0 0;
  transition:
    opacity var(--date-range-picker-duration) var(--date-range-picker-easing),
    translate var(--date-range-picker-duration) var(--date-range-picker-easing);
}

date-range-picker-ui [slot="popover"]:popover-open {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--date-range-picker-popover-gap);
}

date-range-picker-ui [slot="popover"]:popover-open {
  @starting-style {
    opacity: 0;
    translate: 0 -4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  date-range-picker-ui [slot="popover"] { transition: none; }
}

/* Preset rail — single-column flex of button-ui buttons. */
date-range-picker-ui [data-preset-rail],
date-range-picker-ui [slot="presets"] {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--date-range-picker-preset-gap);
  min-width: var(--date-range-picker-preset-min-width);
}

/* When [no-presets] is set OR no preset rail exists, collapse the
   grid to a single column. */
date-range-picker-ui[no-presets] [slot="popover"],
date-range-picker-ui [slot="popover"]:not(:has([data-preset-rail])):not(:has([slot="presets"])) {
  grid-template-columns: 1fr;
}

date-range-picker-ui [data-preset-rail] button-ui {
  justify-content: flex-start;
}

/* Calendar area — horizontal layout of two calendar panes. Wraps the second
   pane below the first when the popover is viewport-clamped narrower than two
   months (instead of clipping it past the popover's right edge). */
date-range-picker-ui [data-calendar-area] {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-space-3);
  align-items: flex-start;
}

date-range-picker-ui [data-calendar-area] calendar-grid-ui {
  flex: 0 0 auto;
}

/* Cascade range-aware tokens into the inner calendar panes so the
   linked-range coloring uses the date-range-picker palette.
   §FB-Wave1-QA — now consumes calendar-grid-ui tokens (the extracted
   substrate primitive). */
date-range-picker-ui calendar-grid-ui {
  --calendar-grid-day-bg-selected: var(--date-range-picker-selected-bg);
  --calendar-grid-day-fg-selected: var(--date-range-picker-selected-fg);
  --calendar-grid-day-bg-hover:    var(--date-range-picker-preview-bg);
}

/* Comparison mode — split preset rail visual via the divider. */
date-range-picker-ui[comparison] [data-preset-rail] [data-preset-divider] {
  margin-block: var(--a-space-1);
}

/* Footer area (author-supplied [slot="footer"]) — spans both columns
   under the calendar area. */
date-range-picker-ui [slot="footer"] {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: var(--a-space-2);
  padding-block-start: var(--a-space-2);
  border-block-start: 1px solid var(--a-border-subtle);
}
