/* Мини-урок грамматики. Варианты и смена карточек — из test.css, поле ввода и итог — из warmup.css. */

/* Объяснение правила */
.rule { margin: 0 0 14px; line-height: 1.6; }
.rule-examples { list-style: none; margin: 0 0 14px; padding: 12px 16px; display: grid; gap: 8px;
  border-left: 4px solid var(--accent-2); border-radius: 4px var(--radius-button) var(--radius-button) 4px;
  background: color-mix(in srgb, var(--accent-2) 10%, transparent); }
.rule-examples li { display: flex; flex-direction: column; font-weight: 600; }
.rule-examples small { font-weight: 400; color: var(--muted); font-size: .85rem; }
.rule-mistake { padding: 12px 16px; border-radius: var(--radius-button); background: var(--option); }
.rule-mistake p { margin: 0 0 4px; }
.rule-mistake .task { margin-bottom: 6px; }
.rule-mistake .wrong { color: var(--wrong-text); }
.rule-mistake .right { color: var(--correct-text); font-weight: 600; }
.rule-again summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--accent); }

/* Пропуск в задании */
.gap { color: var(--accent); letter-spacing: .05em; }

/* «Соберите предложение»: плашки-слова */
.built {
  display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
  min-height: 64px; padding: 10px; margin-bottom: 16px;
  border: 2px dashed var(--line); border-radius: var(--radius-button);
  transition: border-color var(--speed);
}
.built.is-correct { border-style: solid; border-color: var(--correct-text); background: var(--correct-bg); }
.built.is-wrong { border-style: solid; border-color: var(--wrong-text); background: var(--wrong-bg); }
.built-empty { align-self: center; color: var(--muted); font-size: .9rem; }
.tiles-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tile-word {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; cursor: pointer;
  font-weight: 700; font-size: 1.05rem; background: var(--option); box-shadow: 0 2px 8px #33221D12;
  transition: transform var(--speed) cubic-bezier(.2,.8,.2,1), opacity var(--speed);
}
.tile-word:active:not([disabled]) { transform: scale(.94); }
.tile-word.in { background: color-mix(in srgb, var(--accent) 14%, var(--option)); }
.tile-word.used { opacity: .25; pointer-events: none; }
.tile-word[disabled] { cursor: default; }