/* =============================================================================
   The showcase page: /teaching/
   -----------------------------------------------------------------------------
   Linked only from teaching/index.html, and built to its own file. Everything
   else on a document page comes from css/page.css, which the production build
   concatenates into css/app.css - the stylesheet every visitor to the
   simulation downloads before anything is drawn. Putting a showcase page's
   grids in there would charge that download for a page most visitors never
   open, so this sheet stays separate and this page pays for it alone.

   Nothing here defines a color. The palette, the radii, the spacing scale and
   the four themes all come from tokens.css, which means a reader arriving from
   the simulation sees the theme they left with, including the light one.

   Same cascade layer as the rest of the document chrome, so a rule here can sit
   beside .doc-feature and .doc-glance without an !important anywhere.
   ============================================================================ */

@layer components {
  /* --- The language switch, in the page header ---------------------------- */
  .teach-lang {
    display: flex;
    gap: var(--space-2);
  }
  .teach-lang button[aria-pressed='true'] {
    color: var(--text-primary);
    border-color: var(--accent);
  }

  /* --text-secondary rather than --text-muted. css/page.css already records
     that muted gray fails contrast at small sizes in every theme, and this is
     small type; there is no reason to relearn it here. */
  .teach-fineprint {
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  /* --- The five-phase cycle ------------------------------------------------ */
  /* A grid rather than a diagram with arrows. An arrow drawn in CSS is a
     decoration a screen reader cannot read and a printer renders as a smudge;
     the order is carried by the list being an <ol> and by the numbers, which
     are real text. */
  /* Every auto-fit grid on this page uses minmax(min(Npx, 100%), 1fr) rather
     than minmax(Npx, 1fr). A bare floor is a floor: on a 320px phone the
     demonstration cards held their 330px track and pushed the document 26
     pixels sideways. With min(..., 100%) the track gives way when there is not
     room for it, and nothing changes at any width where there is. */
  .teach-cycle {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: var(--space-3);
    margin: var(--space-5) 0 var(--space-8);
    padding: 0;
    list-style: none;
  }
  .teach-step {
    position: relative;
    margin: 0;
    padding: var(--space-4);
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-top: 2px solid var(--accent);
    border-radius: var(--radius-md);
  }
  .teach-step-n {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.12em;
    color: var(--accent);
  }
  .teach-step h3 {
    margin: 4px 0 var(--space-2);
    font-size: var(--text-base);
  }
  .teach-step p {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
  }
  .teach-step-tool {
    margin: 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-xs);
    color: var(--text-secondary);
  }

  /* --- The student's five stages ------------------------------------------ */
  .teach-journey {
    margin: var(--space-5) 0 var(--space-8);
    padding: 0;
    list-style: none;
  }
  .teach-stage {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: var(--space-4);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
  }
  .teach-stage:last-child {
    border-bottom: none;
  }
  .teach-stage-n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-full);
  }
  .teach-stage h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-base);
  }
  .teach-stage p {
    margin: 0;
  }

  /* --- Instruments --------------------------------------------------------- */
  .teach-instruments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0 var(--space-8);
  }
  .teach-instrument {
    margin: 0;
  }
  .teach-instrument p:last-child {
    margin-bottom: 0;
  }

  /* --- Demonstrations ------------------------------------------------------ */
  .teach-demos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0 var(--space-6);
  }
  .teach-demo {
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
  }
  .teach-demo-head h3 {
    margin: 0 0 4px;
    font-size: var(--text-base);
  }
  /* Under the actions now, beside the investigation link it describes, rather
     than under the demonstration's title where it read as the demonstration's
     own duration. */
  .teach-demo-meta {
    margin: var(--space-2) 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.06em;
    color: var(--text-secondary);
  }
  .teach-demo-fields {
    flex: 1;
    margin: 0 0 var(--space-4);
  }
  .teach-demo-field {
    margin-bottom: var(--space-3);
  }
  .teach-demo-field dt {
    margin-bottom: 3px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .teach-demo-field dd {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }
  .teach-demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  /* The figure. 16:10, which is the ratio js/embed.js offers for the reason it
     documents there: an orbit is as tall as it is wide, and 16:9 crops the top
     and bottom of an eccentric one. */
  .teach-figure {
    margin-top: var(--space-4);
    aspect-ratio: 16 / 10;
    background: var(--bg-color);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .teach-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .teach-sequence {
    margin: 0 0 var(--space-8);
  }
  .teach-sequence-text {
    margin: var(--space-3) 0 0;
    padding: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-secondary);
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    white-space: pre;
  }

  /* --- Course patterns ----------------------------------------------------- */
  .teach-patterns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0 var(--space-8);
  }
  .teach-pattern {
    padding: var(--space-5);
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
  }
  .teach-pattern h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-base);
  }
  .teach-pattern p {
    font-size: var(--text-sm);
  }
  .teach-pattern-meta {
    display: grid;
    grid-template-columns: minmax(90px, max-content) 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
  }
  .teach-pattern-meta dt {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding-top: 3px;
  }
  .teach-pattern-meta dd {
    margin: 0;
    color: var(--text-secondary);
  }
  .teach-fitting-head {
    margin: 0 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .teach-fitting {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
  }
  .teach-fitting li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 4px 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .teach-fitting li:last-child {
    border-bottom: none;
  }
  .teach-fitting-time {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-secondary);
    white-space: nowrap;
  }

  /* --- Access and evidence -------------------------------------------------- */
  .teach-access {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0 var(--space-8);
  }
  .teach-access .doc-feature {
    margin: 0;
  }
  .teach-access p:last-child {
    margin-bottom: 0;
  }
  .teach-checks {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }
  .teach-evidences {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0 var(--space-6);
  }
  .teach-evidence {
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
  }
  .teach-evidence h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-base);
  }
  .teach-evidence p {
    margin: 0;
    font-size: var(--text-sm);
  }

  /* --- Narrow screens ------------------------------------------------------- */
  /* The page header already stacks at 720px (css/page.css). The language switch
     is a third child of that flex column, so it needs to stop stretching. */
  @media (max-width: 720px) {
    .teach-lang {
      margin-left: 0;
    }
    .teach-stage {
      grid-template-columns: 1fr;
      gap: var(--space-2);
    }
    .teach-demo,
    .teach-pattern {
      padding: var(--space-4);
    }
    .teach-demo-actions .ui-button {
      flex: 1 1 auto;
      text-align: center;
    }
    .teach-pattern-meta {
      grid-template-columns: 1fr;
      gap: 2px var(--space-3);
    }
    .teach-pattern-meta dd {
      margin-bottom: var(--space-2);
    }
  }

  /* --- Print ---------------------------------------------------------------- */
  /* A printed copy of this page is a handout for a department meeting. The
     figures are iframes and print as empty rectangles, so they go; everything
     that carries an argument stays, and the grids collapse to one column so a
     three-column card grid does not straddle a page break. */
  @media print {
    .teach-lang,
    .teach-figure,
    .teach-sequence,
    .teach-demo-actions {
      display: none;
    }
    .teach-cycle,
    .teach-instruments,
    .teach-demos,
    .teach-patterns,
    .teach-access,
    .teach-evidences {
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }
    .teach-demo,
    .teach-pattern,
    .teach-step,
    .teach-evidence {
      break-inside: avoid;
      background: none;
    }
  }
}

