/* Shared team picker system. */
@layer ripcity-app {
  /* The 30-team board uses one compact trigger, popover panel, and tile
     language. The shared .ripcity-picker-* classes carry that system; the
     team family classes add the basketball geometry. Everything is opt-in:
     the component markup already carries both class families.

     Fixed rules of the system: the popover body is the one vertical scroll
     owner, nothing scrolls horizontally, the grid keeps exactly five columns,
     and one semantic tree serves every width. */
  .ripcity-picker {
    /* The panel fits five square team logos plus their codes. */
    --ripcity-picker-panel-inline-size: 20rem;
    --ripcity-picker-panel-block-size: 26rem;
    --ripcity-picker-gutter: var(--wa-space-s);
    /* Tile geometry. The narrow override at the bottom shrinks the gap, mark,
       and label so five columns survive a 320px viewport with one tree. */
    --ripcity-picker-columns: 5;
    --ripcity-picker-gap: var(--wa-space-2xs);
    --ripcity-picker-mark-size: 32px;
    --ripcity-picker-tile-block-size: 3.5rem;
    --ripcity-picker-label-size: var(--wa-font-size-xs);
    --ripcity-picker-check-size: 16px;
    --ripcity-picker-radius: var(--wa-border-radius-m);
    --ripcity-picker-trigger-block-size: 2rem;
    --ripcity-picker-trigger-mark-size: 20px;

    display: inline-flex;
    max-inline-size: 100%;
    min-inline-size: 0;
  }

  .ripcity-team-picker {
    --ripcity-picker-panel-block-size: 30rem;
  }

  /* A labeled form-field host lets schedule/filter forms present this same
     picker at the exact geometry of adjacent Web Awesome controls. The picker
     still owns one trigger, one popover, and one radio-group tree. */
  .ripcity-picker-field {
    display: grid;
    min-inline-size: 0;
  }

  /* Match Web Awesome's form-control label by default. Command-band hosts
     opt into the compact uppercase label used by adjacent WA controls. */
  .ripcity-picker-field-label {
    display: inline-flex;
    margin-block-end: 0.5em;
    color: var(--wa-form-control-label-color);
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-form-control-label-font-weight);
    line-height: var(--wa-form-control-label-line-height);
  }

  :where(.ripcity-command-control) .ripcity-picker-field-label {
    margin-block-end: 2px;
    color: var(--wa-color-text-quiet);
    font-size: 10px;
    font-weight: var(--wa-font-weight-semibold);
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .ripcity-picker-field > .ripcity-picker,
  .ripcity-picker-field > .ripcity-picker > .ripcity-picker-trigger {
    inline-size: 100%;
  }

  .ripcity-picker-field > .ripcity-picker > .ripcity-picker-trigger {
    justify-content: start;
    min-block-size: var(--wa-form-control-height);
    padding: 0 var(--wa-form-control-padding-inline);
    color: var(--wa-form-control-value-color);
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);
  }

  .ripcity-picker-field
    > .ripcity-picker
    > .ripcity-picker-trigger:hover:not(:disabled),
  .ripcity-picker-field
    > .ripcity-picker
    > .ripcity-picker-trigger:active:not(:disabled) {
    color: var(--wa-form-control-value-color);
    background: var(--wa-form-control-background-color);
    border-color: var(--wa-form-control-border-color);
  }

  /* Trigger: [logo] Name [caret] on one line. It reads as a
     compact command unless the form-field host above opts into control
     geometry, and truncates its label instead of growing the band that hosts
     it. */
  .ripcity-picker-trigger {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    max-inline-size: 100%;
    min-inline-size: 0;
    min-block-size: var(--ripcity-picker-trigger-block-size);
    margin: 0;
    padding: var(--wa-space-3xs) var(--wa-space-xs);
    color: var(--wa-color-text-normal);
    font: inherit;
    font-size: var(--wa-font-size-s);
    line-height: var(--wa-line-height-condensed);
    text-align: start;
    background: var(--wa-form-control-background-color);
    border: var(--wa-form-control-border-width)
      var(--wa-form-control-border-style)
      var(--wa-form-control-border-color);
    border-radius: var(--wa-form-control-border-radius);
    box-shadow: none;
    cursor: pointer;
    appearance: none;
    transition:
      background-color var(--wa-transition-fast),
      border-color var(--wa-transition-fast),
      color var(--wa-transition-fast);
  }

  .ripcity-picker-trigger:hover:not(:disabled) {
    color: var(--wa-color-text-loud);
    background: var(--wa-color-neutral-fill-quiet);
  }

  .ripcity-picker-trigger:active:not(:disabled) {
    background: var(--wa-color-neutral-fill-normal);
  }

  .ripcity-picker-trigger:disabled {
    color: var(--wa-color-text-quiet);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.55;
  }

  .ripcity-picker-trigger-logo {
    --size: var(--ripcity-picker-trigger-mark-size);

    flex: none;
  }

  .ripcity-picker-current {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    font-weight: var(--wa-font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Match Web Awesome select's system chevron, quiet color, spacing, and
     expanded rotation. */
  .ripcity-picker-caret {
    flex: 0 0 auto;
    margin-inline-start: var(--wa-form-control-padding-inline);
    color: var(--wa-color-neutral-on-quiet);
    rotate: 0deg;
    transition: rotate var(--wa-transition-slow) var(--wa-transition-easing);
  }

  .ripcity-picker-trigger[aria-expanded="true"] .ripcity-picker-caret {
    rotate: -180deg;
  }

  /* Touch keeps the documented 44px target without inflating pointer layouts. */
  @media (pointer: coarse) {
    .ripcity-picker-trigger {
      min-block-size: 44px;
    }
  }

  /* Panel. --max-width is the popover's documented width control; the body
     part owns the gutter, the bound, and the only scroll in the surface. */
  .ripcity-picker-popover {
    --max-width: min(
      var(--ripcity-picker-panel-inline-size),
      calc(100vw - 2 * var(--wa-space-m))
    );
  }

  /* The panel fades in place. The component's default open animation scales
     the surface, which drags a five-column board around under the pointer and
     leaves its geometry unsettled while the grid is already readable. */
  .ripcity-picker-popover::part(popup__popup) {
    animation-name: ripcity-picker-fade;
  }

  @keyframes ripcity-picker-fade {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .ripcity-picker-popover::part(body) {
    inline-size: min(
      var(--ripcity-picker-panel-inline-size),
      calc(100vw - 2 * var(--wa-space-m))
    );
    /* Short viewports bound the panel so the anchored surface, its trigger,
       and its flipped placement all stay on screen. */
    max-block-size: min(
      var(--ripcity-picker-panel-block-size),
      calc(100dvh - 13rem)
    );
    padding: var(--ripcity-picker-gutter);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* The radio group contributes grouping, form association, and keyboard
     ownership; the grids below own every dimension. Its label is already
     spoken by the trigger, so it stays available and out of the panel. */
  .ripcity-picker-group,
  .ripcity-picker-group::part(form-control) {
    display: block;
    min-inline-size: 0;
  }

  .ripcity-picker-group::part(form-control-label) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Two stacked conference boards. */
  .ripcity-team-picker-group::part(form-control-input) {
    display: grid;
    gap: var(--wa-space-xs);
    min-inline-size: 0;
  }

  .ripcity-team-picker-conference + .ripcity-team-picker-conference {
    padding-block-start: var(--wa-space-xs);
    border-block-start: var(--wa-border-width-s) solid
      var(--wa-color-surface-border);
  }

  /* Optional selection is an explicit footer action, not another radio.
     Callers retain the meaning and state transition of an empty selection
     while the picker owns clear, close, and focus mechanics. */
  .ripcity-picker-clear {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wa-space-2xs);
    inline-size: 100%;
    min-block-size: 2rem;
    margin-block-start: var(--wa-space-s);
    padding: var(--wa-space-2xs) var(--wa-space-xs);
    color: var(--wa-color-text-quiet);
    font: inherit;
    font-size: var(--wa-font-size-2xs);
    font-weight: var(--wa-font-weight-bold);
    letter-spacing: 0.08em;
    line-height: var(--wa-line-height-condensed);
    text-transform: uppercase;
    background: transparent;
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    cursor: pointer;
    transition:
      background-color var(--wa-transition-fast),
      border-color var(--wa-transition-fast),
      color var(--wa-transition-fast);
  }

  .ripcity-picker-clear:hover:not(:disabled) {
    color: var(--wa-color-neutral-on-loud);
    background: var(--wa-color-neutral-fill-loud);
    border-color: var(--wa-color-neutral-fill-loud);
  }

  .ripcity-picker-clear:disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }

  .ripcity-picker-clear-icon {
    inline-size: 0.875rem;
    block-size: 0.875rem;
  }

  .ripcity-picker-section {
    display: grid;
    gap: var(--wa-space-2xs);
    min-inline-size: 0;
  }

  .ripcity-picker-section-title {
    margin: 0;
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-2xs);
    font-weight: var(--wa-font-weight-semibold);
    letter-spacing: 0.06em;
    line-height: var(--wa-line-height-condensed);
    text-transform: uppercase;
  }

  .ripcity-picker-grid {
    display: grid;
    grid-template-columns: repeat(var(--ripcity-picker-columns), minmax(0, 1fr));
    gap: var(--ripcity-picker-gap);
    min-inline-size: 0;
  }

  /* Tile. The button-appearance radio keeps its semantics but not its pill
     skin: the tile is a flat square that lifts on hover, settles on press,
     rings when selected, and shows one 16px corner check. */
  .ripcity-picker-choice {
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: center;
    position: relative;
    min-inline-size: 0;
    min-block-size: var(--ripcity-picker-tile-block-size);
    margin: 0;
    padding: 0;
    background: transparent;
    border: var(--wa-border-width-s) solid transparent;
    border-radius: var(--ripcity-picker-radius);
    transition:
      background-color var(--wa-transition-fast),
      border-color var(--wa-transition-fast),
      transform var(--wa-transition-fast);
  }

  .ripcity-picker-choice::part(label) {
    display: flex;
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .ripcity-picker-tile {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wa-space-3xs);
    min-inline-size: 0;
    padding: var(--wa-space-2xs) var(--wa-space-3xs);
  }

  .ripcity-picker-tile-logo {
    --size: var(--ripcity-picker-mark-size);

    flex: none;
  }

  /* A team logo must stay whole. */
  .ripcity-team-picker-tile-logo,
  .ripcity-team-picker-trigger-logo {
    background: transparent;
  }

  .ripcity-team-picker-tile-logo::part(image),
  .ripcity-team-picker-trigger-logo::part(image) {
    object-fit: contain;
  }

  .ripcity-picker-code {
    max-inline-size: 100%;
    overflow: hidden;
    color: var(--wa-color-text-normal);
    font-size: var(--ripcity-picker-label-size);
    font-weight: var(--wa-font-weight-semibold);
    line-height: var(--wa-line-height-condensed);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ripcity-picker-check {
    position: absolute;
    inset-block-start: var(--wa-space-3xs);
    inset-inline-end: var(--wa-space-3xs);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--ripcity-picker-check-size);
    block-size: var(--ripcity-picker-check-size);
    color: var(--wa-color-neutral-on-loud);
    font-size: 10px;
    background: var(--ripcity-selection-marker-color);
    border-radius: var(--wa-border-radius-circle);
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    transition:
      opacity var(--wa-transition-fast),
      transform var(--wa-transition-fast);
  }

  .ripcity-picker-choice:hover:not(:state(disabled)) {
    background: var(--wa-color-neutral-fill-quiet);
    transform: translateY(-1px);
  }

  .ripcity-picker-choice:active:not(:state(disabled)) {
    background: var(--wa-color-neutral-fill-normal);
    transform: translateY(0) scale(0.97);
  }

  .ripcity-picker-choice:state(checked),
  .ripcity-picker-choice[aria-checked="true"] {
    background: var(--ripcity-row-selected-background);
    border-color: var(--ripcity-selection-marker-color);
    box-shadow: inset 0 0 0 1px var(--ripcity-selection-marker-color);
  }

  .ripcity-picker-choice:state(checked) .ripcity-picker-code,
  .ripcity-picker-choice[aria-checked="true"] .ripcity-picker-code {
    color: var(--wa-color-text-loud);
    font-weight: var(--wa-font-weight-bold);
  }

  .ripcity-picker-choice:state(checked) .ripcity-picker-check,
  .ripcity-picker-choice[aria-checked="true"] .ripcity-picker-check {
    opacity: 1;
    transform: none;
  }

  .ripcity-picker-choice:state(disabled) {
    cursor: not-allowed;
  }

  /* Phone widths keep the same markup and the same five columns; only the
     gutter, gap, mark, and label shrink. */
  @media (max-width: 26rem) {
    .ripcity-picker {
      --ripcity-picker-gutter: var(--wa-space-xs);
      --ripcity-picker-gap: var(--wa-space-3xs);
      --ripcity-picker-mark-size: 26px;
      --ripcity-picker-tile-block-size: 3.125rem;
      --ripcity-picker-label-size: var(--wa-font-size-2xs);
      --ripcity-picker-check-size: 14px;
    }
  }

  @media (forced-colors: active) {
    /* Ring, fill, and check are all painted effects, so the selected tile
       keeps an explicit boundary. */
    .ripcity-picker-choice:state(checked),
    .ripcity-picker-choice[aria-checked="true"] {
      outline: 2px solid CanvasText;
      outline-offset: -2px;
    }
  }
}