/* App shell — what frames every crew page: the insets, the skip link, the
 * crew header, the Actions button and the context column. The five
 * destinations live in destinations.css.
 *   phone   < 48rem : header on top, bottom bar
 *   tablet  48–80rem: header on top (no Actions: the rail has it), icon rail
 *   desktop ≥ 80rem : sidebar; the header shrinks to the bell pinned beside
 *                     the sidebar's wordmark; optional right context column
 * The document keeps scrolling. The shell publishes its size as insets that
 * full-height pages (chat, map) and fixed docks consume:
 *   --top-nav-inset, --bottom-nav-inset, --side-nav-inset
 * Only the shell reads the viewport. Screens inside <main> use @container main.
 */

@layer components {
  :root {
    --top-nav-inset: 4rem;
    --bottom-nav-inset: 0px;
    --side-nav-inset: 0px;
  }

  body.has-shell {
    --bottom-nav-inset: 4.5rem;
    padding-block-end: var(--bottom-nav-inset);
    padding-inline-start: var(--side-nav-inset);
  }

  .page-main {
    container: main / inline-size;

    &:focus { outline: none; }
  }

  /* ── Skip link ── */

  .skip-link {
    position: fixed;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-ink);
    font-weight: 600;
    translate: 0 -200%;

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

  /* ── Header ── */

  .app-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: var(--top-nav-inset);
    padding-inline: clamp(0.5rem, 3vw, 1.5rem);
    background: color-mix(in oklch, var(--color-canvas) 88%, transparent);
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    border-block-end: 1px solid color-mix(in oklch, var(--color-border) 60%, transparent);
  }

  .app-header__back {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    background: none;
    border: none;
    color: var(--color-ink-muted);
    cursor: pointer;
  }

  @media (display-mode: standalone) {
    .app-header__back { display: inline-flex; }
  }

  .app-header__crew {
    flex: 1;
    min-width: 0;

    & .crew-selector__trigger { max-width: 100%; }
    & .crew-selector__name { max-width: none; min-width: 0; }
  }

  .app-header__end {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .app-header__bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }

  /* ── Actions button (header pill, rail square, sidebar row) ── */

  .actions-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: var(--touch-min);
    padding-inline: 0.875rem 1rem;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-link);
    color: var(--color-canvas);
    font: inherit;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 150ms ease;

    & svg {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
    }

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

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

  /* ── Context column (desktop only) ── */

  .context-column {
    display: none;
  }

  /* ── Tablet ── */

  @media (width >= 48rem) {
    :root {
      --side-nav-inset: 5rem;
    }

    body.has-shell {
      --bottom-nav-inset: 0px;
    }

    .app-header__actions { display: none; }
  }

  /* ── Desktop ── */

  @media (width >= 80rem) {
    :root {
      --side-nav-inset: 15rem;
      --top-nav-inset: 0px;
    }

    .app-header {
      position: fixed;
      inset-block-start: 0.875rem;
      inset-inline-start: calc(var(--side-nav-inset) - 3.5rem);
      z-index: 21;
      min-height: 0;
      padding: 0;
      background: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: none;
    }

    .app-header__back,
    .app-header__crew {
      display: none;
    }

    .app-body:has(> .context-column) {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 20rem;
    }

    .context-column {
      display: block;
      position: sticky;
      inset-block-start: 0;
      align-self: start;
      height: 100dvh;
      overflow-y: auto;
      background: var(--color-surface);
      border-inline-start: 1px solid var(--color-border);
    }
  }
}