/* ── THE GENERAL DAILY ────────────────────────────────────────────────────────
   #screen-general-daily, built by js/11n-general-daily.js.

   A MENU OF THREE, then one question at a time. Mark, 2026-09-01: "they should
   click into the 3 drills to do them and then click into the SAT or math ...
   that is just heinously poor design waterfalling that content down the page."
   The stacked-ten-questions version this replaces is gone.

   ALMOST NOTHING ELSE IS HERE ON PURPOSE. The question card, the choice
   buttons, the verdict line, the progress rail and the "n of 5" bar are all
   30-lexicon.css's, and that file scopes them to `.bs` rather than to
   #screen-daily — so this screen inherits the Vanguard daily's typography
   wholesale by using the same class names. Two dailies that looked like two
   products would be the failure. The rules below are only for the menu.
   ────────────────────────────────────────────────────────────────────────── */


/* ── the menu head ────────────────────────────────────────────────────────── */

.bs .gen-head { margin-bottom: 20px; }

.bs .gen-lede {
  max-width: var(--lex-read);
  font-size: 15px;
  line-height: 1.55;
  color: var(--bs-ink-3);
  margin: 8px 0 0;
}

/* ── the three rows ───────────────────────────────────────────────────────────
   A NUMBERED LIST, not three tiles. The sitting has an order — drills, reading,
   maths — and a grid of equal boxes says "pick one" where an ordinal list says
   "these three". Each row is the full measure so the count and the verb land in
   the same place on every line and can be scanned down the right edge.

   `list-style: none` with the numeral drawn as its own column: an <ol> marker
   cannot be styled into the mono agate register, and the numeral is metadata
   here rather than punctuation. */
.bs .gen-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bs .gen-row { margin: 0; }

.bs .gen-row-btn {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 18px;
  padding: 20px 22px;
  background: var(--bs-sheet);
  border: 1px solid var(--bs-ink);
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* The gate's letterpress press, reused verbatim — one press behaviour across
   the product. */
.bs .gen-row-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--bs-ink);
}
.bs .gen-row-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--bs-ink); }
.bs .gen-row-btn:focus-visible { outline: 3px solid var(--bs-blue); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .bs .gen-row-btn { transition-duration: .001s; }
  .bs .gen-row-btn:hover { transform: none; }
}

.bs .gen-row-n {
  font-family: var(--bs-mono);
  font-size: 19px;
  font-weight: 600;
  color: var(--bs-ink-3);
}

.bs .gen-row-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.bs .gen-row-name {
  font-family: var(--bs-ed);
  font-size: clamp(19px, .9rem + .5vw, 23px);
  line-height: 1.15;
  color: var(--bs-ink);
}

/* What is actually in this part — the three drill names, or what the bank is.
   It is the only place the student learns what they are clicking into, so it
   stays legible rather than becoming a caption. */
.bs .gen-row-note {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--bs-ink-3);
}

.bs .gen-row-state {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.bs .gen-row-count {
  font-family: var(--bs-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--bs-ink);
  font-variant-numeric: tabular-nums;
}

.bs .gen-row-verb {
  font-family: var(--bs-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-blue);
}

/* A FINISHED PART STAYS CLICKABLE. Running a drill again or re-reading a
   question is a perfectly good thing to do, so this marks it done without
   disabling it — the row goes quiet rather than dead, and the verb says "go
   again" instead of leaving the colour to carry the whole message. */
.bs .gen-row.is-done .gen-row-btn { border-color: var(--bs-rule); }
.bs .gen-row.is-done .gen-row-name { color: var(--bs-ink-2); }
.bs .gen-row.is-done .gen-row-count,
.bs .gen-row.is-done .gen-row-verb { color: var(--bs-ink-3); }

/* ── inside a part ────────────────────────────────────────────────────────── */

/* The way back to the three rows. An agate link rather than a button: leaving
   is not the action this screen is for, and it must not compete with the
   answer choices for the eye. */
.bs .gen-back {
  display: inline-block;
  font-family: var(--bs-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  background: none;
  border: 0;
  padding: 0 0 14px;
  cursor: pointer;
}
.bs .gen-back:hover { color: var(--bs-ink); }
.bs .gen-back:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 3px; }

.bs .gen-acts {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  flex-wrap: wrap;
}

/* .bs .btn-primary is width:100%, which would make this span the whole measure
   and read as a banner rather than an action — matched specificity holds it to
   its own size, the same way .gate-resume-btn does on the gate. */
.bs .gen-next { width: auto; padding: 12px 28px; }

.bs .gen-skip {
  font-family: var(--bs-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px 2px;
}
.bs .gen-skip:hover { color: var(--bs-ink); }
.bs .gen-skip:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 3px; }

/* ── an answer that did not reach the server ───────────────────────────────
   The card has already turned green or red — marking is client side and
   instant, by design. This is the only thing standing between the student and
   believing work was recorded when it was not, so it takes the pen colour and
   sits inside the card it belongs to. */
.bs .gen-unsaved {
  margin-top: 10px;
  padding-left: 10px;
  border-left: 2px solid var(--bs-pen);
  font-family: var(--bs-ui);
  font-size: 13px;
  line-height: 1.45;
  color: var(--bs-pen);
}