@layer porchlight {
  @layer reset, tokens, themes, base, layout, components, utilities, enhancements, print;
}

@layer porchlight.layout {
  :where(.pl-l-stack) {
    gap: var(--pl-l-stack-gap, var(--pl-space-4));
    flex-direction: column;
    display: flex;
  }

  :where(.pl-l-cluster) {
    align-items: var(--pl-l-cluster-align, center);
    justify-content: var(--pl-l-cluster-justify, flex-start);
    gap: var(--pl-l-cluster-gap, var(--pl-space-3));
    flex-wrap: wrap;
    display: flex;
  }

  @supports (reading-flow: flex-visual) {
    :where(.pl-l-cluster[data-reading-flow="visual"], .pl-l-cluster[data-reading-flow="true"], .pl-l-cluster[data-reading-flow]) {
      reading-flow: flex-visual;
    }
  }

  :where(.pl-l-grid) {
    gap: var(--pl-l-grid-gap, var(--pl-space-4));
    grid-template-columns: repeat(auto-fit,
      minmax(min(var(--pl-l-grid-min, 16rem), 100%), 1fr));
    display: grid;
  }

  @supports (reading-flow: grid-rows) {
    :where(.pl-l-grid[data-reading-flow="rows"], .pl-l-grid[data-reading-flow="true"], .pl-l-grid[data-reading-flow]) {
      reading-flow: grid-rows;
    }

    :where(.pl-l-grid[data-reading-flow="columns"]) {
      reading-flow: grid-columns;
    }
  }

  @supports (grid-template-rows: subgrid) {
    :where(.pl-l-grid[data-subgrid="rows"]) {
      grid-template-rows: repeat(var(--pl-l-grid-rows, 3), auto);
    }
  }

  :where(.pl-l-sidebar) {
    gap: var(--pl-l-sidebar-gap, var(--pl-space-4));
    grid-template-columns: minmax(0, var(--pl-l-sidebar-size, 16rem))
      minmax(0, 1fr);
    display: grid;
  }

  @media (width < 48rem) {
    :where(.pl-l-sidebar) {
      grid-template-columns: 1fr;
    }
  }

  @container (inline-size < 48rem) {
    :where(.pl-l-sidebar) {
      grid-template-columns: 1fr;
    }
  }

  :where(.pl-l-page) {
    inline-size: min(100% - 2 * var(--pl-space-4), var(--pl-l-page-max, 88rem));
    margin-inline: auto;
  }

  :where(.pl-l-scroll-area) {
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    overflow: auto;
  }

  :where(.pl-l-app-shell) {
    grid-template: "topbar topbar"
                   "sidebar main" minmax(0, 1fr)
                   / auto minmax(0, 1fr);
    block-size: 100dvb;
    display: grid;
  }

  :where(.pl-l-app-shell__topbar) {
    z-index: var(--pl-z-sticky);
    grid-area: topbar;
    position: sticky;
    inset-block-start: 0;
  }

  :where(.pl-l-app-shell__topbar[data-glass]) {
    background: color-mix(in oklab, var(--pl-color-surface), transparent 18%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-block-end: 1px solid
      color-mix(in oklab, var(--pl-color-border), transparent 50%);
  }

  :where(.pl-l-app-shell__sidebar) {
    inline-size: var(--pl-app-sidebar-size, 16rem);
    overflow-inline: clip;
    transition: inline-size var(--pl-duration-2) var(--pl-ease-standard);
    grid-area: sidebar;
    container: pl-l-app-sidebar / inline-size;
  }

  :where(.pl-l-app-shell__sidebar[data-sidebar="collapsed"]) {
    inline-size: var(--pl-app-sidebar-collapsed, 3.5rem);
  }

  :where(.pl-l-app-shell__main) {
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    grid-area: main;
    min-inline-size: 0;
    overflow: auto;
    container-type: inline-size;
  }

  @media (width < 60rem) {
    :where(.pl-l-app-shell) {
      grid-template: "topbar"
                     "main" minmax(0, 1fr)
                     / minmax(0, 1fr);
    }

    :where(.pl-l-app-shell__sidebar) {
      display: none;
    }
  }

  :where(.pl-l-columns) {
    --pl-l-columns-width: 16rem;
    columns: var(--pl-l-columns-width) var(--pl-l-columns-count, auto);
    column-gap: var(--pl-l-columns-gap, var(--pl-space-4));
  }

  :where(.pl-l-columns > *) {
    break-inside: avoid;
    margin-block-end: var(--pl-l-columns-gap, var(--pl-space-4));
  }

  :where(.pl-l-container) {
    inline-size: min(100% - 2 * var(--pl-l-container-pad, var(--pl-space-4)),
      var(--pl-l-container-max, 80rem));
    margin-inline: auto;
  }

  :where(.pl-l-inset) {
    inline-size: min(100%, var(--pl-l-inset-max, 48rem));
    margin-inline: auto;
  }
}