/* ============================================================
   FEAZEL DASHBOARDS — MOBILE OVERRIDES
   Loaded AFTER shared/styles.css. Only contains mobile-specific
   overrides for layout and component sizing. Brand tokens, type
   stack, and color palette are inherited from styles.css.

   Target viewport: 320px (iPhone SE) → 430px (iPhone Pro Max).
   ============================================================ */

/* Mobile-only token tweaks */
:root {
  --m-pad: 14px;          /* outer page padding */
  --m-gap: 12px;          /* default grid gap */
  --m-radius: 12px;       /* slightly larger radii feel right on phone */
  --m-tap: 44px;          /* minimum tap target per Apple HIG */
  --m-topbar-h: 32px;
  --m-subnav-h: 48px;
}

/* ============================================================
   BASE / TYPE — tighten for small screens
   ============================================================ */
body {
  font-size: 15px;        /* base unchanged, but content scales below */
  -webkit-tap-highlight-color: transparent;
  /* No background override here — the dark navy mesh defined in
     shared/styles.css must win. Earlier this rule said
     "background: var(--bg)" which (after the dark-theme token rebind)
     resolves to transparent and let the browser-default white html bg
     bleed through, breaking the mobile site rendering. */
}

h1 { font-size: 22px; line-height: 1.18; letter-spacing: -0.01em; }
h2 { font-size: 17px; line-height: 1.22; }
h3 { font-size: 14px; line-height: 1.3; }
.eyebrow { font-size: 10px; }

/* ============================================================
   APP SHELL — drop the sidebar, single column
   ============================================================ */
.app {
  display: block;
  min-height: 100vh;
  background: var(--bg);
}
.sidebar { display: none !important; }
.main {
  display: block;
  width: 100%;
  background: var(--bg);
}

