/* Avakode Hub — scene «ews-bridge» (assets/js/scenes/ews-bridge.js): the SOAP calls of an app, the bridge, the Graph calls,
   the EWS answers and the gap report (lane 1.2a). Loaded by inc/scenes.php on a family page whose stage is this scene.
   Classes: .ew-* only; the common parts (.sc-head, .sc-sample, .sc-panel, .sc-stamp), the stage, the rail and the caption
   are scene.css. --ew is the colour of the bridge (lines, the dot that crosses, plates): text in it is ≥ 4.5:1 on --bg and
   --bg-2 (checked by tests/scene-ews-bridge.test.mjs). The final frame (end of beat 3) is the default; the timeline hides
   what has not happened yet. Only transform and opacity move. */

/* The height of the stage before the module arrives = the height it takes, at every width (e2e: window 360 to 1500 every 10 px,
   ≤ 4 px apart; measured every pixel from 320 to 1500 with the module loaded, 16.10.2026). --stage-h: the stage that is not
   stacked: three columns from a 1074px window (547px; the figure is 1042px wide and more), 1074-1080px the same stage with one
   more wrapped line (556px), and the stacked one with the rail on the left from 721 to 1073px (959px). --stage-h-narrow: a
   window ≤ 720px, one column with the rail on top; the text wraps more the narrower it gets, so the height is a staircase
   (the steps below, each within ±3.4 px of what is measured). The base value is the one of a window ≤ 328px (1234px).
   The steps are for the width the page has with the page padding of 16px and without a classic scrollbar (the headless
   browser; a 15px scrollbar moves a step by 15px): if the page padding, the stage markup or a font changes, re-measure. */
.hub-scene[data-scene="ews-bridge"] { --ew: #E3B341; --stage-h: 547px; --stage-h-narrow: 1234px; }
@media (min-width: 721px) and (max-width: 1073px) { .hub-scene[data-scene="ews-bridge"] { --stage-h: 959px; } }
@media (min-width: 1074px) and (max-width: 1080px) { .hub-scene[data-scene="ews-bridge"] { --stage-h: 556px; } }
@media (min-width: 329px) and (max-width: 331px) { .hub-scene[data-scene="ews-bridge"] { --stage-h-narrow: 1203px; } }
@media (min-width: 332px) and (max-width: 334px) { .hub-scene[data-scene="ews-bridge"] { --stage-h-narrow: 1191px; } }
@media (min-width: 335px) and (max-width: 338px) { .hub-scene[data-scene="ews-bridge"] { --stage-h-narrow: 1175px; } }
@media (min-width: 339px) and (max-width: 344px) { .hub-scene[data-scene="ews-bridge"] { --stage-h-narrow: 1163px; } }
@media (min-width: 345px) and (max-width: 347px) { .hub-scene[data-scene="ews-bridge"] { --stage-h-narrow: 1147px; } }
@media (min-width: 348px) and (max-width: 353px) { .hub-scene[data-scene="ews-bridge"] { --stage-h-narrow: 1136px; } }
@media (min-width: 354px) and (max-width: 383px) { .hub-scene[data-scene="ews-bridge"] { --stage-h-narrow: 1124px; } }
@media (min-width: 384px) and (max-width: 397px) { .hub-scene[data-scene="ews-bridge"] { --stage-h-narrow: 1113px; } }
@media (min-width: 398px) and (max-width: 422px) { .hub-scene[data-scene="ews-bridge"] { --stage-h-narrow: 1102px; } }
@media (min-width: 423px) and (max-width: 438px) { .hub-scene[data-scene="ews-bridge"] { --stage-h-narrow: 1086px; } }
@media (min-width: 439px) and (max-width: 445px) { .hub-scene[data-scene="ews-bridge"] { --stage-h-narrow: 1069px; } }
@media (min-width: 446px) and (max-width: 452px) { .hub-scene[data-scene="ews-bridge"] { --stage-h-narrow: 1052px; } }
@media (min-width: 453px) and (max-width: 532px) { .hub-scene[data-scene="ews-bridge"] { --stage-h-narrow: 1034px; } }
@media (min-width: 533px) and (max-width: 568px) { .hub-scene[data-scene="ews-bridge"] { --stage-h-narrow: 1018px; } }
@media (min-width: 569px) and (max-width: 720px) { .hub-scene[data-scene="ews-bridge"] { --stage-h-narrow: 1000px; } }

/* The caption is long. While the scene plays, the Replay button shares the foot with it, so at some widths the caption wraps one
   line more than in the final frame (?static=1, reduced motion), where the button is hidden: the stage would be lower there
   (16px at 320-328 and 342-422px, 5px at 581-662px). The final frame gets the difference as room under the list, so both
   states have the height the page kept for them (the foot is scene.css and stays as it is). */
@media (max-width: 328px), (min-width: 342px) and (max-width: 422px) { .hub-scene[data-scene="ews-bridge"][data-state="final"] .ew-bottom { margin-bottom: 16px; } }
@media (min-width: 581px) and (max-width: 662px) { .hub-scene[data-scene="ews-bridge"][data-state="final"] .ew-bottom { margin-bottom: 5px; } }

/* three columns: the calls of the app 34 %, the bridge 22 %, the Graph calls 44 % */
.ew-head {
  display: grid; grid-template-columns: 34% 22% 44%; margin-bottom: 10px;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2);
}
.ew-h1 { display: flex; justify-content: space-between; gap: 12px; padding-right: 12px; }
.ew-h2 { text-align: center; color: var(--ew); }
.ew-flow { position: relative; }
.ew-bridge {
  position: absolute; left: 34%; width: 22%; top: 0; bottom: 10px;
  border: 1px solid var(--ew); border-radius: 4px; background: var(--bg-2);
}

