/* ========================================================================
   GagaMuller Learning — 03-nav.css
   The tab bar and its sliding underline.

   Loaded by index.html as sheet 3 of 7. The order is the cascade: a
   later sheet may override an earlier one, so it must not be changed.
   ======================================================================== */
  /* ---------- nav ---------- */
  /* The tabs fill the page column, rather than sitting centred in the middle of
     it. Everything else on the page - the tables, the card grids, the report
     panels - runs the full 1,680px, and a centred tab strip with 145px of empty
     border either side of it was the one row that did not.

     They grow, they do not shrink: flex:1 0 auto means each tab starts at its
     own label width and takes an equal share of whatever is left over, so a
     longer label keeps a wider tab and the set still reaches both edges. The
     alternative - an equal share each, flex-basis 0 - gives a learner three
     550px tabs with a small label adrift in the middle of each one.

     flex-shrink stays at 0 deliberately. The labels are nowrap, so a shrinking
     tab would clip its own text; at 0 the row wraps instead, which is what it
     already did on a narrow window and the right behaviour there. */
  .nav{display:flex; gap:6px; flex-wrap:wrap;
    margin:22px 0 24px; padding-bottom:2px;
    border-bottom:1px solid var(--line); position:relative;}
  .nav button{flex:1 0 auto; padding:12px 15px; border-radius:11px 11px 0 0; color:var(--muted);
    font:600 14.5px var(--display); position:relative; transition:color .15s ease, background .15s ease;
    display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap;}
  /* The label, icon and count as one measurable box inside a tab that is now
     wider than they are. Both underlines are drawn against THIS rather than
     against the tab, so the marker stays the size of the thing it is marking
     however much spare width the tab was given. */
  .nav button .nav-lb{position:relative; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;}
  .nav button svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
  /* One step down below 1500. An administrator's ten tabs need about 1,346px at
     the size above, and a 1366 laptop offers 1,310 inside the gutters - so
     without this the set wraps to two rows on the commonest screen in the
     business. Trimming the horizontal padding and the gap, and nothing else,
     buys 58px and keeps it on one line; the type stays the size it is. */
  @media (max-width:1500px){ .nav{gap:4px;} .nav button{padding:12px 13px;} }
  .nav button:hover{color:var(--ink); background:var(--fill);}
  .nav button.on{color:var(--ink);}
  /* The underline under the selected tab. It is drawn twice over: as a static
     ::after on the button, and as one shared bar that slides between buttons.
     The sliding bar can only be placed once the buttons have been measured, so
     the static one is what shows until .has-ind says the measurement worked -
     if scripting or measurement ever fails, the selected tab is still marked. */
  /* -13px, not -1px: the bar belongs at the bottom edge of the TAB, and the
     label box it now hangs from sits 12px of padding above that. */
  .nav button.on .nav-lb::after{content:""; position:absolute; left:0; right:0; bottom:-13px; height:2px;
    background:var(--brand-grad); border-radius:2px;}
  .nav.has-ind button.on .nav-lb::after{display:none;}
  /* Anchored top-left and moved entirely by transform, never by bottom: the nav
     wraps to two rows on a narrow window, and an underline pinned to the bottom
     of the nav box would sit under the last row whichever row the selected tab
     is actually in. The Y comes from the measured tab, so it follows the tab
     across rows as well as along one; the X and the width come from the label
     box inside it. */
  .nav-ind{position:absolute; left:0; top:0; height:2px; width:0; opacity:0;
    background:var(--brand-grad); border-radius:2px; pointer-events:none;
    transform:translate(0,0); will-change:transform, width;
    transition:transform .34s cubic-bezier(.22,.61,.36,1), width .34s cubic-bezier(.22,.61,.36,1), opacity .18s ease;}
  .nav .pill{font:700 10.5px var(--mono); padding:1px 6px; border-radius:999px; background:var(--bad); color:var(--ink-on-strong);}
  .nav .pill.q{background:var(--warn); color:var(--ink-on-strong);}
  /* flex:0 0 1px, or the separator between the learner tabs and the admin ones
     takes a share of the spare width and becomes a 145px hairline gap. */
  .nav-sep{flex:0 0 1px; width:1px; background:var(--line); margin:6px 6px;}