/* Phase 3: typed cloze. Intentionally scoped to new components.
   The control is one inline box (input + optional unit) that sits in the sentence like a word: vertically centred on
   the line, never wrapping the text around a tall block. Its selectors carry the parent class so the design-system's
   input[type=text]{width:100%} rule on marketplace pages cannot stretch it. */
.text-cloze-control{position:relative;display:inline-flex;align-items:center;gap:.4rem;max-width:100%;vertical-align:middle;margin:0 .3em;white-space:nowrap}
.text-cloze-control .text-cloze-input{box-sizing:border-box;display:inline-block;width:190px;max-width:100%;height:38px;min-height:38px;margin:0;border:1px solid var(--sk-line-strong,#94a3b8);border-radius:8px;padding:0 10px;
  background:var(--sk-surface,#fff);color:var(--sk-ink,#172943);font:inherit;font-size:.95em;line-height:1.3;vertical-align:middle;text-align:start;box-shadow:none;transition:border-color .15s ease,box-shadow .15s ease}
.text-cloze-control .text-cloze-input[data-response-kind="numeric"]{width:150px;text-align:center;font-variant-numeric:tabular-nums}
.text-cloze-control .text-cloze-input::placeholder{color:var(--sk-ink-faint,#94a3b8);opacity:1}
.text-cloze-control .text-cloze-input:focus{outline:0;border-color:var(--sk-amber,#e9ad00);box-shadow:0 0 0 3px var(--sk-amber-soft,rgba(255,194,24,.18))}
.text-cloze-control .text-cloze-input:disabled{opacity:1;background:var(--sk-surface-2,var(--sk-surface-soft,#f1f5f9));color:var(--sk-ink,#172943)}
.tc-runtime-note,.tc-note{font-size:13px;line-height:1.8;color:var(--sk-ink-soft,#475569)}
.tc-feedback{display:grid;gap:10px;margin:14px 0}.tc-feedback-row{display:grid;gap:6px;padding:12px;border:1px solid var(--sk-line,#dbe3ee);border-radius:9px;overflow-wrap:anywhere}
.tc-feedback-row.status-correct{border-inline-start:4px solid #16845c}.tc-feedback-row.status-incorrect{border-inline-start:4px solid #be3b48}
.tc-feedback-row small{display:block}.tc-author{line-height:1.9}.tc-author h3{margin:0 0 12px}.tc-author p{font-size:13px}
.tc-blank-editor{border:1px solid var(--sk-line,#dbe3ee);border-radius:12px;padding:16px;margin:18px 0;min-width:0}
.tc-blank-editor legend{font-weight:700;font-size:14px;padding:0 8px}.tc-blank-editor label{display:block;font-size:13px;margin:10px 0}
.tc-blank-editor input:not([type=checkbox]),.tc-blank-editor textarea,.tc-author select{box-sizing:border-box;width:100%;padding:10px;border:1px solid #94a3b8;border-radius:8px;background:var(--sk-surface,#fff);color:var(--sk-ink,#172943);font:inherit}
.tc-blank-editor textarea{min-height:90px;resize:vertical}.tc-blank-editor .tc-check{display:flex;align-items:center;gap:8px}
.tc-button{font:inherit;line-height:1.7;padding:8px 13px;border-radius:8px;border:1px solid #94a3b8;background:var(--sk-surface,#fff);color:var(--sk-ink,#172943);cursor:pointer;margin:4px;max-width:100%;white-space:normal}
.tc-button:disabled{opacity:.55;cursor:not-allowed}.tc-actions{display:flex;gap:8px;flex-wrap:wrap}.tc-notice{padding:12px;background:#fff4df;border-radius:8px;color:#754913}
.tc-preview-result{margin-top:14px;line-height:1.8}.tc-preview input{margin:4px;max-width:90%}
@media(max-width:600px){.text-cloze-control .text-cloze-input{width:155px;font-size:16px}.text-cloze-control .text-cloze-input[data-response-kind="numeric"]{width:130px}.tc-blank-editor{padding:12px}.tc-author{min-width:0}}

/* Phase 3b: public numeric unit/format guidance, never a private bound.
   The unit is a small chip right after the field. The format note used to be a block inside the inline control and
   broke the sentence around it; it is now a small helper under the field, shown only while the field is focused
   (assistive tech still gets it through aria-describedby). */
.text-cloze-control .tc-unit{flex:none;padding:.1rem .5rem;border:1px solid var(--sk-line-strong,#cbd5e1);border-radius:6px;background:var(--sk-surface-2,#f8fafc);color:var(--sk-ink-soft,#475569);font-size:.84em;line-height:1.7;unicode-bidi:isolate;white-space:nowrap}
.text-cloze-control .tc-number-help,.text-cloze-control .tc-dependency-note{position:absolute;top:calc(100% + 6px);inset-inline-start:0;z-index:5;width:max-content;max-width:min(30rem,82vw);padding:.35rem .65rem;
  border:1px solid var(--sk-line,#dbe3ee);border-radius:8px;background:var(--sk-surface,#fff);color:var(--text-muted,#64748b);box-shadow:0 12px 28px -16px rgba(0,0,0,.35);
  font-size:.74em;font-weight:400;line-height:1.7;white-space:normal;text-align:start;pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s}
.text-cloze-control .tc-number-help + .tc-dependency-note{top:calc(100% + 48px)}
.text-cloze-control:focus-within .tc-number-help,.text-cloze-control:focus-within .tc-dependency-note{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media(prefers-reduced-motion:reduce){.text-cloze-control .tc-number-help,.text-cloze-control .tc-dependency-note,.text-cloze-control .text-cloze-input{transition:none}}
.tc-numeric-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;background:var(--surface-muted,#f6f8fc);border:1px solid var(--border-color,#d8e2ef);padding:1rem;border-radius:.7rem;margin:.5rem 0}
.tc-numeric-editor .tc-note{grid-column:1/-1;margin:.1rem 0}.tc-numeric-key{display:flex;flex-direction:column;gap:.3rem;overflow-wrap:anywhere}
.tc-author input:disabled{opacity:.7;cursor:not-allowed}.tc-numeric-editor label{min-width:0}
@media(max-width:650px){.tc-numeric-editor{grid-template-columns:1fr;padding:.75rem}.text-cloze-control .text-cloze-input{max-width:100%}}

/* Phase 4: native radio controls; no layout/behavior changes to older inputs. */
.tc-selection{display:block;max-width:100%;line-height:2.5;margin:.6rem 0;white-space:normal}
.tc-select-passage{display:block;white-space:pre-wrap;overflow-wrap:anywhere}
.tc-selection .tc-select-option{position:relative;display:inline-block;max-width:100%;vertical-align:baseline;cursor:pointer;line-height:2.7;font:inherit;margin:0}
.tc-selection .text-cloze-choice{position:absolute;width:1px!important;height:1px!important;min-height:0!important;opacity:0;margin:0!important;padding:0!important;overflow:hidden;clip-path:inset(50%)}
.tc-selection .tc-select-option>span{padding:.28rem .2rem;border-bottom:2px solid #b5c7df;border-radius:.25rem;box-decoration-break:clone;-webkit-box-decoration-break:clone;white-space:pre-wrap}
.tc-selection .tc-select-option:hover>span{background:var(--surface-muted,#eff4fd)}
.tc-selection input:checked+span{background:#dce9ff!important;color:#163b82!important;border-bottom-color:#1d4ed8}
.tc-selection input:focus-visible+span{outline:2px solid #1d4ed8;outline-offset:3px}
.tc-selection input:disabled+span{cursor:default;opacity:.8}
.tc-selection .tc-select-neutral{white-space:pre-wrap}
.tc-selection .tc-select-clear{position:relative;display:inline-block;font-size:.78em;margin-top:.65rem;padding:.12rem .45rem;border:1px solid #94a3b8;border-radius:.35rem;cursor:pointer;line-height:1.8}
.tc-selection .tc-select-clear>span{display:inline-block;padding:0 .2rem}
.tc-select-hint,.tc-dependency-note{display:block;line-height:1.8;font-size:.76em;color:var(--text-muted,#52657c);max-width:38rem;white-space:normal}
.tc-selection-editor{padding:.8rem;border:1px solid var(--sk-line,#dbe3ee);border-radius:.6rem;background:var(--surface-muted,#f6f8fc)}
.tc-segment-editor{display:grid;grid-template-columns:minmax(120px,1fr) auto auto auto;align-items:center;gap:.5rem;border-top:1px solid var(--sk-line,#dbe3ee);padding:.5rem 0}
.tc-segment-editor label{min-width:0;margin:.3rem 0}.tc-segment-editor .tc-check{font-size:12px}
.tc-preview .tc-selection input{margin:0;max-width:none}
@media(max-width:780px){.tc-segment-editor{grid-template-columns:1fr 1fr}.tc-segment-editor>label:first-child{grid-column:1/-1}.tc-selection-editor{padding:.6rem}.tc-select-option{font-size:16px}}