/* s2s-technology-architecture.css — diagram and layout rules specific to this page.
   Loads after css/s2s.css, which carries the shared chrome and the palette.
   Scoped to .s2s so the bare element selectors in the original export cannot
   reach the site nav or footer. SVG type stays at its authored size; see the
   note in css/s2s.css. */
.s2s .layers { display:flex;flex-direction:column;gap:8px }
.s2s .layer { display:grid;grid-template-columns:200px 1fr;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;border-left:4px solid var(--slate) }
.s2s .layer.e { border-left-color:var(--rose) }
.s2s .layer.a { border-left-color:var(--blue2) }
.s2s .layer.r { border-left-color:var(--teal) }
.s2s .layer.v { border-left-color:var(--mint) }
.s2s .layer.h { border-left-color:var(--amber) }
.s2s .layer h4 { margin:0;font-size:13.5px }
.s2s .layer h4 small { display:block;font-weight:500;color:var(--muted);font-size:11.5px;margin-top:3px }
.s2s .layer .items { display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start }
.s2s .layer .items span { font-size:11.5px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 9px }
@media (max-width:640px) {
  .s2s .layer { grid-template-columns:1fr }
}
.s2s .envs { display:grid;grid-template-columns:repeat(4,1fr);gap:10px }
.s2s .env { background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 13px;border-top:3px solid var(--slate) }
.s2s .env.dev { border-top-color:var(--slate) }
.s2s .env.sbx { border-top-color:var(--mint) }
.s2s .env.stg { border-top-color:var(--amber) }
.s2s .env.prd { border-top-color:var(--rose) }
.s2s .env h4 { margin:0 0 4px;font-size:14px }
.s2s .env .k { display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue2);margin:8px 0 3px }
.s2s .env p, .s2s .env li { margin:0;color:var(--muted);font-size:12px;line-height:1.45 }
.s2s .env ul { margin:0;padding-left:15px }
@media (max-width:900px) {
  .s2s .envs { grid-template-columns:1fr 1fr }
}
@media (max-width:560px) {
  .s2s .envs { grid-template-columns:1fr }
}
.s2s /* SVG */ .zone { fill:var(--panel);stroke:var(--line);stroke-dasharray:6 6 }
.s2s .zl { fill:var(--blue2);font-size:11px;font-weight:800;letter-spacing:.1em }
.s2s .box { fill:var(--panel2);stroke:var(--line);stroke-width:1.5 }
.s2s .box.a { stroke:var(--blue2) }
.s2s .box.r { stroke:var(--teal) }
.s2s .box.v { stroke:var(--mint) }
.s2s .box.h { stroke:var(--amber) }
.s2s .box.e { stroke:var(--rose) }
.s2s .box.d { stroke:var(--slate) }
.s2s .tm { fill:var(--ink);font-size:12.5px;font-weight:700 }
.s2s .ts { fill:var(--muted);font-size:10.5px }
.s2s .tl { fill:var(--muted);font-size:10px;font-style:italic }
.s2s .edge { fill:none;stroke:var(--slate);stroke-width:1.6;marker-end:url(#arr) }
.s2s .edge.e { stroke:var(--rose) }
.s2s .edge.tl { stroke:var(--teal);stroke-dasharray:5 5 }
.s2s .edge.b { stroke:var(--blue2) }
.s2s .edge.v { stroke:var(--mint) }