/*
 * Flow blocks (5 Nov 2026): the site-wide styles of the flow illustrations Jantine picked,
 * resources/views/components/site/flow/{route,timeline,branch}.blade.php: B route (one request
 * left to right), E timeline (one request top to bottom) and G branch (the branching route on a
 * band, with G2 top to bottom and H square wires). Linked on every public page through
 * partials.brand-css; the other variants live in flow-blocks-extra.css (review page only).
 *
 * Built on the brand tokens (--b-*) only: hairline borders, the four radii, one indigo accent, mono
 * labels. Flat: no shadows, no glows, no round dots (every stop and cell is a square), no gradient
 * text, no tinted fill with a coloured border. Motion only under prefers-reduced-motion: no-preference.
 *
 * Blocks: shared, B route, E timeline, G branch.
 */

/* ===================================================================== */
/* shared                                                                */
/* ===================================================================== */
.flw{
  --flw-card:var(--b-card);
  --flw-band:var(--b-band);
  --flw-line:var(--b-line-2);
  --flw-wire:var(--b-raised-h);
  --flw-ink:var(--b-ink);
  --flw-ink-2:var(--b-ink-2);
  --flw-mute:var(--b-muted);
  --flw-faint:var(--b-faint);
  --flw-cell:var(--b-raised);
  color:var(--flw-ink);
  min-width:0;
}
.flw .mono{font-family:var(--b-mono);font-weight:400;letter-spacing:0}
:where(.flw) ol{list-style:none;margin:0;padding:0}
:where(.flw) p{margin:0}
.flw .hy-sec-head{margin-bottom:48px}
.flw-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the numbered square of a layer; the accent when its layer is lit */
.flw-num{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:var(--b-r-ctl);background:var(--flw-band);font:400 12px/1 var(--b-mono);color:var(--flw-mute);position:relative;z-index:1}
.flw .is-on .flw-num{background:var(--b-accent);color:var(--b-on-accent)}
/* "you are here", the one solid accent tag */
.flw-here{display:inline-block;width:max-content;padding:3px 7px;border-radius:var(--b-r-tag);background:var(--b-accent);color:var(--b-on-accent);font:400 11px/1.2 var(--b-mono);font-style:normal;letter-spacing:0}

/* square tool and logo tiles */
.flw-tiles{display:flex;flex-wrap:wrap;gap:6px}
.flw-tile{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--b-r-ctl);background:var(--flw-band);color:var(--flw-mute)}
.flw-tile img{width:20px;height:20px}
.flw-tile--more{width:auto;padding:0 12px;background:none;border:1px dashed var(--flw-line);font-size:12px;white-space:nowrap}
.flw-tiles--sm .flw-tile{width:36px;height:36px}
.flw-tiles--sm .flw-tile img{width:18px;height:18px}

/* model chips with the publisher mark */
.flw-chips{display:flex;flex-wrap:wrap;gap:8px}
.flw-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:var(--b-r-ctl);background:var(--flw-band);font-size:14px;font-weight:500;color:var(--flw-ink);white-space:nowrap}
.flw-chip img{width:16px;height:16px}
.flw-chip small{font-size:11px;color:var(--flw-mute);font-weight:400}
.flw-chip--quiet{background:none;border:1px dashed var(--flw-line);color:var(--flw-mute);font-size:12px;font-weight:400}
.flw-chip--dim{opacity:.45}

/* GPU cells: squares, some lit in the accent */
.flw-rack__grid i,.flw-mini__grid i,.flw-choice__marks--gpu i{display:block;border-radius:var(--b-r-px);background:var(--flw-cell)}
.flw-rack__grid i.is-lit,.flw-mini__grid i.is-lit,.flw-choice__marks--gpu i.is-lit{background:var(--b-accent)}

/* a layer page: the lit layer stays, the others step back */
.flw--focus :is(.flw-stack__row,.flw-route__card,.flw-process__step,.flw-time__ev,.flw-choice__row):not(.is-on) :is(.flw-stack__art,.flw-route__art,.flw-process__text,.flw-process__got,.flw-time__body,.flw-time__out,.flw-choice__ours,.flw-choice__yours){opacity:.42}
.flw--focus :is(.flw-stack__row,.flw-route__card,.flw-process__step,.flw-choice__row):not(.is-on) :is(.flw-stack__title b,.flw-route__head b,.flw-process__title,.flw-choice__name b){color:var(--flw-mute)}