/* ============================================================
   TOP BAR — slim freshness strip; iOS native header above it
   already shows the dashboard name, so this band carries only
   the data-as-of stamp.
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* home pill flush left, stamp flush right */
  gap: 8px;
  padding: 0 var(--m-pad);
  background: var(--feazel-navy);
  color: var(--fg-on-navy);
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
.topbar-left { display: none; }   /* breadcrumb redundant with iOS header */
.topbar-crumbs { display: none; }
.topbar-user { display: none; }
.topbar-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.stamp {
  font-size: 11px;
  color: var(--fg-on-navy-soft);
  background: rgba(255,255,255,0.08);
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.stamp .dot {
  width: 6px;
  height: 6px;
  background: #4ade80;
  border-radius: 50%;
}

/* ============================================================
   LOB SWITCHER — floating dark pill bar fixed to the BOTTOM of
   the viewport, mirroring the iOS app's bottom tab bar position
   (App.js styles.tabBarOuter / tabBarPill). The recipe matches:
   dark navy translucent fill, 22-px pill, 1-px white-10 border,
   blue-to-gold gradient active state.
   ============================================================ */
.lob-switch {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 12px;
  padding: 6px 8px;
  background: rgba(22, 32, 58, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.40);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.lob-switch a {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border-radius: 16px;
  text-decoration: none;
  border: 0;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.lob-switch a:not(.is-active):hover,
.lob-switch a:not(.is-active):active {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}
.lob-switch a.is-active {
  background: linear-gradient(135deg, #5e82bc 0%, #d4a857 100%);
  color: #ffffff;
  font-weight: 700;
}

/* ============================================================
   SUB-NAV — floating dark pill strip mirroring the iOS app's
   embed-mode subnav (which itself mirrors the iOS bottom tab bar).
   Public mobile site uses the same recipe so the LOB switcher and
   sub-nav look like a continuation of the iOS app navigation.
   ============================================================ */
.subnav {
  position: sticky;
  top: calc(var(--m-topbar-h) + 8px);   /* LOB switcher now lives at the bottom, so the subnav only has to clear the 32-px topbar */
  z-index: 25;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  margin: 0 12px 12px;
  padding: 6px 8px;
  background: rgba(22, 32, 58, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border-radius: 16px;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.subnav a:not(.is-active):hover,
.subnav a:not(.is-active):active {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}
.subnav a.is-active {
  background: linear-gradient(135deg, #5e82bc 0%, #d4a857 100%);
  color: #ffffff;
  font-weight: 700;
}

/* ============================================================
   PAGE — generous outer padding, no horizontal scroll
   ============================================================ */
.page {
  padding: var(--m-pad);
  /* Reserve room at the bottom for the floating LOB switcher (now fixed
     to the bottom of the viewport, ~52 px tall) plus the iPhone home
     indicator safe area, plus a small comfort gap. Without this, content
     scrolls underneath the bar and the last items get hidden. */
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
  max-width: 100vw;
  overflow-x: hidden;
}

/* Page head: title and intro should fill the full viewport width.
   Desktop uses a flex row with title on the left and tags on the right;
   on mobile we stack everything vertically and let the body breathe. */
.page-head {
  display: block;            /* override desktop's flex */
  margin-bottom: 18px;
  width: 100%;
}
.page-head-title {
  display: block;
  width: 100%;
  max-width: 100%;
}
.page-head-title h1 {
  margin-top: 4px;
  font-size: 22px;
  line-height: 1.18;
  text-wrap: balance;
}
.page-head-title p {
  display: block;
  width: 100%;
  font-size: 14px;
  margin-top: 8px;
  color: var(--fg-2);
  line-height: 1.5;
  text-wrap: pretty;
}
.page-head-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  width: 100%;
}
.tag { font-size: 11px; padding: 4px 8px; }

/* ============================================================
   SECTIONS — collapse all multi-col grids to single col by default
   ============================================================ */
.section { margin-top: 18px; }
.section + .section { margin-top: 18px; }
.section-head { margin-bottom: 10px; }
.section-head h2 { font-size: 16px; }
.section-head small { font-size: 12px; color: var(--fg-3); }

.grid {
  display: grid;
  gap: var(--m-gap);
  grid-template-columns: 1fr;       /* default: stack everything */
}
.grid-2,
.grid-3,
.grid-4,
.grid-6 { grid-template-columns: 1fr; }

/* The 12-col grid system used by two-col sections collapses to 1 col */
.grid-12 { grid-template-columns: 1fr; }
[class*="col-span-"] { grid-column: 1 / -1 !important; }

/* But for compact KPI rows we want 2-col — that's where the value is */
.section .grid.grid-2.kpi-row,
.section .grid.kpi-row,
.kpi-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Auto-detect KPI rows: any grid that contains .kpi children → 2-col */
.section > .grid:has(> .kpi) { grid-template-columns: repeat(2, 1fr); }

/* ============================================================
   KPI CARDS — sized for thumb scrolling
   ============================================================ */
.kpi {
  padding: 12px;
  border-radius: var(--m-radius);
  min-height: 88px;
}
.kpi-label { font-size: 11px; }
.kpi-value { font-size: 22px; line-height: 1.1; margin-top: 4px; }
.kpi-value-sm { font-size: 17px; }
.kpi-sub { font-size: 11px; margin-top: 6px; gap: 6px; }
.kpi-sub .kpi-delta { font-size: 11px; padding: 2px 6px; }
.kpi-spark { height: 28px; margin-top: 6px; }

/* When KPIs span 2-col grid, ignore desktop "span 2/3/4" hints */
.kpi[style*="grid-column"] { grid-column: span 1 !important; }

/* Single-column KPI fallback for ultra narrow */
@media (max-width: 360px) {
  .section > .grid:has(> .kpi) { grid-template-columns: 1fr; }
  .kpi-value { font-size: 24px; }
}

/* ============================================================
   CHART CARDS
   ============================================================ */
.chart-card {
  padding: 12px;
  border-radius: var(--m-radius);
  grid-column: 1 / -1 !important;   /* always full width */
}
.chart-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 8px;
}
.chart-head h3 { font-size: 14px; }
.chart-sub { font-size: 11px; }
.chart-canvas-wrap { height: 220px !important; }
.chart-canvas-wrap.h-200 { height: 180px !important; }
.chart-canvas-wrap.h-240 { height: 200px !important; }
.chart-canvas-wrap.h-280 { height: 220px !important; }
.chart-canvas-wrap.h-320 { height: 240px !important; }
.chart-canvas-wrap.h-360 { height: 260px !important; }
.chart-canvas-wrap.h-400 { height: 280px !important; }
.chart-canvas-wrap.h-440 { height: 280px !important; }
.chart-canvas-wrap.h-480 { height: 280px !important; }
.chart-foot {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 8px;
  line-height: 1.4;
}

/* ============================================================
   TABLES — horizontal scroll, condensed cells
   ============================================================ */
.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--m-radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.tbl {
  font-size: 12px;
  min-width: 100%;
}
.tbl th, .tbl td {
  padding: 8px 10px;
  white-space: nowrap;
}
.tbl-compact th, .tbl-compact td { padding: 6px 8px; font-size: 11px; }
.tbl tbody tr:nth-child(even) { background: var(--surface-2); }

/* ============================================================
   PROSE / CARDS
   ============================================================ */
.card {
  padding: 14px;
  border-radius: var(--m-radius);
}
.card-navy h3 { color: var(--fg-on-navy); }
.prose { font-size: 13px; line-height: 1.5; }
.prose p { margin: 8px 0; }
.prose strong { color: var(--fg-1); }
.insights { padding: 0; margin: 0; list-style: none; }
.insights li {
  display: flex;
  gap: 8px;
  font-size: 13px;
  padding: 6px 0;
}
.insights .ic {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--fw-bold);
  background: var(--feazel-blue-tint);
  color: var(--feazel-navy);
  margin-top: 2px;
}
.insights .ic.danger { background: var(--danger-tint); color: var(--danger); }
.insights .ic.warning { background: var(--warning-tint); color: var(--warning); }
.insights .ic.success { background: var(--success-tint); color: var(--success); }

.callout {
  padding: 14px;
  border-radius: var(--m-radius);
  font-size: 13px;
  line-height: 1.5;
}
.callout-title { font-size: 11px; }

/* ============================================================
   COMMAND CENTER (mobile hub)
   Hero, tiles, freshness card.
   ============================================================ */
/* Mobile hub-hero: defer to the universal animated treatment in
   shared/styles.css (which renders the chevron / window / radar pattern
   keyed on data-lob), but extend it edge-to-edge on phone screens and
   tighten the padding. The selector ".page .hub-hero" (specificity 0,2,0)
   beats the later ".page * { max-width: 100% !important }" rule that
   would otherwise clip the hero at the page's content-box.

   IMPORTANT: do NOT set background here — the styles.css universal rule
   provides the navy mesh + per-LOB animated ::before pattern. Overriding
   the background was the bug that suppressed the new animated hero on
   the public mobile site. */
.page .hub-hero {
  width: 100vw;
  max-width: none !important;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 20px;
  padding: 36px var(--m-pad) 26px;
  border: 0 !important;
  border-radius: 0 !important;
}
.hub-hero h1 {
  color: #ffffff;
  font-size: 38px;
  margin-top: 4px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.hub-hero .eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  display: block;
}
.hub-hero .hero-tagline {
  font-size: 18px;
  font-weight: 600;
  font-style: italic;
  margin: 4px 0 12px;
  line-height: 1.2;
}
.hub-hero .hero-narrative,
.hub-hero p {
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0 0;
  max-width: none;
  text-align: left;
}
.hub-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 18px;
  text-align: left;
}
.hub-hero-stat {
  padding: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.hub-hero-stat .l {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-on-navy-soft);
}
.hub-hero-stat .v {
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--fg-on-navy);
  margin-top: 4px;
}
.hub-hero-stat .s {
  font-size: 10px;
  color: var(--fg-on-navy-soft);
  margin-top: 4px;
  line-height: 1.3;
}

.tile {
  display: block;
  padding: 14px;
  border-radius: var(--m-radius);
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-1);
}
.tile h2 { font-size: 16px; }
.tile p { font-size: 12px; color: var(--fg-2); margin-top: 4px; line-height: 1.4; }
.tile-mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--feazel-blue-tint);
  color: var(--feazel-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tile-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.tile-stat .l { font-size: 10px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.04em; }
.tile-stat .v { font-size: 15px; font-weight: var(--fw-bold); color: var(--fg-1); margin-top: 2px; }
.tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--feazel-blue);
}

