/* Nexus Pipeline — phone and installed-app refinements.
   Loaded only on the learner-facing pages. Everything here is additive:
   it adjusts existing components rather than restyling them. */

/* ── Filter chips ────────────────────────────────────────────────────────────
   Defined here so the learner and school portals cannot drift apart. Sized to
   stay a 44px-ish tap target on a phone. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip {
  background: var(--steel); border: 1px solid var(--line); color: var(--soft);
  font-family: inherit; font-size: 11.5px; font-weight: 500;
  padding: 8px 12px; border-radius: var(--r); cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.chips .chip:hover { border-color: var(--ore); color: var(--bright); }
.chips .chip.on { background: var(--ore); border-color: var(--ore); color: #fff; font-weight: 600; }

/* ── Installed app: content sits under the status bar on iOS because we ask
   for a translucent bar, so give it back the space. ────────────────────────── */
@media (display-mode: standalone) {
  .topbar {
    padding-top: env(safe-area-inset-top);
    height: calc(56px + env(safe-area-inset-top));
  }
  .sidebar { top: calc(56px + env(safe-area-inset-top)); }
  body { padding-bottom: env(safe-area-inset-bottom); }

  /* "Back to site" links make no sense once it's an app on the home screen. */
  .back, .back-link { display: none !important; }
}

@media (max-width: 560px) {
  /* iOS zooms the whole page when a focused input is under 16px. That zoom
     then sticks and the learner has to pinch back out — so force 16px. */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Thumbs, not cursors. 44px is the accessibility minimum for a tap target. */
  button,
  .btn,
  .btn-submit,
  .nav-link,
  .tab {
    min-height: 44px;
  }

  /* The auth cards carry desktop padding that eats a narrow screen. */
  .login-card,
  .card {
    padding: 22px 18px;
    border-radius: 14px;
  }

  body {
    padding: 14px 12px;
  }

  /* Role tabs scroll rather than wrap into an unreadable stack. */
  .tabs {
    gap: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 10px 12px; }

  /* Wide tables stay readable by scrolling inside their card instead of
     stretching the page sideways. */
  .card { overflow-x: auto; }
  table { min-width: 460px; }

  /* Nothing should ever push the page wider than the screen. Use clip rather
     than hidden — hidden makes these scroll containers and kills sticky headers. */
  html, body { overflow-x: clip; max-width: 100%; }
  img, svg, video { max-width: 100%; height: auto; }

  /* Long email addresses and school codes were breaking out of their boxes. */
  .learner-name, .s-name, .card-sub, .sub, .hint {
    overflow-wrap: anywhere;
  }
}

/* ── Portal chrome on a phone ─────────────────────────────────────────────── */
@media (max-width: 560px) {
  /* The top bar was carrying a back link, a sign-out button and a full
     organisation name. "Sign out" wrapped onto two lines and the name was
     truncated mid-word. Drop what isn't needed and keep the rest on one line. */
  .topbar { padding: 0 12px; }
  .topbar .back-link { display: none; }
  .topbar-right { gap: 6px; }
  .topbar .logo-hex { height: 22px; }
  .topbar button,
  #btn-signout {
    min-height: 36px;
    white-space: nowrap;
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
  .school-badge, .user-badge, .company-badge {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    padding: 5px 8px;
  }

  /* Two short numbers don't each need a full-width card — that pushed the
     school's join code, the thing they actually came for, below the fold. */
  .summary-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sum-card { padding: 13px 12px; gap: 10px; }
  .sum-val { font-size: 22px; }
  .sum-label { font-size: 11px; }
  .sum-line { height: 30px; }

  /* Stat tiles on the student and admin dashboards. */
  .sr { gap: 8px; }
  .sc { padding: 13px 12px; }
  .sc-val { font-size: 22px !important; }

  /* Cards were carrying desktop padding on every side. */
  .main { padding: 16px 12px !important; }
  .card-header { padding: 15px 16px 0; }
  .card-body { padding: 0 16px 16px; }
  .cl { padding: 15px 16px 0; }
}

/* Very small screens — older Androids at 320px. */
@media (max-width: 360px) {
  .login-card, .card { padding: 18px 14px; }
  .card-title, .title { font-size: 17px; }
}

/* Respect a learner who has asked their phone to stop animating things. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}