/* ════════════════════════════════════════════════════════════════════════
   northstar-mobile-fixes.css  ·  v1.0 · 17 May 2026
   Mobile-only layout fixes for the tailored result page.
   
   Problems observed in production screenshot:
   1. Title "Tailored for [Role]" wraps awkwardly on narrow screens
   2. Bar chart labels and percentages misalign on mobile
   3. Card padding inconsistent across the 26 sections
   4. Text inside narrow tile columns wraps mid-word / overflows
   5. Buttons inconsistent sizes / inconsistent padding
   6. Line-height too tight in cramped cards
   7. Section headers cramped to top of next section
   
   Strategy: CSS-only patches, max-specificity guards, mobile-first
   media queries. Does NOT touch any JS or change any analytics.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Base improvements (all screen widths) ──────────────────────────── */

/* Smooth word-wrap on long titles */
#ns-result h1,
#ns-result h2,
#ns-result h3,
#ns-result .scx-apple-section h3 {
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
  hanging-punctuation: first allow-end last;
}

/* Consistent baseline line-heights in body text */
#ns-result p,
#ns-result li,
#ns-result span,
#ns-result div[style*="font-size"] {
  line-height: 1.55;
}

/* Buttons — uniform sizing baseline */
#ns-result button {
  min-height: 40px;
  line-height: 1.3;
  white-space: normal;
}

/* ─── Bar charts — label/percent alignment (most visible bug) ────────── */

/* Generic flex bar row used in Section 04 (AI-Disruption), 18 (Layoff), etc.
   Pattern: <div><span>label</span><span>%</span></div> followed by <div style="bar"> */
#ns-result [style*="display:flex"][style*="justify-content:space-between"] {
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

/* Force bar tracks to a clean shape on mobile */
#ns-result [style*="background:linear-gradient"][style*="border-radius:100px"],
#ns-result [style*="background:linear-gradient"][style*="border-radius:99px"],
#ns-result [style*="height:8px"][style*="border-radius"],
#ns-result [style*="height:10px"][style*="border-radius"] {
  min-width: 0;
  flex: 1 1 auto;
}

/* ─── Premium tile grids — let inline minmax flow naturally ──────────────
   IMPORTANT: An override here previously read:
       #ns-result [style*="grid-template-columns:repeat(auto-fit"] {
         grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
       }
   It lived OUTSIDE any media query, so it ran on desktop too. Because
   `minmax(0, 1fr)` removes the column minimum, `auto-fit` packed every
   child into a single row — 52 portals, 20 calendar slots, and 12 hidden
   companies all collapsed into narrow slivers, with text overflowing on
   the right edge. The fix: do NOT override the inline minmax at all.
   The engine already sets sensible per-section minimums (110px / 200px /
   280px / 300px) so `auto-fit` wraps correctly at every viewport. The
   one mobile-specific squeeze that IS needed lives further down inside
   `@media (max-width: 760px)` and forces the 200px / 220px portal grids
   to a single column on phones. The `min-width: 0` rules below stay —
   they're safe at all widths and let grid/flex children shrink below
   their content min-size so text doesn't force horizontal overflow. */

#ns-result [style*="display:grid"][style*="gap"] {
  min-width: 0;
}

#ns-result [style*="display:grid"] > * {
  min-width: 0;
}

/* ─── Section header — consistent top padding ────────────────────────── */

#ns-result .scx-apple-section {
  scroll-margin-top: 80px;
}

#ns-result .scx-apple-section + .scx-apple-section {
  margin-top: 1.5rem;
}

/* ─── MOBILE-SPECIFIC PATCHES (<=760px) ──────────────────────────────── */

