/* Faithful desktop · numbered workshop steps (faithful-steps.js). */
.fst-step .nb-ico{position:relative}
/* No numbers in the sidebar: a small tick appears once a page is answered. */
.fst-mark{display:none;position:absolute;top:-6px;left:-8px;width:15px;height:15px;box-sizing:border-box;border-radius:8px;background:#d9b46a;color:#15294a;font:700 9px/15px 'Inter',sans-serif;text-align:center}
.fst-done .fst-mark{display:block}
/* "Step N of 6" above each page guide's title. */
.fst-of{display:block;margin:0 0 3px;font:700 11px/1.3 var(--font-body,'Inter',sans-serif);letter-spacing:.08em;text-transform:uppercase;color:#8a6a2a}
.fst-final{margin-top:10px;border-top:1px solid var(--sb-rule,#ffffff22);padding-top:13px}
.fst-final .nb-label{display:flex;flex-direction:column;gap:2px}
.fst-sub{font-size:11px;font-weight:500;color:#f0dfb8;opacity:.9}
.fst-final.fst-locked{opacity:.5}
.fst-final.fst-locked .fst-sub{color:inherit}
.fst-final:focus-visible,.fst-step:focus-visible{outline:2px solid #f0dfb8;outline-offset:2px}
.fst-next{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:18px;padding-top:16px;border-top:1px solid #dbe5ef}
.fst-next-btn{min-height:44px;padding:10px 20px;border:1px solid #175fa5;border-radius:10px;background:#175fa5;color:#fff;font:700 14px/1.3 var(--font-body,'Inter',sans-serif);cursor:pointer}
.fst-next-btn:hover{background:#12508c}
.fst-next-btn:focus-visible{outline:3px solid #175fa5;outline-offset:3px}
.fst-next small{color:#607493;font-size:12px}
/* Room for all seven steps on a laptop screen: Maya's sample profile shrinks
   to one row (her card figure lives on the Impact Card page). */
@media(min-width:641px){
.sb .sb-member{display:grid;grid-template-columns:38px 1fr;align-items:center;column-gap:10px;margin:10px 16px 4px;padding:12px 0 10px;text-align:left}
.sb .sb-member .sb-av{grid-row:1/3;width:38px;height:38px;margin:0}
.sb .sb-member .sb-name{font-size:14px;line-height:1.2;justify-self:start;text-align:left}
.sb .sb-member .sb-tier{justify-self:start;margin-top:3px;padding:2px 8px;white-space:nowrap}
.sb .sb-member .sb-pulse-block{display:none}
.sb .sb-top{padding-top:20px;padding-bottom:16px}
.sb .nb.fst-step{padding-top:10px;padding-bottom:10px}
.sb .nb.fst-final{padding-top:12px}
}
/* Narrow windows. Between 641 and 900px the portal used to stack the whole
   desktop sidebar on top of the page: a 237px orb header, Maya's profile,
   a 220px scrolling list showing three of the seven steps, then Settings and
   footer text, about 600px before any content. It becomes a slim sticky bar
   instead: church name and Settings on one row, the numbered steps as one
   swipeable row beneath (the same pattern the phone-width layout uses). */
@media (min-width:641px) and (max-width:900px){
  body .sb{position:sticky;top:0;z-index:120;display:grid;grid-template-columns:1fr auto;grid-template-areas:"top foot" "nav nav";align-items:center;column-gap:12px;width:100%;height:auto;min-height:0;padding:10px 16px 0}
  body .sb .sb-top{grid-area:top;display:block;padding:0;border:0;text-align:left;min-height:0}
  body .sb .sb-top .sb-grace-orb,body .sb .sb-orb-label{display:none}
  body .sb .sb-church{font-size:19px;margin:0}
  body .sb .sb-portal-label{margin:2px 0 0}
  body .sb .sb-foot{grid-area:foot;padding:0;background:none;border:0}
  body .sb .sb-foot>*:not(.fd-settings-cog){display:none}
  body .sb .sb-foot .fd-settings-cog{margin:0;padding:8px 14px;width:auto;min-height:40px}
  body .sb .sb-scroll{grid-area:nav;display:flex;flex-direction:row;align-items:stretch;gap:6px;max-height:none;height:auto;overflow-x:auto;overflow-y:hidden;padding:12px 0 10px;scrollbar-width:thin;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  body .sb .sb-scroll .sb-member{display:none}
  body .sb .sb-scroll .nb{flex:0 0 auto;margin:0;padding:9px 12px 9px 14px;white-space:nowrap;gap:9px}
  body .sb .sb-scroll .nb .nb-label{font-size:13px}
}
/* The last step sits in the row like the others at any stacked width. */
@media (max-width:900px){
  body .sb .nb.fst-final{margin-top:0;border-top:0;padding-top:9px}
  body .sb .nb.fst-final .nb-label{flex-direction:row;align-items:baseline;gap:6px}
  body .sb .nb.fst-final .fst-sub{font-size:11px}
}