/* ============================================================
   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-default:               var(--a-bg);
    --date-range-picker-fg-default:               var(--a-fg);

    /* Popover surface */
    --date-range-picker-popover-bg-default:       var(--a-bg-subtle);
    --date-range-picker-popover-border-default:   var(--a-border-subtle);
    --date-range-picker-popover-radius-default:   var(--a-radius-lg);
    --date-range-picker-popover-shadow-default:   var(--a-shadow-lg);
    --date-range-picker-popover-padding-default:  var(--a-space-3);
    --date-range-picker-popover-gap-default:      var(--a-space-3);

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

    /* Selected / preview day cells (cascade into calendar) */
    --date-range-picker-selected-bg-default:      var(--a-accent);
    --date-range-picker-selected-fg-default:      var(--a-accent-fg);
    --date-range-picker-preview-bg-default:       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-default: 14em;
    --date-range-picker-trigger-height-default:    var(--a-size);
    --date-range-picker-trigger-px-default:        var(--a-ui-px);
    --date-range-picker-trigger-gap-default:       var(--a-space-1);
    --date-range-picker-trigger-radius-default:    var(--a-radius);
    --date-range-picker-trigger-bg-default:        var(--a-ui-bg);
    --date-range-picker-trigger-bg-hover-default:  var(--a-ui-bg-hover);
    --date-range-picker-trigger-fg-default:        var(--a-ui-text-subtle);
    --date-range-picker-trigger-border-default:    var(--a-ui-border);
    --date-range-picker-trigger-border-hover-default: var(--a-ui-border-hover);
    --date-range-picker-trigger-focus-ring-default:   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-default:               var(--a-space-3);
    --date-range-picker-py-default:               var(--a-space-2);

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

  /* ── Block 2 — BASE ── */
  :scope {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    background: var(--date-range-picker-bg, var(--date-range-picker-bg-default));
    color: var(--date-range-picker-fg, var(--date-range-picker-fg-default));
    font-size: var(--a-ui-size);
  }

  /* ── 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, var(--date-range-picker-trigger-min-width-default));
    min-height: var(--date-range-picker-trigger-height, var(--date-range-picker-trigger-height-default));
    padding: 0 var(--date-range-picker-trigger-px, var(--date-range-picker-trigger-px-default));
    gap: var(--date-range-picker-trigger-gap, var(--date-range-picker-trigger-gap-default));
    border-radius: var(--date-range-picker-trigger-radius, var(--date-range-picker-trigger-radius-default));
    border: 1px solid var(--date-range-picker-trigger-border, var(--date-range-picker-trigger-border-default));
    background: var(--date-range-picker-trigger-bg, var(--date-range-picker-trigger-bg-default));
    color: var(--date-range-picker-trigger-fg, var(--date-range-picker-trigger-fg-default));
    /* 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-duration-default)) var(--date-range-picker-easing, var(--date-range-picker-easing-default)),
      background   var(--date-range-picker-duration, var(--date-range-picker-duration-default)) var(--date-range-picker-easing, var(--date-range-picker-easing-default));
  }
  :scope > [slot="trigger"]:hover {
    border-color: var(--date-range-picker-trigger-border-hover, var(--date-range-picker-trigger-border-hover-default));
    background: var(--date-range-picker-trigger-bg-hover, var(--date-range-picker-trigger-bg-hover-default));
  }
  :scope:focus-visible { outline: none; }
  :scope:focus-visible > [slot="trigger"] {
    box-shadow: var(--date-range-picker-trigger-focus-ring, var(--date-range-picker-trigger-focus-ring-default));
  }

  /* 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;
  padding: var(--date-range-picker-py, var(--date-range-picker-py-default)) var(--date-range-picker-px, var(--date-range-picker-px-default));
  border: 1px solid var(--date-range-picker-popover-border, var(--date-range-picker-popover-border-default));
  border-radius: var(--date-range-picker-popover-radius, var(--date-range-picker-popover-radius-default));
  background: var(--date-range-picker-popover-bg, var(--date-range-picker-popover-bg-default));
  box-shadow: var(--date-range-picker-popover-shadow, var(--date-range-picker-popover-shadow-default));
  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-duration-default)) var(--date-range-picker-easing, var(--date-range-picker-easing-default)),
    translate var(--date-range-picker-duration, var(--date-range-picker-duration-default)) var(--date-range-picker-easing, var(--date-range-picker-easing-default));
}

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

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, var(--date-range-picker-preset-gap-default));
  min-width: var(--date-range-picker-preset-min-width, var(--date-range-picker-preset-min-width-default));
}

/* 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. */
date-range-picker-ui [data-calendar-area] {
  grid-column: 2;
  display: flex;
  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, var(--date-range-picker-selected-bg-default));
  --calendar-grid-day-fg-selected: var(--date-range-picker-selected-fg, var(--date-range-picker-selected-fg-default));
  --calendar-grid-day-bg-hover:    var(--date-range-picker-preview-bg, var(--date-range-picker-preview-bg-default));
}

/* 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);
}
