/* ==========================================================================
   seo-responsive.css — additive responsive layer + new-tool styling.
   Loaded site-wide after style.css. CSP-safe (no inline JS needed).
   ========================================================================== */

/* ---- Mobile navigation drawer (pure-CSS checkbox toggle) ----------------- */
.nav-burger{display:none}
.nav-toggle{display:none}
@media (max-width:980px){
  .topbar{flex-wrap:wrap;row-gap:10px}
  .nav-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:38px;padding:8px;cursor:pointer;border:1px solid var(--line);
    border-radius:10px;background:var(--panel-2);margin-left:auto}
  .nav-burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:.2s}
  .nav{flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;
    max-height:0;overflow:hidden;opacity:0;transition:max-height .28s ease,opacity .2s ease;font-size:1rem}
  .nav a{padding:11px 8px;border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .nav .ghost{margin-top:8px;text-align:center}
  .nav-toggle:checked ~ .nav{max-height:85vh;overflow:auto;opacity:1}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
}

/* ---- General small-screen polish ---------------------------------------- */
@media (max-width:760px){
  /* Toolkit's 220px sidebar grid -> single column on mobile */
  .grid[style*="220px"]{grid-template-columns:1fr !important}
}
@media (max-width:560px){
  .wrap{padding:18px 14px 48px}
  .panel{padding:16px}
  .hero{padding:24px 18px}
  .row{flex-direction:column;align-items:stretch}
  .row .btn,.row .btn.secondary{width:100%;text-align:center}
  table,.tbl{font-size:.86rem}
}
.panel{max-width:100%}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
input,textarea,select{font-size:16px;max-width:100%}
img,svg,canvas,video{max-width:100%;height:auto}

/* ==========================================================================
   Shared finding / severity UI for new tools (Secret Scanner, Config Auditor)
   ========================================================================== */
.nx-shell{display:grid;gap:18px;margin-top:18px}
.nx-detect{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.78rem;
  padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);color:var(--accent)}
.nx-score-wrap{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
@media (max-width:560px){.nx-score-wrap{grid-template-columns:1fr;text-align:center}}
.nx-gauge{--pct:0;--col:var(--ok);width:120px;height:120px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--col) calc(var(--pct)*1%),var(--line) 0);position:relative;margin:0 auto}
.nx-gauge::after{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--panel)}
.nx-gauge b{position:relative;z-index:1;font-size:1.9rem;line-height:1}
.nx-gauge small{position:relative;z-index:1;display:block;font-size:.66rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.16em;margin-top:2px}
.nx-findings{display:grid;gap:10px;margin-top:6px}
.nx-find{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.nx-find .dot{width:10px;height:10px;border-radius:50%;margin-top:7px}
.nx-find h4{margin:0 0 3px;font-size:.97rem}
.nx-find p{margin:0;color:var(--muted);font-size:.9rem;word-break:break-word}
.nx-find pre{margin:6px 0 0;white-space:pre-wrap;word-break:break-word;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:var(--mono);font-size:.8rem;color:var(--ink)}
.nx-d-crit{background:var(--crit)}.nx-d-high{background:#ff8a5d}.nx-d-med{background:var(--warn)}
.nx-d-low{background:var(--accent)}.nx-d-ok{background:var(--ok)}.nx-d-info{background:var(--faint)}
.nx-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.nx-chip{font-family:var(--mono);font-size:.72rem;padding:4px 9px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--muted)}
.nx-examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.nx-examples a{font-family:var(--mono);font-size:.76rem;text-decoration:none;
  padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);color:var(--accent)}
.nx-examples a:hover{border-color:var(--accent)}
.nx-src{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.72rem;
  padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}

