/* /teach, the free schemes of work.
 *
 * No new visual language. The page is built from what the site already has:
 * ts-page on grid paper for the hero, ts-card for the downloads, the
 * shift-table pattern for the column list, and the same details/summary FAQ
 * as the home page. This file adds layout and the two components that are
 * genuinely new here, and every colour and space comes from tokens.css.
 *
 * One tape-yellow button on the page, and it is the download. The hero CTA is
 * ink and the email submit is cream, so the eye lands on the one thing this
 * page exists to hand over. */

/* Visible breadcrumb, matching the BreadcrumbList in the head. */
.teach-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.55em;
  max-width: var(--page-max, 1120px);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter-page-mobile) 0;
  font-size: var(--text-size-micro);
  color: var(--ink-3);
}
.teach-crumb a { color: var(--ink-2); }
.teach-crumb__here { color: var(--ink-2); }

.teach-facts {
  margin: 0 0 var(--space-8);
  max-width: 62ch;
}
.teach-facts p {
  margin: 0;
  color: var(--ink-2);
}

@media (min-width: 760px) {
  .teach-crumb { padding-left: var(--gutter-page); padding-right: var(--gutter-page); }
}

/* ---------- Hero title ----------
   Set as the cover of the document it hands over. The kind of thing sits above
   the rule in the display face, the grade and subject below it in the hand,
   the way a teacher writes her own name on a scheme of work. One h1, read in
   order, so the search phrase is intact. */

.teach-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  max-width: 14ch;
}
.teach-title__kind {
  font-family: var(--font-display);
  font-size: var(--text-size-hero);
  line-height: var(--text-lh-hero);
  letter-spacing: var(--text-ls-hero);
  color: var(--ink);
}
.teach-title__subject {
  position: relative;
  padding-top: var(--space-4);
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: var(--text-size-hand);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: var(--blue);
  /* "Grade 7, 8 and 9 Mathematics" is longer than one grade's name was. The
     non-breaking spaces in the markup keep each numeral with its word, and on
     a narrow phone the line may now break rather than run out of the card. */
  text-wrap: balance;
}
/* The rule is the one on a document cover, not a decorative underline: it runs
   only as far as the words above it. */
.teach-title__subject::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 340px;
  height: var(--border-w);
  background: var(--ink);
}

/* ---------- Download cards ----------
   A hard rule for scanning: term in the head, grade and subject as the
   heading, three numbers, one button. */

.scheme-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-8);
}
@media (min-width: 760px) {
  .scheme-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

/* Cards in a row end at different heights when their content differs. The
   column layout puts every download button on the same baseline. */
.scheme-card { display: flex; flex-direction: column; }
.scheme-card__body { display: flex; flex-direction: column; flex: 1; }

.scheme-card__edition {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-size-micro);
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper-2);
  text-align: right;
  min-width: 0;
}

.scheme-card__title {
  margin: 0 0 var(--space-5);
  max-width: none;
}

/* The three numbers, read across. Display face on the value, small caps on
   the label, so the figure carries and the word explains it. */
.scheme-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-top: var(--border-thin);
  border-bottom: var(--border-thin);
  margin-bottom: var(--space-4);
}
.scheme-card__stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scheme-card__stat-value {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
}
.scheme-card__stat-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-size-label);
  letter-spacing: var(--text-ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.scheme-card__download { margin-top: auto; }

.scheme-card__meta {
  margin: var(--space-3) 0 0;
  font-size: var(--text-size-micro);
  color: var(--ink-3);
  text-align: center;
  max-width: none;
}

.scheme-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-6);
  background: var(--cream);
  border: var(--border-thin);
  font-size: var(--text-size-lead);
  line-height: var(--text-lh-lead);
  color: var(--ink-2);
  max-width: none;
}

/* ---------- Provenance ----------
   Two short single-sentence lines, not a reading paragraph, sitting right
   under a download grid and an empty-state box that both run the full section
   width. Capped at a prose measure (62ch) they read as a narrow, orphaned
   scrap trailing off the left edge under everything wider above them; left
   uncapped, matching .scheme-empty's max-width: none, they line up with the
   rest of the section instead. */

.teach-notes { margin-bottom: var(--space-8); }
.teach-notes__line {
  margin: 0 0 var(--space-2);
  max-width: none;
  font-size: var(--text-size-caption);
  color: var(--ink-2);
}
.teach-notes__fine {
  margin: 0;
  max-width: none;
  font-size: var(--text-size-micro);
  line-height: 1.5;
  color: var(--ink-3);
}

/* ---------- Email capture ----------
   Below the download, never in front of it, and visibly a smaller thing:
   thin border, no offset shadow, cream submit. */

