/* ═══════════════════════════════════════════════════════════════════
   LLOS.ai · Writer Practice Engine — styles
   Copyright © Pawan Nayar · LLOS.ai · 2026
   [2026-06-30] Ported from the Grammar Academy question-engine
   (grammar/universal_grammar_v2/index.html). Same pedagogy — layered hints,
   reveal stack, per-token feedback — re-skinned to the writer page tokens
   (--ch / Outfit / Playfair) and namespaced `wq-` so it never collides with
   writer.html's own classes. Inherits :root vars already defined in writer.html.
   ═══════════════════════════════════════════════════════════════════ */

.wq-practice { position: relative; }

/* Level row (Easy / Medium / Hard) — mirrors the gold quiz-level-row */
.wq-levels { display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 1rem; }
.wq-lvl {
  flex:0 0 auto; white-space:nowrap;
  font-family:'Outfit',sans-serif; font-size:.8rem; font-weight:700;
  color:var(--ink-2); background:#fff; border:1.5px solid var(--border);
  border-radius:999px; padding:.45rem 1rem; cursor:pointer;
  transition:all .15s; display:inline-flex; align-items:center; gap:.45rem;
}
.wq-lvl:hover { border-color:var(--ch); color:var(--ch-deep); }
.wq-lvl.active { background:var(--ch); color:#fff; border-color:var(--ch); }
.wq-lvl .wq-lvl-count { font-size:.68rem; font-weight:700; opacity:.8; }

/* Progress row */
.wq-prog-row { display:flex; align-items:center; gap:.6rem; margin-bottom:.85rem; font-size:.74rem; color:var(--ink-3); }
.wq-prog-num { font-family:'Outfit',sans-serif; font-weight:800; color:var(--ch-deep); }
.wq-prog-bar { flex:1; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.wq-prog-fill { height:100%; background:linear-gradient(90deg,var(--ch),var(--ch-deep)); transition:width .35s var(--spring,ease); width:0%; }

/* Practice panel — the gold practice-panel, re-skinned */
.wq-panel {
  background:#fff; border:2px solid var(--ch); border-radius:var(--radius-lg,20px);
  padding:1.4rem 1.5rem; box-shadow:var(--shadow-lg,0 16px 44px rgba(120,72,20,.10));
  position:relative; overflow:hidden;
}
@media(max-width:560px){ .wq-panel { padding:1.15rem; } }
.wq-tag {
  font-family:'Outfit',sans-serif; font-size:.62rem; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ch-deep);
  display:inline-flex; align-items:center; gap:.45rem; margin-bottom:.5rem;
}
.wq-tag .wq-dot { width:6px; height:6px; border-radius:50%; background:var(--ch); }
.wq-chip {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'Outfit',sans-serif; font-size:.6rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase;
  padding:.22rem .62rem; border-radius:999px; margin:.15rem 0 .75rem; width:fit-content;
}
.wq-chip.easy   { background:#dcfce7; color:#15803d; border:1px solid #86efac; }
.wq-chip.medium { background:#fef9c3; color:#854d0e; border:1px solid #fde68a; }
.wq-chip.hard   { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.wq-prompt {
  font-family:'Playfair Display',serif; font-size:1.12rem; line-height:1.45;
  color:var(--ink); margin-bottom:.5rem; font-weight:600;
}
.wq-howto {
  font-size:.78rem; color:var(--ink-3);
  padding:.45rem .75rem; border-radius:9px;
  background:var(--bg-warm); border:1px dashed var(--border); margin-bottom:.9rem;
}
.wq-pretrigger {
  font-family:'Playfair Display',serif; font-style:italic; font-size:.9rem;
  color:var(--ch-deep); background:var(--ch-soft); border-left:3px solid var(--ch);
  padding:.6rem .85rem; border-radius:0 8px 8px 0; margin:0 0 .9rem;
}

/* ── Engine: MCQ ── */
.wq-opts { display:flex; flex-direction:column; gap:.55rem; margin:.2rem 0; }
.wq-opts.compact { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
@media(max-width:420px){ .wq-opts.compact { grid-template-columns:1fr; } }
.wq-opt {
  display:flex; align-items:flex-start; gap:.65rem; width:100%; text-align:left;
  padding:.8rem 1rem; border:2px solid var(--border); background:#fff; border-radius:11px;
  font-family:'Inter',sans-serif; font-size:.92rem; font-weight:500; color:var(--ink);
  cursor:pointer; transition:all .15s; line-height:1.4; min-height:48px;
}
.wq-opt:hover { border-color:var(--ch); background:var(--ch-mist); }
.wq-opt.sel { border-color:var(--ch); background:var(--ch); color:#fff; }
.wq-opt.ok  { border-color:var(--ok); background:#f0fdf4; color:#166534; }
.wq-opt.err { border-color:#dc2626; background:#fef2f2; color:#991b1b; }
.wq-opt[disabled] { cursor:default; }
.wq-mark {
  width:22px; height:22px; flex:0 0 auto; margin-top:1px; border-radius:50%;
  border:2px solid var(--border); display:grid; place-items:center;
  font-family:'Outfit',sans-serif; font-size:.68rem; font-weight:800; color:var(--ink-3);
}
.wq-opt.sel .wq-mark { border-color:#fff; background:#fff; color:var(--ch); }
.wq-opt.ok  .wq-mark { border-color:var(--ok); background:var(--ok); color:#fff; }
.wq-opt.err .wq-mark { border-color:#dc2626; background:#dc2626; color:#fff; }
.wq-opt > span:not(.wq-mark) { flex:1; min-width:0; }

/* ── Engine: tap_words / word_redactor (tap a sentence) ── */
.wq-sent {
  font-family:'Playfair Display',serif; font-size:1.08rem; line-height:2;
  display:flex; flex-wrap:wrap; gap:3px; align-items:baseline; margin:.4rem 0 .2rem; user-select:none;
}
.wq-w { padding:3px 7px; border-radius:7px; cursor:pointer; border:1.5px solid transparent; transition:all .15s; }
.wq-w:hover { background:var(--ch-soft); }
.wq-w.sel { background:var(--ch); color:#fff; border-color:var(--ch); }
.wq-w.ok  { background:#dcfce7; border-color:var(--ok); color:#14532d; }
.wq-w.err { background:#fee2e2; border-color:#dc2626; color:#991b1b; }
.wq-w.miss { outline:2px dashed #dc2626; }
.wq-punct { color:var(--ink); margin-left:1px; user-select:none; }
/* redactor: a struck-out word reads "cut" */
.wq-w.redacted { color:var(--ink-3); opacity:.55; position:relative; }
.wq-w.redacted::after { content:''; position:absolute; left:4px; right:4px; top:50%; height:2.5px; background:#dc2626; transform:translateY(-50%) rotate(-2deg); border-radius:2px; }

/* ── Engine: cloze (blanks + word bank) ── */
.wq-cloze {
  font-family:'Playfair Display',serif; font-size:1.05rem; line-height:2.3;
  display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin:.3rem 0;
}
.wq-blank {
  display:inline-flex; align-items:center; justify-content:center; min-width:92px;
  padding:4px 10px; border-bottom:2.5px solid var(--ch); background:var(--ch-soft);
  color:var(--ch-deep); font-weight:700; cursor:pointer; border-radius:5px 5px 0 0;
  font-size:.94rem; transition:all .15s;
}
.wq-blank.active { outline:2px solid var(--ch); }
.wq-blank.filled { background:var(--ch); color:#fff; }
.wq-blank.ok  { background:#dcfce7; border-color:var(--ok); color:#14532d; }
.wq-blank.err { background:#fee2e2; border-color:#dc2626; color:#991b1b; }
.wq-bank { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.wq-bank-w {
  padding:.5rem .9rem; border:1.5px solid var(--border); background:#fff; border-radius:9px;
  font-family:'Inter',sans-serif; font-size:.88rem; font-weight:600; color:var(--ink);
  cursor:pointer; transition:all .15s; min-height:38px; display:inline-flex; align-items:center;
}
.wq-bank-w:hover { border-color:var(--ch); background:var(--ch-soft); }
.wq-bank-w.used { opacity:.3; pointer-events:none; }

/* ── Engine: odd_one_out ── */
.wq-tiles { display:flex; flex-wrap:wrap; gap:.6rem; margin:.3rem 0; }
.wq-tile {
  flex:1 1 calc(50% - .6rem); min-width:130px; text-align:center;
  padding:1rem .8rem; border:2px solid var(--border); background:#fff; border-radius:11px;
  font-family:'Playfair Display',serif; font-size:1rem; font-weight:600; color:var(--ink);
  cursor:pointer; transition:all .15s; user-select:none;
}
.wq-tile:hover { border-color:var(--ch-soft); background:var(--ch-mist); transform:translateY(-1px); }
.wq-tile.sel { border-color:var(--ch); background:var(--ch-mist); color:var(--ch-deep); }
.wq-tile.ok  { border-color:var(--ok); background:#f0fdf4; color:#166534; }
.wq-tile.err { border-color:#dc2626; background:#fef2f2; color:#991b1b; }

/* ── Engine: sequence_sorter (tap two to swap) ── */
.wq-stack { display:flex; flex-direction:column; gap:.55rem; margin:.3rem 0; }
.wq-sort {
  display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem;
  border:2px solid var(--border); background:#fff; border-radius:11px;
  font-family:'Inter',sans-serif; font-size:.92rem; color:var(--ink); cursor:pointer;
  transition:all .15s; user-select:none;
}
.wq-sort::before { content:'⇅'; color:var(--ink-4); font-size:1rem; }
.wq-sort:hover { border-color:var(--ch-soft); transform:translateY(-1px); }
.wq-sort.sel { border-color:var(--ch); background:var(--ch-mist); color:var(--ch-deep); }
.wq-sort.ok  { border-color:var(--ok); background:#f0fdf4; }

/* ── Engine: sentence_splitter (tap the gap) ── */
.wq-split {
  font-family:'Playfair Display',serif; font-size:1.1rem; line-height:2.1;
  display:flex; flex-wrap:wrap; align-items:center; gap:0; margin:.3rem 0; user-select:none;
}
.wq-split-w { padding:0 1px; }
.wq-split-gap {
  width:18px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; margin:0 3px; border-radius:5px; transition:background .15s; position:relative;
}
.wq-split-gap:hover { background:var(--ch-soft); }
.wq-split-gap.active::after { content:'∣'; font-weight:900; font-size:1.4rem; color:var(--ch-deep); }
.wq-split-gap.ok::after  { content:'∣'; font-weight:900; font-size:1.4rem; color:var(--ok); }
.wq-split-gap.err::after { content:'✕'; font-weight:900; font-size:1rem; color:#dc2626; }

/* ── Feedback cards ── */
.wq-fb { margin-top:1rem; display:flex; flex-direction:column; gap:.6rem; }
.wq-card {
  border-radius:11px; padding:.85rem 1rem; font-size:.9rem; line-height:1.55;
  border:1px solid; font-family:'Inter',sans-serif;
}
.wq-card .wq-card-t { font-family:'Outfit',sans-serif; font-size:.62rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; opacity:.85; margin-bottom:.3rem; }
.wq-card.good    { background:#f0fdf4; border-color:rgba(22,163,74,.28); color:#14532d; }
.wq-card.verdict { background:#fff7ed; border-color:rgba(234,122,39,.3); color:var(--ink); }
.wq-card.hint-m  { background:var(--ch-mist); border-color:rgba(234,122,39,.25); color:var(--ink); }
.wq-card.hint-l  { background:#f3e8ff; border-color:rgba(107,33,168,.22); color:#2e2055; }
.wq-card.reveal  { background:#f0fdf4; border-color:rgba(22,163,74,.3); color:#14532d; }
/* reveal stack on correct */
.wq-stack-reveal { display:flex; flex-direction:column; gap:.5rem; }
.wq-rev { padding:.7rem .9rem; border-radius:10px; font-size:.88rem; line-height:1.55; border:1px solid; font-family:'Inter',sans-serif; }
.wq-rev .wq-rev-l { font-family:'Outfit',sans-serif; font-size:.58rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.8; margin-bottom:.25rem; }
.wq-rev.reinforce { background:#f0fdf4; border-color:rgba(22,163,74,.25); color:#14532d; }
.wq-rev.insight   { background:var(--ch-mist); border-color:rgba(234,122,39,.22); color:var(--ink); }
.wq-rev.reflect   { background:#f3e8ff; border-color:rgba(107,33,168,.2); color:#2e2055; }
/* per-token diagnostics (wrong / missed) */
.wq-token { background:#fff; border:1px solid var(--border); border-radius:9px; padding:.6rem .8rem; font-size:.86rem; line-height:1.5; }
.wq-token.wrong  { border-left:3px solid #dc2626; }
.wq-token.missed { border-left:3px solid #f59e0b; }
.wq-token .wq-token-tag { display:inline-block; font-family:'Outfit',sans-serif; font-size:.58rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:.1rem .45rem; border-radius:5px; margin-right:.4rem; }
.wq-token.wrong  .wq-token-tag { background:rgba(220,38,38,.1); color:#7f1d1d; }
.wq-token.missed .wq-token-tag { background:rgba(245,158,11,.15); color:#78350f; }
.wq-token .wq-token-w { font-weight:800; color:var(--ink); }

/* ── Controls ── */
.wq-ctrls { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; align-items:center; justify-content:flex-end; }
.wq-btn {
  flex:0 0 auto; white-space:nowrap; font-family:'Outfit',sans-serif; font-size:.82rem; font-weight:800;
  padding:.55rem 1.05rem; border-radius:10px; cursor:pointer; transition:all .15s; border:1.5px solid; min-height:38px;
}
.wq-btn.hint   { background:#fff; border-color:var(--ch); color:var(--ch-deep); }
.wq-btn.hint:hover { background:var(--ch-soft); }
.wq-btn.reveal { background:#fff; border-color:var(--ink-3); color:var(--ink-2); }
.wq-btn.reveal:hover { background:var(--bg-warm); }
.wq-btn.skip   { background:#fff; border-color:var(--border); color:var(--ink-3); }
.wq-btn.skip:hover { border-color:var(--ink-3); color:var(--ink); }
.wq-btn.check  { background:var(--ch); border-color:var(--ch); color:#fff; }
.wq-btn.check:hover { background:var(--ch-deep); border-color:var(--ch-deep); }
.wq-btn:disabled { opacity:.4; cursor:default; }
.wq-btn.exit { margin-right:auto; background:none; border-color:transparent; color:var(--ink-3); padding-left:0; }
.wq-btn.exit:hover { color:var(--ch-deep); }

/* ── Results ── */
.wq-result { text-align:center; padding:.5rem 0; }
.wq-result-score { font-family:'Playfair Display',serif; font-weight:800; font-size:2.4rem; color:var(--ch-deep); }
.wq-result-msg { color:var(--ink-2); font-size:.95rem; margin:.2rem 0 1rem; }