@media (max-width: 760px) {
  /* Container padding — reduce squeeze on edges */
  #ns-result {
    padding: 1rem !important;
  }

  /* Hero "Tailored for X" — break onto own line cleanly */
  #ns-result h1,
  #ns-result h1[style*="font-size:clamp"],
  #ns-result [style*="font-family:'Newsreader'"][style*="font-size:clamp(2"] {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.3px !important;
  }

  /* Section headers — readable size */
  #ns-result .scx-apple-section h3,
  #ns-result .scx-apple-section [style*="font-size:clamp(1.5rem"] {
    font-size: 1.3rem !important;
    line-height: 1.25 !important;
  }

  /* Sub-titles ("What are hiring organized") — fix the awkward wrap */
  #ns-result h2,
  #ns-result [style*="font-size:1.3rem"],
  #ns-result [style*="font-size:1.4rem"],
  #ns-result [style*="font-size:1.5rem"] {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
  }

  /* Section padding — consistent */
  #ns-result .scx-apple-section,
  #ns-result section[style*="padding:2rem"] {
    padding: 1.4rem 1.2rem !important;
  }

  /* Tiles inside sections — uniform padding */
  #ns-result [style*="padding:1rem"][style*="border-radius"],
  #ns-result [style*="padding:1.1rem"][style*="border-radius"],
  #ns-result [style*="padding:1.2rem"][style*="border-radius"] {
    padding: .9rem 1rem !important;
  }

  /* Bar chart rows — stack label/percent on tiny screens */
  #ns-result [style*="display:flex"][style*="justify-content:space-between"] > span {
    flex: 0 0 auto;
  }

  /* Truncate long labels inside narrow tiles (with ellipsis) */
  #ns-result [style*="font-family:'JetBrains Mono'"][style*="letter-spacing"] {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Numbered list — fix step indicator alignment in "Recurrent ready week plan" */
  #ns-result ol,
  #ns-result [style*="display:flex"][style*="gap:.7rem"] > div:first-child,
  #ns-result [style*="display:flex"][style*="gap:1rem"] > div:first-child {
    flex-shrink: 0;
  }

  /* The bullet/step rows in 4-week plan — keep step label on own line */
  #ns-result [style*="display:flex"][style*="gap:.7rem;align-items:start"] {
    flex-wrap: wrap;
  }

  #ns-result [style*="display:flex"][style*="gap:.7rem;align-items:start"] > div:first-child {
    width: 100%;
    margin-bottom: .3rem;
  }

  /* Buttons — uniform full-width on mobile */
  #ns-result #scx-pdf-cta button,
  #ns-result .btn,
  #ns-result button[data-action] {
    width: 100%;
    margin-bottom: .5rem;
    padding: .85rem 1.2rem !important;
    font-size: .8rem !important;
  }

  /* PDF CTA section — better padding */
  #ns-result #scx-pdf-cta {
    padding: 1.8rem 1.2rem !important;
  }

  #ns-result #scx-pdf-cta h2 {
    font-size: 1.4rem !important;
  }

  /* Hero KPI cards — stack cleanly */
  .scx-kpi-card {
    margin-bottom: .8rem !important;
  }

  /* Long links inside cards — break URLs cleanly */
  #ns-result a {
    word-break: break-word;
  }

  /* Reduce excessive top margin between sections on mobile */
  #ns-result .scx-apple-section + .scx-apple-section {
    margin-top: 1rem;
  }

  /* Tighten line-height inside cramped tiles */
  #ns-result [style*="background:#fff"][style*="border-radius"] p,
  #ns-result [style*="background:#fff"][style*="border-radius"] div[style*="font-size:.8"] {
    line-height: 1.45;
  }

  /* Pill labels — don't overflow tile width */
  #ns-result [style*="display:inline-block"][style*="border-radius:4px"],
  #ns-result [style*="display:inline-block"][style*="border-radius:100px"] {
    max-width: 100%;
    word-break: break-word;
  }

  /* "Credentials that move salary" cards — text/cost alignment */
  #ns-result [style*="grid-template-columns:1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: .5rem !important;
  }

  #ns-result [style*="grid-template-columns:1fr auto"] > div:last-child {
    text-align: left !important;
  }

  /* Job portal grid — single column on tight screens */
  #ns-result [style*="grid-template-columns:repeat(auto-fit,minmax(200px"],
  #ns-result [style*="grid-template-columns:repeat(auto-fit,minmax(220px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─── EXTRA-NARROW PATCHES (<=400px) ─────────────────────────────────── */

@media (max-width: 400px) {
  #ns-result {
    padding: .75rem !important;
  }

  #ns-result h1,
  #ns-result h1[style*="font-size"] {
    font-size: 1.35rem !important;
  }

  #ns-result .scx-apple-section h3 {
    font-size: 1.15rem !important;
  }

  #ns-result .scx-apple-section,
  #ns-result section[style*="padding:2rem"] {
    padding: 1.1rem .9rem !important;
  }

  /* Hide section number prefix to save horizontal space */
  #ns-result [style*="font-family:'JetBrains Mono'"][style*="letter-spacing:.22em"] {
    font-size: .58rem !important;
    letter-spacing: .12em !important;
  }

  /* Pills — slightly smaller */
  #ns-result [style*="display:inline-block"][style*="border-radius:100px"] {
    font-size: .62rem !important;
    padding: .15rem .5rem !important;
  }
}

/* ─── TABLET (760-1024px) ────────────────────────────────────────────── */

@media (min-width: 761px) and (max-width: 1024px) {
  #ns-result {
    padding: 1.5rem !important;
  }

  /* Grid: 2 columns on tablet for tile collections */
  #ns-result [style*="grid-template-columns:repeat(auto-fit,minmax(310px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─── Reduced motion preference (a11y) ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  #ns-result *,
  #ns-result *::before,
  #ns-result *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Print: revert to clean layout ────────────────────────────────── */

@media print {
  #ns-result button,
  #ns-result #scx-pdf-cta,
  #ns-result .scx-reveal-skip-print {
    display: none !important;
  }

  #ns-result .scx-apple-section {
    page-break-inside: avoid;
    break-inside: avoid;
    border: 1px solid #ccc !important;
    background: #fff !important;
    color: #000 !important;
  }
}

/* ─── Focus visibility (a11y / keyboard nav) ────────────────────────── */

#ns-result button:focus-visible,
#ns-result a:focus-visible,
#ns-result [contenteditable]:focus-visible {
  outline: 2px solid var(--tang, #FF4D1F);
  outline-offset: 2px;
  border-radius: 4px;
}