/* Site-wide responsive/mobile styles, split out of index.html's inline
   <helmet><style> block so mobile-specific rules live in one place instead
   of being buried in a single giant page. Loaded on every page via a plain
   <link> tag.

   The app itself is built almost entirely with inline styles (a template
   compiler, not a component-per-file setup), so overriding anything from
   here structurally requires !important — that's not sloppiness, it's the
   only way an external stylesheet can win against an inline style attribute.
   Where a rule needs a hook that didn't exist, a small class name was added
   at the call site in index.html (nh-roster-scroll, nh-admin-tabs, etc.)
   rather than reaching for a brittle attribute-value selector. */

/* ---------------------------------------------------------------------
   Foundational safety net — applies at every width. A stray fixed-width
   element anywhere in this large single-file app can otherwise force
   horizontal scroll on narrow phones; border-box keeps padding from
   blowing out declared widths.
   --------------------------------------------------------------------- */
html, body {
  /* `overflow-x: clip` (not `hidden`) still contains sideways overflow, but
     WITHOUT turning html/body into a scroll container — `hidden` forces
     overflow-y to compute as `auto`, which on mobile clamps
     document.scrollingElement.scrollHeight to the viewport and silently
     breaks ALL programmatic vertical scrolling (window.scrollTo,
     scrollIntoView, scrollTop). Touch scrolling still worked, which is why
     the guided tour couldn't scroll to its highlighted step even though the
     user could scroll by hand. `clip` leaves overflow-y visible so the page
     scrolls normally. */
  overflow-x: clip;
  max-width: 100%;
}
*, *::before, *::after {
  box-sizing: border-box;
}
img, svg {
  max-width: 100%;
}

/* iOS Safari zooms in on focus for any input with a font-size under 16px —
   every text/email/password/number input and select in the app is styled
   at 12-13.5px, so without this every tap into a field yanks the whole
   page into a zoomed state until the user manually pinches back out. */
