/* Stage 2.2 — frozen Exercise UI + Audio / Recorder implementation. */
[data-hor-ui][data-hor-ui]{--hor-stage22-success:#18794E;--hor-stage22-success-bg:#EDF9F3;--hor-stage22-error:#B42318;--hor-stage22-error-bg:#FFF2F0;--hor-stage22-soft:#F2F4FA}

/* Exercise card anatomy */
[data-hor-ui][data-hor-ui] .hor-task-card{background:var(--hor-stage22-soft)!important;border:1px solid var(--hor-border,#DDE2F0)!important;border-radius:18px!important;padding:24px!important;box-shadow:none!important}
[data-hor-ui][data-hor-ui] .hor-task-card>p:first-child{margin-top:0;margin-bottom:18px}
[data-hor-ui][data-hor-ui] .hor-task-card>p:first-child strong{font-size:18px;line-height:1.45}
[data-hor-ui][data-hor-ui] .hor-task-card>p:has(>label>input[type="radio"]),
[data-hor-ui][data-hor-ui] .hor-task-card>p:has(>label>input[type="checkbox"]){margin:8px 0}
[data-hor-ui][data-hor-ui] .hor-task-card label:has(input[type="radio"]),
[data-hor-ui][data-hor-ui] .hor-task-card label:has(input[type="checkbox"]){display:flex!important;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 16px;background:#fff;border:1px solid var(--hor-border,#DDE2F0);border-radius:14px;cursor:pointer;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
[data-hor-ui][data-hor-ui] .hor-task-card label:has(input[type="radio"]):hover,
[data-hor-ui][data-hor-ui] .hor-task-card label:has(input[type="checkbox"]):hover{border-color:#AEB7D3;background:#FBFCFF}
[data-hor-ui][data-hor-ui] .hor-task-card label:has(input:checked){border-color:var(--hor-navy,#202867);background:#F1F3FF;box-shadow:0 0 0 1px rgba(32,40,103,.05)}
[data-hor-ui][data-hor-ui] .hor-task-card input[type="radio"],
[data-hor-ui][data-hor-ui] .hor-task-card input[type="checkbox"]{width:22px;height:22px;min-width:22px;margin:0;accent-color:var(--hor-navy,#202867)}
[data-hor-ui][data-hor-ui] .hor-task-card:has(.hor-task-feedback[data-result="correct"]) label:has(input:checked){border-color:var(--hor-stage22-success);background:var(--hor-stage22-success-bg)}
[data-hor-ui][data-hor-ui] .hor-task-card:has(.hor-task-feedback[data-result="wrong"]) label:has(input:checked){border-color:var(--hor-stage22-error);background:var(--hor-stage22-error-bg)}

/* Actions: one primary, restrained secondary and tertiary. */
[data-hor-ui][data-hor-ui] .hor-task-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;align-items:center}
[data-hor-ui][data-hor-ui] .hor-task-primary,
[data-hor-ui][data-hor-ui] .hor-recorder-primary{min-height:48px;padding:0 20px;border:1px solid var(--hor-yellow,#FFCF3F);border-radius:13px;background:var(--hor-yellow,#FFCF3F);color:var(--hor-navy,#202867);font:600 16px/1.2 inherit;cursor:pointer}
[data-hor-ui][data-hor-ui] .hor-task-secondary{min-height:48px;padding:0 18px;border:1px solid var(--hor-navy,#202867)!important;border-radius:13px!important;background:#fff!important;color:var(--hor-navy,#202867)!important;font-weight:600!important;cursor:pointer}
[data-hor-ui][data-hor-ui] .hor-task-tertiary,
[data-hor-ui][data-hor-ui] .hor-task-hint>summary{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 4px;border:0;background:transparent;color:var(--hor-navy,#202867);font-weight:600;cursor:pointer;text-decoration:none}
[data-hor-ui][data-hor-ui] .hor-task-hint{margin-top:8px;border:0;background:transparent}
[data-hor-ui][data-hor-ui] .hor-task-hint[open]{padding:0 0 10px}
[data-hor-ui][data-hor-ui] .hor-task-hint[open]>summary{margin-bottom:8px}
[data-hor-ui][data-hor-ui] .hor-task-feedback{margin-top:14px;padding:14px 16px;border-radius:14px;font-weight:600}
[data-hor-ui][data-hor-ui] .hor-task-feedback[data-result="correct"]{background:var(--hor-stage22-success-bg);color:var(--hor-stage22-success);border:1px solid #BFE8D1}
[data-hor-ui][data-hor-ui] .hor-task-feedback[data-result="wrong"]{background:var(--hor-stage22-error-bg);color:var(--hor-stage22-error);border:1px solid #F4C7C0}
[data-hor-ui][data-hor-ui] .hor-feedback-title{margin:0}

/* Ordering */
[data-hor-ui][data-hor-ui] .hor-order-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
[data-hor-ui][data-hor-ui] .hor-order-list>li{display:grid;grid-template-columns:auto 46px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:64px;padding:8px 12px;background:#fff;border:1px solid var(--hor-border,#DDE2F0);border-radius:14px}
[data-hor-ui][data-hor-ui] .hor-order-number{font-weight:700;color:var(--hor-muted,#69708F)}
[data-hor-ui][data-hor-ui] .hor-order-handle{width:44px;height:44px;border:1px solid var(--hor-border,#DDE2F0);border-radius:12px;background:#F8F9FC;color:var(--hor-navy,#202867);font-size:22px;cursor:grab}
[data-hor-ui][data-hor-ui] .hor-order-handle:active{cursor:grabbing}
[data-hor-ui][data-hor-ui] .hor-order-text{min-width:0}
[data-hor-ui][data-hor-ui] [data-order-fallback]{margin:10px 0 0!important;min-height:40px!important;border:0!important;background:transparent!important;padding:0 4px!important;color:var(--hor-navy,#202867)!important;font-weight:600!important}
[data-hor-ui][data-hor-ui] .hor-order-fallback{display:none;gap:6px}
[data-hor-ui][data-hor-ui] .hor-order-use-buttons .hor-order-fallback{display:flex}
[data-hor-ui][data-hor-ui] .hor-order-fallback button{width:42px;height:42px;border:1px solid var(--hor-border,#DDE2F0);border-radius:10px;background:#fff;color:var(--hor-navy,#202867)}
[data-hor-ui][data-hor-ui] .hor-order-list>li.is-dragging{opacity:.78;border-color:var(--hor-navy,#202867);box-shadow:0 8px 22px rgba(32,40,103,.12)}

/* Audio Media Panel */
[data-hor-ui][data-hor-ui] .hor-media-panel{background:#fff;border:1px solid var(--hor-border,#DDE2F0);border-radius:18px;box-shadow:none}
[data-hor-ui][data-hor-ui] .hor-audio-compact.hor-media-panel{padding:16px!important;margin:16px 0 4px}
[data-hor-ui][data-hor-ui] .hor-audio-controls{gap:12px!important}
[data-hor-ui][data-hor-ui] button.hor-audio-play{width:52px!important;min-width:52px!important;height:52px!important;min-height:52px!important;background:var(--hor-navy,#202867)!important}
[data-hor-ui][data-hor-ui] .hor-audio-track{min-height:52px!important;background:#F7F8FC!important;border-radius:16px!important}
[data-hor-ui][data-hor-ui] [data-rate]{min-height:44px;border-radius:12px}
[data-hor-ui][data-hor-ui] .hor-audio-tools{margin-top:10px!important;justify-content:flex-start}
[data-hor-ui][data-hor-ui] [data-audio-status]{min-height:20px;margin:8px 0 0;color:var(--hor-muted,#69708F)}
[data-hor-ui][data-hor-ui] .hor-audio-missing{display:flex;align-items:center;gap:14px;padding:16px;margin:14px 0;color:var(--hor-muted,#69708F);background:#F7F8FC}
[data-hor-ui][data-hor-ui] .hor-audio-missing strong{display:block;color:var(--hor-navy,#202867);margin-bottom:2px}
[data-hor-ui][data-hor-ui] .hor-audio-missing p{margin:0}
[data-hor-ui][data-hor-ui] .hor-audio-missing-icon{display:grid;place-items:center;width:44px;height:44px;min-width:44px;border-radius:50%;background:#E9ECF6;color:var(--hor-navy,#202867)}

/* Recorder Media Panel */
[data-hor-ui][data-hor-ui] .hor-recorder-shell{background:transparent!important;border:0!important;padding:0!important}
[data-hor-ui][data-hor-ui] .hor-recorder-panel{padding:18px;margin-top:14px}
[data-hor-ui][data-hor-ui] .hor-recorder-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
[data-hor-ui][data-hor-ui] .hor-recorder-stop{background:#fff!important;border-color:var(--hor-stage22-error)!important;color:var(--hor-stage22-error)!important}
[data-hor-ui][data-hor-ui] .hor-recorder-panel[data-state="recording"]{border-color:#F1AAA3;background:#FFF9F8}
[data-hor-ui][data-hor-ui] .hor-recorder-panel[data-state="recording"] .hor-recorder-status{color:var(--hor-stage22-error);font-weight:700}
[data-hor-ui][data-hor-ui] .hor-recorder-status{min-height:24px;margin:12px 0 6px;color:var(--hor-muted,#69708F)}
[data-hor-ui][data-hor-ui] .hor-recorder-panel audio{width:100%;margin-top:10px}

@media(max-width:780px){
 [data-hor-ui][data-hor-ui] .hor-task-card{padding:18px!important}
 [data-hor-ui][data-hor-ui] .hor-task-actions{display:grid!important;grid-template-columns:1fr!important}
 [data-hor-ui][data-hor-ui] .hor-task-actions .hor-task-primary,
 [data-hor-ui][data-hor-ui] .hor-task-actions .hor-task-secondary{width:100%!important}
 [data-hor-ui][data-hor-ui] .hor-order-list>li{grid-template-columns:auto 44px minmax(0,1fr);padding:8px 10px}
 [data-hor-ui][data-hor-ui] .hor-order-fallback{grid-column:2/4}
 [data-hor-ui][data-hor-ui] .hor-audio-compact.hor-media-panel{padding:14px!important}
 [data-hor-ui][data-hor-ui] .hor-audio-controls{display:grid!important;grid-template-columns:52px minmax(0,1fr) auto;gap:8px!important}
 [data-hor-ui][data-hor-ui] .hor-audio-track{min-width:0!important;padding:0 8px!important;gap:6px!important}
 [data-hor-ui][data-hor-ui] [data-audio-time]{font-size:11px!important}
 [data-hor-ui][data-hor-ui] .hor-recorder-actions{display:grid;grid-template-columns:1fr}
 [data-hor-ui][data-hor-ui] .hor-recorder-actions button{width:100%}
}