/* ISEE Vocabulary: one job per screen. Tokens only (scripts/check-visual-tokens.mjs). */
.vocab-shell { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.vocab-screen { display: flex; flex-direction: column; gap: var(--space-3); max-width: 1080px; margin: 0 auto; }
.vocab-heading h1, .vocab-summary h1, .vocab-list-head h1 { font-family: var(--font-display); font-size: clamp(30px, 4vw, 44px); line-height: 1.1; margin: 0; }
.vocab-heading p { margin: var(--space-1) 0 0; color: var(--muted); }
.vocab-kicker, .vocab-q-kicker { margin: 0; color: var(--blue-dark); font-weight: 700; font-size: var(--text-small); text-transform: uppercase; letter-spacing: .06em; }
.vocab-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--elevation-soft); padding: var(--space-5); }
.vocab-card h2 { font-family: var(--font-display); font-size: var(--text-heading); margin: 0 0 var(--space-3); }
.vocab-home-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-4); }
.vocab-select { display: flex; flex-direction: column; gap: var(--space-2); font-weight: 700; font-size: var(--text-small); }
.vocab-home-grid > * { min-width: 0; }
.vocab-select select { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; min-height: var(--target-min); border: 1px solid var(--muted); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font: inherit; font-size: 17px; background: var(--paper); color: var(--ink); }
.vocab-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); align-items: center; }
.vocab-note { color: var(--muted); font-size: var(--text-small); margin: var(--space-3) 0 0; }
.vocab-big-number { margin: 0; font-size: 20px; }
.vocab-big-number strong { font-family: var(--font-display); font-size: 48px; color: var(--coral-text); }
.vocab-progress-line { margin: 0; color: var(--muted); font-size: var(--text-small); }
.vocab-progress-line strong { color: var(--ink); }

.vocab-button { min-height: var(--target-min); border: 2px solid var(--transparent); border-radius: var(--radius-md); padding: var(--space-2) var(--space-5); font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; background: var(--transparent); color: var(--ink); }
.vocab-button:disabled { opacity: .5; cursor: default; }
.vocab-primary { background: var(--blue-strong); color: var(--paper); }
.vocab-secondary { background: var(--paper); border-color: var(--line); }
.vocab-link { color: var(--blue-dark); padding-left: 0; padding-right: 0; text-decoration: underline; }
.vocab-miss { background: var(--coral-strong); color: var(--paper); min-width: 170px; }
.vocab-knew { background: var(--green-strong); color: var(--paper); min-width: 170px; }
.vocab-button:focus-visible, .vocab-choice:focus-visible, .vocab-flash-front:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 2px; }

.vocab-crumbs { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-small); color: var(--muted); }
.vocab-crumbs .vocab-button { min-height: 32px; font-size: var(--text-small); }
.vocab-session-top { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-small); color: var(--muted); font-weight: 700; }
.vocab-screen progress { width: 100%; height: 8px; accent-color: var(--blue); }
.vocab-toolbar { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }

.vocab-flashcard { padding: 0; overflow: hidden; }
.vocab-flash-front { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-height: clamp(260px, 52vh, 460px); border: 0; background: var(--cream); color: var(--ink); cursor: pointer; font: inherit; }
.vocab-flash-word { font-family: var(--font-display); font-size: clamp(44px, 7vw, 80px); line-height: 1; }
.vocab-flash-pos { font-style: italic; color: var(--muted); font-size: 20px; }
.vocab-flash-hint { margin-top: var(--space-4); color: var(--blue-dark); font-weight: 700; font-size: var(--text-small); }
.vocab-flash-back { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: var(--space-5); padding: var(--space-4); min-height: clamp(260px, 52vh, 460px); }
.vocab-picture { display: block; width: 100%; height: auto; max-height: min(50vh, 420px); object-fit: contain; border-radius: var(--radius-md); background: var(--cream); }
.vocab-flash-text p { margin: 0 0 var(--space-3); }
.vocab-word-line strong { font-family: var(--font-display); font-size: 40px; }
.vocab-pos { color: var(--muted); font-size: 18px; font-weight: 400; font-style: italic; font-family: var(--font-reading); }
.vocab-meaning { font-size: 22px; font-weight: 700; }
.vocab-synonyms span { color: var(--muted); font-weight: 700; }
.vocab-traps { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-small); }
.vocab-traps span { font-weight: 700; }
.vocab-flash-sentence { margin-top: var(--space-4); max-width: var(--measure-readable); font-family: var(--font-reading); font-size: clamp(17px, 1.8vw, 21px); line-height: 1.4; }
.vocab-sentence { color: var(--ink); font-style: italic; }
.vocab-sentence strong { color: var(--blue-dark); font-style: normal; }