@media (max-width: 720px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

@media print {
  [data-theme]{ --ink:#16110D !important; --ink-soft:#3A2E24 !important; --paper:#FFFFFF !important; --paper-light:#F8F1E0 !important; --ivory:#FBF7EC !important; }
}

/* =======================================================================
   Tablet / large phone — ≤720px
   ======================================================================= */
@media (max-width:720px){
  /* App shell / nav */
  .nh-nav{ display:none !important; }
  .nh-user-meta{ display:none !important; }
  .nh-topbar{ padding:10px 16px !important; gap:10px !important; }
  .nh-brand-text{ display:none !important; }
  .nh-panel{ position:fixed !important; top:60px !important; left:calc(12px + env(safe-area-inset-left)) !important; right:calc(12px + env(safe-area-inset-right)) !important; width:auto !important; max-width:100% !important; }
  .nh-page-pad{ padding-left:16px !important; padding-right:16px !important; }
  .nh-bottom-nav{ display:flex !important; }
  .nh-app-content{ padding-bottom:calc(72px + env(safe-area-inset-bottom)) !important; }

  /* Icon-only header buttons (search/notifications/theme) are 34px, a
     touch below the ~40-44px comfortable tap-target size — nudge them up
     a little on touch-sized screens without changing desktop. */
  .nh-icon-btn{ width:40px !important; height:40px !important; }

  /* The floating "show me around" mascot button sits at a fixed bottom-right
     on desktop, but on mobile that corner is taken by the bottom nav AND it
     overflowed the streak/points card. Move it into the top-right corner
     (over the header, whose content is left-packed on mobile so the corner is
     free) and shrink it so it sits neatly there. `bottom:auto` cancels the
     inline bottom:24px; the mascot-float animation only lifts it ~14px, so
     top:16px keeps it fully on-screen. */
  .nh-tutorial-fab{
    top: calc(16px + env(safe-area-inset-top)) !important;
    right: calc(14px + env(safe-area-inset-right)) !important;
    bottom: auto !important;
    width: 42px !important;
    height: 42px !important;
    padding: 5px !important;
  }

  /* Dashboard */
  .nh-hero{ padding-top:28px !important; padding-bottom:20px !important; flex-direction:column !important; align-items:flex-start !important; }
  .nh-hero-streak{ align-items:flex-start !important; width:100%; }
  .nh-streak-card{ flex-direction:column !important; align-items:stretch !important; gap:12px !important; }
  .nh-streak-card > div[style*="width:1px"]{ display:none !important; }
  .nh-streak-card button{ width:100% !important; }
  .nh-continue-card{ flex-direction:column !important; align-items:stretch !important; text-align:center; }
  .nh-continue-card button{ width:100% !important; }
  .nh-featured-tool{ flex-direction:column !important; padding:24px !important; }
  .nh-featured-tool > div:last-child{ width:100% !important; height:140px !important; order:-1; }
  .nh-tools-grid{ grid-template-columns:1fr !important; }
  /* Collapsing to one column isn't enough on its own — a CSS Grid item
     defaults to min-width:auto, so it still won't shrink below its content's
     own min-content width. The tool list's description text uses
     white-space:nowrap (for its ellipsis truncation), which has no min-content
     shrink point at all — without this the grid column, and the featured
     tool card inside it, are forced wide enough to fit that unwrapped text
     and the card runs off the right edge of the screen instead of truncating. */
  .nh-tools-grid > div{ min-width:0 !important; }
  .nh-library-header{ flex-direction:column !important; align-items:flex-start !important; }

  /* Login screen — full-bleed card instead of a floating max-width box,
     so the background photo and padding don't crowd the form. */
  .nh-continue-card, .nh-page-pad, .nh-panel { max-width: 100%; }

  /* Any grid built with a fixed column count elsewhere in the app (Admin's
     overview stat cards, institution/class pickers, etc.) collapses to a
     single column instead of squeezing columns unreadably narrow. */
  div[style*="grid-template-columns:repeat(auto-fit"] { grid-template-columns: 1fr !important; }

  /* Modals (tutorial popover, streak-share card, admin edit forms) —
     keep them within the viewport with breathing room on both sides
     instead of relying on each modal's own fixed max-width. */
  .modal-content { max-width: calc(100vw - 32px) !important; }

  /* Admin's tab bar (Overview/Users/Tools/Institutions/Integrations/
     Campaigns/Lessons) previously just wrapped onto a second and third
     line at phone widths, breaking the underline indicator across rows.
     A single scrollable row reads as an actual tab bar instead. */
  .nh-admin-tabs{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nh-admin-tabs::-webkit-scrollbar{ display:none; }
  .nh-admin-tabs button{ white-space: nowrap !important; flex-shrink: 0; }

  /* Roster tables (Admin > Institutions and My Institution's own roster)
     are a rigid 6-column grid (name/email/role/class/joined/action) that
     has no room to breathe below ~600px. Rather than squeeze every column
     unreadably, let the table scroll horizontally at a fixed minimum
     width — the same tradeoff a real data table makes on mobile. */
  .nh-roster-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
  }
  .nh-roster-row{
    min-width: 560px;
  }

  /* A long email address plus a plan pill plus a role pill on one line
     forces a horizontal squeeze on phones — let it wrap onto a second
     line as a small group instead. */
  .nh-user-row{
    flex-wrap: wrap !important;
    row-gap: 6px;
  }
}

/* =======================================================================
   Phone — ≤480px
   ======================================================================= */
@media (max-width:480px){
  .nh-stat-grid{ grid-template-columns:repeat(2,1fr) !important; }
  /* Two-up button/stat rows that are fine at tablet width get cramped on
     small phones — drop to one column. */
  div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  .nh-bottom-nav span{ font-size:9.5px !important; }
  .nh-bottom-nav svg{ width:19px !important; height:19px !important; }

  /* ---------------------------------------------------------------------
     Text density — several cards/lists pack 3-4 different font sizes into
     one tight row, which reads fine at desktop width but feels cramped on
     a phone. Shrink the small/secondary text a notch (titles/values keep
     more of their weight) purely at this breakpoint; desktop and tablet
     are untouched. Targets a handful of the app's common tag+font-size
     combinations rather than every occurrence individually, following the
     attribute-selector fallback already used above (lines 117, 167) for
     spots that don't have (or don't warrant) their own class hook.
     --------------------------------------------------------------------- */

  /* Search results / notifications dropdown */
  .nh-panel [style*="font-size:12.5px"]{ font-size:11.5px !important; }
  .nh-panel [style*="font-size:11.5px"]{ font-size:10.5px !important; }
  .nh-panel [style*="font-size:11px"]{ font-size:10px !important; }

  /* Streak/points card */
  .nh-streak-card [style*="font-size:15px"]{ font-size:13.5px !important; }
  .nh-streak-card [style*="font-size:11.5px"]{ font-size:10.5px !important; }
  .nh-streak-card button[style*="font-size:12.5px"]{ font-size:11.5px !important; }

  /* Dashboard stat cards (4-up on phones per the rule above) */
  .nh-stat-grid span[style*="font-size:11px"]{ font-size:10px !important; }
  .nh-stat-grid span[style*="font-size:28px"]{ font-size:22px !important; }
  .nh-stat-grid span[style*="font-size:12px"]{ font-size:11px !important; }

  /* Featured tool card + side tool list */
  .nh-featured-tool h3{ font-size:19px !important; }
  .nh-featured-tool p[style*="font-size:13.5px"]{ font-size:12.5px !important; }
  .nh-featured-tool button[style*="font-size:14.5px"]{ font-size:13.5px !important; }
  .nh-tool-row h3{ font-size:13.5px !important; }
  .nh-tool-row p{ font-size:11px !important; }
  .nh-tool-row span[style*="font-size:11px"]{ font-size:10px !important; }
  .nh-tool-row button[style*="font-size:13.5px"]{ font-size:12.5px !important; }

  /* Lesson library header + lesson rows */
  .nh-library-header h3{ font-size:19px !important; }
  .nh-library-header [style*="font-size:11.5px"]{ font-size:10.5px !important; }
  .nh-library-header div[style*="font-size:26px"]{ font-size:21px !important; }
  .nh-lesson-track h4{ font-size:17px !important; }
  .nh-lesson-track h5{ font-size:11.5px !important; }
  .nh-lesson-track span[style*="font-size:12.5px"]{ font-size:11.5px !important; }
  .nh-lesson-row a{ font-size:13.5px !important; }

  /* Learn/article cards */
  .nh-article-card h4{ font-size:14px !important; }
  .nh-article-card p{ font-size:12px !important; }

  /* Admin roster table rows (already horizontally scrollable; text itself
     can still shrink a touch to feel less dense). */
  .nh-roster-row[style*="font-size:10.5px"]{ font-size:9.5px !important; }
  .nh-roster-row[style*="font-size:12.5px"]{ font-size:11.5px !important; }

  /* Signed-up-users row (email/plan/role) — shrinking the row's own
     font-size cascades to its email/role text, which don't set their own. */
  .nh-user-row{ font-size:11.5px !important; }

  /* The small pill/badge (status chips, level tags, "Most popular" etc.)
     recurs across a dozen call sites with the same border-radius:999px +
     font-size combination — one rule covers all of them instead of
     patching each occurrence. */
  [style*="border-radius:999px"][style*="font-size:11.5px"]{ font-size:10.5px !important; }
  [style*="border-radius:999px"][style*="font-size:11px"]{ font-size:10px !important; }
  [style*="border-radius:999px"][style*="font-size:10.5px"]{ font-size:9.5px !important; }
}

/* =======================================================================
   Small phone — ≤380px (older/compact devices: iPhone SE, budget Android)
   ======================================================================= */
@media (max-width:380px){
  .nh-stat-grid{ grid-template-columns:1fr !important; }
  .nh-roster-row{ min-width: 480px; }
}