/*
 * THE ANCHORED PANEL, and the modal sheet it becomes on a narrow viewport.
 *
 * `data-sheet` is the one switch: the component reads the VIEWPORT once, because
 * the modal flag is a Base UI prop and cannot come from a media query.
 *
 * The overlay rung sits on the POSITIONER (§2.3): that is the element the portal
 * places, and the popup inside it is only the paint.
 *
 * The panel's own inset is written once as `--lotics-popover-inset`. The footer
 * bleeds out by it to span its divider full width, and the scroll body does the
 * same to reach the panel's real edges — three places that must agree.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-popover__positioner {
    z-index: var(--lotics-z-overlay);
  }

  .lotics-popover__backdrop {
    position: fixed;
    inset: 0;
    background-color: var(--lotics-scrim-strong);
    opacity: 1;
    transition: opacity var(--lotics-duration-base) var(--lotics-ease-standard);
  }

  .lotics-popover__backdrop[data-starting-style],
  .lotics-popover__backdrop[data-ending-style] {
    opacity: 0;
  }

  /* A scrim on its way out is not a target — `css_contract.test.ts` § a closing
     scrim, which is where the reason is. */
  .lotics-popover__backdrop[data-ending-style] {
    pointer-events: none;
  }

  .lotics-popover__popup {
    --lotics-popover-inset: var(--lotics-space-12);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    width: var(--lotics-popover-width, max-content);
    max-width: min(800px, var(--available-width, 800px));
    max-height: 80vh;
    padding: var(--lotics-popover-inset);
    border: 0 solid transparent;
    border-radius: var(--lotics-radius-card);
    background-color: var(--popover);
    /* A sticky register head inside this surface paints the surface's ground. */
    --lotics-register-ground: var(--popover);
    /* The surface's own ink pair — see `card.css`. */
    color: var(--popover-foreground);
    box-shadow: var(--lotics-shadow-raised);
    font-family: var(--font-sans);
    font-size: var(--lotics-text-md);
    line-height: var(--lotics-leading-md);
    letter-spacing: var(--lotics-tracking-md);
    outline: none;
    transition:
      opacity var(--lotics-duration-fast) var(--lotics-ease-standard),
      transform var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-popover__popup:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  .lotics-popover__popup[data-starting-style],
  .lotics-popover__popup[data-ending-style] {
    opacity: 0;
  }

  /* INHERIT means inherit — the width, not just a floor under it: option text
     longer than the field belongs on a second line, not on a wider panel.
     Floored, so a select in a dense grid column still opens a readable list. */
  .lotics-popover__popup[data-inherit] {
    width: max(var(--anchor-width), var(--lotics-control-min-width));
    max-width: max(var(--anchor-width), var(--lotics-control-min-width));
  }

  /* ─── The bands ───────────────────────────────────────────────────────── */

  .lotics-popover__header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: var(--lotics-space-8);
  }

  /* FULL-BLEED HORIZONTALLY, then re-inset by the same amount: a scroller inside
     the panel's padding clips its content short of the edge and parks the
     scrollbar there too. Vertical padding stays — it is the gap to the bands. */
  .lotics-popover__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    max-height: var(--lotics-popover-body-max-height, none);
    margin-inline: calc(-1 * var(--lotics-popover-inset));
  }

  .lotics-popover__body[data-scroll] {
    overflow-y: auto;
    overflow-x: hidden;
  }

  /*
   * FILLS the body: `maxHeight` says how tall the panel's middle is, and this box
   * is the only thing between that height and the caller's children.
   * `align-items: stretch` answers only the cross axis; the main axis is this.
   */
  .lotics-popover__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-grow: 1;
    min-width: 0;
    padding-inline: var(--lotics-popover-inset);
  }

  .lotics-popover__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-inline: calc(-1 * var(--lotics-popover-inset));
    margin-top: var(--lotics-popover-inset);
  }

  .lotics-popover__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-8);
    padding-inline: var(--lotics-popover-inset);
    padding-top: var(--lotics-popover-inset);
    justify-content: flex-end;
  }

  .lotics-popover__actions[data-align="start"] {
    justify-content: flex-start;
  }

  .lotics-popover__actions[data-align="space-between"] {
    justify-content: space-between;
  }

  .lotics-popover__close {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: var(--lotics-space-8);
  }

  /* ─── The sheet ───────────────────────────────────────────────────────── */

  /* WHY THE SHEET DISMISSES AT ALL: cancelling Floating UI's placement leaves
     the positioner spanning the whole viewport above the scrim, so a press meant
     for the scrim is not an outside press. The positioner passes presses through
     and the popup takes its own back. */
  .lotics-popover__positioner[data-sheet] {
    pointer-events: none;
  }

  .lotics-popover__popup[data-sheet] {
    pointer-events: auto;
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    max-width: none;
    max-height: 90vh;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    padding-bottom: var(--lotics-space-32);
    transform: translateY(0);
  }

  .lotics-popover__popup[data-sheet][data-starting-style],
  .lotics-popover__popup[data-sheet][data-ending-style] {
    opacity: 1;
    transform: translateY(100%);
  }
}