/* ------------------------------------------------------------------ */
/* AI Cyber Security Consultant — multi-turn chat log (ai_consultant.php) */
/* ------------------------------------------------------------------ */
.chat-log{display:flex;flex-direction:column;gap:12px;max-height:560px;overflow-y:auto;padding-right:4px}
.chat-msg{border:1px solid var(--line);border-radius:12px;padding:10px 13px;background:var(--panel-2)}
.chat-msg.user{border-color:rgba(124,108,255,.40);background:rgba(124,108,255,.07)}
.chat-msg.ai{border-color:rgba(57,211,255,.32);background:rgba(57,211,255,.05)}
.chat-who{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.chat-msg.user .chat-who{color:var(--accent-2)}
.chat-msg.ai .chat-who{color:var(--accent)}
.chat-body{color:var(--ink);font-size:.94rem;line-height:1.55;white-space:normal;word-break:break-word}
@media (max-width:640px){.chat-log{max-height:none}}

/* ============================================================================
   QUANTUM X — responsive UX polish (design-only, additive)
   ============================================================================ */

/* Smooth, larger tap targets + safe-area on phones */
@media (max-width:980px){
  .nav a{border-radius:10px}
  .nav a::after{display:none}                 /* drop desktop underline in the drawer */
  .nav-burger{transition:border-color .18s,background .18s}
  .nav-burger:hover{border-color:var(--accent)}
  .nav .ghost{border-radius:10px}
}

/* comfortable reading + spacing on small screens */
@media (max-width:560px){
  body{line-height:1.6}
  .hero h1{font-size:clamp(1.55rem,7vw,2rem)}
  .hero{border-radius:16px}
  .panel,.card{border-radius:16px}
  h2.sec{margin:22px 0 10px}
  .btn{padding:13px 18px;justify-content:center}     /* fuller, thumb-friendly buttons */
  .chips{gap:7px}
  .badge{font-size:.7rem}
  /* honour iOS safe area at the bottom */
  .wrap{padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
  .foot{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}

/* tablet: keep cards from getting too wide/empty */
@media (min-width:561px) and (max-width:900px){
  .grid.cols-3{grid-template-columns:1fr 1fr}
  .grid.cols-4{grid-template-columns:1fr 1fr}
}

/* Academy: single-column, tighter cards on phones */
@media (max-width:560px){
  .acad .a-hero{padding:26px 18px}
  .acad .mod{padding:16px}
  .acad .lesson{padding:18px}
  .acad .navrow{gap:8px}
  .acad .navrow .btn,.acad .navrow .btn.secondary{width:100%;text-align:center}
}

/* AI consultant / tutor chat: full-height feel on mobile already handled;
   make the composer buttons full-width for easy tapping */
@media (max-width:560px){
  #acad-tutor-form .row .btn{width:100%}
}

/* ---- grouped dropdowns inside the mobile drawer ------------------------- */
@media (max-width:980px){
  .nd{display:block;width:100%}
  /* Group label becomes a non-interactive section header. */
  .nd-label{display:block;width:100%;padding:12px 8px 4px;border-radius:0;
    color:var(--muted);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
    cursor:default;pointer-events:none}
  .nd-label .badge{display:none}
  .nd::after{display:none}                       /* no hover bridge on touch */
  /* Submenus are ALWAYS shown on mobile — no tap-to-open needed, so the drawer
     can never get "stuck". The whole drawer scrolls (max-height:85vh). */
  .nd-menu{position:static;opacity:1;visibility:visible;transform:none;display:flex !important;
    flex-direction:column;min-width:0;padding:0 0 6px 12px;border:0;border-radius:0;
    background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nd-menu a{font-size:1rem;padding:9px 8px;border-bottom:1px solid var(--line)}
}

/* ==========================================================================
   Phone-responsive hardening (v3.1) — covers the dashboard, admin analytics,
   scam inspector, and pricing custom grids, plus global overflow safety.
   Base .grid.cols-* already collapse; these target the bespoke grids and the
   long-token / wide-content overflow that shows up on narrow screens.
   ========================================================================== */

/* Global overflow safety: never let a long URL, token, hash, or email push the
   page wider than the viewport (the classic mobile horizontal-scroll bug). */
html,body{overflow-x:hidden}
.card p,.card h3,.panel p,.si-lede,.dash-id b,.mono,.faint,.badge,td,th{overflow-wrap:anywhere}
pre,code,.mono{word-break:break-word}

/* Any button styled as a card must keep bright, readable text (buttons default
   to a dim inherited color against the dark card background). */
button.card,button.card *{color:var(--ink)}
button.card{cursor:pointer;transition:border-color .15s ease,background .15s ease}
button.card:hover,button.card:focus-visible{border-color:var(--accent);background:rgba(57,211,255,.06)}

@media (max-width:560px){
  /* Scam Inspector: chips already flex; make the verdict + AI panels breathe. */
  .si-hero{padding:24px 16px 18px}
  .si-hero h1{font-size:1.4rem}
  .si-verdict{padding:16px}
  .si-verdict h2{font-size:1.2rem}
  .si-examples{gap:8px}
  .si-why li,.si-do li{font-size:.9rem}

  /* Dashboard console: every bespoke grid to one column, meters full-width. */
  .dash-plan{grid-template-columns:1fr}
  .dash-metrics{grid-template-columns:1fr}
  .dash-quick{grid-template-columns:1fr 1fr}
  .dash-head{flex-direction:column;align-items:flex-start}
  .dash-ring-card{flex-direction:row}
  .dash-sec-list div{flex-direction:column;gap:2px}
  .dash-sec-list span:first-child{font-size:.8rem}

  /* Admin analytics: KPIs 2-up, charts and tables stack, bars stay readable. */
  .an-kpis{grid-template-columns:repeat(2,1fr)}
  .an-grid{grid-template-columns:1fr}
  .an-head{flex-direction:column;align-items:flex-start}
  .an-range{margin-top:6px}
  .an-bars{height:60px}
  .an-tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Pricing teaser + comparison. */
  .price-row{grid-template-columns:1fr}

  /* Device Agent / Phone Setup dashboards (see device_agent styles). */
  .da-grid,.da-metrics,.ps-grid{grid-template-columns:1fr !important}
}

@media (min-width:561px) and (max-width:900px){
  .dash-metrics{grid-template-columns:repeat(2,1fr)}
  .an-kpis{grid-template-columns:repeat(3,1fr)}
  .an-grid{grid-template-columns:1fr}
  .price-row{grid-template-columns:repeat(2,1fr)}
  .dash-quick{grid-template-columns:repeat(3,1fr)}
}

/* Touch targets: every interactive chip/button meets 44px min on phones. */
@media (max-width:560px){
  .si-examples button,.chip,.btn,.nd-menu a{min-height:44px}
  .btn{padding:12px 18px}
}