/* ===================================================================== */
/* B route: one request, left to right                                   */
/* ===================================================================== */
.flw-route{--gap:16px}
.flw-route__body{position:relative}
.flw-route__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.flw-route__card{position:relative;display:flex;flex-direction:column;gap:18px;min-height:216px;padding:20px;border:1px solid var(--flw-line);border-radius:var(--b-r-card);background:var(--flw-card)}
.flw-route__card:not(:last-child)::after{content:"";position:absolute;top:36px;right:calc(-1 * var(--gap) - 1px);width:var(--gap);height:1px;background:var(--flw-wire)}
.flw-route__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.flw-route__head b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.flw-route__art{flex:1;display:flex;align-items:flex-start;min-width:0}
.flw-route__step{padding-top:12px;border-top:1px solid var(--b-line);font-size:12px;color:var(--flw-mute)}
.flw-checks{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.flw-check{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;border-radius:var(--b-r-tag);background:var(--flw-band);font-size:13px;color:var(--flw-ink-2)}
.flw-check .hy-icon{color:var(--b-accent)}
.flw-pick{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.flw-mini{display:flex;flex-direction:column;gap:10px}
.flw-mini__grid{display:grid;grid-template-columns:repeat(4,14px);gap:4px}
.flw-mini__grid i{width:14px;height:14px}
.flw-mini small{font-size:12px;color:var(--flw-mute)}
.flw-route__back{margin-top:20px;font-size:14px;color:var(--flw-mute)}

/* the track under the cards: a stop under every card, the request square travels it */
.flw-route__track{position:relative;height:14px;margin-top:18px}
.flw-route__track::before{content:"";position:absolute;top:6.5px;height:1px;background:var(--flw-wire);left:calc((100% - 3 * var(--gap)) / 8);right:calc((100% - 3 * var(--gap)) / 8)}
.flw-route__stop,.flw-route__packet{position:absolute;top:50%;transform:translate(-50%,-50%);border-radius:var(--b-r-tick)}
.flw-route__stop{width:8px;height:8px;background:var(--flw-wire);left:calc((100% - 3 * var(--gap)) / 4 * (var(--i) + .5) + var(--gap) * var(--i))}
.flw-route__packet{width:12px;height:12px;background:var(--b-accent);z-index:1;--at:3;left:calc((100% - 3 * var(--gap)) / 4 * (var(--at) + .5) + var(--gap) * var(--at))}
.flw-route.flw--focus .flw-route__packet{--at:var(--rest)}
@media (prefers-reduced-motion:no-preference){
  .flw-route:not(.flw--focus) .flw-route__packet{animation:flw-travel 7s cubic-bezier(.6,0,.3,1) infinite}
  .flw-route:not(.flw--focus) .flw-route__card .flw-num{animation:flw-lit 7s linear infinite;animation-delay:calc(var(--i) * 1.54s)}
}
/* stops at 0, 22, 44 and 66 percent of the loop: card i is lit from i x 22 percent for 16 percent */
@keyframes flw-travel{
  0%,8%{left:calc((100% - 3 * var(--gap)) / 8);opacity:1}
  22%,30%{left:calc((100% - 3 * var(--gap)) / 8 * 3 + var(--gap))}
  44%,52%{left:calc((100% - 3 * var(--gap)) / 8 * 5 + var(--gap) * 2)}
  66%,88%{left:calc((100% - 3 * var(--gap)) / 8 * 7 + var(--gap) * 3);opacity:1}
  96%{left:calc((100% - 3 * var(--gap)) / 8 * 7 + var(--gap) * 3);opacity:0}
  100%{left:calc((100% - 3 * var(--gap)) / 8);opacity:0}
}
@keyframes flw-lit{0%,16%{background:var(--b-accent);color:var(--b-on-accent)}18%,100%{background:var(--flw-band);color:var(--flw-mute)}}

@media (max-width:900px){
  .flw-route__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flw-route__card:not(:last-child)::after,.flw-route__track{display:none}
  .flw-route__card{min-height:0}
}
@media (max-width:560px){
  .flw-route__cards{grid-template-columns:minmax(0,1fr);gap:12px}
  .flw-route__card{padding:16px;gap:14px}
  .flw-route__card:not(:last-child)::after{display:block;top:auto;bottom:-13px;right:auto;left:35.5px;width:1px;height:12px}
}

/* B: a little more air between the track and the closing line */
.flw-route__back{margin-top:28px}

/* ===================================================================== */
/* E timeline: one request, top to bottom                                */
/* ===================================================================== */
.flw-time{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.flw-time .hy-sec-head{margin-bottom:0;position:sticky;top:96px}
.flw-time--solo{grid-template-columns:minmax(0,1fr)}
.flw-time__list{padding:12px 28px;border:1px solid var(--flw-line);border-radius:var(--b-r-panel);background:var(--flw-card)}
.flw-time__ev{position:relative;display:grid;grid-template-columns:96px 11px minmax(0,1fr) auto;grid-template-areas:"at stop body out";gap:0 18px;align-items:start;padding:16px 0}
.flw-time__ev + .flw-time__ev{border-top:1px solid var(--b-line)}
.flw-time__ev::before{content:"";position:absolute;left:calc(96px + 18px + 5px);top:0;bottom:0;width:1px;background:var(--flw-wire)}
.flw-time__ev:first-child::before{top:24px}
.flw-time__ev:last-child::before{bottom:auto;height:24px}
.flw-time__at{grid-area:at;padding-top:3px;font-size:12px;color:var(--flw-mute);white-space:nowrap}
.flw-time__stop{grid-area:stop;position:relative;z-index:1;width:11px;height:11px;margin-top:5px;border-radius:var(--b-r-tick);background:var(--flw-wire)}
.flw-time__ev.is-on .flw-time__stop,.flw-time:not(.flw--focus) .flw-time__ev--gpu .flw-time__stop{background:var(--b-accent)}
.flw-time__body{grid-area:body;min-width:0}
.flw-time__layer{display:block;font-size:11px;color:var(--flw-mute)}
.flw-time__what{margin-top:4px;font-size:15px;line-height:1.5;color:var(--flw-ink)}
.flw-time__who{display:inline-flex;align-items:center;gap:4px;margin-right:6px;vertical-align:-6px}
.flw-time__who img{width:24px;height:24px;border-radius:6px;object-fit:cover}
.flw-time__who .home-logo{width:16px;height:16px}
.flw-time__out{grid-area:out;align-self:start;margin-top:1px;padding:4px 8px;border-radius:var(--b-r-tag);background:var(--flw-band);font-size:11.5px;color:var(--flw-mute);white-space:nowrap}
.flw-time__ev.is-on .flw-time__out{background:var(--b-accent);color:var(--b-on-accent)}
@media (max-width:1020px){
  .flw-time{grid-template-columns:minmax(0,1fr);gap:40px}
  .flw-time .hy-sec-head{position:static}
}
@media (max-width:560px){
  .flw-time__list{padding:4px 16px}
  .flw-time__ev{grid-template-columns:11px minmax(0,1fr);grid-template-areas:"stop at" "stop body" "stop out";gap:4px 14px}
  .flw-time__ev::before{left:5px}
  .flw-time__ev:first-child::before{top:22px}
  .flw-time__ev:last-child::before{height:22px}
  .flw-time__stop{grid-row:1;margin-top:3px}
  .flw-time__at{padding-top:0;font-size:11.5px}
  .flw-time__what{margin-top:2px}
  .flw-time__out{justify-self:start;margin-top:4px}
}


/* ===================================================================== */
/* G branch: the branching route on a band (ported from /x/pro-22)       */
/* H is the same block with square wires and column heads (/x/pro-24)    */
/* ===================================================================== */
.flw-br__tall{display:none}
.flw-br--column .flw-br__tall{display:flex}
.flw-br__fig{position:relative;aspect-ratio:1000/360;border-radius:var(--b-r-panel);background:var(--flw-band)}
.flw-br__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flw-br__wire{fill:none;stroke:var(--b-faint);stroke-width:1.5;vector-effect:non-scaling-stroke}
.flw-br__pkt{fill:var(--b-accent)}
.flw-br__node{min-width:0;padding:12px 16px;border-radius:var(--b-r-card);background:var(--b-card);color:var(--b-ink)}
.flw-br__fig .flw-br__node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:17%;z-index:1}
.flw-br__n1{display:flex;align-items:center;gap:8px;font-size:15px;line-height:24px;font-weight:600;white-space:nowrap}
.flw-br__n2{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:13px;line-height:20px;color:var(--b-muted);white-space:nowrap}
.flw-br__n2 img{width:14px;height:14px}
.flw-br__node--hub{background:var(--b-ink);color:var(--b-on-ink)}
.flw-br__node--hub .flw-br__n2{color:var(--b-ink-soft)}
.flw-br__ic{flex:none;width:24px;height:24px;display:inline-grid;place-items:center;border-radius:var(--b-r-tag);background:var(--b-band);color:var(--b-ink-2)}
.flw-br__ic--logo{background:var(--b-paper)}
.flw-br__ic img{width:14px;height:14px}
.flw-br__tag{position:absolute;left:var(--x,50%);top:50%;transform:translate(-50%,-50%);z-index:1;padding:0 8px;border-radius:var(--b-r-tag);background:var(--flw-band);font:400 12px/20px var(--b-mono);color:var(--b-muted);white-space:nowrap}
.flw-br__cap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px}
.flw-br__cap span{justify-self:center;display:inline-flex;gap:8px;padding:3px 8px;border-radius:var(--b-r-tag);font:400 12px/16px var(--b-mono);color:var(--b-muted)}
.flw-br__cap b,.flw-br__heads b,.flw-br__lv b{font-weight:400;color:var(--b-accent)}
.flw-br__cap span.is-on{background:var(--b-accent);color:var(--b-on-accent)}
.flw-br__cap span.is-on b{color:var(--b-on-accent)}
.flw-br.flw--focus .flw-br__node:not(.is-on){opacity:.45}
.flw-br.flw--focus .flw-br__models.is-on .flw-br__node{opacity:1}
@media (prefers-reduced-motion:reduce){.flw-br__pkt,.flw-br__drop{display:none}}

/* H: column heads above, quiet guides between the columns */
.flw-br__heads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:12px}
.flw-br__heads span{justify-self:center;min-width:120px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px;border-radius:var(--b-r-ctl);font-size:15px;font-weight:600}
.flw-br__heads b{font:400 12px/16px var(--b-mono)}
.flw-br__heads em{font-style:normal;font-weight:400;font-size:13px;color:var(--b-muted)}
.flw-br__heads span.is-on{background:var(--b-accent);color:var(--b-on-accent)}
.flw-br__heads span.is-on :is(b,em){color:var(--b-on-accent)}
.flw-br__guides{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:inherit;overflow:hidden}
.flw-br__guides i:nth-child(even){background:rgb(21 17 12 / .025)}

