/* Sınav görevleri (js/exam-task.js): texts beside the questions on wide screens, one column on phones.
   Tokens and buttons come from base.css; the exam flow around it is in pages.css. */
#page-exams .exam-task{margin-top:8px}
#page-exams .task-status{margin:0 0 16px;color:var(--ba-ink)}
#page-exams .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

#page-exams .task-head{display:grid;gap:12px;margin:0 0 20px;scroll-margin-top:96px}
#page-exams .task-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0}
#page-exams .task-meta span{padding:2px 10px;border-radius:999px;background:var(--ba-paper-2);font-size:var(--ba-small);font-weight:500}
#page-exams .task-context{margin:0;color:var(--ba-ink)}
#page-exams .task-instructions{margin:0;padding:16px 20px;border-left:5px solid var(--ba-accent);border-radius:0 var(--ba-radius-small) var(--ba-radius-small) 0;background:var(--ba-paper);font-weight:600;line-height:1.5}
#page-exams .task-summary{padding:18px 20px;border-radius:var(--ba-radius);background:var(--ba-field);color:var(--ba-field-ink)}
#page-exams .task-summary p{margin:0;color:var(--ba-field-ink)}
#page-exams .task-summary .task-score{margin-bottom:4px;font-family:var(--ba-serif);font-size:var(--ba-lead);font-weight:600}

/* Texts and questions side by side; the questions stay in view while the text scrolls. */
#page-exams .task-group{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;align-items:start;margin:0 0 12px}
#page-exams .task-texts{display:grid;gap:12px;min-width:0}
#page-exams .task-questions{position:sticky;top:84px;display:grid;gap:10px;min-width:0;max-height:calc(100vh - 100px);overflow:auto;padding:4px;overscroll-behavior:contain}
#page-exams .task-group--ads .task-texts{grid-template-columns:repeat(2,minmax(0,1fr))}

#page-exams .task-text{position:relative;padding:clamp(18px,2.4vw,28px);border-radius:var(--ba-radius);background:var(--ba-paper);color:var(--ba-ink)}
#page-exams .task-text h3{margin:0 0 6px;font-family:var(--ba-serif);font-weight:600;font-size:var(--ba-lead);line-height:1.25}
#page-exams .task-text p{margin:0 0 10px;color:var(--ba-ink);line-height:1.6}
#page-exams .task-text p:last-child{margin-bottom:0}
#page-exams .task-subhead{margin:16px 0 4px;font-family:var(--ba-sans);font-size:var(--ba-body);font-weight:600}
/* Gaps in a text ({{10}}) and the list of sentences or headings to put in them (Goethe B2). */
#page-exams .task-gap{display:inline-flex;align-items:center;gap:4px;min-width:72px;margin:0 2px;padding:0 8px;border-bottom:2px solid var(--ba-accent);border-radius:var(--ba-radius-small) var(--ba-radius-small) 0 0;background:var(--ba-paper-2);font-weight:600;vertical-align:baseline}
#page-exams .task-gap-no{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--ba-accent);color:var(--ba-accent-ink);font-size:12px;font-variant-numeric:tabular-nums}
#page-exams .task-gap-pick{min-width:1ch}
#page-exams .task-gap.is-example{display:inline;min-width:0;padding:1px 4px;font-weight:400;border-bottom-style:dashed;box-decoration-break:clone;-webkit-box-decoration-break:clone}
#page-exams .task-gap.is-right{border-bottom-color:var(--ba-right);background:var(--ba-right-bg)}
#page-exams .task-gap.is-wrong{border-bottom-color:var(--ba-wrong);background:var(--ba-wrong-bg)}
#page-exams .task-group--gaps .task-text:not(:first-child){padding:12px 16px}
#page-exams .task-group--gaps .task-text:not(:first-child) p{font-size:var(--ba-small);line-height:1.5}
#page-exams .task-group--gaps .task-text:not(:first-child) .task-text-label{float:left;margin:0 10px 0 0}
#page-exams .task-group--gaps .task-text:not(:first-child)::after{content:"";display:block;clear:both}
/* Boards and directories ({ "rows": … } in a text), e.g. the floors of a department store. */
#page-exams .task-table{width:100%;margin:0 0 10px;border-collapse:collapse;font-size:var(--ba-small);line-height:1.5}
#page-exams .task-table th,#page-exams .task-table td{padding:8px 10px;border-top:1px solid var(--ba-line);text-align:left;vertical-align:top;color:var(--ba-ink)}
#page-exams .task-table tr:first-child>*{border-top:0}
#page-exams .task-table th{width:32%;font-weight:600}
#page-exams .task-byline{font-size:var(--ba-small);color:var(--ba-muted)!important;font-weight:500}
#page-exams .task-text-label{display:inline-grid;place-items:center;min-width:32px;height:32px;margin:0 0 10px;padding:0 8px;border-radius:var(--ba-radius-small);background:var(--ba-accent);color:var(--ba-accent-ink);font-weight:600;font-variant-numeric:tabular-nums}
#page-exams .task-group--ads .task-text,#page-exams .task-group--comments .task-text{padding:16px 18px}
#page-exams .task-group--ads .task-text h3{font-size:var(--ba-body)}
#page-exams .task-group--ads .task-text p,#page-exams .task-group--comments .task-text p{font-size:var(--ba-small);line-height:1.55}
#page-exams .task-group--ads .task-text-label,#page-exams .task-group--comments .task-text-label{margin:0 0 8px}

