/* The Flow page's system diagram (/cloud-console/project-info/flow), linked after /cloud-console/project-info/console.css and built on its
   tokens: HTML boxes and CSS connector lines, no image. Phones first: one column, top to bottom, with downward
   connectors. Above 640px it is a grid that reads left to right in four stages. The text keeps the page's own size. */

.sf-figure {
  margin: var(--space-4) 0 var(--space-6); padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.sf-figure > figcaption { color: var(--muted); margin: 0 0 var(--space-4); }

/* The text alternative: read by screen readers, not shown. */
.sf-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.sf { --sf-ink: var(--muted); display: flex; flex-direction: column; gap: var(--space-2); }
.sf-label { font-weight: 600; color: var(--muted); margin-top: var(--space-2); }
.sf > .sf-label:first-child { margin-top: 0; }

/* Boxes */
.sf-box {
  min-width: 0; overflow-wrap: anywhere; padding: var(--space-3);
  background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.sf-box > b { display: block; }
.sf-box p { margin: var(--space-1) 0 0; }
.sf-box ul { margin: var(--space-2) 0 0; padding-left: 1.1em; }
.sf-box li + li { margin-top: var(--space-1); }
.sf-sub { display: block; color: var(--muted); }
.sf-worker { background: var(--accent-soft); border-color: var(--accent); }
.sf-worker > b { color: var(--accent); }
.sf-store { background: var(--surface); border-width: 1px 1px 1px 4px; }
.sf-object { background: var(--info-soft); border-color: var(--info); }
.sf-object > b { color: var(--info); }

/* How a call ends: done, or retry and then failed; each marked by colour and by shape, as the chips are */
.sf-outs { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.sf-out { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border-left: 4px solid; }
.sf-out b { display: flex; align-items: center; gap: var(--space-2); }
.sf-out b::before { content: ""; flex: none; width: 8px; height: 8px; background: currentColor; }
.sf-out.ok { background: var(--ok-soft); border-color: var(--ok); }
.sf-out.ok b { color: var(--ok); }
.sf-out.ok b::before { border-radius: 50%; }
.sf-out.warn { background: var(--warn-soft); border-color: var(--warn); }
.sf-out.warn b { color: var(--warn); }
.sf-out.warn b::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sf-out.bad { background: var(--bad-soft); border-color: var(--bad); }
.sf-out.bad b { color: var(--bad); }
.sf-out.bad b::before { width: 7px; height: 7px; transform: rotate(45deg); }

/* Connectors: a 2px line and a head, in the muted ink */
.sf-arrow { display: none; }
.sf-down, .sf-mini {
  position: relative; align-self: center; width: 2px; height: 26px; margin: 2px 0 8px; background: var(--sf-ink);
}
.sf-down::after, .sf-mini::after {
  content: ""; position: absolute; bottom: -8px; left: -5px; width: 12px; height: 9px;
  background: var(--sf-ink); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.sf-mini { align-self: start; height: 12px; margin: 0 0 6px var(--space-4); }
/* JobObject to QueueObject: a queue target adds a task. The line bridges the gaps to the boxes above and below. */
.sf-adds {
  display: flex; align-items: stretch; gap: var(--space-2); margin: calc(-1 * var(--space-2)) 0;
  padding-left: var(--space-5); color: var(--muted);
}
.sf-adds > span:last-child { align-self: center; padding: var(--space-3) 0; }
.sf-up { position: relative; flex: none; width: 2px; margin-top: 9px; background: var(--sf-ink); }
.sf-up::before {
  content: ""; position: absolute; top: -9px; left: -5px; width: 12px; height: 9px;
  background: var(--sf-ink); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* Around it: alerts and the daily backup */
.sf-around { display: grid; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px dashed var(--line-strong); }
.sf-around > .sf-label { margin-top: 0; }

/* Wider than a phone: four stages, left to right. Callers | the Worker | where data goes | the call and its end. */
@media (min-width: 641px) {
  .sf-figure { padding: var(--space-5); }
  .sf {
    --sf-link: 36px;
    display: grid; gap: var(--space-3) 0; align-items: stretch;
    grid-template-columns:
      minmax(0, 1fr) var(--sf-link) minmax(0, 1.1fr) var(--sf-link) minmax(0, 1.25fr) var(--sf-link) minmax(0, 1.25fr);
  }
  .sf-label { margin-top: 0; align-self: end; }
  .sf-down { display: none; }
  .sf-adds { margin: calc(-1 * var(--space-3)) 0; }

  .sf-at-l1 { grid-area: 1 / 1; }
  .sf-at-l3 { grid-area: 1 / 3; }
  .sf-at-l5 { grid-area: 1 / 5; }
  .sf-at-l7 { grid-area: 1 / 7; }
  .sf-at-pages { grid-area: 2 / 1; align-self: center; }
  .sf-at-apps { grid-area: 3 / 1; align-self: center; }
  .sf-at-cron { grid-area: 5 / 1; align-self: center; }
  .sf-at-worker { grid-area: 2 / 3 / 6 / 4; }
  .sf-at-d1 { grid-area: 2 / 5; }
  .sf-at-queue { grid-area: 3 / 5; }
  .sf-at-adds { grid-area: 4 / 5; }
  .sf-at-job { grid-area: 5 / 5; }
  .sf-at-call { grid-area: 2 / 7 / 6 / 8; }
  .sf-at-around { grid-area: 6 / 1 / 7 / 8; }

  .sf-arrow { display: block; position: relative; align-self: center; height: 2px; margin: 0 9px 0 3px; background: var(--sf-ink); }
  .sf-arrow::after {
    content: ""; position: absolute; right: -9px; top: -5px; width: 9px; height: 12px;
    background: var(--sf-ink); clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .sf-arrow.both { margin-left: 9px; }
  .sf-arrow.both::before {
    content: ""; position: absolute; left: -9px; top: -5px; width: 9px; height: 12px;
    background: var(--sf-ink); clip-path: polygon(100% 0, 0 50%, 100% 100%);
  }
  .sf-at-a1 { grid-area: 2 / 2; }
  .sf-at-a2 { grid-area: 3 / 2; }
  .sf-at-a3 { grid-area: 5 / 2; }
  .sf-at-a4 { grid-area: 2 / 4; }
  .sf-at-a5 { grid-area: 3 / 4; }
  .sf-at-a6 { grid-area: 5 / 4; }
  .sf-at-a7 { grid-area: 3 / 6; }
  .sf-at-a8 { grid-area: 5 / 6; }

  .sf-around { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); align-items: stretch; }
  .sf-around > .sf-label { align-self: center; padding-right: var(--space-2); }
}
/* Tablets: narrower links and boxes, so each stage keeps room for its words */
@media (min-width: 641px) and (max-width: 900px) {
  .sf { --sf-link: 28px; }
  .sf-box { padding: var(--space-2) 10px; }
  .sf-adds { padding-left: var(--space-3); }
}

/* Two stops beside one step of a .flow: succeeded, or failed */
.sf-stops { display: grid; gap: var(--space-2); align-self: start; min-width: 0; }