.vocab-question { display: flex; flex-direction: column; gap: var(--space-3); }
.vocab-q-word { font-family: var(--font-display); font-size: clamp(36px, 4.5vw, 52px); margin: 0; line-height: 1.1; }
.vocab-q-meaning { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); margin: 0; line-height: 1.2; max-width: none; }
.vocab-choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.vocab-choice { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; text-align: left; border: 2px solid var(--line); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); background: var(--paper); color: var(--ink); font: inherit; font-size: 19px; cursor: pointer; }
@media (hover: hover) { :where(:root:not([data-hover-rest])) .vocab-choice:hover:not(:disabled) { border-color: var(--blue); } }
.vocab-choice:disabled { cursor: default; }
.vocab-choice-letter { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-round); background: var(--cream); font-weight: 700; }
.vocab-choice.is-correct { border-color: var(--state-correct-color); background: var(--cream); }
.vocab-choice.is-correct .vocab-choice-letter { background: var(--state-correct-color); color: var(--paper); }
.vocab-choice.is-wrong { border-color: var(--state-incorrect-color); }
.vocab-choice.is-wrong .vocab-choice-letter { background: var(--state-incorrect-color); color: var(--paper); }
.vocab-choice.is-dim { opacity: .55; }
.vocab-feedback { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--space-4); align-items: center; border-top: 1px solid var(--line); padding-top: var(--space-3); }
.vocab-feedback p { margin: 0 0 var(--space-2); }
.vocab-picture-small { max-height: min(24vh, 190px); }
.vocab-feedback .vocab-button { margin-top: var(--space-1); }
.vocab-verdict { font-weight: 700; font-size: 20px; }
.vocab-feedback.is-correct .vocab-verdict { color: var(--green-text); }
.vocab-feedback.is-wrong .vocab-verdict { color: var(--coral-text); }
.vocab-pile-note { font-size: var(--text-small); color: var(--muted); font-weight: 700; }
.vocab-verdict .vocab-pile-note { display: inline-block; margin-left: var(--space-1); }

.vocab-summary { text-align: center; }
.vocab-score { font-size: 22px; margin: var(--space-3) 0; }
.vocab-score strong { font-family: var(--font-display); font-size: 56px; color: var(--blue-dark); }
.vocab-summary .vocab-actions { justify-content: center; }
.vocab-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-2) 0; }
.vocab-chips li { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--cream); padding: var(--space-1) var(--space-3); font-weight: 700; }

.vocab-list-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.vocab-list-head .vocab-actions { margin-top: 0; }
.vocab-dk-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.vocab-dk-list li { display: flex; flex-direction: column; gap: var(--space-1); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); }
.vocab-dk-list strong { font-family: var(--font-display); font-size: 22px; }
.vocab-dk-list .vocab-pos { font-size: var(--text-small); }
.vocab-dk-list span { font-size: 15px; }
.vocab-streak { color: var(--green-text); letter-spacing: .15em; }
.vocab-pager { display: flex; justify-content: center; align-items: center; gap: var(--space-4); font-weight: 700; }

@media (max-width: 760px) {
  .vocab-home-grid, .vocab-flash-back, .vocab-feedback { grid-template-columns: 1fr; }
  .vocab-choices { grid-template-columns: 1fr; }
  .vocab-dk-list { grid-template-columns: 1fr 1fr; }
  .vocab-card { padding: var(--space-4); }
  .vocab-picture { max-height: 34vh; }
  .vocab-picture-small { max-height: 22vh; }
  .vocab-session-top { flex-direction: column; gap: 0; }
}
@media (max-width: 420px) { .vocab-dk-list { grid-template-columns: 1fr; } .vocab-button { padding-left: var(--space-4); padding-right: var(--space-4); } }
/* Short desktop laptops. A two-line fill-in prompt plus an answered question's
   picture is the tallest state this deck can reach; these budgets are what keep
   it inside 768 CSS pixels without hiding anything. */
