/* ═══════════════════════════════════════════════════════════════════
   CAREER STUDIO — UNIQUE RESPONSIVE SYSTEM v1.0
   Covers every device from 320px watches to 4K ultra-wide displays
   Breakpoints: 320 · 480 · 600 · 768 · 900 · 1024 · 1280 · 1440 · 1920+
   ═══════════════════════════════════════════════════════════════════ */

/* ─── RESPONSIVE TOKENS ─────────────────────────────────────────── */
:root {
  --sidebar-w:    232px;
  --topbar-h:     60px;
  --content-pad:  28px;
  --card-pad:     20px 22px;
  --grid-gap:     16px;
}

/* ═══════════════════════════════════════════════════════════════════
   ULTRA-WIDE — 1920px+  (4K, cinema displays)
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1920px) {
  .app-content { max-width: 1800px; margin-left: auto; margin-right: auto; }
  .tab { padding: 36px 48px; }
  .g2  { grid-template-columns: 1fr 1fr; gap: 24px; }
  .g3  { grid-template-columns: 2fr 1fr; gap: 24px; }
  .g4  { grid-template-columns: repeat(4,1fr); gap: 20px; }
  .card { padding: 28px 32px; }
  .wf-hero-title { font-size: clamp(2rem,3vw,3rem); }
  .analytics-grid { grid-template-columns: repeat(6,1fr); }
  .atp-cards-grid { grid-template-columns: repeat(4,1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   LARGE DESKTOP — 1440px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1440px) {
  .g4 { grid-template-columns: repeat(3,1fr); }
  .analytics-grid { grid-template-columns: repeat(4,1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP — 1280px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .g4  { grid-template-columns: repeat(2,1fr); }
  .analytics-grid { grid-template-columns: repeat(3,1fr); }
  .brain-layout { grid-template-columns: 1fr; }
  .sal-grid { grid-template-columns: 1fr 1fr; }
  .at-nodes-grid { grid-template-columns: repeat(4,1fr); }
  .atp-cards-grid { grid-template-columns: repeat(2,1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   LAPTOP — 1024px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --content-pad: 20px; }

  .tab { padding: 20px; }
  .g3  { grid-template-columns: 1fr; }
  .g4  { grid-template-columns: repeat(2,1fr); }


  /* Sidebar collapses by default */
  .sidebar { transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 999; }
  .sidebar.mobile-open { transform: translateX(0); }
  .app-content { margin-left: 0 !important; }
  body.sb-collapsed .app-content { margin-left: 0; }

  /* Topbar hamburger visible */
  .sb-toggle { display: flex !important; }
  .mobile-overlay { display: block !important; }

  /* Portfolio */
  .pf-main-grid { grid-template-columns: 1fr; }

  /* Plans */
  .atp-cards-grid { grid-template-columns: repeat(2,1fr); }

  /* Community */
  .comm-feed-bar { flex-direction: column; gap: 10px; }

  /* Analytics */
  .analytics-grid { grid-template-columns: repeat(3,1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLET — 900px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root { --content-pad: 16px; --grid-gap: 12px; }

  /* Core layout */
  .tab { padding: 16px; }
  .g2  { grid-template-columns: 1fr; }
  .g3  { grid-template-columns: 1fr; }
  .g4  { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .fr  { flex-direction: column; gap: 10px; }
  .card { padding: 16px 18px; }

  /* Top bar */
  .topbar { padding: 0 16px; }
  .tb-right { gap: 8px; }

  /* Sub-nav — scrollable */
  .sub-nav {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    gap: 4px; padding-bottom: 4px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .sub-nav::-webkit-scrollbar { display: none; }
  .stab { white-space: nowrap; font-size: 10px; padding: 6px 10px; flex-shrink: 0; }

  /* Brain */
  .brain-input-row { flex-direction: column; gap: 8px; }
  .brain-layout { grid-template-columns: 1fr; }
  .brain-sidebar { display: none; }

  /* Resume */
  .resume-main-grid { grid-template-columns: 1fr; }
  .resume-toolbar { flex-wrap: wrap; gap: 6px; }
  .ats-compat-grid { grid-template-columns: repeat(2,1fr); }

  /* Salary */
  .sal-hero-row { grid-template-columns: repeat(2,1fr); }
  .sal-main-grid { grid-template-columns: 1fr; }
  .sal-grid { grid-template-columns: 1fr; }

  /* Leads */
  .leads-main-grid { grid-template-columns: 1fr; }

  /* LinkedIn */
  .li-score-grid { grid-template-columns: 1fr; }

  /* Automation */
  .at-build-grid { grid-template-columns: 1fr; }
  .at-nodes-grid { grid-template-columns: repeat(3,1fr); }
  .at-mode-grid  { grid-template-columns: repeat(2,1fr); }
  .saas-grid     { grid-template-columns: 1fr; }

  /* Plans */
  .atp-hero { flex-direction: column; text-align: center; }
  .atp-cards-grid { grid-template-columns: repeat(2,1fr); }
  .atp-billing-row { flex-wrap: wrap; justify-content: center; }

  /* Video */
  .vc-verdict-body { grid-template-columns: 1fr; }
  .csvm-grid { grid-template-columns: 1fr; }

  /* Portfolio */
  .pf-main-grid { grid-template-columns: 1fr; }
  .pf-section-grid { grid-template-columns: 1fr; }

  /* Community */
  .comm-filter-pills { flex-wrap: wrap; gap: 4px; }
  .comm-mod-stats { grid-template-columns: repeat(2,1fr); }

  /* Analytics */
  .analytics-grid { grid-template-columns: repeat(2,1fr); }
  .analytics-kpi-card { padding: 14px 16px; }

  /* Integration marketplace */
  .im-modal { width: 95vw; height: 90vh; }
  .im-grid  { grid-template-columns: repeat(2,1fr); }

  /* Office Calendar */
  .office-main-grid { grid-template-columns: 1fr; }

  /* Lifepath */
  .lp-main-grid { grid-template-columns: 1fr; }

  /* Global */
  .global-main-grid { grid-template-columns: 1fr; }

  /* Recruiter */
  .rec-grid { grid-template-columns: 1fr; }
  .isco-main-grid { grid-template-columns: 1fr; }

  /* Blog */
  .blog-grid { grid-template-columns: repeat(2,1fr); }

  /* Hero sections */
  .wf-tab-hero { padding: 20px; }
  .wf-hero-right { display: none; }
  .wf-hero-title { font-size: clamp(1.4rem,4vw,2rem); }
  .wf-hero-tags { gap: 4px; }
  .wf-hero-tag { font-size: 8px; padding: 3px 8px; }

  /* Data Intelligence */
  .dna-dim-grid { grid-template-columns: repeat(3,1fr); }
  .dna-charts-row { grid-template-columns: 1fr 1fr; }
  .dna-intel-grid { grid-template-columns: 1fr; }

  /* HeyGen / Media avatar */
  .media-avatar-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLET PORTRAIT / LARGE PHONE — 768px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Topbar */
  .tb-title { font-size: 14px; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tb-actions .btn-outline { display: none; }

  /* Page hero */
  .ph { margin-bottom: 16px; }
  .pt { font-size: clamp(1.2rem,5vw,1.8rem); }
  .pd { font-size: 11px; }

  /* Forms */
  .fg label { font-size: 8.5px; }
  .fr { flex-direction: column; }

  /* Buttons */
  .btn-row { flex-direction: column; gap: 8px; }
  .btn-row .btn-p, .btn-row .btn-outline { width: 100%; justify-content: center; }

  /* Salary hero */
  .sal-hero-row { grid-template-columns: 1fr; gap: 8px; }

  /* Brain chat — mobile: shorter chat */
  #tab-brain .chat-wrap { height: 500px !important; }

  /* Brain sidebar hidden by default, toggle on button */
  .brain-history-panel { display: none; }
  .brain-history-panel.show { display: block; }

  /* Interview */
  .interview-main-grid { grid-template-columns: 1fr; }

  /* Recruiter DNA */
  .dna-dim-grid { grid-template-columns: repeat(2,1fr); }

  /* Job search */
  .job-filters-row { flex-wrap: wrap; gap: 6px; }
  .job-card-row { flex-direction: column; }

  /* Automation mode selector */
  .at-mode-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .at-mode-btn { padding: 12px 10px; }
  .at-mode-icon-wrap { width: 40px; height: 40px; font-size: 18px; }

  /* Integration pills */
  .at-int-scroll-wrap { padding: 6px 0; }
  .at-int-pill { font-size: 9.5px; padding: 5px 10px; }

  /* AI nodes */
  .at-nodes-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .at-node-card  { padding: 10px; }

  /* Plans */
  .atp-cards-grid { grid-template-columns: 1fr; }
  .atp-guarantee  { flex-direction: column; text-align: center; }
  .atp-all-include { grid-template-columns: repeat(2,1fr); }

  /* Community */
  .comm-post-actions { flex-wrap: wrap; gap: 6px; }
  .comm-mod-actions  { flex-wrap: wrap; }

  /* Analytics KPIs */
  .analytics-grid { grid-template-columns: repeat(2,1fr); }
  .analytics-kpi-card { padding: 12px; }
  .kpi-val { font-size: 1.6rem; }

  /* Notifications */
  .notif-card { flex-direction: column; gap: 8px; }
  .notif-actions { flex-direction: row; flex-wrap: wrap; }

  /* Modal overlays — full screen on mobile */
  .im-overlay { padding: 0; }
  .im-modal   { width: 100vw; height: 100vh; border-radius: 0; }
  .im-cats    { display: flex; flex-wrap: nowrap; overflow-x: auto; flex-direction: row; width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); padding: 8px; gap: 4px; min-width: unset; max-height: 54px; }
  .im-cat-btn { white-space: nowrap; padding: 4px 10px; font-size: 9px; border-radius: 99px; }
  .im-grid    { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Employer Hub */
  .emp-main-grid { grid-template-columns: 1fr; }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr; }

  /* CSTM / Transformer */
  .cstm-grid { grid-template-columns: 1fr; }

  /* Lifepath sub-tabs */
  .lp-subtab-row { flex-wrap: wrap; gap: 4px; }

  /* Future Self */
  .fs-panel .g2 { grid-template-columns: 1fr; }

  /* Life sim */
  .life-sim-grid { grid-template-columns: 1fr; }

  /* Office Calendar */
  .wc-kb-panel { margin-bottom: 8px; }

  /* Cover letter */
  .cl-subnav { flex-wrap: wrap; gap: 4px; }
  .cl-subnav .stab { font-size: 9px; padding: 5px 8px; }

  /* Media studio sub-tabs */
  .media-subnav .stab { font-size: 9px; padding: 5px 8px; }

  /* Video intelligence */
  .csvm-subtabs { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════
   LARGE PHONE — 600px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  :root { --content-pad: 12px; --card-pad: 14px 16px; }

  .tab  { padding: 12px; }
  .card { padding: 14px 16px; }
  .g4   { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Topbar */
  .topbar { height: 52px; padding: 0 12px; gap: 8px; }
  .tb-logo span { display: none; }

  /* Page title */
  .pt { font-size: 1.1rem; }

  /* Sub-nav */
  .stab { font-size: 9.5px; padding: 5px 8px; }

  /* Salary */
  .sal-result-card { flex-direction: column; gap: 8px; }

  /* Plans */
  .atp-hero-stats-row { grid-template-columns: repeat(2,1fr); }
  .atp-toggle { width: 180px; }

  /* Community */
  .comm-filter-pills { gap: 3px; }
  .comm-filter { font-size: 9.5px; padding: 5px 8px; }
  .comm-post-card { padding: 12px; }
  .comm-post-avatar { width: 32px; height: 32px; font-size: 13px; }

  /* Analytics */
  .analytics-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .kpi-icon { font-size: 20px; }
  .kpi-label { font-size: 9px; }

  /* Integration marketplace */
  .im-grid { grid-template-columns: 1fr; }
  .im-card { padding: 12px; }

  /* Hero */
  .wf-hero-title { font-size: 1.2rem; }
  .wf-hero-desc  { font-size: 12px; }
  .wf-hero-tags  { display: none; }

  /* Resume toolbar */
  .resume-toolbar .btn-outline { font-size: 10px; padding: 6px 10px; }

  /* Automation nodes */
  .at-nodes-grid { grid-template-columns: repeat(2,1fr); }

  /* Video */
  .vc-scores-grid { grid-template-columns: repeat(2,1fr); }

  /* Moderation */
  .comm-mod-stats { grid-template-columns: 1fr 1fr; }
  .comm-mod-card  { padding: 12px; }

  /* Streaming panels */
  .spanel { padding: 12px; font-size: 13px; }

  /* Form */
  input, select, textarea { font-size: 14px !important; }

  /* Salary Engine selects */
  .sal-hero-selects { flex-direction: column; gap: 8px; }
  #salaryRoleSelect, #salaryCountrySelect { width: 100%; }

  /* Bots tab */
  .bot-grid { grid-template-columns: 1fr; }

  /* Blog */
  .blog-card-meta { flex-wrap: wrap; gap: 4px; }

  /* Portfolio sections */
  .pf-section-grid { grid-template-columns: 1fr; }

  /* LinkedIn */
  .li-post-types { grid-template-columns: repeat(2,1fr); }

  /* Achievements */
  .ach-grid { grid-template-columns: 1fr; }

  /* Certifications */
  .cert-grid { grid-template-columns: 1fr; }

  /* Translator */
  .translator-grid { grid-template-columns: 1fr; }
  .translator-langs { flex-direction: column; gap: 8px; }

  /* Career betting */
  .bet-grid { grid-template-columns: 1fr; }

  /* Data DNA */
  .dna-dim-grid { grid-template-columns: repeat(2,1fr); }
  .dna-charts-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHONE — 480px  (most Android phones, older iPhones)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  :root { --content-pad: 10px; }

  .tab  { padding: 10px; }
  .card { padding: 12px 14px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; gap: 10px; }
  .fr   { flex-direction: column; gap: 8px; }

  /* Topbar */
  .topbar { padding: 0 10px; }
  .tb-right { gap: 6px; }
  .tb-right .notif-bell-wrap { display: flex; }

  /* Sub-nav — 2 per row on very small screens */
  .sub-nav { flex-wrap: wrap; }
  .stab { flex: 1 1 calc(50% - 4px); text-align: center; font-size: 9px; padding: 5px 6px; }

  /* Cards */
  .card { border-radius: 12px; }
  .ch   { gap: 7px; margin-bottom: 10px; }
  .ci   { font-size: 16px; }

  /* Buttons */
  .btn-p, .btn-outline, .btn-gold { width: 100%; justify-content: center; margin-bottom: 6px; font-size: 12px; }
  .btn-p + .btn-p, .btn-p + .btn-outline { margin-top: 0; }

  /* Badges — smaller */
  .bdg { font-size: 8px; padding: 3px 7px; }
  .bdg.world { animation: none; }

  /* Salary hero */
  .sal-hero-row { grid-template-columns: 1fr; }
  .sal-hero-stat { padding: 10px; }
  .sal-stat-num  { font-size: 1.4rem; }

  /* Plans hero */
  .atp-hero { padding: 16px; }
  .atp-hero-counter { font-size: 2rem; }
  .atp-guarantee { padding: 12px; }
  .atp-all-include { grid-template-columns: 1fr; }

  /* Community posts */
  .comm-post-top { flex-wrap: wrap; gap: 6px; }
  .comm-post-type { margin-left: auto; }

  /* Analytics */
  .analytics-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .analytics-kpi-card { padding: 10px; }
  .kpi-val { font-size: 1.4rem; }
  .kpi-icon { font-size: 18px; margin-bottom: 4px; }

  /* AI mode buttons */
  .at-mode-grid { grid-template-columns: repeat(2,1fr); }
  .at-mode-glow { padding: 12px 8px; min-height: 90px; }
  .at-mode-label { font-size: 9px; }
  .at-mode-check { width: 16px; height: 16px; font-size: 8px; }

  /* Integration pills — compact */
  .at-int-pill { font-size: 9px; padding: 4px 8px; }
  .at-int-dot  { width: 6px; height: 6px; }

  /* AI nodes */
  .at-nodes-grid { grid-template-columns: repeat(2,1fr); gap: 6px; }
  .at-node-card  { padding: 8px 6px; }
  .at-node-icon  { font-size: 18px; }
  .at-node-label { font-size: 9px; }

  /* Integration marketplace drawer */
  .im-drawer { width: 100vw; }
  .im-modal-header h2 { font-size: 14px; }

  /* Streaming output */
  .spanel { font-size: 12px; padding: 10px; }
  pre, code { font-size: 11px; overflow-x: auto; }

  /* Notifications */
  .notif-list { padding: 8px; }
  .notif-card { padding: 10px; }

  /* Employer hub */
  .emp-job-card { flex-direction: column; }

  /* Heatmap */
  .heatmap-grid { grid-template-columns: repeat(4,1fr); }

  /* DNA charts */
  .dna-dim-grid { grid-template-columns: repeat(2,1fr); gap: 6px; }

  /* Translator */
  .lang-swap-btn { width: 100%; }

  /* Future self panels */
  .fs-status { font-size: 11px; }

  /* Moderation */
  .comm-mod-stats { grid-template-columns: 1fr; }
  .comm-mod-approve, .comm-mod-remove, .comm-mod-pin { flex: 1; text-align: center; }

  /* Profile Guardian toast — real bug found live: its inline styles hardcode
     position:fixed;width:290px;right:20px with zero responsive handling.
     On a 390px-wide phone that's ~74% of the viewport, fixed at the top of
     the page, unconditionally covering whatever hero title/description/
     badges the active tab renders directly underneath it (confirmed live
     on Career Tools Library, but this is a page-independent floating
     widget so the same overlap happens on every tab it appears on).
     Narrowed to fit the viewport with real margin on both sides instead of
     nearly spanning it, and moved right under the header instead of
     122px down, which is itself tuned for desktop's taller ticker/badge
     row layout, not mobile's more compact header. */
  #csProfileGuardian {
    width: calc(100vw - 32px) !important;
    right: 16px !important;
    left: 16px !important;
    top: 64px !important;
    padding: 10px 12px !important;
  }
  /* The radial progress ring alone accounts for ~48px of the widget's
     ~166px total height -- on a mobile viewport there's only ~48px of
     genuinely clear space between the header and most tabs' own hero
     content, so no repositioning alone gets this to zero overlap. Trading
     the decorative ring for a plain percentage on mobile only shrinks the
     widget enough to actually fit the gap instead of just moving the
     overlap around. */
  #csProfileGuardian #pgRingWrap { display: none !important; }
  #csProfileGuardian #pgBody { margin-bottom: 6px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   SMALL PHONE — 380px  (iPhone SE, Galaxy A series budget)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  :root { --content-pad: 8px; }

  .tab  { padding: 8px; }
  .card { padding: 10px 12px; border-radius: 10px; }

  /* Hide non-essential labels */
  .tb-title { display: none; }
  .nl { font-size: 10px; }

  /* Topbar */
  .topbar { height: 48px; }
  .app-content { padding-top: 48px; }

  /* Sub-nav — full width pills */
  .stab { font-size: 8.5px; padding: 4px 5px; }

  /* Salary calculator */
  .sal-calc-result { flex-direction: column; text-align: center; }

  /* Plans — single column, compact */
  .atp-cards-grid { grid-template-columns: 1fr; gap: 10px; }
  .atp-plan-card  { padding: 16px; }
  .atp-plan-price { font-size: 1.8rem; }

  /* Community */
  .comm-filter-pills { overflow-x: auto; flex-wrap: nowrap; gap: 4px; }
  .comm-filter { flex-shrink: 0; font-size: 9px; }

  /* Analytics — single column */
  .analytics-grid { grid-template-columns: 1fr 1fr; }

  /* Mode selector — icons only */
  .at-mode-label { display: none; }
  .at-mode-icon-wrap { width: 36px; height: 36px; font-size: 16px; }

  /* Nodes — very compact */
  .at-nodes-grid { grid-template-columns: repeat(3,1fr); gap: 4px; }
  .at-node-label { font-size: 8px; }

  /* Buttons — max 2 per row */
  .btn-group { flex-wrap: wrap; }
  .btn-group > * { flex: 1 1 calc(50% - 4px); font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
   EXTRA SMALL — 320px  (old iPhones, small Androids, watches)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 320px) {
  .tab  { padding: 6px; }
  .card { padding: 8px 10px; }
  .btn-p, .btn-outline { font-size: 11px; padding: 8px 12px; }
  .stab { font-size: 8px; padding: 4px; }
  .analytics-grid { grid-template-columns: 1fr; }
  .at-nodes-grid  { grid-template-columns: repeat(2,1fr); }
  .g2,.g3,.g4     { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE SIDEBAR OVERLAY SYSTEM
   ═══════════════════════════════════════════════════════════════════ */
.mobile-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 998;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

@media (max-width: 1024px) {
  .mobile-overlay { display: block; opacity: 0; pointer-events: none; transition: opacity .25s; }
  .mobile-overlay.active { opacity: 1; pointer-events: all; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.mobile-open { transform: translateX(0); box-shadow: 8px 0 40px rgba(0,0,0,.6); }
}

/* ═══════════════════════════════════════════════════════════════════
   TOUCH & POINTER OPTIMISATIONS
   ═══════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets on touch devices */
  .btn-p, .btn-outline, .btn-gold { min-height: 44px; }
  .stab  { min-height: 40px; padding-top: 10px; padding-bottom: 10px; }
  .ntab  { min-height: 42px; }
  input, select, textarea { min-height: 44px; font-size: 16px !important; }

  /* Remove hover effects that don't make sense on touch */
  .card:hover { transform: none; }
  .ntab:hover { transform: none; }
  .at-node-card:hover { transform: none; }

  /* Larger close/action buttons */
  .im-close, .modal-close { width: 44px; height: 44px; font-size: 20px; }

  /* Ensure scrollable areas have momentum scrolling */
  .sub-nav, .at-int-scroll-wrap, .im-cats, .sidebar {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   LANDSCAPE PHONE — handles rotated phones
   ═══════════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .topbar { height: 46px; }
  .sidebar { top: 46px; height: calc(100vh - 46px); }
  .app-content { padding-top: 46px; }
  .tab { padding: 8px 12px; }
  .g2  { grid-template-columns: 1fr 1fr; }
  .wf-tab-hero { padding: 10px; }
  .wf-hero-right { display: none; }
  .atp-hero { padding: 10px; }
  .atp-hero-counter { font-size: 1.8rem; }
  .modal-inner, .im-modal { max-height: 90vh; overflow-y: auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   HIGH-DENSITY / RETINA DISPLAYS
   ═══════════════════════════════════════════════════════════════════ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .card::before { background: linear-gradient(135deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 50%); }
  .bdg.world { box-shadow: 0 0 0 0.5px rgba(91,124,153,.3); }
}

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE PREFERENCE (already dark — add light mode support)
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  /* App is dark-first — respect user preference if they want it even lighter */
  /* Currently the design is intentionally dark (space theme) — override only critical contrast */
  :root {
    --text-contrast-boost: 1.1;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION — accessibility
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .bdg.world { animation: none; }
  .dot-pulse  { animation: none; opacity: 1; }
  .wf-live-dot { animation: none; opacity: 1; }
  .at-mode-check { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   PRINT — clean printable output
   ═══════════════════════════════════════════════════════════════════ */
@media print {
  .sidebar, .topbar, .sub-nav, .btn-p, .btn-outline,
  .btn-gold, .mobile-overlay, .im-overlay, .notif-bell-wrap,
  .tb-right, .sb-toggle { display: none !important; }

  .app-content { margin-left: 0 !important; padding-top: 0 !important; }
  .tab { padding: 0 !important; }
  .card { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; }
  body { background: #fff !important; color: #000 !important; }
  .wf-hero-title, h1, h2, h3 { color: #000 !important; -webkit-text-fill-color: #000 !important; }
  .tab { display: block !important; }
  .g2, .g3 { grid-template-columns: 1fr 1fr; }
  .g4 { grid-template-columns: repeat(2,1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   UNIQUE RESPONSIVE INNOVATIONS
   ═══════════════════════════════════════════════════════════════════ */

/* Fluid typography — scales smoothly across all devices */
.wf-hero-title   { font-size: clamp(1.2rem, 4vw, 2.4rem); line-height: 1.2; }
.wf-hero-desc    { font-size: clamp(11px, 1.8vw, 15px); }
.atp-hero-counter { font-size: clamp(2rem, 6vw, 4rem); }
.sal-stat-num    { font-size: clamp(1.2rem, 3vw, 2rem); }
.pt              { font-size: clamp(1.1rem, 3.5vw, 2rem); }

/* Fluid spacing — smooth scale from mobile to 4K */
.tab { padding: clamp(10px, 3vw, 32px); }

/* Adaptive card grid — fills any screen width perfectly */
.adaptive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: clamp(10px, 2vw, 20px);
}

/* Responsive table wrapper — horizontal scroll on small screens */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
}
.table-wrap table { min-width: 600px; }

/* Safe area insets — iPhone notch/home bar */
@supports (padding: max(0px)) {
  .topbar  { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .sidebar { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .tab     { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

/* Container query fallback — ensures cards never overflow their parent */
.card { max-width: 100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }

/* Overflow guard — prevents horizontal scroll on any screen */
body { overflow-x: hidden; }
.tab, .app-content { overflow-x: hidden; }

/* Image responsiveness */
img, video, iframe { max-width: 100%; height: auto; }
iframe { border-radius: 8px; }

/* Responsive scrollbars — thinner on touch devices */
@media (pointer: coarse) {
  ::-webkit-scrollbar { width: 0; height: 0; }
}

/* ── Focus styles for keyboard/accessibility ─────────────────────── */
:focus-visible {
  outline: 2px solid var(--aurora-cyan, #5b7c99);
  outline-offset: 2px;
  border-radius: 4px;
}