/* Highlighted sentences appear only after checking. */
#page-exams .task-evidence{border-radius:3px;transition:background-color .3s}
#page-exams .is-checked .task-evidence{background:color-mix(in srgb,var(--ba-accent) 22%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--ba-accent) 22%,transparent)}
#page-exams .is-checked .task-evidence::before{content:attr(data-q);display:inline-grid;place-items:center;min-width:20px;height:20px;margin-right:4px;padding:0 4px;border-radius:999px;background:var(--ba-accent);color:var(--ba-accent-ink);font-family:var(--ba-sans);font-size:12px;font-weight:600;vertical-align:2px}
#page-exams .task-evidence.is-flash{animation:task-flash 1.6s var(--ba-ease)}
@keyframes task-flash{0%,40%{background:color-mix(in srgb,var(--ba-accent) 55%,transparent)}}

#page-exams .task-stem{margin:0 0 2px;padding:12px 16px;border-radius:var(--ba-radius-small);background:var(--ba-paper-2);font-weight:600}
#page-exams .task-q{margin:0;padding:14px 16px;border:0;border-radius:var(--ba-radius);background:var(--ba-paper);min-width:0}
#page-exams .task-q-head{display:flex;gap:10px;align-items:flex-start;width:100%;margin:0 0 10px;padding:0;font-weight:500;line-height:1.45}
/* A legend is drawn on the fieldset border; floating it keeps the question inside the card. */
#page-exams fieldset.task-q>legend{float:left}
#page-exams fieldset.task-q>legend~*{clear:both}
#page-exams .task-q-no{display:inline-grid;place-items:center;flex:none;min-width:28px;height:28px;padding:0 6px;border-radius:999px;background:var(--ba-paper-2);font-weight:600;font-size:var(--ba-small);font-variant-numeric:tabular-nums}
#page-exams .task-q-no.is-example{background:var(--ba-accent);color:var(--ba-accent-ink)}
#page-exams .task-q-prompt{padding-top:2px}
#page-exams .task-example-note{margin:-4px 0 10px;font-size:var(--ba-small);color:var(--ba-muted)}
#page-exams .task-q.is-example{background:transparent;box-shadow:inset 0 0 0 2px var(--ba-line)}

#page-exams .task-options{display:flex;flex-wrap:wrap;gap:6px}
#page-exams .task-q--abc .task-options,#page-exams .task-q--pair .task-options{display:grid}
#page-exams .task-option{position:relative;display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:10px 14px;border-radius:var(--ba-radius-small);background:var(--ba-paper-2);cursor:pointer;line-height:1.4;transition:background-color .2s}
#page-exams .task-option:hover{background:var(--ba-line)}
#page-exams .task-option input{position:absolute;opacity:0;width:1px;height:1px}
#page-exams .task-option:has(input:focus-visible){outline:3px solid var(--ba-focus);outline-offset:2px}
#page-exams .task-option-key{flex:none;font-weight:600}
#page-exams .task-q--abc .task-option-key,#page-exams .task-q--pair .task-option-key{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:999px;background:var(--ba-paper);font-size:var(--ba-small)}
#page-exams .task-option.is-chosen{background:var(--ba-accent);color:var(--ba-accent-ink)}
#page-exams .task-option.is-chosen .task-option-key{color:inherit}
#page-exams .task-q--abc .task-option.is-chosen .task-option-key,#page-exams .task-q--pair .task-option.is-chosen .task-option-key{background:var(--ba-accent-ink);color:var(--ba-accent)}
#page-exams .task-option:has(input:disabled){cursor:default}
#page-exams .task-option:has(input:disabled):hover{background:var(--ba-paper-2)}
#page-exams .task-option.is-chosen:has(input:disabled):hover{background:var(--ba-accent)}

#page-exams .task-q select{width:100%;min-height:48px;padding:0 12px}

/* After checking */
#page-exams .task-q.is-right{box-shadow:inset 4px 0 0 var(--ba-right)}
#page-exams .task-q.is-wrong,#page-exams .task-q.is-empty{box-shadow:inset 4px 0 0 var(--ba-wrong)}
#page-exams .is-checked .task-q.is-wrong .task-option.is-chosen{background:var(--ba-wrong-bg);color:var(--ba-wrong);box-shadow:inset 0 0 0 2px var(--ba-wrong)}
#page-exams .is-checked .task-option.is-answer:not(.is-chosen){box-shadow:inset 0 0 0 2px var(--ba-right)}
#page-exams .is-checked .task-q.is-right .task-option.is-chosen{background:var(--ba-right-bg);color:var(--ba-right);box-shadow:inset 0 0 0 2px var(--ba-right)}
#page-exams .task-result{display:grid;gap:6px;margin-top:12px;padding-top:12px;border-top:4px dotted var(--ba-paper-2)}
#page-exams .task-result p{margin:0;font-size:var(--ba-small);line-height:1.55;color:var(--ba-ink)}
#page-exams .task-result-status{font-weight:600}
#page-exams .is-right .task-result-status{color:var(--ba-right)!important}
#page-exams .is-wrong .task-result-status,#page-exams .is-empty .task-result-status{color:var(--ba-wrong)!important}
#page-exams .task-solution{font-weight:600}
#page-exams .task-q.is-example .task-result{display:none}
#page-exams .is-checked .task-q.is-example .task-result{display:grid}
#page-exams .task-show{justify-self:start;min-height:40px;padding:0;border:0;background:none;color:var(--ba-accent);font:inherit;font-size:var(--ba-small);font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer}

#page-exams .task-actions{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 0}

@media(max-width:900px){
  #page-exams .task-group{grid-template-columns:1fr}
  #page-exams .task-questions{position:static;max-height:none;overflow:visible;padding:0}
}
@media(max-width:620px){
  #page-exams .task-group--ads .task-texts{grid-template-columns:1fr}
  #page-exams .task-actions .btn{width:100%}
}