/* ==========================================================================
   Schooling — the only place the copied interface is overridden.

   THERE IS NO LAYOUT IN THIS FILE. `base.css` and `portal.css` are
   `portal-frontend`'s, byte for byte, and they are loaded before this one: the
   bar, the rail, the blocks, the cards, the meters, the graph, the lesson
   list, the exam paper and the certificate all come from there, and the
   instruction for this interface is that it looks EXACTLY like the portal.

   IT USED TO HOLD A WHOLE STYLESHEET. This application had screens of its own
   before the portal's were copied in, written to the same palette and the same
   vocabulary — `.lessons`, `.node`, `.graph`, `.option`, `.question`,
   `.search`. Those screens are gone and the class names are not: the copied
   markup uses the same words, so every one of those rules landed on the
   portal's elements and won, because this file is loaded last. On the screen
   that was a line drawn between lessons the portal does not draw, a hover that
   stopped short of the edge of the panel, a graph laid out by two stylesheets
   at once. None of it is visible in a diff of `portal.css`, which is identical;
   all of it is visible side by side with app.codeschool.ing, which is how it
   was found.

   So the rule now is the one the header always claimed and the contents did
   not keep: THIS FILE MAY ONLY OVERRIDE, AND EVERY OVERRIDE IS ARGUED FOR
   BELOW. Anything that merely styles something is a change to `portal.css`,
   made there and taken back to the portal.

   What is left is accessibility, and nothing else. Every rule below is a WCAG
   failure in the copied stylesheet — one colour used as text, three elements
   dimmed with `opacity`, one control six pixels short of a target. All of them
   are the portal's, all of them were found by a check the portal does not run,
   and all of them are worth taking back.

   THE STYLES FOR THE THREE QUESTION TYPES THE PORTAL DOES NOT HAVE are not
   here: they are not overrides of anything, and they are in `exercises.css`.
   ========================================================================== */

/* ---------- A BLUE THAT PASSES, AND STAYS A BLUE ----------

   `portal.css` sets a dozen pieces of small text in `--phosphor-dim`. On the
   dark page that is #33549e on #0a0e14 — 2.67:1, where WCAG AA asks 4.5:1 for
   text this size — and on the light one #6c86c9 on #f2f4f9, which is 3.24:1.
   Axe reports every one: the rail's track heading, the count beside a course,
   the lesson numbers, the level on a map card, a course's meta line, the word
   that says a course is open to you.

   IT IS A REAL DEFECT AND IT IS THE PORTAL'S. Copying the file brought it here,
   which is the argument FOR copying rather than against it: two interfaces
   sharing a stylesheet share the finding, and this one was found by a check the
   other side does not run.

   THE FIX IS A BLUER BLUE AND NOT A GREY, and that is a correction to two
   earlier attempts at it. The first set these to `--paper-dim` — accessible,
   and the palette's colour for secondary text — and the result read as a duller
   interface than the portal's, because in the portal they are ACCENTS: the
   track a student is on, how far through a lesson they are, which course is
   open to them next. Taking the colour out took the meaning with it. The second
   used `--phosphor`, which is right about the colour and wrong about the
   weight: `--phosphor` is what a FINISHED course is drawn in, and an available
   one drawn in the same blue is a state that no longer says anything.

   So: one step between them, defined here because it is a correction and not a
   palette. It clears 4.5:1 in both themes, against the page and against the
   certificate's own sheet, and it stays visibly below `--phosphor`, which keeps
   done, current and available three different things.

     dark  #4f7de0 — 4.92:1 on #0a0e14, 4.57:1 on the sheet
     light #4468c4 — 4.74:1 on #f2f4f9, 5.22:1 on white

   Every accessibility rule here is a rule and not a preference (X-05), so this
   is not optional and the copy is not "byte for byte" in effect. It is the one
   divergence, it is listed here, and it is small enough to re-apply if the file
   is copied again. */
