@layer components {
  /* Popup Base (dialog element)
  /* ------------------------------------------------------------------------ */

  .popup {
    --panel-border-radius: 0.5em;
    --panel-padding: var(--block-space);
    --panel-size: auto;
    --popup-icon-size: 24px;
    --popup-item-padding-inline: 0.4rem;
    --popup-display: flex;

    background: var(--color-canvas);
    border: var(--border);
    border-radius: var(--panel-border-radius);
    box-shadow: var(--shadow);
    flex-direction: column;
    inset: 0 auto auto 50%;
    max-block-size: 70dvh;
    max-inline-size: min(55ch, calc(100vw - (var(--panel-padding))));
    min-inline-size: min(25ch, calc(100vw - (var(--panel-padding))));
    overflow: auto;
    padding: var(--panel-padding);
    position: absolute;
    transform: translateX(-50%);
    z-index: var(--z-popup);

    &[open] {
      display: var(--popup-display);
    }

    &.orient-left {
      inset-inline: auto 0;
      transform: translateX(0);
    }

    &.orient-right {
      inset-inline: 0 auto;
      transform: translateX(0);
    }

    form {
      display: contents;
    }
  }

  /* Popup Title
  /* ------------------------------------------------------------------------ */

  .popup__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  .popup__title {
    font-size: var(--text-small);
    font-weight: 600;
    text-transform: uppercase;
  }

  /* Popup Search Input
  /* ------------------------------------------------------------------------ */

  .popup__search {
    border: var(--border);
    border-radius: 0.3em;
    font-size: var(--text-normal);
    margin-block-end: var(--block-space-half);
    padding: var(--inline-space-half) var(--inline-space);
    width: 100%;

    &:focus {
      border-color: var(--color-link);
      outline: none;
    }
  }

  /* Popup Sections
  /* ------------------------------------------------------------------------ */

  .popup__section {
    &:not(:has(.popup__list)),
    &:not(:has(.popup__list > *)),
    &:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) {
      display: none;
    }
  }

  .popup__section-title {
    background: var(--color-canvas);
    font-size: var(--text-small);
    font-weight: 600;
    inset-block-start: 0;
    list-style: none;
    padding: 0.75ch var(--inline-space-half);
    position: sticky;
    text-transform: uppercase;
    z-index: 1;

    &:is(summary) {
      align-items: center;
      cursor: pointer;
      display: flex;
      gap: 0.5ch;
    }

    &::-webkit-details-marker {
      display: none;
    }

    .icon--caret-down {
      font-size: 0.8em;
      margin-inline-start: -0.25ch;
      transition: rotate 150ms ease-out;
    }

    .popup__section:not([open]) & {
      .icon--caret-down {
        rotate: -90deg;
      }
    }
  }

  /* Popup List
  /* ------------------------------------------------------------------------ */

  .popup__list {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    list-style: none;
    margin: 0;
    max-inline-size: 100%;
    padding: 0;

    details & {
      margin-inline-start: 0.75ch;
    }
  }

  /* Popup Grid — clickable <a> rows with aligned columns
  /* ------------------------------------------------------------------------ */

  .popup__grid {
    display: grid;
    grid-template-columns: var(--popup-grid-columns, 1fr auto auto);
    inline-size: max-content;
    min-inline-size: 100%;
  }

  .popup__grid-body {
    display: contents;
  }

  .popup__grid-header,
  .popup__grid-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    white-space: nowrap;
  }

  .popup__grid-header > span {
    background-color: var(--color-canvas);
    border-block-end: var(--border);
    font-weight: 600;
    padding: 0.75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1;

    &:not(:last-child) {
      border-inline-end: var(--border);
    }
  }

  .popup__grid-row {
    align-items: center;
    background: none;
    border: none;
    border-block-start: var(--border);
    color: inherit;
    cursor: pointer;
    font: inherit;
    inline-size: 100%;
    text-align: start;
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        background: var(--color-ink-lightest);
      }
    }

    &[aria-selected="true"] {
      background: var(--color-ink-lightest);
    }

  }

  .popup__grid-row > span {
    padding: 0.75rem 1rem;

    &:not(:last-child) {
      border-inline-end: var(--border);
    }
  }

  .popup__grid-row--inactive {
    color: var(--color-ink-light);

    > span { text-decoration: line-through; }
  }

  .popup__grid-empty {
    color: var(--color-ink-dark);
    font-weight: 500;
    padding: 0.75rem 1rem;
  }

  .popup__grid-sentinel {
    block-size: 1px;
  }

  .popup__grid-context {
    color: var(--color-ink-dark);
    display: block;
    font-size: 0.8em;
    white-space: nowrap;
  }

  /* Compact Grid — tighter padding for smaller pickers (e.g. location picker)
  /* ------------------------------------------------------------------------ */

  .popup__grid--compact {
    color: var(--color-ink);

    .popup__grid-header > span {
      font-size: var(--text-small);
      padding: 0.4rem 0.75rem;
    }

    .popup__grid-row > span {
      padding: 0.4rem 0.75rem;
    }

    .popup__grid-empty {
      padding: 0.4rem 0.75rem;
    }
  }

  /* Popup Items - list row styling (non-table popups)
  /* ------------------------------------------------------------------------ */

  .popup__item {
    align-items: center;
    background: transparent;
    border-block-start: var(--border);
    border-radius: 0;
    display: flex;
    inline-size: 100%;
    max-inline-size: 100%;

    &:first-child {
      border-block-start: none;
    }

    @media (any-hover: hover) {
      &:hover {
        background: var(--color-ink-lightest);
      }
    }

    &[aria-selected="true"] {
      background: var(--color-ink-lightest);
    }

    .checked {
      display: none;
    }

    &[aria-checked="true"] .checked {
      display: block;
    }
  }

  /* Popup Button - the actionable thing within popup__item
  /* ------------------------------------------------------------------------ */

  .popup__btn {
    --btn-border-radius: 0.3em;
    --btn-border-size: 0;

    flex: 1 1 auto;
    font-size: var(--text-normal);
    font-weight: 500;
    justify-content: start;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    padding: var(--inline-space) var(--popup-item-padding-inline);
    text-align: start;

    &:focus-visible {
      z-index: 1;
    }
  }

  /* Popup Icon
  /* ------------------------------------------------------------------------ */

  .popup__icon {
    --icon-size: 1em;

    align-items: center;
    display: flex;
    inline-size: 24px;
    justify-content: center;
    margin-inline-start: 0.4rem;
  }

  .popup__icon.checked::before {
    border: solid var(--color-ink);
    border-width: 0 2px 2px 0;
    content: "";
    display: inline-block;
    block-size: 0.7em;
    inline-size: 0.4em;
    transform: rotate(45deg);
  }

  /* Inline variant - renders in document flow instead of as positioned overlay
  /* ------------------------------------------------------------------------ */

  .popup--inline {
    border: var(--border);
    border-radius: 0.5em;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    margin-block-start: var(--block-space-half);
    max-block-size: 40dvh;
    overflow: auto;
    padding: var(--block-space);

    &[hidden] {
      display: none;
    }
  }

  .popup--below {
    inset-block-start: calc(100% + 0.25em);
  }

  /* Adaptive popup — above on mobile (bar context), below on desktop
  /* ------------------------------------------------------------------------ */

  .popup--adaptive {
    @media (max-width: 639px) {
      inset-block-end: calc(100% + 0.25em);
      inset-block-start: auto;
    }

    @media (min-width: 640px) {
      inset-block-start: calc(100% + 0.25em);
    }
  }

  /* Combobox variant — anchored below the input, left-aligned, full width
  /* ------------------------------------------------------------------------ */

  .popup--combobox {
    inset: auto;
    inset-block-start: calc(100% + 0.25em);
    inset-inline-start: 0;
    max-block-size: 40dvh;
    min-inline-size: 100%;
    transform: none;

    &[hidden] {
      display: none;
    }
  }
}