/* ============================================================
   AiBT — Paratext project setup (My account)
   Ported verbatim from paratext-project-setup(1).html.

   Every rule is scoped under .psetup so the reference styling is
   reproduced exactly inside the block without touching the site
   header, footer or the rest of style.css. The reference page's
   own header / nav / footer rules are dropped — the site chrome
   from Common/Heading.php provides those.
   ============================================================ */

.psetup{
  --blue:#2b3ea1;
  --ink:#2b2b2b;
  --grey:#6b6f76;
  --line:#e6e6e6;
  --yellow:#ffc907;
  --yellow-soft:#fff6d6;
  --green:#1d9d5f;
  --green-soft:#e7f6ee;
  --red:#c0392b;
  --red-soft:#fde3e3;
  --bg:#ffffff;
  --panel:#fafafa;

  font-family:'Montserrat',Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  margin-top:clamp(34px,4.5vw,52px);
}
.psetup *{box-sizing:border-box;margin:0;padding:0}
.psetup a{color:var(--blue)}

/* ---------- Page frame ---------- */
.psetup .page{max-width:none;margin:0;padding:0}
.psetup .eyebrow{
  display:flex;align-items:center;gap:14px;margin:0;
  font-size:13px;font-weight:700;letter-spacing:3px;color:var(--ink);
  text-transform:none;
}
.psetup .eyebrow::before{content:"";width:52px;height:4px;background:var(--yellow);flex:none}
.psetup .page-title{
  font-size:44px;font-weight:800;letter-spacing:.5px;margin:14px 0 10px;
  text-transform:none;line-height:1.08;
}
.psetup .lede{color:var(--grey);font-size:16px;max-width:64ch;line-height:1.65}

