/* ==========================================================================
   The Economic Atlas — mobile.css
   Radical mobile-only presentation layer.
   Every rule is scoped inside @media (max-width:760px) so desktop and
   tablet layouts are completely unaffected. This file is additive: it is
   linked AFTER style.css on every page (except 404.html and markets.html,
   per standing convention) and never edits style.css itself.

   EXCEPTION: the homepage discovery block below (quick-nav search,
   popular-country chips, live ticker, scroll-catch bar) is deliberately
   NOT scoped to mobile — shown on all breakpoints by request, so these
   rules sit outside the @media block on purpose.
   ========================================================================== */

/* ---------------------------------------------------------------------
   FONT — every custom control this file adds (inputs/buttons don't
   inherit font-family from the page by default in any browser's user-
   agent stylesheet), matched exactly to the site's own root font stack
   rather than falling back to the OS system font.
   --------------------------------------------------------------------- */
#hqnSearch, #scrollCatchInput, #dashMetricSearch, #pickerSearch,
.card-opts-toggle, #mobToolbar a, .hqn-results a, .sc-results a,
.ht-item, #scrollCatchClose{
  font-family:"Avenir Next","Avenir","Nunito Sans",system-ui,sans-serif;
}

/* Shared "fact banner" style — trade partner highlight, Compare's
   widest-gap line, Calendar's next-up line, Dashboard's at-a-glance
   summary. Global (all breakpoints): these are genuinely useful facts
   for a desktop reader too, not a mobile-specific simplification. */
.tpm-partner-banner, #cmpGapBanner, #calNextUp, #dashGlance{
  font-size:13px; color:var(--ink); background:var(--panel);
  border:1px solid var(--hair); border-left:3px solid var(--blue,#37659E);
  border-radius:8px; padding:9px 12px; margin:8px 0 14px; max-width:640px;
}
.tpm-partner-banner b, #cmpGapBanner b, #calNextUp b, #dashGlance b{ color:var(--blue,#37659E); }

/* ---------------------------------------------------------------------
   HOMEPAGE DISCOVERY — search + popular chips, live ticker, scroll-catch.
   All breakpoints. Widths are capped and centered above ~640px so these
   don't look like stretched mobile components on a desktop screen.
   --------------------------------------------------------------------- */
#homeQuickNav{ margin:10px 0 6px; max-width:640px; }
/* Tightens the header's own generous top padding specifically where our
   search box now sits right above it, so "Welcome to..." / the country
   name sit noticeably higher rather than leaving the original gap meant
   for a page that starts directly with nav. */
#homeQuickNav + header.page{ padding-top:16px !important; }
.hqn-searchwrap{ position:relative; }
#hqnSearch{
  width:100%; padding:12px 14px; border-radius:11px; border:1px solid var(--hair);
  font-size:16px; background:var(--panel); color:var(--ink);
}
.hqn-results{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20;
  background:var(--panel); border:1px solid var(--hair); border-radius:11px;
  max-height:260px; overflow-y:auto; box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.hqn-results a{
  display:block; padding:11px 14px; font-size:14.5px; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--hair);
}
.hqn-results a:last-child{ border-bottom:none; }
.hqn-none{ padding:11px 14px; font-size:13px; color:var(--ink2); }

/* Matches the site's own "Latest:" glass/green treatment from country
   pages (.newdata) exactly — same colours, same blur/saturate recipe,
   same pulsing dot — rather than inventing a new visual language. */
