/*
 * Layout: the app shell and the few arrangements that recur, as named classes
 * driven by a `--gap` custom property. The navbar is a component
 * (components/navbar.css says why); what goes inside the sidebar is
 * components/sidebar.css.
 *
 *   .app            the shell's root: the page ground behind every card
 *   .app--pattern   the marketing and auth pages' tiled background, softened;
 *                   the image arrives as --pattern, because its digested path
 *                   is data
 *   .app__main      everything left of the desktop sidebar
 *   .page           the content column's gutters
 *   .sidebar        the right-hand column, from 1650px only
 *   .drawer         the same sidebar below 1650px, as a <dialog> that slides in
 *   .stack          children in a column
 */
@layer layout {
  .app {
    min-block-size: 100dvh;
    background-color: var(--color-ground);
  }

  .app--pattern {
    background-image:
      linear-gradient(
        color-mix(in srgb, var(--color-ground) 88%, transparent),
        color-mix(in srgb, var(--color-ground) 88%, transparent)
      ),
      var(--pattern);
  }

  .app__main {
    min-inline-size: 0;

    @media (width >= 1650px) {
      padding-inline-end: var(--sidebar-width);
    }
  }

  .page {
    padding: var(--space-md) var(--gutter) var(--space-3xl);
  }

  .sidebar {
    display: none;

    @media (width >= 1650px) {
      position: fixed;
      inset-block: 0;
      inset-inline-end: 0;
      z-index: 50;
      display: flex;
      flex-direction: column;
      inline-size: var(--sidebar-width);
      border-inline-start: var(--rule-width) solid var(--color-rule);
      background-color: var(--color-surface);
    }
  }

  /*
   * The drawer is a native <dialog>: the focus trap, Escape and ::backdrop
   * come free. The `dialog` controller sets `data-open` on the panel a frame
   * after showModal(), which is what the slide transitions on.
   */
  .drawer {
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100%;
    max-block-size: none;
    margin: 0;
    background: transparent;

    &::backdrop {
      background-color: var(--color-backdrop);
    }

    @media (width >= 1650px) {
      display: none;
    }
  }

  .drawer__panel {
    position: relative;
    display: flex;
    inline-size: 100%;
    max-inline-size: 20rem;
    block-size: 100%;
    translate: -100% 0;
    transition: translate var(--duration-slow) ease-in-out;

    &[data-open] {
      translate: 0 0;
    }
  }

  .drawer__close {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-start: 100%;
    display: grid;
    place-items: center;
    inline-size: var(--target-min);
    block-size: var(--target-min);
    margin-inline-start: var(--space-xs);
    border-radius: var(--radius-md);

    &:hover {
      background-color: color-mix(in srgb, var(--color-ink-inverse) 12%, transparent);
    }
  }

  .drawer__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    background-color: var(--color-surface);
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap, var(--space-md));
  }
}