/* ── Word Sentences: students write one sentence per dictionary word ─────── */

.ws-page { max-width: 760px; margin: 0 auto; padding: 24px 16px 120px; }
.ws-page--wide { max-width: 1000px; }

.ws-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.ws-head h1 { margin: 0; font-size: 1.5rem; color: var(--text); }
.ws-sub { color: var(--muted); font-size: 0.9rem; margin: 0 0 22px; }

.ws-section-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin: 26px 0 10px;
}
.ws-section-title--warn { color: #ef4444; }

.ws-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.ws-card--revision { border-color: color-mix(in srgb, #ef4444 45%, var(--border)); }
.ws-card--done { opacity: 0.85; }

.ws-word-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ws-word { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.ws-pos {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-dim); border-radius: 5px; padding: 2px 7px;
}
.ws-meaning { color: var(--muted); font-size: 0.9rem; }

.ws-input {
  width: 100%; box-sizing: border-box; margin-top: 12px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; font: inherit; font-size: 0.95rem; line-height: 1.5;
  resize: vertical; min-height: 64px; outline: none;
}
.ws-input:focus { border-color: var(--accent); }

.ws-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ws-btn {
  background: var(--accent); color: var(--accent-text); border: none; border-radius: 10px;
  padding: 9px 18px; font-size: 0.88rem; font-weight: 700; cursor: pointer;
}
.ws-btn:hover { background: var(--accent-hover); }
.ws-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ws-btn--ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.ws-btn--ghost:hover { background: var(--accent-dim); color: var(--text); }
.ws-btn--approve { background: #16a34a; color: #fff; }
.ws-btn--approve:hover { background: #15803d; }
.ws-btn--revise { background: #dc2626; color: #fff; }
.ws-btn--revise:hover { background: #b91c1c; }

.ws-warn { font-size: 0.8rem; color: #f59e0b; }
.ws-error { font-size: 0.82rem; color: #ef4444; }

.ws-sentence { margin-top: 10px; font-size: 0.98rem; color: var(--text); line-height: 1.5; }
.ws-sentence--old { color: var(--muted); text-decoration: line-through; font-size: 0.88rem; margin-top: 6px; }

.ws-feedback {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--accent-dim); color: var(--text); font-size: 0.88rem; line-height: 1.5;
}
.ws-feedback-label {
  display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 3px;
}

.ws-status {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 5px; padding: 2px 7px; margin-left: auto;
}
.ws-status--pending_review { background: color-mix(in srgb, #eab308 16%, transparent); color: #ca8a04; }
.ws-status--reviewed       { background: color-mix(in srgb, #22c55e 16%, transparent); color: #16a34a; }
.ws-status--needs_revision { background: color-mix(in srgb, #ef4444 16%, transparent); color: #dc2626; }

.ws-empty { text-align: center; color: var(--muted); padding: 40px 16px; font-size: 0.92rem; }

/* Teacher review */
.ws-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.ws-tab {
  background: var(--surface); color: var(--muted); border: 1px solid var(--border);
  border-radius: 10px; padding: 7px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.ws-tab--active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.ws-student { font-size: 0.78rem; font-weight: 700; color: var(--accent); }

/* The approved sentence inside existing word popups and cards */
.word-example {
  margin-top: 6px; font-size: 0.82rem; font-style: italic; line-height: 1.4; opacity: 0.9;
}

/* Word Sentences: the moment the student writes the word, its green mark and
   the "Nice, you used it" line pop in once. */
@keyframes ws-pop {
  0%   { opacity: 0; transform: translateY(3px) scale(.92); }
  60%  { opacity: 1; transform: translateY(0) scale(1.04); }
  100% { opacity: 1; transform: none; }
}
@keyframes ws-glow {
  0%   { text-shadow: 0 0 12px rgba(52, 211, 153, .9); }
  100% { text-shadow: 0 0 0 rgba(52, 211, 153, 0); }
}
.ws-used { animation: ws-pop .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.ws-hit  { animation: ws-glow .9s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .ws-used, .ws-hit { animation: none; }
}