/* "The customer's request is governed inside the operator's building", the request-path diagram on
   /platform/. Its own file because only that page draws it; the markup is two inline SVGs.

   Drawn on the same variables the platform scenes use (--sc-line, --rule, --p-*, --surface), so day,
   dusk and night all work with no per-theme block here. The colour rule is the site's: the guard,
   the refusal and the record are Governance (amber); the model box is Models (blue), and inside it
   each line wears the tile of the product that makes it true: less memory is Models, one page
   rather than the whole chat is Context (green), and only approved files is Documents (plum). The
   operator's own building is the dashed mint frame the scenes already use for "your environment",
   and the hardware bar under everything is the ground the tiles sit on.

   Not .tw-scene on purpose: test/scene.test.mjs pins the number of animated scenes on /platform/,
   and this is a still picture.

   TWO DRAWINGS, NOT ONE. The wide layout at phone width shrinks its 16px lines to about 5px, so
   below 700px the stacked drawing takes over, the same switch the scenes make. */
.opsec .secthead{margin-bottom:26px}
/* The wires are the argument of this picture, so they use --rule-deep (3:1 against the paper in
   all three themes) rather than the scenes' hairline --rule-strong, which measures about 1.5:1. */
.opflow{width:100%;height:auto;display:block;--sc-line:var(--rule-deep,#949185)}
.opflow.m{display:none}
.opflow text{font-family:var(--sans,-apple-system,Inter,sans-serif);fill:var(--body)}
.opflow .t{font-size:20px;font-weight:700;fill:var(--ink)}
.opflow .s{font-size:16px;fill:var(--body)}
.opflow .lab{font-size:15px;fill:var(--muted);letter-spacing:.01em}
.opflow .g{font-size:18px;font-weight:600;fill:var(--ink)}
.opflow .envt{font-size:17px;font-weight:700;fill:var(--mint)}
.opflow .env rect{
  fill:color-mix(in srgb,var(--mint) 3%,transparent);
  stroke:color-mix(in srgb,var(--mint) 45%,var(--rule));stroke-width:1.25;stroke-dasharray:6 6;
}
.opflow .cust rect{fill:rgba(var(--surface),.6);stroke:var(--rule-strong);stroke-width:1.25}
.opflow .ground rect{fill:rgba(var(--surface),.75);stroke:var(--rule-strong);stroke-width:1.25}
.opflow .gov rect,.opflow .gov polygon{
  fill:color-mix(in srgb,var(--p-gov) 7%,var(--bg));
  stroke:color-mix(in srgb,var(--p-gov) 55%,var(--rule));stroke-width:1.5;
}
.opflow .mdl rect.box{
  fill:color-mix(in srgb,var(--p-models) 6%,var(--bg));
  stroke:color-mix(in srgb,var(--p-models) 45%,var(--rule));stroke-width:1.5;
}
.opflow .gov .t{fill:var(--p-gov)}
.opflow .mdl .t{fill:var(--p-models)}
.opflow .chip.m{fill:var(--p-models)}
.opflow .chip.c{fill:var(--p-context)}
.opflow .chip.d{fill:var(--p-docs)}
.opflow .wire{fill:none;stroke:var(--sc-line);stroke-width:1.5}
.opflow .wire.dash{stroke-dasharray:4 5}

/* The stacked drawing is set for a 420-unit width, so its lines are larger in units. */
.opflow.m .t{font-size:16px}
.opflow.m .s{font-size:14px}
.opflow.m .lab{font-size:12.5px}
.opflow.m .g{font-size:14.5px}
.opflow.m .envt{font-size:12.5px}
.opflow.m .s.tight{font-size:13.5px}

@media (max-width:700px){
  .opflow.d{display:none}
  .opflow.m{display:block}
  /* Out to the wrap's edge, as .scenesec does: the wrap and this panel's own padding would leave the
     420-unit drawing about 260px wide and its lines too small to read. */
  .opsec{margin-left:-20px;margin-right:-20px;padding:26px 8px 22px}
  .opsec .secthead{padding:0 12px}
}