/* ===========================================================================
   THE INTERFACE.
   Everything a teacher touches: the panel of lessons, the activity headings,
   the tick box on every chunk, the level mark, the buttons. None of this
   reaches paper, and none of it comes from a lesson file — a lesson file holds
   content and nothing else.

   The look of the material itself is in lesson.css. This file never says how a
   task, a table or a figure looks.

   The shape of the page: a panel of lessons down the left that can be pushed
   out of the way, and the lesson on a white sheet in the middle. There is no
   panel across the top and nothing is pinned to the bottom of the window.

   THE ONE RULE THIS FILE FOLLOWS, settled 5 September 2026 (D-154).
   Nothing is a card. The site reads as cheap because everything on it — the
   lesson in the panel, the activity, the task — was a white box with a grey
   border on a grey ground, three of them nested inside each other. What is left
   in their place is space, one weight of hairline, and one white sheet that is
   the lesson. The reference is the side panel of ChatGPT or Claude: lean,
   quiet, nothing decorative.
   =========================================================================== */

:root {
  --ui-font: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

  /* Two grounds and one sheet. The page is faintly tinted so that the sheet the
     lesson sits on reads as a sheet; the panel is tinted a shade further so
     that it recedes behind the lesson. */
  --page-bg: #f2f4f6;
  --panel-bg: #eceff2;
  --sheet: #ffffff;

  --hair: #e4e7ea;          /* the only line weight in the interface */
  --hair-strong: #cfd4d9;   /* a control's own edge, where one is needed */
  --text: #14181c;
  --text-soft: #6b7178;
  --text-faint: #8b9199;
  --hover: #e4e8eb;
  /* What the teacher has taken. It was a dark green until 7 September 2026; to a
     mathematics teacher a green tick means "correct", and here it means "I am
     taking this one", which is a different thing (D-209). It never reaches the
     sheet: neither print.css nor lesson.css mentions it. */
  --chosen: #0f5a66;
  --chosen-soft: #e8f1f3;
  --warn: #8a3b12;
  --mark: #fdf3c9;          /* the word the search matched */
  --radius: 8px;
  /* A lesson's name gets this width less the panel's own margin, the step in to
     a lesson, the row's padding and the scrollbar. At 268 that left 169 points,
     about 28 characters, and the middle name in the course is 39 — so nineteen
     of twenty names broke onto a second line and the longest onto a third. At
     340 no name in the course took three lines and about half took one; at 420
     nine names in ten stand on a single line (D-239, then widened again on her
     word the same day). */
  --panel-width: 420px;

  /* The material is set at the paper's own width, so that a line breaks on
     screen where it will break on the sheet (D-156). 180 mm is the text column
     of the appearance standard. */
  --paper-column: 180mm;
}

* {
  box-sizing: border-box;
}

/* Every tick box on the site is the one accent colour. Left alone, a tick box is
   drawn in whatever blue the browser happens to use — a colour the site never
   chose, different in Chrome, Firefox and Safari, and the only thing on a quiet
   grey page that nobody had decided (D-209). The tick a teacher puts on a task
   is drawn by the site itself and was already the accent; these are her own tick
   boxes — "Same practice at every level" and the three about paper — and they
   now match it. */
input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--chosen);
}

/* Anything the page hides stays hidden, whatever else this file says. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--ui-font);
  color: var(--text);
  background: var(--page-bg);
  font-size: 16px;
  line-height: 1.5;
}

.ic {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--text-faint);
}

/* --- the shape of the page ----------------------------------------------- */

.shell {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

.main-column {
  flex: 1 1 auto;
  min-width: 0;
}

.wrap {
  max-width: 872px;
  margin: 0 auto;
  padding: 0 24px 72px;
}

/* --- the panel of lessons ------------------------------------------------ */

.side-panel {
  flex: 0 0 var(--panel-width);
  width: var(--panel-width);
  align-self: stretch;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--panel-bg);
  padding: 15px 10px 14px 16px;
  display: flex;
  flex-direction: column;
  font-size: 13.5px;
}

