/* Step 3 · Review, on both screens (Creator and Batch), as the Figma
   "Step 3 — Review and Approve" draws it. Built from the Retro kit's shared
   pieces (retro-os.css: .ro-short-btn, .ro-rule, .ro-inset-card, .ro-tag,
   .ro-disclosure, .ro-rule-label, .ro-note-field, .ro-code); this file only
   arranges them.

   The review fills the window and stays put: its cards are exactly as tall
   as the space under the stepper, and only their contents scroll. */

/* ---------- page ---------- */
.workflow:has(.rp-review-step){max-width:none;background:transparent}
.rp-review-step{display:block;padding:12px 0 0;background:transparent}
.rp-card[hidden]{display:none}
.rp-approval{flex:0 0 auto;color:var(--ro-ink-muted);font:400 12px/1 "Mozilla Text",var(--ro-font-ui);white-space:nowrap}
.rp-review{--rp-gap:20px;
  display:grid;grid-template-columns:minmax(0,948px);justify-content:center;gap:var(--rp-gap);
  box-sizing:border-box;height:var(--rp-fit-height,calc(100dvh - 180px));min-height:420px;padding:0 16px 8px}
/* With the original code: two panels across the whole window, 20px in. */
.rp-review.has-source{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 20px 20px}
/* Batch: its projects in a narrow panel on the left. */
.rp-review--with-list{grid-template-columns:220px minmax(0,948px)}
.rp-review--with-list.has-source{grid-template-columns:220px repeat(2,minmax(0,1fr))}
.rp-review .review-projects{position:static;top:auto}
.rp-review .review-projects .rp-card-body{gap:8px}
.rp-review .review-projects button{box-sizing:border-box;width:100%;margin:0;padding:8px 10px;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/16px var(--ro-font-ui)}
.rp-review .review-projects button.active{box-shadow:var(--ro-sunken);background:var(--ro-input-face)}
.rp-review .review-projects button:disabled{opacity:.55}

/* A viewport-tall panel: head and foot fixed, body scrolls. */
/* Opaque, and above what is beside it: nothing shows through a panel. */
.rp-card{box-sizing:border-box;position:relative;z-index:1;isolation:isolate;display:flex;flex-direction:column;gap:7px;
  min-width:0;min-height:0;height:100%;padding:20px;opacity:1;background:var(--ro-panel-bg,#eee);
  box-shadow:var(--ro-raised-thick),var(--ro-cast-thick);border-radius:0}
.rp-questions{z-index:2}
/* The original-code panel is also a .code-panel: drop that older side
   panel's sticky offset, border and height cap. */
.rp-card.code-panel{top:auto;max-height:none;border:0;border-radius:0}
.rp-card-head{display:flex;align-items:center;gap:7px;flex:0 0 auto;min-width:0;margin:0;font-size:inherit;color:inherit}
.rp-card-head>.ro-short-btn,.rp-card-head>.rp-approval{margin:0;align-self:center}
.rp-card-title{margin:0;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:700 16px/24px var(--ro-font-bitmap);color:var(--ro-ink)}
.rp-card-sub{flex:0 0 auto;margin:0;color:var(--ro-ink-muted);font:400 13.5px/16px "Mozilla Text",var(--ro-font-ui)}
.rp-card-sub:empty{display:none}
/* The one part that scrolls; it takes all the height the head and foot
   leave (design-system caps #questions at 62vh for the older layout). */
.rp-card-body,.rp-review #questions{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;display:flex;flex-direction:column;
  gap:14px;padding:10px 0;scrollbar-gutter:stable}
.rp-card-foot,.rp-card-foot.actions{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;padding:8px 0 0}
.rp-card .err:empty{display:none}

/* ---------- original code (left card) ---------- */
/* The folder and file pickers are the kit's short field controls
   (figma-ui.css draws the tall one used in the framework rows). */
