/* ag-junction · 03 Connect (dark #1c1c1c band). The junction: one path, a model-call loop, the Authorizer underneath.
   Scoped to .aa-junction. Rails are 1px hairlines with filleted elbows; pulses (canvas) stay neutral, 04 owns outcome colour.
   Stage coordinates are the 604×520 desktop plan; at 760px and below a 343×560 plan scales to the column with --u. */
.aa-junction{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;
}
.aa-junction *{box-sizing:border-box}

/* asset · columns 1–6 */
.aa-junction .aa-jn-fig{grid-column:1/7;min-width:0}
.aa-junction .aa-jn-seg{position:relative;isolation:isolate}
.aa-junction .aa-jn-seg button{position:relative;z-index:1}
.aa-junction .aa-jn-seg button[aria-pressed="true"]{background:transparent}
.aa-junction .aa-jn-thumb{position:absolute;left:0;top:3px;height:30px;width:0;border-radius:9999px;background:#2b2b2b;z-index:0;transition:transform var(--t3) var(--ease),width var(--t3) var(--ease)}
.aa-junction:not(.aa-live) .aa-jn-seg{visibility:hidden}           /* no JS: no toggle, both gateway labels show */

.aa-junction .aa-jn-stage{--u:1px;position:relative;width:calc(604*var(--u));height:calc(520*var(--u));margin-top:20px}
.aa-junction .aa-jn-rails{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.aa-junction .aa-jn-rails path{fill:none;stroke-width:1}
.aa-junction .aa-jn-path{stroke:var(--w-35)}
.aa-junction .aa-jn-path2{stroke:var(--w-45)}
.aa-junction .aa-jn-loop{stroke:rgba(255,255,255,.2);stroke-dasharray:1;stroke-dashoffset:0}
.aa-junction .aa-jn-m{display:none}
.aa-junction .aa-jn-cv{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}

/* gate ticks: the gateway is a short white bar (Hawcx) or a 6px outline (yours); the Authorizer is the hero's gate blue */
.aa-junction .aa-jn-tick{position:absolute;transform:translate(-50%,-50%);pointer-events:none}
.aa-junction .aa-jn-gt{left:calc(260.5*var(--u));top:calc(160.5*var(--u));width:28px;height:1.5px;background:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,0);
  transition:height var(--t2) var(--ease),background-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.aa-junction[data-gw="own"] .aa-jn-gt{height:6px;background:transparent;box-shadow:inset 0 0 0 1px var(--w-60)}
.aa-junction .aa-jn-at{left:calc(260.5*var(--u));top:calc(320.5*var(--u));width:36px;height:1.5px;background:var(--blue-lt);opacity:.7}

/* labels: components (sans, white) to the left of the path, what flows (mono) to the right */
.aa-junction .aa-jn-lb{position:absolute;margin:0;white-space:nowrap}
.aa-junction .aa-jn-in{display:block}
.aa-junction .aa-jn-n{display:block;font:500 15px/22px var(--sans);color:#fff}
.aa-junction .aa-jn-s{display:block;font:400 11px/16px var(--mono);color:var(--w-45)}
.aa-junction .aa-jn-pl{font:400 10px/14px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--w-35)}
.aa-junction .aa-jn-l-top{left:calc(340*var(--u));top:calc(2*var(--u))}
.aa-junction .aa-jn-gw,.aa-junction .aa-jn-az{right:calc(368*var(--u));text-align:right;transform:translateY(-50%)}
.aa-junction .aa-jn-gw{top:calc(160.5*var(--u))}
.aa-junction .aa-jn-az{top:calc(320.5*var(--u))}
.aa-junction .aa-jn-l-model{left:calc(300*var(--u));top:calc(192*var(--u))}
.aa-junction .aa-jn-prov{left:calc(468*var(--u));top:calc(160.5*var(--u));transform:translateY(-50%)}
.aa-junction .aa-jn-l-tool{left:calc(272*var(--u));top:calc(236*var(--u))}
.aa-junction .aa-jn-l-sys{left:calc(272*var(--u));top:calc(500.5*var(--u));transform:translateY(-50%)}
.aa-junction .aa-jn-gw .aa-jn-st{margin:0}
.aa-junction .aa-jn-gw .aa-jn-st+.aa-jn-st{margin-top:10px}         /* no JS: stacked */
.aa-junction.aa-live .aa-jn-gw .aa-jn-in{display:grid;justify-items:end}
.aa-junction.aa-live .aa-jn-gw .aa-jn-st{grid-area:1/1;margin:0;opacity:0}
.aa-junction.aa-live[data-gw="hawcx"] .aa-jn-st[data-gw="hawcx"],.aa-junction.aa-live[data-gw="own"] .aa-jn-st[data-gw="own"]{opacity:1}
.aa-junction .aa-jn-st.is-in{animation:aaJnIn var(--t3) var(--ease) both}
.aa-junction .aa-jn-st.is-out{animation:aaJnOut var(--t3) var(--ease) both}
@keyframes aaJnIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes aaJnOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-4px)}}