@media (min-width: 761px) and (max-height: 860px) {
  .vocab-q-blank { font-size: 19px; line-height: 1.35; }
  .vocab-choice { min-height: 54px; font-size: 18px; }
  .vocab-q-word { font-size: 44px; }
  .vocab-picture-small { max-height: min(17vh, 132px); }
  .vocab-feedback { padding-top: var(--space-2); grid-template-columns: minmax(0, 176px) minmax(0, 1fr); }
  .vocab-feedback p { margin-bottom: var(--space-1); }
  .vocab-feedback .vocab-chosen, .vocab-feedback .vocab-answer-line { font-size: 17px; }
  .vocab-feedback .vocab-sentence, .vocab-feedback-text-only .vocab-sentence { font-size: 16px; }
  .vocab-feedback-text-only .vocab-verdict { font-size: 18px; }
}
@media (min-width: 761px) and (max-height: 760px) {
  .vocab-shell { padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .vocab-screen { gap: var(--space-2); }
  .vocab-card { padding: var(--space-4); }
  .vocab-question { gap: var(--space-2); }
  .vocab-choice { min-height: 52px; font-size: 18px; }
  .vocab-q-word { font-size: 40px; }
  .vocab-q-meaning { font-size: 24px; }
  .vocab-picture-small { max-height: min(16vh, 118px); }
}

/* Fill-in-the-blank questions and decks without pictures (transitions). */
.vocab-q-blank { font-family: var(--font-reading); font-size: clamp(18px, 2vw, 24px); line-height: 1.4; margin: 0; font-weight: 400; max-width: var(--measure-readable); }
.vocab-blank { display: inline-block; min-width: 120px; border-bottom: 3px solid var(--blue-dark); color: var(--transparent); vertical-align: baseline; }
.vocab-flash-back.vocab-flash-text-only, .vocab-feedback.vocab-feedback-text-only { grid-template-columns: 1fr; }
.vocab-flash-text-only .vocab-flash-text { max-width: var(--measure-readable); margin: 0 auto; }
.vocab-feedback-text-only p { margin-bottom: var(--space-1); }
.vocab-feedback-text-only .vocab-verdict { font-size: 19px; }

/* Pro buttons for a free learner (same look as the practice topics' Pro chip). */
.vocab-pro { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--paper); border-color: var(--yellow); color: var(--ink); }
.vocab-pro:hover { background: var(--cream); }
.vocab-pro-chip { border-radius: var(--radius-sm); background: var(--yellow); padding: 0 var(--space-2); font-size: var(--text-small); font-weight: 700; color: var(--ink); white-space: nowrap; }
.vocab-pro-cta { background: var(--yellow); border-color: var(--yellow); }
.vocab-pro-cta:hover { border-color: var(--ink); }

/* After a miss: how to work the word out (clue words, word parts, tone). */
.vocab-strategy { border-left: 4px solid var(--blue-dark); padding: 0 0 0 var(--space-3); margin: calc(var(--space-1) / 2) 0 var(--space-1); font-size: var(--text-small); line-height: 1.3; }
.vocab-feedback .vocab-strategy p { margin: 0 0 calc(var(--space-1) / 2); }
.vocab-strategy-link.vocab-button { min-height: 24px; padding: 0; font-size: var(--text-small); display: inline; vertical-align: baseline; }
.vocab-part { font-weight: 700; }
.vocab-clue { background: var(--cream); color: inherit; text-decoration: underline; text-decoration-color: var(--blue-dark); text-underline-offset: 3px; }
/* With a strategy note the picture gives up some height so the screen still fits. */
@media (min-width: 761px) and (max-height: 860px) {
  .vocab-feedback.has-strategy .vocab-picture-small { max-height: min(11vh, 84px); }
  .vocab-feedback.has-strategy .vocab-sentence { font-size: 15px; line-height: 1.35; }
  .vocab-question:has(.has-strategy) { gap: var(--space-2); }
  .vocab-question:has(.has-strategy) .vocab-q-meaning { font-size: 24px; }
  .vocab-question:has(.has-strategy) .vocab-q-word { font-size: 40px; }
  .vocab-question:has(.has-strategy) .vocab-choice { min-height: 50px; font-size: 17px; }
}
@media (min-width: 761px) and (max-height: 760px) {
  .vocab-feedback.has-strategy .vocab-picture-small { max-height: min(10vh, 72px); }
  .vocab-question:has(.has-strategy) .vocab-choice { min-height: 46px; }
  .vocab-question:has(.has-strategy) .vocab-q-word { font-size: 36px; }
  .vocab-question:has(.has-strategy) .vocab-q-blank { font-size: 18px; line-height: 1.3; }
}