.rp-source .rp-card-head .fig-select-wrap,.rp-source .rp-card-head .fig-select-wrap:has(select:disabled){
  flex:0 1 auto;min-width:72px;max-width:45%;height:24px;padding:0;background:var(--ro-input-face);
  box-shadow:inset -1.5px -1.5px 0 #5a5a5a,inset 1.5px 1.5px 0 #5a5a5a,inset -3px -3px 0 rgba(85,85,85,.5),inset 3px 3px 0 rgba(255,255,255,.75)}
.rp-source .rp-card-head .fig-select-wrap select{height:24px!important;padding:0 22px 0 8px!important;opacity:1;
  color:var(--ro-ink-muted);font:400 12px/24px "Mozilla Text",var(--ro-font-ui);text-align:left;text-overflow:ellipsis}
.rp-source .rp-card-head .fig-select-caret{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:8px;pointer-events:none}
.rp-source .code-panel-hint{margin:0;padding:0;border:0;color:var(--ro-ink-faint);font-size:12px}
.rp-source .code-panel-hint:empty{display:none}
/* A cell is as wide as its longest line (at least the panel): the panel
   scrolls sideways rather than a line running out of its box. */
.rp-source .rp-card-body{align-items:flex-start}
.code-unit{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;width:max-content;min-width:100%;padding:10px 20px;
  background:var(--ro-panel-bg);box-shadow:var(--ro-inset-card)}
/* The cell's name sits in the box's top edge, as a legend does:
   |-- Cell 2 ---------|
   |                   |
   |___________________|
   Only the panel's own colour behind it, to break the line. */
.rp-source .code-unit{position:relative;margin-top:8px;padding:16px 20px 10px}
.rp-source .code-unit>.code-unit-head{position:absolute;top:0;left:14px;z-index:1;transform:translateY(-50%);
  padding:0 6px;border:0;background:var(--ro-panel-bg);color:var(--ro-ink-faint);
  font:400 12px/1 var(--ro-font-ui);letter-spacing:0;list-style:none;cursor:pointer}
.rp-source .code-unit>.code-unit-head::-webkit-details-marker{display:none}
.rp-source .code-unit:not([open]){padding-bottom:6px}
.rp-source .code-lines{margin:0;padding:0;list-style:none}
.rp-source .code-line{display:flex;gap:10px;padding:0 4px;white-space:pre;font:400 13px/18px var(--ro-font-code)}
.rp-source .code-ln{flex:0 0 3ch;text-align:right;color:var(--ro-ink-faint);opacity:.6;user-select:none}

/* ---------- question card ---------- */
.rp-q{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;border:0;border-radius:0;background:transparent}
/* The number and tags sit in the card's top edge, as a cell's name does in
   the code panel, and Edit sits in the same edge at the right:
   |-- Q2 <Program Logic> ------------------ [Edit] --| */
.rp-q-card{position:relative;display:flex;flex-direction:column;gap:12px;margin-top:12px;padding:20px 20px 10px}
.rp-q-head{position:absolute;top:0;left:14px;right:14px;z-index:1;transform:translateY(-50%);
  display:flex;align-items:center;gap:0;min-width:0;pointer-events:none}
.rp-q-legend{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:0 6px;background:var(--ro-panel-bg);pointer-events:auto}
.rp-q-num{flex:0 0 auto;font:600 16px/20px var(--ro-font-ui);color:var(--ro-ink)}
.rp-q-spacer{flex:1 1 auto}
.rp-q-text{display:block;min-width:0;color:var(--ro-ink);font:400 14px/18px var(--ro-font-ui);overflow-wrap:anywhere}
.rp-q-text code.inline{padding:0 .25em;border-radius:0;background:var(--ro-code-chip);color:var(--ro-code-ink);
  font:400 .92em/1 var(--ro-font-code)}
/* A name that is in the loaded source: blue, and it jumps there. (No
   underline: it would hide the underscores in snake_case names.) */
.rp-q-text code.inline.code-jump{cursor:pointer;color:var(--ro-accent);background:var(--ro-code-chip);border:0}
.rp-q-text code.inline.code-jump:hover,.rp-q-text code.inline.code-jump:focus{background:rgba(0,120,215,.14);outline:0}

/* Text until Edit; the fields while editing. */
.rp-q .stem,.rp-q .opt-text,.rp-q .expl{display:none}
.rp-q.is-editing .stem-preview,.rp-q.is-editing .opt-preview,.rp-q.is-editing .rp-q-expl-text{display:none}
.rp-q.is-editing .stem,.rp-q.is-editing .opt-text,.rp-q.is-editing .expl{display:block;width:100%;min-height:28px;padding:5px 7px;
  font:400 14px/18px var(--ro-font-ui);resize:vertical;overflow:hidden}
.rp-q.is-editing .expl{font-size:12px;line-height:15px}

/* The code a question is about. */
.rp-q-evidence{min-width:0;margin:0;padding:0;border-radius:0;background:transparent;color:var(--ro-ink-faint);font:400 14px/18px var(--ro-font-ui)}
.rp-q-evidence>summary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-q-evidence .rp-when-open,.rp-q-evidence[open] .rp-when-closed{display:none}
.rp-q-evidence[open] .rp-when-open{display:inline}
.rp-q-evidence[open]>summary{padding-top:10px}
.rp-q-evidence .evidence-body{padding:7px 5px 10px}
.rp-q-evidence .evidence-code{margin:0;padding:0;border:0;border-radius:0;background:transparent;overflow-x:auto;
  white-space:pre;font:400 13px/18px var(--ro-font-code)}
.rp-q-evidence .evidence-code+.evidence-code{margin-top:10px}

/* Options. */
.rp-q .opts{display:flex;flex-direction:column;gap:8px;margin:0}
.rp-q .opt{display:flex;align-items:flex-start;gap:8px;margin:0;padding:0;border:0;background:transparent}
.rp-q .opt .drag-handle{flex:0 0 8px;width:8px;height:18px;display:flex;align-items:center;color:var(--ro-chrome-ink);cursor:grab}
.rp-q .opt .ro-tick--compact{margin-top:1px}
.rp-q .okey{flex:0 0 auto;min-width:14px;font:500 14px/18px var(--ro-font-ui);color:var(--ro-ink)}
.rp-q .opt-preview{flex:1 1 auto;font-weight:500}
.rp-q .opt-text{flex:1 1 auto}

/* Explanation. */
.rp-q-expl{padding:0 5px;color:var(--ro-ink-faint);font:400 12px/15px var(--ro-font-ui)}
.rp-q-expl b{font-weight:600}
.rp-q-expl .rp-q-text{display:inline;color:inherit;font:inherit}
.rp-q-expl .rp-q-text>span{white-space:normal!important}
.rp-q-expl code.inline{font-size:1em}

.rp-q .qflags{margin:0}

/* Decisions and the comment, under the card. */
.rp-q>.review-decisions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0}
.rp-q-comment{margin:0}
.rp-q-comment .review-note{min-height:30px;height:30px}
.rp-q-msg{margin:-8px 0 0}
.rp-q-msg:has(.msg:empty){display:none}

