/* Safari 17.x bug: `:scope:not(...):hover` (Flavor A) and `:scope[checked]`
   (Flavor B — attribute-removal restyle) both fail inside `@scope`.
   Selectors moved out. See docs/BROWSER-COMPAT.md §3a. */
option-card-ui:not([checked]):not([disabled]):hover {
  background: var(--option-card-bg-hover, var(--option-card-bg-hover-default));
  border-color: var(--option-card-border-hover, var(--option-card-border-hover-default));
}
option-card-ui[checked] > :not([slot]) {
  display: block;
}
option-card-ui[checked] {
  background: var(--option-card-bg-checked, var(--option-card-bg-checked-default));
  border-color: var(--option-card-border-checked, var(--option-card-border-checked-default));
}
option-card-ui[checked]::before {
  border-color: var(--option-card-radio-fill, var(--option-card-radio-fill-default));
  background:
    radial-gradient(
      circle,
      var(--option-card-radio-dot, var(--option-card-radio-dot-default)) 0 30%,
      var(--option-card-radio-fill, var(--option-card-radio-fill-default)) 30% 100%
    );
}
option-card-ui[checked] > [slot="heading"] {
  color: var(--option-card-heading-color-checked, var(--option-card-heading-color-checked-default));
}
option-card-ui[checked] > [slot="icon"] {
  color: var(--option-card-icon-color-checked, var(--option-card-icon-color-checked-default));
}

