/* Drill player, Mixed Review and set summary · Direction A · Calibration */
.sort-workspace{width:min(1120px,100% - 40px)}
.sort-workspace>.intro{max-width:65ch}
#start{margin-top:8px}
.practice-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start;margin-top:20px}
.practice-card{padding:28px;border:1px solid var(--rule);border-radius:20px;background:var(--panel)}
.practice-card:only-child{grid-column:1/-1;max-width:820px}
.progress{display:flex;gap:4px;margin-bottom:18px}
.progress i{flex:1;height:5px;border-radius:5px;background:var(--cobalt-wash)}
.progress i.done{background:var(--cobalt)}
.progress i.now{background:var(--ink)}
.practice-card #progress{color:var(--muted)}
#drill-title{font:800 1rem var(--f-display);margin:8px 0 0}
#drill-intro{color:var(--muted);font-size:.95rem;margin:4px 0 0}
.practice-card h2{white-space:pre-wrap;font:700 1.4rem/1.4 var(--f-display);letter-spacing:-.01em;margin:8px 0 18px}
#context{color:var(--muted)}
.rate-context{background:var(--paper);border:1px solid var(--rule-soft);border-radius:12px;padding:14px 16px;margin:0 0 18px}
.rate-context strong{font:500 .74rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rate-context p{margin:4px 0 0}

fieldset{border:0;padding:0;margin:14px 0;min-width:0}
legend{font-weight:700;font-size:.97rem;margin-bottom:10px}
#bucket-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bucket-button{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border:1.5px solid var(--rule);border-radius:12px;background:#fff;cursor:pointer;
  font:600 .98rem/1.3 var(--f-body);margin:0;transition:border-color .15s,background .15s}
.bucket-button:hover{border-color:var(--ink)}
.bucket-button:has(input:checked){border-color:var(--ink);background:var(--cobalt-wash);box-shadow:inset 0 0 0 1px var(--ink)}
.bucket-button input,.confidence-options input{width:20px;height:20px;min-height:0;padding:0;margin:0;accent-color:var(--ink);flex-shrink:0}
.bucket-button span{min-width:0;overflow-wrap:anywhere}
#mechanism-options .bucket-button{margin-bottom:8px}
.mechanism-option{position:relative}
.mechanism-option .bucket-button{padding-right:60px}
.mechanism-definition{font-size:.92rem;color:var(--muted);margin:2px 12px 12px}
.practice-card .definition-toggle{position:absolute;right:6px;top:4px;margin:0;min-width:44px;min-height:44px;padding:4px;box-shadow:none;color:var(--cobalt);font-family:var(--f-mono)}
.practice-card .definition-toggle:hover{background:var(--cobalt-wash);color:var(--cobalt-deep)}

/* Confidence: a five-step dial, 1 = guessing, 5 = certain */
.confidence-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.confidence-options label{position:relative;display:grid;place-items:center;min-height:48px;margin:0;border:1.5px solid var(--rule);border-radius:10px;background:#fff;
  font:500 1rem var(--f-mono);cursor:pointer}
.confidence-options label:hover{border-color:var(--ink)}
.confidence-options input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.confidence-options label:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.confidence-options label:has(input:focus-visible){outline:3px solid var(--cobalt);outline-offset:3px}
#confidence legend::after,#sort-fields legend::after{content:"1 = guessing · 5 = certain";display:block;font-weight:400;font-size:.85rem;color:var(--muted)}
#reason{margin-bottom:4px}
.practice-card button{margin-top:16px}

/* Reference panel: open at Guided, one click away at Independent, absent at Cold */
#reference-area{position:sticky;top:16px}
.reference{padding:20px;border:1px solid var(--rule);border-radius:20px;background:var(--panel);font-size:.93rem}
.reference h3{font-size:1rem;margin:0 0 8px}
.reference p,.reference li{color:var(--muted)}
.reference strong{color:var(--ink)}
#reference-toggle{margin-top:0;min-height:44px}
#reference-count{margin:8px 0 12px}

/* Feedback */
#feedback{max-width:820px;margin:20px 0 0;padding:18px 20px;border-left-width:6px;font-size:1rem}
#feedback.fb-earned{background:var(--verified-wash);border-left-color:var(--verified)}
#feedback.fb-partial{background:var(--amber-wash);border-left-color:var(--amber)}
#feedback.fb-miss{background:var(--miss-wash);border-left-color:var(--miss);color:var(--ink)}
.fb-status{font:900 1.15rem/1.2 var(--f-display);margin:0 0 6px}
.fb-earned .fb-status{color:var(--verified)} .fb-partial .fb-status{color:var(--amber-ink)} .fb-miss .fb-status{color:var(--miss)}
#feedback h2{font:800 1.05rem/1.3 var(--f-display);margin:0 0 6px}
#feedback p{margin:0 0 6px}
#next{margin-top:16px}
#summary:focus,#prompt:focus{outline:3px solid var(--cobalt);outline-offset:6px}

/* Set summary */
.strip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px 32px;align-items:center;background:var(--ink);color:#fff;border-radius:20px;padding:24px 26px;margin:8px 0 16px}
.strip h2{font:500 .78rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#C9D1E3;margin:0}
.summary-score{font:900 2.8rem/1 var(--f-display);letter-spacing:-.04em;margin:6px 0}
.strip-level{font:500 .74rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#C9D1E3;margin:0}
.strip-note{margin:0 0 12px;color:#E3E8F3;max-width:60ch}
.calrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;list-style:none;margin:0;padding:0}
.calrow li{background:#25304A;border-radius:8px;padding:8px 10px;font:500 .74rem/1.3 var(--f-mono);color:#C9D1E3}
.calrow li b{display:block;font:800 1.15rem var(--f-display);color:#fff}
.calrow li.warn{background:var(--amber);color:var(--ink)}
.calrow li.warn b{color:var(--ink)}
#summary>h3{margin:28px 0 8px}
#summary>ul{padding-left:20px}
.review-card{margin:12px 0;padding:18px 20px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--panel)}
.review-card h3,.review-card h4{font:700 1.05rem/1.4 var(--f-display);margin:0 0 8px}
.review-card p{margin:0 0 6px}
.answer-score{font:500 .8rem var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.review-answer{color:var(--verified)}
.summary-actions{display:flex;gap:12px;flex-wrap:wrap}
.summary-actions .button{min-height:48px}

/* Mixed Review week picker */
#week-form{max-width:420px}
#week-form select{min-height:48px}

/* Tables may scroll internally; surrounding reading content must reflow. */
.confidence-table{display:block;overflow-x:auto;max-width:100%}

@media (max-width:900px){
  .practice-layout{grid-template-columns:1fr}
  #reference-area{position:static}
  .practice-card:only-child{grid-column:auto}
}
@media (max-width:599px){
  .sort-workspace{width:min(1120px,100% - 32px)}
  .practice-card{padding:20px 16px}
  #bucket-options{grid-template-columns:1fr}
  body .practice-card h2{font-size:1.25rem;line-height:1.45}
  .strip{grid-template-columns:1fr;padding:20px}
  .calrow{gap:4px}
  .calrow li{padding:6px}
}