/* ============================================================
   <calendar-grid-ui> — Inline single-month calendar grid.

   Substrate primitive consumed by calendar-picker-ui (popover
   wrapper), date-range-picker-ui (two side-by-side grids), and
   datetime-picker-ui (one grid + time pane).

   Two-block @scope per docs/specs/component-token-contract.md.
   Tokens mirror calendar-picker-ui's grid tokens (same surface,
   shared visual language) so consumers can override either
   --calendar-grid-* OR --calendar-picker-* and pick up the same
   look-and-feel through cascade.
   ============================================================ */

@scope (calendar-grid-ui) {
  /* ── Block 1 — TOKENS ── */
  :where(:scope) {
    /* Layout
       Width derives from the day-cell size so the grid scales with the
       universal [size] system (sm/md/lg) exactly like select/input/button:
       7 columns at --a-size + 6 inter-cell gaps' worth of breathing room. */
    --calendar-grid-gap:                var(--a-space-1);
    --calendar-grid-width:              calc(7 * var(--a-size) + 6 * var(--a-space-1));

    /* Header */
    --calendar-grid-header-gap:         var(--a-space-1);
    --calendar-grid-header-mb:          var(--a-space-2);
    --calendar-grid-title-fg:           var(--a-fg);
    --calendar-grid-title-size:         var(--a-ui-size);
    --calendar-grid-title-weight:       var(--a-weight-medium);

    /* Nav buttons (prev/next) — secondary chrome at one notch below the
       control height (mirrors select's `calc(height - gap)` idiom); icon
       is a directional caret sized from the universal --a-caret-size. */
    --calendar-grid-nav-size:           calc(var(--a-size) - var(--a-space-2));
    --calendar-grid-nav-radius:         var(--a-radius-sm);
    --calendar-grid-nav-bg:             transparent;
    --calendar-grid-nav-bg-hover:       var(--a-bg-muted);
    --calendar-grid-nav-fg:             var(--a-fg-muted);
    --calendar-grid-nav-fg-hover:       var(--a-fg);
    --calendar-grid-nav-icon-size:      var(--a-caret-size);

    /* Weekday header — row height tracks the control height (one notch
       below, like nav); label font scales with the tier via --a-ui-size
       (de-emphasis comes from color + weight, not a frozen small size). */
    --calendar-grid-weekday-fg:         var(--a-fg-muted);
    --calendar-grid-weekday-size:       var(--a-ui-size);
    --calendar-grid-weekday-weight:     var(--a-weight-medium);
    --calendar-grid-weekday-height:     calc(var(--a-size) - var(--a-space-2));
    --calendar-grid-weekday-mb:         var(--a-space-1);

    /* Day cells — the interactive targets size from --a-size (control
       height) and scale their digits with --a-ui-size, exactly like a
       button/select row. */
    --calendar-grid-day-size:           var(--a-size);
    --calendar-grid-day-radius:         var(--a-radius);
    --calendar-grid-day-font-size:      var(--a-ui-size);
    --calendar-grid-day-font-family:    var(--a-font-family-ui);
    --calendar-grid-day-bg:             transparent;
    --calendar-grid-day-fg:             var(--a-fg-subtle);
    --calendar-grid-day-bg-hover:       var(--a-bg-hover);
    --calendar-grid-day-fg-hover:       var(--a-fg);
    --calendar-grid-day-bg-selected:    var(--a-accent);
    --calendar-grid-day-fg-selected:    var(--a-accent-fg);
    /* In-range cells (strictly between rangeStart and rangeEnd) — muted
       accent strip so the endpoints (full --a-accent fill) read as the
       primary selection while the in-range band reads as secondary
       context. Stylable independently of `selected`. */
    --calendar-grid-day-bg-in-range:    var(--a-accent-muted);
    --calendar-grid-day-fg-in-range:    var(--a-fg);
    --calendar-grid-day-fg-outside:     var(--a-fg-muted);
    --calendar-grid-day-fg-disabled:    var(--a-ui-text-disabled);
    --calendar-grid-day-today-color:    var(--a-accent);
    --calendar-grid-day-today-dot-size: var(--a-space-0-5);
    --calendar-grid-day-today-dot-offset: var(--a-space-1);
    --calendar-grid-day-grid-gap:       var(--a-space-px);
    --calendar-grid-day-focus-ring:     var(--a-focus-ring);

    /* Transitions */
    --calendar-grid-duration:           var(--a-duration-fast);
    --calendar-grid-easing:             var(--a-easing);

    /* Typography */
    --calendar-grid-selected-weight:    var(--a-weight-medium);
    --calendar-grid-today-weight:       var(--a-weight-medium);
  }

  /* ── Block 2 — BASE ── */
  :scope {
    box-sizing: border-box;
    display: block;
    width: var(--calendar-grid-width);
    font-size: var(--calendar-grid-day-font-size);
  }

  :scope[disabled] {
    pointer-events: none;
    opacity: 0.5;
  }

  /* Header row */
  [data-cal-header] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--calendar-grid-header-gap);
    margin-block-end: var(--calendar-grid-header-mb);
  }

  [data-cal-title] {
    flex: 1;
    text-align: center;
    font-size: var(--calendar-grid-title-size);
    font-weight: var(--calendar-grid-title-weight);
    color: var(--calendar-grid-title-fg);
  }

  [data-cal-prev],
  [data-cal-next] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--calendar-grid-nav-size);
    height: var(--calendar-grid-nav-size);
    padding: 0;
    border: none;
    border-radius: var(--calendar-grid-nav-radius);
    background: var(--calendar-grid-nav-bg);
    color: var(--calendar-grid-nav-fg);
    cursor: pointer;
    transition:
      background var(--calendar-grid-duration) var(--calendar-grid-easing),
      color      var(--calendar-grid-duration) var(--calendar-grid-easing);
    --a-icon-size: var(--calendar-grid-nav-icon-size);
  }
  [data-cal-prev]:hover,
  [data-cal-next]:hover {
    background: var(--calendar-grid-nav-bg-hover);
    color: var(--calendar-grid-nav-fg-hover);
  }

  /* Day-of-week header */
  [data-cal-weekdays] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: var(--calendar-grid-weekday-size);
    font-weight: var(--calendar-grid-weekday-weight);
    color: var(--calendar-grid-weekday-fg);
    margin-block-end: var(--calendar-grid-weekday-mb);
  }

  [data-cal-weekdays] span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--calendar-grid-weekday-height);
  }

  /* Day grid */
  [data-cal-grid] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--calendar-grid-day-grid-gap);
  }

  [data-cal-day] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--calendar-grid-day-size);
    height: var(--calendar-grid-day-size);
    margin: 0 auto;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--calendar-grid-day-radius);
    background: var(--calendar-grid-day-bg);
    color: var(--calendar-grid-day-fg);
    font: inherit;
    /* font-family floor — see segment.css rationale. */
    font-family: var(--calendar-grid-day-font-family);
    font-size: var(--calendar-grid-day-font-size);
    cursor: pointer;
    transition:
      background var(--calendar-grid-duration) var(--calendar-grid-easing),
      color      var(--calendar-grid-duration) var(--calendar-grid-easing),
      border-color var(--calendar-grid-duration) var(--calendar-grid-easing);
  }

  /* ── State: hover ── */
  [data-cal-day]:not([disabled]):not([data-outside]):hover {
    background: var(--calendar-grid-day-bg-hover);
    color: var(--calendar-grid-day-fg-hover);
  }

  /* ── State: focus ── */
  [data-cal-day]:not([disabled]):not([data-outside]):focus-visible,
  [data-cal-day][data-focused] {
    outline: none;
    box-shadow: var(--calendar-grid-day-focus-ring);
  }

  /* ── State: selected ── */
  [data-cal-day][data-selected] {
    background: var(--calendar-grid-day-bg-selected);
    color: var(--calendar-grid-day-fg-selected);
    font-weight: var(--calendar-grid-selected-weight);
  }
  [data-cal-day][data-selected]:not([disabled]):hover {
    background: var(--calendar-grid-day-bg-selected);
    color: var(--calendar-grid-day-fg-selected);
  }

  /* ── State: in-range ──
     Cells strictly between rangeStart and rangeEnd get the muted accent
     strip. Endpoints themselves render as `[data-selected]` (full accent
     fill); the in-range middle is visually subordinate. `:not([data-selected])`
     guard prevents the muted fill from overriding the endpoint cells in
     consumer code that sets both `value` AND `range-start`/`range-end`. */
  [data-cal-day][data-in-range]:not([data-selected]) {
    background: var(--calendar-grid-day-bg-in-range);
    color: var(--calendar-grid-day-fg-in-range);
  }
  [data-cal-day][data-in-range]:not([data-selected]):not([disabled]):hover {
    background: var(--calendar-grid-day-bg-in-range);
  }

  /* ── State: today (unselected) ── */
  [data-cal-day][data-today]:not([data-selected]) {
    position: relative;
    color: var(--calendar-grid-day-today-color);
    font-weight: var(--calendar-grid-today-weight);
  }
  [data-cal-day][data-today]:not([data-selected])::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: var(--calendar-grid-day-today-dot-offset);
    width: var(--calendar-grid-day-today-dot-size);
    height: var(--calendar-grid-day-today-dot-size);
    border-radius: 50%;
    background: var(--calendar-grid-day-today-color);
    transform: translateX(-50%);
    pointer-events: none;
  }

  /* ── State: outside month ── */
  [data-cal-day][data-outside] {
    color: var(--calendar-grid-day-fg-outside);
    cursor: default;
  }

  /* ── State: disabled (excluding outside) ── */
  [data-cal-day]:disabled:not([data-outside]) {
    color: var(--calendar-grid-day-fg-disabled);
    cursor: not-allowed;
  }
}
