/* v2/app/core.css: layout of the v2 app shell (issue 390). Only --v2-* variables; every component's own look is in ../components.css.
 * Measured on the Figma frames: header padded 24 (phone) / 48 (wide), one 720px column, ModeToggle left on a phone and centred on wide,
 * 32 from the toggle to the first line, 16 between cards. */

:root[data-static] *, :root[data-static] *::before, :root[data-static] *::after { animation: none !important; transition: none !important; }

.v2a { min-height: 100vh; }
.v2a-skip { position: absolute; left: var(--v2-space-16); top: -80px; z-index: var(--v2-z-skip); padding: var(--v2-space-12) var(--v2-space-16); border-radius: var(--v2-radius-pill); background: var(--v2-chipon); color: var(--v2-chiponink); font: var(--v2-type-control); text-decoration: none; }
.v2a-skip:focus { top: var(--v2-space-8); }

.v2a-bar { padding: var(--v2-space-8) var(--v2-space-24) 0; }
.v2a-col { position: relative; max-width: 768px; margin: 0 auto; padding: var(--v2-space-32) var(--v2-space-24) var(--v2-space-48); }
.v2a-modes { margin-bottom: var(--v2-space-28); }
.v2a-modes:empty { display: none; }
.v2a-modes .v2-chiprow { flex-wrap: nowrap; }
.v2a-main { outline: none; }
.v2a-main:focus-visible { outline: none; }
.v2a-col.has-pop .v2a-main { visibility: hidden; } /* the open menu or picker is the whole page, as drawn in Figma */
.v2a-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--v2-space-8); margin: 0 0 var(--v2-space-12); font: var(--v2-type-default); color: var(--v2-label); }
.v2a-meta .v2-badge { flex: none; }

/* The popover (site picker, AppMenu) opens over the page, under the ModeToggle. */
.v2a-popwrap { position: relative; height: 0; }
.v2a-pop { position: absolute; top: var(--v2-space-4); left: 0; right: 0; z-index: var(--v2-z-popover); }
.v2a-pop[hidden] { display: none; }
/* A long site list (17 on one account) scrolls inside the card instead of running off the page. 100vh first for old browsers. */
.v2a-pop > .v2-card { max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain; }
.v2a-theme { padding: var(--v2-space-12) 0 var(--v2-space-16); }

.v2a-toasts { position: fixed; left: var(--v2-space-24); right: var(--v2-space-24); top: calc(var(--v2-space-48) + var(--v2-space-16)); z-index: var(--v2-z-toast); /* top, under the header: a bottom toast covered the Sheet and FormBar buttons */ display: flex; flex-direction: column; gap: var(--v2-space-8); max-width: 480px; margin: 0 auto; pointer-events: none; }

.v2a-pophead { padding: var(--v2-space-14) 0; }
.v2a-pophead p { margin: 0; }
.v2a-pophead-label { font: var(--v2-type-eyebrow); color: var(--v2-body); }
.v2a-pophead-name { font: var(--v2-type-title); color: var(--v2-cardink); overflow-wrap: anywhere; }
.v2a-pophead-note { font: var(--v2-type-small); color: var(--v2-body); }
.v2a-left, .v2a-rail { display: none; }

@media (min-width: 900px) {
  .v2a-bar { padding: var(--v2-space-8) var(--v2-space-48) 0; }
  .v2a-modes { display: flex; justify-content: center; }
  .v2-modetoggle { width: auto; margin: 0; }
  /* The menu and the site picker are an anchored dropdown under the avatar / hamburger (top-right, over the page), never a card on an empty page (issue 381 owner feedback). */
  .v2a { position: relative; }
  .v2a-col, .v2a-popwrap { position: static; }
  .v2a-pop { position: absolute; top: 64px; right: var(--v2-space-48); left: auto; width: 360px; max-width: calc(100vw - 2 * var(--v2-space-24)); }
  .v2a-pop .v2-card { box-shadow: var(--v2-shadow-card), 0 0 0 1px var(--v2-hairline); }
  .v2a-pop > .v2-card { max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); }
  .v2a-col.has-pop .v2a-main { visibility: visible; }
}

/* DESKTOP SHELL (>= 1100px, issue 381). Balance rule (owner, 2026-10-24): ONE centred column. Feed, Ask and Settings use no rails at all; the column is a comfortable
   832px (784 of content), the KPI grid and the Quick asks live IN it. Only a page that needs a dock (Explore's controls panel on a view) opts into a right rail via
   ABV2App.mount rail / left: the grid is then [left] [main] [right]; with no left it is two zones. */
@media (min-width: 1100px) {
  .v2a-col { max-width: 832px; }
  .v2a-col.has-rail { display: grid; max-width: 1180px; grid-template-columns: minmax(0, 720px) 380px; column-gap: var(--v2-space-32); justify-content: center; align-items: start; }
  .v2a-col.has-rail.has-left { max-width: 1424px; grid-template-columns: 260px minmax(0, 680px) 380px; column-gap: var(--v2-space-28); }
  .v2a-col.has-rail > .v2a-modes, .v2a-col.has-rail > .v2a-popwrap { grid-column: 1 / -1; }
  .v2a-col.has-rail > .v2a-modes { margin-bottom: var(--v2-space-32); }
  .v2a-col.has-rail > .v2a-main { min-width: 0; }
  .v2a-left, .v2a-rail { display: flex; flex-direction: column; gap: var(--v2-space-16); position: sticky; top: var(--v2-space-16); min-width: 0; }
  .v2a-left:empty, .v2a-rail:empty { display: none; }
  .v2a-col.has-pop .v2a-left, .v2a-col.has-pop .v2a-rail { visibility: visible; }
  .v2a-rail .v2-composer-card { padding: var(--v2-space-16); }
  .v2a-rail .v2-composer-input { min-height: 96px; }
  .v2a-rail .v2-sectionblock { margin-top: var(--v2-space-8); }
}

/* The 2x2 KPI grid: in the main column, above the findings, on every width (phone tiles are compact, desktop tiles take the desktop type tokens). */
.v2a-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v2-space-12); margin-bottom: var(--v2-space-16); }
.v2a-kpis > .v2-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; } /* 1 or 3 tiles: the odd one takes the whole row */
@media (min-width: 900px) {
  .v2a-kpis { gap: var(--v2-space-16); }
}