/* ══ Make it yours, the page (2026-09-09) ══
   One column, straight down: who it is for, the print (what your class
   will see, the question on a sanded plank you can change), one red
   TRY IT with the two quieter doors beside it, and More folded under a
   dashed rule. Chromebook-first: the whole path to TRY IT fits in 768px. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--t-body);
  font-weight: 500;
  background: var(--t-gesso);
  color: var(--t-ink);
  min-height: 100vh;
}

.make-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px 0;
}

.wordmark { display: flex; gap: 6px; align-items: center; text-decoration: none; }

.wordmark-jam,
.wordmark-yard {
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 5px 11px 6px;
  box-shadow: 0 3px 4px rgba(50, 35, 15, 0.24);
  display: inline-block;
}

.wordmark-jam { color: var(--t-ink); background: var(--t-birch); background-image: var(--t-grain); transform: rotate(-1.2deg); }
.wordmark-yard { color: var(--t-paper); background: var(--t-red); transform: rotate(1deg); }

.back-link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-muted);
  text-decoration: none;
}

.back-link:hover { color: var(--t-ink); }

/* ── The column ─────────────────────────────────────────────────────── */

.make-page {
  width: min(780px, calc(100vw - 48px));
  margin: 24px auto 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.make-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.name-chip {
  margin: 0;
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--t-paper);
  background: var(--t-magenta);
  padding: 4px 14px 6px;
  transform: rotate(-1.2deg);
  box-shadow: 0 3px 4px rgba(50, 35, 15, 0.28);
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The class picker keeps the shared sheet's look (a paper box with its
   chips); it sits inside More, above the questions it shapes */
.class-holder .class-picker { margin: 0; }

/* ── The print ──────────────────────────────────────────────────────── */

.print-wrap { position: relative; }

/* A class example already filled in (the yard's card, 2026-09-24): one
   line under the print saying so, with the way back to the template's words */
.example-note {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--t-muted);
}
.example-note a {
  font-weight: 700;
  color: var(--t-ink);
  text-underline-offset: 3px;
}
.example-note button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--t-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.print-label {
  position: absolute;
  top: -15px;
  left: 20px;
  z-index: 2;
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-ink);
  background: var(--t-yellow);
  padding: 6px 11px 7px;
  transform: rotate(-1.4deg);
  box-shadow: 0 3px 4px rgba(50, 35, 15, 0.22);
}

.print-paper {
  background: var(--t-paper);
  padding: 14px;
  box-shadow: 0 4px 8px rgba(50, 35, 15, 0.26);
  transform: rotate(-0.3deg);
  position: relative;
}

.print-screen {
  background: var(--t-gesso);
  min-height: 290px;
  padding: 30px 34px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.is-opening .print-screen { opacity: 0.55; }

.print-mark {
  position: absolute;
  top: 11px;
  right: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C9BBA0;
}

.print-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-muted-caps);
}

/* The question: a sanded plank with a pencil line, the bold box inside */
.plank {
  align-self: flex-start;
  max-width: 600px;
}

.print-prompt,
.print-field-label {
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.1;
  color: var(--t-ink);
  text-wrap: balance;
}

.print-field-label { font-size: 22px; }

.bold-box.print-prompt,
.bold-box.print-field-label {
  background: var(--t-sanded);
  background-image: var(--t-grain);
  padding: 8px 12px 10px;
  border-bottom: 3px dashed rgba(110, 75, 40, 0.45);
  transform: rotate(0.4deg);
  outline: none;
  min-width: 240px;
  cursor: text;
}

.bold-box.print-prompt:focus,
.bold-box.print-field-label:focus { outline: 3px solid var(--t-ink); outline-offset: 2px; }

/* The template's own words, when they are not the teacher's to change */
.print-prompt-fixed { align-self: flex-start; max-width: 600px; }

.print-prompt .prompt-bold,
.print-field-label .prompt-bold,
.print-instruction .prompt-bold { background: var(--t-yellow); padding: 0 4px; }

