/* Request to Work with AiBT -- RequestToWork/index.php only.
 *
 * The page IS the sign-up page now, so it wears the sign-up page's clothes:
 * Common/AuthHeading.php gives the card, the logo, the title and the intro,
 * and assets/css/style.css gives the fields, the buttons and the colours. This
 * file only adds what a five-section form needs on top of that -- a wider
 * card, the rail of sections, the two tables, and the check-your-answers list.
 *
 * Nothing here restyles anything the other auth pages use, so sign-in and
 * sign-up cannot be touched by a change in this file. Where a rule looks
 * copied from signup.php's inline block (the verify row, the code row, the
 * faded post-verify fields), it IS copied, deliberately: the two forms ask for
 * an email and a password the same way and should look the same doing it.
 */

/* The card is the sign-up card, widened: five sections do not fit 480px. */
.auth-card-wide{max-width:980px}
.auth-card-wide .auth-title{white-space:normal}       /* the title is longer than "Sign up" */
/* The logo spans the card's content width on the narrow cards, which at this
   width would make it a billboard; it keeps the sign-up card's own size. */
.auth-card-wide .auth-brand{max-width:400px;margin-inline:auto}   /* centred on the wide card */

.form-note{margin:0 0 16px;font-size:13px;color:var(--ink-mute)}
.req{color:#B3261E;font-weight:700;margin-left:2px;cursor:help}

/* ---------- the rail of sections ----------
   A section opens only once the ones before it are saved, because before the
   account exists there is nowhere to put them. A finished one stays a link,
   since going back to change an answer is normal. */
.rq-rail{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.rq-rail button{flex:1;min-width:132px;text-align:left;background:var(--white);
  border:2px solid var(--grey-line);border-radius:var(--r);padding:10px 12px;
  font:inherit;font-size:12px;font-weight:600;color:var(--ink-mute);cursor:not-allowed;opacity:.7}
.rq-rail button .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:#F1EFF0;color:var(--ink-mute);font-size:11px;font-weight:800;margin-right:8px}
.rq-rail button b{font-weight:700;color:inherit}
.rq-rail button.done{cursor:pointer;opacity:1;color:var(--ink);border-color:#CDE7D9;background:#F1F9F5}
.rq-rail button.done .n{background:#2E7D5B;color:var(--white)}
.rq-rail button.on{cursor:pointer;opacity:1;color:var(--ink);border-color:var(--brand);background:var(--white)}
.rq-rail button.on .n{background:var(--brand);color:var(--ink)}
.rq-rail button.done:hover{border-color:#2E7D5B}

/* ---------- a section ---------- */
.rq-h{font-size:1.02rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px}
.rq-sub{color:var(--ink-soft);font-size:.9rem;margin:0 0 20px}
.rq-form{display:grid;gap:18px}
.rq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.rq-grid .wide{grid-column:1/-1}
/* a field with a hint under it must not stretch the box beside it */
.rq-grid .field{align-content:start}

/* style.css dresses .field input; a form this long also needs selects and
   boxes of text, so they are given the same clothes here. */
.field select,.field textarea{
  width:100%;padding:13px 15px;font:inherit;font-size:.95rem;color:var(--ink);background:var(--white);
  border:2px solid var(--grey-line);border-radius:var(--r);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.field textarea{min-height:96px;line-height:1.7;resize:vertical}
.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(255,207,1,.28)}
.field input:disabled,.field select:disabled,.field textarea:disabled{background:#FAF9FA}

.rq-block{margin-top:24px;padding-top:20px;border-top:1px solid var(--grey-line)}
.rq-block > h3{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 4px}
.rq-block p.note{margin:0 0 14px;font-size:.82rem;color:var(--ink-mute)}
.rq-ticks{display:grid;gap:8px}
/* short answers read better side by side than as one long column */
.rq-ticks-2{grid-template-columns:1fr 1fr}
@media (max-width:640px){ .rq-ticks-2{grid-template-columns:1fr} }
.rq-tick{display:flex;gap:10px;align-items:flex-start;border:2px solid var(--grey-line);
  border-radius:var(--r);padding:11px 14px;font-size:.9rem;cursor:pointer}
.rq-tick:hover{border-color:#D4D2D3}
.rq-tick input{margin-top:3px;flex:none}
.rq-tick input[type=text]{margin-top:6px;width:100%;padding:9px 12px;border:2px solid var(--grey-line);
  border-radius:var(--r);font:inherit;font-size:.9rem}

/* ---------- picked from a list: dialling code, country, zone, languages ---------- */
.rq-phone{display:flex;gap:8px}
.rq-phone .rq-combo{flex:none;width:118px}       /* just room for "+880" */
.rq-phone input{flex:1;min-width:0;width:100%;padding:13px 15px;font:inherit;font-size:.95rem;color:var(--ink);
  border:2px solid var(--grey-line);border-radius:var(--r)}
.rq-phone input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(255,207,1,.28)}
.rq-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}   /* under the box */
.rq-chip{display:inline-flex;align-items:center;gap:6px;background:#FFFBE6;border:1px solid #F0DCA0;
  border-radius:20px;padding:5px 6px 5px 12px;font-size:.84rem;font-weight:600}
.rq-chip button{background:none;border:0;font:inherit;font-size:15px;line-height:1;color:var(--ink-mute);
  cursor:pointer;padding:0 4px}
.rq-chip button:hover{color:#B3261E}
/* type-and-search: the box, and the list that narrows under it */
.rq-combo{position:relative}
.rq-combo-in{width:100%;padding:13px 15px;font:inherit;font-size:.95rem;color:var(--ink);background:var(--white);
  border:2px solid var(--grey-line);border-radius:var(--r)}
.rq-combo-in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(255,207,1,.28)}
.rq-combo-pop{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);max-height:280px;overflow:auto;
  background:var(--white);border:2px solid var(--grey-line);border-radius:var(--r);
  box-shadow:0 18px 40px rgba(0,0,0,.14)}
.rq-combo-sm .rq-combo-pop{left:0;width:330px;right:auto}   /* the code box is narrow; its list is not */
.rq-combo-row{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;background:none;border:0;
  padding:9px 13px;font:inherit;font-size:.88rem;color:var(--ink);cursor:pointer;border-bottom:1px solid #F3F2F2}
.rq-combo-row:last-child{border-bottom:0}
.rq-combo-row:hover{background:#FFFBE6}
.rq-combo-row b{font-weight:600;flex:1}
.rq-combo-row i{font-style:normal;color:var(--ink-mute);font-size:.82rem}
.rq-combo-none{margin:0;padding:12px 13px;font-size:.85rem;color:var(--ink-mute)}

/* the address already has an account: nothing to verify, just sign in */
.rq-known{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;padding:14px 16px;
  border-radius:var(--r);background:#FFF8D6;color:#5A4A00;border-left:4px solid var(--brand);font-size:.88rem;font-weight:600}
.rq-known span{flex:1;min-width:220px}

/* ---------- the two tables inside the form ---------- */
.rq-table{width:100%;border-collapse:collapse;margin-top:10px}
.rq-table th{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-mute);text-align:left;padding:0 8px 7px 0}
.rq-table td{padding:4px 8px 4px 0}
.rq-table input{width:100%;padding:10px 12px;font:inherit;font-size:.88rem;color:var(--ink);
  border:2px solid var(--grey-line);border-radius:var(--r)}
.rq-table input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(255,207,1,.28)}
/* The "please describe" box a list opens when Other is picked. */
.field .rq-other-label{margin-top:10px}
.rq-addrow{margin-top:10px;background:none;border:2px dashed var(--grey-line);border-radius:var(--r);
  padding:10px 16px;font:inherit;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);cursor:pointer}
.rq-addrow:hover{border-color:var(--brand);background:#FFFBE6}

/* ---------- email proved, then a password ----------
   Lifted from signup.php so the two forms ask for this the same way. */
.verify-row,.code-row{display:flex;gap:8px;align-items:stretch}
.verify-row .verify-input,.code-row .code-input{flex:1;min-width:0;margin:0}
.btn-verify{display:flex;align-items:center;justify-content:center;white-space:nowrap;
  padding:0 16px;border:1px solid var(--brand);background:transparent;color:var(--brand);
  border-radius:var(--r-lg);font:inherit;font-weight:600;cursor:pointer}
.btn-verify:disabled{cursor:default}
.btn-verify.is-verified{border-color:#2e7d5b;color:#2e7d5b;background:rgba(46,125,91,.08)}
.verify-block{margin:10px 0 4px}
.code-row .code-input{letter-spacing:.4em;font-variant-numeric:tabular-nums;text-align:center}
.verify-note{margin:8px 0 0;font-size:14px}
.verify-note.ok{color:#2e7d5b}
.verify-note.err{color:#b3261e}
.verify-note.info{color:var(--ink-mute)}
.verify-first-note{margin:14px 0;padding:10px 12px;border-radius:var(--r-lg);
  background:#fff7e6;border:1px solid #f0dca0;color:#8a6d3b;font-size:14px}
/* shown but locked until the email is verified -- faded and non-interactive */
.post-verify{display:grid;gap:18px}
.post-verify.is-locked{opacity:.5;pointer-events:none}

/* ---------- messages ----------
   Beside the action that caused them, never a browser alert, with a cross to
   close. The .alert colours are style.css's, so they read as the rest of the
   site does. */
.rq-msg{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r);padding:13px 15px;
  margin:18px 0 0;font-size:.88rem;font-weight:600}
.rq-msg.err{background:#FDECEA;color:#8C1D18;border-left:4px solid #B3261E}
.rq-msg.ok{background:#EDF7F1;color:#1C5B41;border-left:4px solid #2E7D5B}
/* Orange: nothing is lost, but something wants doing (sign in again). */
.rq-msg.warn{background:#FFF4E5;color:#7A4300;border-left:4px solid #E08A00}
.rq-msg a{color:inherit;font-weight:700}
.rq-msg span{flex:1}
.rq-msg button{background:none;border:0;font:inherit;font-size:17px;line-height:1;color:inherit;
  cursor:pointer;opacity:.6}
.rq-msg button:hover{opacity:1}
.rq-left{margin:14px 0 0;font-size:.82rem;color:var(--ink-mute)}

/* ---------- the foot of a section ---------- */
.rq-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:26px;padding-top:20px;border-top:1px solid var(--grey-line)}
.rq-foot .sp{flex:1}
.btn-light{background:var(--white);color:var(--ink);border-color:var(--grey-line)}
.btn-light:hover{background:var(--white);color:var(--ink);border-color:var(--ink);transform:translateY(-2px)}
.btn-send{background:#2E7D5B;color:var(--white);border-color:#2E7D5B}
.btn-send:hover{background:#246349;color:var(--white);border-color:#246349;transform:translateY(-2px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.rq-saved{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2E7D5B}
/* every submit shows a loader, so nothing happens in silence */
.btn.busy{position:relative;color:transparent}
.btn.busy::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(51,49,50,.25);border-top-color:var(--ink);animation:rqspin .7s linear infinite}
.btn-send.busy::after,.btn-brand.busy::after{border-color:rgba(51,49,50,.25);border-top-color:var(--ink)}
.btn-send.busy::after{border-color:rgba(255,255,255,.45);border-top-color:var(--white)}
@keyframes rqspin{to{transform:rotate(360deg)}}

/* ---------- checking the answers at the end ---------- */
.rq-rev{border:2px solid var(--grey-line);border-radius:var(--r);margin-bottom:12px;overflow:hidden}
.rq-rev-head{display:flex;align-items:center;gap:12px;background:#FAF9FA;padding:11px 16px;
  border-bottom:2px solid var(--grey-line)}
.rq-rev-head b{flex:1;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.rq-rev-head button{background:none;border:0;font:inherit;font-size:12px;font-weight:700;color:var(--ink);
  cursor:pointer;border-bottom:2px solid var(--brand)}
.rq-rev dl{margin:0;padding:12px 16px;display:grid;grid-template-columns:minmax(190px,40%) 1fr;
  gap:7px 16px;font-size:.88rem}
.rq-rev dt{color:var(--ink-mute);font-weight:600}
.rq-rev dd{margin:0;font-weight:600}
.rq-rev dd.none{color:#BDBABB;font-weight:500}
.rq-done{background:#EDF7F1;border:1px solid #CDE7D9;border-radius:var(--r);padding:16px 18px;
  font-size:.88rem;margin-bottom:16px}
.rq-stop{background:#FDECEA;color:#8C1D18;border-left:4px solid #B3261E;border-radius:var(--r);
  padding:14px 16px;margin-top:14px;font-size:.88rem;font-weight:600}

@media (max-width:780px){
  .rq-grid{grid-template-columns:1fr}
  .rq-rev dl{grid-template-columns:1fr}
  .rq-rail button{min-width:100%}
}

/* The Observer address with its Copy button, and the consent paragraph. */
.rq-confirm .note{max-width:68ch}
.rq-copy{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 12px}
.rq-copy code{font-size:.95rem;background:#F6F5F2;border:1px solid var(--grey-line,#E2E0E1);border-radius:4px;padding:8px 12px;user-select:all}
/* The Observer's Paratext name ("Ai BT") in the steps, the tick and the
   consent popup: bold and black, so it stands out from the grey steps. The
   copy box keeps its own plain style. */
.rq-em{font-weight:700;color:#000}
.rq-copybtn{font:inherit;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1.5px solid var(--grey-line,#E2E0E1);background:#fff;border-radius:4px;padding:8px 14px;cursor:pointer}
.rq-copybtn:hover{border-color:var(--brand,#FFD001)}

/* ---------- signed in: the My Account project-setup layout ----------
   project-setup.css gives the rail, the numbered cards, the badges and the
   confirmation boxes; these only fit the request's six steps and its forms
   into them. */
.rq-member .rq-rail6 .node{padding:14px 12px;font-size:12.5px;min-width:0;overflow-wrap:anywhere}
.rq-member .verify-box strong{color:var(--ink)}
.rq-member .step-body .rq-form{margin-top:4px}
.rq-member .rq-sub{font-size:15px}
.rq-member .rq-sum{margin:0;border-width:1px}
.rq-member .rq-sum dl{padding:14px 18px}
.rq-member .rq-stepfoot,.rq-member .rq-sendrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.rq-member .rq-stepfoot .sp{flex:1}
.rq-member .rq-msg{margin-top:16px}
.rq-member .btn.busy::after{border-color:rgba(51,49,50,.25);border-top-color:var(--ink)}
.rq-member .muted{color:var(--ink-mute)}
.rq-member .verify-box form{margin:0}
@media (max-width:860px){
  .rq-member .rq-rev dl{grid-template-columns:1fr}
}

/* The book picker (Section D), the old setup's: a button a book, by testament. */
.rq-books{margin:6px 0 14px}
.rq-books > b{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px}
.rq-books > div{display:flex;flex-wrap:wrap;gap:8px}
.rq-book{font:inherit;font-size:13px;font-weight:600;background:#fff;border:1.5px solid var(--grey-line,#E2E0E1);
  border-radius:6px;padding:8px 14px;cursor:pointer;color:var(--ink)}
.rq-book:hover{border-color:var(--brand,#FFD001)}
.rq-book.on{background:var(--brand,#FFD001);border-color:var(--brand,#FFD001);font-weight:700}
.rq-book:focus-visible{outline:3px solid var(--blue,#31408F);outline-offset:2px}
/* The Observer steps under the address (Section E). */
.rq-steps{margin:4px 0 12px 22px;padding:0;line-height:1.9;color:var(--ink-soft);list-style:decimal}
.rq-steps li{list-style:decimal}

/* The data-access consent popup (Section E's Observer tick). */
.rq-over{position:fixed;inset:0;background:rgba(35,33,34,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000}
.rq-modal{background:#fff;border-radius:12px;max-width:620px;width:100%;max-height:90vh;overflow:auto;padding:26px 28px;
  box-shadow:0 22px 44px rgba(51,49,50,.25)}
.rq-modal h3{margin:0 0 12px;font-size:20px}
.rq-modal p,.rq-modal li{font-size:15px;line-height:1.65;color:var(--ink)}
.rq-modal ul{margin:6px 0 12px 22px;list-style:disc}
.rq-modal li{list-style:disc}
.rq-modal .rq-stepfoot{display:flex;align-items:center;gap:12px;margin-top:18px}
.rq-modal .rq-stepfoot .sp{flex:1}
.rq-modal .btn{display:inline-block;background:var(--brand,#FFD001);border:none;border-radius:8px;padding:12px 24px;
  font:inherit;font-weight:800;font-size:13px;letter-spacing:1.2px;cursor:pointer;color:var(--ink)}
.rq-modal .btn.ghost{background:#fff;border:2px solid var(--grey-line,#E2E0E1)}

/* A required answer still empty after SAVE was pressed: outlined in red. */
.rq-miss > label,.rq-miss > h3{color:#B3261E}
.field.rq-miss input,.field.rq-miss textarea,.field.rq-miss select,
.rq-miss .rq-table input,.rq-miss .rq-tick,.rq-miss .rq-book{border-color:#B3261E !important;background-color:#FFF6F5}
.field.rq-miss input:focus,.field.rq-miss textarea:focus{box-shadow:0 0 0 4px rgba(179,38,30,.15)}

/* SEND THE REQUEST while it is sending: locked, spinning, and saying so. */
.rq-member .btn.sending,.rq-member .btn.sending:disabled{background:var(--brand,#FFD001);color:var(--ink);opacity:.85;cursor:progress}
.rq-member .btn.sending .btn-spin{width:14px;height:14px;border-radius:50%;display:inline-block;vertical-align:-2px;margin-right:9px;
  border:2px solid rgba(51,49,50,.25);border-top-color:var(--ink);animation:rq-spin .7s linear infinite}
@keyframes rq-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rq-member .btn.sending .btn-spin{animation-duration:2s}}
.rq-sending{margin:14px 0 0;font-size:14px;color:var(--ink-soft)}

/* The describe field under a tick list, once Other is ticked: full width. */
.rq-other-wide{margin-top:12px;width:100%}
.rq-other-wide input{width:100%}

/* The page's opening: full width, and the paper form's introduction. */
.rq-member .mp-titlerow .page-title{max-width:none}
.rq-intro{max-width:none;margin-top:14px;color:var(--ink-soft);font-size:15.5px;line-height:1.7}
.psetup .rq-intro p{max-width:none;margin:0 0 12px}
.rq-intro h3{font-size:17px;font-weight:700;color:var(--ink);margin:22px 0 8px;letter-spacing:normal;text-transform:none}
.rq-intro ol{margin:0 0 12px 22px;padding:0}
.rq-intro li{list-style:decimal;margin-bottom:4px}
.rq-intro .rq-version{font-size:13px;font-weight:600;color:var(--ink-mute)}
.rq-intro .rq-howto{margin-top:18px;color:var(--ink)}
/* The verify-your-email note runs the full width of its card. */
.psetup .step-body p.verify-first-note{max-width:none;width:100%;box-sizing:border-box}
.rq-other-wide textarea{width:100%;min-height:84px}

/* Text on the request page uses the width it has. project-setup.css caps
   paragraphs at 72ch (and this file capped a few notes narrower), which broke
   lines short of the edge in every step; lifted here, for this page only. */
.psetup.rq-member p,
.psetup.rq-member .step-body p,
.psetup.rq-member .note,
.psetup.rq-member .rq-confirm .note,
.psetup.rq-member .field-hint,
.psetup.rq-member .rq-left,
.psetup.rq-member .rq-sub,
.psetup.rq-member .verify-note,
.psetup.rq-member .rq-msg span{max-width:none}

/* "Other" in a tick list: its describe field sits inside its own box. */
.rq-tick-other{flex-direction:column;gap:10px}
.rq-tick-other > label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
/* It stays in its own cell; the describe field fits that box. */
.rq-tick-other{min-width:0}
.rq-tick-other textarea{width:100%;min-height:84px;box-sizing:border-box;padding:10px 12px;font:inherit;font-size:.92rem;
  border:2px solid var(--grey-line);border-radius:var(--r)}
.rq-tick-other textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(255,207,1,.28)}

/* Any button waiting on the server (Verify email, Verify, SAVE AND CONTINUE,
   SAVE, SEND): locked, with a spinner in its own colour before its label. */
.rq-member .sending,.rq-member .sending:disabled{cursor:progress;opacity:.85}
.rq-member .btn.sending,.rq-member .btn.sending:disabled{background:var(--brand,#FFD001);color:var(--ink)}
.rq-member .sending .btn-spin{width:14px;height:14px;border-radius:50%;display:inline-block;vertical-align:-2px;margin-right:9px;
  border:2px solid currentColor;border-right-color:transparent;animation:rq-spin .7s linear infinite}

/* Section A: the code box, messages and the yellow note under the grid, full width. */
.rq-verify{margin-top:4px}
.rq-verify .verify-first-note{margin-top:6px}

/* Spacing on the request page. project-setup.css gives every .field a 22px
   bottom margin on top of the grid's own gap, which opened big holes under
   every row; here the grid's gap alone spaces them. */
.psetup.rq-member .field{margin-bottom:0}
.psetup.rq-member .rq-verify:empty{display:none}
.psetup.rq-member .rq-verify{margin-top:0}
.psetup.rq-member .rq-verify .verify-block{margin:0}
.psetup.rq-member .verify-block > label{display:block;font-size:12.5px;font-weight:700;letter-spacing:1.5px;color:var(--grey);margin-bottom:8px}
/* The code box is a field like the others: same height, border and radius. */
.psetup.rq-member .code-row .code-input{padding:13px 14px;border:1.5px solid var(--line);border-radius:8px;font-size:15px;
  font-family:inherit;background:#fff;color:var(--ink);height:auto;line-height:inherit}
.psetup.rq-member .code-row .code-input:focus{outline:none;border-color:var(--blue)}

/* New project / Adding domains / Existing project reference: one row. */
.rq-radios-ref{grid-template-columns:1fr 1fr 1fr;align-items:stretch}
.rq-radios-ref .rq-ref{margin:0}
.rq-radios-ref .rq-ref input{height:100%}
@media (max-width:760px){ .rq-radios-ref{grid-template-columns:1fr} }
/* Two textareas side by side in C: the same height. */
.psetup.rq-member .rq-grid textarea{min-height:96px}

/* Hints under a field: small and grey, as on the rest of the form. */
.psetup.rq-member .field-hint{font-size:12.5px;color:var(--grey);margin:6px 0 0;line-height:1.5}

/* The AiBT team's review record ("For AiBT office use"), Common/WorkRequest.php. */
.wr-review{width:100%;max-width:720px;border-collapse:collapse;margin-top:14px;font-size:13px}
.wr-review caption{text-align:left;font-weight:800;font-size:13px;margin-bottom:6px}
.wr-review th,.wr-review td{border:1px solid var(--line,#e6e6e6);padding:8px 10px;text-align:left;vertical-align:top}
.wr-review th{background:var(--panel,#fafafa);font-size:11px;letter-spacing:1px;font-weight:800}
.wr-review td:first-child{width:46%;font-weight:600;color:var(--grey,#6b6f76)}

/* ---------- steps: done ones fold to their heading (9 Oct 2026) ----------
   Only the steps reached are drawn; a done step shows its heading with DONE ✓
   and a chevron, and a click on the heading opens it to read (or EDIT). */
.psetup .step.foldable > .step-head{cursor:pointer;user-select:none}
.psetup .step.foldable > .step-head:hover h2{color:var(--blue,#2b3a9b)}
.psetup .step.foldable > .step-head:focus-visible{outline:2px solid var(--blue,#2b3a9b);outline-offset:2px;border-radius:8px}
.psetup .step .step-right{display:inline-flex;align-items:center;gap:10px}
.psetup .step .fold-chev{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin:-4px 4px 0 2px;opacity:.6;transition:transform .15s ease}
.psetup .step.foldable.shut .fold-chev{transform:rotate(-45deg);margin-top:0}
.psetup .step.foldable.shut > .step-body{display:none}
.psetup .step.foldable.shut > .step-head{border-bottom:0}
.psetup .step.foldable.shut{margin-bottom:14px}
#rqFinal[hidden]{display:none}