/* ============================================================
   BRAIN-MIMETIX · phone & tablet adaptations   (Tovexa Digital)
   Loaded LAST so it wins over style.css / hero.css.
   ============================================================ */

/* never let a wide child (heatmap, chip row, code) scroll the page sideways */
html, body { max-width: 100%; overflow-x: hidden; }
img, canvas, svg { max-width: 100%; }

/* ---------- tablet & below (<=1080px) ---------- */
@media (max-width: 1080px) {
  /* hero.css hides the whole nav here — but About must stay reachable,
     so keep the bar and show only that link, styled as a tap target. */
  .topnav { display: flex !important; align-items: center; gap: 0; }
  .topnav a:not(.about-link) { display: none; }
  .topnav .about-link {
    border: 1px solid rgba(var(--accent-rgb, 45 129 255), .45);
    border-radius: 999px; padding: 8px 16px; font-size: 12.5px;
    background: rgba(var(--accent-rgb, 45 129 255), .08);
  }
}

/* ---------- phones (<=640px) ---------- */
@media (max-width: 640px) {
  .wrap { padding: 16px 12px 56px; }

  /* top bar: brand row, then nav + status side by side */
  .topbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .brand h1 { font-size: 17px; letter-spacing: 2px; }
  .brand .sub { font-size: 8.5px; letter-spacing: 1.4px; }
  .topbar-right { width: 100%; display: flex; align-items: center;
    justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .status-pill { font-size: 9.5px; letter-spacing: .8px; padding: 6px 11px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* 3D cortex: shorter stage, and drop the 14 callout labels — at this
     width they overlap into noise. The glowing region dots remain. */
  #brain-stage { height: 34vh; min-height: 240px; }
  .brain-marker .bm-text, .brain-marker .bm-line { display: none; }

  /* console panels */
  .panel { padding: 14px; border-radius: 14px; }
  .drop { padding: 20px 12px; }
  .pp-chip { padding: 9px 13px; font-size: 11px; }   /* comfortable tap target */
  .btn, .dl-report { padding: 14px; font-size: 12.5px; }
  .report-toolbar { justify-content: stretch; }
  .dl-report { width: 100%; justify-content: center; }

  /* verdict */
  .verdict-hero { gap: 14px; }
  .score-ring { width: 150px; height: 150px; }
  .score-ring svg { width: 150px; height: 150px; }
  .verdict-txt h2 { font-size: 19px; }
  .rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    justify-content: center; }
  .ad-badge { margin-left: 0; }

  /* gaze + feed + colour blocks */
  .gz-score b { font-size: 36px; }
  .gaze-stats { gap: 8px; }
  .clr-row { grid-template-columns: 1fr; }
  .judge-dims { gap: 4px 8px; }

  /* boot hologram */
  .holo-stage { width: 240px; height: 290px; transform: scale(.9); }
  .boot-title { font-size: 19px; letter-spacing: 4px; }
  .boot-progress { width: min(230px, 80vw); }

  /* about tablet */
  .about-tablet { width: 94vw; max-height: 88vh; padding: 16px 10px; border-radius: 20px; }
  .at-screen { padding: 18px 16px; max-height: calc(88vh - 32px); }
  .at-head { gap: 10px; }
  .at-head h2 { font-size: 17px; letter-spacing: 1.5px; }
  .at-head span { font-size: 8px; letter-spacing: 1.2px; }
  .at-logo { width: 34px; height: 34px; }
  .at-lead { font-size: 13.5px; }
  .at-body p, .at-body li { font-size: 12.5px; }
  .at-close { top: 6px; right: 10px; }

  /* beta toast: full-width card at the bottom, above the thumb line */
  .beta-toast { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 11px 12px; }
  .bt-txt { font-size: 11.5px; }
}

/* ---------- small phones (<=380px) ---------- */
@media (max-width: 380px) {
  .brand h1 { font-size: 15.5px; }
  .status-pill { font-size: 8.5px; }
  .score-ring, .score-ring svg { width: 128px; height: 128px; }
  .boot-title { font-size: 16px; letter-spacing: 3px; }
  #brain-stage { height: 30vh; min-height: 210px; }
}

/* ---------- landscape phones: reclaim vertical space ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  #brain-stage { height: 62vh; min-height: 200px; }
  .about-tablet { max-height: 94vh; }
  .at-screen { max-height: calc(94vh - 32px); }
}

/* ---------- coarse pointers: bigger hit areas, no hover-only reveals ---------- */
@media (hover: none) and (pointer: coarse) {
  .bt-close, .at-close { min-width: 40px; min-height: 40px; }
  .drop { -webkit-tap-highlight-color: transparent; }
}