/* mobile.css — All cross-cutting responsive breakpoints in one place.
   - 880px (tablet): .tania-bar layout flip + hero/qcard padding squeeze
   - 540px (large phone): .tania-topbar brand-name wrap
   - 480px (phone): tania-bar chevron-collapse mode, hero/qcard/footer/page-bar
                    aggressive tightening, manager dashboard 1-col grid
   - 400px (very small phone): step-down hero type so wrap doesn't slice
   Load order: AFTER every page file so same-specificity @media rules win.
   Per-component @media blocks for things owned by ONE file (e.g. results-page
   880px in manager-report.css, signup 880px in manager-signup.css, the
   768px tania-container in 02-chrome.css) stay alongside their owning rules.
   Was: app.css lines 556–565, 1655–1698, 2058–2272. */

/* ---------- 880px (tablet) — chrome bar responsive ---------- */
@media (max-width: 880px){
  .cats{ grid-template-columns: repeat(2, 1fr); }
  .summary-grid{ grid-template-columns: 1fr; }
  .summary-grid .overall{ text-align: left; }
  .tania-bar{ flex-wrap: wrap; gap: 8px; padding: 8px 16px; }
  .tania-topbar{ padding: 6px 16px; }
  .tania-topbar-inner{ font-size: 13px; }
  /* Hide theme + background pickers by default at tablet/phone widths.
     Chevron toggle expands them onto their own full-width row. Desktop
     (>880px) keeps utilities open by default — see 02-chrome.css. */
  .tania-bar-utilities{ display: none; width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
  .tania-bar-toggle-input:checked ~ .tania-bar-utilities{ display: inline-flex; }
}

/* ---------- 880px (tablet) — tania-bar layout flip + hero/qcard squeeze ---- */
@media (max-width: 880px){
  /* Drop the 3-col grid below tablet width so nav can take its own row. */
  .tania-bar{
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
  }
  .tania-bar-spacer{ display: none; }
  /* Flatten .tania-bar-right so its children (chevron + utilities) become
     direct flex items of .tania-bar. Lets the chevron sit inline with the
     nav row (right-aligned via margin-left:auto) while the utilities panel
     still drops onto its own full-width row when the toggle is checked.
     Without display:contents the chevron is trapped in the right wrapper
     and the nav's width:100% pushes it onto a row by itself above the nav. */
  .tania-bar-right{ display: contents; }
  /* Row 1 = nav (full width, left-aligned).
     Row 2 = userpills + chevron, right-aligned.
     Row 3 = utilities panel (when chevron toggled on).
     Explicit order values on every flex child prevent userpills'
     default order:0 from rendering it ABOVE nav.
     display:flex (not the base inline-flex) ensures width:100% + flex-wrap
     wraps the children when their summed width exceeds viewport. */
  .tania-bar-nav{
    display: flex;
    flex-wrap: wrap;
    order: 1;
    flex: 1 1 100%;       /* take the full width so row breaks after nav */
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    gap: 6px;
  }
  .tania-bar-userpills{
    order: 2;
    margin-left: auto;    /* push userpills to the right of row 2 */
  }
  .tania-bar-toggle{
    order: 3;             /* sits to the right of userpills on row 2 */
    margin-left: 6px;
  }
  .tania-bar-utilities{
    order: 4;
    flex-basis: 100%;     /* when toggled-on, drop onto its own row below */
  }
  .hero-panel{ padding: 32px 22px; }
  .hero-title{ font-size: 28px; }
  .qcard{ padding: 22px 20px; }
  .about-hero{ padding: 32px 22px; }

  /* Stack the brand line earlier so the longer tagline doesn't crowd
     against the org name on narrow tablets / wide phones. */
  .tania-topbar-inner{
    display: flex; flex-direction: column;
    align-items: center; gap: 2px; line-height: 1.3;
  }
  .tania-topbar .accent-dot{ display: none; }
  .tania-topbar .brand-name{ display: block; font-size: 15px; }
  .tania-topbar .tania-tagline{ display: block; font-size: 13px; }
}

/* ---------------------------------------------------------------------------
   Phone-only fixes (≤480px). Scoped narrowly so tablet (up to 880px) and
   desktop are untouched. Covers 390 (iPhone 14 Pro) and 430 (14 Pro Max).
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* 1. Org brand stays stacked (already handled at <=880). Tagline reads
        on its own line under the org name. */

  /* 2. Theme + Background pickers collapse behind a chevron button.
        Bar becomes: [nav row, centered] [chevron].
        When the hidden checkbox is :checked, the panel drops onto a new
        full-width row below the nav. */
  .tania-bar{
    padding: 8px 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }
  .tania-bar-toggle{
    display: inline-flex; /* override the desktop "display: none" */
    position: static;     /* override 880px absolute so it flows inline on row 2 */
    transform: none;
    right: auto; top: auto;
  }
  .tania-bar-toggle-input:checked ~ .tania-bar-toggle{
    transform: none;
  }
  /* Hide the panel by default; reveal when toggle is checked.
     order:4 so it drops onto row 3 (below the nav row + the userpills+toggle row). */
  .tania-bar-utilities{
    display: none;
    width: 100%;
    order: 4;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    margin-top: 2px;
  }
  .tania-bar-toggle-input:checked ~ .tania-bar-utilities{
    display: inline-flex;
  }
  .scheme-picker{ flex: 1 1 0; min-width: 0; gap: 4px; }
  .scheme-picker > span{ display: none; }
  .scheme-picker select{
    width: 100%;
    min-width: 0;
    padding: 4px 22px 4px 6px;
    font-size: 12px;
  }

  /* 3. Primary nav becomes its OWN row (left-aligned, in source order).
        Row 2 = userpills + chevron, right-aligned. Toggle is now inline
        (position:static above) so no chevron-padding on the nav row.
        display:flex (not inline-flex) so width:100% + flex-wrap actually
        wraps children when their summed width exceeds viewport. */
  .tania-bar-nav{
    display: flex;
    order: 1;
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
    padding-right: 0;
    flex-wrap: wrap;
  }
  .tania-bar-userpills{
    order: 2;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .tania-bar-toggle{ order: 3; margin-left: 6px; }
  .tania-navlink{ padding: 5px 8px; font-size: 10.5px; letter-spacing: .03em; }
  .tania-userpill{ padding: 5px 9px; font-size: 11px; }

  /* 4. Hero card title shrinks so "AI-NATIVE SOFTWARE" wraps cleanly. */
  .hero-panel{ padding: 18px 16px; }
  .hero-title{ font-size: 22px; line-height: 1.2; }

  /* 5. Hero benefits stack to one column with the ✓ on the SAME LINE as
        the text via flex, so the checkmark sits flush against the first
        word instead of floating in its own absolute column. */
  .hero-benefits{
    flex-direction: column;
    gap: 8px;
    font-size: 15px;
    text-align: left;
  }
  .hero-benefits li{
    padding-left: 0;
    display: flex; align-items: baseline; gap: 8px;
  }
  .hero-benefits li::before{
    position: static;
    display: inline-block;
    margin: 0;
    flex: 0 0 auto;
  }

  /* 6, 7. Card padding lighter so body copy + answer rows stop clipping.
           box-sizing on everything inside .panel is already inherited from
           the body baseline; we just need tighter padding. */
  .panel{ padding-left: 14px; padding-right: 14px; }
  .qcard{ padding: 18px 14px; }
  .qcard-head .qtitle{ font-size: 17px; line-height: 1.3; }
  .answers li{ padding: 10px 12px; }
  .answers label{ gap: 10px; font-size: 14px; line-height: 1.4; }

  /* 8. "Next →" button visible — was right-aligned and overflowing. */
  .home-quiz-actions{ justify-content: stretch; }
  .home-quiz-actions .btn.primary{
    width: 100%; text-align: center;
    box-sizing: border-box;
  }

  /* 9. Manager teaser panel breathes. Button forced to box-sizing:border-box
        so its padding can't push it past the panel's right edge. max-width
        100% caps it even if a font-related glitch tries to widen it. */
  .manager-teaser{ padding: 16px 14px; }
  .manager-teaser-title{ font-size: 18px; }
  .manager-teaser-sub{ font-size: 14px; }
  .manager-teaser-cta{ display: block; }
  .manager-teaser-cta .btn{
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding-left: 14px; padding-right: 14px;
  }

  /* 10. Footer stacks vertically so the policy links stop wrapping into
         single-letter columns. */
  .tania-footer{
    grid-template-columns: 1fr;
    text-align: center;
    gap: 6px;
    padding: 12px 16px;
  }
  .tania-footer .left,
  .tania-footer .center,
  .tania-footer .right{ justify-self: center; text-align: center; }
  .tania-footer a.policy{ margin: 0 8px; }

  /* Page-bar (the second bar reading "AI-Native Quiz · Free Public Service"). */
  .page-bar{ padding: 10px 14px; }
  .page-bar .brand{ font-size: 14px; }
}

/* ---------------------------------------------------------------------------
   Small-phone fixes (<=400px). Covers iPhone SE 1st-gen (320), Galaxy Fold
   cover-screen (280), and any 360-375 stress widths. Stacks aggressively so
   long words like "AI-NATIVE SOFTWARE DEVELOPER?" wrap cleanly.
   --------------------------------------------------------------------------- */
@media (max-width: 540px) {
  /* Long brand-name "The AI Native Educational Association (TANEA)" was
     getting right-edge-clipped under body { overflow-x: hidden } because
     the topbar's 24px gutter + nowrap-ish flow made it overflow. Allow it
     to wrap onto a second line at narrow widths. */
  .tania-topbar{ padding: 6px 12px; }
  .tania-topbar .brand-name{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Multi-word nav labels stack to 2 lines below 540px so all 5 pills fit
     on one row. Single-word siblings (HOME / ABOUT / SPONSORS) and wider
     viewports (≥540px) are untouched. max-width tight enough to force the
     break at the natural word boundary for both "Tool For Managers" →
     "Tool For / Managers" and "AI Training" → "AI / Training".
     line-height compressed so the 2-line pill height stays balanced with
     the single-line siblings. */
  .tania-navlink--stack{
    max-width: 70px;
    white-space: normal;
    text-align: center;
    line-height: 1.05;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

@media (max-width: 400px) {
  .tania-topbar{ padding: 6px 10px; }
  .tania-topbar .brand-name{ font-size: 13px; line-height: 1.25; }
  .tania-topbar .tania-tagline{ font-size: 12px; line-height: 1.3; }

  .tania-bar-nav{ gap: 6px; padding-right: 0; }
  .tania-navlink{ padding: 5px 8px; font-size: 10.5px; letter-spacing: .03em; }

  /* Hero heading: step down again so SOFTWARE doesn't get sliced. */
  .hero-panel{ padding: 14px 12px; }
  .hero-title{ font-size: 18px; line-height: 1.18; }
  .hero-kicker{ font-size: 10px; padding: 4px 9px; }
  .hero-benefits{ gap: 6px; font-size: 14px; }

  .info-panel{ padding: 14px 14px; }
  .info-list{ font-size: 13px; padding-left: 18px; }

  /* Question card and answers: tighter gutter + smaller answer text so the
     longest answer row fits the line without right-edge clipping. */
  .panel{ padding-left: 12px; padding-right: 12px; }
  .qcard{ padding: 14px 12px; }
  .qcard-head{ margin-bottom: 14px; }
  .qcard-head .qtitle{ font-size: 15px; }
  .answer-hint{ font-size: 12px; }
  .answers li{ padding: 8px 10px; }
  .answers label{ font-size: 13px; gap: 8px; line-height: 1.4; }

  /* Manager teaser stays contained at 370 too. */
  .manager-teaser{ padding: 14px 12px; }
  .manager-teaser-title{ font-size: 16px; }
  .manager-teaser-sub{ font-size: 13px; line-height: 1.45; }
}

/* ---------------------------------------------------------------------------
   Manager dashboard / tour view, narrow-mobile (480px and below).
   Targets the /manager-view page family. Fixes right-edge clipping that
   showed up at the 370-480 stress range: shrinks container/panel gutters,
   collapses the 4-up metric grid to a single column, and lets the tour
   bar's Sign up/Sign in row wrap so neither button overflows the panel.
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .tania-container{ padding: 16px 10px 40px; }
  .tania-card{ padding: 14px 12px; }

  .dash-tour-bar{ padding: 10px 12px; font-size: 13px; gap: 8px; }
  .dash-tour-bar__center{ font-size: 13px; }
  .dash-tour-bar__cta{ padding: 6px 12px; font-size: 13px; }
  .dash-tour-bar__actions{ flex-wrap: wrap; justify-content: flex-start; }

  .dash-panel-title{ font-size: 18px; padding-left: 10px; }
  .dash-panel-lede{ padding-left: 10px; font-size: 13px; }

  /* The 760px breakpoint already drops to 2 columns; below 480 a 2-up
     grid still clips the "NEEDS COACHING" label, so go single-column. */
  .dash-metrics{ grid-template-columns: 1fr; }
  .dash-metric{ padding: 12px 14px; }

  .tania-topbar .brand-name{ font-size: 12px; word-break: break-word; }
}