/* The name of the site is the way home. There is no separate Home row: a
   heading that goes home is what every site of this shape does, and it saves a
   line on every screen. */
.site-title {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  padding: 0 8px 0 2px;
}

.site-title a {
  color: inherit;
  text-decoration: none;
}

/* The emblem stands before the name, in the panel and at the head of the front
   page, so the line begins with the mark and the words follow it. It is set on
   the text's own baseline rather than centred on the line, because a mark that
   floats above the letters reads as a bullet and not as part of the name. */
.emblem {
  vertical-align: -0.22em;
  margin-right: 8px;
  flex: 0 0 auto;
}

.emblem-big {
  vertical-align: -0.16em;
  margin-right: 11px;
}

.site-title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The arrow that hides the panel. It lives in the middle column rather than in
   the panel, because it has to be pressable when the panel is not there. */
.panel-control {
  margin: 0;
  padding: 14px 0 0 12px;
}

.panel-control button {
  border: 0;
  background: transparent;
  border-radius: 6px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-faint);
  padding: 0;
}

.panel-control button:hover {
  background: var(--hover);
  color: var(--text);
}

.panel-control .arrow {
  transform: rotate(180deg);
  transition: transform 0.12s;
}

.shell.panel-shut .panel-control .arrow {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .panel-control .arrow {
    transition: none;
  }
}

/* --- the search ---------------------------------------------------------- */

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 6px 8px 6px 10px;
  margin: 0 8px 14px 0;
}

.search-box:focus-within {
  border-color: var(--hair-strong);
}

.search-box input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--text);
  padding: 1px 0;
}

.search-box input:focus {
  outline: none;
}

.search-box input::-webkit-search-cancel-button {
  display: none;
}

.search-icon {
  display: grid;
  place-items: center;
}

#search-clear {
  border: 0;
  background: transparent;
  padding: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-faint);
  border-radius: 4px;
}

#search-clear:hover {
  background: var(--hover);
  color: var(--text);
}

/* --- the list of lessons: subject, then unit, then lesson ---------------- */

/* A folder at any level. The site does not know how many levels there are —
   it folds whatever folders a lesson happens to sit in. */
.folder {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
}

.folder:hover {
  background: var(--hover);
}

.folder.depth-0 {
  font-weight: 650;
  font-size: 14px;
}

/* A unit stands level with the subject above it and is told apart by weight, not
   by a step: the course has one subject, so a step there said nothing and cost
   every unit name twelve points of width. The step that carries meaning is the
   one below — a lesson steps in from its unit (D-209). */
.folder.depth-1 {
  padding-left: 8px;
  color: #3d4349;
}

.folder.depth-2 {
  padding-left: 34px;
  color: #3d4349;
}

.folder .chev {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  color: var(--text-faint);
  transition: transform 0.12s;
}

.folder[aria-expanded='true'] .chev {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .folder .chev {
    transition: none;
  }
}

/* Lessons are stepped in further than any folder, carry a dot of their own and
   have a line running down beside them, so that a lesson can never be taken for
   a unit. That confusion was the one thing wrong with the first drawing of this
   panel. */
.lesson-list {
  margin: 1px 0 6px 24px;
  padding-left: 10px;
  border-left: 1px solid var(--hair);
}

.lesson-row {
  position: relative;
  display: block;
  padding: 5px 8px 5px 15px;
  border-radius: 6px;
  color: #4a5057;
  text-decoration: none;
  line-height: 1.35;
}

.lesson-row::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c3c8cd;
}

.lesson-row:hover {
  background: var(--hover);
}

.lesson-row.current {
  background: #dfe4e8;
  color: var(--text);
  font-weight: 600;
}

.lesson-row.current::before {
  background: var(--text-soft);
}

.lesson-row .name {
  display: block;
}

/* Why a lesson turned up when its name does not hold the word. */
.lesson-row .found-in {
  display: block;
  font-size: 11.5px;
  color: var(--text-faint);
  font-weight: 400;
}

.lesson-row.broken {
  color: var(--warn);
  cursor: default;
}

