/* =====================================================
   MAP OF SCIENCES — MOBILE  v11
   Only activates at max-width:768px.
   Body is the scroll container. Map = 82vh block.
   Info panel = normal block below map. Body scrolls both.
   ===================================================== */
@media (max-width: 768px) {

  /* HEADER */
  .site-header {
    position:fixed !important; top:0; left:0; right:0;
    height:52px !important; padding:0 14px !important;
    background:#fff !important; border-bottom:1px solid #e2e8f0 !important;
    box-shadow:0 1px 6px rgba(0,0,0,.07) !important;
    display:flex !important; align-items:center !important;
    justify-content:space-between !important; z-index:1000 !important;
  }
  .search-container { width:auto !important; }
  #global-search, #search-results { display:none !important; }
  .site-title a { font-size:1rem !important; font-weight:700 !important; color:#0f172a !important; }

  /* Header icon row */
  #mob-header-icons { display:flex; align-items:center; gap:6px; }
  .mob-icon-btn {
    width:38px; height:38px; border-radius:10px;
    background:#f8fafc; border:1px solid #e2e8f0;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:#64748b; flex-shrink:0;
    -webkit-tap-highlight-color:transparent;
  }
  .mob-icon-btn:active,.mob-icon-btn.mob-active { background:#eff6ff; color:#6366f1; border-color:#c7d2fe; }
  .mob-hamburger { display:flex; flex-direction:column; gap:4px; width:18px; }
  .mob-hamburger span { display:block; height:2px; border-radius:2px; background:currentColor; transition:transform .2s,opacity .2s; }
  .mob-icon-btn.mob-active .mob-hamburger span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .mob-icon-btn.mob-active .mob-hamburger span:nth-child(2) { opacity:0; }
  .mob-icon-btn.mob-active .mob-hamburger span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

  /* Drawer */
  #mob-drawer {
    position:fixed; top:52px; left:0; bottom:0; width:270px;
    background:#fff; border-right:1px solid #e2e8f0; z-index:900;
    transform:translateX(-100%); transition:transform .28s cubic-bezier(.25,.46,.45,.94);
    overflow-y:auto; box-shadow:4px 0 20px rgba(0,0,0,.1);
  }
  #mob-drawer.mob-open { transform:translateX(0); }
  #mob-backdrop { position:fixed; inset:52px 0 0 0; background:rgba(15,23,42,.25); z-index:850; display:none; }
  #mob-backdrop.mob-open { display:block; }
  .mob-drawer-heading { padding:20px 18px 8px; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:#94a3b8; }
  .mob-drawer-link { display:flex; align-items:center; justify-content:space-between; padding:11px 18px; font-size:.88rem; font-weight:500; color:#334155; text-decoration:none; border-left:3px solid transparent; -webkit-tap-highlight-color:transparent; }
  .mob-drawer-link:active,.mob-drawer-link.mob-current { color:#4338ca; background:#eff6ff; border-left-color:#6366f1; }
  .mob-drawer-link.mob-soon { color:#cbd5e1; pointer-events:none; }
  .mob-drawer-badge { font-size:.6rem; font-weight:700; padding:2px 7px; border-radius:10px; background:#eff6ff; color:#6366f1; text-transform:uppercase; }
  .mob-soon .mob-drawer-badge { background:#f8fafc; color:#cbd5e1; }
  .mob-drawer-divider { height:1px; background:#f1f5f9; margin:8px 18px; }

  /* Search overlay */
  #mob-search-overlay { position:fixed; inset:0; background:#f8fafc; z-index:1100; display:none; flex-direction:column; }
  #mob-search-overlay.mob-open { display:flex; }
  #mob-search-bar { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid #e2e8f0; background:#fff; }
  #mob-search-input { flex:1; padding:10px 14px; background:#f1f5f9; border:1.5px solid #6366f1; border-radius:10px; color:#0f172a; font-size:1rem; outline:none; }
  #mob-search-input::placeholder { color:#94a3b8; }
  #mob-search-close-btn { width:38px; height:38px; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:8px; color:#64748b; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  #mob-search-list { flex:1; overflow-y:auto; padding:12px 14px; }
  .mob-search-item { padding:12px 14px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; margin-bottom:8px; cursor:pointer; }
  .mob-search-item strong { display:block; color:#0f172a; font-size:.88rem; margin-bottom:2px; }
  .mob-search-item small { color:#94a3b8; font-size:.72rem; }
  #mob-search-empty { text-align:center; color:#94a3b8; font-size:.88rem; margin-top:48px; }

  /* Map overlays */
  #mob-bc {
    position:absolute; top:0; left:0; right:0; height:28px; z-index:20;
    display:flex; align-items:center; padding:0 8px;
    background:rgba(241,245,249,.96); border-bottom:1px solid #e2e8f0;
    font-size:.67rem; color:#94a3b8;
    /* never wrap — JS limits items to prevent overflow */
    white-space:nowrap; overflow:hidden;
    pointer-events:none;
  }
  #mob-bc strong { color:#334155; font-weight:600; }
  #mob-bc a { color:#94a3b8; text-decoration:none; pointer-events:all; }

  #mob-count-btn {
    position:absolute; top:34px; right:78px; z-index:20;
    font-size:.68rem; font-weight:700; padding:4px 10px; border-radius:6px;
    cursor:pointer; border:1px solid #cbd5e1; background:#fff; color:#94a3b8;
    white-space:nowrap; -webkit-tap-highlight-color:transparent;
  }
  #mob-count-btn.on { background:#6366f1; color:#fff; border-color:#6366f1; }

  #mob-share-btn {
    position:absolute; top:34px; right:10px; z-index:20;
    display:flex; align-items:center; gap:4px;
    font-size:.68rem; font-weight:700; padding:4px 10px; border-radius:6px;
    cursor:pointer; border:1px solid #cbd5e1; background:#fff; color:#94a3b8;
    white-space:nowrap; -webkit-tap-highlight-color:transparent;
  }
  #mob-share-btn.copied { background:#f0fdf4; color:#16a34a; border-color:#4ade80; }

  #mob-scroll-arr {
    position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:20;
    width:36px; height:36px; border-radius:50%;
    background:#fff; border:1px solid #e2e8f0;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
    display:flex; align-items:center; justify-content:center;
    color:#6366f1; font-size:1rem; font-weight:700; cursor:pointer;
    animation:bD 1.8s ease-in-out infinite;
    -webkit-tap-highlight-color:transparent;
  }
  @keyframes bD {
    0%,100% { transform:translateX(-50%) translateY(0); }
    50%      { transform:translateX(-50%) translateY(4px); }
  }
  #mob-hint {
    position:absolute; bottom:58px; left:50%; transform:translateX(-50%);
    display:flex; align-items:center; gap:12px;
    background:rgba(15,23,42,.6); border-radius:20px; padding:6px 16px;
    font-size:.67rem; color:rgba(255,255,255,.8);
    white-space:nowrap; pointer-events:none; z-index:10;
    animation:hF .5s ease 8s forwards;
  }
  @keyframes hF { to { opacity:0; } }

  /* Info panel */
  #mob-info { background:#fff; min-height:50vh; padding:28px 20px 80px; }
  #mob-info-title { font-size:1.4rem; font-weight:800; color:#0f172a; margin:0 0 3px; letter-spacing:-.02em; line-height:1.2; }
  #mob-info-type  { font-size:.67rem; text-transform:uppercase; letter-spacing:.1em; color:#94a3b8; margin-bottom:22px; font-weight:600; }
  .ms    { display:flex; align-items:center; gap:10px; margin:26px 0 12px; }
  .ms-l  { font-family:Georgia,serif; font-style:italic; font-size:.92rem; color:#94a3b8; white-space:nowrap; }
  .ms-ln { flex:1; height:1px; background:#e2e8f0; }
  .mob-def  { background:#f5f3ff; border-left:3px solid #6366f1; padding:14px 16px; border-radius:0 10px 10px 0; font-size:.92rem; color:#334155; line-height:1.75; }
  .mob-role { font-size:.92rem; color:#475569; line-height:1.75; margin:0; }
  .mob-subs { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .mob-sub  { display:block; padding:10px 12px; border:1px solid #e2e8f0; border-radius:8px; text-decoration:none; color:#1e293b; font-size:.79rem; font-weight:600; background:#fafafa; line-height:1.35; -webkit-tap-highlight-color:transparent; }
  .mob-sub:active { border-color:#6366f1; background:#f5f3ff; color:#4338ca; }
  .mob-refs    { margin:0; padding-left:16px; }
  .mob-refs li { margin-bottom:8px; font-size:.86rem; line-height:1.5; }
  .mob-refs a  { color:#6366f1; text-decoration:none; }
  .mob-ext { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .mob-eb  { display:flex; align-items:center; gap:8px; padding:11px 12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; font-size:.82rem; color:#334155; font-weight:500; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .mob-eb:active { background:#eff6ff; border-color:#6366f1; color:#4338ca; }
  .mob-discs { display:flex; flex-wrap:wrap; gap:8px; }
  .mob-dp    { padding:7px 16px; border-radius:20px; font-size:.8rem; font-weight:600; text-decoration:none; -webkit-tap-highlight-color:transparent; }
  .mob-dl    { background:#6366f1; color:#fff !important; }
  .mob-ds    { background:#f1f5f9; color:#94a3b8 !important; border:1px solid #e2e8f0; }
  #mob-foot  { background:#f8fafc; color:#94a3b8; font-size:.72rem; text-align:center; padding:20px; border-top:1px solid #e2e8f0; }

  /* ── AI SECTION — Runwise-style soft gradient ── */
  .mob-ai-section {
    margin:0 -20px; padding:22px 20px 18px;
    background:linear-gradient(135deg,#f0f4ff 0%,#faf0ff 50%,#fff0f5 100%);
    border-top:1px solid rgba(99,102,241,0.1);
  }
  .mob-ai-grp-lbl { font-size:.58rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:#94a3b8; margin:10px 0 5px; }
  .mob-ai-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:6px; }
  .mob-ai-btn { display:flex; flex-direction:column; gap:1px; padding:8px 9px; border-radius:8px; border:0.5px solid; cursor:pointer; text-align:left; -webkit-tap-highlight-color:transparent; }
  .mob-ai-btn:active { opacity:0.8; transform:scale(0.96); }
  .mob-ai-icon { font-size:12px; margin-bottom:2px; }
  .mob-ai-name { font-size:.68rem; font-weight:600; line-height:1.2; }
  .mob-ai-sub  { font-size:.58rem; line-height:1.2; opacity:0.7; }
  .blue-btn   { background:#e6f1fb; border-color:#b5d4f4; color:#0c447c; }
  .green-btn  { background:#eaf3de; border-color:#c0dd97; color:#27500a; }
  .amber-btn  { background:#faeeda; border-color:#fac775; color:#633806; }
  .purple-btn { background:#eeedfe; border-color:#cecbf6; color:#3c3489; }

  /* ── VIDEO SECTION — same gradient ── */
  .mob-yt-section { margin:0 -20px; padding:18px 20px 22px; background:linear-gradient(135deg,#f0f4ff 0%,#faf0ff 50%,#fff0f5 100%); border-top:1px solid rgba(99,102,241,0.08); }
  .mob-yt-sort-btn { font-size:.6rem; padding:3px 9px; border-radius:10px; border:0.5px solid #e2e8f0; background:#f8fafc; color:#64748b; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .mob-yt-on { background:#6366f1 !important; color:#fff !important; border-color:#6366f1 !important; }
  .mob-yt-card { display:flex; gap:10px; cursor:pointer; border-radius:8px; padding:4px; border:0.5px solid transparent; margin-bottom:8px; -webkit-tap-highlight-color:transparent; }
  .mob-yt-card:active { background:#f5f3ff; border-color:#818cf8; }
  .mob-yt-thumb { width:110px; min-width:110px; aspect-ratio:16/9; border-radius:6px; position:relative; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .mob-yt-play { width:26px; height:26px; background:rgba(255,0,0,0.85); border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .mob-yt-dur { position:absolute; bottom:3px; right:4px; background:rgba(0,0,0,.78); color:#fff; font-size:.55rem; padding:1px 4px; border-radius:2px; }
  .mob-yt-info { flex:1; min-width:0; }
  .mob-yt-title { font-size:.72rem; font-weight:600; color:#0f172a; line-height:1.3; margin-bottom:2px; }
  .mob-yt-meta  { font-size:.6rem; color:#94a3b8; }

  /* Page transitions */
  @keyframes mSR { from{transform:translateX(100%);opacity:.6} to{transform:translateX(0);opacity:1} }
  @keyframes mSL { from{transform:translateX(-28%);opacity:.6} to{transform:translateX(0);opacity:1} }
  .mob-fwd  { animation:mSR .22s cubic-bezier(.25,.46,.45,.94) both; }
  .mob-back { animation:mSL .22s cubic-bezier(.25,.46,.45,.94) both; }
}