/* overlay.css — styles for the added layer only.
 *
 * Carried over from the Past Exam Only edition, where this design was settled: one solid teal
 * pill in the corner, and an Ask panel that looks like a note stuck onto a card rather than part
 * of it. Every colour, font and radius is a baseline variable — nothing here sets a value the
 * original page did not already use. Delete this file and the application looks exactly as the
 * baseline does.
 *
 * One documented exception to "no rule targets a baseline selector": the final section, the
 * station navigator sizing fix. It is a layout correction to a baseline selector and it is kept
 * here — rather than in app.js — precisely so the round-trip assertion in split_data.mjs stays
 * green and the change remains one deletable file away from being undone. */

/* ------------------------------------------------- feedback button and dialog */

.fb-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  border: 1px solid var(--teal); background: var(--teal); color: #fff;
  font-family: var(--sans); font-size: 13px; line-height: 1;
  padding: 11px 15px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .16);
}
.fb-fab:hover { background: var(--teal-d); }
.fb-fab:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.fb-back {
  position: fixed; inset: 0; z-index: 50; background: rgba(20, 24, 28, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.fb-box {
  background: var(--raise); border: 1px solid var(--rule); border-radius: 10px;
  width: min(520px, 100%); max-height: 88vh; overflow: auto; padding: 20px 22px 18px;
}
.fb-box h3 { font-family: var(--serif); font-size: 20px; color: var(--ink); margin: 0 0 4px; }
.fb-box .fb-lede { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.fb-box label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 5px; }
.fb-box select,
.fb-box textarea {
  width: 100%; font-family: var(--sans); font-size: 14px; color: var(--body);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 7px; padding: 9px 10px;
}
.fb-box textarea { min-height: 96px; resize: vertical; }

/* The whole point of the dialog: what the page already knows, shown back to the reporter so
 * they can see they do not have to type it. */
.fb-ctx {
  background: var(--teal-soft); border: 1px solid var(--rule2); border-radius: 7px;
  padding: 9px 11px; font-size: 12px; color: var(--body); margin-top: 12px; line-height: 1.5;
}
.fb-ctx b { color: var(--teal-d); }

.fb-err { color: var(--rose); font-size: 13px; margin-top: 10px; }
.fb-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.fb-actions button {
  font-family: var(--sans); font-size: 14px; padding: 9px 15px; border-radius: 7px;
  border: 1px solid var(--rule); background: var(--raise); color: var(--body); cursor: pointer;
}
.fb-actions button.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.fb-actions button[disabled] { opacity: .55; cursor: default; }

/* --------------------------------------------------------- per-question AI */

.ai-wrap { margin-top: 12px; }
.ai-open {
  font-family: var(--sans); font-size: 13px; color: var(--teal-d); background: none;
  border: 1px dashed var(--teal); border-radius: 7px; padding: 7px 12px; cursor: pointer;
}
.ai-open:hover { background: var(--teal-soft); }
.ai-panel {
  border: 1px dashed var(--teal); border-radius: 8px; padding: 12px 13px; margin-top: 9px;
  background: var(--raise);
}
.ai-tag {
  display: inline-block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber); background: var(--amber-soft); border-radius: 4px; padding: 2px 7px; margin-bottom: 8px;
}
.ai-row { display: flex; gap: 7px; align-items: flex-start; }
.ai-row input {
  flex: 1; font-family: var(--sans); font-size: 14px; color: var(--body);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 7px; padding: 8px 10px;
}
.ai-row button {
  font-family: var(--sans); font-size: 13px; padding: 8px 13px; border-radius: 7px;
  border: 1px solid var(--teal); background: var(--teal); color: #fff; cursor: pointer; white-space: nowrap;
}
.ai-row button[disabled] { opacity: .55; cursor: default; }
.ai-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; }
.ai-sugg button {
  font-family: var(--sans); font-size: 12px; color: var(--body); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 999px; padding: 5px 11px; cursor: pointer;
}
.ai-sugg button:hover { border-color: var(--teal); }
.ai-out { white-space: pre-wrap; font-size: 14px; line-height: 1.65; margin-top: 11px; color: var(--body); }
.ai-note { font-size: 12px; color: var(--muted); margin-top: 9px; border-top: 1px solid var(--rule2); padding-top: 7px; }
.ai-err { font-size: 13px; color: var(--rose); margin-top: 9px; }

/* ------------------------------------------------------------------- footer */

.ov-version {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px 26px;
  font-size: 12px; color: var(--faint); font-family: var(--sans);
}

@media (max-width: 520px) {
  .fb-fab { right: 12px; bottom: 12px; padding: 10px 13px; font-size: 12px; }
  .fb-back { align-items: flex-end; padding: 0; }
  .fb-box { border-radius: 12px 12px 0 0; max-height: 92vh; }
}

/* The Guest disclosure. Sits with the content-version line at the foot of the page: both are
 * statements about what the site is doing with the reader's activity, and they belong together
 * rather than in a modal nobody opens. */
.ov-disclosure {
  max-width: var(--maxw); margin: -18px auto 0; padding: 0 24px 30px;
  font-size: 12px; color: var(--faint); font-family: var(--sans); line-height: 1.6;
}

/* Import from a retired edition. Deliberately quiet and at the foot of the page: it matters
 * enormously to the few people arriving from the old domain and not at all to everyone else. */
.ov-restore {
  display: block; max-width: var(--maxw); margin: 0 auto; padding: 0 24px 6px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--sans); font-size: 12px; color: var(--teal-d); text-decoration: underline;
}
.ov-restore:hover { color: var(--teal); }


/* ------------------------------------- station navigator (KF / OSPE) sizing fix

 * The baseline lays the station picker out as `repeat(8, 1fr)` with `aspect-ratio: 1` on each
 * button. Eight fractional columns across the content well makes every number a ~140 px square,
 * so a 29-station paper eats most of the first screen before a single question is visible.
 * Nothing is wrong with the markup — the grid simply has no upper bound on cell size.
 *
 * The fix gives it one: cells are sized rather than stretched, and the track count follows the
 * available width instead of being pinned at eight. A 29-station paper now sits in three tidy
 * rows above the fold on a laptop, and stays at a comfortable touch target on a phone. Colour,
 * radius, border and the .on / .done states are all still the baseline's. */

.st-grid {
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
  max-width: 528px;   /* ten 44 px tracks plus nine gaps — it stops growing there */
  margin: 10px 0 14px;
}

.st-grid button {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

@media (max-width: 640px) {
  .st-grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    max-width: none;
    gap: 5px;
  }
  .st-grid button { font-size: 12px; }
}