/* PestScope — small additions on top of components.css.
   Shell switching is component-driven (AppShell + Mobile/Tablet/DesktopShell).
   This file only carries:
     1. view-switcher visibility (only ≥1024 px)
     2. tablet page-padding modifier
     3. public/login shell wrapper */

/* ── View-switcher: only desktop (§02) ── */
.view-switcher,
.view-type-switcher { display: none; }
@media (min-width: 1024px) {
  .view-switcher,
  .view-type-switcher { display: inline-flex; }
}

/* ── Tablet (768–1023 px) page padding ── */
.app-shell__page--tablet { padding: var(--space-lg); max-width: none; }

/* ── Settings full-bleed escape:
   When the page hosts a .settings-shell, drop the .app-shell__page padding/
   max-width so the rail can sit flush against the shell sidebar (matches the
   handoff). Uses :has() so each viewport keeps its native page padding when a
   different page is rendered. */
.app-shell__page:has(.settings-shell),
.app-shell__page--tablet:has(.settings-shell) {
  padding: 0;
  max-width: none;
}

/* ── Mobile shell must be a containing block so the absolutely-positioned drawer,
   scrim and bottom-nav clip inside it instead of extending past the viewport. */
.mobile-shell { position: relative; }

/* ── Mobile topbar action-overlay: positions a page-rendered button visually inside the topbar
   trailing slot. Lives in the interactive page tree so @onclick works (SectionOutlet doesn't
   cross render-mode boundaries cleanly). Pages opt-in by rendering <div class="mobile-topbar-action">. */
.mobile-topbar-action {
  display: none;
}
@media (max-width: 767px) {
  .mobile-topbar-action {
    position: fixed;
    top: 6px;
    right: 6px;
    z-index: 21;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── Rail footer: stack avatar + icon-buttons vertically (64 px wide) ── */
.sidebar--rail .user-card { flex-direction: column; gap: 4px; }
.sidebar--rail .sidebar__footer form { display: contents; }

/* ── Rail tooltips: let them overflow without inducing scrollbars on the sidebar.
   The icon nav fits in viewport height anyway, so vertical scroll isn't needed. */
.sidebar--rail { overflow: visible; }

/* ── FAB primary (rendered by <Fab>): hidden on desktop, visible <1024px ── */
.fab-primary {
  width: 56px;
  height: 56px;
  background: var(--primary);
  color: var(--text-on-primary);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  border: 0;
  position: fixed;
  z-index: 22;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.fab-primary:hover { background: var(--primary-hover); }
.fab-primary:active { transform: scale(0.96); }
.fab-primary svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 1023px) {
  .fab-primary { display: inline-flex; }
}
.fab-primary--always { display: inline-flex !important; }

/* ── List-row leading slot variants (compact list views) ── */
.dot--lg { width: 12px; height: 12px; }
.dot--neutral { background: var(--text-tertiary); }

.list-row__type-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.list-row__type-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* ── Login / public pages — no shell ── */
.public-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: var(--page-bg);
}