.batch-main{max-width:1960px;margin:calc(123px + 1.5rem) auto 0;padding:0 1rem}
.fig-card{background:#fdfdfd;border:2.5px solid var(--strong);border-radius:0;box-shadow:8px 8px 0 rgba(125,125,125,.8);padding:22px 26px;overflow-x:auto}
.fig-card,.fig-card button,.fig-card input,.fig-card select,.fig-card textarea{border-radius:0!important}
[data-theme="dark"] .fig-card{background:var(--card);box-shadow:8px 8px 0 rgba(140,147,160,.45)}
.fig-card .substep{border-left:0;padding-left:0;margin:0}
.support-drops{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:.4rem 0 1rem}
.support-col{display:flex;flex-direction:column;gap:8px}
.support-col>label{margin:0;font-size:12px;color:#7d7d7d}
/* Document Upload. The bevel is one inset shadow; the inner body only lays
   out the icon and the label, and the 4px padding keeps it off the frame. */
.doc-drop,.add-doc-btn{border:0;background:var(--ro-box-face,#f5f5f5);box-shadow:var(--ro-raised);padding:4px}
.box-body{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;
  background:transparent;border:0;box-shadow:none}
.doc-drop{flex:1;min-height:93px;display:flex;cursor:pointer}
.doc-drop .box-body{flex-direction:column;padding:11px 12px}
.doc-drop.hover{border-color:var(--ink)}
.support-col.has-files .doc-drop{display:none}
.upload-icon{width:24px;height:24px;display:block}
.drop-cta{margin:0;font-family:Oxanium,sans-serif;font-size:14px;font-weight:600;color:#8c8c8c}
[data-theme="dark"] .drop-cta{color:#a0a7b5}
.drop-types{margin:0;font-family:Oxanium,sans-serif;font-size:12px;font-weight:500}
.drop-types .br{color:#0078d7}
.drop-types .fmt{color:#b56a10}
[data-theme="dark"] .drop-types .br{color:#0078d7}
[data-theme="dark"] .drop-types .fmt{color:#d9985c}
.file-chips{display:flex;flex-direction:column;gap:8px}
.file-chip{display:flex;align-items:center;gap:5px;width:100%;min-height:30px;padding:5px 10px;
  border:1.8px solid #7d7d7d;background:var(--ro-field,#f5f5f5);font-family:Oxanium,sans-serif;font-size:14px;color:var(--ro-ink-muted,#7d7d7d)}
.file-chip-doc{width:10px;height:12px;flex:0 0 auto}
.file-chip-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-chip-del{width:20px;height:20px;padding:0;border:0;background:transparent;display:grid;place-items:center}
.file-chip-del img{width:20px;height:20px;display:block;object-fit:contain}
.add-doc-btn{display:none;width:100%;
  font-family:Oxanium,sans-serif;font-size:14px;font-weight:600;letter-spacing:0;color:#7d7d7d}
/* Figma keeps both columns the same height in every state and lets this box
   take up the slack, exactly as the drop zone does before a file exists.
   Without it the filled column stops short and the two stop lining up. */
.support-col.has-files .add-doc-btn{display:flex;flex:1 1 auto;min-height:46px}
.add-doc-btn .box-body{padding:5px 12px;min-height:26px}
/* Once the notes field opens it becomes the next thing to act on, so this drops
   back: outer frame to grey, inner bottom/right to a fainter edge. */
.support-col.notes-open .add-doc-btn{font-weight:400;box-shadow:inset -2px -2px 0 #7d7d7d,inset 2px 2px 0 #7d7d7d,inset -4px -4px 0 var(--ro-bevel-dark),inset 4px 4px 0 var(--ro-bevel-light)}
.notes-btn{width:100%;padding:3px 8px;border:1px solid rgba(49,49,49,.5);background:var(--ro-panel-bg,#eee);
  font-family:Oxanium,sans-serif;font-size:14px;font-weight:400;letter-spacing:0;color:#b56a10;box-shadow:none}
.notes-btn .plus{color:#0078d7}
.support-col.notes-open .notes-btn{display:none}
/* The notes field is Figma's Input component: recessed, so the highlight runs
   the other way to the raised box above. A textarea cannot carry an inner
   element, so its two edges are insets. */
.notes-field{min-height:72px;padding:5px 7px;border:0;background:var(--ro-input-face,#e4e4e4);
  box-shadow:var(--ro-sunken);
  font-family:"Space Mono",monospace;font-size:14px;color:var(--ro-ink-muted,#5a5a5a)}
.notes-field::placeholder{color:#7d7d7d;opacity:1}
.notes-field:focus,.notes-field:active{outline:none;opacity:1;color:var(--ro-ink);background:var(--ro-input-focus,#a0a0a0);
  box-shadow:inset -2px -2px 0 var(--ro-frame-input,#333),inset 2px 2px 0 var(--ro-frame-input,#333),inset 4px 4px 0 var(--ro-bevel-dark),inset -4px -4px 0 rgba(255,255,255,.5)}
/* Button */
.fig-skip{display:inline-flex;align-items:center;justify-content:center;margin:0 auto;
  box-sizing:border-box;width:fit-content;min-width:0;height:36px;min-height:36px;
  padding:8px 14px;border:0;background:var(--ro-btn-face);color:var(--ro-btn-ink);
  box-shadow:var(--ro-btn-raised);white-space:nowrap;
  font-family:'Space Mono',monospace;font-size:14px;font-weight:700;letter-spacing:0}
.fig-skip.secondary{background:var(--ro-btn-face);color:var(--ro-btn-ink);border:0}
/* Figma wraps the button in a 44-tall centring frame. */
.batch-panel .actions,.batch-panel .substep-actions{
  display:flex;justify-content:center;align-items:center;padding:8px 0;margin:0}
.fig-card .actions .fig-skip,.actions .fig-skip{min-width:0}
.substep-actions{display:flex;flex-direction:column;align-items:center;gap:6px}
.fig-card input,.fig-card select,.fig-card textarea,.fig-card button{border-radius:0!important}
.fig-card input[type=number]:not(.fig-stepper),.fig-card select:not(.fig-select){width:auto;max-width:none}
.fig-card input[type=number]::-webkit-outer-spin-button,
.fig-card input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none!important;display:none;margin:0}
/* Figma's Config Row1: no fill, width fill-container, HORIZONTAL with a 32px
   gap and primary-axis MIN — the blocks hug and sit left, they are not spread.
   space-between here pushed #OPTIONS to the far edge whenever a block was
   hidden. Flex so a hidden block collapses its space instead of leaving a gap. */
.fw-row{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;
  gap:16px 32px;width:100%;padding:4px;margin:.4rem 0}
.fw-block{display:flex;flex-direction:column;gap:4px;min-width:0}
.fw-persp{align-items:center}
.fw-controls{display:flex;gap:4px;align-items:center;flex-wrap:nowrap}
/* #Options carries four controls and is spaced a step wider than #Question. */
.fw-opt .fw-controls{gap:8px}
.fig-field{display:flex;flex-direction:column;gap:3px;flex:0 0 auto}
/* Field control. The wrap owns the bevel; a bare stepper paints it itself. */
.fig-stepper,.fig-select,.fw-block .fig-select{
  height:38px;padding:4px 8px;border:0;background:transparent;box-shadow:none;
  font-family:'Mozilla Text',sans-serif;font-size:13.5px;line-height:30px;color:#0c1421;text-align:center;border-radius:0}
input.fig-stepper{background:var(--ro-field,#f5f5f5);box-shadow:var(--ro-raised)}
.fig-step input.fig-stepper{background:none;box-shadow:none}
.fw-q .fig-step,#gNum.fig-stepper{width:75px}
.fw-q .fig-select-wrap,.fw-q .fig-select{width:67px}
#gSelect.fig-select{padding-left:16px!important;padding-right:16px!important}
.fw-opt #gChoices.fig-stepper,.fw-opt #gChoices.fig-stepper+.fig-step-btn,
.fw-opt .fig-field:first-child .fig-step{width:89px}
.fw-opt .fig-select-wrap,.fw-opt .fig-select{width:85px}
.fw-opt #exactWrap .fig-step,#gExact.fig-stepper{width:63px}
/* 14px line box, so a field measures 34 + 3 + 14 = 51 and every block in the
   row lands on the same height without anything being set explicitly. */
.fw-hint{font-size:12px;line-height:14px;color:#7d7d7d;text-align:center;white-space:nowrap}
.fw-slash{display:flex;flex-direction:column;align-items:center;gap:3px;width:16px}
.fw-slash-mark{height:34px;display:flex;align-items:center;justify-content:center;color:#7d7d7d;font-size:16px;line-height:1}
.fw-arrow{display:flex;flex-direction:column;align-items:center;gap:3px;flex:0 0 16px}
.fw-arrow img{width:16px;height:34px;display:block;object-fit:contain}
.range-pair{display:flex;gap:2px;width:63px}
.range-pair.hidden{display:none!important}
.fw-opt .range-pair .fig-step{width:30.5px}
/* Endpoint labels sit in the same 8px rhythm as the boxes they bracket. */
.persp-scale{display:flex;gap:8px;align-items:center}
.persp-group{display:flex;flex-direction:column;gap:3px}
.persp-end{width:46px;font-size:12px;color:#0c1421;text-align:center;line-height:14px;padding:0;border:0;background:transparent;font-weight:400;letter-spacing:0}
.persp-end:first-child{width:40px}
.fw-areas-h{margin:8px 0 6px;font-size:12px;color:#7d7d7d}
.radar-wrap{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;padding:5px 2px}
.radar-panel{flex:0 0 300px;overflow:visible}
.radar-wrap>.profile-rows{flex:1 1 0;min-width:280px;display:flex;flex-direction:column;gap:10px}
#radar{display:block;width:300px;height:260px;overflow:visible}
#radar .radar-grid{fill:none;stroke:rgba(154,153,149,.5);stroke-width:1}
#radar .radar-spoke{stroke:#c4c4c2;stroke-width:1}
#radar .radar-area{fill:rgba(0,120,215,.2);stroke:#0078d7;stroke-width:2;stroke-linejoin:miter}
#radar .radar-dot{fill:#0078d7;stroke:none}
#radar .radar-label{fill:#686868;font-size:10px;font-family:'Mozilla Text',sans-serif;font-weight:500}
.area-side,#areaList{flex:1;min-width:280px;display:flex;flex-direction:column;gap:10px}
.area-row{display:flex;gap:10px;align-items:center;height:34px;width:100%}
.area-row .fig-dd{flex:1 1 0;min-width:0}
.area-row .aval{flex:0 0 auto;font-size:12.5px;font-weight:600;color:#0f0f0f}
.area-row .adel{width:20px;height:20px;padding:0;background:transparent;border:0;box-shadow:none}
.area-row .adel img{width:20px;height:20px;display:block;object-fit:contain}

/* Focus slider: a flat grey rail with a blue fill and a square blue grip,
   both carrying the same hard 2px shadow as the rest of the kit. The rail is
   painted on the input and the fill on the track, so the drop-shadow filter
   hugs the blue alone instead of the full-width rail. */
.area-row input[type=range].aw{flex:1 1 0;min-width:0;-webkit-appearance:none;appearance:none;
  height:16px;cursor:pointer;border:0;box-shadow:none;
  background:linear-gradient(rgba(154,153,149,.5),rgba(154,153,149,.5)) left center/100% 5px no-repeat}
.area-row input[type=range].aw::-webkit-slider-runnable-track{height:16px;border:0;background:transparent;
  background-image:linear-gradient(#0078d7,#0078d7);background-repeat:no-repeat;
  background-position:left center;background-size:var(--pct,0%) 5px;
  filter:drop-shadow(2px 2px 0 #5b5a58)}
.area-row input[type=range].aw::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:12px;height:12px;margin-top:2px;border:0;background:#0078d7}
.area-row input[type=range].aw::-moz-range-track{height:5px;border:0;background:transparent}
.area-row input[type=range].aw::-moz-range-progress{height:5px;background:#0078d7;box-shadow:2px 2px 0 #5b5a58}
.area-row input[type=range].aw::-moz-range-thumb{width:12px;height:12px;border:0;background:#0078d7;box-shadow:2px 2px 0 #5b5a58}

/* Focus dropdown. The same raised box as every other select;
   only the type differs, because focus names are long enough to need a
   monospace 12px and room to elide. */
.fig-dd{position:relative;display:flex;align-items:center;box-sizing:border-box;height:38px;
  padding:4px 8px;border:0;
  background:var(--ro-box-face,#f5f5f5);
  box-shadow:var(--ro-raised);
  font-family:'Space Mono',monospace;font-size:12px;font-weight:400;letter-spacing:0}
.fig-dd .dd-a,.fig-dd .dd-c{flex:0 0 auto;white-space:nowrap;line-height:18px}
/* The name is the only part allowed to give ground, so a long focus title
   elides inside the box instead of spilling across the slider next to it. */
.fig-dd .dd-b{flex:0 1 auto;min-width:0;line-height:18px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fig-dd .dd-fill{flex:1 1 0;min-width:0;align-self:stretch}
.fig-dd .dd-caret{width:8px;height:16px;flex:0 0 8px;display:block;margin-left:6px}
.fig-dd select{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;font-size:13px}
.fig-dd .dd-blue{color:#0078d7}
.fig-dd .dd-amber{color:#cb6e00}
.fig-dd .dd-muted{color:#8b8b8b}
.add-area{display:flex;gap:10px;align-items:center;width:100%;margin:0}
.add-area .fig-dd{flex:1 1 0;min-width:0}
.add-area #addArea{flex:0 0 46px;width:46px;height:38px;padding:4px;color:var(--ro-btn-ink,#1b1b1b);
  border:0;background:var(--ro-panel-bg,#eee);
  box-shadow:var(--ro-btn-raised);
  font-family:'Space Mono',monospace;font-size:14px;font-weight:700;letter-spacing:0}
@media(max-width:900px){.support-drops{grid-template-columns:1fr}}
/* An explicit 1fr track: the default implicit track is auto-sized, so the
   cards would shrink to their content width instead of honouring max-width. */
.batch-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem}
.batch-panel.hidden{display:none}
.batch-stepper .step{border:0;background:transparent;border-radius:0;padding:0;color:inherit;letter-spacing:0}
.batch-stepper .step:hover{background:transparent}
.focus-side{flex:1;min-width:280px}
.check{display:flex;gap:.5rem;align-items:flex-start;margin:.35rem 0;color:inherit}
#batchDrop .icon{display:block;margin:0 auto .6rem}
#batchDrop .drop-title{margin-bottom:1.1rem}
.publish-list{display:grid;gap:.45rem;margin-top:1rem}
.publish-row{border:1px solid var(--line);border-radius:6px;background:var(--input-bg);padding:.55rem .8rem}
.publish-row summary{display:flex;gap:.7rem;align-items:baseline;cursor:pointer;list-style:none}
.publish-row summary::-webkit-details-marker{display:none}
.publish-row summary::before{content:'▸';color:var(--muted);font-size:.8rem}
.publish-row[open] summary::before{content:'▾'}
.publish-row summary .small{margin-left:auto;color:var(--muted)}
.publish-row[data-empty] summary{cursor:default}
.publish-none{color:var(--bad)}
.publish-questions{margin:.5rem 0 0;padding-left:1.4rem;font-size:.85rem;line-height:1.5}
.publish-questions li{margin:.2rem 0}
.publish-link{margin-top:.4rem;word-break:break-all}
.batch-staged,.batch-queue{display:grid;gap:.45rem;margin-top:1rem}
.staged-row,.queue-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.7rem .8rem;border:1px solid var(--line);border-radius:6px;background:var(--input-bg)}
.staged-row button{padding:.1rem .35rem;background:transparent;color:var(--ink);font-size:1.1rem}
.queue-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.queue-heading h2{margin:0}
.queue-status{font-size:.78rem;color:var(--muted);text-transform:capitalize}.queue-status.ready{color:var(--ok)}.queue-status.failed{color:var(--bad)}.queue-status.no_questions{color:var(--warn,var(--muted))}
.queue-error{grid-column:1/-1;color:var(--bad);font-size:.78rem}
.queue-actions{display:flex;align-items:center;gap:.5rem}
.queue-actions button{padding:.35rem .6rem;font-size:.78rem}
.batch-review-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:1.2rem;align-items:start}
.review-projects{position:sticky;top:130px}.review-projects button{width:100%;text-align:left;margin:.25rem 0;padding:.55rem .65rem;background:var(--input-bg);color:var(--ink);border:1px solid var(--line)}
.review-projects button.active{border-color:var(--strong);background:var(--chip)}
.review-projects button:disabled{opacity:.6}
.approve-all{display:flex;gap:.5rem;align-items:center;color:var(--ink)}
@media(max-width:760px){.batch-review-layout{grid-template-columns:1fr}.review-projects{position:static}}
.fig-skip:hover{background:#555}
.publish-row,.staged-row,.queue-row{border-radius:0}

/* ---------- Step 2 · document-set queue groups ---------- */
.upload-target{margin:.15rem 0 .5rem;color:var(--muted);font-size:.85rem}
.upload-target strong{color:var(--ink)}
.upload-target-warn{margin:0 0 .6rem;padding:.5rem .6rem;border:1px solid #d8a200;
  border-left-width:3px;background:rgba(216,162,0,.08);font-size:.85rem;line-height:1.45}
.upload-target-warn button{margin-left:.4rem}
.queue-groups{display:grid;gap:.65rem}
.queue-group{border:1px solid var(--line);background:var(--input-bg)}
.queue-group.is-active .queue-group-title{color:var(--ink)}
.queue-group:not(.is-active) .queue-group-title{color:var(--muted)}
.queue-group-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .7rem;border-bottom:1px solid transparent}
.queue-group.is-open .queue-group-header{border-bottom-color:var(--line)}
.queue-group-toggle{display:flex;align-items:center;gap:.45rem;flex:1;min-width:0;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit}
.queue-group-toggle .queue-chevron{flex:0 0 auto;width:.8rem;color:var(--muted);font-size:.75rem;transition:transform .12s}
.queue-group.is-open .queue-chevron{transform:rotate(90deg)}
.queue-group-title{font-weight:600;font-size:.9rem;line-height:1.35}
.queue-regen-all{flex:0 0 auto;padding:.35rem .6rem;font-size:.78rem;white-space:nowrap}
.queue-regen-all:disabled{opacity:.45;cursor:not-allowed}
.queue-group-body{display:none;padding:.45rem .7rem .65rem}
.queue-group.is-open .queue-group-body{display:block}
.queue-group-body.is-drop-target{outline:2px dashed #0e7abc;outline-offset:-2px;background:rgba(14,122,188,.06)}
.queue-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.55rem .65rem .55rem .75rem;margin:.35rem 0 .35rem .55rem;border-left:3px solid #0e7abc;background:var(--card)}
.queue-item.is-dragging{opacity:.45}
.queue-item-main{min-width:0}
.queue-item-actions{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}
.queue-item-actions button{padding:.35rem .6rem;font-size:.78rem}
.queue-remove{padding:.1rem .4rem!important;background:transparent!important;color:var(--muted)!important;font-size:1.05rem!important;line-height:1}
.queue-remove:hover{color:var(--bad)!important}
.queue-empty{padding:.35rem .55rem .15rem .95rem;color:var(--muted);font-size:.82rem}
.queue-unassigned{margin-top:.25rem;padding-top:.55rem;border-top:1px dashed var(--line)}
.queue-unassigned h3{margin:0 0 .45rem;font-size:.82rem;font-weight:600;color:var(--muted)}

/* ---------- 1-3 Assessment Point Distribution ---------- */
.apd-note{margin:6px 2px 2px;padding:10px 12px;font-size:13px;line-height:1.5;color:#4b4b4b;border:2px solid var(--ro-panel-frame,#909090);background:#f5f5f5}
.apd-note-pending{color:#0e7abc;border-color:#0e7abc;animation:apd-pulse 1.4s ease-in-out infinite}
@keyframes apd-pulse{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.apd-note-pending{animation:none}}
.apd-wrap{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;padding:5px 2px}
/* Vertical padding is the room the two axis labels sit in: the pyramid itself
   reaches within a few pixels of the viewBox edge, so without it the top label
   would land on the apex. */
.apd-chart{position:relative;flex:0 0 420px;padding:18px 0}
.apd-chart svg{display:block;width:100%;height:auto;overflow:visible}
/* Centred over and under the apex/base, since the label names the axis end
   rather than sitting beside a row. */
.apd-axis{position:absolute;left:0;right:0;text-align:center;
  font-family:'Space Mono',ui-monospace,monospace;font-size:10px;font-weight:700;
  letter-spacing:.06em;line-height:1.25;pointer-events:none}
.apd-axis-top{top:0;color:#0078d7}
.apd-axis-bottom{bottom:0;color:#ef8a80}
/* Band fill and per-level hard shadows come from ap-distribution.js filters. */
.apd-band{stroke:none}
/* Solid dots only — no outline; overlap reads through fill-opacity. */
.apd-bubble{cursor:pointer;transition:opacity .12s,filter .12s;
  fill-opacity:.78;stroke:none}
.apd-bubble:hover,.apd-bubble.is-active{fill-opacity:1}
.apd-bubble-label{font-family:'Space Mono',ui-monospace,monospace;font-size:8px;
  font-weight:700;fill:#1a1a1a;text-anchor:middle;pointer-events:none}
.apd-bubble-label.is-dimmed{opacity:.22}
/* The bubbles are too small to name themselves, so the full name follows the
   cursor. Positioned against .apd-chart, which is the relative box. */
.apd-tip{position:absolute;z-index:5;max-width:260px;padding:4px 8px;
  border:1px solid #313131;background:#fffdf5;color:#1a1a1a;
  font-family:'Space Mono',ui-monospace,monospace;font-size:10px;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;box-shadow:2px 2px 0 rgba(0,0,0,.25)}
.apd-tip[hidden]{display:none}
.apd-bubble:focus{outline:none}
.apd-bubble.is-dimmed{opacity:.22}
.apd-bubble.is-active,.apd-bubble:focus-visible{filter:brightness(1.08)}
.apd-bubble.is-open{filter:drop-shadow(0 0 2px #1064a8)}
.apd-band.is-muted{opacity:.4}

/* ---- right column: a drill-down, one question per step ---- */
.apd-legend{flex:1;min-width:340px;display:flex;flex-direction:column;gap:10px}
.apd-levels{display:flex;flex-direction:column;gap:8px}
/* Plain layout row — not a bevel button. Global button styles add face colour and
   shadow unless explicitly zeroed here. */
.apd-level{display:flex;align-items:flex-start;gap:10px;width:100%;margin:0;padding:8px 10px;
  appearance:none;-webkit-appearance:none;font:inherit;color:inherit;text-align:left;
  border:none;background:transparent;cursor:pointer;box-shadow:none;text-shadow:none;filter:none}
.apd-level:hover,.apd-level:focus,.apd-level:focus-visible,.apd-level.is-open{
  opacity:1;box-shadow:none;outline:none;background:transparent}
.apd-level-text,.apd-level-pts,.apd-level-name,.apd-level-def,
.apd-level-badges,.apd-level-badges i{box-shadow:none;text-shadow:none;filter:none}
.apd-level-chip{flex:0 0 20px;width:20px;height:20px;display:grid;place-items:center;
  font-family:'Space Mono',ui-monospace,monospace;font-size:11px;font-weight:700;color:#fff;
  box-shadow:2px 2px 0 #9a9995}
.apd-level-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;
  padding:0 10px;border-left:1px solid #000}
.apd-level-name{font-family:'Mozilla Text',sans-serif;font-size:13.5px;
  font-weight:600;line-height:18px;color:#0c1421}
.apd-level-def{font-family:'Space Mono',ui-monospace,monospace;font-size:10px;
  line-height:13.5px;color:#5a5a5a}
.apd-level-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.apd-level-badges i{display:block;width:10px;height:10px;border-radius:50%;
  font-style:normal;border:none}
.apd-level-badges .apd-badge-more{width:10px;height:10px;background:#e4e4e4}
.apd-ap-badge{display:grid;place-items:center;width:20px;height:20px;
  border-radius:50%;font-family:'Space Mono',ui-monospace,monospace;font-size:9px;
  font-weight:700;font-style:normal;color:#1a1a1a;border:1px solid rgba(0,0,0,.22)}
.apd-level-pts{flex:0 0 58px;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:5px 6px;background:transparent;font-family:'Space Mono',ui-monospace,monospace;
  border-style:solid;border-color:#9a9995;border-width:.5px 1px 1px .5px}
.apd-level-pts b{font-size:11px;line-height:14px;color:#0c1421}
.apd-level-pts i{font-size:10px;line-height:13px;font-style:normal;color:#5a5a5a;text-align:center}

.apd-aps{display:flex;flex-direction:column;gap:2px;padding-left:4px}
.apd-ap{display:flex;align-items:center;gap:12px;width:100%;padding:4px 6px;
  border:1px solid transparent;background:transparent;text-align:left;cursor:pointer}
.apd-ap:hover,.apd-ap.is-active{border-color:#c9c9c9;background:#f7f7f7}
.apd-ap-share{flex:0 0 44px;font-family:'Space Mono',ui-monospace,monospace;
  font-size:.82rem;font-weight:700;color:var(--ink)}
.apd-ap-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:'Space Mono',ui-monospace,monospace;font-size:.8rem;color:var(--ink)}
.apd-ap-rubric{flex:none;font-size:.68rem;padding:1px 6px;border-radius:999px;border:1px solid var(--line, #d0d4dc);color:var(--muted);white-space:nowrap}
.apd-ap.is-tuned .apd-ap-name::after{content:' ·edited';color:var(--muted);font-size:.72rem}

.apd-detail{border:2px solid #313131;background:#fff;box-shadow:var(--ro-shadow-panel)}
.apd-detail-bar{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;
  background:#1064a8;color:#fff;font-family:'Space Mono',ui-monospace,monospace;
  font-size:11px;font-weight:700;letter-spacing:.06em}
.apd-detail-bar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apd-detail-close{width:20px;height:18px;padding:0;border:1px solid #0b4d80;background:#fff;
  color:#111;font-size:10px;line-height:1;cursor:pointer}
.apd-detail-body{display:flex;flex-direction:column;gap:10px;padding:14px}
.apd-detail-name{display:flex;align-items:center;gap:8px}
.apd-detail-name b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:'Space Mono',ui-monospace,monospace;font-size:.86rem}
.apd-dot{flex:0 0 13px;width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.25)}
.apd-scope-pill{flex:0 0 auto;padding:3px 8px;border:1px solid #9a9995;
  font-family:'Space Mono',ui-monospace,monospace;font-size:9px;color:#4b4b4b}
.apd-weight-row{display:flex;align-items:baseline;gap:6px}
.apd-weight-row span:first-child{flex:1;font-size:.8rem;font-weight:600;color:var(--ink)}
.apd-weight-row b{font-family:'Space Mono',ui-monospace,monospace;font-size:.84rem;color:#1064a8}
.apd-weight-row i{font-family:'Space Mono',ui-monospace,monospace;font-size:9px;
  font-style:normal;color:#6a6a6a}
.apd-weight-slider{width:100%;margin:0;accent-color:#1064a8}
.apd-ticks{display:flex;justify-content:space-between;
  font-family:'Space Mono',ui-monospace,monospace;font-size:9px;color:#6a6a6a}
.apd-detail-body h4{margin:4px 0 0;font-size:.8rem;color:var(--ink)}
.apd-detail-def{margin:0;font-size:.78rem;line-height:1.5;color:#3a3a3a}
.apd-remove{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:9px 0;border:2px solid #c0392b;background:#fdf3f2;color:#c0392b;
  font-family:'Space Mono',ui-monospace,monospace;font-size:11px;font-weight:700;
  letter-spacing:.06em;cursor:pointer}
.apd-remove img{width:15px;height:15px;display:block}
.apd-detail-foot{margin:0;text-align:center;font-family:'Space Mono',ui-monospace,monospace;
  font-size:9px;color:#8a8a8a}

/* Shared framework dialogs use the same raised panel and bevel buttons as the rest of the Retro kit. */
.apd-modal{position:fixed;inset:0;z-index:1100;background:rgba(12,20,33,.45);display:grid;place-items:center;padding:24px}
.apd-modal.hidden{display:none}
.apd-modal-card{box-sizing:border-box;width:min(420px,100%);padding:22px 24px;background:var(--ro-panel-bg);border:0;border-radius:0;box-shadow:var(--ro-raised-thick),var(--ro-cast-thick);color:var(--ro-ink);font-family:var(--ro-font-ui)}
.apd-modal-card h3{margin:0 0 6px;font-family:var(--ro-font-bitmap);font-size:16px;line-height:1.35;color:var(--ro-ink)}
.apd-modal-card .sub{margin:0;color:var(--ro-ink-muted);line-height:1.4}
.apd-modal-card label{display:block;margin:14px 0 6px;color:var(--ro-ink)}
.apd-modal-card textarea{width:100%;font-family:var(--ro-font-ui);font-size:.86rem;padding:.45rem .55rem;border:0;border-radius:0;background:var(--ro-input-face);color:var(--ro-ink);box-shadow:var(--ro-sunken);resize:vertical}
.apd-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.apd-modal-actions .ro-bevel-btn{min-width:82px}
@media(max-width:760px){.apd-chart{flex:0 0 100%}.apd-legend{min-width:0}}

/* Workflow cards. The inset shadow is the frame; width fills the grid track. */
.batch-panel .card,.batch-panel .fig-card{
  width:100%;max-width:900px;margin-left:auto;margin-right:auto;
  background:var(--ro-panel-bg);
  border:0;
  border-radius:0;
  padding:23px;
  overflow:visible;
  box-shadow:var(--ro-raised-thick),var(--ro-cast-thick);
}
[data-theme="dark"] .batch-panel .card,[data-theme="dark"] .batch-panel .fig-card{background:var(--card)}
/* The 900px cap above is a reading measure for the Step 1 forms. Step 3 is not
   prose: it puts a code pane and the question list side by side, so capping it
   only narrows both columns. Let the review cards take the full grid track. */
.batch-review-layout>.card{max-width:none;margin-left:0;margin-right:0}

/* Panel. Creator Step 1 sits on the same panel as the Figma frame. #linkStep rules in
   design-system.css are more specific than .batch-panel .card, so this block
   has to name the step. */
body.retro .workflow{background:transparent}
#linkStep.batch-panel>.card{
  width:100%;max-width:948px;margin-left:auto;margin-right:auto;
  background:var(--ro-panel-bg);
  border:0;
  padding:23px;
  box-shadow:var(--ro-raised-thick),var(--ro-cast-thick);
}
#linkStep.batch-panel>.card>h2{
  font-family:var(--ro-font-bitmap);font-size:18px;font-weight:700;color:var(--ro-ink);
}
#linkStep #newProject .drop.ro-dropzone,
#batchDrop.batch-upload-zone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  height:auto;min-height:0;padding:30px 10px;
  background:rgba(217,217,217,.5);
  border-style:dashed;border-color:#848484;border-width:2px 1px 1px 2px;
  box-shadow:none;
}
#linkStep #newProject .drop .box-body,
#batchDrop.batch-upload-zone .box-body{
  flex-direction:column;width:100%;min-height:0;padding:0;gap:10px;
  background:transparent;border:0;box-shadow:none;
}
#linkStep #newProject .drop .ro-dropzone__icon,
#batchDrop.batch-upload-zone .ro-dropzone__icon{width:35px;height:33px;margin:0}
#linkStep #newProject .drop-title,
#batchDrop.batch-upload-zone .drop-title{margin:0;font-family:Oxanium,sans-serif;font-size:14.5px;font-weight:600;line-height:normal}
#linkStep #newProject .drop-sub,
#batchDrop.batch-upload-zone .drop-sub{margin:0;font-family:Oxanium,sans-serif;font-size:12px;font-weight:400;line-height:normal}
#linkStep #newProject .drop.hover,
#batchDrop.batch-upload-zone.hover{border-color:#313131}
/* Stepper */
body.retro .step.current .dot{
  background:#626262;color:#fff;font-weight:700;
  box-shadow:inset -2px -2px 0 #555,inset 2px 2px 0 rgba(255,255,255,.5);
}

.batch-panel .card>h2,.batch-panel .card>h3,.batch-panel .substep-h{
  margin:0 0 6px;font-family:var(--ro-font-bitmap);font-size:18px;font-weight:700;
  letter-spacing:.01em;color:var(--ro-ink)}
.batch-panel .card>.sub{margin:0 0 12px;font-size:13px;color:var(--ro-ink-muted)}

/* role colour. Blue labels carry structure and beat the older grey label rules. */
.batch-panel .ro-section-label,.support-col>label.ro-section-label{
  font-family:var(--ro-font-ui);font-size:14px;font-weight:700;
  color:var(--ro-accent);text-transform:uppercase;letter-spacing:0;white-space:nowrap}

/* LLM setting — the mode gates which 1-2 fields the pipeline reads, so it
   lives here in 1-1 rather than after the framework. */
.llm-setting{display:flex;flex-direction:column;gap:14px;margin:0 0 12px}
.llm-setting-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* Step A parsing, Step B semantic alignment and question realization are
   separate model jobs. */
.llm-role{flex:0 0 71px;width:71px;text-align:right;line-height:1.28;
  font-family:Oxanium,sans-serif;font-size:14px;font-weight:600;color:var(--ink)}
.llm-job{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}
.llm-pick{display:block;flex:0 0 auto}
.llm-pick--mode{width:180px}
/* The three jobs share one row and split whatever the labels leave, so the
   row holds together on a card narrower than the Figma frame instead of
   wrapping a pair onto its own line. */
.llm-setting-row--jobs{flex-wrap:nowrap}
.llm-setting-row--jobs .llm-job{flex:1 1 0}
/* 208 is the Figma width at a full row; capping there stops a lone survivor
   from stretching across the card when the other two jobs are hidden. */
.llm-setting-row--jobs .llm-pick{flex:1 1 0;min-width:0;max-width:208px}
/* Verifier / Semantic follow the main agent role unless opened here. */
.llm-advanced{margin:2px 0 6px}
.llm-advanced>summary{cursor:pointer;font-size:13px;color:var(--muted,#7d7d7d);width:max-content;max-width:100%}
.llm-advanced[open]>summary{margin-bottom:8px}
/* wrapFigControls injects .fig-select-wrap around the select, so size the
   wrapper the tutor actually sees, not just the native control. */
.llm-pick .fig-select-wrap,.llm-pick .fig-select{width:100%;min-width:0}
/* Provider names are prose, not a numeric field: reading type, ranged left,
   so "Gemini · gemini-2.5-flash" fits where centred monospace would clip. */
.llm-pick .fig-select-wrap select{
  font-family:'Mozilla Text',sans-serif;font-size:13.5px;text-align:left;
  /* The caret is 8px inset 4px from the right, so 16 clears it exactly. */
  padding:0 16px 0 9px!important;
}

/* Tick. Assessment perspective — six boxes, one per assessment scope level. */
.persp-boxes{display:flex;gap:8px;height:34px;align-items:center}
.persp-boxes button{
  width:21px;flex:0 0 21px;height:21px;padding:0;cursor:pointer;border:0;
  background:var(--ro-tick-face,#eee);
  box-shadow:inset -2px -2px 0 var(--ro-frame),inset 2px 2px 0 var(--ro-frame),inset -4px -4px 0 var(--ro-bevel-light),inset 4px 4px 0 var(--ro-bevel-dark)}
.persp-boxes button.on{
  background:var(--ro-tick-on,#839eb3);
  box-shadow:var(--ro-raised)}
.persp-level{display:block;text-align:center;font-size:12px;line-height:14px;color:var(--ro-ink-muted)}

.fw-areas-h{display:flex;align-items:baseline;gap:10px;margin:14px 0 8px}
.fw-areas-note{font-size:12.5px;line-height:15px;color:#7d7d7d}
.fw-areas-note.is-required{color:var(--bad,#df3d43);font-weight:600}
#previewPoints:disabled{opacity:.55;cursor:not-allowed}
/* Local setup reads as a recessed well inside the panel. */
.batch-panel .local-setup{
  border:1px solid rgba(125,125,125,.55);border-radius:0;background:var(--ro-white);
  padding:12px 14px;margin:0 0 12px}
.batch-panel .local-setup.ready{border:0;background:transparent;padding:0}
.batch-panel .local-command{border:1px solid rgba(125,125,125,.45);background:#fff;padding:3px 8px}
.batch-panel .local-command code{font-family:var(--ro-font-bitmap);font-size:12px}

/* Student links. A link is a credential: the plaintext block is visually
   distinct because it is shown once and never again. */
.student-issue{display:flex;gap:8px;align-items:center;margin:8px 0}
.student-issue input{width:80px}
.student-row{display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:6px 0;border-bottom:1px solid var(--input-border)}
.student-row:last-child{border-bottom:none}
.student-issued{border:2px solid var(--ok,var(--input-border));border-radius:8px;
  padding:8px 12px;margin:8px 0}
.student-token{font-size:.8rem;word-break:break-all}

/* Creator publish reuses the generic Retro input and square checkbox. */
.publish-title-input{width:100%;margin:6px 0 12px}
.publish-check{display:flex;align-items:center;gap:10px;margin:8px 0;font:14px/1.35 var(--ro-font-ui)}
.publish-check.is-disabled{opacity:.55}

/* Demo: the prepared documents offered in place of the file dialog
   (shared/framework/views.jsx DemoDocumentPicker). */
.demo-doc-picker .apd-modal-card{max-width:520px}
.demo-doc-list{display:grid;gap:10px;margin:12px 0}
.demo-doc{display:flex;align-items:flex-start;gap:10px;width:100%;padding:10px 12px;text-align:left;border:0;border-radius:0;
  background:var(--ro-panel-bg);color:var(--ro-ink);box-shadow:var(--ro-inset-card);font:400 13px/17px var(--ro-font-ui);cursor:pointer}
.demo-doc:hover,.demo-doc:focus-visible{box-shadow:var(--ro-sunken);background:var(--ro-input-face);outline:0}
.demo-doc img{flex:0 0 16px;margin-top:2px}
.demo-doc .small{color:var(--ro-ink-muted)}
div.demo-doc{cursor:default}
div.demo-doc:hover{box-shadow:var(--ro-inset-card);background:var(--ro-panel-bg)}
/* Dark drop zone (the ids above outrank the kit's dark rule). */
[data-theme="dark"] #linkStep #newProject .drop.ro-dropzone,
[data-theme="dark"] #batchDrop.batch-upload-zone{background:var(--ro-well,#1a1d22);border-style:dashed;border-color:#6b7380}
[data-theme="dark"] #linkStep #newProject .drop.hover,
[data-theme="dark"] #batchDrop.batch-upload-zone.hover{border-color:#c5ccd6}
[data-theme="dark"] #linkStep #newProject .drop-sub,
[data-theme="dark"] #batchDrop.batch-upload-zone .drop-sub{color:var(--ro-ink-muted,#9aa3b2)}
[data-theme="dark"] .fig-stepper,[data-theme="dark"] .fig-select,[data-theme="dark"] .fw-block .fig-select{color:var(--ro-ink,#f3f4f6)}
[data-theme="dark"] .fw-hint{color:var(--ro-ink-muted,#9aa3b2)}
[data-theme="dark"] .persp-end{color:var(--ro-ink-muted,#9aa3b2)}