/*
 * THE CENTRED CARD OVER A SCRIM.
 *
 * Mobile-first, on the one 768px rung `use_screen_size` and the type ramp already
 * share: below it a card is the BOTTOM SHEET (`overlay_sheet.ts`), full width,
 * risen from the bottom edge; above it, the card the five `--lotics-dialog-*`
 * measurements describe. Reading the viewport rather than a container is
 * deliberate — an overlay fills the window whatever box opened it.
 *
 * THE SHEET IS AS TALL AS WHAT IS IN IT, up to the screen: a sheet holding one
 * select is otherwise a screenful of white with its Done a screen away from the
 * control it confirms. A form long enough to need the screen still gets it.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-dialog__backdrop {
    position: fixed;
    inset: 0;
    background-color: var(--lotics-scrim);
    backdrop-filter: blur(3px);
    z-index: var(--lotics-z-overlay);
  }

  /* The box the card is placed IN, so the card's own `%` measurements resolve
     against the viewport. The sheet rises from the BOTTOM edge, the half of the
     screen a thumb reaches; a card above the rung states its own offset from the
     top. */
  .lotics-dialog__viewport {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    z-index: var(--lotics-z-overlay);
  }

  @media (min-width: 768px) {
    .lotics-dialog__viewport {
      align-items: flex-start;
    }
  }

  .lotics-dialog__popup {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    /* AS TALL AS WHAT IS IN IT, CAPPED AT THE SCREEN — see the head of this
       sheet. `min-height: 0` is what lets the scroller inside it give. */
    height: auto;
    max-height: 100%;
    min-height: 0;
    background-color: var(--card);
    /* A sticky register head inside this surface paints the surface's ground. */
    --lotics-register-ground: var(--card);
    color: var(--lotics-ink-default);
    border-radius: 0;
    /* The card clips its own corners, and the scroll area inside it is what
       scrolls — a popup that scrolled would take the header with it. */
    overflow: hidden;
  }

  /* THE TAKEOVER IS THE SCREEN, at every width — edge to edge, square corners, no
     offset — and it paints no scrim, because an opaque surface over the viewport
     has nothing left to dim. It is the one surface that reads no height off its
     content, and its header carries the hairline that says where the scroll
     starts. */
  .lotics-dialog__popup[data-surface="takeover"] {
    height: 100%;
  }

  .lotics-dialog__popup[data-surface="takeover"] .lotics-dialog__header {
    border-bottom: 1px solid var(--border);
  }

  /* THE SHEET'S OWN EDGE — the two corners facing the page it rose over. Square,
     a sheet shorter than the screen reads as the screen having been cut off. */
  .lotics-dialog__popup:not([data-surface="takeover"]) {
    border-start-start-radius: var(--lotics-radius-overlay);
    border-start-end-radius: var(--lotics-radius-overlay);
  }

  @media (min-width: 768px) {
    .lotics-dialog__popup:not([data-surface="takeover"]) {
      margin-top: var(--lotics-dialog-offset-top);
      width: var(--lotics-dialog-width);
      height: var(--lotics-dialog-height);
      max-width: var(--lotics-dialog-max-width);
      max-height: var(--lotics-dialog-max-height);
      border-radius: var(--lotics-radius-overlay);
    }
  }

  .lotics-dialog__close {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    padding-top: var(--lotics-space-16);
    padding-bottom: var(--lotics-space-8);
    padding-inline: var(--lotics-dialog-gutter);
  }

  .lotics-dialog__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    gap: var(--lotics-space-8);
    min-height: 56px;
    padding-bottom: var(--lotics-space-8);
    padding-inline: var(--lotics-dialog-gutter);
  }

  .lotics-dialog__title {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    /* `flex: 1` alone does NOT shrink below its content, so a long title pushes
       the header wider than the card. This lets it give way. */
    min-width: 0;
  }

  .lotics-dialog__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-8);
  }

  /* `flex: 1 1 auto`, never `flex: 1`: the sheet below the rung is as tall as its
     content, and a zero BASIS in an auto-height column contributes nothing to that
     height — the body collapsed to a hairline between header and footer. */
  .lotics-dialog__scroll-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    /* A scroller clips, so the FIRST child sat flush against the boundary and lost
       the outer half of its focus ring. The ring is the FLOOR here: this is
       separation from the header, which already pays 8 below itself. The bottom is
       scroll RUNOUT — a different job, so a different rung. */
    padding-top: var(--lotics-space-8);
    padding-bottom: var(--lotics-space-24);
    padding-inline: var(--lotics-dialog-gutter);
  }

  /* A scroller with no focusable content is a tab stop, so a keyboard reader can
     scroll it, and it paints the kit's ring. Drawn INSIDE: the surface clips its
     own corners, and an outline at offset 0 would lose its outer half. */
  .lotics-dialog__scroll-area:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: calc(var(--lotics-ring-width) * -1);
  }

  .lotics-dialog__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    gap: var(--lotics-space-8);
    padding-block: var(--lotics-space-16);
    padding-inline: var(--lotics-dialog-gutter);
    border-top: 1px solid var(--border);
  }

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

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

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

}