/* App shell: a dark chrome frame (sidebar + topbar) around the sheet, a
   rounded content plane. The chrome containers set `color-scheme: dark`, so
   tokens inside them resolve dark in both schemes; see "App chrome" in
   application.css. */
@scope (.page-layout) {
  :scope {
    display: grid;
    /* `minmax(0, 1fr)`, not `1fr`: a plain `1fr` never shrinks below its
       content's min-content, so a long breadcrumb in the topbar widened the
       column past the viewport on tablets with the sidebar open. */
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    /* `auto 1fr` + min-height:100dvh adds leftover free-space under content
       and creates a blank scroll region. Size rows to content instead.
       `align-content: start` stops leftover viewport height from stretching
       the auto topbar row on short pages (audit inspection, empty shows). */
    grid-template-rows: auto auto;
    align-content: start;
    grid-template-areas:
      "sidebar topbar"
      "sidebar main";
    min-height: 100dvh;
    background: var(--color-chrome);
    transition: grid-template-columns 0.2s ease;
  }

  /* Full-bleed boards need a definite height so `1fr` can fill the viewport. */
  :scope:has(.kanban-board, .list-page:not(.insights-page, .notes-page), .weekly-calendar) {
    height: 100dvh;
    overflow: hidden;
    grid-template-rows: auto 1fr;
  }

  .page-layout__sidebar {
    grid-area: sidebar;
    /* Fixed (not sticky): sticky sidebars often inflate scrollHeight in
       Chromium once you overscroll past the content end. The grid column
       still reserves width via template-columns. */
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--sidebar-width);
    z-index: var(--z-10);
    overflow-x: hidden;
    overflow-y: auto;
    scroll-padding-block: var(--topbar-height) var(--space-4xl);
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgb(120 120 135 / 0.35) transparent;
    color-scheme: dark;
    background: var(--color-chrome);
    border-inline-end: 1px solid var(--color-chrome-border);
    transition: width 0.2s ease;
  }

  .page-layout__topbar {
    grid-area: topbar;
    position: sticky;
    top: 0;
    z-index: var(--z-10);
    block-size: var(--topbar-height);
    color-scheme: dark;
    background: var(--color-chrome);

    /* The sheet's top corners, pinned under the topbar so they stay rounded
       while the page scrolls beneath. The outer shadow paints chrome around
       the rounded box; clip-path keeps only the two corner wedges. The
       border draws the dark-mode rim along the same curve. */
    &::after {
      content: "";
      position: absolute;
      inset-block-start: 100%;
      inset-inline: 0 var(--sheet-gap);
      block-size: var(--sheet-radius);
      border: 1px solid var(--color-sheet-rim);
      border-block-end: 0;
      border-start-start-radius: var(--sheet-radius);
      border-start-end-radius: var(--sheet-radius);
      box-shadow: 0 0 0 var(--sheet-radius) var(--color-chrome);
      clip-path: inset(0);
      pointer-events: none;
    }
  }

  .page-layout__main {
    grid-area: main;
    min-width: 0;
    min-block-size: calc(100dvh - var(--topbar-height) - var(--sheet-gap));
    margin: 0 var(--sheet-gap) var(--sheet-gap) 0;
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    flex-direction: column;
    background: var(--color-background);
    border: 1px solid var(--color-sheet-rim);
    border-radius: var(--sheet-radius);

    &:has(.kanban-board, .list-page:not(.insights-page, .notes-page), .weekly-calendar) {
      min-height: 0;
      overflow: hidden;
    }
  }
  .page-layout__mobile-header {
    display: none;
  }

  .page-layout__backdrop {
    display: none;
  }

  .page-layout__right-drawer {
    display: none;
  }

  .page-layout__backdrop--right {
    display: none;
  }

  @media (width >= 48rem) {
    :scope[data-sidebar-collapsed] {
      --sidebar-width: var(--sidebar-width-collapsed);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :scope,
    .page-layout__sidebar {
      transition: none;
    }
  }

  @media (width < 48rem) {
    /* Phones drop the frame: the sheet runs edge to edge under a chrome
       header, so the layout ground is the sheet colour. */
    :scope {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto;
      grid-template-areas:
        "mobile-header"
        "main";
      background: var(--color-background);
    }

    :scope:has(.kanban-board, .list-page:not(.insights-page, .notes-page), .weekly-calendar) {
      grid-template-rows: auto 1fr;
    }

    .page-layout__main {
      min-block-size: 0;
      margin: 0;
      padding: var(--space-lg);
      border: 0;
      border-radius: 0;
    }

    .page-layout__mobile-header {
      grid-area: mobile-header;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-md);
      position: sticky;
      top: 0;
      z-index: var(--z-20);
      padding: var(--space-sm) var(--space-lg);
      color-scheme: dark;
      color: var(--color-chrome-text);
      background: var(--color-chrome);
    }

    .mobile-header__account-switcher {
      flex: 1;
      max-width: 240px;
      margin-inline: auto;
      display: flex;
      justify-content: center;
    }

    .mobile-account-select {
      width: 100%;
    }

    .gear-toggle {
      all: unset;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-xs);
      border-radius: var(--radius-md);
      color: var(--color-chrome-text-muted);
      cursor: pointer;

      &:hover {
        color: var(--color-chrome-text-strong);
        background: var(--color-chrome-hover);
      }

      &:focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-ring-offset);
      }

      .gear-icon {
        width: 1.5rem;
        height: 1.5rem;
        color: inherit;
      }
    }

    .page-layout__topbar {
      display: none;
    }

    .page-layout__sidebar {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      width: var(--sidebar-width);
      z-index: var(--z-40);
      transform: translateX(-100%);
      transition: transform 0.2s ease;
      box-shadow: var(--shadow-xl);

      &[data-sidebar-open] {
        transform: translateX(0);
      }
    }

    .page-layout__backdrop {
      position: fixed;
      inset: 0;
      background: var(--color-surface-overlay);
      z-index: var(--z-30);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;

      &[data-sidebar-open] {
        display: block;
        opacity: 1;
        pointer-events: auto;
      }
    }

    .page-layout__right-drawer {
      display: block;
      position: fixed;
      inset-block: 0;
      inset-inline-end: 0;
      width: var(--spacing-64);
      z-index: var(--z-40);
      transform: translateX(100%);
      transition: transform 0.2s ease;
      color-scheme: dark;
      background: var(--color-chrome);
      box-shadow: var(--shadow-xl);

      &[data-drawer-open] {
        transform: translateX(0);
      }
    }

    .page-layout__backdrop--right {
      display: block;
      position: fixed;
      inset: 0;
      background: var(--color-surface-overlay);
      z-index: var(--z-30);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;

      &[data-drawer-open] {
        opacity: 1;
        pointer-events: auto;
      }
    }
  }
}

@scope (.page-layout__mobile-header) {
  .menu-toggle {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs);
    border-radius: var(--radius-md);
    color: var(--color-chrome-text-muted);
    cursor: pointer;

    &:hover {
      color: var(--color-chrome-text-strong);
      background: var(--color-chrome-hover);
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }
}