/* Avakode Hub — scene «hubspot-bridge» (assets/js/scenes/hubspot-bridge.js): HubSpot v1 calls, the wall, the bridge, the answer,
   the gap report (lane 1.2b). Loaded by inc/scenes.php on a family page whose stage is this scene. Classes: .hb-* only; the
   common parts (.sc-head, .sc-sample, .sc-panel, .sc-stamp), the stage, the rail and the caption are scene.css.
   The colour of the bridge is --hb (#5AB0F0, decision of the coordinator, shared with the card of the board): lines, the span,
   the plates; text in it only where it is at least 4.5:1 on the background it stands on (8.2:1 on --bg-2; e2e measures it). */

/* The height of the stage before the module arrives = the height it takes (the kit gives the stage min-height: var(--stage-h)
   or, on a window <= 720px, var(--stage-h-narrow) until the scene is built; e2e: <= 4 px apart at every window width 360-1500 in
   10 px steps and at 375, 401, 414, 481, 540, 768, 794, 801). The built height is a staircase of the window width. Since lane 5.9 a
   path never breaks (one line, or its middle is «…»), so the steps are few: the figures below are one band per step (a band is at
   most 4 px tall, the figure is its middle), measured at every pixel of the window 320-1920 with ?static=1 (the frame = build() + CSS):
   from 1235px one line per row, panels side by side; 935-1234 and 721-934 two lines per row (the panels stacked from 900px of the
   stage); the narrow stage 320-720px, three lines a row from 560px of the stage (a window of about 594px).
   The bands follow the window (media queries) while the breaks follow the figure: with a classic scrollbar they shift by its width.
   If the text, the fonts or the page padding change, measure again: the e2e shows where. */
.hub-scene[data-scene="hubspot-bridge"] { --hb: #5AB0F0; --stage-h: 706px; --stage-h-narrow: 1125px; }
@media (max-width: 1234px) { .hub-scene[data-scene="hubspot-bridge"] { --stage-h: 920px; } }
@media (max-width: 934px) { .hub-scene[data-scene="hubspot-bridge"] { --stage-h: 1116px; } }
@media (max-width: 594px) { .hub-scene[data-scene="hubspot-bridge"] { --stage-h-narrow: 1296px; } }
@media (max-width: 454px) { .hub-scene[data-scene="hubspot-bridge"] { --stage-h-narrow: 1305px; } }
@media (max-width: 450px) { .hub-scene[data-scene="hubspot-bridge"] { --stage-h-narrow: 1310px; } }
@media (max-width: 374px) { .hub-scene[data-scene="hubspot-bridge"] { --stage-h-narrow: 1405px; } }
@media (max-width: 357px) { .hub-scene[data-scene="hubspot-bridge"] { --stage-h-narrow: 1423px; } }
@media (max-width: 351px) { .hub-scene[data-scene="hubspot-bridge"] { --stage-h-narrow: 1439px; } }
@media (max-width: 349px) { .hub-scene[data-scene="hubspot-bridge"] { --stage-h-narrow: 1454px; } }
@media (max-width: 322px) { .hub-scene[data-scene="hubspot-bridge"] { --stage-h-narrow: 1472px; } }

.hb-flow { position: relative; }
/* one grid for the column labels and every row: call | the wall with the bridge | the date-based target | status */
.hb-cols,
.hb-row {
  display: grid; grid-template-columns: minmax(0, 1.42fr) 108px minmax(0, 1fr) 90px; align-items: center;
}
.hb-cols { padding-bottom: 10px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.hb-col-target { padding-left: 8px; }
.hb-col-wall { text-align: center; text-transform: none; letter-spacing: 0; line-height: 1.3; color: var(--fg); }
.hb-row { position: relative; padding: 7px 0; border-top: 1px solid var(--line); }
.hb-row:last-child { border-bottom: 1px solid var(--line); }

.hb-call,
.hb-target {
  display: flex; gap: 8px; min-width: 0; padding: 5px 10px; font-size: 11.5px;
  border: 1px solid var(--line); border-radius: 4px; overflow-wrap: anywhere;
}
.hb-call b,
.hb-target b { flex: none; font-weight: 500; color: var(--fg-2); }
/* a path is ONE line (lane 5.9): it never breaks; when the box is too narrow the middle is replaced by «…» in the markup (.hb-m / .hb-e) */
.hb-call > span,
.hb-target > span { white-space: nowrap; }
.hb-e, .hb-ne { display: none; }
.hb-target { border-color: var(--hb); background: rgba(90, 176, 240, .1); }
.hb-target b { color: var(--hb); }
.hb-row > .hb-target { margin-right: 12px; }
.is-gap .hb-target { border: 1px dashed var(--muted); background: transparent; color: var(--fg-2); }
.is-gap .hb-target b { color: var(--fg-2); }

/* the wall (a line per row, they join into one: the row padding and border are covered) and the bridge over it */
.hb-link { position: relative; align-self: stretch; }
.hb-wall { position: absolute; left: 50%; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; background: var(--muted); }
.hb-span { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--hb); transform-origin: 0 50%; }
.is-gap .hb-span { right: calc(50% + 10px); background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 8px); }
.hb-pulse { position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--hb); opacity: 0; }

