/* Teacher UI · optional in-person route for the online course. */
:root {
  --teacher-bg: #f3f5f8;
  --teacher-surface: #ffffff;
  --teacher-muted-surface: #e9edf3;
  --teacher-ink: #15161a;
  --teacher-muted: #59616f;
  --teacher-border: #dfe4ec;
  --teacher-primary: #1a5fd2;
  --teacher-primary-dark: #1758c8;
  --teacher-brand: #1758c8;
  --teacher-brand-soft: #e9edf3;
  --teacher-shadow: none;
  --teacher-font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --teacher-font-display: "IBM Plex Serif", Georgia, serif;
}

html.dark {
  --teacher-bg: #0f1218;
  --teacher-surface: #171b22;
  --teacher-muted-surface: #222832;
  --teacher-ink: #f5f7fb;
  --teacher-muted: #a8b0bf;
  --teacher-border: #303846;
  --teacher-primary: #67a1ff;
  --teacher-primary-dark: #9bc0ff;
  --teacher-brand: #9bc0ff;
  --teacher-brand-soft: #222832;
  --teacher-shadow: none;
}

html { background: var(--teacher-bg); }

body.teacher-page {
  margin: 0;
  min-width: 320px;
  background: var(--teacher-bg);
  color: var(--teacher-ink);
  font-family: var(--teacher-font-ui);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

html.dark body.teacher-page {
  background: var(--teacher-bg);
}

body.teacher-page ::selection { background: #d7e7ff; color: var(--teacher-ink); }
html.dark body.teacher-page ::selection { background: #344d78; color: #fff; }

body.teacher-page .skip-link {
  position: fixed;
  left: 18px;
  top: 10px;
  z-index: 100;
  transform: translateY(-160%);
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--teacher-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease;
}

body.teacher-page .skip-link:focus { transform: translateY(0); }
html.dark body.teacher-page .skip-link { background: #fff; color: #10131a; }

body.teacher-page .teacher-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
  padding: 10px clamp(18px, 4vw, 48px);
  background: rgb(255 255 255 / .82);
  border-bottom: 1px solid rgb(223 228 236 / .92);
  box-shadow: 0 8px 26px -22px rgb(15 18 26 / .35);
  backdrop-filter: blur(18px);
  font-size: 12px;
  font-weight: 700;
}

body.teacher-page .teacher-nav a { color: var(--teacher-primary-dark); text-decoration: none; }
body.teacher-page .teacher-nav a:hover { color: var(--teacher-brand); }
body.teacher-page .teacher-nav .nav-label { color: var(--teacher-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
html.dark body.teacher-page .teacher-nav { background: rgb(17 21 29 / .84); border-bottom-color: rgb(48 56 70 / .92); box-shadow: 0 8px 26px -22px rgb(0 0 0 / .8); }

body.teacher-page .teacher-wrap { width: min(100% - 36px, 960px); margin: 0 auto; padding: clamp(38px, 6vw, 72px) 0 96px; }
body.teacher-page .teacher-wrap h1,
body.teacher-page .teacher-wrap h2,
body.teacher-page .teacher-wrap h3,
body.teacher-page .teacher-wrap h4 { font-family: var(--teacher-font-display); line-height: 1.12; letter-spacing: -.015em; }
body.teacher-page .teacher-wrap h1 { max-width: 18ch; margin: 0 0 20px; color: var(--teacher-ink); font-size: clamp(2.7rem, 5.8vw, 4.7rem); font-weight: 600; }
body.teacher-page .teacher-wrap h2 { margin: 1.7em 0 .55em; padding-bottom: 10px; border-bottom: 1px solid var(--teacher-border); color: var(--teacher-brand); font-size: clamp(1.55rem, 3.2vw, 2.25rem); font-weight: 700; }
body.teacher-page .teacher-wrap h3 { margin: 1.4em 0 .45em; color: var(--teacher-ink); font-size: 1.35rem; }
body.teacher-page .teacher-wrap h4 { margin: 1.2em 0 .35em; color: var(--teacher-muted); font-size: 1.05rem; }
body.teacher-page .teacher-wrap p { margin: .75em 0; }
body.teacher-page .teacher-wrap a { color: var(--teacher-primary-dark); }
body.teacher-page .teacher-wrap strong,
body.teacher-page .teacher-wrap b { color: var(--teacher-ink); }
body.teacher-page .teacher-wrap ul,
body.teacher-page .teacher-wrap ol { padding-left: 1.35em; }
body.teacher-page .teacher-wrap li { margin: .38em 0; }
body.teacher-page .teacher-wrap blockquote { margin: 1.2em 0; padding: 17px 21px; border: 1px solid var(--teacher-border); border-left: 4px solid var(--teacher-brand); border-radius: 0 14px 14px 0; background: var(--teacher-surface); box-shadow: var(--teacher-shadow); }
body.teacher-page .teacher-wrap code { padding: 2px 6px; border-radius: 6px; background: var(--teacher-muted-surface); color: var(--teacher-primary-dark); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .86em; }
body.teacher-page .teacher-wrap pre { overflow-x: auto; padding: 18px 20px; border: 1px solid rgb(255 255 255 / .08); border-radius: 8px; background: linear-gradient(135deg, #1d2028, #2a2440); color: #f2efff; box-shadow: var(--teacher-shadow); font-size: 13px; line-height: 1.6; }
body.teacher-page .teacher-wrap pre code { padding: 0; background: none; color: inherit; }
body.teacher-page .teacher-wrap table { width: 100%; margin: 1.25em 0; border-collapse: collapse; overflow: hidden; border: 1px solid var(--teacher-border); border-radius: 8px; background: var(--teacher-surface); box-shadow: var(--teacher-shadow); font-size: 14px; }
body.teacher-page .teacher-wrap th,
body.teacher-page .teacher-wrap td { padding: 11px 14px; border-bottom: 1px solid var(--teacher-border); text-align: left; vertical-align: top; }
body.teacher-page .teacher-wrap thead th { background: var(--teacher-muted-surface); font-family: var(--teacher-font-display); font-size: 14px; }
body.teacher-page .teacher-wrap tr:last-child td { border-bottom: 0; }
body.teacher-page .teacher-source { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--teacher-border); color: var(--teacher-muted); font-size: 12px; }

/* Directory page */
body.teacher-page .teacher-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; color: var(--teacher-brand); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
body.teacher-page .teacher-kicker::before { content: ""; width: 26px; height: 3px; border-radius: 6px; background: var(--teacher-primary); }
body.teacher-page .teacher-lede { max-width: 68ch; margin: 0; color: var(--teacher-muted); font-size: 1.08rem; }
body.teacher-page .teacher-callout { margin: 28px 0 34px; padding: 18px 20px; border: 1px solid #c5d9fa; border-radius: 8px; background: #f4f8ff; box-shadow: var(--teacher-shadow); }
body.teacher-page .teacher-callout strong { color: var(--teacher-primary-dark); }
html.dark body.teacher-page .teacher-callout { border-color: #355f96; background: #1b2a40; }
body.teacher-page .teacher-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
body.teacher-page .teacher-card { display: flex; flex-direction: column; min-height: 190px; padding: 20px; border: 1px solid var(--teacher-border); border-radius: 8px; background: var(--teacher-surface); box-shadow: var(--teacher-shadow); text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
body.teacher-page .teacher-card:hover { transform: translateY(-2px); border-color: #9dbdf7; box-shadow: 0 24px 50px -32px rgb(38 116 237 / .42); }
body.teacher-page .teacher-card .card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--teacher-brand); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
body.teacher-page .teacher-card h2 { margin: 13px 0 8px; padding: 0; border: 0; color: var(--teacher-ink); font-size: 1.35rem; }
body.teacher-page .teacher-card p { margin: 0; color: var(--teacher-muted); font-size: .9rem; line-height: 1.5; }
body.teacher-page .teacher-card .card-link { display: block; margin-top: auto; padding-top: 16px; color: var(--teacher-primary-dark); font-size: .82rem; font-weight: 800; }
html.dark body.teacher-page .teacher-card:hover { border-color: #4b79b7; box-shadow: 0 24px 50px -32px rgb(0 0 0 / .8); }

@media (max-width: 640px) {
  body.teacher-page .teacher-nav { min-height: 50px; padding-inline: 14px; }
  body.teacher-page .teacher-nav .nav-label { display: none; }
  body.teacher-page .teacher-wrap { width: min(100% - 28px, 960px); padding-top: 30px; }
  body.teacher-page .teacher-wrap h1 { font-size: clamp(2.5rem, 13vw, 4rem); }
  body.teacher-page .teacher-grid { grid-template-columns: 1fr; }
  body.teacher-page .teacher-wrap th,
  body.teacher-page .teacher-wrap td { padding: 9px 10px; }
}

@media print {
  body.teacher-page { background: #fff; }
  body.teacher-page .teacher-nav { position: static; box-shadow: none; }
}