/* G2: top to bottom */
.flw-br__tall{flex-direction:column;align-items:stretch;max-width:560px;padding:20px;border-radius:var(--b-r-panel);background:var(--flw-band)}
.flw-br--column .flw-br__tall{margin-inline:auto}
.flw-br__lv{display:inline-flex;gap:8px;margin-bottom:8px;font:400 12px/16px var(--b-mono);color:var(--b-muted)}
.flw-br__node--hub .flw-br__lv{color:var(--b-ink-mute)}
.flw-br__node--hub .flw-br__lv b{color:var(--b-accent-light)}
.flw-br__down,.flw-br__fanbox{position:relative}
.flw-br__down{height:52px}
.flw-br__down::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1.5px;background:var(--b-faint);transform:translateX(-50%)}
.flw-br__drop{position:absolute;left:50%;top:0;width:8px;height:8px;margin-left:-4px;border-radius:var(--b-r-tick);background:var(--b-accent)}
@media (prefers-reduced-motion:no-preference){.flw-br__drop{animation:flw-drop 1.8s linear infinite}}
@keyframes flw-drop{0%{top:-4px;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:calc(100% - 4px);opacity:0}}
.flw-br__fan{display:block;width:100%;height:52px}
.flw-br__fan path{fill:none;stroke:var(--b-faint);stroke-width:1.5;vector-effect:non-scaling-stroke}
.flw-br__tag--lv{display:inline-flex;gap:8px;top:auto;bottom:6px}
.flw-br__tag--lv b{font-weight:400;color:var(--b-accent)}
.flw-br__tag--lv.is-on{background:var(--b-accent);color:var(--b-on-accent)}
.flw-br__tag--lv.is-on b{color:var(--b-on-accent)}
.flw-br__models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.flw-br__models .flw-br__node{padding:10px 12px}
.flw-br__tall .flw-br__n1,.flw-br__tall .flw-br__n2{white-space:normal}
.flw-br__models .flw-br__n1{flex-direction:column;align-items:flex-start;gap:6px;font-size:14px;line-height:18px}
.flw-br__models .flw-br__n2{font-size:12px;line-height:16px}
@media (max-width:1120px){
  .flw-br__wide{display:none}
  .flw-br__tall{display:flex}
}
@media (max-width:560px){
  .flw-br__tall{padding:14px}
  .flw-br__models{gap:6px}
  .flw-br__models .flw-br__node{padding:10px}
}