/* Answer feedback: what the chosen word means, then the answer. */
.vocab-chosen { color: var(--ink); }
.vocab-chosen strong, .vocab-answer-line strong { font-family: var(--font-display); }
.vocab-not-sure { display: flex; justify-content: flex-end; margin-top: calc(-1 * var(--space-2)); }
.vocab-not-sure .vocab-button { min-height: 36px; font-size: var(--text-small); }

/* Typed recall. */
.vocab-typed { display: flex; flex-direction: column; gap: var(--space-2); }
.vocab-typed-label { font-weight: 700; font-size: var(--text-small); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; }
.vocab-typed-hint { font-family: var(--font-reading); font-size: 20px; letter-spacing: .08em; color: var(--blue-dark); white-space: pre; }
.vocab-typed-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.vocab-typed-input { flex: 1 1 240px; min-width: 0; min-height: var(--target-min); border: 2px solid var(--line); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font: inherit; font-size: 20px; color: var(--ink); background: var(--paper); }
.vocab-typed-input:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 2px; }
.vocab-typed-input.is-correct { border-color: var(--state-correct-color); }
.vocab-typed-input.is-wrong { border-color: var(--state-incorrect-color); }
.vocab-typed-sentence { margin: 0; color: var(--muted); }

/* Transitions: the job a transition does. */
.vocab-kind { display: inline-block; border-radius: var(--radius-sm); background: var(--cream); border: 1px solid var(--line); padding: 0 var(--space-2); font-size: var(--text-small); font-weight: 700; color: var(--blue-dark); font-family: var(--font-reading); vertical-align: middle; }
.vocab-kind-line { color: var(--muted); }
.vocab-kinds-head h1 { font-size: clamp(26px, 3vw, 34px); }
.vocab-kinds-lead { margin: 0; max-width: var(--measure-readable); }
.vocab-filled { color: var(--blue-dark); border-bottom: 3px solid var(--state-correct-color); }
.vocab-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); list-style: none; margin: 0; padding: 0; }
.vocab-kinds li { display: flex; flex-direction: column; gap: var(--space-1); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.vocab-kinds li > span:first-child { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); align-items: baseline; }
.vocab-kinds strong { font-family: var(--font-display); font-size: 18px; }
.vocab-kinds em { font-size: var(--text-small); color: var(--muted); }
.vocab-kinds li > span:last-child { font-size: 15px; }
@media (max-width: 760px) { .vocab-kinds { grid-template-columns: 1fr; } }

/* Typed recall: the meaning is the question; the sentence is its clue. */
.vocab-question .vocab-q-typed { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.25; margin: 0; max-width: none; }
.vocab-typed-sentence { font-size: clamp(16px, 1.6vw, 19px); }

/* Quiz setup: how many questions, and an optional real-test timer (core/practice/quiz-setup.js). */
.vocab-setup { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
.vocab-select-inline { flex-direction: row; align-items: center; }
.vocab-select-inline select { width: auto; }
.vocab-setup > :first-child .vocab-select-label { min-width: 5.4em; }
.vocab-timer-note { color: var(--ink); }
.vocab-session-right { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
/* The countdown in a timed quiz. It stops (and says so) while feedback is on screen. */
.vocab-clock { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--cream); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vocab-clock-state { font-weight: 400; color: var(--muted); }
.vocab-clock.is-low { border-color: var(--coral-strong); color: var(--coral-text); }
.vocab-time-line { margin: 0 0 var(--space-3); font-weight: 700; color: var(--ink); }
.vocab-time-line.is-up { color: var(--coral-text); }

/* Flashcard extras (SAT deck): a second example sentence, and a word's other meaning behind a toggle. */
.vocab-flash-text .vocab-sentence-2 { margin-top: calc(-1 * var(--space-1)); }
.vocab-sense-label { color: var(--blue-dark); font-weight: 700; font-size: var(--text-small); text-transform: uppercase; letter-spacing: .06em; }
.vocab-flash-text .vocab-sense-label { margin-bottom: var(--space-1); }
.vocab-sense-toggle { min-height: 36px; font-size: var(--text-small); }
@media (min-width: 761px) and (max-height: 800px) {
  .vocab-flash-text p { margin-bottom: var(--space-2); }
  .vocab-word-line strong { font-size: 34px; }
  .vocab-meaning { font-size: 20px; }
  .vocab-flash-text .vocab-sentence { font-size: 16px; }
}