/* Expression-of-interest form components — the morning yoga / stretch survey.
 *
 * A separate sheet rather than additions to style.css, matching groups.css:
 * these four components exist for one page that is answered once and then never
 * opened again, and folding them into the sheet every public page loads would
 * charge every visitor for markup only survey respondents ever see.
 *
 * Loaded AFTER style.css and depends on its custom properties (--clr-*,
 * --radius, --font). Nothing here redefines a token — a second definition of
 * --clr-teal in a page-scoped sheet is how one page ends up a different teal
 * from the rest of the site.
 *
 * NO JAVASCRIPT. Every control below is a real checkbox or radio doing its own
 * work, which is what makes the form survive on an old phone, in a mail client's
 * in-app browser, and with scripting blocked — all three of which are how a
 * meaningful share of a 1,500-person mailout will open this link.
 */

/* ---------------------------------------------------------------------------
 * Option grid — the days and the start times.
 * ------------------------------------------------------------------------- */

/* auto-fit with a minmax floor rather than a fixed column count: seven days do
 * not divide evenly into any column count that also fits a 360px phone, and
 * hard-coding one produces a last row with a single stretched item — the same
 * "the odd one out is twice the size of the others" bug the class-feedback
 * rating buttons had. Letting the grid choose means the row simply reflows. */
.eoi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Same grid, wider floor. For options whose LABEL carries the information
 * rather than just naming it — the time bands on the classes page read
 * "Early afternoon — 12pm to 3pm", where the hours are the whole point and are
 * the last thing that should wrap away onto a third line.
 *
 * A modifier rather than a bigger floor on .eoi-grid itself: the weekday chips
 * beside it are one word each, and widening them would give seven days three
 * columns of mostly empty chip. The two grids want different floors because
 * their labels are different lengths, which is exactly what a modifier is for.
 *
 * 14rem is chosen against the 46rem reading column these forms use: three
 * columns at ~15rem apiece, which fits the longest band on one or two lines
 * instead of three, and collapses to a single full-width column on a phone
 * where a two-up would break every label across three lines anyway. */
.eoi-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/* The checkbox is VISIBLE inside the chip, deliberately — no positioned-offscreen
 * input, no ::before glyph standing in for one. Two reasons, and the first is a
 * bug this repo has already paid for: a 1px absolutely-positioned element inside
 * an unpositioned scroll container inflates the document's scrollWidth and gives
 * the whole page a phantom horizontal scrollbar. The second is that a real tick
 * is the only state indicator that survives forced-colours mode, a failed
 * stylesheet and :has() being unsupported. */
.eoi-opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  background: var(--clr-bg-alt);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  cursor: pointer;
  /* The whole chip is the tap target, not just the 16px box inside it. */
  min-height: 2.75rem;
}

.eoi-opt:hover { border-color: var(--clr-teal); }

/* Keyboard focus lands on the input, which is inside the chip — so the ring is
 * drawn on the chip, or it would be a 16px outline floating in a 140px box. */
.eoi-opt:focus-within {
  outline: 2px solid var(--clr-teal);
  outline-offset: 0;
  border-color: var(--clr-teal);
}

/* Pure enhancement. The tick inside already shows the state, so a browser
 * without :has() renders a form that is completely usable and slightly less
 * emphatic — which is why this is not worth a script. */
.eoi-opt:has(input:checked) {
  border-color: var(--clr-teal);
  background: color-mix(in srgb, var(--clr-teal) 12%, var(--clr-bg-alt));
}

.eoi-opt input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--clr-teal);
  flex-shrink: 0;
}