/* Pills (markets list etc) */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  background: var(--bg-2);
  color: var(--fg-2);
}
.pill-info { background: var(--feazel-blue-tint); color: var(--feazel-navy); }
.pill-success { background: var(--success-tint); color: var(--success); }
.pill-warning { background: var(--warning-tint); color: var(--warning); }
.pill-danger { background: var(--danger-tint); color: var(--danger); }

/* The Active Markets grid stays multi-col on phone but tighter */
.section .card .grid.grid-6 {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.caption { font-size: 11px; color: var(--fg-3); }
.card-head h3 { font-size: 15px; }
small { font-size: 11px; }

/* Reset any inline grid-column styles set for desktop */
.section .grid > * { grid-column: auto !important; }

/* Make any inline width:600px etc shrink */
.page * { max-width: 100% !important; }
.page canvas { max-width: 100% !important; height: auto; }

/* ============================================================
   PAGE FOOTER — "View desktop site" override link
   ============================================================ */
.page-foot {
  text-align: center;
  padding: 18px var(--m-pad) 32px;
  border-top: 1px solid var(--line);
  margin-top: 24px;
  background: var(--surface);
}
.page-foot .view-desktop {
  font-size: 12px;
  color: var(--feazel-blue);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}
.page-foot .view-desktop:hover { text-decoration: underline; }

/* ----- Mobile topbar: home link with logo on the left ----- */
.topbar-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  color: var(--fg-on-navy);
  text-decoration: none;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  transition: background 200ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
  flex: 0 0 auto;
}
.topbar-home:hover { background: rgba(255,255,255,0.14); }
.topbar-home:active { transform: scale(0.94); }
.topbar-home svg { opacity: 0.9; }
.topbar-home .lbl { line-height: 1; }