@scope (option-card-ui) {
  :where(:scope) {
    /* ── Container ── */
    --option-card-padding-block-default:    var(--a-space-3);
    --option-card-padding-inline-default:   var(--a-space-4);
    --option-card-radius-default:           var(--a-radius-md);
    --option-card-bg-default:               var(--a-bg);
    --option-card-border-default:           var(--a-border);
    --option-card-gap-x-default:            var(--a-space-3);
    --option-card-gap-y-default:            var(--a-space-1);

    /* ── State: hover ── */
    --option-card-bg-hover-default:         var(--a-bg-muted);
    --option-card-border-hover-default:     var(--a-fg-subtle);

    /* ── State: checked ── */
    --option-card-bg-checked-default:       var(--a-accent-muted);
    --option-card-border-checked-default:   var(--a-accent);

    /* ── Indicator (CSS radio circle, same size + recipe as <radio-ui>). */
    --option-card-radio-size-default:       var(--a-toggle-size);
    --option-card-radio-bg-default:         var(--a-bg);
    --option-card-radio-border-default:     var(--a-border);
    --option-card-radio-fill-default:       var(--a-accent);
    /* Mirror radio.css's --radio-fg-checked recipe: an always-light
       token rather than --a-accent-fg, which can flip dark depending
       on theme/scheme combos and produce a near-black inner dot
       against the accent disc. */
    --option-card-radio-dot-default:        var(--a-chrome-light);

    /* ── Typography ── */
    --option-card-heading-color-default:          var(--a-fg);
    --option-card-heading-color-checked-default:  var(--a-fg-strong);
    --option-card-heading-weight-default:         var(--a-weight-medium);
    --option-card-heading-size-default:           var(--a-ui-size);
    --option-card-desc-color-default:             var(--a-fg-muted);
    --option-card-desc-size-default:              var(--a-ui-sm);
    --option-card-desc-line-height-default:       1.4;
    --option-card-icon-color-default:             var(--a-fg-subtle);
    --option-card-icon-color-checked-default:     var(--a-fg-strong);
    --option-card-icon-size-default:              1.5rem;

    /* ── State: disabled ── */
    --option-card-disabled-opacity-default: 0.6;

    /* ── Focus ── */
    --option-card-focus-ring-default:       var(--a-focus-ring);

    /* ── Transitions ── */
    --option-card-duration-default:         var(--a-duration-fast);
    --option-card-easing-default:           var(--a-easing);
  }

  /* ── Base — grid: indicator | (heading + description). Optional icon
       sits between indicator and heading via :has() rules below. ── */
  :scope {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "indicator heading"
      "indicator description";
    column-gap: var(--option-card-gap-x, var(--option-card-gap-x-default));
    row-gap: var(--option-card-gap-y, var(--option-card-gap-y-default));
    padding: var(--option-card-padding-block, var(--option-card-padding-block-default)) var(--option-card-padding-inline, var(--option-card-padding-inline-default));
    border: 1px solid var(--option-card-border, var(--option-card-border-default));
    border-radius: var(--option-card-radius, var(--option-card-radius-default));
    background: var(--option-card-bg, var(--option-card-bg-default));
    cursor: pointer;
    user-select: none;
    outline: none;
    transition:
      background var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default)),
      border-color var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default)),
      box-shadow var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default));
  }

  /* When an icon slot is present, insert a third column for it
     between indicator and heading. */
  :scope:has(> [slot="icon"]) {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
      "indicator icon heading"
      "indicator icon description";
  }
  :scope > [slot="icon"] {
    grid-area: icon;
    align-self: start;
    color: var(--option-card-icon-color, var(--option-card-icon-color-default));
    --a-icon-size: var(--option-card-icon-size, var(--option-card-icon-size-default));
    transition: color var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default));
  }

  /* ── Indicator — pure CSS radio circle, no separate <radio-ui>. */
  :scope::before {
    content: '';
    grid-area: indicator;
    width: var(--option-card-radio-size, var(--option-card-radio-size-default));
    height: var(--option-card-radio-size, var(--option-card-radio-size-default));
    border: 1.5px solid var(--option-card-radio-border, var(--option-card-radio-border-default));
    border-radius: var(--a-radius-full);
    background: var(--option-card-radio-bg, var(--option-card-radio-bg-default));
    align-self: start;
    margin-block-start: 0.125rem;
    flex-shrink: 0;
    transition:
      background var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default)),
      border-color var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default));
  }

  /* ── Slots — heading + description ── */
  :scope > [slot="heading"] {
    grid-area: heading;
    color: var(--option-card-heading-color, var(--option-card-heading-color-default));
    font-weight: var(--option-card-heading-weight, var(--option-card-heading-weight-default));
    font-size: var(--option-card-heading-size, var(--option-card-heading-size-default));
    transition: color var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default));
  }
  :scope > [slot="description"] {
    grid-area: description;
    color: var(--option-card-desc-color, var(--option-card-desc-color-default));
    font-size: var(--option-card-desc-size, var(--option-card-desc-size-default));
    line-height: var(--option-card-desc-line-height, var(--option-card-desc-line-height-default));
  }

  /* ── Default slot — "spillover" content revealed when checked.
       Aligns with the heading/description column (skips the indicator
       gutter). Common pattern: an "Other" option with a free-text
       textarea, conditional follow-up fields, etc. ── */
  :scope > :not([slot]) {
    grid-column: 2 / -1;
    margin-block-start: var(--a-space-3);
    display: none;
  }
  :scope:has(> [slot="icon"]) > :not([slot]) {
    grid-column: 3 / -1;
  }
  /* hover + [checked] state rules moved outside @scope — see Safari 17.x bug note at top.
     The :scope[checked]::before recipe lives at top-of-file: an accent disc
     with a centered dot via radial-gradient, mirroring radio-ui's recipe. */

  /* ── Layout: tile — icon top-left, indicator top-right, heading +
       description below, all left-aligned. Used for hero pickers
       (data source, role, plan tiles) where the icon is a primary
       brand cue rather than secondary chrome. ── */
  :scope[layout="tile"] {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "icon       indicator"
      "heading    heading"
      "description description";
    column-gap: var(--option-card-gap-x, var(--option-card-gap-x-default));
    row-gap: var(--option-card-gap-y, var(--option-card-gap-y-default));
    padding: var(--a-space-4);
    align-items: start;
  }
  :scope[layout="tile"] > [slot="icon"] {
    grid-area: icon;
    justify-self: start;
    align-self: start;
    --option-card-icon-size-default: 1.75rem;
  }
  :scope[layout="tile"]::before {
    grid-area: indicator;
    align-self: start;
    justify-self: end;
    margin-block-start: 0;
  }
  :scope[layout="tile"] > [slot="heading"] {
    margin-block-start: var(--a-space-2);
  }
  :scope[layout="tile"] > :not([slot]) {
    grid-column: 1 / -1;
  }

  /* ── State: disabled ── */
  :scope[disabled] {
    cursor: not-allowed;
    opacity: var(--option-card-disabled-opacity, var(--option-card-disabled-opacity-default));
  }

  /* ── Focus ── */
  :scope:focus-visible {
    box-shadow: var(--option-card-focus-ring, var(--option-card-focus-ring-default));
  }
}