.aa-junction .aa-jn-note{margin-top:24px;padding-top:16px;border-top:1px solid var(--w-10);max-width:520px;font:400 11px/17px var(--mono);color:var(--w-45)}

/* copy · columns 8–12 */
.aa-junction .aa-jn-copy{grid-column:8/13;min-width:0}
.aa-junction .aa-jn-copy .h2{margin:0}
.aa-junction .aa-jn-body{margin-top:24px;color:var(--w-60)}
.aa-junction .aa-jn-body a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px;transition:text-decoration-color var(--t2) var(--ease)}
.aa-junction .aa-jn-body a:hover{text-decoration-color:#fff}

@media (max-width:1100px){
  .aa-junction{row-gap:56px}
  .aa-junction .aa-jn-copy{grid-column:1/-1;grid-row:1;max-width:600px}
  .aa-junction .aa-jn-fig{grid-column:1/-1;grid-row:2}
}
@media (max-width:760px){
  .aa-junction{row-gap:40px}
  .aa-junction .aa-jn-fig{container-type:inline-size}
  .aa-junction .aa-jn-seg{display:flex;width:100%}
  .aa-junction .aa-jn-seg button{flex:1 1 0;padding:0 8px}
  .aa-junction .aa-jn-stage{--u:calc(min(343px,100cqw)/343);width:calc(343*var(--u));height:calc(560*var(--u))}
  .aa-junction .aa-jn-d{display:none}
  .aa-junction .aa-jn-m{display:block}
  .aa-junction .aa-jn-n{font-size:14px;line-height:20px}
  .aa-junction .aa-jn-gt{left:calc(128.5*var(--u));width:24px}
  .aa-junction .aa-jn-at{left:calc(128.5*var(--u));width:30px}
  .aa-junction .aa-jn-gw,.aa-junction .aa-jn-az{right:calc(231*var(--u));width:max-content;max-width:calc(112*var(--u) + 14px);white-space:normal}
  .aa-junction .aa-jn-l-top{left:calc(192*var(--u))}
  .aa-junction .aa-jn-l-model{left:calc(152*var(--u));top:calc(124*var(--u))}
  .aa-junction .aa-jn-prov{left:calc(180*var(--u));top:calc(194*var(--u));transform:none}
  .aa-junction .aa-jn-l-tool{left:calc(140*var(--u));top:calc(256*var(--u))}
  .aa-junction .aa-jn-l-sys{left:calc(140*var(--u));top:calc(540.5*var(--u))}
  .aa-junction .aa-jn-note{max-width:none}
}
@media (forced-colors:active){
  .aa-junction .aa-jn-cv{display:none}
  .aa-junction .aa-jn-rails path{stroke:CanvasText}
  .aa-junction .aa-jn-tick{forced-color-adjust:none;background:CanvasText}
  .aa-junction[data-gw="own"] .aa-jn-gt{background:Canvas;box-shadow:inset 0 0 0 1px CanvasText}
}
@media print{ .aa-junction .aa-jn-cv{display:none} }
@media (prefers-reduced-motion:reduce){
  .aa-junction .aa-jn-thumb,.aa-junction .aa-jn-gt{transition:none}
  .aa-junction .aa-jn-st.is-in,.aa-junction .aa-jn-st.is-out{animation:none}
}
.aa-junction.aa-sim *{transition:none!important;animation:none!important}