/*
 * Page layouts: the signed-in app shell (core/app.html), the sign-in layout (core/auth.html)
 * and error pages. Layout beats components in the cascade, so it can place and hide them.
 */
@layer layout {

  /* ---------- App shell ---------- */
  .app { min-height: 100dvh; }
  @media (min-width: 960px) {
    .app { display: grid; grid-template-columns: 272px 1fr; }
  }

  .bp-skip {
    position: absolute; left: var(--space-4); top: var(--space-4); z-index: 100;
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
    background: var(--ink); color: var(--ink-inverse); font-weight: 600; text-decoration: none;
    transform: translateY(-200%);
  }
  .bp-skip:focus-visible { transform: none; }

  /* The sidebar column runs the full page height; the nav inside it sticks to the viewport.
     On small screens the column steps aside and the nav is a popover drawer. */
  .app-sidebar { display: contents; }
  .app-nav {
    display: flex; flex-direction: column; gap: var(--space-6);
    padding: var(--space-5);
    background: var(--paper-subtle);
  }
  .app-nav[popover] {
    inset: 0 auto 0 0; margin: 0; height: 100dvh; width: min(320px, 88vw);
    color: var(--ink); border: 0; border-right: 1px solid var(--line);
    box-shadow: var(--shadow-float);
  }
  .app-nav[popover]::backdrop { background: rgb(15 20 17 / .4); }
  @media (max-width: 959px) {
    .app-nav[popover]:not(:popover-open) { display: none; }
  }
  @media (min-width: 960px) {
    .app-sidebar { display: block; background: var(--paper-subtle); border-right: 1px solid var(--line); }
    .app-nav[popover] {
      display: flex; position: sticky; inset: auto; top: 0; width: auto; /* inset first: it resets top */
      height: 100dvh; box-shadow: none; overflow-y: auto;
      background: transparent; border-right: 0;
    }
    .app-nav-close, .app-nav-open { display: none; }
  }

  .app-brand { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .app-brand a { display: block; color: inherit; }
  .app-nav-section { display: grid; gap: var(--space-1); }
  .app-nav-section .bp-eyebrow { padding: 0 var(--space-3) var(--space-2); }
  .app-nav-link {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
    color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px;
    transition: background-color var(--bp-dur-quick) var(--bp-ease-tide);
  }
  .app-nav-link:hover { background: var(--paper-raised); }
  .app-nav-link[aria-current="page"] { background: var(--paper-raised); font-weight: 600; box-shadow: inset 3px 0 0 var(--forest); }
  .app-nav-link .icon { width: 18px; height: 18px; }
  .app-nav-count {
    margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: var(--radius-pill);
    background: var(--ink); color: var(--ink-inverse); font: 600 12px/18px var(--font-sans); text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .app-nav-footer { margin-top: auto; }
  .app-nav-wordmark { width: 72px; height: auto; color: var(--ink-muted); }

  .app-main { display: flex; flex-direction: column; min-width: 0; }
  .app-topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-3) var(--fluid-gutter);
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  .app-topbar-start { display: flex; align-items: center; gap: var(--space-3); }
  .app-content {
    flex: 1;
    width: min(100%, 88rem);
    padding: var(--space-7) var(--fluid-gutter) var(--space-9);
    display: grid; align-content: start; gap: var(--fluid-stack);
  }
  /* Grid children default to min-width: auto, so one long unbreakable string (a URL) would
     widen the whole page on phones. Let content shrink and wrap instead. */
  .app-content > * { min-width: 0; }

  /* Account button in the top bar (opens the user menu). */
  .avatar {
    display: inline-grid; place-items: center; width: 40px; height: 40px;
    border-radius: var(--radius-pill); background: var(--forest); color: var(--on-forest);
    font: 600 14px/1 var(--font-sans); letter-spacing: .02em;
  }
  .user-btn {
    display: inline-flex; align-items: center; gap: var(--space-3);
    padding: 4px 12px 4px 4px; border-radius: var(--radius-pill);
    border: 1px solid var(--line-control); background: transparent; color: var(--ink);
    font-weight: 600; font-size: 14px; cursor: pointer;
  }
  .user-btn:hover { border-color: var(--line-strong); }
  @media (max-width: 599px) { .user-btn-name { display: none; } .user-btn { padding-right: 4px; } }

  /* ---------- Sign-in layout (core/auth.html) ---------- */
  .auth { display: grid; min-height: 100dvh; grid-template-columns: 1fr; }
  @media (min-width: 960px) { .auth { grid-template-columns: 1fr 1fr; } }
  .auth-band {
    --tidelines-height: clamp(64px, 3rem + 6vw, 140px);
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8);
    padding: var(--space-7) var(--fluid-gutter) calc(var(--tidelines-height) + var(--space-5));
    background: var(--forest); color: var(--on-forest);
  }
  .auth-band .connect-lockup { color: var(--on-forest); }
  .auth-band .bp-meta { color: var(--on-forest-muted); }
  .auth-band-title { font-size: var(--fluid-display-lg); line-height: .98; font-weight: 700; letter-spacing: -.04em; max-width: 12ch; }
  .auth-band-lead { color: var(--on-forest-muted); font-size: var(--fluid-lead); font-weight: 300; max-width: 40ch; margin-top: var(--space-4); }
  .auth-band-tide { position: absolute; inset: auto 0 0 0; color: var(--on-forest); pointer-events: none; }
  .auth-panel { display: grid; place-items: center; padding: var(--space-8) var(--fluid-gutter); }
  .auth-form { width: min(100%, 420px); display: grid; gap: var(--space-6); }
  /* Quiet secondary action under an auth form's button. */
  .auth-link {
    justify-self: center; padding: var(--space-1) var(--space-2);
    font-size: 14px; font-weight: 500; color: var(--ink-muted);
    text-decoration: underline; text-decoration-color: var(--line-control);
    text-decoration-thickness: 1px; text-underline-offset: 5px;
    transition: color var(--bp-dur-quick) var(--bp-ease-tide), text-decoration-color var(--bp-dur-quick) var(--bp-ease-tide);
  }
  .auth-link:hover { color: var(--ink); text-decoration-color: currentColor; }

  /* ---------- Error pages ---------- */
  .error-page { display: grid; place-items: center; min-height: 100dvh; padding: var(--space-7) var(--fluid-gutter); }
  .error-page-inner { display: grid; gap: var(--space-5); justify-items: start; max-width: 40rem; }
  .error-code { font: 700 var(--fluid-display-xl)/.9 var(--font-poster); letter-spacing: -.04em; color: var(--sage); }

} /* @layer layout */