/* CuraPraxis: interaction styles.
   Inherits the brand tokens defined in index.html (:root). Nothing new is
   invented here: petrel for correct, rust for wrong, slate for the practice tag. */

.ix{
  background:var(--surface);border:1.5px solid var(--border);border-radius:16px;
  padding:1.2rem 1.3rem;margin:1.6rem 0;box-shadow:var(--shadow-sm);
}
.ix.done{border-color:var(--mint)}
.ix-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem}
.ix-tag{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;padding:.3rem .7rem;border-radius:999px;
  background:#E8EEED;color:var(--purple-deep);
}
.ix-tag.recall{background:var(--surface-2);color:var(--mint-deep)}
.ix-prompt{font-size:15px;font-weight:500;color:var(--ink);margin-bottom:.8rem;line-height:1.55}
.ix-sub{font-size:14px;color:var(--ink-soft);margin-bottom:.8rem}

/* feedback, shared */
.ix-fb{display:none;font-size:14px;margin-top:.9rem;line-height:1.6;border-radius:10px;padding:.7rem .9rem}
.ix-fb.show{display:block}
.ix-fb.ok{background:var(--surface-2);color:var(--ink-soft)}
.ix-fb.ok b{color:var(--mint-deep)}
.ix-fb.no{background:#F5ECE8;color:var(--ink-soft)}
.ix-fb.no b{color:#96432E}
.ix-fb.hint{background:var(--surface-2);color:var(--ink-faint);font-size:13px;padding:.5rem .8rem}
.ix-note{margin-top:.6rem;font-size:13px;color:var(--ink-faint)}

/* ---- spot ---- */
.ix-answer{
  background:var(--surface-2);border-radius:12px;padding:1rem;
  font-size:15px;line-height:2.1;color:var(--ink-soft);
}
.spot-part{
  display:inline;border:none;background:transparent;cursor:pointer;
  font:inherit;color:inherit;padding:.2rem .25rem;border-radius:6px;
  border-bottom:2px dotted var(--ink-faint);transition:background .15s;
}
.spot-part:not(:disabled):hover{background:rgba(14,82,87,.10)}
.spot-part:disabled{cursor:default}
.spot-part.reveal-bad{background:#F5ECE8;border-bottom:2px solid var(--bad,#d1495b);color:var(--ink);font-weight:600}
.spot-part.reveal-wrong{outline:2px solid #e57;outline-offset:1px}

/* ---- prompt ---- */
.ix-ta{
  width:100%;padding:.8rem .9rem;border-radius:12px;border:1.5px solid var(--border);
  font-family:var(--ff-body);font-size:14.5px;line-height:1.55;color:var(--ink);resize:vertical;
}
.ix-ta:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(78,205,196,.15)}
.pc-list{margin:.9rem 0}
.pc-title{font-size:12px;font-family:var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.5rem}
.pc{display:flex;align-items:flex-start;gap:.55rem;font-size:14px;color:var(--ink-soft);margin-bottom:.4rem;cursor:pointer}
.pc input{margin-top:.25rem;accent-color:var(--mint);flex-shrink:0}
.ix-btn{
  padding:.6rem 1.2rem;border-radius:999px;background:var(--ink);color:#fff;
  font-weight:600;font-size:14px;border:none;cursor:pointer;
}
.ix-btn:disabled{opacity:.45;cursor:default}
.ix-model{
  margin-top:.6rem;padding:.8rem .9rem;border-radius:10px;background:var(--surface);
  border-left:3px solid var(--purple);font-size:14px;color:var(--ink);line-height:1.6;
}

/* ---- sort ---- */
.sort-pool{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;min-height:8px}
.sort-item{
  text-align:left;padding:.55rem .8rem;border-radius:11px;border:1.5px solid var(--border);
  background:var(--surface);font-size:13.5px;color:var(--ink-soft);cursor:pointer;
  max-width:100%;transition:all .15s;
}
.sort-item:not(:disabled):hover{border-color:var(--mint);background:var(--surface-2)}
.sort-item.sel{border-color:var(--purple);box-shadow:0 0 0 3px rgba(176,107,255,.18)}
.sort-item.placed{cursor:default;font-size:12.5px}
.sort-item.right{border-color:var(--mint-deep);background:var(--surface-2)}
.sort-item.wrong{border-color:#e57;background:#F5ECE8}
.sort-buckets{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}
.sort-bucket{
  border:1.5px dashed var(--border);border-radius:13px;padding:.7rem;min-height:96px;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.sort-bucket:hover{border-color:var(--mint);background:var(--surface-2)}
.sb-title{
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--sb);margin-bottom:.5rem;
}
.sb-drop{display:flex;flex-direction:column;gap:.35rem}

/* ---- recall ---- */
.ix-recall{background:linear-gradient(110deg,var(--surface-2),#E8EEED)}
.rc-opts{display:grid;gap:.45rem}
.rc-opt{
  text-align:left;padding:.6rem .85rem;border-radius:11px;border:1.5px solid var(--border);
  background:var(--surface);font-size:14px;color:var(--ink-soft);cursor:pointer;transition:all .15s;
}
.rc-opt:not(:disabled):hover{border-color:var(--mint);background:var(--surface-2)}
.rc-opt:disabled{cursor:default}
.rc-opt.correct{border-color:var(--mint-deep);background:var(--surface-2);color:var(--ink);font-weight:600}
.rc-opt.wrong{border-color:#e57}

@media(prefers-reduced-motion:reduce){
  .ix,.sort-item,.rc-opt,.spot-part{transition:none}
}