.print-fields { display: flex; flex-direction: column; gap: 12px; }
.print-field { display: flex; flex-direction: column; gap: 6px; }
.print-field-line { width: 260px; height: 0; border-bottom: 2px dashed rgba(110, 75, 40, 0.3); margin-left: 4px; }

.print-instruction {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--t-muted);
  max-width: 460px;
}

/* A rating step's scales on the print: one card a scale, the student
   screen's shape (name, end words, a row of numbers), the name and the
   end words as boxes with a dashed line under, an x in the corner */
.print-scales { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.print-scales[hidden] { display: none; }
.print-scale-list { display: flex; flex-direction: column; gap: 10px; }
.print-scale {
  position: relative;
  padding: 12px 40px 12px 14px;
  background: var(--t-paper);
  box-shadow: 0 2px 3px rgba(50, 35, 15, 0.22), 0 0 0 2px var(--t-ink);
}
.print-scale-label, .print-scale-end {
  display: block;
  border: 0;
  border-bottom: 2px dashed rgba(110, 75, 40, 0.35);
  background: transparent;
  color: var(--t-ink);
  outline: none;
  min-width: 0;
}
.print-scale-label {
  width: 100%;
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 20px;
  padding: 2px 4px 4px;
  margin-bottom: 8px;
}
.print-scale-label:focus, .print-scale-end:focus { border-bottom-color: var(--t-ink); background: var(--t-sanded); }
.print-scale-ends { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; padding: 0 2px; }
.print-scale-end { width: 46%; font-size: 14px; color: var(--t-muted, #6b5a48); padding: 1px 4px 3px; }
.print-scale-end-high { text-align: right; }
.print-scale-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.print-rate-btn {
  flex: 1;
  min-width: 36px;
  padding: 9px 0;
  text-align: center;
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--t-paper);
  /* the activity's own red: the student screen's rate buttons */
  background: var(--t-red, #E5482B);
  clip-path: polygon(2% 6%, 98% 0, 100% 94%, 0 100%);
}
.print-scale-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--t-sanded);
  color: var(--t-ink);
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
}
.print-scale-x:hover { background: var(--t-yellow); }
.print-scale-x:focus-visible { outline: 3px solid var(--t-ink); outline-offset: 2px; }
.print-scale-add {
  align-self: flex-start;
  border: 0;
  background: transparent;
  font-family: var(--t-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--t-ink);
  padding: 4px 2px;
  cursor: pointer;
  border-bottom: 2px dashed rgba(110, 75, 40, 0.35);
}
.print-scale-add:hover { border-bottom-color: var(--t-ink); }

.print-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 560px; }

.print-choice {
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--t-paper);
  padding: 11px 14px 12px;
  clip-path: polygon(2% 6%, 98% 0, 100% 94%, 0 100%);
}

/* The chip as a box to type in: the same paint and cut, a paper ring
   when it has focus (an outline would be clipped away) */
.print-choice-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  outline: none;
  cursor: text;
  min-width: 0;
}
.print-choice-input:focus { box-shadow: inset 0 0 0 3px var(--t-paper); }
.print-choice-input::placeholder { color: rgba(253, 249, 240, 0.7); }

.choice-0 { background: var(--t-cyan); transform: rotate(-0.6deg); }
.choice-1 { background: var(--t-magenta); transform: rotate(0.5deg); }
.choice-2 { background: var(--t-orange); transform: rotate(0.6deg); }
.choice-3 { background: var(--t-green); transform: rotate(-0.5deg); }

.print-audience {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--t-muted);
}

.print-description { font-size: 17px; line-height: 1.5; color: var(--t-muted); max-width: 520px; margin: 0; }

.print-timer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
}

.timer-chip {
  border: none;
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--t-ink);
  background: var(--t-yellow);
  background-image: var(--t-grain);
  padding: 8px 16px;
  transform: rotate(-1.5deg);
  box-shadow: 0 4px 6px rgba(50, 35, 15, 0.25);
  cursor: pointer;
  transition: transform var(--t-quick) var(--t-ease);
}

