/* ============================================================
   AWS SBG AAST SECURITY ACADEMY — GLOBAL RESPONSIVE LAYER
   Loaded LAST on every page. Makes all layouts adapt from
   360px phones → tablets → laptops → ultrawide.
   Breakpoints: 1599 / 1400 / 1200 / 1024 / 768 / 480 / 360
   ============================================================ */

/* ---------- 1. Fluid root + overflow guards ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
body { min-height: 100vh; min-height: 100dvh; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
img { object-fit: contain; }
pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
code, kbd, samp { overflow-wrap: break-word; word-break: break-word; }
.reading-panel pre, .reading-panel code, .quiz-panel p, .mission-box li {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}
table { width: 100%; border-collapse: collapse; }
ul, ol { overflow-wrap: break-word; }

/* Never allow fixed-width children to force horizontal scroll */
.section, .container, .map-wrap, .room-container,
.cli-container, .modal-container, .lab-modal,
.auth-card, .panel, .card, .workspace {
  max-width: 100%;
  min-width: 0;
}
p, li, td, th { overflow-wrap: break-word; }
.room-title, .room-subtitle, .amb-title, .amb-desc,
.lab-title, .card h3, .path-title { overflow-wrap: break-word; word-break: break-word; }

/* ---------- 2. Universal nav behaviour ---------- */
#navbar, .cli-nav, .map-nav, .path-nav, .top-nav, .nav {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}
.cli-nav, .map-nav, .path-nav, .top-nav, .nav {
  flex-wrap: wrap;
  gap: 10px;
  row-gap: 10px;
}
/* The main navbar carries 11 links and CANNOT fit its container: logo 380px
   + links 1111px + SIGN IN/SIGN UP block 285px = ~1.8k px of content against
   a 1400px (1500px >=1600px) container. Letting it wrap turned a 60px fixed
   bar into a 2-3 row stack that covered the hero underneath it. Keep it on
   one line and shed width in tiers instead; the drawer takes over <=1400px.
   min-width:0 is the safety net: if a tier ever under-shoots, the links
   scroll inside their own box instead of pushing rows down the page. */