@layer components {
  /* --- Classroom activities --------------------------------------------------
     One activity, three formats. The formats differ in kind rather than in
     degree - who runs it, how long it takes, what a student produces - so they
     are told apart by their headings and their prose, never by color or an
     icon alone. */
  .teach-activity {
    padding: var(--space-5);
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
  }
  .teach-activity-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
  }
  .teach-activity-question {
    margin: 0 0 var(--space-4);
    color: var(--text-secondary);
  }
  .teach-activity-fields {
    margin: 0 0 var(--space-4);
  }
  .teach-activity-field {
    margin-bottom: var(--space-3);
  }
  .teach-activity-field dt {
    margin-bottom: 3px;
    color: var(--text-muted);
    font-size: var(--text-2xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .teach-activity-field dd {
    margin: 0;
  }
  .teach-activity-objectives {
    margin: 0 0 var(--space-5);
    padding-left: var(--space-5);
  }
  .teach-activity-objectives li {
    margin-bottom: var(--space-2);
  }
  .teach-activity-formats {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    margin-bottom: var(--space-5);
  }
  /* The heading spans the grid rather than sitting in the first column. */
  .teach-activity-formats > h3 {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--text-base);
  }
  .teach-activity-format {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
  }
  /* The format a link asked for. A border and a heading, not a color: the
     distinction has to survive a monochrome print and a screen reader, and
     aria-current carries it for the second. */
  .teach-activity-format.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-line);
  }
  .teach-activity-format h4 {
    margin: 0 0 var(--space-1);
    font-size: var(--text-base);
  }
  .teach-activity-duration {
    margin: 0 0 2px;
  }
  .teach-activity-closing {
    color: var(--text-secondary);
  }
  .teach-activity-launch {
    margin-top: auto;
    align-self: flex-start;
  }
  /* Instructor materials, kept visibly apart from the student buttons above. */
  .teach-activity-instructor {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
  }
  .teach-activity-instructor .teach-fineprint {
    flex-basis: 100%;
    margin: 0;
  }
  .teach-activity-fallback {
    border-left: 3px solid var(--warning);
  }

  @media (max-width: 600px) {
    .teach-activity-formats {
      grid-template-columns: 1fr;
    }
  }

  /* --- Instructor quick-start, evaluation and feedback ---------------------- */
  .teach-quickstart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0 var(--space-8);
  }

  .teach-evaluate-list {
    margin: var(--space-5) 0 var(--space-8);
    padding-left: var(--space-5);
    display: grid;
    gap: var(--space-4);
  }
  .teach-evaluate-list h3 {
    margin: 0 0 var(--space-1);
    font-size: var(--text-md);
  }
  .teach-evaluate-list p {
    margin: 0;
  }

  .teach-feedback-routes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0;
  }

  /* The local notes form. Deliberately plain: it is a notepad, not a survey,
     and anything that made it look like a submission form would be lying about
     where the words go. */
  .teach-feedback-form {
    margin: var(--space-5) 0 var(--space-8);
    padding: var(--space-5);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  .teach-feedback-form form {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-4) 0;
  }
  .teach-feedback-field {
    display: grid;
    gap: var(--space-1);
  }
  .teach-feedback-field label {
    font-weight: var(--weight-semibold);
  }
  .teach-feedback-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 2.5rem;
    padding: var(--space-2);
    font: inherit;
    color: var(--text-primary);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    resize: vertical;
  }
  .teach-feedback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .teach-feedback-status {
    margin: var(--space-2) 0 0;
    min-height: 1.2em;
    font-size: var(--text-xs);
    color: var(--text-secondary);
  }
}