/* Student cabinet tabs: the approved retention-card prototype recipe.
   Geometry is shared by both cabinet templates; colors use their DS tokens. */
.tabs{display:flex;flex-wrap:wrap;gap:5px}
.tabs > .tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-sizing:border-box;
  font-family:inherit;
  font-size:16px;
  line-height:1.5;
  font-weight:600;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.tabs > .tab.active{
  background:var(--accent-fill);
  border-color:var(--accent-fill);
  color:var(--on-accent);
}
.tabs > .tab:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
@media(hover:hover){
  .tabs > .tab:hover:not(.active){background:var(--hover-veil)}
}
@media(max-width:640px){
  .tabs > .tab{font-size:16px;padding:7px 9px}
}
@media(pointer:coarse){
  .tabs > .tab{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  .tabs > .tab{transition:none}
}

/* Homework count: brand color for fresh AND seen counts; no global badge override. */
.tabs{--hw-counter-bg:#cc1fb3;--hw-counter-text:#fff}
.hwc-b,.hwc-b.hwc-b--seen{position:absolute;top:-6px;right:-2px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--hw-counter-bg,#cc1fb3);color:var(--hw-counter-text,#fff);font-size:12px;font-weight:700;line-height:20px;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:0 0 0 2px var(--bg);pointer-events:none}