/* Side panel — the layout's `side_panel` Turbo Frame (member sheet, artist page,
 * expense form…). One partial, three shapes:
 *   phone   : full-screen sheet over the page
 *   tablet  : drawer from the right, over the page
 *   desktop : docked on the right; the page reflows beside it
 * Open/close are links that load the frame and advance the URL (Back closes);
 * the sheet-focus controller moves focus in and handles Escape.
 */

@layer components {
  .side-panel__sheet {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    align-content: start;
    gap: 1.25rem;
    padding: max(1rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-surface);
    color: var(--color-ink);
    transition: translate 180ms ease, opacity 180ms ease;

    &:focus { outline: none; }

    /* Grid children default to their min-content width; forms must shrink. */
    & > * { min-width: 0; }

    @starting-style {
      opacity: 0;
      translate: 0 1.5rem;
    }

    @media (width >= 48rem) {
      inset: 0 0 0 auto;
      width: min(26rem, 100%);
      border-inline-start: 1px solid var(--color-border-interactive);
      box-shadow: -1.5rem 0 4rem oklch(0% 0 0 / 0.35);

      @starting-style {
        translate: 1.5rem 0;
      }
    }

    @media (width >= 80rem) {
      width: 28rem;
      box-shadow: none;
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  /* Desktop: dock instead of covering — the page makes room. */
  @media (width >= 80rem) {
    body:has(.side-panel__sheet) {
      padding-inline-end: 28rem;
    }
  }

  .side-panel__head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
  }

  .side-panel__heading {
    flex: 1;
    min-width: 0;
  }

  .side-panel__title {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
  }

  .side-panel__subtitle {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: 0.875rem;
  }

  .side-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-start;
    width: var(--touch-min);
    height: var(--touch-min);
    border-radius: var(--radius);
    color: var(--color-ink-muted);

    &:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }

    @media (hover: hover) {
      &:hover { color: var(--color-ink); background: color-mix(in oklch, var(--color-ink) 6%, transparent); }
    }
  }
}