/* ACCESS Practice Lab — Word Builder (vocabulary and morphology). The page is d-reading; the workbench takes the colour
   of the word's own language domain (d-listening … d-writing), always paired with an icon and the domain name. */

.vm-studio {
  display: grid;
  gap: var(--s-4);
}
.vm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: var(--s-5);
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  border: 1px solid color-mix(in srgb, var(--room) 25%, var(--line));
  border-radius: var(--r-xl);
  background: var(--room-soft);
  overflow: hidden;
}
.vm-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--s-3);
  padding: 0.3rem 0.9rem 0.3rem 0.7rem;
  border-radius: 999px;
  background: #fff;
  color: var(--room-ink);
  font-weight: 700;
  font-size: 0.9375rem;
}
.vm-hero h1 {
  margin: 0 0 var(--s-2);
  color: var(--room-ink);
  font-size: clamp(2.3rem, 1.6rem + 3vw, 4rem);
  font-weight: 650;
  letter-spacing: -0.03em;
}
.vm-hero-copy > p:not(.vm-kicker) {
  max-width: 54ch;
  margin: 0 0 var(--s-4);
  font-size: 1.1875rem;
  line-height: 1.55;
}
.vm-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.vm-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.9375rem;
}
.vm-hero-meta .ico {
  color: var(--room-ink);
}

/* decorative word-part tiles: same flat fill + navy outline language as the illustrations */
.vm-word-art {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 11rem;
}
.vm-tile {
  padding: 0.75rem 1rem;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--room);
  color: #fff;
  font: 650 1.3rem var(--font-display);
  transform: rotate(-4deg);
}
.vm-tile.tile-b {
  background: var(--accent);
  color: var(--ink);
  transform: rotate(3deg);
}
.vm-tile.tile-c {
  background: #fff;
  color: var(--ink);
  transform: rotate(-2deg);
}
.vm-word-plus {
  color: var(--ink);
  font: 700 1.6rem var(--font);
}
.vm-art-caption {
  flex-basis: 100%;
  text-align: center;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* workbench */
.vm-workbench {
  padding: clamp(1.1rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-top: 6px solid var(--room);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.vm-progress-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
}
.vm-step-detail {
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 700;
}
.vm-workbench h2 {
  margin: var(--s-3) 0 var(--s-4);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
}
.vm-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-5);
  align-items: start;
}
.vm-left,
.vm-right {
  min-width: 0;
}
.vm-label {
  margin: 0 0 var(--s-2);
  color: var(--room-ink);
  font-weight: 700;
  font-size: 0.9375rem;
}
.vm-context {
  margin: 0 0 var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border-left: 5px solid var(--room);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--room-soft);
  font-size: 1.25rem;
  line-height: 1.65;
}
.vm-context strong {
  padding: 0.05rem 0.3rem;
  border-radius: 6px;
  background: #fff;
  color: var(--room-ink);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--room) 45%, transparent);
}
.vm-hint-panel {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid #f0cf94;
  border-radius: var(--radius-sm);
  background: var(--hint-soft);
  color: var(--ink);
  line-height: 1.6;
}
.vm-hint-chip {
  display: inline-block;
  margin: 0.25rem 0.35rem 0 0;
  padding: 0.1rem 0.6rem;
  border-radius: 8px;
  background: #fff;
}
.vm-build-area {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  min-height: 5rem;
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.vm-build-label {
  color: var(--ink-2);
  font-weight: 700;
  font-size: 0.9375rem;
}
.vm-build-slots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
}
.vm-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0.4rem 0.9rem;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--room);
  color: #fff;
  font: 650 1.3rem var(--font-display);
}
.vm-join {
  color: var(--ink-2);
  font-weight: 700;
}
.vm-empty {
  color: var(--ink-2);
}
.vm-target {
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 700;
  text-align: right;
}
.vm-target span {
  display: block;
  color: var(--ink);
  font-size: 1.1rem;
  letter-spacing: 0.15em;
}
.vm-parts-field {
  margin: 0 0 var(--s-4);
  padding: 0;
  border: 0;
}
.vm-parts-field legend {
  margin: 0 0 var(--s-2);
  padding: 0;
  font-weight: 700;
}
.vm-parts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
.vm-part {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.15rem var(--s-3);
  min-height: 4.5rem;
  padding: 0.7rem 1rem;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
.vm-part:hover {
  border-color: var(--room);
  background: color-mix(in srgb, var(--room) 4%, #fff);
}
.vm-part.is-selected {
  border-color: var(--room);
  background: var(--room-soft);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--room) 16%, transparent);
}
.vm-part-letter {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-2);
  font: 700 0.95rem var(--font);
}
.vm-part.is-selected .vm-part-letter {
  border-color: var(--room);
  background: var(--room);
  color: #fff;
}
.vm-part-text {
  font: 650 1.4rem/1.1 var(--font-display);
}
.vm-part small {
  grid-column: 2;
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.3;
}
.vm-part[disabled],
.vm-parts-field[disabled] .vm-part {
  opacity: 0.7;
  cursor: default;
}
.vm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
.vm-workbench .feedback {
  margin-top: var(--s-5);
}
.vm-workbench .feedback p:last-child {
  margin-bottom: 0;
}

