/* ==========================================================================
   What a tutor teaches: board groups, class ranges, subject chips (9 Oct 2026).

   Replaces one card per board × class (48 cards for Classes 1–12 of four
   boards) with one row per board group (App\Support\TeachingMatrix):

     [CBSE] [ICSE]   (Classes 6–10)  Maths  Science

   Three shapes, three jobs, so nothing leans on colour alone:
     board badge   square-cornered, icon + bold name      "which syllabus"
     class pill    round, outlined, stacked-steps icon    "which years"
     subject chip  round, filled, plain text              "what"
   All neutral (the site's surface tokens). Colour stays with its role
   (nx-roles.css): no marigold, indigo or green in here. The "Show all" toggle
   is information, so it uses the link colour as text on the dark ground.
   Markup: tutor/partials/teaching-matrix.blade.php, and the compare views in
   public/frount/assets/js/nx-compare.js (.nxtm--mini).
   ========================================================================== */
.nxtm{display:grid;gap:10px;min-width:0}
.nxtm__row{
  display:grid;grid-template-columns:fit-content(15rem) minmax(0,1fr);gap:10px 14px;align-items:start;
  padding:14px 16px;border-radius:var(--nxt-r-md,16px);
  background:var(--nxt-surface,rgba(255,255,255,.045));border:1px solid var(--nxt-line,rgba(255,255,255,.09));
  min-width:0;
}
.nxtm__boards{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;min-width:0}
.nxtm__board{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  padding:5px 10px 5px 8px;border-radius:8px;
  background:var(--nxt-surface-3,rgba(255,255,255,.10));border:1px solid var(--nxt-line-strong,rgba(255,255,255,.16));
  color:var(--nxt-text,#EEF2F9);font:800 .8125rem/1.25 var(--nxt-font-body,system-ui,sans-serif);letter-spacing:.02em;
  overflow-wrap:anywhere;
}
.nxtm__board svg{flex:0 0 auto;opacity:.75}
.nxtm__board--none{font-weight:600;color:var(--nxt-text-dim,#A6B3CA);background:transparent;border-style:dashed}

.nxtm__body{min-width:0}
.nxtm__line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.nxtm__line + .nxtm__line{margin-top:10px;padding-top:10px;border-top:1px dashed var(--nxt-line,rgba(255,255,255,.09))}
.nxtm__classes{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  padding:4px 11px;border-radius:var(--nxt-r-pill,999px);
  border:1px solid var(--nxt-line-strong,rgba(255,255,255,.16));background:transparent;
  color:var(--nxt-text,#EEF2F9);font:700 .8125rem/1.3 var(--nxt-font-body,system-ui,sans-serif);
  overflow-wrap:anywhere;
}
.nxtm__classes svg{flex:0 0 auto;opacity:.7}
.nxtm__subject{
  display:inline-block;max-width:100%;padding:4px 11px;border-radius:var(--nxt-r-pill,999px);
  background:var(--nxt-surface-2,rgba(255,255,255,.07));border:1px solid transparent;
  color:var(--nxt-text,#EEF2F9);font:600 .8125rem/1.3 var(--nxt-font-body,system-ui,sans-serif);
  overflow-wrap:anywhere;
}
.nxtm__note{margin:0;color:var(--nxt-text-dim,#A6B3CA);font-size:.8125rem}
.nxtm__extra{margin:2px 0 0;color:var(--nxt-text-faint,#78869F);font-size:.75rem}

/* "Show all N" — no script needed */
.nxtm__more{display:grid;gap:10px}
.nxtm__more > summary{
  list-style:none;cursor:pointer;justify-self:start;
  display:inline-flex;align-items:center;gap:6px;padding:6px 2px;
  color:var(--nxt-link,#6CB0FF);font:700 .875rem/1.3 var(--nxt-font-body,system-ui,sans-serif);
  text-decoration:underline;text-decoration-color:var(--nxt-link-line,rgba(108,176,255,.45));text-underline-offset:3px;
}
.nxtm__more > summary::-webkit-details-marker{display:none}
.nxtm__more > summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--nxt-base,.22s) var(--nxt-ease,ease)}
.nxtm__more[open] > summary::after{transform:rotate(-135deg) translateY(-1px)}
.nxtm__more[open] > summary .nxtm__more-closed,
.nxtm__more:not([open]) > summary .nxtm__more-open{display:none}
.nxtm__more > summary:focus-visible{outline:2px solid var(--nxt-focus,#8FC2FF);outline-offset:2px;border-radius:4px}

/* Section head on the profile: the one-line summary and the mode */
.nxtm-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:-4px 0 14px}
.nxtm-head__sum{margin:0;color:var(--nxt-text-dim,#A6B3CA);font-size:.9375rem;line-height:1.55;flex:1 1 22rem;min-width:0}
.nxtm-head__mode{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--nxt-r-pill,999px);
  border:1px solid var(--nxt-line,rgba(255,255,255,.09));color:var(--nxt-text-dim,#A6B3CA);font-size:.8125rem;font-weight:600;
}

/* Phones: board badges above, classes and subjects below; nothing scrolls sideways */
@media (max-width:640px){
  .nxtm__row{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px}
}

/* Compact copy inside a comparison */
.nxtm--mini{gap:8px}
.nxtm--mini .nxtm__row{grid-template-columns:minmax(0,1fr);gap:8px;padding:10px 12px;border-radius:12px}
.nxtm--mini .nxtm__board,.nxtm--mini .nxtm__classes,.nxtm--mini .nxtm__subject{font-size:.75rem;padding:3px 9px}