:root{--phosphor-mid:#4f7de0}
html[data-theme="light"]{--phosphor-mid:#4468c4}

.rail-tit,
.tc-count,
.ta-num,
.ta-count,
.ts-dur,
.ctx-arrow,
.card-cat,
.course-meta,
.lesson-num,
.lesson-sections,
.step-n,
.node-count,
.course-node .order,
.course-node .meta,
.eyebrow,
.track-summary i,
.cert-meta,
.cert-code,
.node-state[data-state="available"],
.field label,
/* THE EXAM PAPER'S OWN, and they are on this list for the reason the rest are:
   small mono text in `--phosphor-dim`. They arrive late because that screen
   could not be opened, and the first axe run that reached it reported them on
   every question of the paper.

   `.expr-label` is here without having been reported. It is the same colour at
   the same size, on the same screen, and it only stayed quiet because it is
   drawn for an expression question that names a `checkOperation` and the
   fixture's does not. Waiting for a fixture to grow that field before fixing a
   colour that is already wrong is how the other two got this far. */
.wz-count,
.ex-label,
.expr-label{color:var(--phosphor-mid)}
/* `.cert-meta` and `.cert-code` are on the certificate sheet, which paints its
   own background (#111721 dark, #ffffff light), so they are measured against
   that and not the page. `.cert-void .cert-code` keeps its struck-through grey
   — two classes beat one, and a revoked code should not read as an accent. */

/* ---------- AND THE SAME DEFECT AGAIN, AS OPACITY ----------

   `.cert-sample{opacity:.66}` dims the example certificate so that a fake
   cannot be mistaken for a real one — which is right, and is done three ways:
   a dashed frame, a muted colour and a seal in place of the type.

   OPACITY ON TEXT IS NOT A COLOUR. It multiplies every colour inside against
   whatever is behind, so the sample's own `--paper-dim` came out at 3.59:1 on
   the dark page and 2.94:1 on the light one. This repository has met that exact
   failure before, and the answer is the same: dim by naming the colour, never
   by fading the element.

   The frame and the seal still carry the meaning, which is what the portal's
   own comment says they are for. */
.cert-sample{opacity:1}
.cert-sample .cert-sheet,
.cert-sample .cert-brand b,
.cert-sample .cert-seal,
.cert-sample .cert-line{color:var(--paper-dim)}

/* ---------- AND THE SAME DEFECT TWICE MORE, ON SCREENS NOBODY COULD REACH ----

   Everything below was found the week the accessibility suite stopped checking
   the router's "page not found" and started checking the lesson and the exam.
   None of it is new; all of it had been shipping.

   `.step-pending` and `.rail-section.pending` dim a whole block to say
   "reserved, nothing to do here yet" and take their own title through the floor
   doing it. `--paper-dim` is 7.34:1 in the dark theme and 5.56:1 in the light
   one — comfortable — and at .55 it composites to 2.97:1 and 2.28:1.

   RAISING THE FIGURE DOES NOT RESCUE IT: in the light theme `--paper-dim` needs
   .95 before it passes, which is not dimming at all, and `--paper` at .6 still
   only reaches 3.97:1. So the block is quietened by colour — a border that
   recedes, a mark that goes grey — and the text keeps a value somebody
   measured. It looks the same and it can be read.

   These lived in `portal.css` for one release, which was a mistake worth
   naming: that file is the portal's byte for byte, and the whole reason the
   duplicated-stylesheet bug was findable at all is that a diff of it is empty.
   An accessibility divergence belongs on this list, where it is argued once and
   can be re-applied after the next copy. */
.step-pending{opacity:1;border-color:var(--wire)}
.step-pending .step-title,
.step-pending .step-n{color:var(--paper-dim)}
.step-pending:hover .step-title{color:var(--paper)}

.rail-section.pending{opacity:1}
.rail-section.pending .ts-title,
.rail-section.pending .ts-mark{color:var(--paper-dim)}
.rail-section.pending:hover .ts-title{color:var(--paper)}

/* THE THIRD SHAPE OF IT, on the matching question: a paired right-hand tile is
   faded to .65 to say it has been used, which puts its own text at 4.4:1 on the
   light theme. Same answer as the other two — the tile keeps its tint and its
   border, and the words go to a colour. */
.tile-right{opacity:1;color:var(--paper-dim)}

/* ---------- A TARGET BIG ENOUGH TO HIT ----------

   WCAG 2.2 adds 2.5.8: a control is at least 24 by 24, or has that much clear
   space around it. The ordering question's move-up and move-down buttons are 24
   by 18 and stacked against each other, so they fail on both counts — and they
   are the KEYBOARD AND POINTER path for that question, the thing that exists so
   ordering is not drag-and-drop. A control that only a steady hand can hit is
   the defect this question type was designed to avoid, arriving by the back
   door.

   Six pixels, on the axis they were short. */
.ord-arrow{height:24px}

/* ---------- THE DRILL ----------

   A screen the portal does not have, so there is nothing to override here and
   nothing to keep in step: these are new rules for a new screen, written in the
   vocabulary the copied stylesheet already uses. Kept as small as it looks —
   the question itself is drawn by the same renderers the lesson and the exam
   use, and it brings its own styling with it. What is left is the frame around
   one card. */
.drill{display:flex;flex-direction:column;gap:14px}
.drill-count{
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--phosphor-mid);margin:0;
}
.drill-stage{min-height:120px}
.drill-foot{display:flex;justify-content:flex-end}
.drill-done{margin:0 0 6px}