.timer-chip:hover:not(:disabled) { transform: rotate(-1.5deg) translateY(-3px); }
.timer-chip:disabled { cursor: default; }
.timer-chip:focus-visible { outline: 3px solid var(--t-ink); outline-offset: 2px; }
.timer-chip[hidden] { display: none; }

.timer-input {
  width: 84px;
  padding: 8px 10px;
  border: none;
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--t-ink);
  background: var(--t-sanded);
  background-image: var(--t-grain);
  border-bottom: 3px dashed rgba(110, 75, 40, 0.45);
}

.timer-note {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-muted-caps);
}

/* The seconds after a door */
.opening {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  filter: drop-shadow(4px 5px 0 rgba(80, 60, 30, 0.18));
  z-index: 3;
}

.opening[hidden] { display: none; }

.opening-pile { display: flex; align-items: flex-end; gap: 4px; height: 40px; }

.opening-block {
  display: block;
  width: 28px;
  background-image: var(--t-grain);
  animation: land 180ms var(--t-ease) both;
}

.opening-block.b1 { height: 24px; background-color: var(--t-cyan); --r: -2deg; }
.opening-block.b2 { height: 32px; background-color: var(--t-yellow); --r: 1.5deg; animation-delay: 120ms; }
.opening-block.b3 { height: 38px; background-color: var(--t-magenta); --r: -1deg; animation-delay: 240ms; }
.opening-block.b4 { height: 28px; background-color: var(--t-green); --r: 2deg; animation-delay: 360ms; }

@keyframes land {
  from { transform: translateY(-16px) rotate(var(--r)); opacity: 0; }
  to { transform: translateY(0) rotate(var(--r)); opacity: 1; }
}

.opening-card {
  background: var(--t-yellow);
  padding: 14px 20px 15px;
  transform: rotate(-1.2deg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 360px;
  text-align: center;
}

.opening-title { font-family: var(--t-display); font-weight: 800; font-size: 19px; line-height: 1.2; color: var(--t-ink); }
.opening-text { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--t-ink); }

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

/* ── The doors: the big red hosts (owner's call, 2026-09-16), the side
   door tries it out with pretend students ─────────────────────────── */

/* One line: the big door, the side door, the designer link (owner,
   2026-09-16: the link sat on its own row under the doors), and the
   note or the error on a full-width row of their own beneath. A grid,
   so the row count never depends on the text widths; under 700px it
   stacks (media rule below). */
.doors {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
}

.big-col { display: flex; flex-direction: column; align-items: center; }

.big-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(6px 8px 0 rgba(80, 60, 30, 0.14));
}

.big-btn {
  width: 264px;
  padding: 17px 0 19px;
  border: none;
  background: var(--t-red);
  color: var(--t-paper);
  text-align: center;
  clip-path: polygon(0 4%, 100% 0, 99% 96%, 1% 100%);
  transform: rotate(-1.2deg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  transition: transform var(--t-quick) var(--t-ease);
}

.big-btn:hover:not(:disabled) { transform: rotate(-1.2deg) translateY(-5px); }
.big-btn:active:not(:disabled) { transform: rotate(-1.2deg); }
.big-btn:disabled { opacity: 0.55; cursor: default; transform: rotate(-1.2deg) translate(2px, 2px); }
.big-btn:focus-visible { outline: 3px solid var(--t-ink); outline-offset: 3px; }

.big-word { font-family: var(--t-display); font-weight: 800; font-size: 28px; letter-spacing: 0.06em; text-transform: uppercase; }
/* Under the base, on gesso: paper on red is too faint at this size (axe) */
/* Outside the stack's drop-shadow wrapper on purpose: a transparent
   element inside it renders a ghost twin (Totem gotcha) */
.big-sub { margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-muted-caps); }