/* remember and reuse */
.vm-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}
.vm-card {
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.vm-card h2 {
  margin: var(--s-2) 0 var(--s-2);
  font-size: 1.4rem;
}
.vm-card p {
  margin: 0 0 var(--s-3);
  color: var(--ink-2);
}
.vm-card-icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--room-soft);
  color: var(--room-ink);
}
.vm-review-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  margin: var(--s-3) 0 var(--s-2);
  padding: 0;
  list-style: none;
}
.vm-review-track li {
  display: grid;
  gap: 0.1rem;
  padding: var(--s-2) var(--s-3);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.vm-review-track li.is-here {
  border-color: var(--room);
  background: var(--room-soft);
}
.vm-review-track strong {
  font-size: 0.9375rem;
}
.vm-review-track small {
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.3;
}
.vm-review-dot {
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
}
.vm-review-track li.is-here .vm-review-dot {
  border-color: var(--room);
  background: var(--room);
}
.vm-domain-link {
  margin-top: var(--s-1);
}
.vm-note {
  max-width: 70ch;
  margin: 0 auto;
  color: var(--ink-3);
  font-size: 0.9rem;
  text-align: center;
}

@media (max-width: 980px) {
  .vm-hero,
  .vm-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .vm-word-art {
    min-height: 0;
    justify-content: flex-start;
  }
}
@media (max-width: 700px) {
  .vm-bottom-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .vm-build-area {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-1);
  }
  .vm-target {
    text-align: left;
  }
}
@media (max-width: 480px) {
  .vm-tile {
    padding: 0.5rem 0.75rem;
    font-size: 1.05rem;
  }
  .vm-parts-grid,
  .vm-review-track {
    grid-template-columns: minmax(0, 1fr);
  }
  .vm-actions .btn {
    flex: 1 1 100%;
  }
}
@media print {
  .vm-hero,
  .vm-actions,
  .vm-parts-field,
  .vm-bottom-grid,
  .vm-note {
    display: none !important;
  }
  .vm-workbench {
    border: 0;
    box-shadow: none;
  }
}

/* ── Word cards and partner talk (/flashcards) ─────────────────────────── */
.fc-page {
  display: grid;
  gap: var(--s-5);
  max-width: 46rem;
  margin-inline: auto;
}
.fc-pick {
  display: grid;
  gap: var(--s-3);
}
.fc-card {
  padding: var(--s-5);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
}
.fc-count {
  margin: 0 0 var(--s-3);
  color: var(--ink-3);
  font-size: 0.9rem;
}
.fc-term {
  margin: var(--s-3) 0;
  font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem);
}
.fc-def {
  margin: var(--s-4) 0 var(--s-2);
  font-size: 1.15rem;
}
.fc-es {
  margin: 0 0 var(--s-4);
  color: var(--ink-2);
}
.fc-rate,
.fc-card .row-actions {
  justify-content: center;
}
.fc-pair {
  padding: var(--s-4) var(--s-5);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.fc-word {
  margin: var(--s-2) 0;
  font: 700 1.4rem var(--font);
}
.fc-roles {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-3) 0;
}
.fc-roles dt {
  font-weight: 700;
  color: var(--reading-ink);
}
.fc-roles dd {
  margin: 0;
}
.retell {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.retell-frames {
  margin: var(--s-2) 0;
  padding-inline-start: var(--s-5);
}
.retell-checks {
  margin: var(--s-3) 0 0;
  padding: 0;
  border: 0;
}
.retell-checks .check-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
}

/* ── Reading Room: my reading log ─────────────────────────────────────── */
.rr-log {
  display: grid;
  gap: var(--s-3);
  margin-block: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.rr-log-form {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  align-items: end;
}
.rr-log-list {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Word Sprint: a timed round over the same words. Results stay on this device. */
.vm-sprint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  padding: clamp(1rem, 2.2vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.vm-sprint h2 {
  margin: 0 0 var(--s-2);
  font-size: 1.3rem;
}
.vm-sprint p {
  margin: 0 0 var(--s-2);
  color: var(--ink-2);
}
.vm-sprint.is-running {
  justify-content: flex-start;
  padding-block: var(--s-3);
}
.vm-sprint-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  margin: 0;
  color: var(--ink);
}
.vm-sprint-clock {
  min-width: 3.5ch;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.vm-sprint.is-over {
  display: block;
}
@media (max-width: 480px) {
  .vm-sprint .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Weekly word goal: a practice target for this week, kept on this device. */
.vm-goal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  padding: clamp(1rem, 2.2vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.vm-goal h2 {
  margin: 0 0 var(--s-2);
  font-size: 1.2rem;
}
.vm-goal p {
  margin: 0 0 var(--s-2);
  color: var(--ink-2);
}
.vm-goal progress {
  display: block;
  width: min(22rem, 100%);
  height: 0.9rem;
}
.vm-goal-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
@media (max-width: 480px) {
  .vm-goal .btn {
    width: 100%;
    justify-content: center;
  }
}