/* ============================================================
   PROBUILD+ MODULE (a): situation router  (pb-situation.js)
   Self-contained: every rule is scoped to .pbm-sit. Uses the site
   tokens from styles.css, with fallbacks so it renders anywhere.
   ============================================================ */
.pbm-sit{
  --pbm-o:var(--orange,#ff5b00);
  --pbm-ob:var(--orange-bright,#ff9244);
  --pbm-line:var(--line,rgba(255,255,255,.08));
  --pbm-line2:var(--line-strong,rgba(255,255,255,.14));
  --pbm-muted:var(--muted,#9a9aa6);
  --pbm-ease:var(--ease,cubic-bezier(.22,.61,.36,1));
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-areas:"list stage" "help stage"; grid-template-rows:auto 1fr;
  column-gap:clamp(1.1rem,2.6vw,2.2rem); row-gap:1.1rem; align-items:start;
}
.pbm-sit__list{ grid-area:list; }
.pbm-sit__stage{ grid-area:stage; align-self:stretch; }
.pbm-sit__help{
  grid-area:help; align-self:end; padding:1.2rem 1.25rem; border-radius:14px;
  border:1px dashed rgba(255,255,255,.16); color:var(--pbm-muted); font-size:.93rem; line-height:1.55;
}
.pbm-sit__help strong{ color:#fff; font-family:var(--font-display,system-ui); font-weight:600; }
.pbm-sit__help .pbm-sit__more{ display:inline-block; margin-top:.7rem; }
.pbm-sit noscript, .pbm-sit__fallback{ grid-column:1 / -1; }
.pbm-sit__fallback{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pbm-sit__fallback a{
  display:inline-flex; padding:.7rem 1rem; border-radius:999px; border:1px solid var(--pbm-line2);
  color:#fff; font-family:var(--font-display,system-ui); font-weight:600; font-size:.95rem;
}

/* ---- the five situations ---- */
.pbm-sit__list{ display:flex; flex-direction:column; gap:.6rem; }
.pbm-sit__opt{
  -webkit-appearance:none; appearance:none; font:inherit; color:var(--text,#f4f4f6); text-align:left; cursor:pointer;
  position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  column-gap:1rem; row-gap:.12rem; width:100%;
  padding:1rem 1.1rem 1rem 1.15rem; border-radius:14px;
  border:1px solid var(--pbm-line2); background:rgba(255,255,255,.025);
  transition:border-color .3s var(--pbm-ease), background .3s var(--pbm-ease), box-shadow .3s var(--pbm-ease), transform .3s var(--pbm-ease);
}
.pbm-sit__num{
  grid-row:1 / span 2; align-self:start; padding-top:.18rem;
  font-family:var(--font-mono,monospace); font-size:.74rem; letter-spacing:.1em; color:var(--pbm-ob);
}
.pbm-sit__label{ font-family:var(--font-display,system-ui); font-weight:600; font-size:1.05rem; line-height:1.28; letter-spacing:-.005em; }
.pbm-sit__hint{ grid-column:2; font-size:.85rem; line-height:1.4; color:var(--pbm-muted); }
.pbm-sit__arrow{
  grid-column:3; grid-row:1 / span 2; display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--pbm-line2); color:var(--pbm-muted);
  transition:background .3s var(--pbm-ease), color .3s var(--pbm-ease), border-color .3s var(--pbm-ease), transform .3s var(--pbm-ease);
}
.pbm-sit__opt:hover{ border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.045); }
.pbm-sit__opt:hover .pbm-sit__arrow{ color:#fff; }
.pbm-sit__opt[aria-selected="true"]{
  border-color:rgba(255,91,0,.65);
  background:linear-gradient(115deg, rgba(255,91,0,.16), rgba(255,91,0,.035) 70%);
  box-shadow:0 0 0 1px rgba(255,91,0,.2), 0 20px 44px -28px rgba(255,91,0,.75);
}
.pbm-sit__opt[aria-selected="true"]::before{
  content:""; position:absolute; left:-1px; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0;
  background:var(--pbm-o); box-shadow:0 0 12px rgba(255,91,0,.8);
}
.pbm-sit__opt[aria-selected="true"] .pbm-sit__arrow{
  background:var(--pbm-o); border-color:var(--pbm-o); color:#0a0a0d; transform:translateX(2px);
}
.pbm-sit__opt:focus-visible{ outline:2px solid var(--pbm-ob); outline-offset:3px; }

/* ---- the path panel ---- */
.pbm-sit__stage{ position:relative; min-width:0; display:grid; }
.pbm-sit__panel{
  position:relative; overflow:hidden; min-width:0; height:100%;
  border-radius:18px; border:1px solid var(--pbm-line2);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,91,0,.12), transparent 55%),
    linear-gradient(165deg, var(--surface,#131318), var(--bg-2,#0e0e12));
  padding:clamp(1.4rem,3vw,2.4rem);
}
.pbm-sit__panel[hidden]{ display:none; }
.pbm-sit__panel:focus-visible{ outline:2px solid var(--pbm-ob); outline-offset:3px; }
.pbm-sit__panel::before{                  /* big outlined index, top right */
  content:attr(data-num); position:absolute; right:clamp(.8rem,2vw,1.4rem); top:-.1em;
  font:700 clamp(4.6rem,7vw,6rem)/1 var(--font-display,system-ui); letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1px rgba(255,91,0,.22); pointer-events:none;
}
.pbm-sit__kicker{
  position:relative; display:inline-flex; align-items:center; gap:.6rem; margin-bottom:.9rem;
  font-family:var(--font-mono,monospace); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--pbm-ob);
}
.pbm-sit__kicker::before{ content:""; width:22px; height:2px; background:var(--pbm-o); }
.pbm-sit__title{
  position:relative; max-width:min(24ch, calc(100% - 7rem));
  font-family:var(--font-display,system-ui); font-weight:700; font-size:clamp(1.45rem,2.3vw,1.85rem);
  line-height:1.1; letter-spacing:-.02em; color:#fff; margin-bottom:.7rem;
}
.pbm-sit__intro{ position:relative; max-width:56ch; color:var(--pbm-muted); font-size:1rem; line-height:1.6; }

.pbm-sit__steps{ list-style:none; margin:1.7rem 0 0; padding:0; position:relative; display:grid; gap:1.25rem; }
.pbm-sit__steps::before{                  /* the route line between the three steps */
  content:""; position:absolute; left:calc(1.15rem - 1px); top:1.2rem; bottom:1.2rem; width:2px;
  background:linear-gradient(180deg, var(--pbm-o), rgba(255,91,0,.18));
  transform-origin:top; animation:pbmSitLine .9s var(--pbm-ease) .1s both;
}
.pbm-sit__step{ position:relative; padding-left:3.35rem; min-height:2.3rem; animation:pbmSitStep .6s var(--pbm-ease) both; animation-delay:calc(.12s + var(--i,0) * .11s); }
.pbm-sit__badge{
  position:absolute; left:0; top:0; width:2.3rem; height:2.3rem; border-radius:50%;
  display:grid; place-items:center; font:700 .82rem/1 var(--font-display,system-ui); color:#0a0a0d;
  background:var(--grad-orange,linear-gradient(135deg,#ff7a1a,#ff5b00 45%,#e24800));
  box-shadow:0 0 0 5px var(--surface,#131318), 0 0 18px rgba(255,91,0,.45);
}
.pbm-sit__step b{ display:block; padding-top:.28rem; margin-bottom:.22rem; font-family:var(--font-display,system-ui); font-size:1.08rem; font-weight:600; color:#fff; }
.pbm-sit__step > span:not(.pbm-sit__badge){ display:block; color:var(--pbm-muted); font-size:.97rem; line-height:1.55; max-width:58ch; }

.pbm-sit__cta{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.5rem;
  margin-top:1.9rem; padding-top:1.5rem; border-top:1px solid var(--pbm-line);
  animation:pbmSitStep .6s var(--pbm-ease) .5s both;
}
.pbm-sit__go{ white-space:normal; text-align:left; }
.pbm-sit__more{
  display:inline-block; padding-block:.55rem; /* tap area */
  font-family:var(--font-mono,monospace); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pbm-ob); text-decoration:underline; text-decoration-color:rgba(255,146,68,.4); text-underline-offset:4px;
}
.pbm-sit__more:hover{ color:#fff; }
.pbm-sit__go:focus-visible, .pbm-sit__more:focus-visible{ outline:2px solid var(--pbm-ob); outline-offset:3px; }

/* held until the module first scrolls into view */
.pbm-sit.is-waiting .pbm-sit__step,
.pbm-sit.is-waiting .pbm-sit__cta,
.pbm-sit.is-waiting .pbm-sit__steps::before{ animation-play-state:paused; }

@keyframes pbmSitStep{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes pbmSitLine{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

@media (max-width:900px){
  .pbm-sit{ grid-template-columns:1fr; grid-template-areas:"list" "stage" "help"; grid-template-rows:auto; }
  .pbm-sit__help{ align-self:start; }
}
@media (max-width:560px){
  .pbm-sit__list{ gap:.5rem; }
  .pbm-sit__opt{ padding:.8rem .85rem .8rem .95rem; column-gap:.75rem; border-radius:12px; }
  .pbm-sit__label{ font-size:.98rem; }
  .pbm-sit__hint{ display:none; }
  .pbm-sit__num{ grid-row:auto; padding-top:0; align-self:center; }
  .pbm-sit__arrow{ grid-row:auto; width:30px; height:30px; }
  .pbm-sit__panel{ border-radius:16px; padding:1.4rem 1.15rem 1.5rem; }
  .pbm-sit__panel::before{ display:none; }
  .pbm-sit__title{ max-width:none; }
  .pbm-sit__steps{ gap:1.1rem; }
  .pbm-sit__step{ padding-left:3rem; }
  .pbm-sit__badge{ width:2.1rem; height:2.1rem; font-size:.76rem; }
  .pbm-sit__steps::before{ left:calc(1.05rem - 1px); }
  .pbm-sit__go{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .pbm-sit *, .pbm-sit *::before{ animation:none !important; transition:none !important; }
}