/* ============================================================
   datetime-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 --datetime-picker-* tokens
   reach the popover.
   ============================================================ */

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

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

    /* Pane divider */
    --datetime-picker-divider:             var(--a-border-subtle);

    /* Trigger */
    --datetime-picker-trigger-min-width:   16em;

    /* Padding */
    --datetime-picker-px:                  var(--a-space-3);
    --datetime-picker-py:                  var(--a-space-2);

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

  /* ── Block 2 — BASE ── */
  /* Host is a transparent inline wrapper. Painting `background` on the host
     used to create an off-axis rectangle behind the trigger when the host
     sat inside a field-ui (the field-ui's value-cell expanded but the
     inline-block host only sized to its child). Trigger button-ui paints
     its own surface — host stays transparent.
     2026-05-24 QA: "odd background colors and block element container for
     inline trigger" — consumer report on /site/components/datetime-picker. */
  :scope {
    box-sizing: border-box;
    position: relative;
    display: block;
    color: var(--datetime-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; }

  /* Default trigger sizing — composes button-ui's surface; just
     stretches the min-width so "Jan 1, 2026 14:30" fits. Normalize to the
     picker-family field shape (mirrors date-range-picker): value text
     left-aligned with the caret pushed to the trailing edge, not centered
     like a default button. */
  :scope [slot="trigger"] {
    min-width: var(--datetime-picker-trigger-min-width);
    justify-content: space-between;
    line-height: 1;
  }
  /* A committed value bumps to --a-ui-text (bright), matching input-ui /
     select-ui / time-picker value color; the empty placeholder keeps
     button-ui's muted outline fg. */
  :scope [slot="trigger"][data-has-value] {
    color: var(--a-ui-text);
  }

  /* 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
   --datetime-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. */
datetime-picker-ui [slot="popover"] {
  margin: 0;
  padding: var(--datetime-picker-py) var(--datetime-picker-px);
  border: 1px solid var(--datetime-picker-popover-border);
  border-radius: var(--datetime-picker-popover-radius);
  background: var(--datetime-picker-popover-bg);
  box-shadow: var(--datetime-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(--datetime-picker-duration) var(--datetime-picker-easing),
    translate var(--datetime-picker-duration) var(--datetime-picker-easing);
}

datetime-picker-ui [slot="popover"]:popover-open {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-areas: "cal divider time";
  gap: var(--datetime-picker-popover-gap);
  align-items: start;
}

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

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

/* Pane areas. */
datetime-picker-ui [slot="popover"] > [data-cal-pane] {
  grid-area: cal;
}
datetime-picker-ui [slot="popover"] > [data-pane-divider] {
  grid-area: divider;
  align-self: stretch;
  --divider-color: var(--datetime-picker-divider);
}
datetime-picker-ui [slot="popover"] > [data-time-pane] {
  grid-area: time;
  align-self: start;
}

/* Footer area (consumer-supplied [slot="footer"]) — spans all three
   columns under the panes. */
datetime-picker-ui [slot="popover"] [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);
}

/* Narrow surfaces (e.g. inside a card on mobile): stack the panes
   vertically and replace the vertical divider with a horizontal rule. */
@container (max-width: 32rem) {
  datetime-picker-ui [slot="popover"]:popover-open {
    grid-template-columns: 1fr;
    grid-template-areas:
      "cal"
      "divider"
      "time";
  }
  datetime-picker-ui [slot="popover"] > [data-pane-divider] {
    align-self: auto;
  }
}