.hb-status {
  justify-self: end; padding: 2px 8px; border: 1px solid var(--hb); border-radius: 999px; white-space: nowrap;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--hb);
}
.is-gap .hb-status { border-color: var(--muted); color: var(--fg-2); }

/* beat 3: the answer in v1 format and the gap report */
.hb-proof { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; margin-top: 24px; }
.hb-answer,
.hb-gap { position: relative; padding: 14px 16px 16px; }
.hb-json { color: var(--fg-2); }
.hb-json > span { display: block; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.hb-json .hb-ln { color: var(--fg-2); }
.hb-json .hb-req { white-space: nowrap; overflow-wrap: normal; }
.hb-json b { font-weight: 500; color: var(--hb); }
.hb-json em { font-style: normal; color: var(--fg); }
.hb-req { margin-bottom: 4px; color: var(--fg); }
.hb-gap-cols,
.hb-gap-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; }
.hb-gap-cols { padding-bottom: 6px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hb-gap-line { padding: 6px 0; border-top: 1px solid var(--line); font-size: 11.5px; }
.hb-gap-line code { font: inherit; white-space: nowrap; color: var(--fg); }
.hb-gap-line b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--fg); }
.hb-gap-note { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--hb); font-size: 11px; color: var(--fg-2); }

.hb-fly {
  position: absolute; left: 0; top: 0; padding: 4px 10px; white-space: nowrap; pointer-events: none; font-size: 11.5px;
  border: 1px solid var(--hb); border-radius: 4px; background: var(--bg-2); color: var(--fg); opacity: 0;
}

/* the middle widths and the narrow stage: a row of two lines — the call, then the bridge, the target and its status */
@container (max-width: 1200px) {
  .hb-cols { grid-template-columns: 124px minmax(0, 1fr); }
  .hb-col-call { display: none; }
  .hb-col-target { display: none; }
  .hb-col-wall { text-align: left; grid-column: 1 / -1; }
  .hb-row { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "call call call" "link target status"; row-gap: 8px; }
  .hb-call { grid-area: call; }
  .hb-status { grid-area: status; align-self: center; margin-left: 10px; }
  .hb-link { grid-area: link; min-height: 30px; }
  .hb-target { grid-area: target; margin-right: 0; }
  .hb-wall { top: -4px; bottom: -4px; }
}
/* the answer and the gap report stand one under the other up to 900px (side by side the gap report's operation does not fit a line) */
@container (max-width: 900px) {
  .hb-proof { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@container (max-width: 760px) {
  .hb-fly { font-size: 11px; }
}
/* the middle widths: the gap report is a column beside the answer, its operation leaves out the middle (761-1200px) */
@container (max-width: 1200px) {
  .hb-gap-line .hb-m { display: none; }
  .hb-gap-line .hb-e { display: inline; }
}
/* a phone stage: three lines a row (the call; the bridge and the target; the status under the target), the middle of a path is «…» */
@container (max-width: 560px) {
  .hb-m { display: none; }
  .hb-e { display: inline; }
  .hb-row { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "call call" "link target" ". status"; }
  .hb-status { justify-self: start; margin-left: 0; }
}
@container (max-width: 420px) {
  .hb-n { display: none; }
  .hb-ne { display: inline; }
  .hb-call, .hb-target, .hb-gap-line, .hb-fly { font-size: 11px; }
  .hb-json .hb-req { font-size: 11px; }
}
/* 320-340px: the method stands over the path of a call, the panels of the gap report take a little less padding */
@container (max-width: 340px) {
  .hb-call { flex-direction: column; gap: 0; }
  .hb-answer, .hb-gap { padding-left: 10px; padding-right: 10px; }
  .hb-gap-cols, .hb-gap-line { gap: 8px; }
}
/* the stamp (top right of the answer) and the label «Answer · v1 format» (top left) would touch below ≈ 380px: the label steps down */
@container (max-width: 420px) {
  .hb-answer .hb-head { margin-top: 16px; }
}