/* /ai-firewall: page-local drawing parts, composed from site.css tokens only (no new colours). */

.fw-note{margin-top:6px;opacity:.85}
.fw-n{margin-right:.35em;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.aside .ah.fw-ah{display:block}
.aside .ah.fw-ah svg{display:inline-block;vertical-align:-3px;margin-right:10px}

/* the scope figures: long values, so a smaller figure than the homepage's results */
.fw-scope dd{font-size:34px;white-space:nowrap}
.fw-stats dd{font-size:56px}

/* shared connector colours */
.cx.warn i{background:var(--warn)}
.cx.warn i::after{border-left-color:var(--warn)}
.cx.ok i{background:var(--ok)}
.cx.ok i::after{border-left-color:var(--ok)}
.fw-hot{border:1.5px solid var(--warn)}
.fw-okb{border:1.5px solid var(--ok)}

/* HS-FW-02: two lanes meet the same perimeter */
.fw-lane{align-items:center}
.fw-lane + .fw-lane{margin-top:18px;padding-top:18px;border-top:1px solid var(--rule)}
.fw-lane>.nd:first-child{flex:1.2 1 0}
.fw-lane>.cx:nth-child(2){min-width:128px}
.fw-wall{flex:0 0 9.5em!important;align-self:stretch;display:flex;align-items:center;border:0;border-radius:4px;
  background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--line-c) 22%,transparent) 0 2px,transparent 2px 8px);box-shadow:inset 3px 0 0 var(--line-c),inset -3px 0 0 var(--line-c)}
.fw-wall.open{background:none;box-shadow:inset 3px 0 0 var(--warn),inset -3px 0 0 var(--warn);border-top:1.5px dashed var(--warn);border-bottom:1.5px dashed var(--warn)}
.fw-wall.open .nd-t{color:var(--warn)}
.fw-res{flex:1 1 0;min-width:0}
.fw-edge{margin-top:22px}
.fw-edge .chips{margin-top:10px}
.fw-edge .nd-s{margin-top:12px}

/* HS-FW-01: arriving traffic → the gate → your business */
.fw-bnd{display:grid;grid-template-columns:minmax(0,1.15fr) 44px minmax(0,.9fr) 44px minmax(0,1fr);align-items:center}
.fw-bnd>.cx{min-width:0;padding:0}
.fw-zone{display:grid;gap:12px;padding:16px;border-radius:12px;border:1px dashed var(--nd-bd)}
.fw-zh{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.fw-zone .chips{margin-top:0}
.fw-zone>.dg-k{margin-top:2px}
.fw-mid .bd-cross{justify-content:center}
@container (max-width: 720px){
  .fw-bnd{grid-template-columns:1fr}
  .fw-bnd>.cx{flex-direction:row;justify-content:flex-start;min-height:44px;padding:4px 0 4px 22px}
  .fw-bnd>.cx i{width:1.5px;min-width:0;height:32px}
  .fw-bnd>.cx i::after{right:auto;top:auto;bottom:-1px;left:-4.5px;border:5.25px solid transparent;border-top:8px solid var(--line-c);border-bottom:0}
  .fw-bnd>.cx.ok i::after{border-top-color:var(--ok)}
  .fw-mid .bd-cross{justify-content:flex-start}
}
@container (max-width: 560px){
  .fw-lane{align-items:stretch}
  .fw-lane>.cx:nth-child(2){min-width:0}
  .fw-wall{flex:1 1 auto!important;min-height:52px}
  .cx.warn i::after{border-top-color:var(--warn);border-left-color:transparent}
  .cx.ok i::after{border-top-color:var(--ok);border-left-color:transparent}
}

/* control: the stream, the halted decision, the edge case */
.fw-status{margin-top:0}
.fw-status p{margin-top:0}
.fw-sw{fill:var(--nd-bg);stroke:var(--warn);stroke-width:1.5;vector-effect:non-scaling-stroke}
.fw-sub{display:block;margin-top:2px;font-weight:500;color:var(--body)}
.fw-branch{display:flex;align-items:center;gap:14px;margin-top:22px;padding-left:44%}
.fw-branch i{position:relative;flex:0 0 44px;height:1.5px;background:var(--line-c)}
.fw-branch i::after{content:"";position:absolute;right:-1px;top:-4.5px;border:5.25px solid transparent;border-left:8px solid var(--line-c);border-right:0}
.fw-branch .nd{padding:10px 14px}
.fw-branch .nd-t{font-size:16px}
.fw-scopef{justify-content:flex-start;align-items:center}
.fw-scopef .chips{margin-top:0}

/* shared defense: six tenants on one bus */
.fw-tenants{grid-template-columns:repeat(6,minmax(0,1fr))}
.fw-tenants li.hit{border-color:var(--warn);color:var(--warn)}
.fw-tenants li.hit::after{content:none}
.fw-bus{height:40px;margin-top:0}

/* deployment timeline */
.fw-time{margin-top:40px}
.fw-time .track-art{height:40px}
.fw-time .track-art + .track-l + .track-art{height:24px;margin-top:22px}

@media (max-width:999px){
  .fw-branch{padding-left:0}
}
@media (max-width:699px){
  .fw-scope dd{font-size:36px;white-space:normal}
  .fw-tenants{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fw-scopef{align-items:flex-start}
  .fw-branch .dg-k{flex:0 0 auto;white-space:nowrap}
  .fw-bus{display:none}

}

/* the stacked comparison table on phones: the caption spans the column, not one word wide */
@media (max-width:699px){
  .tbl.stack caption{display:block;width:auto}
}