.big-plinth { display: block; width: 100px; height: 26px; background: var(--t-walnut); background-image: var(--t-grain); margin-top: -4px; }
.big-base { display: block; width: 250px; height: 12px; background: var(--t-base); background-image: var(--t-grain); }

.side-btn {
  margin-top: 14px;
  border: none;
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-ink);
  background: var(--t-paper);
  padding: 9px 14px 10px;
  box-shadow: 0 3px 4px rgba(50, 35, 15, 0.22);
  white-space: nowrap;
  transform: rotate(0.6deg);
  cursor: pointer;
  transition: transform var(--t-quick) var(--t-ease);
}

.side-btn:hover:not(:disabled) { transform: rotate(0.6deg) translateY(-4px); }
.side-btn:disabled { opacity: 0.5; cursor: default; }
.side-btn:focus-visible { outline: 3px solid var(--t-ink); outline-offset: 2px; }

/* Level with the side door's text: same top margin, the button's own
   vertical padding */
.designer-link,
.cancel-link {
  margin-top: 14px;
  padding: 10px 0 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--t-muted);
}

.designer-link:hover, .cancel-link:hover { color: var(--t-ink); }
body.is-opening .designer-link, body.is-opening .side-btn { display: none; }

/* On its own line under the doors, never wrapped to the far right */
.doors-note {
  grid-column: 1 / -1;
  margin-top: 12px;
  max-width: 440px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--t-ink);
}