.teach-email {
  max-width: 620px;
  padding: var(--space-5) var(--space-6) var(--space-6);
  background: var(--cream);
  border: var(--border-thin);
}
.teach-email__copy { margin-bottom: var(--space-4); }
.teach-email__copy .ts-eyebrow { margin-bottom: var(--space-2); }
.teach-email__hint {
  margin: 0;
  font-size: var(--text-size-caption);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: none;
}
.teach-email__row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.teach-email__input {
  flex: 1 1 220px;
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-size-caption);
  color: var(--ink);
  background: var(--white);
  border: var(--border-thin);
  border-radius: var(--radius);
}
.teach-email__input::placeholder { color: var(--ink-3); }
.teach-email__input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.teach-email__status:empty { display: none; }
.teach-email__status {
  margin: var(--space-3) 0 0;
  font-size: var(--text-size-caption);
  color: var(--ink-2);
  max-width: none;
}
/* Honeypot. Positioned off screen rather than display:none, which some bots
   skip over. */
.teach-email__pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- The nine columns ----------
   A real table, built the way .shift-table is on the home page: one column
   stacked on a phone with the column name as its own label, three columns with
   an ink header row from 760px.

   Each row is numbered, because the question a teacher asks the table is not
   "what are the nine columns" but "which one is the Tusome one", and column
   seven is easier to hold on to than a name. */

.col-table {
  display: flex;
  flex-direction: column;
  border: var(--border);
  background: var(--cream);
  box-shadow: var(--hard);
  margin-bottom: var(--space-6);
}
.col-table__row {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: var(--border-thin);
}
.col-table__row:last-child { border-bottom: none; }
.col-table__row > * { padding: var(--space-3) var(--space-5); }

/* Head cells carry their own colour. The old rule painted the middle cell with
   the body ink tone, which on the ink header row was dark on dark. */
.col-table__row--head { display: none; }
.col-table__head-cell {
  font-family: var(--font-display);
  font-size: var(--text-size-label);
  letter-spacing: var(--text-ls-label);
  text-transform: uppercase;
  color: var(--cream);
}
.col-table__head-cell--end { text-align: right; }

.col-table__name {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-size-label);
  letter-spacing: var(--text-ls-label);
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0 !important;
}
.col-table__num {
  flex: none;
  min-width: 1.6em;
  padding: 2px 0;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  color: var(--ink-3);
  border-bottom: var(--border-w-thin) solid var(--paper-2);
}
.col-table__holds {
  color: var(--ink-2);
  font-size: var(--text-size-caption);
  line-height: 1.5;
}
.col-table__src { padding-top: 0 !important; }

/* The row this page exists for. Same treatment as .shift-table__win on the
   home page: a wash plus an accent edge. Inset shadow rather than a border so
   the marked row keeps the same grid as every other one. */
.col-table__row--mark {
  background: var(--blue-soft);
  box-shadow: inset var(--border-w-accent-sm) 0 0 var(--blue);
}
.col-table__row--mark .col-table__holds { color: var(--ink); }
.col-table__row--mark .col-table__num { color: var(--blue); border-bottom-color: var(--blue); }

/* Who writes the column. A tag rather than a sentence: nine rows of prose in a
   third column is a paragraph pretending to be a table. */
.col-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-size-label);
  letter-spacing: var(--text-ls-label);
  text-transform: uppercase;
  padding: 3px var(--space-2);
  border: var(--border-w-thin) solid currentColor;
  white-space: nowrap;
}
.col-tag--kicd { color: var(--ink); background: var(--paper-2); }
.col-tag--yours { color: var(--green); background: var(--green-soft); }
.col-tag--tusome { color: var(--blue); background: var(--white); }
/* Neither KICD's nor the teacher's: the document fills these in, or leaves
   them alone. Quiet, and the same weight as each other. */
.col-tag--auto,
.col-tag--blank { color: var(--ink-3); background: transparent; }

/* The paragraph the table has just earned. Blue, so it reads as the same
   thread as the marked row it explains. */
.col-note {
  max-width: 62ch;
  margin: 0 0 var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--blue-soft);
  border: var(--border-thin);
  border-left: var(--border-w-accent) solid var(--blue);
}
.col-note__h {
  margin: 0 0 var(--space-2);
  font-size: var(--text-size-h3);
  color: var(--ink);
}
.col-note p { margin: 0; color: var(--ink); max-width: none; }

.teach-inside__note {
  margin: 0;
  max-width: 62ch;
  font-size: var(--text-size-caption);
  color: var(--ink-2);
}

@media (min-width: 760px) {
  .col-table__row {
    grid-template-columns: 250px 1fr 190px;
    align-items: center;
  }
  .col-table__row > * { padding: var(--space-4) var(--space-5); }
  .col-table__name { padding-bottom: var(--space-4) !important; }
  .col-table__src { padding-top: var(--space-4) !important; text-align: right; }
  .col-table__row--head { display: grid; background: var(--ink); }
  .col-table__head-cell {
    padding-top: var(--space-3) !important;
    padding-bottom: var(--space-3) !important;
  }
  .teach-title { max-width: none; }
}