/* LiveGridData mobile optimisation pack - 2026-05-07
   Adds mobile-first hierarchy, horizontal metric cards, safer charts/tables,
   touch-sized controls, sticky mobile navigation and reduced motion. */

:root{--mobile-safe-bottom:calc(env(safe-area-inset-bottom,0px) + 76px)}

.lgd-mobile-bottom-nav{display:none}

@media (max-width: 900px){
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{overflow-x:hidden}
  .page,.page-shell{width:100%;max-width:100%;padding-left:14px!important;padding-right:14px!important;padding-bottom:var(--mobile-safe-bottom)!important}
  .site-header,.shared-header,.records-hero{grid-template-columns:1fr!important;gap:14px!important;margin-bottom:14px!important;padding:18px!important;border-radius:24px!important}
  .site-header-copy,.site-header>div:first-child{min-width:0}
  .eyebrow{font-size:.72rem!important;letter-spacing:.12em!important;margin-bottom:6px!important}
  h1{font-size:clamp(2rem,9vw,3.25rem)!important;line-height:.98!important;letter-spacing:-.055em!important;margin:.12em 0 .2em!important}
  h2{font-size:clamp(1.25rem,5.2vw,1.65rem)!important;line-height:1.1!important}
  h3{font-size:1.05rem!important;line-height:1.25!important}
  .tagline,.content-panel p,.records-hero .tagline,.records-intro-note,.panel-subtitle{font-size:.98rem!important;line-height:1.58!important;max-width:64ch!important}
  .shared-header-actions,.shared-header-actions-simple,.records-page .shared-header-actions-simple{align-items:stretch!important;width:100%!important}
  .status-pill,.update-pill{width:100%;min-height:44px;justify-content:center;text-align:center;border-radius:999px!important}

  /* Replace desktop nav wraps with a compact horizontal strip. */
  .view-switcher,.page-nav,.standard-top-nav,.footer-view-links{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;scroll-snap-type:x mandatory;gap:8px!important;padding:8px!important;margin-inline:-4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .view-switcher::-webkit-scrollbar,.page-nav::-webkit-scrollbar,.standard-top-nav::-webkit-scrollbar,.footer-view-links::-webkit-scrollbar{display:none}
  .view-link,.page-nav a,.standard-top-nav a,.footer-view-links a,.home-link{flex:0 0 auto;scroll-snap-align:start;min-height:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0 14px!important;border-radius:999px!important;white-space:nowrap!important;font-size:.86rem!important}

  /* Key metrics become swipe cards instead of a long wall. */
  .top-grid,.snapshot-grid,.records-status,.hero-proof,.wow-stat-grid,.mobile-primary-carousel{display:flex!important;grid-template-columns:none!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;gap:12px!important;padding:2px 2px 12px!important;margin-left:-2px!important;margin-right:-2px!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .top-grid::-webkit-scrollbar,.snapshot-grid::-webkit-scrollbar,.records-status::-webkit-scrollbar,.hero-proof::-webkit-scrollbar,.wow-stat-grid::-webkit-scrollbar,.mobile-primary-carousel::-webkit-scrollbar{display:none}
  .metric-card,.snapshot-card,.records-status span,.hero-proof span,.wow-stat-card,.mobile-summary-card{flex:0 0 min(84vw,360px)!important;scroll-snap-align:start!important;min-width:min(84vw,360px)!important}
  .metric-card{padding:18px!important;border-radius:22px!important}
  .metric-value{font-size:clamp(2rem,10vw,3rem)!important;line-height:1!important}
  .metric-card-detail-grid{grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:12px!important}
  .metric-card-detail-grid span,.metric-card-detail-grid div{min-width:0!important}
  .metric-help,.micro-signal,.snapshot-card p{font-size:.86rem!important;line-height:1.35!important}

  /* Charts reach the user sooner and remain readable. */
  .panel,.content-panel,.records-card,.chart-panel,.demand-range-panel,.simple-chart-wrap,.page-demand-range-panel{border-radius:22px!important;margin-top:14px!important;padding:16px!important;max-width:100%!important;overflow:hidden!important}
  .chart-panel canvas,.simple-chart-wrap canvas,.page-demand-range-panel canvas{width:100%!important;max-width:100%!important}
  .simple-chart-wrap,.page-demand-range-panel #simplePageChart{height:260px!important}
  .panel-head,.demand-range-head,.records-card-head{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px!important}
  .demand-range-shell{overflow-x:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:4px!important}
  .demand-tabs{display:flex!important;min-width:max-content!important;gap:6px!important}
  button,.demand-tab,.record-mode-toggle,.records-filter button{min-height:44px!important;min-width:44px!important}

  /* Article pages: show data first, make sidebars non-sticky and compact. */
  .page-article{grid-template-columns:1fr!important;gap:14px!important}
  .article-side{position:static!important;order:-1!important}
  .content-panel{line-height:1.6!important}
  .content-panel p{margin-bottom:13px!important}
  .seo-answer-box,.seo-ranking-block{padding:14px!important;border-radius:18px!important}
  .freshness-note{font-size:.86rem!important}

  /* Records/tables: card-like horizontal-safe layout. */
  .records-grid{grid-template-columns:1fr!important;gap:14px!important}
  .records-toolbar{position:sticky;top:0;z-index:20;margin-inline:-14px;padding:10px 14px;background:rgba(7,13,24,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(148,163,184,.14)}
  .records-filter{width:100%;display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;gap:8px!important;scrollbar-width:none}.records-filter::-webkit-scrollbar{display:none}
  .records-table{min-width:0!important;width:100%!important;border-spacing:0 10px!important;font-size:.9rem!important}
  .records-table thead{display:none!important}
  .records-table tr{display:grid!important;grid-template-columns:1fr!important;gap:0!important;margin-bottom:10px!important;border:1px solid rgba(148,163,184,.14)!important;border-radius:16px!important;background:rgba(7,16,29,.52)!important;overflow:hidden!important}
  .records-table td{display:flex!important;justify-content:space-between!important;gap:12px!important;white-space:normal!important;border:0!important;border-radius:0!important;background:transparent!important;padding:9px 10px!important;text-align:right!important}
  .records-table td::before{content:attr(data-label);color:#9fb4bd;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;text-align:left}.records-table td:first-child{color:#7fffd4!important}.record-value{text-align:right!important}

  /* Interconnector / generation dense blocks. */
  .ic-capacity-stats,.generation-grid,.fuel-grid,.mix-grid,.interconnector-grid{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;gap:12px!important;padding-bottom:12px!important;scrollbar-width:none}.ic-capacity-stats::-webkit-scrollbar,.generation-grid::-webkit-scrollbar,.fuel-grid::-webkit-scrollbar,.mix-grid::-webkit-scrollbar,.interconnector-grid::-webkit-scrollbar{display:none}
  .ic-capacity-stats>* ,.generation-grid>* ,.fuel-grid>* ,.mix-grid>* ,.interconnector-grid>*{flex:0 0 min(82vw,340px)!important;scroll-snap-align:start!important}

  /* Sticky bottom navigation for thumb use. */
  .lgd-mobile-bottom-nav{position:fixed;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);z-index:9999;display:grid!important;grid-template-columns:repeat(5,1fr);gap:6px;padding:8px;border:1px solid rgba(125,211,252,.22);border-radius:22px;background:rgba(5,12,24,.92);box-shadow:0 16px 45px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(18px)}
  .lgd-mobile-bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;border-radius:16px;color:#d9e7ee;text-decoration:none;font-size:.72rem;font-weight:900;line-height:1.05;border:1px solid transparent}
  .lgd-mobile-bottom-nav a[aria-current="page"],.lgd-mobile-bottom-nav a:hover{background:linear-gradient(135deg,rgba(94,234,212,.95),rgba(103,232,249,.9));color:#021014;border-color:rgba(255,255,255,.2)}
  .lgd-mobile-bottom-nav span:first-child{font-size:1rem;margin-bottom:3px}
  .shared-footer{padding-bottom:calc(var(--mobile-safe-bottom) + 18px)!important}
}

@media (max-width: 520px){
  .page,.page-shell{padding-left:10px!important;padding-right:10px!important}
  .site-header,.shared-header,.records-hero,.panel,.records-card{padding:14px!important;border-radius:20px!important}
  .metric-card,.snapshot-card,.wow-stat-card,.mobile-summary-card{flex-basis:88vw!important;min-width:88vw!important}
  .metric-card-detail-grid{grid-template-columns:1fr!important}
  .chart-panel canvas,.simple-chart-wrap canvas,.page-demand-range-panel canvas{width:100%!important;max-width:100%!important}
  .tagline,.content-panel p,.panel-subtitle{font-size:.94rem!important}
  .lgd-mobile-bottom-nav{left:6px;right:6px;border-radius:18px}.lgd-mobile-bottom-nav a{font-size:.66rem;min-height:46px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}


/* Mobile overflow hotfix - prevents any desktop-width dashboard modules from widening the viewport. */
@media (max-width: 900px){
  html,
  body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }

  html[data-view-mode="website"] body,
  html[data-small-device] body{
    min-width:0!important;
  }

  body{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  .page,
  .page-shell,
  .records-page,
  .shared-page,
  .dashboard-page,
  main,
  header,
  footer,
  section,
  article{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-wrap:anywhere;
  }

  .site-header,
  .shared-header,
  .records-hero,
  .panel,
  .content-panel,
  .records-card,
  .chart-panel,
  .page-article,
  .article-side,
  .article-main,
  .dashboard-shell,
  .dashboard-grid,
  .layout-grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  img,
  svg,
  canvas,
  iframe,
  video,
  table{
    max-width:100%!important;
  }

  /* Known desktop-width offenders. */
  .top-grid-focal,
  .top-grid-focal.top-grid-new-boxes,
  .flow-board,
  .gb-flow-board,
  .flow-center,
  .gb-flow-center,
  .flow-map,
  .gb-flow-map,
  .generation-mix-board,
  .interconnector-board,
  .history-grid,
  .history-snapshot-grid,
  .records-grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:1fr!important;
  }

  .top-grid-focal,
  .top-grid-focal.top-grid-new-boxes{
    display:flex!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    gap:12px!important;
    padding-bottom:12px!important;
  }

  .top-grid-focal > .metric-card,
  .top-grid-focal.top-grid-new-boxes > .metric-card{
    flex:0 0 min(88vw,360px)!important;
    min-width:min(88vw,360px)!important;
    max-width:min(88vw,360px)!important;
    scroll-snap-align:start!important;
  }

  .flow-center,
  .flow-center .flow-svg,
  .gb-flow-center,
  .gb-flow-center svg{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .demand-range-shell,
  .chart-scroll,
  .table-wrap,
  .records-table-wrap,
  .health-table-wrap,
  .history-table-wrap,
  .page-nav,
  .standard-top-nav,
  .footer-view-links,
  .view-switcher{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  .demand-tabs,
  .records-filter,
  .view-switcher,
  .page-nav,
  .standard-top-nav,
  .footer-view-links{
    max-width:100%!important;
  }

  .health-table,
  .history-table,
  .records-table{
    min-width:0!important;
  }

  pre,
  code{
    white-space:pre-wrap!important;
    overflow-wrap:anywhere!important;
  }
}

@media (max-width: 520px){
  body{padding-left:6px!important;padding-right:6px!important;}
  .page,.page-shell{padding-left:8px!important;padding-right:8px!important;}
}

/* Mobile header/nav overflow hard fix - 2026-05-07
   The desktop page navigation inside the hero can create a hidden horizontal
   strip on phones. The bottom mobile nav already replaces it, so remove it
   from the mobile header and force long page titles to wrap inside the card. */
@media (max-width: 900px){
  .site-header .page-nav,
  .shared-header .view-switcher,
  header .standard-top-nav{
    display:none!important;
  }

  .site-header,
  .site-header > div,
  .site-header-copy,
  .shared-header,
  .shared-header > div{
    box-sizing:border-box!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  .site-header h1,
  .site-header-copy h1,
  .shared-header h1,
  html[data-view-mode="mobile"] .site-header h1{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    hyphens:auto!important;
    font-size:clamp(2rem, 9.5vw, 2.85rem)!important;
    line-height:1.04!important;
    letter-spacing:-0.055em!important;
  }

  .site-header .tagline,
  .site-header-copy .tagline,
  .status-pill,
  .update-pill{
    max-width:100%!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
    white-space:normal!important;
  }
}

/* Homepage mobile dashboard rescue - 2026-05-07
   The global mobile overflow guard intentionally fixes article/section widths on content pages,
   but the homepage WOW dashboard uses <article> elements as 100%-wide carousel slides.
   Restore those slide dimensions only inside the dashboard so the cards no longer squash into columns. */
@media (max-width: 900px){
  html[data-view-mode="mobile"] .mobile-wow-dashboard,
  html[data-view-mode="mobile"] .mobile-wow-dashboard *{
    box-sizing:border-box;
  }

  html[data-view-mode="mobile"] .mobile-wow-dashboard{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    overflow-wrap:normal!important;
  }

  html[data-view-mode="mobile"] .mobile-wow-dashboard section,
  html[data-view-mode="mobile"] .mobile-wow-dashboard article{
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  html[data-view-mode="mobile"] .mobile-wow-dashboard .wow-flow-track{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  html[data-view-mode="mobile"] .mobile-wow-dashboard .wow-flow-slide{
    flex:0 0 100%!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
    scroll-snap-align:center!important;
  }

  html[data-view-mode="mobile"] .mobile-wow-dashboard .wow-flow-slide-main,
  html[data-view-mode="mobile"] .mobile-wow-dashboard .wow-demand-card,
  html[data-view-mode="mobile"] .mobile-wow-dashboard .wow-system-state,
  html[data-view-mode="mobile"] .mobile-wow-dashboard .wow-hero-card,
  html[data-view-mode="mobile"] .mobile-wow-dashboard .wow-card{
    max-width:100%!important;
    min-width:0!important;
  }

  html[data-view-mode="mobile"] .mobile-wow-dashboard .wow-mini-spark{
    flex:0 0 auto!important;
  }

  /* The homepage has its own dashboard tab bar; avoid overlaying the generic page nav there. */
  html[data-view-mode="mobile"] body:has(.mobile-wow-dashboard) .lgd-mobile-bottom-nav{
    display:none!important;
  }
}

/* Dashboard vertical scroll fix - 2026-05-07
   The WOW dashboard carousel previously used touch-action: pan-x, which lets the
   carousel capture vertical finger gestures. On phones this made the page refuse
   to scroll when the user started the gesture on the Grid Demand card. Keep the
   carousel width rescue, but allow normal page scrolling from inside the cards. */
@media (max-width: 900px){
  html[data-view-mode="mobile"] .mobile-wow-dashboard .wow-flow-track,
  html[data-view-mode="mobile"] .mobile-wow-dashboard .wow-flow-slide,
  html[data-view-mode="mobile"] .mobile-wow-dashboard .wow-demand-card,
  html[data-view-mode="mobile"] .mobile-wow-dashboard .wow-card{
    touch-action:auto!important;
  }

  html[data-view-mode="mobile"] .mobile-wow-dashboard .wow-flow-track{
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
  }
}

/* Mobile chart safe overflow fix - 2026-05-07
   Do not force Chart.js canvas heights on mobile. The previous follow-up patch
   broke some charts by changing canvas attributes after render. This only
   prevents parent wrappers from clipping legends/axes and keeps widths within
   the viewport. */
@media (max-width: 900px){
  .chart-panel,
  .ic-chart-panel,
  .homepage-interconnector-chart,
  .demand-range-panel,
  .demand-range-shell,
  .simple-chart-wrap,
  .page-demand-range-panel,
  .chart-card,
  .chart-card-large,
  .history-card,
  .compare-chart-wrap,
  .demand-chart-wrap,
  .chart-wrap,
  .chart-scroll,
  .panel:has(canvas){
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  .chart-panel canvas,
  .ic-chart-panel canvas,
  .homepage-interconnector-chart canvas,
  .demand-range-panel canvas,
  .simple-chart-wrap canvas,
  .page-demand-range-panel canvas,
  .chart-card canvas,
  .chart-card-large canvas,
  .history-card canvas,
  .compare-chart-wrap canvas,
  .demand-chart-wrap canvas,
  .chart-wrap canvas,
  canvas[id*="Chart"],
  canvas[id*="chart"]{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  .chart-seo-note{
    margin-top:16px!important;
    clear:both!important;
  }

  body{
    padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))!important;
  }
}

/* v21: unified mobile theme across live + secondary pages.
   Align secondary page shell colours/background with the live mobile dashboard. */
@media (max-width: 820px) {
  :root {
    --lgd-mobile-bg: #070d18;
    --lgd-mobile-bg-soft: #091526;
    --lgd-mobile-panel: #071527;
    --lgd-mobile-panel-2: #08172a;
    --lgd-mobile-border: rgba(125, 211, 252, .16);
    --lgd-mobile-border-strong: rgba(125, 211, 252, .24);
    --lgd-mobile-cyan: #67e8f9;
    --lgd-mobile-mint: #5eead4;
    --lgd-mobile-green: #86efac;
    --lgd-mobile-text: #f8fbff;
    --lgd-mobile-muted: #a7b4c8;
    --lgd-mobile-muted-2: #7f8da3;
  }

  html,
  body {
    background: var(--lgd-mobile-bg) !important;
  }

  body.lgd-secondary-page,
  body.lgd-secondary-page .page {
    background:
      linear-gradient(rgba(125,211,252,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(125,211,252,.045) 1px, transparent 1px),
      radial-gradient(circle at 18% 0%, rgba(14,165,233,.16), transparent 30%),
      radial-gradient(circle at 82% 3%, rgba(20,184,166,.16), transparent 28%),
      var(--lgd-mobile-bg) !important;
    background-size:
      28px 28px,
      28px 28px,
      auto,
      auto,
      auto !important;
  }

  body.lgd-secondary-page .lgd-mobile-page-shell {
    background: transparent !important;
    padding: 18px 14px 0 !important;
  }

  body.lgd-secondary-page .lgd-mobile-page-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
  }

  body.lgd-secondary-page .lgd-mobile-page-brand {
    color: var(--lgd-mobile-text) !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-size: 13px !important;
    font-weight: 950 !important;
  }

  body.lgd-secondary-page .lgd-mobile-page-brand span {
    color: var(--lgd-mobile-mint) !important;
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: rgba(20,184,166,.13) !important;
    box-shadow: 0 0 22px rgba(20,184,166,.16) !important;
  }

  body.lgd-secondary-page .lgd-mobile-page-live {
    color: #baf7e8 !important;
    background: rgba(5, 18, 32, .72) !important;
    border: 1px solid rgba(94,234,212,.22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  body.lgd-secondary-page .lgd-mobile-page-card,
  body.lgd-secondary-page .lgd-mobile-page-metric,
  body.lgd-secondary-page .content-panel,
  body.lgd-secondary-page .chart-panel,
  body.lgd-secondary-page .page-demand-range-panel,
  body.lgd-secondary-page .faq-item,
  body.lgd-secondary-page .snapshot-card {
    background:
      radial-gradient(circle at 12% 0%, rgba(56,189,248,.08), transparent 34%),
      linear-gradient(180deg, rgba(8,23,42,.96), rgba(5,14,28,.98)) !important;
    border: 1px solid var(--lgd-mobile-border) !important;
    box-shadow:
      0 18px 46px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
    border-radius: 24px !important;
  }

  body.lgd-secondary-page .lgd-mobile-page-card.lgd-mobile-page-hero {
    border-radius: 26px !important;
    padding: 22px 20px !important;
    margin-bottom: 14px !important;
  }

  body.lgd-secondary-page .lgd-mobile-page-kicker,
  body.lgd-secondary-page .lgd-mobile-page-metric span {
    color: var(--lgd-mobile-cyan) !important;
    letter-spacing: .17em !important;
    text-transform: uppercase !important;
    font-weight: 950 !important;
  }

  body.lgd-secondary-page .lgd-mobile-page-hero h1,
  body.lgd-secondary-page .lgd-mobile-page-metric strong,
  body.lgd-secondary-page .content-panel h1,
  body.lgd-secondary-page .content-panel h2,
  body.lgd-secondary-page .content-panel h3 {
    color: var(--lgd-mobile-text) !important;
  }

  body.lgd-secondary-page .lgd-mobile-page-hero p,
  body.lgd-secondary-page .content-panel p,
  body.lgd-secondary-page .content-panel li {
    color: var(--lgd-mobile-muted) !important;
  }

  body.lgd-secondary-page .lgd-mobile-page-actions a {
    background: linear-gradient(135deg, var(--lgd-mobile-cyan), #34d399) !important;
    color: #06111d !important;
    box-shadow: 0 12px 28px rgba(45,212,191,.16) !important;
  }

  body.lgd-secondary-page .lgd-mobile-page-actions a.secondary {
    background: rgba(7, 18, 34, .78) !important;
    color: #dbeafe !important;
    border: 1px solid var(--lgd-mobile-border-strong) !important;
    box-shadow: none !important;
  }

  body.lgd-secondary-page .lgd-mobile-page-metrics {
    gap: 12px !important;
  }

  body.lgd-secondary-page .lgd-mobile-page-metric {
    min-height: 148px !important;
  }

  body.lgd-secondary-page .lgd-mobile-page-metric p {
    color: var(--lgd-mobile-muted-2) !important;
  }

  body.lgd-secondary-page .page-article {
    background: transparent !important;
  }

  body.lgd-secondary-page .lgd-page-bottom-nav,
  body.lgd-secondary-page .lgd-mobile-bottom-nav,
  .lgd-home-bottom-nav {
    background: rgba(5,12,24,.94) !important;
    border-color: rgba(125,211,252,.16) !important;
    box-shadow: 0 -18px 55px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  body.lgd-secondary-page .lgd-page-bottom-nav a.active,
  body.lgd-secondary-page .lgd-mobile-bottom-nav a.active,
  .lgd-home-bottom-nav a.active,
  .lgd-home-bottom-nav a:first-child {
    background: rgba(20,184,166,.26) !important;
    color: var(--lgd-mobile-mint) !important;
    border: 1px solid rgba(94,234,212,.24) !important;
  }

  body.lgd-secondary-page .lgd-page-bottom-nav a.active .nav-icon,
  body.lgd-secondary-page .lgd-mobile-bottom-nav a.active .nav-icon,
  .lgd-home-bottom-nav a.active .nav-icon,
  .lgd-home-bottom-nav a:first-child .nav-icon,
  .lgd-home-bottom-nav a:first-child span:first-child {
    color: var(--lgd-mobile-mint) !important;
  }
}

/* v22: standard bottom navigation panel with all site links.
   Replaces section-scrolling mobile controls with real page links. */
@media (max-width: 820px) {
  .lgd-standard-bottom-panel,
  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 120 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
    min-height: 132px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(125,211,252,.16) !important;
    background: rgba(5,12,24,.96) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 -18px 55px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  .lgd-standard-bottom-panel a,
  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    min-height: 54px !important;
    border-radius: 17px !important;
    text-decoration: none !important;
    color: #b7c6d8 !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    border: 1px solid transparent !important;
  }

  .lgd-standard-bottom-panel a .nav-icon,
  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a .nav-icon {
    display: block !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #dbeafe !important;
    letter-spacing: -.04em !important;
  }

  .lgd-standard-bottom-panel a.active,
  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a.active {
    color: #5eead4 !important;
    background: rgba(20,184,166,.20) !important;
    border-color: rgba(94,234,212,.25) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  .lgd-standard-bottom-panel a.active .nav-icon,
  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a.active .nav-icon {
    color: #5eead4 !important;
  }

  /* Override older rules that forced the first item to look active everywhere. */
  .lgd-home-bottom-nav a:first-child:not(.active),
  .lgd-mobile-bottom-nav a:first-child:not(.active) {
    background: transparent !important;
    color: #b7c6d8 !important;
    border-color: transparent !important;
  }

  .lgd-home-bottom-nav a:first-child:not(.active) .nav-icon,
  .lgd-home-bottom-nav a:first-child:not(.active) span:first-child,
  .lgd-mobile-bottom-nav a:first-child:not(.active) .nav-icon,
  .lgd-mobile-bottom-nav a:first-child:not(.active) span:first-child {
    color: #dbeafe !important;
  }

  body,
  .page,
  .mobile-wow-dashboard,
  .lgd-mobile-page-shell,
  .page-article,
  .shared-footer,
  .site-footer {
    padding-bottom: 168px !important;
  }
}

@media (max-width: 380px) {
  .lgd-standard-bottom-panel,
  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel {
    left: 8px !important;
    right: 8px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 7px !important;
  }

  .lgd-standard-bottom-panel a,
  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a {
    font-size: 9px !important;
  }
}

/* v23: force the same 8-link bottom navigation panel on the live dashboard page */
@media (max-width: 820px) {
  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel,
  nav.lgd-standard-bottom-panel {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 9999 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
    min-height: 132px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(125,211,252,.16) !important;
    background: rgba(5,12,24,.96) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 -18px 55px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a,
  nav.lgd-standard-bottom-panel a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    min-height: 54px !important;
    border-radius: 17px !important;
    text-decoration: none !important;
    color: #b7c6d8 !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    border: 1px solid transparent !important;
    background: transparent !important;
  }

  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a .nav-icon,
  nav.lgd-standard-bottom-panel a .nav-icon {
    display: block !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #dbeafe !important;
  }

  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a.active,
  nav.lgd-standard-bottom-panel a.active {
    color: #5eead4 !important;
    background: rgba(20,184,166,.20) !important;
    border-color: rgba(94,234,212,.25) !important;
  }

  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a.active .nav-icon,
  nav.lgd-standard-bottom-panel a.active .nav-icon {
    color: #5eead4 !important;
  }

  /* Give the dashboard enough room behind the taller nav panel */
  body,
  .page,
  .mobile-wow-dashboard,
  .mobile-dashboard,
  .dashboard-shell,
  .shared-footer,
  .site-footer {
    padding-bottom: 168px !important;
  }
}

/* v25: standard page-link bottom nav on dashboard, while preserving graph JS */
@media (max-width: 820px) {
  .wow-bottom-nav:not(.lgd-standard-bottom-panel) {
    display: none !important;
  }

  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel,
  nav.lgd-standard-bottom-panel {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 9999 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
    min-height: 132px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(125,211,252,.16) !important;
    background: rgba(5,12,24,.96) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 -18px 55px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a,
  nav.lgd-standard-bottom-panel a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    min-height: 54px !important;
    border-radius: 17px !important;
    text-decoration: none !important;
    color: #b7c6d8 !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    border: 1px solid transparent !important;
    background: transparent !important;
  }

  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a .nav-icon,
  nav.lgd-standard-bottom-panel a .nav-icon {
    display: block !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #dbeafe !important;
  }

  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a.active,
  nav.lgd-standard-bottom-panel a.active {
    color: #5eead4 !important;
    background: rgba(20,184,166,.20) !important;
    border-color: rgba(94,234,212,.25) !important;
  }

  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a.active .nav-icon,
  nav.lgd-standard-bottom-panel a.active .nav-icon {
    color: #5eead4 !important;
  }

  body,
  .page,
  .mobile-wow-dashboard,
  .wow-mobile-dashboard,
  .shared-footer,
  .site-footer {
    padding-bottom: 168px !important;
  }
}

/* v26: force dashboard standard nav to render.
   Nav is now included directly from index.php, separate from the dashboard graph partial. */
@media (max-width: 820px) {
  .lgd-force-dashboard-nav,
  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel,
  nav.lgd-standard-bottom-panel {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 2147483000 !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
    min-height: 132px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(125,211,252,.16) !important;
    background: rgba(5,12,24,.96) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 -18px 55px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  .lgd-force-dashboard-nav a,
  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a,
  nav.lgd-standard-bottom-panel a {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-height: 54px !important;
    border-radius: 17px !important;
    text-decoration: none !important;
    color: #b7c6d8 !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    border: 1px solid transparent !important;
    background: transparent !important;
  }

  .lgd-force-dashboard-nav .nav-icon,
  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel .nav-icon,
  nav.lgd-standard-bottom-panel .nav-icon {
    display: block !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #dbeafe !important;
  }

  .lgd-force-dashboard-nav a.active,
  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a.active,
  nav.lgd-standard-bottom-panel a.active {
    color: #5eead4 !important;
    background: rgba(20,184,166,.20) !important;
    border-color: rgba(94,234,212,.25) !important;
  }

  .lgd-force-dashboard-nav a.active .nav-icon,
  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a.active .nav-icon,
  nav.lgd-standard-bottom-panel a.active .nav-icon {
    color: #5eead4 !important;
  }

  body,
  .page,
  .mobile-wow-dashboard,
  .wow-mobile-dashboard,
  .shared-footer,
  .site-footer {
    padding-bottom: 178px !important;
  }
}

@media (min-width: 821px) {
  .lgd-force-dashboard-nav {
    display: none !important;
  }
}

/* v27: homepage standard nav placed directly after mobile dashboard */
@media (max-width: 820px) {
  .wow-bottom-nav-disabled,
  .wow-bottom-nav:not(.lgd-standard-bottom-panel) {
    display: none !important;
  }

  .lgd-home-standard-nav,
  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel,
  nav.lgd-standard-bottom-panel {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 2147483000 !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
    min-height: 132px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(125,211,252,.16) !important;
    background: rgba(5,12,24,.96) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 -18px 55px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  .lgd-home-standard-nav a,
  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a,
  nav.lgd-standard-bottom-panel a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-height: 54px !important;
    border-radius: 17px !important;
    text-decoration: none !important;
    color: #b7c6d8 !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    border: 1px solid transparent !important;
    background: transparent !important;
  }

  .lgd-home-standard-nav .nav-icon,
  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel .nav-icon,
  nav.lgd-standard-bottom-panel .nav-icon {
    display: block !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #dbeafe !important;
  }

  .lgd-home-standard-nav a.active,
  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a.active,
  nav.lgd-standard-bottom-panel a.active {
    color: #5eead4 !important;
    background: rgba(20,184,166,.20) !important;
    border-color: rgba(94,234,212,.25) !important;
  }

  .lgd-home-standard-nav a.active .nav-icon,
  .lgd-mobile-bottom-nav.lgd-standard-bottom-panel a.active .nav-icon,
  nav.lgd-standard-bottom-panel a.active .nav-icon {
    color: #5eead4 !important;
  }

  body,
  .page,
  .mobile-wow-dashboard,
  .wow-mobile-dashboard,
  .shared-footer,
  .site-footer {
    padding-bottom: 178px !important;
  }
}

@media (min-width: 821px) {
  .lgd-home-standard-nav {
    display: none !important;
  }
}

/* v28: single shared mobile nav source of truth.
   Only .lgd-mobile-site-nav is used for mobile page navigation. */
@media (max-width: 820px) {
  .wow-bottom-nav,
  .wow-bottom-nav-disabled,
  .lgd-mobile-bottom-nav:not(.lgd-mobile-site-nav),
  .lgd-standard-bottom-panel:not(.lgd-mobile-site-nav),
  .footer-view-links {
    display: none !important;
  }

  .lgd-mobile-site-nav {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 2147483000 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
    min-height: 132px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(125, 211, 252, .16) !important;
    background: rgba(5, 12, 24, .96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 -18px 55px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .lgd-mobile-site-nav a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    min-height: 54px !important;
    border-radius: 17px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #b7c6d8 !important;
    text-decoration: none !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
  }

  .lgd-mobile-site-nav .nav-icon {
    display: block !important;
    color: #dbeafe !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  .lgd-mobile-site-nav a.active {
    color: #5eead4 !important;
    background: rgba(20, 184, 166, .20) !important;
    border-color: rgba(94, 234, 212, .25) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  .lgd-mobile-site-nav a.active .nav-icon {
    color: #5eead4 !important;
  }

  body,
  .page,
  .mobile-wow-dashboard,
  .wow-mobile-dashboard,
  .lgd-mobile-page-shell,
  .page-article,
  .shared-footer,
  .site-footer {
    padding-bottom: 178px !important;
  }
}

@media (min-width: 821px) {
  .lgd-mobile-site-nav {
    display: none !important;
  }
}