.doors-note[hidden] { display: none; }
/* Where the copy goes: quieter than the fit note, always on */
.keep-note { font-weight: 500; color: var(--t-muted); margin-top: 8px; }
.keep-note-ok { border: none; background: none; padding: 0 0 0 6px; font: inherit; font-weight: 800; color: var(--t-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* The first-run line from the home's Start here card: yellow, the "now" paint */
.start-note {
  background: var(--t-yellow);
  padding: 9px 13px 10px;
  font-weight: 600;
  transform: rotate(-0.4deg);
}
.start-note strong { font-weight: 800; }

.make-error {
  margin: 0;
  padding: 10px 14px;
  background: var(--t-paper);
  box-shadow: 0 0 0 2px var(--t-red);
  font-size: 14px;
  font-weight: 700;
  color: var(--t-ink);
}

/* ── A recipe's setup panel, on the page ────────────────────────────── */

.panel-section { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 2px dashed rgba(110, 75, 40, 0.2); }
.panel-section[hidden] { display: none; }
.fit-section[hidden], .map-section[hidden] { display: none; }

/* What happens: the map on its own paper card, under the doors */
.map-section { padding-top: 18px; border-top: 2px dashed rgba(110, 75, 40, 0.2); display: flex; flex-direction: column; gap: 4px; }
.map-section .amap { background: var(--t-paper); padding: 6px 16px 2px; box-shadow: 0 3px 5px rgba(50,35,15,0.2); margin-top: 8px; }

.panel-heading {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-muted-caps);
}

/* The dialog's modal, as a paper card in the flow */
.make-panel.template-picker-modal {
  position: static;
  width: auto;
  max-width: none;
  max-height: none;
  overflow: visible;
  padding: 22px 26px 24px;
  box-shadow: 0 3px 4px rgba(50, 35, 15, 0.2);
}

/* ── The questions of a talk-only activity, tier by tier, in one fold ── */
.talk-section { padding-top: 18px; border-top: 2px dashed rgba(110, 75, 40, 0.2); }
.talk-section[hidden] { display: none; }

.fold summary {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-muted-caps);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary::before { content: '+'; display: inline-block; width: 1.2em; color: var(--t-red-text); }
.fold[open] summary::before { content: '\2013'; }
.fold summary:hover { color: var(--t-ink); }
.fold summary:focus-visible { outline: 3px solid var(--t-ink); outline-offset: 4px; }

.talk-card {
  margin-top: 12px;
  padding: 18px 22px 20px;
  background: var(--t-paper);
  box-shadow: 0 4px 6px rgba(50, 35, 15, 0.22);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.talk-tier h3 {
  margin: 0 0 6px;
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 14px;
}

.talk-tier ol {
  margin: 0;
  padding-left: 22px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.talk-tier li { margin: 4px 0; }

/* ── The pairs: a matching activity's rounds, editable ──────────────── */

.pairs-section { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 2px dashed rgba(110, 75, 40, 0.2); }
.pairs-section[hidden] { display: none; }

.pairs-card {
  padding: 18px 22px 20px;
  background: var(--t-paper);
  box-shadow: 0 4px 6px rgba(50, 35, 15, 0.22);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pair-round { display: flex; flex-direction: column; gap: 8px; }
.pair-round + .pair-round { padding-top: 14px; border-top: 2px dashed rgba(110, 75, 40, 0.2); }
.pair-round-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pair-round-label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-muted-caps); }
/* A round the teacher added: a yellow label, a "drop this round" x */
.pair-round-new .pair-round-label { color: var(--t-ink); background: var(--t-yellow); background-image: var(--t-grain); padding: 4px 8px 5px; transform: rotate(-1deg); }
/* The scales panel: a scale is a name and a range on one line, its two
   end labels on the next */
.pair-row.scale-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.scale-top, .scale-ends { display: flex; align-items: center; gap: 8px; }
.pair-input.scale-label { flex: 1; width: auto; min-width: 0; }
.pair-input.scale-num { flex: none; width: 62px; text-align: center; }
.scale-to { flex: none; font-size: 13px; font-weight: 700; }
.scale-ends { padding-left: 4px; }
.pair-input.scale-end { flex: 1; width: auto; min-width: 0; font-size: 0.92em; }
.scale-row + .scale-row { padding-top: 8px; border-top: 1px dashed rgba(110, 75, 40, 0.18); }
.panel-hint { margin: -6px 0 10px; color: var(--t-muted, #6b5a48); font-size: 0.95rem; }

.pair-add-round { padding-top: 6px; border-top: 2px dashed rgba(110, 75, 40, 0.2); width: 100%; text-align: left; }

/* One pair: the two halves on planks, an equals mark, a small x */
.pair-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.pair-eq { font-family: var(--t-display); font-weight: 800; font-size: 16px; color: var(--t-muted); }

.pair-input {
  width: 100%;
  min-width: 0;
  padding: 9px 12px 8px;
  border: none;
  background: var(--t-sanded);
  background-image: var(--t-grain);
  border-bottom: 3px dashed rgba(110, 75, 40, 0.45);
  font-family: var(--t-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--t-ink);
}

.pair-x {
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: var(--t-muted);
  padding: 6px;
  cursor: pointer;
}

.pair-x:hover { color: var(--t-red-text); }
.pair-x:focus-visible { outline: 3px solid var(--t-ink); outline-offset: 2px; }

.pair-add {
  align-self: flex-start;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--t-muted);
  padding: 4px 0;
  cursor: pointer;
}

.pair-add:hover { color: var(--t-ink); }

/* ── Make it fit your class: rows of chips ──────────────────────────── */

.fit-section {
  padding-top: 18px;
  border-top: 2px dashed rgba(110, 75, 40, 0.2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fit-card {
  padding: 18px 22px 20px;
  background: var(--t-paper);
  box-shadow: 0 4px 6px rgba(50, 35, 15, 0.22);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fit-rows { display: flex; flex-direction: column; gap: 16px; }
/* Two holders inside: the question rows, then the fixed rows (class,
   names, joke), so the questions can be rebuilt without touching the rest */
.fit-rows > div { display: flex; flex-direction: column; gap: 16px; }
.fit-rows > div:empty { display: none; }

/* One row per setting: the question, then the answer as chips (or a
   plank). The question is the only text on the row. */
.fit-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
}

.fit-q {
  font-size: 15px;
  font-weight: 700;
  color: var(--t-ink);
  line-height: 1.3;
}

/* The answer column: chips wrap among themselves, never under the question */
.fit-a {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.fit-row.is-loading { grid-template-columns: minmax(0, 1fr); }
.fit-row.is-loading .fit-q { font-weight: 500; color: var(--t-muted); }

/* A chip: paper at rest, yellow when picked, dashed for "type your own"
   and "not set" */
.fit-chip {
  border: none;
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-ink);
  background: var(--t-paper);
  padding: 8px 12px 9px;
  box-shadow: 0 3px 4px rgba(50, 35, 15, 0.22);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: transform var(--t-quick) var(--t-ease);
}

.fit-chip:hover { transform: translateY(-3px); }
.fit-chip[aria-pressed="true"] { background: var(--t-yellow); background-image: var(--t-grain); }
.fit-chip:focus-visible { outline: 3px solid var(--t-ink); outline-offset: 2px; }
.fit-chip.is-dashed { color: var(--t-muted); background: var(--t-gesso); box-shadow: none; border: 2px dashed rgba(110, 75, 40, 0.35); }
.fit-chip.is-dashed[aria-pressed="true"] { color: var(--t-ink); background: var(--t-yellow); background-image: var(--t-grain); border-color: transparent; }
.fit-chip.is-still { cursor: default; }
.fit-chip.is-still:hover { transform: none; }

/* The small link beside the class chip ("change" / "set it") */
.fit-link { font-size: 13px; font-weight: 700; color: var(--t-muted); }
.fit-link:hover { color: var(--t-ink); }
/* Under the class chip: what a class change did, or could not do (2026-09-26) */
.fit-class-note { flex-basis: 100%; margin: 6px 0 0; font-size: 13px; color: var(--t-muted); }

/* A typed answer: the plank sits in its row, the mic on it (a full
   row when it follows a "Type your own" chip) */
.fit-plank {
  flex: 1 1 320px;
  min-width: 0;
  padding: 11px 14px 9px;
  border: none;
  background: var(--t-sanded);
  background-image: var(--t-grain);
  border-bottom: 3px dashed rgba(110, 75, 40, 0.45);
  font-family: var(--t-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--t-ink);
  resize: vertical;
}

.fit-plank[hidden] { display: none; }
.fit-row .mic-wrap { flex: 1 1 320px; min-width: 0; }
.fit-row .mic-wrap[hidden] { display: none; }
.fit-row .mic-wrap .fit-plank { width: 100%; }
.fit-row.answered .fit-plank { box-shadow: 0 0 0 2px var(--t-green); }

.class-holder[hidden] { display: none; }

/* "See how it reads": one AI fit on demand, the note beside it says
   what happened. It sits under the question's box, in the answer
   column (the label column's width plus the row gap), before the other
   rows; `.fit-rows > div` would stack it, so the row rule is restated */
.fit-rows > .fit-foot, .fit-foot { display: flex; flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: 204px; }
.fit-foot[hidden] { display: none; }
.fit-see:disabled { opacity: 0.6; cursor: default; }
.fit-see:disabled:hover { transform: none; }
.fit-note { font-size: 13px; font-weight: 500; color: var(--t-muted); }

@media (max-width: 700px) {
  .make-header { padding: 14px 20px 0; }
  .print-screen { padding: 22px 20px 18px; }
  .print-prompt { font-size: 26px; }
  .big-btn { width: 100%; }
  .big-stack, .big-col { width: 100%; }
  .doors { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .fit-rows > .fit-foot { margin-left: 0; }
  .designer-link, .cancel-link { white-space: normal; margin-top: 4px; }
  .fit-row { grid-template-columns: minmax(0, 1fr); }
}

/* ── The bold box on the plank (shared/bold-box.js; its base styles live
   in the editor's sheet, so the page carries the few it needs) ─────── */
.bold-box-wrap { position: relative; }
/* Under 700 on purpose: at 700 the browser reads the box as already bold
   and its bold command toggles OFF (standing gotcha, bold-box 2026-09-03). */
.bold-box.print-prompt, .bold-box.print-field-label { font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
[data-bold-box]:empty::before { content: attr(data-placeholder); color: #8A7B62; pointer-events: none; }
[data-bold-box] b, [data-bold-box] strong { font-weight: 800; }
.bold-box-tool {
  position: absolute;
  right: 8px;
  bottom: 6px;
  display: none;
  width: 26px;
  height: 24px;
  padding: 0;
  border: none;
  background: var(--t-ink);
  color: var(--t-paper);
  font-family: var(--t-display);
  font-weight: 800;
  font-size: 13px;
  line-height: 24px;
  cursor: pointer;
}
.bold-box-wrap:focus-within .bold-box-tool { display: inline-block; }

/* The one action inside an error: open the copy without the AI fit */
.make-error .error-action {
  margin-left: 8px;
  padding: 4px 10px;
  font: inherit;
  font-weight: 800;
  color: var(--t-ink);
  background: var(--t-cream, #FFF9C4);
  border: 2px solid var(--t-ink);
  cursor: pointer;
}
.make-error .error-action:hover { background: var(--t-yellow, #FFD600); }

/* The talk questions, editable (owner 2026-09-26): a box per question, an x,
   "+ question" per tier, and a chip saying who the tier pairs you with. */
.talk-tier-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.talk-tier-head h3 { margin: 0; }
.talk-partner { font-size: 13px; font-weight: 500; color: var(--t-muted); }
.talk-list { list-style: decimal; margin: 0; padding-left: 26px; display: flex; flex-direction: column; gap: 8px; }
.talk-q { display: flex; align-items: center; gap: 8px; }
.talk-input { flex: 1 1 auto; min-width: 0; padding: 9px 12px 7px; border: none; background: var(--t-sanded, #EAD9BA); background-image: repeating-linear-gradient(92deg, rgba(110,75,40,0.10) 0 1px, transparent 1px 6px); border-bottom: 3px dashed rgba(110,75,40,0.45); font: inherit; font-size: 15px; font-weight: 500; color: var(--t-ink); resize: none; }

/* "Want the pairs written for you?" over a matching activity's rounds */
.pair-writer { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 2px dashed rgba(110, 75, 40, 0.2); }
.pair-writer-label { font-weight: 700; }
.pair-writer-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pair-writer-topic { flex: 1 1 260px; min-width: 0; padding: 9px 12px 7px; border: none; background: var(--t-sanded, #EAD9BA); background-image: repeating-linear-gradient(92deg, rgba(110,75,40,0.10) 0 1px, transparent 1px 6px); border-bottom: 3px dashed rgba(110,75,40,0.45); font: inherit; font-size: 15px; font-weight: 500; color: var(--t-ink); resize: none; }
.pair-writer-note { margin: 0; font-size: 13px; color: var(--t-muted); }

/* The question library over the tiers (owner 2026-09-26): one row of sets,
   tap one and every tier fills from it; a credit line for the Along sets. */
.talk-sets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
/* A talk-only print is one line: no tall card under it */
.print-screen.print-talk { min-height: 0; padding: 22px 30px 22px; }
.print-screen.print-talk .print-prompt-fixed { font-size: 1.6rem; }
.talk-sets-label { font-size: 13px; font-weight: 700; color: var(--t-muted); margin-right: 4px; }
.talk-library-set { border: none; cursor: pointer; padding: 5px 11px; font: inherit; font-size: 13px; font-weight: 600; background: var(--t-paper); color: var(--t-ink); box-shadow: 0 2px 3px rgba(50, 35, 15, 0.16); }
.talk-library-set.is-on { background: var(--t-yellow); }
.talk-library-credit { margin: 0; font-size: 12px; color: var(--t-muted); }
.talk-library-credit[hidden] { display: none; }

/* A long question shows smaller on the projector: the note appears under
   the box past the length where the projector shrinks it (2026-09-27) */
.long-note { font-size: 13px; font-weight: 500; color: var(--t-muted); margin: 6px 0 0; }
.long-note[hidden] { display: none; }