/*
 * THE RIGHT-DOCKED PANEL. Full-width below the 768 rung, because a 600px panel on
 * a phone is the whole screen with a sliver of scrim nobody can press.
 *
 * THE PANEL IS THE BAR'S GRID. The title, the pager and the close are the panel's
 * own children rather than a header box's, because the pager has to follow the
 * RECORD in the DOM while still being drawn up on the bar. Areas, so the reading
 * order and the drawn order are stated apart.
 *
 * The panel's gutter is stated on the title and the scroll area from the same pair
 * of rungs, so they sit on ONE left edge — the contract `DrawerScrollArea` keeps.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

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

  /* The box the panel docks IN — a row that pushes its one item to the right
     edge, which is what makes the panel's own width the only thing to state. */
  .lotics-drawer__viewport {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
    z-index: var(--lotics-z-overlay);
  }

  /*
   * THE TITLE IS THE LAST THING THE BAR GIVES UP. The pager and the two icon
   * buttons beside it are fixed widths, so the name is the only thing that can
   * give. Below the split the pager takes its own line and the name the full bar;
   * the close stays on the top line, where a reader reaches for it.
   *
   * THE BAR IS ROW ONE and its beat is 56, stated once for both shapes. The body
   * takes `minmax(0, 1fr)` — `auto` would size the row to the content and a long
   * record would push its own scroller past the panel.
   */
  .lotics-drawer__popup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(56px, auto) auto minmax(0, 1fr);
    grid-template-areas:
      "title close"
      "nav nav"
      "body body";
    align-items: center;
    width: 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);
    box-shadow: var(--lotics-shadow-panel);
  }

  /* One bar on a panel wide enough to hold all of it. */
  @media (min-width: 768px) {
    .lotics-drawer__popup {
      width: var(--lotics-drawer-width);
      grid-template-columns: minmax(0, 1fr) auto auto;
      grid-template-rows: minmax(56px, auto) minmax(0, 1fr);
      grid-template-areas:
        "title nav close"
        "body body body";
    }
  }

  .lotics-drawer__title {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-area: title;
    min-width: 0;
    padding-block: var(--lotics-space-16) var(--lotics-space-8);
    padding-inline-start: var(--lotics-space-16);
  }

  .lotics-drawer__nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    grid-area: nav;
    justify-self: start;
    gap: var(--lotics-space-2);
    padding-inline-start: var(--lotics-space-16);
    padding-block-end: var(--lotics-space-8);
  }

  /* On the bar it sits next to the title rather than under it, so the gutter is
     the pair's own and the panel's edge is the title's. */
  @media (min-width: 768px) {
    .lotics-drawer__nav {
      padding-block: var(--lotics-space-16) var(--lotics-space-8);
      padding-inline-start: var(--lotics-space-8);
    }
  }

  /* Short of the gutter by design: the close `IconButton` carries its own padding,
     so a full gutter would push its GLYPH inside the edge the title sits on. */
  .lotics-drawer__close {
    grid-area: close;
    margin-inline-end: var(--lotics-space-12);
  }

  /* The record itself — everything the panel's chrome is around. It STRETCHES
     against a bar row that centres its own contents. */
  .lotics-drawer__body {
    grid-area: body;
    align-self: stretch;
    min-height: 0;
  }

  .lotics-drawer__scroll-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: var(--lotics-space-16);
  }

  /* 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-drawer__scroll-area:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: calc(var(--lotics-ring-width) * -1);
  }

  .lotics-drawer__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    gap: var(--lotics-space-12);
    padding-block: var(--lotics-space-12);
    padding-inline: var(--lotics-space-16);
    border-top: 1px solid var(--border);
  }
}