.nav-container {
  flex-wrap: nowrap;
  gap: 16px;
  row-gap: 0;
}
.nav-links {
  flex-wrap: nowrap;
  min-width: 0;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
/* Nav labels are short phrases: never break across two lines. */
.nav-link { font-size: 11px; letter-spacing: 1px; white-space: nowrap; }
.auth-chip a { white-space: nowrap; }
.xp-display { white-space: nowrap; }
/* Neither the wordmark nor the auth block may be squeezed — .nav-logo was
   ellipsising to "AWS SBG AAST SECU..." and "0 XP" split onto two lines, so
   both opt out of shrinking and .nav-links absorbs the slack (it can scroll). */
.nav-logo, .nav-profile { flex-shrink: 0; }
.nav-profile { gap: 12px; }

/* ---------- 2b. Auth chip (injected by auth.js) ----------
   The chip is the widest part of the header and the only part that changes
   shape with session state, so its styling lives here rather than inline: an
   inline style cannot be overridden by a media query, which is what let the
   signed-in chip push into the nav links and out of the container. */
.auth-chip { display: inline-flex; align-items: center; margin-right: 12px; min-width: 0; }
.auth-btn {
  padding: 7px 14px; border-radius: 8px; text-decoration: none; white-space: nowrap;
  font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: 1px;
}
.auth-btn-primary { color: #fff; background: linear-gradient(135deg, #a855f7, #7c3aed); }
.auth-btn-ghost {
  color: #c084fc; background: transparent;
  border: 1px solid rgba(168, 85, 247, 0.5); margin-left: 8px;
}
.auth-user {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; height: 36px;
  border-radius: 18px; background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.25); min-width: 0;
}
/* A 40-character handle must not be able to widen the whole header. */
.auth-username {
  font-family: 'Orbitron', sans-serif; font-size: 11px; color: #c084fc;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-avatar { display: inline-flex; flex-shrink: 0; }
.auth-face-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: block; }
.auth-face-initials {
  width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: bold;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  display: inline-flex; align-items: center; justify-content: center;
}
.auth-logout {
  margin-left: 8px; padding: 7px 12px; border-radius: 8px; background: transparent;
  border: 1px solid rgba(168, 85, 247, 0.25); color: #b8a0d9; cursor: pointer; font-size: 12px;
}

/* ---------- 2c. Signed-in header ----------
   auth.js tags <body class="auth-signed-in">. That chip (username + avatar +
   a separate sign-out button) is ~80px wider than the SIGN IN / SIGN UP pair,
   which made the single-line row impossible to fit: .nav-links silently
   clipped its last links inside its own scroll box on 1600px+ screens, and
   the container burst on phones. Shed the duplicated avatar and tighten the
   link gaps while signed in, and drop the handle text on phones. */
/* The chip already carries an avatar that links to the profile, so the
   standalone decorative .profile-avatar is a second, non-clickable duplicate. */
body.auth-signed-in .profile-avatar { display: none; }
@media (min-width: 1600px) {
  body.auth-signed-in .nav-links { gap: 10px; }
}
@media (max-width: 560px) {
  /* Keep avatar + sign-out; the handle is the only part that can go. As a
     safety net the block may also shrink, so a long handle ellipsises instead
     of shoving the hamburger off the bar. */
  body.auth-signed-in .auth-username { display: none; }
  body.auth-signed-in .auth-user { padding: 4px 8px; height: 32px; }
  body.auth-signed-in .nav-profile { flex-shrink: 1; min-width: 0; }
}

/* >=1600px the container is capped at 1500px, which is the only width where
   the wordmark AND the 11 single-line labels both fit. The wordmark gives up
   a little size to buy that room. */
@media (min-width: 1600px) {
  .nav-brand { font-size: 16px; letter-spacing: 1.5px; }
  .nav-links { gap: 13px; }
}

/* Tier 1 — the logo image always stays; the wordmark is the first thing to go.
   It is the widest single item in the bar, and dropping it frees ~275px, which
   .nav-links then absorbs by scrolling inside its own box (see section 2b
   above) rather than by wrapping the bar onto extra rows.
   The 1599px hide below is left alone for every other page: cli-terminal.html
   and lab-explanations.html also link this stylesheet and also use .nav-brand,
   with their own tiers. The re-show is therefore scoped to the main navbar and
   only covers 1280px..1599px, which is the range where the one-row bar can
   still hold the wordmark. Below 1280px the generic hide applies again. */
@media (min-width: 1280px) and (max-width: 1599px) {
  #navbar .nav-brand { display: block; font-size: 15px; letter-spacing: 1.5px; }
}
@media (max-width: 1599px) {
  .nav-brand { display: none; }
}

/* Tier 2 — <=1400px: hand the links to the drawer (same pattern main.js
   already drives at <=768px). top:100% anchors the panel to the real height
   of the fixed bar, which changes when #navbar.scrolled tightens its padding. */
@media (max-width: 1400px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-links.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(10, 0, 21, 0.97);
    backdrop-filter: var(--glass-blur);
    padding: 18px;
    gap: 12px;
    z-index: 999;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    border-bottom: 1px solid rgba(168, 85, 247, 0.2);
  }
  .nav-links.active .nav-link { font-size: 12px; letter-spacing: 2px; padding: 8px 0; }
}
.nav-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.nav-stats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.back-btn { white-space: nowrap; flex-shrink: 0; }
.map-nav-brand, .path-nav-brand, .nav-brand, .brand, .nav-brand {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}

/* ---------- 3. Grids collapse safely (columns only changed in queries) ---------- */
.split-screen, .cli-container { min-width: 0; }
.dashboard-grid { gap: 20px; }
.labs-container, .badges-container, .badge-grid, .stats-grid {
  width: 100%; min-width: 0;
}