#homeTicker{
  display:flex; align-items:center; gap:10px; margin:2px 0 18px; overflow:hidden;
  background:rgba(213,238,221,.85); backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(47,164,99,.35); border-radius:10px; padding:9px 14px;
}
html[data-theme="dark"] #homeTicker{
  background:rgba(30,60,45,.65) !important;
  border:1px solid rgba(47,164,99,.4) !important;
}
.ht-prefix{
  flex:0 0 auto; display:flex; align-items:center; gap:6px;
  font-weight:700; font-size:13px; color:#1E6B48; white-space:nowrap;
}
html[data-theme="dark"] .ht-prefix{ color:#8FE3B0 !important; }
.ht-prefix .pulse{
  width:9px; height:9px; border-radius:50%; background:#2FA463;
  box-shadow:0 0 0 3px rgba(47,164,99,.2); flex:none;
  animation:ht-pulse 2s ease-in-out infinite;
}
@keyframes ht-pulse{
  0%, 100%{ box-shadow:0 0 0 3px rgba(47,164,99,.2); }
  50%{ box-shadow:0 0 0 6px rgba(47,164,99,.08); }
}
.ht-viewport{ flex:1; overflow:hidden; -webkit-mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.ht-track{
  display:flex; gap:8px; width:max-content;
  animation:ht-scroll 130s linear infinite; /* slow, easy-to-read pace — was 38s and felt jarring */
}
@keyframes ht-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); } /* content is duplicated once, so 50% is exactly one full loop */
}
#homeTicker:hover .ht-track{ animation-play-state:paused; }
.ht-item{
  flex:0 0 auto; display:flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:6px; background:var(--panel);
  border:1px solid rgba(47,164,99,.35);
  font-size:13px; font-weight:600; color:#1E6B48; text-decoration:none; white-space:nowrap;
}
html[data-theme="dark"] .ht-item{ color:#8FE3B0 !important; }
.ht-item:hover, .ht-item:focus-visible{ background:#D5EEDD; border-color:#2FA463; }
.ht-value{ color:inherit; }
.ht-date{ font-weight:400; opacity:.75; }

@media (prefers-reduced-motion: reduce){
  .ht-track{ animation:none; }
  .ht-prefix .pulse{ animation:none; }
}

#homeScrollCatch{
  position:fixed; left:12px; right:12px; bottom:-90px; z-index:50;
  background:var(--navy,#1E4566); border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition:bottom .28s ease; max-width:480px; margin:0 auto; overflow:hidden;
}
#homeScrollCatch.visible{ bottom:16px; }
.sc-row{ display:flex; align-items:center; gap:8px; padding:10px 12px; }
#scrollCatchInput{
  flex:1; padding:10px 12px; border-radius:9px; border:none; font-size:16px;
  background:rgba(255,255,255,.94); color:#111;
}
#scrollCatchClose{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:none;
  background:rgba(255,255,255,.15); color:#fff; font-size:16px; cursor:pointer;
}
.sc-results{
  max-height:220px; overflow-y:auto; background:rgba(255,255,255,.98);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.sc-results a{
  display:block; padding:11px 14px; font-size:14.5px; color:#111;
  text-decoration:none; border-bottom:1px solid rgba(0,0,0,.06);
}
.sc-results a:last-child{ border-bottom:none; }
.sc-results a:active{ background:rgba(0,0,0,.05); }
.sc-none{ padding:11px 14px; font-size:13px; color:#666; margin:0; }


@media (max-width:760px){

  /* ---------------------------------------------------------------------
     1. PERSISTENT MOBILE TOOL BAR
     Replaces "buried in hamburger" navigation with five always-visible
     tabs for the core tools. Injected by mobile.js as #mobToolbar,
     sits directly under nav.top. The hamburger menu still exists for
     About/Contact/Methodology/legal, which people need rarely.
     --------------------------------------------------------------------- */
  nav.sub{ display:none !important; } /* mega-dropdown replaced by toolbar below */

  #mobToolbar{
    position:sticky; top:0; z-index:40;
    display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    background:var(--navy,#1B2A3D); border-bottom:1px solid rgba(255,255,255,.08);
  }
  #mobToolbar::-webkit-scrollbar{ display:none; }
  #mobToolbar a{
    flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
    gap:2px; padding:10px 16px; font-size:11.5px; font-weight:600;
    color:rgba(255,255,255,.68); text-decoration:none; white-space:nowrap;
    border-bottom:2.5px solid transparent;
  }
  #mobToolbar a .ic{ font-size:16px; line-height:1; }
  #mobToolbar a.active{ color:#fff; border-bottom-color:var(--blue,#37659E); }

  /* ---------------------------------------------------------------------
     2. HOMEPAGE MAP — calmer entrance
     --------------------------------------------------------------------- */
  .hero-map-cap, .mob-map-cap{
    display:block; font-size:13px; color:var(--ink2); text-align:center;
    margin:2px 0 10px;
  }
  .mini-legend{ font-size:11.5px; gap:6px 10px; }

  /* ---------------------------------------------------------------------
     3. COUNTRY PAGES — swipeable section carousel + dot indicator
     nav.cat becomes a compact dot/position indicator; the underlying
     .sec elements are swiped between by mobile.js, which calls the
     page's own existing showSec() function — no data logic duplicated.
     --------------------------------------------------------------------- */
  nav.cat{
    position:sticky; top:0; z-index:30; background:var(--paper);
    display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:6px; padding:8px 10px; border-bottom:1px solid var(--hair);
    scrollbar-width:none;
  }
  nav.cat::-webkit-scrollbar{ display:none; }
  nav.cat button{ flex:0 0 auto; font-size:12.5px; padding:6px 12px; }

  .sec{ scroll-margin-top:46px; }
  .sec-swipehint{
    display:flex; justify-content:center; gap:5px; margin:2px 0 10px;
  }
  .sec-swipehint span{
    width:6px; height:6px; border-radius:50%; background:var(--hair);
  }
  .sec-swipehint span.active{ background:var(--blue,#37659E); }

  /* Data tiles (GDP, CPI, etc.) — 2 per row instead of stacked singly,
     with tighter, more compact card styling to suit the smaller width. */
  .hero{
    grid-template-columns:repeat(2,1fr) !important;
    gap:8px !important; margin:14px 0 22px !important;
  }
  .hero .stat{
    padding:12px 12px 10px !important; min-height:auto !important;
  }
  .hero .stat .label{ font-size:10px !important; }
  .hero .stat .figure{ font-size:20px !important; margin:5px 0 4px !important; }
  .hero .stat .delta{ font-size:11px !important; }


     reachable without scrolling past a full map first; tapping (or the
     existing "Expand" hint) reveals it fully. */
  .mini-mapwrap{
    max-height:86px; overflow:hidden; position:relative; cursor:pointer;
    transition:max-height .25s ease;
  }
  .mini-mapwrap.mm-expanded{ max-height:1200px; }
  .mini-mapwrap .zoomhint, .mini-mapwrap .mini-legend{ display:none; }
  .mini-mapwrap.mm-expanded .zoomhint, .mini-mapwrap.mm-expanded .mini-legend{ display:block; }
  .mini-mapwrap .minihint{
    position:absolute; right:10px; bottom:8px; z-index:2;
    background:rgba(0,0,0,.55); color:#fff; padding:4px 10px; border-radius:20px;
    font-size:11.5px; pointer-events:none;
  }
  .mini-mapwrap.mm-expanded .minihint{ content:"Collapse"; }
  .mini-mapwrap::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:36px;
    background:linear-gradient(to bottom, transparent, var(--paper));
    pointer-events:none;
  }
  .mini-mapwrap.mm-expanded::after{ display:none; }


  .infopop, .metric-info-popover, [class*="info-pop"]{
    position:fixed !important; left:0 !important; right:0 !important;
    top:auto !important; bottom:0 !important;
    max-height:60vh !important; overflow-y:auto;
    border-radius:16px 16px 0 0 !important;
    box-shadow:0 -8px 24px rgba(0,0,0,.28) !important;
    width:100% !important; margin:0 !important;
  }

  /* ---------------------------------------------------------------------
     4. TRADE PARTNER CHART — kill radial/geo viz on mobile, promote the
     ranking list that already exists in .tpm-right. Desktop is untouched.
     --------------------------------------------------------------------- */
  .tpm-left{ display:none !important; }
  .viztoggle .vtbtn[data-view]{ display:none !important; } /* Geographic/Radial toggle */
  .tpm-layout{ display:block !important; }
  .tpm-right{ width:100% !important; }
  .tpm-mobile-note{
    display:block; font-size:12.5px; color:var(--ink2); background:var(--panel);
    border:1px solid var(--hair); border-radius:10px; padding:9px 12px; margin:8px 0;
  }
  .viztoggle{ flex-wrap:wrap; row-gap:6px; }
  .viztoggle .spacer{ display:none; } /* was only needed to push desktop layout apart */
  #metricWrap, #orderByWrap{ font-size:11.5px; }

  /* Golden-ratio chart proportions everywhere a chart appears, instead
     of a fixed pixel height that reads too tall/square on a narrow
     screen. Canvas-based charts (Chart.js) resize with their container
     via ResizeObserver, so changing the container's aspect is enough. */
  .chartbox, .cmp-card .cbox, .tile .chartbox{
    height:auto !important; aspect-ratio:1.618 / 1 !important;
  }

  /* Freshness legend (green/orange dot key) — one compact line instead
     of two wrapped rows of icon+sentence. */
  .lightskey{
    font-size:11.5px !important; display:flex; flex-wrap:wrap; gap:4px 14px;
    margin:8px 0 !important;
  }

  /* ---------------------------------------------------------------------
     5. COMPARE PAGE — stacked cards instead of the wide summary table,
     search box in the country picker, tidier control bar.
     --------------------------------------------------------------------- */
  #rankTable, .rank-scroll-hint{ display:none !important; }
  #cmpCardsWrap{ display:flex; flex-direction:column; gap:12px; margin-top:4px; }
  .cmp-country-card{
    border:1px solid var(--hair); border-radius:12px; padding:14px 16px;
    background:var(--panel,#fff);
  }
  .cmp-country-card h4{
    margin:0 0 8px; font-size:15px; display:flex; align-items:center; gap:8px;
  }
  .cmp-country-card .swatch{ width:10px; height:10px; border-radius:50%; display:inline-block; }
  .cmp-country-card .row{
    display:flex; justify-content:space-between; gap:10px; padding:6px 0;
    border-top:1px solid var(--hair); font-size:13.5px;
  }
  .cmp-country-card .row:first-of-type{ border-top:none; }
  .cmp-country-card .row .lbl{ color:var(--ink2); }
  .cmp-country-card .row .val{ font-weight:700; text-align:right; }
  .cmp-country-card .row .val .cellperiod{
    display:block; font-weight:400; color:var(--ink2); font-size:11px; margin-top:1px;
  }

  #pickerSearchWrap{ margin:8px 0 12px; }
  #pickerSearch{
    width:100%; padding:10px 14px; border-radius:10px; border:1px solid var(--hair);
    font-size:15px; background:var(--paper); color:var(--ink);
  }

  .cmp-controlbar{
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  }

  /* Intro paragraphs on Compare — hidden by text-match via mobile.js
     (they carry no distinguishing class in the markup) */
  .cmp-lede-hide{ display:none !important; }

  /* Per-card controls (Bar/Line, Order countries by, Fullscreen) collapse
     behind a single "Chart options" toggle so each card shows its data
     first, not four rows of controls before any numbers appear. */
  .metric-card .charttoggle,
  .metric-card .card-sort-row,
  .metric-card .card-fullscreen-btn{ display:none; }
  .metric-card.opts-open .charttoggle,
  .metric-card.opts-open .card-sort-row,
  .metric-card.opts-open .card-fullscreen-btn{ display:flex; }
  .metric-card.opts-open .charttoggle{ display:flex; }
  .card-opts-toggle{
    display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600;
    color:var(--blue,#37659E); background:none; border:none; padding:4px 0 8px; cursor:pointer;
  }
  .card-opts-toggle .car{ transition:transform .15s ease; display:inline-block; }
  .metric-card.opts-open .card-opts-toggle .car{ transform:rotate(180deg); }
  .card-time-row{ flex-wrap:wrap; row-gap:8px; }
  .card-map-toggle{ display:none !important; } /* mini choropleth for 2-4 countries isn't worth the space on mobile */
  .cmp-card.wide[style*="margin-top"]{ margin-top:10px !important; } /* tighten the big gap before the footer methodology card */

  /* Tighter top-of-page spacing: title/description/picker/status */
  header.page + p, header.page ~ p.lightskey{ margin-top:6px !important; }


  /* ---------------------------------------------------------------------
     9. SIGNUP / TRIAL BANNERS ("savebar") — compact single-line strip
     instead of a large boxed callout, on Dashboard and Compare.
     --------------------------------------------------------------------- */
  .savebar{
    padding:8px 12px !important; gap:8px !important; font-size:12px !important;
    border-radius:9px !important; align-items:center !important;
  }
  .savebar-icon{ font-size:13px !important; }
  .savebar p{ font-size:12px !important; line-height:1.35 !important; margin:0 !important; }
  .savebar .btn{
    padding:5px 10px !important; font-size:11.5px !important; flex:0 0 auto;
  }
  .savebar-close{ font-size:15px !important; }

  /* ---------------------------------------------------------------------
     6. CALENDAR — full agenda rebuild replacing the 7-column month grid.
     --------------------------------------------------------------------- */
  .cal-grid{ display:none !important; }
  .cal-dow{ display:none !important; }
  #calDayDetail{ display:none !important; } /* leftover "click a day above" box from grid mode */
  .cal-head-note{ font-size:12px; }
  #calAgenda{ display:block; }
  .cal-agenda-title{
    font-size:13px; font-weight:700; color:var(--ink2); text-transform:uppercase;
    letter-spacing:.03em; margin:2px 0 10px;
  }
  .cal-agenda-day{
    border-top:1px solid var(--hair); padding:12px 2px;
  }
  .cal-agenda-day:first-child{ border-top:none; }
  .cal-agenda-day .d-head{
    display:flex; align-items:baseline; gap:8px; margin-bottom:8px;
  }
  .cal-agenda-day .d-num{ font-size:19px; font-weight:800; }
  .cal-agenda-day .d-dow{ font-size:12.5px; color:var(--ink2); text-transform:uppercase; letter-spacing:.03em; }
  .cal-agenda-day.is-today .d-num{ color:var(--blue,#37659E); }
  .cal-agenda-empty{ font-size:13px; color:var(--ink2); padding:2px 0 2px; }
  .cal-agenda-pill{
    display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:9px;
    margin-bottom:6px; font-size:13.5px; font-weight:600; color:#fff;
  }
  .cal-agenda-pill .dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.85); flex:0 0 auto; }
  .cal-agenda-pill{ cursor:pointer; }
  .cal-agenda-more{ font-size:12px; color:var(--ink2); padding:2px 2px 4px; }

  /* ---------------------------------------------------------------------
     7. CHARTMAKER — hard gate, no crippled mobile version
     --------------------------------------------------------------------- */
  #cmLayout{ display:none !important; }
  #cmMobileGate{
    display:flex !important; flex-direction:column; align-items:flex-start;
    gap:14px; padding:28px 20px; margin-top:8px;
    border:1px solid var(--hair); border-radius:14px; background:var(--panel,#F5F6F3);
  }
  #cmMobileGate .ic{ font-size:30px; }
  #cmMobileGate h3{ margin:0; font-size:19px; }
  #cmMobileGate p{ margin:0; font-size:14.5px; color:var(--ink2); line-height:1.55; }
  #cmMobileGate .save-hint{
    font-size:13px; padding:9px 12px; border-radius:8px; background:var(--paper);
    border:1px solid var(--hair); color:var(--ink2);
  }

  /* ---------------------------------------------------------------------
     8. DASHBOARD — search box in the "Add a metric" picker
     --------------------------------------------------------------------- */
  #dashMetricSearchWrap{ margin:8px 0 12px; position:sticky; top:0; background:var(--paper); z-index:5; padding-top:4px; }
  #dashMetricSearch{
    width:100%; padding:10px 14px; border-radius:10px; border:1px solid var(--hair);
    font-size:15px; background:var(--paper); color:var(--ink);
  }

  /* The real bug: "Add a metric" hardcodes 2 columns regardless of
     viewport, so on a narrow phone each card is squeezed to ~150px and
     its text overflows/bleeds into the next card. Single column on
     mobile fixes this outright — no other change needed here. */
  .pickergrid{ grid-template-columns:1fr !important; max-height:60vh !important; }
  #picker .modetoggle{ flex-wrap:wrap; }
  #pickerSearch{ font-size:16px !important; } /* prevents iOS zoom-on-focus */

} /* end max-width:760px */