/* Grammar screen. Uses tokens and components from base.css. */

.grammar-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: calc(-1 * var(--space-2)); margin-bottom: var(--space-5); }
.grammar-badges[hidden] { display: none; }

.grammar-table td, .grammar-table thead th { white-space: nowrap; }
.grammar-table thead th:empty { min-width: 0; }
/* phones: phrases in cells wrap between words, so a table up to 4 columns fits without scrolling inside */
@media (max-width: 559px) {
  .grammar-table td, .grammar-table thead th, .grammar-table tbody th { white-space: normal; hyphens: manual; }
}

/* ---------- quiz ---------- */
.grammar-quiz { margin-top: var(--space-7); display: grid; gap: var(--space-4); min-width: 0; }
.grammar-quiz__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
  font-weight: 600;
}
.grammar-quiz__body { display: grid; gap: var(--space-4); }
.grammar-quiz__lead { color: var(--ink-soft); max-width: 60ch; }
.grammar-quiz__progress { color: var(--ink-soft); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.grammar-quiz__keys { color: var(--ink-soft); font-size: var(--step--1); }
@media (hover: none) { .grammar-quiz__keys { display: none; } }

.grammar-question { display: grid; gap: var(--space-2); border-radius: var(--radius-s); }
.grammar-question:focus { outline: none; }
.grammar-question:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.grammar-question__prompt { color: var(--ink-soft); }
.grammar-question__es { font-size: var(--step-1); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }

.grammar-quiz .option { gap: var(--space-3); text-align: start; }
.grammar-option__key {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.grammar-quiz .option.is-correct .grammar-option__key { background: var(--ok); color: var(--surface); }
.grammar-quiz .option.is-wrong .grammar-option__key { background: var(--bad); color: var(--surface); }

.grammar-quiz .feedback { display: grid; gap: var(--space-2); }
.grammar-feedback__explain { font-weight: 400; line-height: 1.55; }

.grammar-result__score {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.grammar-result__score:focus { outline: none; }
.grammar-result__score:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.grammar-result__best { color: var(--ink-soft); }
.grammar-result__best:empty { display: none; }

/* ---------- topic: hero + numbered tabs + typed blocks ---------- */
.grammar-back { margin-bottom: var(--space-3); }
.grammar-hero .grammar-badges { margin: var(--space-1) 0 0; }

.grammar-panel { display: grid; gap: var(--space-6); min-width: 0; }
.gblock { display: grid; gap: var(--space-3); min-width: 0; }
.gblock > .group-title { margin: 0; }
.gblock .table-wrap { max-width: 100%; }
.gblock .table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gblock .rule-box p + p, .rule-card__body p + p, .tip__body p + p { margin-top: var(--space-2); }

/* lists rendered as <ul> for screen readers */
.phrase-list, .kw-tags { list-style: none; margin: 0; padding: 0; }
.trigger-card__ex p { margin: 0; }
.trigger-card__tr { color: var(--ink-soft); font-size: 0.875rem; }

/* conjugation: each verb's panels; the hidden one stays out of layout */
.conj-forms[hidden] { display: none; }
.conj-card .mini-tab { text-transform: none; letter-spacing: 0.02em; font-size: 0.8125rem; }
.form-row__word { overflow-wrap: anywhere; }
.form-row__word b { color: var(--ending); }
/* warm cards get a cool ending, so the ending never shares the stem's hue */
.conj-forms.c-coral, .conj-forms.c-amber { --ending: var(--blue-hi); }

.ex-row__es, .ex-row__tr { margin: 0; overflow-wrap: anywhere; }

.grammar-panel .grammar-quiz { margin-top: 0; }