/* MIX-ED — Teacher page restyle (20 Oct 2026): the same grammar as the Class and Quizzes pages —
 * Anton uppercase headings, cream cards with a 1.5px border and soft shadow, pink kicker labels,
 * chip rows — laid over the older dashboard markup. Loaded after styles.css; markup unchanged
 * apart from the hero. */

/* ---- hero ---- */
.t-hero { margin: 4px 0 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.t-kicker { margin: 0 0 2px; font: 800 12px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-pink); }
.t-h1 { margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 7vw, 72px); line-height: .95; color: var(--text); }
.t-sub { margin: 8px 0 0; max-width: 720px; color: var(--text-dim); font-size: 15px; line-height: 1.5; }

/* ---- quick links across the top (what most visits are for) ---- */
.t-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.t-quick a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text); font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: var(--shadow); }
.t-quick a:hover { border-color: var(--accent-pink); color: var(--accent-pink); }

/* ---- every section becomes a Class-page card ---- */
main > .live-class, main > .classroom-controls, main > .ai-insights, main > .td-panel, main > .t-id-card {
  background: var(--bg-card) !important; border: 1.5px solid var(--border) !important; border-radius: 16px !important;
  padding: 18px 20px !important; margin: 0 0 16px !important; box-shadow: var(--shadow); max-width: none !important;
}
main > .t-id-card { background-image: none !important; }

/* section titles: Anton, uppercase, like .cl-h2 */
.cc-title, .td-title, .ai-title, .t-id-title {
  margin: 0 0 10px !important; font-family: var(--font-display) !important; font-weight: 400 !important; text-transform: uppercase !important;
  letter-spacing: 0 !important; font-size: 24px !important; line-height: 1.05 !important; color: var(--text) !important;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.lc-head .cc-title, .classroom-controls .cc-title { margin-bottom: 0 !important; }
.classroom-controls .cc-title { margin-bottom: 14px !important; }
.td-sub, .ai-sub, .t-id-sub { color: var(--text-dim); font-size: 14px; line-height: 1.5; }
.td-badge, .ai-badge { font: 800 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--accent-pink); padding: 5px 9px; border-radius: 999px; vertical-align: middle; }
.td-h3 { margin: 18px 0 6px; font: 800 12px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-pink); }
.td-help, .cc-hint { color: var(--text-dim); font-size: 13px; font-style: normal; }

/* inner cards (controls, live pupils, studio locks) */
.cc-card, .lc-card { background: var(--bg-elev) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; }
.cc-card h3 { font: 800 12px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-pink); }
.lc-empty { background: transparent; border: 1.5px dashed var(--border); border-radius: 12px; font-style: normal; }
.lc-class { background: var(--accent-pink) !important; border-radius: 999px; }
.lc-backend { border-radius: 999px; background: var(--bg-elev); }
.lc-be-supabase { color: #1f8f5f; border-color: #1f8f5f; }

/* the studio-lock matrix */
.ma-matrix thead th { background: var(--bg-elev); font: 800 12px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.ma-matrix th, .ma-matrix td { border-color: var(--border); }
.ma-cell:hover { background: var(--bg-elev); }
.ma-tamper { border-top: 1px solid var(--border); }
.ma-tamper-title { font: 800 12px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-pink); }
.ma-tamper-studio { color: var(--accent-pink); }

/* inputs match the Class page */
.cc-select, main .cc-input, main input[type="text"], main input[type="time"], main input[type="date"], main textarea {
  background: #fff; border: 1.5px solid var(--border); border-radius: 10px; color: var(--text); font: inherit;
}
.cc-select:focus, main .cc-input:focus { outline: none; border-color: var(--accent-pink); }
.td-status, .ai-status { color: var(--text-dim); font-size: 13px; }

/* dark theme keeps working: the tokens flip, the overrides don't care */

/* leftovers: no coloured top stripe on panels; tool-card kickers in pink like everything else */
main > .td-panel, main > .ai-insights { border-top: 1.5px solid var(--border) !important; }
main [class*="tool"] [class*="kicker"], main [class*="tool"] [class*="label"], main [class*="tool"] small { color: var(--accent-pink) !important; font: 800 11px/1.2 var(--font) !important; letter-spacing: .08em; text-transform: uppercase; }
main [class*="tool-card"], main [class*="t-tool"] { background: var(--bg-card) !important; border: 1.5px solid var(--border) !important; border-radius: 16px !important; box-shadow: var(--shadow); }
.teacher-tool .tag { color: var(--accent-pink) !important; background: transparent !important; padding: 0 !important; font: 800 11px/1.2 var(--font) !important; letter-spacing: .08em; text-transform: uppercase; }
.teacher-tool { background: var(--bg-card) !important; border: 1.5px solid var(--border) !important; border-radius: 16px !important; box-shadow: var(--shadow); }