/* ═══════════════════════════════════════════════════════════════════
   SHELL.CSS — the single source of truth for everything that must be
   pixel-identical on every page: container, header, logo, toggles.
   Loaded AFTER each page's inline styles; !important settles all fights.
   ═══════════════════════════════════════════════════════════════════ */

/* scrollbar never shifts the layout */
html{scrollbar-gutter:stable !important;overflow-y:scroll !important}

/* ONE container width everywhere */
.wrap{max-width:1080px !important;margin:0 auto !important;
  padding-left:24px !important;padding-right:24px !important}

/* ONE header: fixed 64px, never wraps, identical spacing */
.topbar{display:flex !important;align-items:center !important;justify-content:space-between !important;
  height:64px !important;min-height:64px !important;max-height:64px !important;
  padding:0 !important;margin:0 !important;gap:16px !important;
  flex-wrap:nowrap !important;border-bottom:1px solid var(--line) !important}

/* ONE logo */
.brandmark{display:flex !important;align-items:center !important;gap:10px !important;
  font-family:var(--mono) !important;font-size:12px !important;letter-spacing:.1em !important;
  color:var(--text) !important;text-transform:none !important;white-space:nowrap !important}
.brandmark .eye{width:24px !important;height:24px !important;border:1px solid var(--amber) !important;
  border-radius:50% !important;display:grid !important;place-items:center !important;flex-shrink:0}
.brandmark .eye::after{content:"" !important;width:7px !important;height:7px !important;
  border-radius:50% !important;background:var(--amber) !important;animation:none !important;transform:none !important}

/* ONE theme toggle — fixed width so the ☾/☀ label change never nudges neighbors */
.theme-toggle{font-family:var(--mono) !important;font-size:11px !important;
  padding:6px 0 !important;width:76px !important;min-width:76px !important;text-align:center !important;
  border:1px solid var(--line) !important;border-radius:20px !important;background:transparent !important;
  color:var(--dim) !important;cursor:pointer !important;flex-shrink:0}
.theme-toggle:hover{border-color:var(--amber) !important;color:var(--amber) !important}

/* app nav + right side: identical metrics */
.mainnav{display:flex !important;gap:4px !important;font-size:14px !important;
  text-transform:none !important;letter-spacing:0 !important;font-family:var(--disp) !important}
.mainnav a{padding:8px 14px !important;border-radius:8px !important}
.nav-right{display:flex !important;align-items:center !important;gap:14px !important;
  font-size:14px !important;text-transform:none !important;letter-spacing:0 !important;
  font-family:var(--disp) !important;white-space:nowrap}
.brand-switch{font-family:var(--mono) !important;font-size:12px !important;
  padding:8px 14px !important;border-radius:8px !important;white-space:nowrap !important;flex-shrink:0}
.nav-cta{font-family:var(--disp) !important;font-weight:700 !important;font-size:13.5px !important;
  padding:9px 18px !important;border-radius:8px !important;white-space:nowrap !important;flex-shrink:0}

/* ONE mockup banner */
.mocknote{margin:14px 0 !important;padding:8px 14px !important;min-height:36px;
  font-family:var(--mono) !important;font-size:11px !important}

/* small screens: allow the header to wrap gracefully (only place wrap is allowed) */
@media(max-width:820px){
  .topbar{height:auto !important;max-height:none !important;flex-wrap:wrap !important;padding:12px 0 !important}
}

/* ------------------------------------------------------------- phones ----
   Not a mobile design — a mobile RESCUE. `.mainnav` was a 466px nowrap row
   inside a 375px viewport, so Chrome widened the layout viewport to 614px
   and scaled the whole site to ~61%: text tiny, and Reports, Questions and
   Competitors clipped off the right edge with no way to reach them (UX audit
   2026-09-05, U-16).

   It lives HERE, not in _app_shell_styles.html, and that is the whole trick.
   base.html loads this file after every page's inline <style>, so these
   rules win. Inside the include they lost: a media query adds no specificity
   and dashboard.html declares its own `.card` and `.grid` further down the
   same block, so `min-width:0` and the reduced padding were simply
   overridden and the page still scrolled sideways (measured at 375px).

   One breakpoint, and nothing above it changes: the desktop layout is
   Dinesh's and is not being redesigned here. */
@media (max-width: 700px) {
  .mainnav{flex-wrap:wrap;gap:2px;font-size:13px}
  .mainnav a{padding:7px 10px}
  /* A grid item's default `min-width:auto` is its CONTENT width, so a
     424px track sat open inside a 327px container and the page scrolled
     sideways. Every grid container in these templates is listed because CSS
     has no "any grid child" selector — and `.grid` alone was not enough:
     the offender on the dashboard turned out to be `.two`. */
  .grid > *, .two > *, .cols > *, .cards > *, .layout > *, .subgrid > *,
  .engines > *, .ops > *, .pulse > *, .tables > *, .tiers > *,
  .row2 > *, .row3 > *, .steps > *, .showcase > *{min-width:0}
  /* One column, not two squeezed ones. */
  .two, .cols, .row2, .row3, .layout{grid-template-columns:1fr}
  .card{padding:16px}
  /* Card headers put a title and a "View full plan →" link on one nowrap
     row; on a phone they belong on two. */
  .c-h{flex-wrap:wrap;gap:4px}
  /* Wide content scrolls inside itself rather than stretching the page:
     the brands table was clipped the same way the nav was. `display:block`
     is what makes overflow-x apply to a <table> at all. */
  table.grid{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* The toast sat over the nav links it was reporting on (L-26). It is the
     CONTAINER that is fixed — `.toast` is relative inside it — so moving the
     toast itself does nothing. */
  .toasts{top:auto;bottom:14px;left:12px;right:12px;max-width:none}
}