/* FluentPlex's page for teachers (sites/fluentplex/pages/teachers; design "FluentPlex Teachers"), in its colors
   (Site::FLUENTPLEX_THEME). The example classes take their language's colors (--c-…, FluentplexHelper). Buttons,
   headings and the closing band are the pricing page's (fluentplex-pricing.css). */
.fpteach { background: var(--paper); color: var(--ink); }
.fpteach p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.fpteach__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 60px 48px 64px; }
.fpteach__hero-copy { display: flex; flex-direction: column; gap: 20px; }
.fpteach__pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-body);
}
.fpteach__pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.fpteach__title { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 64px; line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
.fpteach__title em { color: var(--green); }
.fpteach .fpteach__lead { max-width: 560px; font-size: 19px; text-wrap: pretty; }
.fpteach__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fpteach__muted { font-size: 14px; color: var(--text-muted); }
.fpteach__muted--sm { font-size: 13px; }

.fpteach__examples { display: flex; flex-direction: column; gap: 14px; }
.fpteach__class {
  display: flex; flex-direction: column; gap: 12px; padding: 20px 22px;
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 20px; color: var(--c-ink);
}
.fpteach__class-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.fpteach__class-name { display: flex; flex-direction: column; gap: 2px; }
.fpteach__class-lang { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-accent); }
.fpteach__class-title { font-size: 18px; font-weight: 700; }
.fpteach__join { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--c-chip); border-radius: 10px; font-size: 13px; }
.fpteach__join strong, .fpteach__mono { font-family: ui-monospace, Menlo, monospace; letter-spacing: 1.5px; }
.fpteach__join strong { font-size: 15px; }
.fpteach__assignment { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--c-line); font-size: 14px; }
.fpteach__kind { padding: 2px 8px; background: var(--c-chip); border-radius: 6px; font-size: 12px; font-weight: 700; }
.fpteach__reading { font-family: var(--c-title-font); font-size: 18px; line-height: 1.6; font-weight: 600; }
.fpteach__range { color: var(--c-muted); }
.fpteach__students { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fpteach__student { display: grid; grid-template-columns: 80px minmax(0, 1fr) 110px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; font-size: 14px; }
.fpteach__student-name { font-weight: 600; }
.fpteach__bar { display: block; height: 8px; border-radius: 8px; background: var(--c-line); overflow: hidden; }
.fpteach__bar > span { display: block; height: 100%; background: var(--c-ink); }
.fpteach__status { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-weight: 700; white-space: nowrap; }
.fpteach__student--done .fpteach__bar > span { background: var(--c-good); }
.fpteach__student--done .fpteach__status { color: var(--c-good); }
.fpteach__student--behind { background: var(--c-warn-bg); }
.fpteach__student--behind .fpteach__bar > span { background: var(--c-warn); }
.fpteach__student--behind .fpteach__status { color: var(--c-warn); }

.fpteach__section { display: flex; flex-direction: column; gap: 22px; max-width: 1280px; margin: 0 auto; padding: 60px 48px; }
.fpteach__section--ruled { border-top: 1px solid var(--line); max-width: none; }
.fpteach__section--ruled > * { width: 100%; max-width: 1184px; margin: 0 auto; }
.fpteach__section--top0 { padding-top: 0; }
.fpteach__h2 { font-size: 38px; line-height: 1.08; letter-spacing: -.015em; }
.fpteach__h3 { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 25px; line-height: 1.1; }
.fpteach__h3--lg { font-size: 27px; }
.fpteach__steps { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fpteach__step, .fpteach__card { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.fpteach__step-n { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--clay); color: var(--text-on-accent); font-weight: 700; }

.fpteach__features { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px 40px; align-items: start; }
.fpteach__features-copy { display: flex; flex-direction: column; gap: 16px; }
.fpteach__list { list-style: none; margin: 0; padding: 0; }
.fpteach__list li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.fpteach__list li > span:last-child { display: flex; flex-direction: column; gap: 3px; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.fpteach__list strong { font-size: 16px; color: var(--ink); }
.fpteach__tick { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--green); }
.fpteach__student-page { gap: 14px; border-radius: 20px; padding: 20px 22px; }
.fpteach__card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fpteach__card-name { display: flex; flex-direction: column; gap: 2px; }
.fpteach__label { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.fpteach__card-title { font-size: 19px; font-weight: 700; }
.fpteach__chart { display: flex; align-items: flex-end; gap: 6px; height: 96px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.fpteach__chart span { flex: 1; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--green-bright); }
.fpteach__chart span.is-today { background: var(--clay); }
.fpteach__chart-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }
.fpteach__stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fpteach__stats div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 10px 12px; background: var(--paper); border-radius: 12px; }
.fpteach__stats dt { font-size: 13px; color: var(--text-muted); }
.fpteach__stats dd { margin: 0; font-family: var(--font-serif); font-size: 26px; line-height: 1; }
.fpteach__privacy { display: flex; gap: 8px; padding: 10px 12px; background: var(--clay-soft); border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--text-body); }
.fpteach__privacy > span { font-weight: 700; color: var(--clay); }