/* ---------- Stepper rail ---------- */
.psetup .rail{
  display:flex;gap:0;margin:44px 0 40px;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;list-style:none;
}
.psetup .rail .node{
  flex:1;padding:16px 18px;font-size:13px;font-weight:600;color:var(--grey);
  background:var(--panel);border-right:1px solid var(--line);
  display:flex;align-items:center;gap:10px;
}
.psetup .rail .node:last-child{border-right:none}
.psetup .rail .dot{
  width:26px;height:26px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;background:#fff;border:2px solid var(--line);color:var(--grey);
}
.psetup .rail .node.current{background:#fff;color:var(--ink)}
.psetup .rail .node.current .dot{border-color:var(--yellow);background:var(--yellow);color:var(--ink)}
.psetup .rail .node.done{color:var(--ink)}
.psetup .rail .node.done .dot{border-color:var(--green);background:var(--green);color:#fff}

/* ---------- Step cards ---------- */
.psetup .step{
  border:1px solid var(--line);border-radius:14px;margin-bottom:26px;
  overflow:hidden;background:#fff;
}
.psetup .step.locked{opacity:.45;pointer-events:none;filter:grayscale(.4)}
.psetup .step-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 28px;border-bottom:1px solid var(--line);background:var(--panel);
}
.psetup .step-head h2{
  font-size:19px;font-weight:700;text-transform:none;
  letter-spacing:normal;line-height:1.3;
}
.psetup .step-head .num{color:var(--blue);margin-right:10px}
.psetup .badge{
  font-size:11.5px;font-weight:700;letter-spacing:1.2px;
  padding:7px 14px;border-radius:20px;white-space:nowrap;
}
.psetup .badge.waiting{background:var(--yellow-soft);color:#8a6d00}
.psetup .badge.confirmed{background:var(--green-soft);color:var(--green)}
.psetup .badge.todo{background:#eef0f4;color:var(--grey)}
/* A request the AI team could not confirm: the member has something to fix,
   which is neither "waiting on us" yellow nor "done" green. */
.psetup .badge.blocked{background:var(--red-soft);color:var(--red)}
.psetup .step-body{padding:26px 28px}
.psetup .step-body p{line-height:1.65;color:var(--ink);max-width:72ch;font-size:16px}
.psetup .muted{color:var(--grey);font-size:14px;line-height:1.6}

.psetup .email-chip{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--yellow-soft);border:1px dashed var(--yellow);
  border-radius:10px;padding:12px 18px;margin:16px 0;
  font-weight:700;font-size:16px;
}
.psetup .email-chip button{
  border:none;background:var(--yellow);border-radius:6px;
  padding:6px 12px;font-family:inherit;font-weight:700;font-size:12px;cursor:pointer;
  color:var(--ink);letter-spacing:normal;text-transform:none;
}
.psetup ol.howto{
  margin:14px 0 6px 20px;line-height:1.9;font-size:15px;
  list-style:decimal;padding:0;
}
.psetup ol.howto b{font-weight:700}

.psetup .btn{
  display:inline-block;background:var(--yellow);border:none;border-radius:8px;
  padding:14px 30px;font-family:inherit;font-weight:800;font-size:13.5px;
  letter-spacing:1.2px;cursor:pointer;color:var(--ink);
  text-transform:none;line-height:normal;transition:none;
}
.psetup .btn:disabled{background:#e9e9e9;color:#aaa;cursor:not-allowed}
.psetup .btn.ghost{background:#fff;border:2px solid var(--line);font-weight:700}
.psetup .btn.blue{background:var(--blue);color:#fff}
.psetup .actions{margin-top:22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}

/* waiting / confirmed panel */
.psetup .verify-box{
  margin-top:22px;border-radius:12px;padding:20px 24px;
  display:flex;gap:16px;align-items:flex-start;
}
.psetup .verify-box.waiting{background:var(--yellow-soft);border:1px solid #f1dd90}
.psetup .verify-box.confirmed{background:var(--green-soft);border:1px solid #bfe6d0}
.psetup .verify-box.blocked{background:var(--red-soft);border:1px solid #f3b3b3}
.psetup .verify-box.blocked .tick{background:var(--red)}
.psetup .spinner{
  width:22px;height:22px;border-radius:50%;flex:none;margin-top:2px;
  border:3px solid #f1dd90;border-top-color:#c9a200;
  animation:psetup-spin 1s linear infinite;
}
@keyframes psetup-spin{to{transform:rotate(360deg)}}
.psetup .tick{
  width:26px;height:26px;border-radius:50%;background:var(--green);flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:800;
}
.psetup .verify-box b{display:block;margin-bottom:4px}
/* Where to go next, once access is confirmed: the console the member now runs
   their project from. A link, dressed as the page's button. */
.psetup .verify-box .btn{display:inline-block;margin-top:12px;text-decoration:none}

/* ---------- Setup form ---------- */
.psetup .grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px;align-items:start}
.psetup .field{display:block;gap:0;margin-bottom:22px}
/* A field that IS a grid cell is spaced by the grid's own gap; its margin would
   add a second one and put the two columns' rows out of step again. */
.psetup .grid > .field{margin-bottom:0}
.psetup .field label{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:1.5px;
  text-transform:none;color:var(--grey);margin-bottom:8px;
}
.psetup .field input,.psetup .field select{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:15px;background:#fff;color:var(--ink);
  transition:none;
}
.psetup .field input:focus,.psetup .field select:focus{
  outline:none;border-color:var(--blue);box-shadow:none;
}
.psetup .hint{font-size:12.5px;color:var(--grey);margin-top:6px}

.psetup .books{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.psetup .book{
  border:1.5px solid var(--line);border-radius:8px;padding:9px 16px;
  font-size:14px;font-weight:600;cursor:pointer;background:#fff;font-family:inherit;
  color:var(--ink);letter-spacing:normal;text-transform:none;
}
.psetup .book.selected{background:var(--blue);border-color:var(--blue);color:#fff}

.psetup .summary{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:22px 26px;margin-top:10px;display:none;
}
.psetup .summary.show{display:block}
.psetup .summary h3{font-size:16px;font-weight:700;margin-bottom:12px;letter-spacing:normal;text-transform:none}
.psetup .summary td{padding:6px 24px 6px 0;font-size:14.5px}
.psetup .summary td:first-child{color:var(--grey);font-weight:600}

/* ---------- Consent modal ---------- */
.psetup .overlay{
  position:fixed;inset:0;background:rgba(20,24,40,.55);
  display:none;align-items:center;justify-content:center;z-index:150;padding:24px;
}
.psetup .overlay.open{display:flex}
.psetup .modal{
  background:#fff;border-radius:16px;max-width:620px;width:100%;
  box-shadow:0 24px 60px rgba(0,0,0,.25);overflow:hidden;
  max-height:88dvh;overflow-y:auto;
}
.psetup .modal-top{height:6px;background:var(--yellow)}
.psetup .modal-body{padding:34px 38px 30px}
.psetup .modal h2{
  font-size:23px;font-weight:800;margin-bottom:14px;
  text-transform:none;letter-spacing:normal;line-height:1.2;
}
.psetup .modal p{line-height:1.7;font-size:15px;color:var(--ink)}
.psetup .modal ul{margin:14px 0 4px 20px;line-height:1.9;font-size:15px;list-style:disc;padding:0}
.psetup .consent-row{
  display:flex;gap:12px;align-items:flex-start;margin-top:22px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 18px;
}
.psetup .consent-row input{width:19px;height:19px;margin-top:2px;accent-color:var(--blue);flex:none;cursor:pointer}
.psetup .consent-row label{font-size:14.5px;line-height:1.6;font-weight:600;cursor:pointer}
.psetup .modal-actions{display:flex;justify-content:flex-end;gap:14px;margin-top:26px}

/* Saving the consent draws a PDF and raises the request, which is not instant.
   The button says so and spins, and the whole modal stops taking input: a
   second press would sign the same consent twice. */
.psetup .modal.busy{pointer-events:none}
.psetup .btn.busy{position:relative;opacity:1;cursor:progress}
.psetup .btn.busy .btn-spin{
  width:14px;height:14px;border-radius:50%;display:inline-block;
  vertical-align:-2px;margin-right:9px;
  border:2px solid rgba(0,0,0,.25);border-top-color:currentColor;
  animation:psetup-spin .7s linear infinite;
}
/* The reply is followed by a full page reload, so the cursor keeps saying
   "working" until the new page paints. */
.psetup .modal.busy, .psetup .overlay.busy{cursor:progress}

@media (max-width:860px){
  .psetup .page-title{font-size:30px}
  .psetup .rail{flex-direction:column}
  .psetup .rail .node{border-right:none;border-bottom:1px solid var(--line)}
  .psetup .rail .node:last-child{border-bottom:none}
  .psetup .grid{grid-template-columns:1fr}
}

/* ---------- consent record ---------- */
.psetup .consent-error{margin-top:18px;color:#b3261e;font-size:14px;font-weight:600;line-height:1.5}
.psetup .consent-error:empty{display:none}
.psetup .consent-receipt{margin-top:14px;font-size:14px;color:var(--grey)}
.psetup .consent-receipt a{font-weight:700;border-bottom:2px solid var(--yellow)}
.psetup .consent-confirmed{margin-top:16px;font-size:14px;font-weight:600;color:var(--grey)}

/* ---------- required fields ---------- */
.psetup .req{color:var(--red);margin-left:4px;font-weight:800}
.psetup .req-note{font-size:13px;color:var(--grey);margin:0 0 18px}
.psetup .field.bad input{border-color:var(--red);background:#fffafa}
.psetup .field.bad input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.14)}
.psetup .field.bad .books .book{border-color:#f0b8b1}
.psetup .field-err{color:var(--red);font-size:12.5px;font-weight:700;margin-top:6px;display:flex;align-items:center;gap:6px}
.psetup .field-err::before{content:"!";display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;flex:none}
.psetup .field-err[hidden]{display:none}

/* ---------- books: Old Testament, a line, New Testament ----------
   One column, in Bible order, so a member reads straight down through the
   books; the line between the testaments is only there to find your place. */
.psetup .books-split{display:block;margin-top:4px}
.psetup .bgroup{padding:0;border:none;background:none}
.psetup .bgroup + .bgroup{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.psetup .bgroup-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.psetup .bgroup-head b{font-size:12px;font-weight:800;letter-spacing:1.4px;color:var(--ink)}
.psetup .bcount{font-size:12.5px;font-weight:700;color:var(--green)}
.psetup .bgroup-all{margin-left:auto;background:none;border:none;padding:4px 0;font-family:inherit;
  font-size:11.5px;font-weight:800;letter-spacing:1.2px;color:var(--blue);cursor:pointer;text-transform:none}
.psetup .bgroup-all:hover{text-decoration:underline}
.psetup .bgroup .books{margin:0}
.psetup .field.bad .bgroup + .bgroup{border-top-color:#f0b8b1}