/* Student tasks: #/task and #/tasks (FREE-HANDIN.md §3). Uses the course's own tokens. */

.tk-slot{min-height:40vh}
.tk-links{margin:8px 0 0}
.tk-facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0 0 22px;padding:0}
.tk-facts div{display:contents}
.tk-facts dt{font:600 14px/1.5 var(--sans);color:var(--muted);letter-spacing:.02em}
.tk-facts dd{margin:0;font-size:16px;line-height:1.5;overflow-wrap:anywhere}

.tk-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0 0}
.tk-other{margin:14px 0 0}
.tk-other .link-button,.tk-remove .link-button{margin-left:0;padding:0}
.tk-status{margin:12px 0 0;font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.tk-status:empty{display:none}
.tk-small{font-size:14px;margin:6px 0 0}

.tk-receipt-when{font-size:17px;margin:0 0 8px}
.tk-fb-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.tk-again{margin:18px 0 0}
.tk-again p{margin:0 0 8px}

.tk-code{display:block;width:100%;max-width:100%;padding:8px 10px;font:13px/1.4 Consolas,"Courier New",monospace;color:var(--ink);
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--radius);word-break:break-all;resize:vertical}
.tk-code:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.tk-code-wrap{margin:12px 0 0}
.tk-qr{margin:12px 0 0}
.tk-qr-img{display:inline-block;width:min(240px,100%);padding:12px;background:var(--white);border:1px solid var(--line)}
.tk-qr-img svg{display:block;width:100%;height:auto}

.tk-items{display:grid;gap:18px;margin:0 0 22px}
.tk-item{padding:20px 22px}
.tk-item-h{font-size:20px;margin:0 0 4px;overflow-wrap:anywhere}
.tk-item-h a{color:var(--ink);text-underline-offset:3px}
.tk-item-h a:hover{color:var(--red)}
.tk-state{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:10px 0 0;font-size:15.5px}
.tk-badge{display:inline-block;padding:2px 10px;border-radius:999px;font:600 13px/1.6 var(--sans);background:var(--paper-2);color:var(--ink)}
.tk-badge--fb{background:var(--navy-soft)}
.tk-remove{margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.tk-remove .confirm p{margin:0 0 4px}

.tk-fb-details{scroll-margin-top:96px;margin:16px 0 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.tk-fb-details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;padding:8px 14px;font-weight:600}
.tk-fb-details summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.tk-feedback{padding:4px 16px 16px}
.tk-feedback h3{font-size:18px;margin:8px 0 2px}
.tk-feedback h3:focus{outline:none}
.tk-feedback h4{font:700 14px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:18px 0 6px}
.tk-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.tk-list{margin:0;padding-left:1.2em}
.tk-list li{white-space:pre-wrap;overflow-wrap:anywhere}
.tk-result .big-line{margin:0}
.tk-marks{list-style:none;margin:10px 0 0;padding:0}
.tk-marks li{display:flex;flex-wrap:wrap;gap:2px 12px;padding:8px 0;border-top:1px solid var(--line)}
.tk-q{font-weight:600;min-width:7.5em}
.tk-mark{min-width:7em}
.tk-marks li.is-right .tk-mark{color:#23603f}
.tk-marks li.is-wrong .tk-mark{color:var(--red-dark)}
.tk-answer{color:var(--muted);overflow-wrap:anywhere}
.tk-rubric{border-collapse:collapse;width:100%;font-size:15px}
.tk-rubric caption{text-align:left;font-size:14px;color:var(--muted);padding:0 0 8px}
.tk-rubric th,.tk-rubric td{text-align:left;padding:7px 8px;border-top:1px solid var(--line)}
.tk-rubric thead th{font-size:13px;color:var(--muted);border-top:0}

.tk-open h2{font-size:20px}
.tk-drop{margin:12px 0 16px;padding:14px 16px;border:2px dashed var(--line-2);border-radius:var(--radius);background:var(--paper)}
.tk-drop.is-over{border-color:var(--gold);background:var(--gold-soft)}
.tk-drop input[type=file]{margin-bottom:4px}
.tk-drop p{margin:0}
.tk-progress{margin:22px 0 0}

@media (max-width:520px){
  .tk-facts{grid-template-columns:1fr;gap:0}
  .tk-facts dd{margin:0 0 8px}
  .tk-item{padding:16px}
  .tk-actions .btn{width:100%}
  .tk-feedback{padding:4px 12px 14px}
}