/* Block: argos/process-model
   --stage-columns and --stage-count are set inline by render.php so the
   tab strip adapts to any number of stages and gate position. */
.model-section { color: var(--white); background: var(--dark); overflow: hidden; }
.model-section .kicker { color: var(--mint); }
.model-section p:not(.kicker) { color: rgba(255,255,255,.82); }
.model-console { border: 1px solid rgba(255,255,255,.14); border-radius: 26px; overflow: hidden; background: #1e1b25; }
.stage-tabs { min-height: 170px; display: grid; grid-template-columns: var(--stage-columns, repeat(5, 1fr)); border-bottom: 1px solid rgba(255,255,255,.14); }
.stage-tabs button { position: relative; padding: 28px 18px; border: 0; border-right: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.74); background: transparent; text-align: left; cursor: pointer; font: inherit; transition: color 180ms ease, background 180ms ease; }
.stage-tabs button:hover { color: var(--white); background: rgba(255,255,255,.04); }
.stage-tabs button[aria-selected="true"] { color: var(--white); background: linear-gradient(180deg, rgba(97,24,215,.22), transparent); }
.stage-tabs button span, .stage-tabs button b { display: block; }
.stage-tabs button span { font-size: .72rem; font-weight: 900; }
.stage-tabs button b { margin-top: 48px; font-size: .96rem; }
.stage-tabs button i { position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; background: transparent; }
.stage-tabs button[aria-selected="true"] i { background: linear-gradient(90deg, var(--violet), var(--mint)); }
.decision-gate { display: grid; align-content: center; gap: 10px; padding: 20px; border-right: 1px solid rgba(255,255,255,.12); background: repeating-linear-gradient(-45deg, rgba(29,214,190,.06), rgba(29,214,190,.06) 8px, transparent 8px, transparent 16px); text-align: center; }
.decision-gate span { color: var(--mint); font-size: .6rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.decision-gate b { font-size: .75rem; }
.stage-panel { min-height: 300px; padding: 58px; display: grid; grid-template-columns: .55fr 1fr 1fr; gap: 5vw; align-items: start; position: relative; overflow: hidden; }
.stage-panel[hidden] { display: none; }
.stage-label { color: var(--mint); font-size: .66rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.stage-panel h3 { margin: 0; font-size: clamp(2rem, 3.2vw, 3.3rem); }
.stage-panel .stage-body { color: rgba(255,255,255,.82); }
.stage-signal { position: absolute; right: -40px; bottom: -120px; width: 420px; height: 220px; display: flex; align-items: end; gap: 12px; transform: rotate(-8deg); opacity: .55; }
.stage-signal span { width: 32px; border-radius: 999px 999px 0 0; background: linear-gradient(var(--mint), var(--violet)); animation: signal 1.8s ease-in-out infinite alternate; }
.stage-signal span:nth-child(1) { height: 24%; }
.stage-signal span:nth-child(2) { height: 62%; animation-delay: .2s; }
.stage-signal span:nth-child(3) { height: 34%; animation-delay: .4s; }
.stage-signal span:nth-child(4) { height: 88%; animation-delay: .6s; }
.stage-signal span:nth-child(5) { height: 50%; animation-delay: .8s; }
.stage-signal span:nth-child(6) { height: 75%; animation-delay: 1s; }
@keyframes signal { to { height: 80%; } }
.model-note { max-width: 650px; margin: 26px 0 0 auto; font-size: .8rem; }

@media (max-width: 1050px) {
  .stage-tabs { grid-template-columns: repeat(var(--stage-count, 5), 1fr); }
  .decision-gate { grid-column: 1 / -1; grid-row: 2; min-height: 72px; border-top: 1px solid rgba(255,255,255,.12); }
  .stage-panel { grid-template-columns: .5fr 1fr; }
  .stage-panel .stage-body { grid-column: 2; }
  .stage-signal { opacity: .25; }
}

@media (max-width: 760px) {
  .stage-tabs { display: flex; min-height: auto; overflow-x: auto; scroll-snap-type: x mandatory; }
  .stage-tabs button { min-width: 145px; min-height: 130px; flex: 0 0 auto; scroll-snap-align: start; }
  .stage-tabs button b { margin-top: 34px; }
  .decision-gate { min-width: 180px; flex: 0 0 auto; border-top: 0; }
  .stage-panel { min-height: 390px; padding: 34px 26px; grid-template-columns: 1fr; gap: 20px; }
  .stage-panel .stage-body { grid-column: auto; }
  .stage-signal { opacity: .15; }
}