/* Task statement pinned over its solution (task-pin.mjs). Hidden, not removed, so its height can be measured. */
.task-pin{position:fixed;top:8px;z-index:30;background:white;border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 32px rgba(41,45,50,.16);overflow:hidden;visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility 0s .15s}
.task-pin.shown{visibility:visible;opacity:1;transform:none;transition:opacity .15s,transform .15s}
.task-pin-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 22px;border-bottom:1px solid var(--line);font-size:14px}
.task-pin-bar span{display:flex;gap:16px}
.task-pin-body{max-height:45vh;overflow:auto;padding:14px 22px;overscroll-behavior:contain}
.task-pin-body .question-image{padding:0;min-height:0}
.task-pin-more{display:none;position:absolute;left:0;right:0;bottom:14px;padding:28px 22px 8px;background:linear-gradient(rgba(255,255,255,0),#fff 60%);font-size:12px;color:var(--berry);text-align:center;pointer-events:none}
.task-pin.more .task-pin-more{display:block}
.task-pin-grip{height:14px;display:flex;align-items:center;justify-content:center;border-top:1px solid var(--line);cursor:ns-resize;touch-action:none;outline:none}
.task-pin-grip::before{content:"";width:44px;height:4px;border-radius:2px;background:#cfccc5}
.task-pin-grip:hover::before,.task-pin-grip:focus-visible::before,.task-pin.resizing .task-pin-grip::before{background:var(--berry)}
.task-pin.resizing{transition:none;user-select:none}
.task-pin.collapsed .task-pin-body,.task-pin.collapsed .task-pin-grip{display:none}
.task-pin.collapsed .task-pin-bar{border-bottom:0}
#solution-slot,#worked-slot,#analog-solution{scroll-margin-top:calc(var(--task-pin-h,0px) + 16px)}
/* Answer panel next to a solution stays in view and follows the subtask being read (answer-sync.mjs). */
@media (min-width:701px) and (min-height:560px){
  .exam-layout>.answer-card{position:sticky;top:8px;max-height:calc(100vh - 16px);overflow:auto}
}
.answer-field{border-radius:6px;transition:background-color .2s,box-shadow .2s}
.answer-field.synced{background:var(--berry-wash);box-shadow:0 0 0 8px var(--berry-wash),-12px 0 0 0 var(--berry)}
/* Trial side-by-side mode (task-pin.mjs): the statement card sticks on the left as a compact scan, a draggable
   divider, the solution on the right, the answer panel stays at the window's right edge. */
.side-scan,.task-side-grip{display:none}
@media (min-width:701px) and (min-height:560px){
  body.task-side main{max-width:none;padding-left:16px;padding-right:16px}
  body.task-side .exam-layout>div:has(.solution){display:grid;grid-template-columns:max(280px,min(var(--task-side-w,55%),calc(100% - 400px))) 20px minmax(0,1fr);align-items:start}
  body.task-side .exam-layout>div:has(.solution)>*{grid-column:3;min-width:0}
  body.task-side .exam-layout>div:has(.solution)>.question-card{grid-column:1;grid-row:1/span 40;position:sticky;top:8px;max-height:calc(100vh - 16px);overflow:auto;overscroll-behavior:contain}
  body.task-side .exam-layout>div:has(.solution)>#solution-slot>.solution:first-child{margin-top:0}
  body.task-side .question-card .question-image{padding:10px 8px;min-height:0}
  body.task-side .question-card img.has-side-scan{display:none}
  body.task-side .question-card .side-scan{display:block;width:100%;height:auto}
  body.task-side .question-card .question-image-hint{display:none}
  body.task-side .exam-layout>div>.task-side-grip{display:flex;grid-column:2;grid-row:1/span 40;position:sticky;top:8px;height:calc(100vh - 16px);align-items:center;justify-content:center;cursor:ew-resize;touch-action:none;outline:none}
  .task-side-grip::before{content:"";width:4px;height:44px;border-radius:2px;background:#cfccc5}
  .task-side-grip:hover::before,.task-side-grip:focus-visible::before,.task-side-resizing .task-side-grip::before{background:var(--berry)}
  body.task-side-resizing{user-select:none;cursor:ew-resize}
}
/* Answer panel folded into a strip at the right edge on solution pages (task-pin.mjs). The side-by-side mode
   keeps the panel narrower: once checked, it holds little more than the answers and the correct values. */
.answers-toggle{display:none}
@media (min-width:701px) and (min-height:560px){
  body.task-side .exam-layout{grid-template-columns:minmax(0,1fr) 270px;gap:16px}
  body.task-side .exam-layout>.answer-card{padding:18px}
  /* sticky, not absolute: the panel scrolls itself to the subtask being read (answer-sync.mjs) */
  .answers-toggle{display:block;float:right;position:sticky;top:-10px;z-index:2;margin:-12px -12px 0 8px;padding:6px 8px;border-radius:8px;background:white;color:var(--berry);font-size:13px;font-weight:650}
  .answers-toggle:hover{background:var(--berry-wash)}
  body.answers-hidden .exam-layout{grid-template-columns:minmax(0,1fr) 44px}
  body.answers-hidden .exam-layout>.answer-card{padding:0;overflow:hidden}
  body.answers-hidden .exam-layout>.answer-card>:not(.answers-toggle){display:none}
  body.answers-hidden .answers-toggle{float:none;margin:0;position:static;width:100%;height:calc(100vh - 16px);max-height:520px;padding:16px 0;writing-mode:vertical-rl;text-align:start;border-radius:16px}
}