/* =========================================================
   BLUN mobile-fix patch — append to brand/components.css
   Generated 2026-05-06 by Angel
   Fixes regressions found in mobile-audit (15-page suite).

   Scope: every page using the canonical .topbar / .shell / .side
   patterns. Activates at viewport <= 760px.
   No structural changes — purely additive media queries.
   ========================================================= */

/* ---- 1. Topbar collapse: hide secondary nav, keep brand + a single CTA ---- */
@media (max-width: 760px) {

  .topbar {
    /* Tighter horizontal padding so brand + me-pill never clip */
    padding: 12px 16px !important;
    gap: 10px !important;
  }

  /* Hide the secondary "/ Section" breadcrumb context label
     — eats horizontal space, repeats info already in <title> */
  .topbar .brand .ctx,
  .brand .ctx {
    display: none !important;
  }

  /* Hide nav-links wholesale on small screens.
     Keep the right-side CTA / me-pill — those are the anchor actions. */
  .topbar nav,
  .topbar > .right .lang-pill,
  .topbar .right .theme-pill .theme-label,
  .topbar .right > a:not(.cta) {
    display: none !important;
  }

  /* Right-cluster on dashboard collapses to just avatar + theme-toggle */
  .topbar .right-cluster .tokens,
  .topbar .right-cluster .lang-btn {
    display: none !important;
  }

  /* Login + onboarding custom topbars: shrink right-cluster to icon-only */
  .topbar .right {
    gap: 6px !important;
  }
  .topbar .right .theme-pill {
    padding: 6px !important;
    border-radius: 50% !important;
  }
  .topbar .right .theme-pill .dot {
    margin-right: 0 !important;
  }
  .topbar .right .lang-pill {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
  /* /onboarding "Skip for now" link — too long, swap to "Skip ↦" */
  .topbar .skip {
    font-size: 0 !important;
  }
  .topbar .skip::after {
    content: "Skip" !important;
    font-size: 12px !important;
    color: var(--ink-3) !important;
    font-weight: 500 !important;
  }

  /* Search-bar in dashboard topbar — hide on mobile, accessible via ⌘K */
  .topbar .search-bar {
    display: none !important;
  }

  /* CTA buttons in topbar shrink */
  .topbar .cta {
    padding: 7px 12px !important;
    font-size: 12.5px !important;
  }

  /* Me-pill: drop the username, keep the avatar */
  .topbar .me span:not(.av) {
    display: none !important;
  }
  .topbar .me {
    padding: 4px !important;
    border-radius: 50% !important;
  }
}

/* ---- 2. Account-pages topbar nav — same treatment ---- */
@media (max-width: 760px) {
  /* Pages with .topbar > nav directly (billing, settings, team, api-keys) */
  .topbar > nav {
    display: none !important;
  }
}

/* ---- 3. Dashboard sidebar: hide entirely on mobile, swap to bottom-tabs OR drawer ---- */
@media (max-width: 900px) {
  .shell > .side,
  .side {
    display: none !important;
  }
  /* Pages using two-col grid → collapse to single col */
  .shell {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
}

/* ---- 4. Hero / KPI / feature grids — guard against absolute-min-content overflow ---- */
@media (max-width: 600px) {
  .kpis,
  .features,
  .steps,
  .cats,
  .programs,
  .scopes,
  .byok-grid,
  .roles-grid,
  .tier-grid {
    grid-template-columns: 1fr !important;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---- 5. Audit-log table — let it scroll horizontally, not break layout ---- */
@media (max-width: 760px) {
  .tbl {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
  .tbl thead, .tbl tbody, .tbl tr {
    display: table !important;
    width: max-content !important;
    min-width: 100% !important;
  }
}

/* ---- 6. Modal cards — ensure padding-safe at small width ---- */
@media (max-width: 480px) {
  .modal {
    padding: 24px 20px !important;
  }
  .step-card {
    padding: 28px 20px !important;
  }
  .card {
    padding: 18px !important;
  }
}

/* ---- 7. Footer wraps cleanly on mobile ---- */
@media (max-width: 600px) {
  .foot {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: left !important;
  }
  .foot .legal {
    gap: 12px !important;
  }
}

/* ---- 8. Form-rows in cards (invite-form, search-bars, button-rows) ---- */
@media (max-width: 600px) {
  .invite-row,
  .search-bar,
  .filters {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .invite-row > *,
  .filters > *:not(.lbl) {
    width: 100% !important;
  }
  .filters .lbl {
    display: none !important;
  }
}

/* ---- 9. Final-CTA cards — keep readable padding on tiny screens ---- */
@media (max-width: 520px) {
  .cta-card {
    padding: 32px 20px !important;
  }
  .cta-card h2 {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
}

/* ---- 10. Defensive: no element grows past viewport ---- */
@media (max-width: 760px) {
  body, body * {
    max-width: 100vw;
  }
  /* Long monospace strings (key-mask, urls, mojibake fallback) wrap */
  code, .mask, .reveal-card code, .key-meta .mask {
    word-break: break-all !important;
  }
}

/* ---- 11. Login + Onboarding-specific guards ---- */
@media (max-width: 760px) {
  /* Login two-pane shell already collapses at 980px — but tabs + form fields need cap */
  .form-side, .form, .sso, .brand-features {
    max-width: 100% !important;
  }
  /* Tabs row in /login: shrink padding so both fit */
  .tabs {
    width: 100% !important;
    max-width: 100% !important;
  }
  .tab, .tabs .tab {
    flex: 1 1 0 !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    text-align: center !important;
  }
  /* Onboarding step-card padding tightened in section #6 already */
  /* Choice grid + action grid in onboarding already collapse via section #4 */
}

/* ---- 12. Brand logo: prevent split / double-render on small screens ---- */
@media (max-width: 760px) {
  .brand img + img,
  .topbar .brand img + img {
    /* If both light + dark logos are in DOM, show only one based on theme */
    display: none !important;
  }
  .brand img {
    height: 20px !important;
    width: auto !important;
  }
}

/* ---- 13. Card-content overflow guard (fixes residual .card width > viewport) ---- */
@media (max-width: 760px) {
  .card,
  .step-card,
  .modal,
  .plan-card,
  .seat-card,
  .upgrade,
  .cta-card,
  .agent,
  .feature {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Hero / page-h cap so headlines wrap instead of overflow */
  h1, .page-h, .hero h1 {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto !important;
  }
  /* Member-row "Manage" button + tnt-pill on /team — squeeze so they stay visible */
  .mb {
    grid-template-columns: auto 1fr auto !important;
    gap: 10px !important;
  }
  .mb .role-pill,
  .mb .btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
}

/* ---- 14. Login-app safety net (in case CSS inject reaches /login) ---- */
@media (max-width: 760px) {
  /* Auth-app shell — if it uses .shell + .form-side */
  .shell {
    padding: 24px 16px !important;
  }
  .form-side {
    padding: 24px 16px !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  /* Tabs row — never let it overflow */
  .tabs {
    padding: 4px !important;
  }
  .tab {
    padding: 8px 12px !important;
    font-size: 12.5px !important;
  }
}

/* ---- 15. Headline word-break enforcement (catches /onboarding "busines" cut) ---- */
@media (max-width: 480px) {
  h1, h2, .h1, .page-h, .hero h1 {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
  }
  /* Cap clamp upper bound on tiny screens */
  h1 {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.15 !important;
  }
  /* lead text wraps too */
  .lead, .page-sub {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ---- 16. Email-setups row layout — collapse 5-col grid to vertical stack ---- */
@media (max-width: 760px) {
  .list .row,
  main .row {
    grid-template-columns: auto 1fr !important;
    gap: 10px !important;
  }
  .list .row > *:nth-child(n+3),
  main .row > *:nth-child(n+3) {
    grid-column: 1 / -1 !important;
    margin-top: 8px !important;
  }
  /* DNS-status pills — wrap nicely */
  .dns-status {
    flex-direction: row !important;
    align-items: flex-start !important;
  }
}

/* =========================================================
   END mobile-fix patch
   Reverse out: just remove this block — no other selectors touched.
   ========================================================= */