/* 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; } }

/* Article variant (2026-10-18): the scene as a resource article's main image,
   one column, the step story under the drawing. */
.article-flow { max-width: 680px; width: calc(100% - 48px); margin: 0 auto 40px; }
.flow-scene.fs-article { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.flow-scene.fs-article .tabs, .flow-scene.fs-article .beats, .flow-scene.fs-article .fs-hint { display: none; }
.flow-scene.fs-article .stage { grid-column: 1; border-radius: 18px; }
.flow-scene.fs-article .fs-aside { grid-column: 1; grid-row: auto; height: auto; min-height: 0; max-height: none; overflow: visible; }
/* flow-scene.js puts the panel in a slot as tall as the tallest story text, so the page
   below never moves; a longer hover text grows the panel over the article instead */
.flow-scene.fs-article .fs-aside-slot { grid-column: 1; position: relative; z-index: 3; }
.flow-scene.fs-article .fs-aside-slot > .fs-aside { position: absolute; left: 0; right: 0; top: 0; min-height: 100%; transition: box-shadow .2s; }
.flow-scene.fs-article .fs-aside.fs-over { box-shadow: 0 14px 36px rgba(23, 24, 26, .12); }
.flow-scene.fs-article .fs-aside .beat-copy { font-size: 14px; }
@media (max-width: 600px) { .article-flow { width: calc(100% - 32px); } }

/* A brand frame around the article scene (2026-10-19): a 3px ring in the
   platform's atmosphere image (the same ones as the article cards). The image
   is clipped and positioned to the border box, so it fills the ring with no
   seam at the corners; the inside keeps the scene's paper colour. */
.article-flow[class*="brand-"] .flow-scene.fs-article .stage { border: 3px solid transparent; border-radius: 18px; }
.article-flow.brand-googleanalytics .flow-scene.fs-article .stage { background: linear-gradient(#fbfbf9, #fbfbf9) padding-box, #f0a830 url(../assets/atmos/brand-googleanalytics.jpg) border-box center / cover no-repeat; }
.article-flow.brand-googleads .flow-scene.fs-article .stage { background: linear-gradient(#fbfbf9, #fbfbf9) padding-box, #4285f4 url(../assets/atmos/brand-googleads.jpg) border-box center / cover no-repeat; }
.article-flow.brand-googletagmanager .flow-scene.fs-article .stage { background: linear-gradient(#fbfbf9, #fbfbf9) padding-box, url(../assets/atmos/brand-googletagmanager.jpg) border-box center / cover no-repeat; }
.article-flow.brand-meta .flow-scene.fs-article .stage { background: linear-gradient(#fbfbf9, #fbfbf9) padding-box, #0866ff url(../assets/atmos/brand-meta.jpg) border-box center / cover no-repeat; }
.article-flow.brand-tiktok .flow-scene.fs-article .stage { background: linear-gradient(#fbfbf9, #fbfbf9) padding-box, #fe2c55 url(../assets/atmos/brand-tiktok.jpg) border-box center / cover no-repeat; }
.article-flow.brand-pinterest .flow-scene.fs-article .stage { background: linear-gradient(#fbfbf9, #fbfbf9) padding-box, #e60023 url(../assets/atmos/brand-pinterest.jpg) border-box center / cover no-repeat; }
.article-flow.brand-snapchat .flow-scene.fs-article .stage { background: linear-gradient(#fbfbf9, #fbfbf9) padding-box, #fffc00 url(../assets/atmos/brand-snapchat.jpg) border-box center / cover no-repeat; }
.article-flow.brand-microsoftbing .flow-scene.fs-article .stage { background: linear-gradient(#fbfbf9, #fbfbf9) padding-box, #0078d4 url(../assets/atmos/brand-microsoftbing.jpg) border-box center / cover no-repeat; }
.article-flow.brand-linkedin .flow-scene.fs-article .stage { background: linear-gradient(#fbfbf9, #fbfbf9) padding-box, #0a66c2 url(../assets/atmos/brand-linkedin.jpg) border-box center / cover no-repeat; }
.article-flow.brand-chatgpt .flow-scene.fs-article .stage { background: linear-gradient(#fbfbf9, #fbfbf9) padding-box, #10a37f url(../assets/atmos/brand-chatgpt.jpg) border-box center / cover no-repeat; }
.article-flow.brand-measurebase .flow-scene.fs-article .stage { background: linear-gradient(#fbfbf9, #fbfbf9) padding-box, #0071e3 url(../assets/atmos/brand-measurebase.jpg) border-box center / cover no-repeat; }
/* The helper line above the article scene (2026-10-19). */
.flow-scene.fs-article .fs-article-hint { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft, #55585e); }
.flow-scene.fs-article .fs-article-hint svg { flex: none; margin-top: 3px; color: var(--accent, #0071e3); }

/* Homepage: the scene as one composed object (owner, 2026-10-25: the tabs,
   scene, story card and hint read as four loose parts). One white card: the
   tabs in its top bar, the scene and its story side by side split by a
   hairline, the hint as a quiet caption under the scene. */
#platform .flow-scene { grid-template-columns: minmax(0, 1fr) 320px; gap: 0; background: #fff; border: 1px solid var(--line, #e6e6e1); border-radius: 26px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(23, 24, 26, .04), 0 24px 60px -32px rgba(23, 24, 26, .22); }
#platform .flow-scene .tabs { grid-column: 1 / -1; grid-row: 1; justify-content: flex-start; gap: 4px; margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--line, #e6e6e1); background: #fff; }
#platform .flow-scene .tab { border-color: transparent; background: transparent; padding: 7px 13px 7px 10px; }
#platform .flow-scene .tab:hover { background: rgba(23, 24, 26, .05); border-color: transparent; }
#platform .flow-scene .tab.on { background: var(--ink, #17181a); border-color: var(--ink, #17181a); }
#platform .flow-scene .stage { grid-column: 1; grid-row: 2; border: 0; border-radius: 0; }
#platform .flow-scene .fs-aside { grid-column: 2; grid-row: 2 / span 2; border: 0; border-left: 1px solid var(--line, #e6e6e1); border-radius: 0; padding: 26px 24px 22px; }
#platform .flow-scene .fs-hint { grid-column: 1; grid-row: 3; padding: 0 22px 18px; background: #fbfbf9; font-size: 12.5px; }
#platform .flow-scene .beats { grid-column: 1 / -1; }
#platform .section-header + .flow-scene { margin-top: -8px; }
@media (max-width: 900px) {
  #platform .flow-scene { grid-template-columns: 1fr; border-radius: 22px; }
  #platform .flow-scene .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 10px; }
  #platform .flow-scene .tabs::-webkit-scrollbar { display: none; }
  #platform .flow-scene .tab { flex: none; }
  #platform .flow-scene .stage { grid-row: 2; }
  #platform .flow-scene .fs-hint { grid-row: 3; padding: 0 16px 14px; }
  #platform .flow-scene .fs-aside { grid-column: 1; grid-row: 4; border-left: 0; border-top: 1px solid var(--line, #e6e6e1); padding: 20px 18px; max-height: none; }
}
@media (hover: none) { #platform .flow-scene .fs-hint { display: none; } }