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

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

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

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

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

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

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

  /* Default trigger sizing — composes button-ui's surface; just
     stretches the min-width so "Jan 1, 2026 14:30" fits. */
  :scope > [slot="trigger"] {
    min-width: var(--datetime-picker-trigger-min-width, var(--datetime-picker-trigger-min-width-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
   --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-py-default)) var(--datetime-picker-px, var(--datetime-picker-px-default));
  border: 1px solid var(--datetime-picker-popover-border, var(--datetime-picker-popover-border-default));
  border-radius: var(--datetime-picker-popover-radius, var(--datetime-picker-popover-radius-default));
  background: var(--datetime-picker-popover-bg, var(--datetime-picker-popover-bg-default));
  box-shadow: var(--datetime-picker-popover-shadow, var(--datetime-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(--datetime-picker-duration, var(--datetime-picker-duration-default)) var(--datetime-picker-easing, var(--datetime-picker-easing-default)),
    translate var(--datetime-picker-duration, var(--datetime-picker-duration-default)) var(--datetime-picker-easing, var(--datetime-picker-easing-default));
}

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, var(--datetime-picker-popover-gap-default));
  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, var(--datetime-picker-divider-default));
}
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;
  }
}
