/* Measurebase · the data-flow scene (isometric SVG, no libraries).
   Shared by the homepage platform section and drafts/flow-3d.html.
   Everything is scoped under .flow-scene. */
.flow-scene { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px 32px; align-items: start; }
.flow-scene .tabs { grid-column: 1 / -1; margin-bottom: 0; justify-content: center; }
.flow-scene .stage { grid-column: 1; }
.flow-scene .beats { grid-column: 1; grid-row: 4; }
/* The side panel is as tall as the scene, never taller: long stories scroll inside it. */
.flow-scene .fs-aside { grid-column: 2; grid-row: 2; align-self: stretch; height: 0; min-height: 100%; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid var(--line, #e6e6e1); border-radius: 22px; padding: 22px 22px 18px; display: flex; flex-direction: column; }
.flow-scene .fs-aside .beat-copy { text-align: left; margin: 0; min-height: 0; max-width: none; font-size: 15px; flex: 0 0 auto; }
.flow-scene .fs-aside .beat-copy .h { margin-bottom: 10px; }
.flow-scene .fs-steps { list-style: none; margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--line, #e6e6e1); }
.flow-scene .fs-steps li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; color: var(--ink-faint, #9a9ea8); font-size: 13.5px; cursor: pointer; transition: color .2s; }
.flow-scene .fs-steps li .n { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11px; letter-spacing: .06em; min-width: 22px; }
.flow-scene .fs-steps li:hover { color: var(--ink, #17181a); }
.flow-scene .fs-steps li.on { color: var(--ink, #17181a); font-weight: 600; }
.flow-scene .fs-steps li.on .n { color: var(--accent, #0071e3); }
.flow-scene .fs-step-copy { margin: 0; }
.flow-scene .fs-hint { grid-column: 1; grid-row: 3; margin: 0; text-align: left; }
@media (max-width: 900px) {
  .flow-scene { grid-template-columns: 1fr; }
  .flow-scene .fs-aside { grid-column: 1; grid-row: auto; height: auto; min-height: 0; max-height: 260px; }
  .flow-scene .fs-hint { grid-row: auto; }
}
/* on the homepage the scene sits between the platform header and the three cards */
#platform .flow-scene { margin: 0; }   /* nothing follows it in the section now that the cards are hidden */
#platform .flow-scene .fs-hint { margin-bottom: 0; }
  .flow-scene .stage {
    position: relative; border: 1px solid var(--line, #e6e6e1); border-radius: 22px; overflow: hidden;
    background: #fbfbf9; aspect-ratio: 1180 / 560;
  }
  .flow-scene .stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .flow-scene .stage .lbl { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11px; letter-spacing: .08em; fill: #7a7d85; text-transform: uppercase; pointer-events: none; }
  .flow-scene .stage .lbl.ink { fill: #17181a; }
  .flow-scene .stage .count { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11px; fill: #7a7d85; pointer-events: none; }
  .flow-scene .face-top { fill: #ffffff; }
  .flow-scene .face-left { fill: #eceef2; }
  .flow-scene .face-right { fill: #dfe3e9; }
  .flow-scene .edge { stroke: #17181a; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; fill: none; opacity: .85; pointer-events: none; }
  .flow-scene .hub .face-top { fill: rgba(0,113,227,.05); }
  .flow-scene .hub .face-left, .flow-scene .hub .face-right { fill: none; }
  .flow-scene .hub .edge { stroke: #7fa9dc; stroke-dasharray: 3 4; opacity: 1; }
  .flow-scene .side .face-top { fill: #fff; }
  .flow-scene .proxy .face-top { fill: #fff; } .proxy .face-left { fill: #e4ecfa; } .proxy .face-right { fill: #d0def6; } .proxy .edge { stroke: #0b5bb3; }
  .flow-scene .gtm .face-top { fill: #fff; } .gtm .face-left { fill: #eef1f5; } .gtm .face-right { fill: #e1e5eb; } .gtm .edge { stroke: #17181a; }
  .flow-scene .st-mark { stroke: #0b5bb3; stroke-width: .8; opacity: .9; transition: fill .25s; }
  .flow-scene .station.lit .st-mark { fill: #0071e3 !important; }
  .flow-scene .route { fill: none; stroke: #c9ccd3; stroke-width: 1; stroke-dasharray: 3 5; pointer-events: none; }
  .flow-scene .route.direct { stroke: #d6b7a6; stroke-dasharray: 2 6; }
  .flow-scene .route.pixel { stroke: #b9cff0; stroke-dasharray: 2 6; }
  .flow-scene .wall { fill: rgba(23,24,26,.05); stroke: #cfd2cc; stroke-width: 1; }
  .flow-scene .glow { fill: url(#hubGlow); pointer-events: none; }
  .flow-scene .float { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 10.5px; letter-spacing: .05em; fill: #17181a; pointer-events: none; }
  .flow-scene .float.warn { fill: #b4530a; }
  .flow-scene .float.ok { fill: #0b5bb3; }
  .flow-scene .pulse { fill: none; stroke: #0071e3; stroke-width: 1.2; pointer-events: none; }
  .flow-scene .sweep { fill: url(#sweepGrad); pointer-events: none; }
  .flow-scene .marker { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 10px; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
  .flow-scene .dim { transition: opacity .6s ease; }
  .flow-scene .hot { cursor: pointer; }
  .flow-scene .hot.lit .edge { stroke: #0071e3; opacity: 1; stroke-width: 1.4; }
  .flow-scene .hot.lit .wall { stroke: #0071e3; }
  .flow-scene .hot.pin .edge { stroke: #0071e3; opacity: 1; stroke-width: 1.6; }
  .flow-scene .hot.pin .wall { stroke: #0071e3; }
  .flow-scene .pk.hot { cursor: pointer; }
  .flow-scene .pk.pin .edge { stroke: #ff8a00; stroke-width: 1.8; }
  .flow-scene .unpin { margin-left: 10px; border: 1px solid var(--line, #e6e6e1); background: #fff; border-radius: 999px; width: 20px; height: 20px; line-height: 16px; font-size: 14px; color: #6b6e76; cursor: pointer; vertical-align: -3px; padding: 0; }
  .flow-scene .unpin:hover { color: #17181a; border-color: #17181a; }
  .flow-scene .hit { fill: transparent; stroke: none; }
  .flow-scene .audit-badge { cursor: pointer; }
  .flow-scene .todo-box { fill: #fff; stroke: #17181a; stroke-width: 1; }
  .flow-scene .todo-text { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11px; letter-spacing: .03em; fill: #17181a; }
  .flow-scene .todo-check { fill: none; stroke: #1e8e3e; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .flow-scene .todo-strike { stroke: #7a7d85; stroke-width: 1; }
  .flow-scene .todo.done .todo-text { fill: #7a7d85; }
  .flow-scene .audit-badge .ring { fill: none; stroke: #17181a; stroke-width: 1; }
  .flow-scene .audit-badge.lit .ring, .flow-scene .audit-badge.live .ring { stroke: #0071e3; }
  .flow-scene .audit-badge .hand { stroke: #17181a; stroke-width: 1.4; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; }
  .flow-scene .audit-badge.live .hand, .flow-scene .audit-badge.lit .hand { stroke: #0071e3; animation: spin 1.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* the audit's to-do panel, inside the scene */
  .flow-scene .audit-panel { position: absolute; right: 18px; top: 58px; width: 262px; background: #fff; border: 1px solid var(--line, #e6e6e1); border-radius: 12px; padding: 12px 14px 10px; box-shadow: 0 10px 30px rgba(23,24,26,.08); font-size: 12.5px; color: #17181a; opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .35s; pointer-events: none; }
  .flow-scene .audit-panel.show { opacity: 1; transform: none; pointer-events: auto; }
  .flow-scene .audit-panel .ph { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #7a7d85; display: flex; justify-content: space-between; margin-bottom: 8px; }
  .flow-scene .audit-panel .ph b { color: #0b5bb3; font-weight: 600; }
  .flow-scene .audit-item { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: 0; padding: 7px 0; font: inherit; color: #17181a; text-align: left; cursor: pointer; border-top: 1px solid #f0f0ec; }
  .flow-scene .audit-item:first-of-type { border-top: 0; }
  .flow-scene .audit-item .bx { width: 13px; height: 13px; border: 1px solid #17181a; border-radius: 3.5px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
  .flow-scene .audit-item .bx svg { width: 9px; height: 9px; stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
  .flow-scene .audit-item .tx { flex: 1; position: relative; }
  .flow-scene .audit-item .tx::after { content: ''; position: absolute; left: 0; top: 55%; height: 1px; width: 0; background: #7a7d85; transition: width .4s; }
  .flow-scene .audit-item .ac { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 10.5px; letter-spacing: .05em; color: #0071e3; flex: none; }
  .flow-scene .audit-item:hover .ac { text-decoration: underline; }
  .flow-scene .audit-item.done { cursor: default; color: #7a7d85; }
  .flow-scene .audit-item.done .bx { background: #1e8e3e; border-color: #1e8e3e; }
  .flow-scene .audit-item.done .bx svg { opacity: 1; }
  .flow-scene .audit-item.done .tx::after { width: 100%; }
  .flow-scene .audit-item.done .ac { color: #7a7d85; }
  .flow-scene .audit-panel .pf { margin-top: 8px; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 10.5px; letter-spacing: .05em; color: #0b5bb3; min-height: 14px; }
  /* process tabs above the scene */
  .flow-scene .tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
  .flow-scene .tab { font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink-soft, #6b6e76); background: #fff; border: 1px solid var(--line, #e6e6e1); border-radius: 999px; padding: 8px 14px 8px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color .2s, border-color .2s, background .2s; }
  .flow-scene .tab .n { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-faint, #9a9ea8); }
  .flow-scene .tab:hover { color: var(--ink, #17181a); border-color: #cfd2cc; }
  .flow-scene .tab.on { color: #fff; background: var(--ink, #17181a); border-color: var(--ink, #17181a); }
  .flow-scene .tab.on .n { color: rgba(255,255,255,.6); }
  /* transport: three small buttons in the scene's bottom-right corner */
  .flow-scene .transport { position: absolute; right: 14px; bottom: 12px; display: flex; gap: 4px; z-index: 2; }
  .flow-scene .tbtn { width: 26px; height: 26px; padding: 0; border-radius: 999px; border: 1px solid var(--line, #e6e6e1); background: #fff; color: var(--ink, #17181a); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  .flow-scene .tbtn svg { position: static; width: 10px; height: 10px; fill: currentColor; display: block; }
  .flow-scene .tbtn:hover { border-color: #17181a; }
  .flow-scene .tbtn.on { background: var(--ink, #17181a); color: #fff; border-color: var(--ink, #17181a); }
  .flow-scene .transport[hidden] { display: none; }
  /* caption bar */
  .flow-scene .beats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 18px; }
  .flow-scene .beat { background: none; border: 0; padding: 12px 0 0; text-align: left; cursor: pointer; font: inherit; color: var(--ink-faint, #9a9ea8); border-top: 2px solid var(--line, #e6e6e1); transition: color .3s, border-color .3s; position: relative; }
  .flow-scene .beat .n { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; display: block; }
  .flow-scene .beat .t { font-size: 15px; font-weight: 600; display: block; margin-top: 2px; }
  .flow-scene .beat.on { color: var(--ink, #17181a); border-color: var(--ink, #17181a); }
  .flow-scene .beat .bar { position: absolute; left: 0; top: -2px; height: 2px; width: 0; background: var(--accent, #0071e3); }
  .flow-scene .beats.paused .beat .bar { opacity: .35; }
  .flow-scene .beat-copy { min-height: 72px; margin: 20px auto 0; max-width: 680px; text-align: center; color: #6b6e76; font-size: 15px; line-height: 1.6; }
  .flow-scene .beat-copy strong { color: var(--ink, #17181a); font-weight: 600; }
  .flow-scene .beat-copy .h { display: block; font-size: 12px; font-family: var(--mono, ui-monospace, Menlo, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--accent, #0071e3); margin-bottom: 6px; }
  .flow-scene .beat-copy .h::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #0071e3); margin-right: 8px; vertical-align: 1px; }
  .flow-scene .fs-hint { text-align: left; font-size: 12.5px; color: #9a9ea8; }
  @media (max-width: 760px) { .flow-scene .beats { gap: 6px; } .flow-scene .beat .t { font-size: 12px; } .flow-scene .beat .n { font-size: 9px; } }
  @media (max-width: 760px) { .flow-scene .stage { aspect-ratio: 1180 / 760; } .flow-scene .audit-panel { width: 220px; right: 10px; top: 44px; font-size: 12px; } .flow-scene .beat-copy { font-size: 14px; } }