/* Terminal + code blocks scroll internally, never push page */
.terminal-window, .lab-terminal, .lab-terminal-section,
.terminal-box, .reading-panel, .quiz-panel,
.missions-list, .activity-feed, .missions-sidebar {
  min-width: 0;
  max-width: 100%;
}
.terminal-window pre, .lab-terminal-output, .terminal-box pre,
.reading-panel pre, .quiz-panel pre {
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.lab-terminal-input-line { flex-wrap: nowrap; min-width: 0; }
.lab-terminal-input { min-width: 0; width: 100%; }

/* Modals always fit viewport */
.modal-overlay { padding: 12px; box-sizing: border-box; }
.modal-container, .completion-container {
  width: 100%; box-sizing: border-box;
  max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Lab modal: the modal itself never scrolls — .modal-body inside it does
   (styles.css), which keeps the title bar + controls pinned in view */
.lab-modal {
  width: 100%; box-sizing: border-box;
  max-height: 92vh; max-height: 92dvh; overflow: hidden;
}
/* Keep the design widths on large screens — capped by 100% so a
   modal can never exceed the viewport (min() = smaller of the two) */
.modal-container { max-width: min(850px, 100%); }
.lab-modal { max-width: min(900px, 100%); }
.completion-container { max-width: min(450px, 100%); }
.lab-modal > .modal-body { max-height: none; }

/* Forms + buttons never overflow */
input, textarea, select, button { max-width: 100%; }
@media (max-width: 768px) {
  input, textarea, select { font-size: 16px; } /* prevent iOS auto-zoom */
}
input[type="text"], input[type="email"], input[type="password"], textarea.fld, input.fld {
  width: 100%; box-sizing: border-box;
}
.btn-primary, .btn-secondary, .submit-btn, .enter-btn, .enter-path-btn,
.room-nav-btn, .back-btn, .lab-cli-btn, .answer-submit {
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
}
/* 4. LARGE LAPTOPS <=1200px */
@media (max-width: 1200px) {
  .nav-container, .section, .container, .map-wrap, .room-container { padding-left: 20px; padding-right: 20px; }
  .hero-content { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .hero-text { padding: 10px; }
  .hero-desc { margin-left: auto; margin-right: auto; }
  .hero-cta, .hero-stats { justify-content: center; }
  .hero-3d-container { height: 300px; }
  .glitch-text { font-size: clamp(2rem, 1.2rem + 5vw, 3.4rem); }
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .labs-container { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .cli-container { grid-template-columns: 320px minmax(0,1fr); }
}
/* 5. TABLETS <=1024px - collapse 2-col to 1 col */
@media (max-width: 1024px) {
  .split-screen { grid-template-columns: 1fr !important; min-height: auto; }
  .cli-container { grid-template-columns: 1fr; }
  .missions-sidebar { height: auto; max-height: none; position: static; top: auto; }
  .missions-list { max-height: 320px; overflow-y: auto; }
  .workspace { min-width: 0; }
  .dashboard-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .room-container { padding: 20px; }
  .panel { min-width: 0; }
  .reading-panel, .quiz-panel { max-height: none; }
  /* Hero stats step from 5 columns down to 3 on tablets. */
  .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 6. PHONES / SMALL TABLETS <=768px */
@media (max-width: 768px) {
  body { cursor: auto !important; }
  .cursor-glow, .cursor-dot { display: none !important; }
  /* Keep in step with the two rules below: 10px padding + 32px logo + 10px. */
  :root { --nav-h: 52px; }
  #navbar { padding: 10px 0; }
  .nav-container { padding: 0 14px; }
  .nav-logo-img { height: 32px; }
  .nav-brand { font-size: 13px !important; letter-spacing: 1px !important; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-links.active {
    display: flex; flex-direction: column;
    position: absolute; top: 58px; left: 0; width: 100%;
    background: rgba(10,0,21,0.97);
    padding: 18px; gap: 12px; z-index: 999;
    border-bottom: 1px solid rgba(168,85,247,0.2);
  }
  .cli-nav, .map-nav, .path-nav, .top-nav, .nav { padding: 10px 14px !important; gap: 8px; }
  .back-btn { padding: 8px 12px; font-size: 10px; }
  .xp-display, .xp-counter, .stat-pill { font-size: 11px; }
  .nav-profile { gap: 8px; }
  .profile-avatar { width: 30px; height: 30px; font-size: 12px; }
  .section { padding: 72px 14px 28px; }
  .section-header { padding: 18px 14px; margin-bottom: 22px; }
  .section-title { font-size: 20px; }
  .section-subtitle { font-size: 13px; }
  .container, .map-wrap { padding: 24px 14px 50px; }
  .room-container { padding: 14px; }
  .room-title { font-size: 22px !important; }
  .room-subtitle { font-size: 13px; }
  .room-header { padding: 14px 8px; margin-bottom: 18px; }
  .room-nav { flex-direction: column; gap: 10px; padding: 14px; }
  .room-nav-btn { width: 100%; justify-content: center; }
  .glitch-text { font-size: clamp(1.6rem, 8vw, 2.4rem); }
  .hero-sub { font-size: 14px; letter-spacing: 5px; }
  .hero-desc { font-size: 14px; }
  .hero-badge { font-size: 10px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn-primary, .hero-cta .btn-secondary, .hero-cta a { width: 100%; justify-content: center; }
  .hero-stats { gap: 18px; justify-content: center; }
  .stat-number { font-size: 24px; }
  .hero-3d-container { height: 210px; }
  .hero-logo-big { max-width: 62%; }
  .scroll-indicator { display: none; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 14px; }
  .dashboard-card { padding: 18px 15px; }
  .labs-container { grid-template-columns: 1fr; gap: 14px; }
  .lab-card { padding: 18px 15px; }
  .badges-container { grid-template-columns: 1fr 1fr; gap: 10px; }
  .badge-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .badge-card { padding: 16px 12px; }
  .badge-icon { width: 52px; height: 52px; font-size: 22px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .quick-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lab-filters { gap: 6px; }
  .filter-btn { padding: 6px 12px; font-size: 10px; }
  .path-node, .node-row { flex-direction: column !important; text-align: center; gap: 14px; }
  .card { width: 100% !important; max-width: 100% !important; }
  .map-header h1 { font-size: 26px !important; }
  .map-header p { font-size: 14px; padding: 0 8px; }
  .legend { flex-direction: column; align-items: center; gap: 12px; margin: 0 14px 40px; }
  .legend-content { flex-direction: column; gap: 10px; align-items: center; }
}
/* CLI + modals + profile on phones */
@media (max-width: 768px) {
  .cli-container { padding: 12px; gap: 14px; }
  .missions-sidebar { border-radius: 12px; }
  .amb-title { font-size: 18px; }
  .amb-desc { font-size: 13px; }
  .amb-actions { flex-direction: column; align-items: stretch; }
  .amb-actions button, .amb-actions a { width: 100%; justify-content: center; }
  .terminal-window { font-size: 12px; border-radius: 10px; }
  .terminal-topbar { flex-wrap: wrap; gap: 8px; }
  .modal-container { padding: 18px 14px; max-height: 92vh; }
  .modal-header h2 { font-size: 19px; }
  .modal-body .lab-step { padding: 14px; }
  .modal-footer { flex-direction: column; align-items: stretch; }
  .modal-footer .btn-primary, .modal-footer .btn-secondary { width: 100%; justify-content: center; }
  .lab-modal { border-radius: 12px; }
  .completion-container { padding: 28px 18px; }
  .completion-title { font-size: 21px; }
  .completion-badge { width: 78px; height: 78px; font-size: 34px; }
  .completion-stats { gap: 14px; }
  .profile-head { flex-direction: column; text-align: center; justify-content: center; }
  .big-avatar { width: 72px; height: 72px; font-size: 24px; }
  .p-name { font-size: 18px; }
  .person-row { flex-wrap: wrap; }
  .p-actions { width: 100%; justify-content: flex-start; }
  .search-row { flex-direction: column; }
  .search-row input { min-width: 0; }
  .search-row .btn { width: 100%; }
  .top-nav .brand { display: none; }
  .toc { padding: 18px 14px; }
  .header h1 { font-size: 24px; }
  .header p { font-size: 14px; }
  .auth-card, .panel { padding: 24px 18px; }
  .lab-done-row, .feed-item { flex-wrap: wrap; gap: 6px; }
  .lab-header { flex-direction: column; text-align: center; }
}
/* 7. SMALL PHONES <=480px */
@media (max-width: 480px) {
  .nav-container { padding: 0 12px; }
  .nav-links.active { gap: 10px; padding: 15px; }
  .nav-link { font-size: 11px; }
  .section { padding: 64px 10px 20px; }
  /* Hero stats drop to 2 columns on phones. */
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-title { font-size: 18px; }
  .glitch-text { font-size: clamp(1.35rem, 9vw, 1.9rem); }
  .hero-sub { font-size: 12px; letter-spacing: 3px; }
  .hero-3d-container { height: 170px; }
  .hero-logo-big { max-width: 72%; }
  .labs-container { grid-template-columns: 1fr; }
  .badges-container, .badge-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stats-grid, .quick-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .badge-icon { width: 44px; height: 44px; font-size: 19px; }
  .modal-container { padding: 14px 12px; }
  .modal-body .lab-step { padding: 12px; }
  .modal-body .lab-option { padding: 10px 12px; font-size: 13px; }
  .modal-footer { flex-direction: column; }
  .modal-footer .btn-primary, .modal-footer .btn-secondary { width: 100%; justify-content: center; }
  .map-header h1 { font-size: 22px !important; }
  .room-title { font-size: 19px !important; }
  .auth-card { padding: 26px 18px; border-radius: 16px; }
  .amb-title { font-size: 16px; }
  .completion-title { font-size: 19px; }
  .lab-cli-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .p-name { font-size: 16px; }
  .stat-num { font-size: 20px; }
  .answer-option { padding: 10px 12px; font-size: 12px; }
  .room-dot-indicator, .room-indicator { flex-wrap: wrap; justify-content: center; }
}
/* 8. VERY SMALL <=360px */
@media (max-width: 360px) {
  /* Keep in step with .nav-logo-img below: 10px padding + 28px logo + 10px. */
  :root { --nav-h: 48px; }
  .badges-container, .badge-grid, .stats-grid, .quick-grid { grid-template-columns: 1fr; }
  .nav-logo-img { height: 28px; }
  /* Was flex-direction: column, which is inert now that .hero-stats is a grid. */
  .hero-stats { grid-template-columns: 1fr; gap: 12px; }
  .xp-display { display: none; }
  .stat-pill { font-size: 10px; padding: 5px 10px; }
  .back-btn { font-size: 9px; padding: 7px 10px; }
  .room-title { font-size: 17px !important; }
}
/* 9. LANDSCAPE phones + short heights */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-3d-container { height: 160px; }
  .scroll-indicator { display: none; }
  .modal-container, .lab-modal { max-height: 94vh; }
  .missions-sidebar { position: static; height: auto; }
}
/* 10. Large desktops >=1600px - cap + center */
@media (min-width: 1600px) {
  .section, .nav-container, .room-container { max-width: 1500px; }
  .cli-container { max-width: 1600px; }
}
/* 11. Touch: bigger tap targets, no hover traps */
@media (hover: none) and (pointer: coarse) {
  .nav-link, .back-btn, .filter-btn, .btn-primary, .btn-secondary,
  .lab-option, .answer-option, .enter-btn, .room-dot { min-height: 40px; }
  .lab-option:hover, .answer-option:hover { transform: none; }
}
/* 12. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}
/* 13. Patch: missed flex rows, dynamic widgets, small-screen polish */
.quiz-option, .answer-option, .lab-option { overflow-wrap: break-word; word-break: break-word; }
.quiz-option span, .answer-option span { min-width: 0; }
.lab-flag-row, .answer-q-head, .amb-header, .card-top, .lab-modal-head { flex-wrap: wrap; gap: 8px; }
.lab-flag-row input, .answer-input, .flag-input { min-width: 0; flex: 1 1 160px; }
.prog-row { flex-wrap: wrap; }
.cert-modal-box { max-width: min(700px, calc(100vw - 24px)) !important; width: 100% !important; box-sizing: border-box; }
.modal-overlay.active { padding: 12px; }
@media (max-width: 768px) {
  .modal-overlay, .modal-overlay.active { align-items: flex-start; overflow-y: auto; }
}
.top-nav, .cli-nav .nav-left, .map-nav .nav-left { flex-wrap: wrap; }
.row { flex-wrap: wrap; }
.row .field { flex: 1 1 200px; min-width: 0; }
@media (max-width: 768px) {
  .row { flex-direction: column; }
  .amb-header { flex-direction: column; align-items: flex-start; }
  .card-top { gap: 8px; }
  .quiz-option, .lab-option { font-size: 13px; padding: 10px 12px; }
  .lab-terminal, .lab-terminal-output { font-size: 12px; }
  .cert-modal-box { padding: 22px 16px !important; border-radius: 14px !important; }
  .path-nav-brand, .map-nav-brand { font-size: 12px !important; }
  .xp-counter { font-size: 11px; }
}
@media (max-width: 480px) {
  .person-row { align-items: flex-start; }
  .p-meta { white-space: normal; }
  .quiz-card, .answer-question { padding: 14px 12px; }
  .lab-modal-head h3 { font-size: 16px; }
  .lab-modal { padding: 18px 14px; }
  .lab-modal-head { padding-right: 40px; align-items: flex-start; }
  .lab-modal-head .lab-diff, .lab-modal-head .lab-xp { line-height: 20px; }
  .answer-area-sub { display: none; }
  .labterm-input-row { flex-wrap: wrap; }
  .labterm-prompt { flex-shrink: 1 !important; min-width: 0; max-width: 100%; white-space: normal; }
  .labterm-input { flex: 1 1 8ch !important; min-width: 0; }
}
/* ============================================================
   14. ALL-PAGES HARDENING — Academy chrome shared by every page
   (learning / ctf / live-events / verify / admin / profile /
   friends / auth / CLI / map / guides / path rooms).
   Rules only ADD wrapping, stacking or min() guards below the
   page's own desktop layout — nothing changes above 768px.
   The intentionally-vulnerable lab targets under fake-sites/*
   carry their own small inline mobile block instead, so their
   exercise surface (DOM, forms, flags) is untouched.
   ============================================================ */
/* 14a. Academy header block (.head / .head-title / .actions) */
.head, .head-title { min-width: 0; }
.head-title > div { min-width: 0; }
.head h1 { overflow-wrap: break-word; word-break: break-word; }
.head-logo { flex-shrink: 0; }
.actions .btn { white-space: nowrap; }
@media (max-width: 768px) {
  .head { flex-direction: column; align-items: flex-start; }
  .head-title { flex-wrap: wrap; }
  .head-logo { height: 56px !important; width: auto; }
  .actions { width: 100%; }
  .actions .btn { flex: 1 1 140px; justify-content: center; text-align: center; }
}
@media (max-width: 480px) {
  .head-logo { height: 44px !important; }
}
/* 14b. Remaining unguarded grid floors -> min(..., 100%).
   A minmax(150-280px, 1fr) floor wider than a phone content box
   (~280px) forces horizontal scroll. min() keeps desktop tracks
   identical and only yields on phones. */
.labs-container { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.badges-container { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.badge-grid { grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); }
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.stats { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.unit-grid, #map-embed .unit-grid { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.room-grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)) !important; }
#map-embed .card, .learning-map .card { width: 100%; max-width: 100%; }
@media (max-width: 768px) {
  .labs-container { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
}
/* 14c. Fixed-width cards / panels yield on phones. */
.card, .verify-box, .auth-card, .panel { min-width: 0; }
.cfa-vcard, .lt-card, .career-band, .explore-bar { min-width: 0; max-width: 100%; }
@media (max-width: 560px) {
  .verify-box { margin: 24px auto; padding: 22px 16px; }
  .auth-card { padding: 28px 20px; }
  .panel { padding: 18px 14px; }
  .stat { flex: 1 1 130px; min-width: 0; }
}
/* 14d. Tables scroll instead of bursting the page (rank / lb / admin). */
.rank, .lb { min-width: 0; }
.rank-wrap, .lb-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.rank-wrap > table, .lb-wrap > table, .table-scroll > table { min-width: 560px; }
@media (max-width: 768px) {
  .rank th, .rank td, .lb th, .lb td { padding: 7px 6px; font-size: 12px; }
}
/* 14e. Nav bars: brand ellipsises, buttons wrap, never burst. */
.top-nav .brand, .cli-nav .brand, .map-nav-brand, .path-nav-brand, .nav-brand {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.top-nav .back, .cli-nav .back-btn, .map-nav .back-btn { flex-shrink: 0; }
@media (max-width: 560px) {
  .top-nav { padding: 10px 14px; gap: 8px; }
  .top-nav .brand { font-size: 11px; letter-spacing: 1px; }
  .profile-head { gap: 14px; }
  .big-avatar { width: 64px; height: 64px; font-size: 20px; }
  .p-name { font-size: 18px; overflow-wrap: break-word; }
}
/* 14f. Forms / inputs / CTAs wrap on phones. */
.search-row input, .filters input, .explore-controls input[type="text"],
.explore-controls select, .flagrow input, .verify-input input,
.fld, .auth-card input { min-width: 0; max-width: 100%; }
@media (max-width: 560px) {
  .search-row input { min-width: 0; flex: 1 1 100%; }
  .search-row .btn { flex: 1 1 100%; justify-content: center; }
  .filters input { min-width: 0; flex: 1 1 100%; }
  .explore-controls input[type="text"] { flex: 1 1 100%; }
  .explore-controls select, .pill-toggle { flex: 1 1 auto; max-width: 100%; }
  .verify-input .btn, .verify-input button { flex: 1 1 100%; justify-content: center; }
  .row { flex-direction: column; align-items: stretch; }
  .row > div, .row .field { flex: 1 1 100%; min-width: 0; }
  .row > div.narrow { flex: 1 1 100%; }
}
/* 14g. Toasts + floating bars stay inside small viewports. */
.toast, #toast, #cfaToast, #cfaCertToast {
  max-width: calc(100vw - 24px); box-sizing: border-box;
  overflow-wrap: break-word; text-align: center;
}
@media (max-width: 560px) {
  .toast { right: 12px; left: 12px; transform: none; }
  .toast.show { transform: none; }
}
/* 14h. iOS polish: no auto-zoom on inputs, safe-area insets. */
@media (max-width: 768px) {
  input, select, textarea { font-size: max(16px, 1em); }
}
@supports (padding: env(safe-area-inset-bottom)) {
  .lab-minimized-bar { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .toast, #toast { bottom: calc(22px + env(safe-area-inset-bottom)); }
}
/* 14i. Custom cursor: never hide the pointer on touch.
   styles.css hides it below 768px only, so touch laptops wider
   than 768px still lose their pointer. Capability beats width. */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto !important; }
  .cursor-glow, .cursor-dot { display: none !important; }
}