/* ─────────────────────────────────────────────────────────────
   /create-workspace — the three-step wizard, on the bulletin system.
   Tokens come from landing.css (:root); this sheet only shapes the flow.
   ───────────────────────────────────────────────────────────── */

/* Palette tokens come from landing.css (:root). */

/* The shared switch fills with the page's red on these pages, as in the mockups;
   the admin app keeps its own --primary because it sets neither token. */
.cws-wrap{--ekklesia-switch-on:var(--bf-red);--ekklesia-switch-off:rgba(36,20,19,.28)}

.cws-skip{position:absolute;left:-9999px}
.cws-skip:focus{left:1rem;top:1rem;z-index:80;background:var(--bf-ink);color:var(--bf-white);padding:.6rem 1rem;border-radius:8px}

.cws-wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(1rem,3vw,1.5rem)}

/* Same reason as register-page.css: width:100% + padding needs border-box to stay inside. */
.cws-wiz,.cws-wiz *,.cws-wiz *::before,.cws-wiz *::after{box-sizing:border-box}

.cws-wiz{
  /* the bulletin's body face; the site default is Poppins, which this page never uses */
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  display:grid;grid-template-columns:280px minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);
  /* the shared nav is fixed at 72px: the rail must start below it, not under it */
  padding-top:calc(var(--lp-nav-height, 72px) + clamp(1.5rem, 3vw, 2.4rem));
  padding-bottom:clamp(2rem,4vw,3.4rem);
  align-items:start;
}