.lesson-row.broken::before {
  background: var(--warn);
}

.lesson-row .broken-why {
  color: var(--warn);
}

mark {
  background: var(--mark);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.nothing-found {
  color: var(--text-faint);
  font-size: 13px;
  padding: 8px 8px 0;
  margin: 0;
}

#lessons[data-searching] {
  opacity: 0.55;
}

/* --- the foot of the panel ----------------------------------------------- */

.panel-foot {
  margin-top: auto;
  padding-top: 12px;
}

.panel-foot .declare {
  border-top: 1px solid var(--hair);
  padding: 12px 8px 10px 2px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text-soft);
}

.declare select {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--hair-strong);
  border-radius: 6px;
  background: var(--sheet);
  width: 100%;
}

/* The two links that belong to the teacher rather than to a lesson. They are at
   the foot on purpose: they are the two things she presses least, and at the top
   they would push the lessons down by two lines on every screen for ever. */
.panel-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  color: #4a5057;
  text-decoration: none;
  border-radius: 6px;
  padding: 7px 8px;
  cursor: pointer;
}

.panel-link:hover {
  background: var(--hover);
  color: var(--text);
}

/* --- the first page ------------------------------------------------------ */

/* The first page carries more than a heading now: who makes this, what a teacher
   can change, what is still missing, and how to say something. It is set at one
   column and a reading width, because it is meant to be read once and then never
   again — a teacher who comes back goes straight to the panel. */
.welcome {
  max-width: 620px;
  margin: 9vh auto 0;
  padding-bottom: 80px;
}

.welcome h1 {
  font-size: 34px;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
}

.welcome section {
  margin: 38px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--hair);
}

.welcome section h2 {
  font-size: 15px;
  font-weight: 650;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.welcome section p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0 0 12px;
}

.welcome section p:last-child {
  margin-bottom: 0;
}

.welcome section b {
  color: var(--text);
  font-weight: 600;
}

.welcome section ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
}

.welcome section li {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-soft);
  padding-left: 18px;
  position: relative;
}

/* The same quiet dot a lesson carries in the panel, so the page and the panel
   are marked the same way. */
.welcome section li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--hair-strong);
}

/* How to say something is the one thing on this page a teacher may act on now,
   so it sits on the sheet's own white instead of on the page's grey. */
.welcome .ask {
  background: var(--sheet);
  border-top: 0;
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-top: 34px;
}

.welcome .ask .how {
  font-size: 13.5px;
  color: var(--text-faint);
}

.welcome .sub {
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0 0 30px;
}

.welcome .steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.welcome .steps li {
  counter-increment: step;
  position: relative;
  padding-left: 35px;
  font-size: 14.5px;
  line-height: 1.5;
}

.welcome .steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--panel-bg);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
  display: grid;
  place-items: center;
}

.welcome .steps span {
  color: var(--text-soft);
}

/* --- a page of plain words ------------------------------------------------ */

.about-page {
  max-width: 620px;
  margin: 6vh auto 0;
  font-size: 15px;
  line-height: 1.65;
}

.about-page h1 {
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.about-page h2 {
  font-size: 15px;
  font-weight: 650;
  margin: 30px 0 4px;
}

.about-page .lead {
  font-size: 16px;
  color: var(--text-soft);
  margin: 0;
}

.about-page p {
  margin: 6px 0 0;
}

/* --- the lesson page ----------------------------------------------------- */

.lesson-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  justify-content: space-between;
  margin: 6px 0 18px;
}

h1.page-title {
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 0;
}

.standards-panel {
  background: var(--sheet);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 15px;
}

.standards-panel h3 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
}

.standards-panel ul {
  margin: 0;
  padding-left: 20px;
}

.standards-panel code {
  font-weight: 700;
  font-family: inherit;
}

/* --- carrying on from last time ------------------------------------------ */

.carry-on {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  background: var(--sheet);
  border-left: 3px solid var(--chosen);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 14px;
}