.fpteach__two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fpteach__two .fpteach__card { gap: 10px; }
.fpteach__example { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding: 10px 12px; background: var(--paper); border-radius: 12px; font-size: 14px; }
.fpteach__example .fpteach__mono { font-weight: 700; letter-spacing: 0; }
.fpteach__archived { padding: 1px 9px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; font-weight: 700; }

.fpteach__band { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; padding: 40px; background: var(--ink); color: var(--text-on-dark); border-radius: 22px; }
.fpteach__band-copy { display: flex; flex-direction: column; gap: 14px; }
.fpteach__codes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fpteach__codes li { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--ink-line-strong); }
.fpteach__codes strong { font-size: 16px; }
.fpteach__codes li > span, .fpteach__on-dark-muted { font-size: 14px; line-height: 1.5; color: var(--text-on-dark-muted); }
.fpteach__band-link { align-self: flex-start; display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--green-bright); }
.fpteach__band-link:hover { color: var(--text-on-dark); }
.fpteach__wallet { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--ink-raised); border: 1px solid var(--ink-line-strong); border-radius: 16px; font-size: 13px; }
.fpteach__wallet-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fpteach__code { font-size: 20px; font-weight: 700; letter-spacing: 2px; }
.fpteach__credits { display: flex; flex-direction: column; gap: 6px; }
.fpteach__meter { display: block; height: 8px; border-radius: 8px; background: var(--ink-line-strong); overflow: hidden; }
.fpteach__meter > span { display: block; height: 100%; background: var(--green-bright); }
.fpteach__credit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fpteach__credit-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 8px; border-top: 1px solid var(--ink-line-strong); }
.fpteach__ready, .fpteach__credit-list .fpteach__on-dark-muted { white-space: nowrap; }
.fpteach__ready { font-weight: 700; color: var(--green-bright); }
.fpteach__wallet-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fpteach__chip { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--text-on-dark); border-radius: 999px; font-size: 14px; font-weight: 600; }
.fpteach__chip--light { background: var(--card); color: var(--ink); border-color: var(--card); }

.fpteach__school { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 30px; border: 1.5px solid var(--ink); border-radius: 20px; }
.fpteach__school > div { display: flex; flex-direction: column; gap: 6px; }
.fpteach__school-link { min-height: 48px; padding: 0 22px; font-size: 15px; white-space: nowrap; }
.fpteach__cta-title { max-width: 720px; text-wrap: balance; }
.fpteach .fpteach__cta-text { max-width: 560px; color: var(--text-on-dark-muted); }

/* Phones (design 390): everything stacks; student rows keep name, bar and status on one line. */
@media (max-width: 860px) {
  .fpteach__hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 16px 36px; }
  .fpteach__title { font-size: 42px; }
  .fpteach .fpteach__lead { font-size: 17px; }
  .fpteach__actions { flex-direction: column; }
  .fpteach__class, .fpteach__student-page { padding: 16px; }
  .fpteach__student { grid-template-columns: 62px minmax(0, 1fr) 92px; }
  .fpteach__section { padding: 40px 16px; }
  .fpteach__section--top0 { padding-top: 0; }
  .fpteach__h2 { font-size: 30px; }
  .fpteach__steps, .fpteach__features, .fpteach__two, .fpteach__band { grid-template-columns: minmax(0, 1fr); }
  .fpteach__chart { gap: 3px; }
  .fpteach__band { padding: 24px 18px; }
  .fpteach__school { flex-direction: column; align-items: stretch; padding: 20px; }
  .fpteach__school-link { white-space: normal; text-align: center; }
}