/* ---------- narrow ---------- */
@media (max-width: 1100px){
  .rp-review.has-source{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
  .rp-review--with-list,.rp-review--with-list.has-source{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;height:auto}
  .rp-review--with-list .rp-card{height:auto;max-height:var(--rp-fit-height,80vh)}
}
@media (max-width: 640px){
  .rp-review{padding:0 8px 12px}
  .rp-card{padding:12px}
  .rp-card-head{flex-wrap:wrap}
  .rp-card-head .ro-rule{display:none}
  .rp-q-card{padding:10px}
}

/* Step 3 while the run is still writing: finished questions are readable but
   not yet reviewable (the run replaces them when it stores the paper), and
   one card after them says what is happening to the next question. */
.rp-q--provisional{opacity:.82}
.rp-q-pending{color:var(--ro-ink-muted);font-style:italic}
.rp-q-pending code{background:none;color:inherit;font-style:italic}
.rp-q-generating{flex-direction:row;align-items:center;gap:14px;padding:18px 20px}
.rp-q-generating p{margin:0}
.rp-q-generating__title{font:600 15px/20px var(--ro-font-ui);color:var(--ro-ink)}
/* Original code scrolls both ways; give it the question list's scrollbar
   (design-system.css #questions) instead of the browser's pale default. */
.rp-source .rp-card-body::-webkit-scrollbar,.rp-source .code-panel-body::-webkit-scrollbar{width:8px;height:8px}
.rp-source .rp-card-body::-webkit-scrollbar-track,.rp-source .code-panel-body::-webkit-scrollbar-track,
.rp-source .rp-card-body::-webkit-scrollbar-corner,.rp-source .code-panel-body::-webkit-scrollbar-corner{background:transparent}
.rp-source .rp-card-body::-webkit-scrollbar-thumb,.rp-source .code-panel-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.rp-source .rp-card-body::-webkit-scrollbar-thumb:hover,.rp-source .code-panel-body::-webkit-scrollbar-thumb:hover{background:var(--placeholder)}