.carry-on-buttons {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

button.small-action {
  font-size: 13.5px;
  padding: 7px 13px;
  min-height: 36px;
}

/* --- the three presets --------------------------------------------------- */

.presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 8px;
  font-size: 13px;
}

.presets-label {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-soft);
}

/* One control, not three buttons: the three sets are one question with one
   answer, and a row of separate outlines said otherwise. */
.preset-buttons {
  display: inline-flex;
  background: var(--panel-bg);
  border-radius: var(--radius);
  padding: 2px;
  gap: 0;
}

button.preset {
  font: inherit;
  font-size: 13px;
  padding: 6px 16px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: #4a5057;
  min-height: 32px;
}

button.preset:hover {
  color: var(--text);
}

button.preset[aria-pressed='true'] {
  background: var(--sheet);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-weight: 600;
  color: var(--text);
}

/* Said before she presses anything, because the thing she cannot know from
   looking is that a preset is a starting point and not a cage. */
.presets-hint {
  color: var(--text-faint);
  font-size: 12.5px;
}

.presets #clear {
  margin-left: auto;
}

.same-practice {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text-soft);
  margin: 0 0 20px 2px;
  cursor: pointer;
}

.same-practice input {
  width: 15px;
  height: 15px;
  margin: 0;
}

/* --- the sheet the lesson sits on ---------------------------------------- */

/* The sheet is the width of the paper plus its own breathing room, so that it
   reads as a sheet rather than as another panel. */
.sheet {
  background: var(--sheet);
  border-radius: var(--radius);
  /* The white margin either side of the material. It used to run to 72 points,
     which put a hand's width of nothing between the edge of the sheet and the
     word "Warm-up" on one side and the arrows on the other. 44 is enough to keep
     the material off the edge and reads as a margin rather than as a gap. The
     middle term still centres the material when the window is wide, so the text
     column itself is untouched and a line breaks where it breaks on paper. */
  padding: 10px clamp(16px, calc((100% - var(--paper-column)) / 2), 44px) 30px;
}

/* --- an activity: a heading in the flow, not a bar ------------------------ */

.activity + .activity {
  margin-top: 4px;
}

.activity-bar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 0 7px;
  border-bottom: 1px solid var(--hair);
  margin: 26px 0 0;
}

.activity-bar .open-activity {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  padding: 4px 0;
  color: inherit;
}

.activity-bar .marker {
  color: var(--text-faint);
  font-size: 11px;
  width: 0.9em;
  align-self: center;
}

/* How many tasks are in there, and nothing else (D-154). */
.activity-bar .bar-summary {
  font-weight: 400;
  font-size: 12.5px;
  color: var(--text-faint);
}

.activity-bar .count {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--chosen);
}

.move {
  display: flex;
  gap: 2px;
  align-self: center;
}

button.small {
  font: inherit;
  font-size: 13px;
  line-height: 1;
  border: 0;
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  width: 26px;
  height: 26px;
  color: #b6bcc2;
}

button.small:hover:not(:disabled) {
  background: var(--panel-bg);
  color: var(--text);
}

button.small:disabled {
  opacity: 0.35;
  cursor: default;
}

.activity-body {
  padding: 0;
}

.style-picker {
  display: inline-flex;
  background: var(--panel-bg);
  border-radius: var(--radius);
  padding: 2px;
  margin: 14px 0 4px;
}

.style-picker button {
  font: inherit;
  font-size: 12.5px;
  padding: 5px 13px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: #4a5057;
}

.style-picker button[aria-pressed='true'] {
  background: var(--sheet);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-weight: 600;
  color: var(--text);
}

.style-picker .taken {
  font-size: 11.5px;
  color: var(--chosen);
}

/* --- a task: no frame, one hairline between it and the next --------------- */

.chunk {
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--hair);
  /* The whole task takes and gives back the task, not only its tick box, so the
     pointer says so anywhere on it. */
  cursor: pointer;
}

.activity-body .chunk:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}

.chunk-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 9px;
}

.chunk-take {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-faint);
  padding: 2px 0;
  cursor: pointer;
  text-align: left;
}