/* ============================================================
   EMBED MODE — page is loaded inside the iOS app via WebView.
   The native shell already provides the topbar, freshness stamp,
   LOB tab bar, and a themed splash header. Hide the duplicate web
   chrome and let the page sit flush against the native header.
   ============================================================ */
html.embed-mode .topbar,
html.embed-mode .lob-switch,
html.embed-mode .page-foot,
html.embed-mode .hub-hero {
  display: none !important;
}

/* The sub-nav (page-level pill strip: Home / Executive / Trends / etc.)
   becomes the first chrome the user sees once topbar + LOB switcher are
   gone. Pin it to the very top of the WebView with no sticky offset so
   it sits flush against the bottom of the native iOS header (instead of
   leaving the 70px gap that the desktop sticky-offset assumes). Restyle
   to mirror the floating dark pill bar at the bottom of the iOS app
   (bottom tab bar in App.js: rgba(22,32,58,0.82) bg, blue-to-gold active
   indicator, white-on-navy text). */
html.embed-mode .subnav {
  top: 0 !important;
  margin: 12px 12px 8px !important;          /* float-style outer gutters */
  padding: 6px 8px !important;               /* matches tabBarInner padding */
  height: auto !important;
  background: rgba(22, 32, 58, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 22px !important;            /* matches App.js tabBarPill */
  box-shadow: none !important;               /* no drop shadow / bar below the strip */
  gap: 4px !important;
}

/* Inactive sub-nav pills: muted white text, transparent fill. */
html.embed-mode .subnav a {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.55) !important;
  border: 0 !important;
  border-radius: 16px !important;             /* matches tabIndicator */
  padding: 8px 14px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  text-transform: none;
}

/* Active pill: blue-to-gold gradient, white bold label.
   Mirrors App.js LinearGradient colors={[BLUE (#5e82bc), GOLD (#d4a857)]}.
   No drop shadow — the soft glow below was reading as a "bar" under
   the bubble. Just the bubble itself, clean. */
html.embed-mode .subnav a.is-active {
  background: linear-gradient(135deg, #5e82bc 0%, #d4a857 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Hover/pressed state on inactive pills (subtle highlight, no jarring color
   shift since the bar already lives on a dark background). */
html.embed-mode .subnav a:not(.is-active):hover,
html.embed-mode .subnav a:not(.is-active):active {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Belt-and-suspenders: zero out any inherited margin/padding on the app
   or main wrappers that could create a gap above the first visible
   element. Without this, page templates that previously sat below a
   topbar can leave dead space when the topbar is removed. */
html.embed-mode .app,
html.embed-mode .main {
  margin: 0 !important;
  padding-top: 0 !important;
}

/* Hub pages have no .subnav (since hub-hero was the chrome there, and we
   hide it). Their page content should sit right against the native
   header. Sub-pages keep a small gap below the sub-nav so the first
   card is not glued to the pill strip. */
html.embed-mode .page {
  padding-top: 0 !important;
}
html.embed-mode .subnav ~ .page {
  padding-top: 12px !important;
}

/* Bottom breathing room. The native floating pill tab bar (≈64px high,
   plus the iPhone home-indicator safe area, plus a 12px gutter) sits
   on top of the webview. Without padding, the last items in the page
   scroll under the bar and get hidden. 130px is the tab bar (64) +
   home-indicator safe area on Pro Max sized phones (≈34) + gutter
   (12) + a comfort buffer (20). On phones with no bottom inset this
   over-pads by a hair, which is harmless. */
html.embed-mode .page { padding-bottom: 130px !important; }


/* ============================================================
   The Home dark-mesh aesthetic (frosted cards, white text scale,
   gradient accents, etc.) lives in shared/styles.css and now applies
   universally — public desktop, public mobile, and the iOS WebView.
   The embed-mode rules above this block remain iOS-specific because
   they hide chrome that the public sites legitimately need (topbar,
   LOB switcher, hub-hero) and float the sub-nav as a pill that
   assumes nothing sits above it.
   ============================================================ */