.eoi-opt span {
  font-size: 0.9375rem;
  color: var(--clr-text-2);
  /* min-width:0 so a long label wraps inside the chip instead of forcing the
   * grid column wider than its 1fr share and overflowing the row. */
  min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Stacked choice — one option per row, with the consequence underneath it.
 * ------------------------------------------------------------------------- */

/* Used for the three operating patterns, and stacked rather than gridded on
 * purpose: each carries a second line saying what it costs the climbing floor,
 * and that line is the entire reason the question is worth asking. Side by side
 * in a grid those lines become three columns of small print nobody reads. */
.eoi-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  background: var(--clr-bg-alt);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.eoi-choice:hover { border-color: var(--clr-teal); }

.eoi-choice:focus-within {
  outline: 2px solid var(--clr-teal);
  outline-offset: 0;
  border-color: var(--clr-teal);
}

.eoi-choice:has(input:checked) {
  border-color: var(--clr-teal);
  background: color-mix(in srgb, var(--clr-teal) 12%, var(--clr-bg-alt));
}

.eoi-choice input {
  width: 1.1rem;
  height: 1.1rem;
  /* Nudged down to sit on the first line's optical centre rather than its box
   * top, which a 1.6 line-height puts ~4px high. */
  margin: 0.2rem 0 0;
  accent-color: var(--clr-teal);
  flex-shrink: 0;
}

.eoi-choice__label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 0.15rem;
}

.eoi-choice__note {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--clr-muted);
}

/* ---------------------------------------------------------------------------
 * Question block — the heading-plus-controls unit the form repeats.
 * ------------------------------------------------------------------------- */

.eoi-q {
  border-top: 1px solid var(--clr-border);
  padding-top: 1.4rem;
  margin-bottom: 1.4rem;
}

/* The first question sits directly under the panel's own intro, so it does not
 * need a rule above it as well. */
.eoi-q:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.eoi-q > h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
  /* style.css puts 1.5rem under .wform h3, which is a section heading's spacing.
   * These are question headings with their controls immediately beneath, and at
   * 1.5rem each of the seven reads as belonging to the block below the next
   * one. */
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

.eoi-q__hint {
  font-size: 0.875rem;
  color: var(--clr-muted);
  margin: -0.25rem 0 0.7rem;
  max-width: none;
}

/* ---------------------------------------------------------------------------
 * Free-text box.
 * ------------------------------------------------------------------------- */

/* style.css styles `.wform__field input, .wform__field select` and stops there —
 * no public form in this app had a textarea in it until this one. Matched to
 * those rules rather than left at the browser default, which on the dark panel
 * renders as a white box with black text: the only light rectangle on the page,
 * and it looks like a rendering fault rather than a design choice. */
.eoi-text {
  width: 100%;
  background: var(--clr-bg-alt);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  color: var(--clr-text);
  font-family: var(--font);
  font-size: 1rem;
  /* Vertical only: a textarea a reader can drag WIDER can be dragged past the
   * panel edge and give the page a horizontal scrollbar. */
  resize: vertical;
}

.eoi-text:focus {
  outline: 2px solid var(--clr-teal);
  outline-offset: 0;
  border-color: var(--clr-teal);
}

/* The "(optional)" qualifier inside a field label.
 *
 * NOT `.muted`, which is what the other public forms in this repo reach for and
 * which is only defined in console.css — a sheet no public page loads. The
 * markup renders at HTTP 200 with the qualifier at full label weight, so it
 * reads as part of the label rather than as an aside. Defined here so this page
 * at least is right. */
.eoi-optional {
  font-weight: 400;
  color: var(--clr-muted);
}

/* ---------------------------------------------------------------------------
 * Anchor offset — the classes page's interest section.
 * ------------------------------------------------------------------------- */

/* The form is reached by fragment three ways: the "Sign in" link's ?next=, the
 * form's own action, and the redirect after a successful send. All three land
 * with the section's top edge at the viewport's top edge, which on this site is
 * underneath the sticky nav — so the heading that says what just happened is
 * the part that gets covered.
 *
 * Same rule and the same calc as `#timetable` in style.css, which solves the
 * identical problem one section up the same page. Scoped by id and kept here
 * rather than added to style.css because the id only exists where this sheet is
 * loaded. */
#season-interest { scroll-margin-top: calc(var(--nav-h) + 1rem); }