.chunk-take:hover {
  color: var(--text);
}

.chunk-take .box {
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--hair-strong);
  border-radius: 4px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  background: var(--sheet);
  color: transparent;
}

/* A TAKEN TASK IS MARKED WITHOUT BEING PUT IN A BOX (D-209).

   The tick and the word say it, and down a practice of twenty-eight tasks they
   were not enough to see at a glance which were taken. A frame would have been:
   nothing on this site is a card, and there is one weight of hairline. So a rule
   down the left edge and a tint too faint to read as a panel.

   The negative margin and the padding that cancels it are what keep the words
   still: the tint reaches out into the sheet's own margin instead of pushing the
   task's text across, so a taken task and an untaken one begin at the same place
   and a line still breaks where it breaks on the sheet. */
.chunk.chosen {
  background: var(--chosen-soft);
  box-shadow: inset 3px 0 0 var(--chosen);
  /* Square corners, on her word: a rounded corner is what a card has, and the
     tint is meant to be a wash across the task and not a shape sitting on it. */
  margin-left: -12px;
  padding-left: 12px;
  margin-right: -12px;
  padding-right: 12px;
}

.chunk.chosen .chunk-take {
  color: var(--chosen);
  font-weight: 600;
}

.chunk.chosen .chunk-take .box {
  background: var(--chosen);
  border-color: var(--chosen);
  color: #fff;
}

/* The level, at the far side of the same line. It is a fact about the task, so
   it is stated and not decorated: one size, one colour, no hue that could carry
   meaning on its own. It never competes with the task it describes, and it is
   never printed. */
.chunk-level {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
}

.chunk-body {
  overflow-x: auto;
  /* The material at the paper's own width, so a line breaks on screen where it
     breaks on the sheet. Wider than this and the teacher is reading something
     the printer will never produce. */
  max-width: var(--paper-column);
}

/* --- the print controls, after the activities, nothing pinned ------------- */

.print-bar {
  margin-top: 26px;
  background: var(--sheet);
  border-radius: var(--radius);
  padding: 20px 24px 22px;
}

.print-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  align-items: flex-start;
}

.print-options {
  flex: 1 1 330px;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.print-options label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.print-options input {
  margin: 3px 0 0;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.print-options .option-note {
  margin: -3px 0 0 26px;
  color: var(--text-soft);
  font-size: 13px;
}

/* The three actions stand beside the options rather than under them, so that a
   teacher sees at one glance what she is about to print and how. Each says how
   many sheets it will come to, which is the thing she wants most: it is the
   time she will stand at the copier. */
.print-actions {
  flex: 0 1 262px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.print-actions .taken-count {
  font-size: 12.5px;
  color: var(--text-soft);
  margin: 0 0 2px;
}

button.action {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 14px;
  border-radius: 7px;
  border: 1px solid var(--text);
  background: var(--text);
  color: #fff;
  cursor: pointer;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

button.action.quiet {
  background: var(--sheet);
  border-color: var(--hair-strong);
  color: var(--text);
  font-weight: 500;
}

button.action:disabled {
  opacity: 0.4;
  cursor: default;
}

button.action .sheets {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 400;
  color: #c3c8cd;
  white-space: nowrap;
}

button.action.quiet .sheets {
  color: var(--text-faint);
}

/* The standards control sits on the lesson's heading line, where it is about
   the lesson rather than about the paper. */
#standards-toggle {
  background: transparent;
  border-color: transparent;
  color: var(--text-soft);
  font-weight: 500;
  font-size: 13.5px;
  min-height: 34px;
  padding: 6px 10px;
}

#standards-toggle:hover,
#clear:hover:not(:disabled) {
  background: var(--panel-bg);
}

#clear {
  background: transparent;
  border-color: transparent;
  color: var(--text-faint);
  font-weight: 500;
  font-size: 12.5px;
  min-height: 30px;
  padding: 4px 10px;
}

.working {
  font-size: 13.5px;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}

.working .spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--text-soft);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .working .spinner {
    animation: none;
  }
}