.ew-call { position: relative; z-index: 1; display: grid; grid-template-columns: 34% 22% 44%; margin-bottom: 10px; }
.ew-app,
.ew-gr {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 48px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2); font-size: 12.5px;
}
.ew-k { display: none; flex: none; font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.ew-app b { flex: none; font-weight: 500; color: var(--fg); }
.ew-arg { min-width: 0; overflow-wrap: anywhere; color: var(--fg-2); }
.ew-state { position: relative; flex: none; align-self: stretch; margin-left: auto; width: 64px; font-size: 11px; }
.ew-blk,
.ew-tag { position: absolute; right: 0; top: 50%; margin-top: -.75em; line-height: 1.5; white-space: nowrap; }
.ew-blk { color: var(--muted); opacity: 0; }
.ew-tag { color: var(--ew); }
.ew-m { flex: none; font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--ew); }
.ew-path { min-width: 0; overflow-wrap: anywhere; font-size: 12px; color: var(--fg); }
.ew-gap .ew-gr { border-style: dashed; border-color: var(--muted); background: var(--bg); }
.ew-gap .ew-m,
.ew-gap .ew-path { color: var(--fg-2); }

/* the middle cell: the line across it (from the chip of the app to the chip of Graph), the wall of beat 1 */
.ew-mid { position: relative; }
.ew-link { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--ew); transform-origin: 0 50%; }
.ew-gap .ew-link { right: 50%; }
.ew-gap .ew-link::after { content: ''; position: absolute; right: 0; top: -6px; width: 2px; height: 14px; background: var(--ew); }
.ew-block { position: absolute; left: 50%; top: 50%; width: 3px; height: 28px; margin: -14px 0 0 -1px; background: var(--muted); opacity: 0; }
.ew-node {
  display: none; position: absolute; left: 0; right: 0; top: 50%; width: max-content; height: 22px; margin: -11px auto 0; padding: 0 10px;
  border: 1px solid var(--ew); border-radius: 999px; background: var(--bg); font-size: 10.5px; line-height: 20px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ew);
}

/* the dots: grey against the wall (noise), the bridge colour across the bridge (signal); only while they move */
.ew-noise,
.ew-pkt { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; opacity: 0; pointer-events: none; }
.ew-noise { background: var(--fg-2); }
.ew-pkt { background: var(--ew); }

/* below: what the app gets (under its column and the bridge), the gap report (under the Graph column) */
.ew-bottom { display: grid; grid-template-columns: 56% 44%; margin-top: 26px; }
.ew-resp { margin-right: 12px; padding: 14px 16px; }
.ew-gaps { position: relative; padding: 14px 16px; }
.ew-r { padding: 6px 0; border-top: 1px solid var(--line); font-size: 12px; overflow-wrap: anywhere; color: var(--fg-2); }
.ew-r code { font: inherit; color: var(--fg); }
.ew-r span { color: var(--ew); }
.ew-r em { display: block; font-style: normal; color: var(--ew); }
.ew-r small { display: block; font-size: 11px; color: var(--fg-2); }
.ew-gap-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 10px; padding: 5px 0 5px 8px;
  border-top: 1px solid var(--line); border-left: 2px solid transparent; font-size: 12px;
}
.ew-gap-row code { font: inherit; color: var(--fg); }
.ew-gap-row b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--fg); }
.ew-gap-row em { font-style: normal; font-size: 11px; color: var(--fg-2); }
.ew-gap-hot { border-left-color: var(--ew); }
.ew-gap-hot em { color: var(--ew); }
.ew-why { grid-column: 1 / -1; font-size: 11px; color: var(--fg-2); overflow-wrap: anywhere; }

/* a stage narrower than 1040px (the stage's own width, rail included): one column — each call is a card: the call of the
   app, a short line with the bridge on it, the Graph call; then the answers, then the list */
/* the stamp of the list: in the corner on the wide stage, a block under the rows on the narrow one */
@container (max-width: 1039px) {
  .ew-head { display: block; }
  .ew-h2, .ew-h3, .ew-bridge { display: none; }
  .ew-h1 { padding-right: 0; }
  .ew-call { grid-template-columns: minmax(0, 1fr); margin-bottom: 8px; }
  .ew-app, .ew-gr { min-height: 38px; }
  .ew-k { display: inline; }
  .ew-mid { height: 28px; }
  .ew-link { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; margin: 0 0 0 -1px; transform-origin: 50% 0; }
  .ew-gap .ew-link { right: auto; bottom: 50%; }
  .ew-gap .ew-link::after { right: auto; left: -6px; top: auto; bottom: 0; width: 14px; height: 2px; }
  .ew-block { width: 36px; height: 3px; margin: -1px 0 0 -18px; }
  .ew-node { display: block; }
  .ew-bottom { grid-template-columns: minmax(0, 1fr); row-gap: 12px; margin-top: 14px; }
  .ew-resp { margin-right: 0; }
  .ew-gaps .ew-stamp { position: static; display: inline-block; margin-top: 14px; }
}