/* Teacher-base layer. Palette/type live in tokens.css (single source of truth,
   Agent B). This file only (a) aliases the token names the teacher screens use
   to their canonical tokens, and (b) provides the teacher-side base reset +
   component variants not in the shared components.css (teacher pages do not
   load the student styles.css). Loaded AFTER components.css so teacher-scoped
   rules win where markup differs (e.g. input-style .selectbox vs B's wrapper). */

:root {
  --paper: var(--panel);        /* teacher alias → tokens.css --panel */
  --teacher-bar: var(--header); /* → --header */
  --radius: var(--r);           /* → --r */
  --step: var(--sp-1);          /* 4px base; used as calc(var(--step)*N) */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 var(--font);
  color: var(--ink);
  background: var(--bg);
}

/* topbar (teacher variant expected from B; fallback here) */
.topbar {
  display: flex;
  align-items: center;
  gap: calc(var(--step) * 4);
  padding: calc(var(--step) * 3) calc(var(--step) * 5);
  background: var(--teacher-bar);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.topbar h1 { margin: 0; font-size: 17px; font-weight: 650; }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: calc(var(--step) * 4);
}

.btn {
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 8px;
  padding: calc(var(--step) * 2) calc(var(--step) * 3.5);
  cursor: pointer;
  line-height: 1.2;
}
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn-ghost { background: var(--paper); color: var(--green); border-color: var(--green); }
.btn-danger { background: var(--paper); color: var(--red); border-color: var(--red); }
.btn.mini { padding: 3px 9px; font-size: 12px; font-weight: 500; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
}
.pill.on { border-color: var(--green); color: var(--green); background: #e9f4f1; }

.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 600;
}

.selectbox, input.txt, textarea.txt {
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
}

/* gold TEACHER badge */
.teacher-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--gold-ink);
}