.trouble {
  background: #fdf1ea;
  border-left: 3px solid var(--warn);
  color: var(--warn);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 14.5px;
}

.quiet-note {
  color: var(--text-soft);
  font-size: 14px;
}

/* --- telling us what she thinks ------------------------------------------ */

.say-box {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 28, 0.35);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 10;
}

.say-panel {
  background: var(--sheet);
  border-radius: 12px;
  padding: 24px 26px 22px;
  width: min(560px, 100%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22);
}

.say-panel h2 {
  font-size: 19px;
  font-weight: 650;
  margin: 0 0 8px;
}

.say-note {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 16px;
}

.say-panel textarea {
  width: 100%;
  font: inherit;
  font-size: 14.5px;
  padding: 11px 13px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  resize: vertical;
}

.say-left {
  font-size: 12.5px;
  color: var(--text-faint);
  margin: 6px 0 0;
  min-height: 1em;
}

.say-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* --- a window too narrow for a panel beside the tasks -------------------- */

@media (max-width: 820px) {
  .shell {
    display: block;
  }

  .side-panel {
    width: auto;
    height: auto;
    position: static;
    border-bottom: 1px solid var(--hair);
  }

  .wrap {
    padding: 0 12px 48px;
  }

  .sheet {
    padding: 8px 14px 22px;
  }

  .welcome {
    margin-top: 6vh;
  }

  .print-bar {
    padding: 16px;
  }
}

/* THE CLASSROOM ACTIVITIES, at the foot of a lesson (D-287).
   
   A different kind of material from everything above it — things a class does
   rather than writes on — so it is set apart from the sheet rather than on it,
   and it is the last thing on the page because that is the order a teacher
   reads it in: first what the class works through, then what it gets up and
   does.
   
   A lesson with none of them has an empty section here, which shows nothing. */
.classroom-activities:empty {
  display: none;
}

.classroom-activities {
  margin-top: 26px;
  background: var(--sheet);
  border-radius: var(--radius);
  padding: 20px 24px 24px;
}

.classroom-activities h2 {
  margin: 0;
  font-size: 17px;
}

.classroom-activities .what-these-are {
  margin: 6px 0 14px;
  color: var(--text-soft);
  font-size: 14px;
  max-width: 62ch;
}

.classroom-activities ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.classroom-activities li {
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}

.classroom-activities .activity-file {
  font-size: 15px;
  font-weight: 600;
  /* The site has one accent and this is it (D-239). A browser's own blue
     underlined link is the only thing on the page that would not be ours. */
  color: var(--chosen);
  text-decoration: none;
}

.classroom-activities .activity-file:hover,
.classroom-activities .activity-file:focus-visible {
  text-decoration: underline;
}

.classroom-activities .sheets {
  color: var(--text-faint);
  font-size: 13px;
  margin-left: 8px;
}

.classroom-activities .what-it-is {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 14px;
  max-width: 68ch;
}

/* THE TWO QUESTIONS, when the site is asking them (D-285).
   
   It sits where the print bar is, in the same white, because it is part of
   pressing the button and not a thing that happened to the page. It is hidden
   until a teacher presses a download, and on a site that is not asking it is
   not in the page at all. */
.who-you-are {
  margin-top: 26px;
  background: var(--sheet);
  border-radius: var(--radius);
  padding: 20px 24px 24px;
  max-width: 560px;
}

.who-you-are h2 {
  margin: 0;
  font-size: 17px;
}

.who-you-are .why {
  margin: 6px 0 16px;
  color: var(--text-soft);
  font-size: 14px;
}

.who-you-are form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.who-you-are label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
}

.who-you-are input,
.who-you-are select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--hair-strong);
  border-radius: 6px;
  background: #fff;
}

.who-you-are input:focus-visible,
.who-you-are select:focus-visible {
  outline: 2px solid var(--chosen);
  outline-offset: 1px;
}

.who-you-are .trouble {
  margin: 0;
  color: var(--warn);
  font-size: 14px;
}

.who-you-are button {
  align-self: flex-start;
}