/* ── the rail: the three steps, and one photograph ── */
.cws-rail{position:sticky;top:6.5rem;align-self:start}
.cws-h1{
  margin:0;font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:clamp(2rem,3.2vw,2.9rem);line-height:1.02;letter-spacing:-.025em;color:var(--bf-ink);
}
.cws-steps{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.cws-steps li{display:flex;gap:.7rem;align-items:flex-start;color:var(--bf-muted);font-size:1rem}
.cws-steps li.on{color:var(--bf-ink)}
.cws-steps .n{
  width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;
  background:var(--bf-sand);font-size:.85rem;flex:0 0 auto;font-variant-numeric:tabular-nums;
}
.cws-steps li.on .n{background:var(--bf-red);color:#fff}
.cws-steps li.done .n{background:var(--bf-ink);color:var(--bf-paper)}
.cws-print{margin:1.6rem 0 0}
.cws-print img{width:100%;height:300px;object-fit:cover;border-radius:20px}
.cws-print figcaption{margin-top:.5rem;font-size:.9rem;color:var(--bf-muted)}

/* ── the stage: one pane per step ── */
.cws-stage{min-width:0}
.cws-pane{
  background:var(--bf-white);border-radius:26px;
  padding:clamp(1.4rem,3vw,2.4rem);
}
.cws-step-title{
  margin:0;font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:clamp(2.2rem,5.4vw,4.2rem);line-height:.98;letter-spacing:-.03em;color:var(--bf-ink);
}
.cws-lede{margin:.9rem 0 0;max-width:44ch;color:var(--bf-ink);font-size:1.05rem}

/* ── fields ── */
.cws-body{display:flex;flex-direction:column;gap:1.15rem;margin-top:1.6rem}
.cws-grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.1rem}
.cws-body label,.cws-grid2 label{display:block;font-size:1rem;font-weight:500;margin-bottom:.45rem;color:var(--bf-ink)}
.cws-body .req{color:var(--bf-red)}
.cws-body .form-control,
.cws-body .phone-input-group .form-control{
  width:100%;height:48px;padding:0 .9rem;font:inherit;font-size:1rem;color:var(--bf-ink);
  background:transparent;border:1px solid rgba(36,20,19,.22);border-radius:12px;
}
.cws-body textarea.form-control{height:auto;min-height:80px;padding:.7rem .9rem;resize:vertical}
.cws-body .form-control:focus,
.cws-body .phone-input-group .form-control:focus{outline:2px solid var(--bf-red);outline-offset:1px;border-color:transparent}
.cws-body .form-control::placeholder{color:#8a7b76}
.cws-body .validation-message{display:block;margin-top:.35rem;font-size:.9rem;color:var(--bf-red)}
.cws-body .hint{margin:.45rem 0 0;font-size:.95rem;color:var(--bf-muted)}
.cws-body .phone-input-group{width:100%}
.cws-verified{display:inline-flex;align-items:center;gap:.35rem;margin-top:.45rem;font-size:.9rem;color:#2f6b46}

/* ── the email code: one block, its own rule, one baseline ── */
.cws-verify{margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid rgba(36,20,19,.14)}
.cws-verify h3{margin:0;font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(1.3rem,2vw,1.6rem);color:var(--bf-ink)}
.cws-verify .cws-lede{font-size:.98rem;margin-top:.55rem;max-width:52ch;color:var(--bf-muted)}
/* The block is staged: one button, then the boxes, then a confirmed line. The action never
   shares a row with six inputs — that is what put a button on top of the sixth box. */
.cws-verify .cws-btn{margin-top:1.3rem}
.cws-verify .cws-error{margin:1.1rem 0 0}
.cws-verify .otp-container{display:flex;justify-content:flex-start;gap:.5rem;flex-wrap:wrap;margin-top:1.2rem}
/* app.css centres .otp-container for the login-style dialogs; every block on this page is
   left aligned, so the six boxes start at the field's left edge, not in the middle. */
.cws-verify .otp-box{
  /* Fixed width and flush left: the page is left-aligned, so these must not stretch to fill
     the row. They shrink at 560px instead, which still keeps six on one row. */
  flex:0 0 auto;width:48px;height:56px;padding:0;text-align:center;
  font:inherit;font-size:1.05rem;color:var(--bf-ink);
  background:transparent;border:1px solid rgba(36,20,19,.22);border-radius:10px;
}
.cws-verify .otp-box:focus{outline:2px solid var(--bf-red);outline-offset:1px;border-color:transparent}
.cws-code-note{margin:.7rem 0 0;font-size:.95rem;color:var(--bf-muted);max-width:52ch}
.cws-otp-actions{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;font-size:.9rem;color:var(--bf-muted)}
.cws-link{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--bf-red);cursor:pointer}
.cws-link[disabled]{color:var(--bf-muted);cursor:default}
.cws-spinner{width:16px;height:16px;border-width:2px}

/* ── review: a list of facts, not a form ── */
.cws-review{margin:1.6rem 0 0;padding:0}
.cws-rows{display:flex;flex-direction:column}
.cws-row{display:grid;grid-template-columns:11rem 1fr;gap:.3rem 1.2rem;padding:.7rem 0;align-items:baseline}
.cws-row + .cws-row{border-top:1px solid rgba(36,20,19,.1)}
.cws-row dt{font-size:.95rem;color:var(--bf-muted)}
.cws-row dd{margin:0;font-size:1rem;color:var(--bf-ink);overflow-wrap:anywhere}
.cws-row dd button{margin-left:.6rem;font-size:.9rem}
.cws-terms{margin-top:2rem;padding-top:1.6rem;border-top:1px solid rgba(36,20,19,.14)}
.cws-terms p{margin:.5rem 0 0;font-size:.9rem;color:var(--bf-muted)}
.cws-terms a{color:var(--bf-red)}
.cws-terms .cws-error{margin-top:.6rem}

.cws-error{
  display:flex;gap:.5rem;align-items:flex-start;margin:0 0 1.2rem;padding:.8rem 1rem;
  border:1px solid rgba(125,12,20,.3);border-radius:12px;background:rgba(125,12,20,.05);
  color:var(--bf-red-deep);font-size:.95rem;
}
.cws-error:empty{display:none}

/* ── actions ── */
.cws-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2.4rem}
.cws-actions .right{display:flex;gap:.6rem;align-items:center}

.cws-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  height:50px;padding:0 1.5rem;border-radius:999px;border:1px solid transparent;
  font:inherit;font-size:1rem;font-weight:600;cursor:pointer;text-decoration:none;
  background:var(--bf-red);color:#fff;transition:transform .18s ease,background .18s ease;
}
.cws-btn:hover{background:var(--bf-red-deep);transform:translateY(-2px)}
.cws-btn:active{transform:translateY(0) scale(.99)}
.cws-btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.cws-btn.ghost{background:transparent;border-color:rgba(36,20,19,.28);color:var(--bf-ink)}
.cws-btn.ghost:hover{background:rgba(36,20,19,.05);border-color:var(--bf-ink)}

/* ── the end: only shown once the church exists ── */
.cws-done .cws-step-title{max-width:18ch}
.cws-done p{margin:.9rem 0 0;max-width:46ch}
.cws-done .cws-btn{margin-top:1.6rem}
.cws-next{margin:2rem 0 0;padding-left:1.1rem;color:var(--bf-ink)}
.cws-next li{margin:.35rem 0}

@media (max-width:900px){
  .cws-wiz{grid-template-columns:1fr}
  .cws-rail{position:static}
  .cws-steps{flex-direction:row;flex-wrap:wrap;gap:1rem}
  .cws-print{display:none}
  .cws-step-title{font-size:clamp(2rem,9vw,2.8rem)}
}
@media (max-width:560px){
  .cws-grid2{grid-template-columns:1fr}
  .cws-verify .otp-container{gap:.4rem}
  .cws-verify .otp-box{width:38px;height:50px}
  .cws-row{grid-template-columns:1fr;gap:.15rem}
  .cws-actions{flex-direction:column-reverse;align-items:stretch}
  .cws-actions .right,.cws-actions .cws-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .cws-btn{transition:none}
  .cws-btn:hover{transform:none}
}