/* ── THE DAILY ENTRY PAIR ─────────────────────────────────────────────────────
   #gate-today, built by js/11m-daily-entry.js. Two destinations side by side,
   directly under the dateline and above the track cards. Since 2026-09-01 they
   are the only things on the front page besides those cards.

   WHY IT IS NOT A TRACK CARD. The five track cards below are a CATALOGUE — the
   arms of the product, browsed. This pair is the one thing a student is asked
   to do today, and if it read as a sixth and seventh card it would be filed
   with the browsing. It earns its separation by INVERTING the primary half,
   which is the only inked block on the gate. Hierarchy by contrast, not by
   making everything a little bigger.

   The letterpress offset on press is the gate's own affordance (.gate-track),
   reused verbatim rather than restyled, because a second press behaviour on one
   screen reads as two products.
   ────────────────────────────────────────────────────────────────────────── */

/* NO RULE OF ITS OWN. It used to carry a 2px ink rule to separate it from the
   announcement bands above it. Those bands are gone (Mark, 2026-09-01) and the
   pair now sits directly under the dateline, whose own rule was already there —
   two rules with dead air between them. Spacing separates it instead. */
.gate-today {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(22px, 4vh, 38px);
  margin-bottom: clamp(24px, 4vh, 40px);
}

/* Same breakpoint as .gate-tracks: the two grids stack together or the page
   changes shape twice on the way down. */
@media (max-width: 560px) {
  .gate-today { grid-template-columns: minmax(0, 1fr); }
}

.gate-today-card {
  position: relative;
  display: grid;
  /* The arrow is its own column so a two-line sentence cannot push it onto a
     line of its own — grid, not flex-wrap. */
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: 14px;
  row-gap: 8px;
  padding: 18px 20px 20px;
  min-height: 116px;
  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, background .12s ease;
}

.gate-today-card:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--bs-ink);
}
.gate-today-card:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--bs-ink);
}
.gate-today-card:focus-visible { outline: 3px solid var(--bs-blue); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .gate-today-card { transition-duration: .001s; }
  .gate-today-card:hover:not(:disabled) { transform: none; }
}

.gate-today-k {
  grid-column: 1;
  align-self: start;
  font-family: var(--bs-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bs-blue);
}

.gate-today-line {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--bs-ui);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bs-ink);
  min-width: 0;
}

.gate-today-go {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--bs-mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--bs-ink-3);
  transition: transform .12s ease, color .12s ease;
}
.gate-today-card:hover:not(:disabled) .gate-today-go {
  color: var(--bs-ink);
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .gate-today-card:hover:not(:disabled) .gate-today-go { transform: none; }
}

/* THE PRIMARY HALF, INKED. Today's practice is the one thing being asked for;
   the puzzles are the thing offered alongside it. Reversing the first card is
   what makes that an order rather than a pair of equals — and it is the only
   inked block on the gate, so it cannot be mistaken for a style applied
   everywhere. */
.bs #gate-today-practice:not(:disabled) {
  background: var(--bs-ink);
  border-color: var(--bs-ink);
}
.bs #gate-today-practice:not(:disabled) .gate-today-k { color: var(--bs-sheet); opacity: .72; }
.bs #gate-today-practice:not(:disabled) .gate-today-line { color: var(--bs-sheet); }
.bs #gate-today-practice:not(:disabled) .gate-today-go { color: var(--bs-sheet); opacity: .72; }
.bs #gate-today-practice:not(:disabled):hover { background: var(--bs-ink-2); }
.bs #gate-today-practice:not(:disabled):hover .gate-today-go { opacity: 1; }

/* ── SHOWN, GREYED, WITH THE REASON ──────────────────────────────────────────
   Mark's ruling, carried over from the gate rows: "always show but have them
   grayed out when not active so not clickable". The button is `disabled` in the
   DOM (js/11m-daily-entry.js), so this only has to make that legible — it is
   not what does the disabling.

   Kept at full contrast, faded only in emphasis, for the same reason the rows
   are: the whole point of showing a shut destination is that the student READS
   why it is shut. */
.gate-today-card.is-dormant {
  opacity: 1;
  cursor: not-allowed;
  background: var(--bs-sheet);
  border-color: var(--bs-rule);
  box-shadow: none;
}
.gate-today-card.is-dormant .gate-today-k { color: var(--bs-ink-3); }
.gate-today-card.is-dormant .gate-today-line {
  color: var(--bs-ink-3);
  font-style: italic;
}
.gate-today-card.is-dormant .gate-today-go { color: var(--bs-rule); }