/* The "How it works" diagram (base/flow.py, flow.js). Colors come from whichever page it is on:
   the approval page's tokens or the landing page's. site/flow.css is a copy of ui/static/flow.css. */

.flow {
  --f-surface: var(--surface, var(--card, #FFFFFF));
  --f-line: var(--border, var(--line, #E3E6EA));
  --f-text: var(--text, #1C2B33);
  --f-text-2: var(--text-2, #5A6872);
  --f-soft: var(--code-bg, var(--panel, #F1F3F5));
  --f-ok: var(--ok, #2E9E5B);
  --f-wait: var(--wait, #E8A317);
  --f-danger: var(--danger, #D93025);
  --f-send: var(--send, var(--blue, #1D63ED));
  --tone: var(--f-send);
  container: flow / inline-size;
  margin: 0;
  color: var(--f-text);
}
.flow .t-ok { --tone: var(--f-ok); }
.flow .t-wait { --tone: var(--f-wait); }
.flow .t-danger { --tone: var(--f-danger); }
.flow .t-send { --tone: var(--f-send); }
.flow .t-off { --tone: var(--f-text-2); }

.flow-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.flow-tabs, .flow-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.flow-tab {
  border: 1px solid var(--f-line); background: var(--f-surface); color: var(--f-text);
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer;
}
.flow-tab:hover { border-color: var(--f-text-2); }
.flow-tab[data-story][aria-pressed="true"] { background: var(--f-text); color: var(--f-surface); border-color: var(--f-text); }

.flow-live { margin: 14px 0 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--f-text-2); }
.flow-live::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--f-line); flex: none; }
.flow-live[data-state="working"]::before { background: var(--f-ok); }
.flow-live[data-state="waiting"]::before { background: var(--f-wait); animation: flow-blink 1.4s ease-in-out infinite; }
.flow-live[data-state="sending"]::before { background: var(--f-send); }

.flow-stage {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(120px, 1fr);
  gap: 36px; margin-top: 18px;
}
.flow-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.flow-wire { fill: none; stroke: var(--f-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s; }
.flow-wire.on { stroke: var(--tone); stroke-dasharray: 6 7; animation: flow-dash 0.9s linear infinite; }
.flow-wire-label { font-size: 12px; fill: var(--f-text-2); }

.flow-zone-box { position: relative; border: 1.5px dashed var(--f-line); border-radius: 20px; padding: 64px 16px 16px; }
.flow-zone {
  position: absolute; top: 18px; left: 18px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--f-text-2);
}
.flow-device {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-areas: "files model tagging rules check" ". you kept approvals .";
  gap: 40px 20px; background: color-mix(in srgb, var(--f-ok) 4%, transparent);
}
.flow-cloud { display: grid; grid-template-areas: "muse"; align-content: start; }

.flow-node {
  position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 12px; border: 1px solid var(--f-line); border-radius: 14px; background: var(--f-surface);
  color: var(--f-text); text-decoration: none;
  transition: border-color 0.3s, box-shadow 0.3s, opacity 0.3s;
}
a.flow-node:hover { border-color: var(--f-text-2); }
.flow-node[data-node="files"] { grid-area: files; }
.flow-node[data-node="model"] { grid-area: model; }
.flow-node[data-node="tagging"] { grid-area: tagging; }
.flow-node[data-node="rules"] { grid-area: rules; }
.flow-node[data-node="check"] { grid-area: check; }
.flow-node[data-node="you"] { grid-area: you; }
.flow-node[data-node="kept"] { grid-area: kept; }
.flow-node[data-node="approvals"] { grid-area: approvals; }
.flow-node[data-node="muse"] { grid-area: muse; }
.flow-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--f-text-2); }
.flow-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.flow-sub { font-size: 12.5px; line-height: 1.4; color: var(--f-text-2); overflow-wrap: anywhere; }
.flow-node.on { border-color: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 22%, transparent); }
.flow-node.on .flow-ico { color: var(--tone); }
.flow-node.dim, .flow-node.on.t-off { opacity: 0.45; box-shadow: none; }
.flow-node.live::after {
  content: ""; position: absolute; inset: -6px; border-radius: 18px; border: 2px solid var(--f-send);
  animation: flow-ring 1.6s ease-out infinite;
}
.flow-node.live-ok::after { border-color: var(--f-ok); }
.flow-node.live-wait::after { border-color: var(--f-wait); }

.flow-token {
  position: absolute; left: 0; top: 0; z-index: 3; padding: 3px 10px; border-radius: 999px;
  background: var(--tone); color: #FFFFFF; font: 600 12px/1.4 var(--mono, ui-monospace, monospace);
  white-space: nowrap; box-shadow: 0 2px 8px rgb(0 0 0 / 18%); pointer-events: none;
}
.flow-token.t-wait { color: #2B1D00; }
.flow-token.landed { opacity: 0; transition: opacity 0.5s; }

.flow-steps { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: flow-step; display: grid; gap: 8px; }
.flow-steps li {
  counter-increment: flow-step; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px;
  align-items: start; font-size: 14px; line-height: 1.5; color: var(--f-text-2);
}
.flow-steps li::before {
  content: counter(flow-step); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; background: var(--f-soft); color: var(--f-text-2);
}
.flow-steps li[aria-current="step"] { color: var(--f-text); }
.flow-steps li[aria-current="step"]::before { background: var(--tone); color: #FFFFFF; }
.flow-steps.t-wait li[aria-current="step"]::before { color: #2B1D00; }

/* Narrow: the device's steps run down the page, and where a result can stop sits beside them. */
@container flow (max-width: 820px) {
  .flow-stage { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .flow-zone-box { padding: 48px 14px 16px 34px; }
  .flow-zone { top: 16px; left: 34px; }
  .flow-device {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas: "files ." "model you" "tagging kept" "rules approvals" "check .";
    gap: 22px 18px;
  }
  .flow-cloud { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "muse ."; column-gap: 18px; }
}

@keyframes flow-dash { to { stroke-dashoffset: -13; } }
@keyframes flow-ring { from { opacity: 0.9; transform: scale(0.98); } to { opacity: 0; transform: scale(1.04); } }
@keyframes flow-blink { 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  .flow-wire.on, .flow-node.live::after, .flow-live::before { animation: none; }
}