/* ============================================================
   MizUp — mobile hardening + auth page theme

   PURELY ADDITIVE. Loaded last, so it can correct without any
   existing rule being edited.

   Everything here came out of an audit, not guesswork:
     - 74 tables in the app used `.table-wrap`, which was never
       defined in any stylesheet. Defined below.
     - The marketing pages had no guard against horizontal page
       overflow, which is the single most common "site is broken
       on mobile" symptom.
     - The login / forgot-password pages carried none of the home
       page's visual language.
   ============================================================ */

/* ------------------------------------------------------------
   1. HORIZONTAL OVERFLOW GUARD
   One element wider than the viewport makes the WHOLE page pan
   sideways, and it always looks like the site is broken. This
   stops the page itself scrolling while leaving deliberately
   scrollable strips (.table-wrap, .pt-compare-wrap) working.
   ------------------------------------------------------------ */
html { overflow-x: hidden; }
body { overflow-x: clip; max-width: 100%; }

/* Nothing may push past the viewport. */
img, svg, video, iframe, canvas, table, pre { max-width: 100%; }
pre, code { overflow-wrap: anywhere; }

/* Long unbroken strings — API keys, webhook URLs, invoice links —
   are a real source of overflow on these screens. */
.form-group input[readonly],
.mkt-mock-main span,
td, th { overflow-wrap: break-word; }

/* ------------------------------------------------------------
   2. .table-wrap — referenced by 74 tables, previously undefined
   On desktop it scrolls a wide table instead of breaking layout.
   Below 860px app.css already card-stacks tables (thead hidden,
   td::before shows data-label), so the wrapper must NOT scroll
   there or it would fight that.
   ------------------------------------------------------------ */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 860px) {
  .table-wrap { overflow-x: visible; }
}

/* ------------------------------------------------------------
   3. MARKETING PAGES ON A PHONE
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  /* Hero type was sized for desktop and ran to 4-5 lines on a phone. */
  .hp-hero { padding: 40px 0 52px; }
  .hp-hero h1 { font-size: clamp(29px, 8.4vw, 38px); max-width: none; }
  .hp-hero .hp-sub { font-size: 15.5px; max-width: none; }
  .hp-section { padding: 48px 0; }
  .hp-h2 { font-size: clamp(23px, 6.6vw, 30px); }

  /* Full-width CTAs — thumb targets, not centred pills. */
  .hp-ctas { flex-direction: column; align-items: stretch; }
  .hp-ctas .hp-btn { justify-content: center; width: 100%; }

  .hp-ticks { gap: 8px 18px; font-size: 12.5px; }
  .hp-head-row { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* The orbit nodes sit on a transform ring; at small sizes their
     96px labels collided with each other and spilled sideways. */
  .hp-orbit { max-width: 290px; }
  .hp-node { width: 74px; }
  .hp-node b { font-size: 10.5px; }
  .hp-node span { font-size: 8.5px; }
  .hp-node i { width: 30px; height: 30px; }

  .hp-trust-row { gap: 10px 22px; }
  .hp-brand { font-size: 13.5px; }

  /* Product hero: the mockup came first in source order on narrow
     screens, pushing the actual pitch below the fold. */
  .pt-hero-grid { display: flex; flex-direction: column; }
  .pt-hero-grid .mkt-page-hero-inner { order: 1; }
  .pt-hero-grid .pt-mock { order: 2; }
  .mkt-page-hero { padding: 40px 6vw 48px; }
  .mkt-page-hero h1 { max-width: none; }

  /* Legal pages read as one column with comfortable measure. */
  .lg-hero { padding: 36px 6vw 26px; }
  .lg-body { padding: 30px 6vw 60px; }
  .lg-body li { font-size: 14.5px; }
}

/* Very small phones (≤380px): the four-up KPI strip in the hero
   mockup was unreadable rather than merely tight. */
@media (max-width: 380px) {
  .hp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-shot-main { padding: 10px; }
  .hp-close { padding: 28px 20px; }
}

/* ------------------------------------------------------------
   4. IN-APP FORMS ON A PHONE
   16px inputs — anything smaller makes iOS Safari zoom the page
   on focus, which is the classic "the app jumps around" bug.
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px; }
  .form-group input,
  .form-group select,
  .form-group textarea { min-height: 44px; }
  .dash-grid-2, .dash-grid-3 { gap: 12px; }
  .card { padding: 16px; }
}

/* ------------------------------------------------------------
   5. AUTH PAGES — same visual language as the home page
   Login and forgot-password were plain forms on a flat
   background while the marketing site had gradients and depth.
   That gap is jarring at the exact moment a user is deciding
   whether this product looks trustworthy.
   ------------------------------------------------------------ */
.auth-shell,
body.auth-page {
  position: relative;
  background:
    radial-gradient(760px 420px at 88% -12%, rgba(108, 79, 224, .17) 0%, transparent 62%),
    radial-gradient(620px 380px at 8% 6%, rgba(53, 197, 240, .12) 0%, transparent 60%),
    linear-gradient(180deg, #FBFBFE 0%, #F6F6FA 100%);
}
body.auth-page::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(1.3px 1.3px at 22% 28%, rgba(108, 79, 224, .32) 50%, transparent 50%),
    radial-gradient(1px 1px at 72% 16%, rgba(46, 111, 230, .26) 50%, transparent 50%);
  background-size: 230px 230px, 160px 160px;
  pointer-events: none;
  z-index: 0;
}
body.auth-page > * { position: relative; z-index: 1; }

/* The card itself: more depth, matching radius and border. */
body.auth-page .auth-card,
body.auth-page .auth-box,
body.auth-page form {
  border-radius: 14px;
}
body.auth-page .auth-card,
body.auth-page .auth-box {
  border: 1px solid rgba(11, 11, 16, .07);
  box-shadow: 0 18px 46px rgba(30, 25, 70, .13), 0 2px 6px rgba(30, 25, 70, .05);
}

@media (prefers-reduced-motion: reduce) {
  body.auth-page::before { display: none; }
}


/* ================= MOBILE POLISH v2 (app shell) ================= */
@media (max-width: 640px) {
  .g-topbar { gap: 6px; }
  .g-topbar .g-btn { white-space: nowrap; flex-shrink: 0; }
  .g-topbar svg { flex-shrink: 0; min-width: 16px; }
  .g-topbar .g-btn--primary.g-btn--sm { font-size: 0; width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }
  .g-topbar .g-btn--primary.g-btn--sm::before { content: "+"; font-size: 24px; line-height: 1; font-weight: 600; }
  table tr { position: relative; }
  td.cw-col-check, td[data-label="Select"] { position: absolute !important; top: 12px; right: 12px; width: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
  td.cw-col-check::before, td[data-label="Select"]::before, td[data-label=""]::before { content: none !important; display: none !important; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }
  .btn, .g-btn { min-height: 40px; }
  .card { border-radius: 14px; }
  .page-header, .g-page-head { flex-wrap: wrap; gap: 10px; }
}


/* Sprint 0 (6 Oct 2026): tables never break headers, chips or buttons mid-word.
   `anywhere` let the browser squeeze columns to one letter wide. */
th { white-space: nowrap; }
td .badge, td .btn, td .pill, td .chip { white-space: nowrap; }
td form { display: inline-block; margin: 2px 2px 2px 0; }
.g-main div:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }