@import url('./tokens.css');

/* ── Scoped reset ── */
.framework-discover,
.framework-discover *,
.framework-discover *::before,
.framework-discover *::after {
 box-sizing: border-box;
}

.framework-discover {
 height: 100%;
 overflow: hidden;
 font-family: var(--qr-font);
 font-size: var(--qr-text-base);
 color: var(--qr-text);
 background: var(--qr-bg-deep);
 -webkit-font-smoothing: antialiased;
 touch-action: manipulation;
}

/* ── Layout ── */
.app {
 display: grid;
 grid-template-rows: auto 1fr;
 height: 100%;
 min-height: 0;
 width: 100%;
 position: relative;
}

/* ── Toolbar ── */
.toolbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: var(--qr-space-3) var(--qr-space-6);
 background: var(--glass-surface-strong);
 -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.4);
 backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.4);
 border-bottom: 1px solid var(--glass-border);
 z-index: 10;
 gap: var(--qr-space-4);
}

.toolbar__brand {
 display: flex;
 align-items: center;
 gap: var(--qr-space-3);
}

.toolbar__logo {
 font-size: var(--qr-text-sm);
 font-weight: 300;
 color: var(--qr-text-faint);
 letter-spacing: 0.06em;
 text-transform: uppercase;
}

.toolbar__client {
 font-size: var(--qr-text-lg);
 font-weight: 600;
 color: var(--qr-text);
}

.toolbar__separator {
 color: var(--qr-text-dim);
 font-weight: 300;
}

/* ── Dataset Picker ── */
.dataset-picker {
 position: relative;
}
.dataset-picker__current {
 background: none;
 border: none;
 font: inherit;
 font-size: var(--qr-text-lg);
 font-weight: 600;
 color: var(--qr-text);
 cursor: pointer;
 padding: var(--qr-space-1) var(--qr-space-2);
 border-radius: var(--qr-radius-sm);
 transition: background 0.15s;
}
.dataset-picker__current::after {
 content: '▾';
 margin-left: 0.35em;
 font-size: 0.7em;
 opacity: 0.4;
}
.dataset-picker__current:hover {
 background: var(--glass-surface);
}
.dataset-picker__menu {
 display: none;
 position: absolute;
 top: calc(100% + 6px);
 left: 0;
 min-width: 260px;
 background: var(--glass-surface-strong);
 -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.4);
 backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.4);
 border: 1px solid var(--glass-border);
 border-radius: var(--qr-radius-md);
 padding: var(--qr-space-1);
 list-style: none;
 margin: 0;
 z-index: 100;
 box-shadow: var(--glass-shadow-sm);
}
.dataset-picker--open .dataset-picker__menu {
 display: block;
}
.dataset-picker__item {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--qr-space-3);
 padding: var(--qr-space-2) var(--qr-space-3);
 border-radius: var(--qr-radius-sm);
 cursor: pointer;
 transition: background 0.12s;
}
.dataset-picker__item:hover {
 background: var(--glass-surface);
}
.dataset-picker__item--active {
 background: var(--glass-surface);
}
.dataset-picker__item--active .dataset-picker__label {
 color: var(--qr-primary);
}
.dataset-picker__label {
 font-size: var(--qr-text-sm);
 font-weight: 500;
 color: var(--qr-text);
}
.dataset-picker__industry {
 font-size: var(--qr-text-xs, 0.7rem);
 color: var(--qr-text-faint);
 white-space: nowrap;
}

/* ── Mode Tabs ── */
.mode-tabs {
 display: flex;
 gap: var(--qr-space-1);
 background: rgba(var(--glass-base), 0.4);
 border: 1px solid var(--glass-border);
 border-radius: var(--qr-radius-md);
 padding: var(--qr-space-1);
}

.mode-tab {
 all: unset;
 cursor: pointer;
 padding: var(--qr-space-2) var(--qr-space-4);
 border-radius: var(--qr-radius-sm);
 font-size: var(--qr-text-sm);
 font-weight: 500;
 color: var(--qr-text-muted);
 transition: all var(--qr-duration-fast) var(--qr-ease-out);
 white-space: nowrap;
}

.mode-tab:hover {
 color: var(--qr-text);
 background: var(--qr-bg-elevated);
}

.mode-tab[aria-selected="true"] {
 color: var(--qr-text);
 background: var(--qr-bg-surface);
 box-shadow: var(--shadow-xs);
}

.mode-tab__key {
 display: inline-block;
 margin-left: var(--qr-space-2);
 font-size: var(--qr-text-xs);
 font-family: var(--qr-font-mono);
 color: var(--qr-text-dim);
 padding: var(--qr-space-px) var(--qr-space-1);
 border: 1px solid var(--qr-border);
 border-radius: var(--qr-radius-sm);
}

/* ── Canvas Container ── */
.canvas-container {
 position: relative;
 width: 100%;
 height: 100%;
 overflow: hidden;
}

.canvas-container canvas {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

#particle-canvas {
 z-index: 0;
}

#main-canvas {
 z-index: 1;
}

/* ── Detail Panel ── */
.detail-panel {
 position: absolute;
 left: var(--qr-space-6);
 top: var(--qr-space-6);
 width: 320px;
 max-height: calc(100% - var(--qr-space-12));
 background: var(--glass-surface-strong);
 -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.4);
 backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.4);
 border: 1px solid var(--glass-border-bright);
 border-radius: var(--qr-radius-lg);
 box-shadow: var(--glass-shadow);
 padding: var(--qr-space-6);
 z-index: 5;
 overflow-y: auto;
 opacity: 0;
 transform: translateX(-20px);
 transition: opacity var(--qr-duration-base) var(--qr-ease-out),
 transform var(--qr-duration-base) var(--qr-ease-out);
 pointer-events: none;
}

.detail-panel.visible {
 opacity: 1;
 transform: translateX(0);
 pointer-events: all;
}

.detail-panel__close {
 all: unset;
 cursor: pointer;
 position: absolute;
 top: var(--qr-space-3);
 right: var(--qr-space-3);
 width: 28px;
 height: 28px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--qr-text-faint);
 border-radius: var(--qr-radius-sm);
 transition: background var(--qr-duration-fast) var(--qr-ease-out);
}

.detail-panel__close:hover {
 background: var(--qr-bg-elevated);
 color: var(--qr-text);
}

/* Drag handle (visible on mobile only) */
.detail-panel__handle {
 display: none;
}

.detail-panel__domain {
 font-size: var(--qr-text-xs);
 font-weight: 600;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 margin-bottom: var(--qr-space-2);
}

.detail-panel__title {
 font-size: var(--qr-text-xl);
 font-weight: 600;
 line-height: 1.3;
 margin-bottom: var(--qr-space-3);
}

.detail-panel__desc {
 font-size: var(--qr-text-sm);
 color: var(--qr-text-muted);
 line-height: 1.6;
 margin-bottom: var(--qr-space-6);
}

.detail-panel__section {
 margin-bottom: var(--qr-space-4);
}

.detail-panel__section-title {
 font-size: var(--qr-text-xs);
 font-weight: 600;
 color: var(--qr-text-faint);
 letter-spacing: 0.04em;
 text-transform: uppercase;
 margin-bottom: var(--qr-space-2);
}

.detail-panel__tags {
 display: flex;
 flex-wrap: wrap;
 gap: var(--qr-space-2);
}

.detail-panel__tag {
 font-size: var(--qr-text-xs);
 padding: var(--qr-space-0\.5) var(--qr-space-2);
 border-radius: var(--qr-radius-sm);
 background: var(--qr-bg-elevated);
 color: var(--qr-text-muted);
 font-family: var(--qr-font-mono);
}

/* ── Score Bars ── */
.score-bar {
 display: flex;
 align-items: center;
 gap: var(--qr-space-3);
 margin-bottom: var(--qr-space-2);
}

.score-bar__label {
 font-size: var(--qr-text-xs);
 color: var(--qr-text-faint);
 width: 100px;
 flex-shrink: 0;
}

.score-bar__track {
 flex: 1;
 height: 4px;
 background: var(--qr-bg-elevated);
 border-radius: 2px;
 overflow: hidden;
}

.score-bar__fill {
 height: 100%;
 border-radius: 2px;
 transition: width var(--qr-duration-slow) var(--qr-ease-out);
}

/* ── Minimap ── */
.minimap {
 position: absolute;
 bottom: var(--qr-space-4);
 right: var(--qr-space-4);
 width: 140px;
 height: 100px;
 background: var(--qr-bg-card);
 border: 1px solid var(--qr-border);
 border-radius: var(--qr-radius-md);
 z-index: 5;
 overflow: hidden;
 opacity: 0.7;
 transition: opacity var(--qr-duration-fast) var(--qr-ease-out);
}

.minimap:hover { opacity: 1; }

/* ── Breadcrumb ── */
.breadcrumb {
 position: absolute;
 bottom: var(--qr-space-4);
 left: var(--qr-space-6);
 display: flex;
 align-items: center;
 gap: var(--qr-space-2);
 font-size: var(--qr-text-sm);
 color: var(--qr-text-faint);
 z-index: 5;
}

.breadcrumb__item {
 cursor: pointer;
 transition: color var(--qr-duration-fast) var(--qr-ease-out);
}

.breadcrumb__item:hover { color: var(--qr-text); }

.breadcrumb__separator { color: var(--qr-text-dim); }

/* ── Tooltip ── */
.tooltip {
 position: absolute;
 background: var(--glass-surface-strong);
 -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
 backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
 border: 1px solid var(--glass-border);
 border-radius: var(--qr-radius-md);
 padding: var(--qr-space-2) var(--qr-space-3);
 font-size: var(--qr-text-sm);
 color: var(--qr-text);
 pointer-events: none;
 z-index: 20;
 white-space: nowrap;
 opacity: 0;
 transition: opacity var(--qr-duration-fast) var(--qr-ease-out);
 box-shadow: var(--glass-shadow-sm);
}

.tooltip.visible { opacity: 1; }

/* ── Journey Mode (overlay, rendered via JS) ── */
.journey-container {
 position: absolute;
 inset: 0;
 z-index: 2;
 display: flex;
 align-items: center;
 padding: var(--qr-space-8);
 overflow-x: auto;
 gap: var(--qr-space-4);
 scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch;
}

.journey-card {
 flex: 0 0 280px;
 background: var(--qr-bg-card);
 border: 1px solid var(--qr-border);
 border-radius: var(--qr-radius-lg);
 padding: var(--qr-space-6);
 scroll-snap-align: center;
 transition: border-color var(--qr-duration-fast) var(--qr-ease-out),
 box-shadow var(--qr-duration-fast) var(--qr-ease-out);
}

.journey-card:hover {
 border-color: var(--qr-border);
}

.journey-card.decision-point {
 border-width: 2px;
}

.journey-card__step-num {
 font-size: var(--qr-text-xs);
 font-weight: 600;
 color: var(--qr-text-dim);
 margin-bottom: var(--qr-space-2);
}

.journey-card__title {
 font-size: var(--qr-text-lg);
 font-weight: 600;
 margin-bottom: var(--qr-space-2);
}

.journey-card__actor {
 font-size: var(--qr-text-xs);
 font-weight: 500;
 margin-bottom: var(--qr-space-3);
}

.journey-card__desc {
 font-size: var(--qr-text-sm);
 color: var(--qr-text-muted);
 line-height: 1.6;
}

.journey-arrow {
 flex: 0 0 24px;
 color: var(--qr-text-dim);
 font-size: var(--qr-text-lg);
 text-align: center;
}

/* ── Matrix Mode ── */
.matrix-container {
 position: absolute;
 inset: 0;
 z-index: 2;
 padding: var(--qr-space-6);
 overflow: auto;
}

.matrix-table {
 width: 100%;
 border-collapse: separate;
 border-spacing: 0;
 font-size: var(--qr-text-sm);
}

.matrix-table th {
 text-align: left;
 font-size: var(--qr-text-xs);
 font-weight: 600;
 color: var(--qr-text-faint);
 letter-spacing: 0.04em;
 text-transform: uppercase;
 padding: var(--qr-space-3) var(--qr-space-4);
 border-bottom: 1px solid var(--qr-border);
 position: sticky;
 top: 0;
 background: var(--qr-bg-surface);
}

.matrix-table td {
 padding: var(--qr-space-3) var(--qr-space-4);
 border-bottom: 1px solid var(--qr-border-subtle);
 transition: background var(--qr-duration-fast) var(--qr-ease-out);
}

.matrix-table tr {
 cursor: pointer;
}

.matrix-table tr:hover td {
 background: var(--qr-bg-card);
}

.matrix-table tr.selected td {
 background: var(--qr-bg-elevated);
}

.matrix-cell--score {
 border-radius: var(--qr-radius-sm);
 text-align: center;
 font-weight: 600;
 font-family: var(--qr-font-mono);
}

/* ── Flow Mode (Hybrid HTML+SVG Journey Engine) ── */

.flow-container {
 position: absolute;
 inset: 0;
 z-index: 2;
 overflow: hidden;
 outline: none;
 touch-action: none;
}

.flow-wireframe-bg {
 position: absolute;
 inset: 0;
 z-index: 0;
 pointer-events: none;
}

.flow-viewport {
 position: absolute;
 inset: 0;
 z-index: 1;
 overflow: hidden;
}

.flow-panner {
 position: relative;
 transition: transform 600ms var(--qr-ease-out);
}

.flow-edges {
 pointer-events: none;
}

.flow-edge {
 transition: none;
}

.flow-nodes-layer {
 pointer-events: none;
}

/* ── Lane Backdrops ── */

.flow-lane-stripe {
 position: absolute;
 top: 0;
 width: 1px;
 transform: translateX(-0.5px);
 background: var(--lane-color);
 opacity: 0.06;
 pointer-events: none;
}

/* Gutter dividers between lanes */
.flow-lane-gutter {
 position: absolute;
 top: 0;
 width: 1px;
 transform: translateX(-0.5px);
 background: var(--qr-text-muted);
 opacity: 0.07;
 pointer-events: none;
}

/* ── Sticky Lane Header Bar ── */

.flow-lane-header-bar {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 2rem;
 z-index: 4;
 pointer-events: none;
 background: linear-gradient(to bottom, var(--qr-bg-deep) 40%, transparent);
}

.flow-lane-header-label {
 position: absolute;
 top: var(--qr-space-2);
 transform: translateX(-50%);
 font-size: var(--qr-text-2xs);
 font-weight: 700;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: color-mix(in srgb, var(--qr-text) 45%, transparent);
 white-space: nowrap;
 pointer-events: none;
 transition: left 600ms var(--qr-ease-out);
}

/* Gutter tick marks on header bar */
.flow-lane-gutter-tick {
 position: absolute;
 top: var(--qr-space-3);
 transform: translateX(-50%);
 width: 1px;
 height: 8px;
 background: color-mix(in srgb, var(--qr-text) 12%, transparent);
 pointer-events: none;
 transition: left 600ms var(--qr-ease-out);
}

/* ── Journey Headers ── */

.flow-journey-header {
 position: absolute;
 left: var(--qr-space-12);
 right: var(--qr-space-12);
 text-align: center;
 padding: var(--qr-space-4) var(--qr-space-6);
 background: var(--glass-surface-subtle);
 -webkit-backdrop-filter: blur(12px) saturate(1.1);
 backdrop-filter: blur(12px) saturate(1.1);
 border: 1px solid var(--glass-border);
 border-radius: var(--qr-radius-md);
 pointer-events: auto;
 transition: opacity 500ms var(--qr-ease-out), transform 500ms var(--qr-ease-out);
 transform: translateY(12px);
}

.flow-journey-header.flow-revealed {
 transform: translateY(0);
}

.flow-journey-header__title {
 font-size: var(--qr-text-lg);
 font-weight: 700;
 color: var(--qr-text);
 letter-spacing: -0.01em;
}

.flow-journey-header__sub {
 font-size: var(--qr-text-xs);
 color: var(--qr-text-faint);
 margin-top: var(--qr-space-1);
 letter-spacing: 0.02em;
}

/* ── Flow Nodes (HTML) ── */

.flow-node {
 position: absolute;
 transform: translate(-50%, -50%);
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: var(--qr-space-2);
 pointer-events: auto;
 cursor: pointer;
 transition: opacity 500ms var(--qr-ease-out), transform 500ms var(--qr-ease-out);
}

.flow-node:not(.flow-revealed) {
 transform: translate(-50%, -50%) scale(0.7);
}

.flow-node.flow-revealed {
 transform: translate(-50%, -50%) scale(1);
}

.flow-node__badge {
 font-size: var(--qr-text-2xs);
 font-weight: 600;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 white-space: nowrap;
}

/* stroke/fill system — stroke = domain, fill = emphasis */
.flow-node__shape {
 position: relative;
 width: 56px;
 height: 56px;
 border-radius: var(--qr-radius-md);
 background: color-mix(in srgb, var(--qr-bg-surface) 80%, transparent);
 border: 2px solid var(--node-color, var(--qr-info));
 display: flex;
 align-items: center;
 justify-content: center;
 transition: box-shadow 300ms var(--qr-ease-out),
 border-width 200ms var(--qr-ease-out);
}

/* Decision diamond — filled with domain color, larger */
.flow-node--decision .flow-node__shape {
 border-radius: var(--qr-radius-md);
 transform: rotate(45deg);
 width: 52px;
 height: 52px;
 background: var(--node-color, var(--qr-info));
 border-color: transparent;
}

/* Automation double ring */
.flow-node--auto .flow-node__shape {
 box-shadow: 0 0 0 3px var(--qr-bg-deep), 0 0 0 5px var(--node-color);
}

.flow-node__glow {
 position: absolute;
 inset: -20px;
 border-radius: 50%;
 background: var(--node-color);
 opacity: 0;
 filter: blur(16px);
 transition: opacity 300ms var(--qr-ease-out);
 pointer-events: none;
}

.flow-node--active .flow-node__glow {
 opacity: 0.2;
}

.flow-node--active .flow-node__shape {
 border-width: 3px;
 box-shadow: 0 0 24px color-mix(in srgb, var(--qr-text) 8%, transparent);
}

.flow-node--active.flow-node--decision .flow-node__shape {
 border-width: 0;
 box-shadow: 0 0 28px var(--node-color);
}

.flow-node__label {
 font-size: var(--qr-text-sm);
 font-weight: 600;
 color: var(--qr-text);
 text-align: center;
 max-width: 180px;
 line-height: 1.3;
}

.flow-node__systems {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: var(--qr-space-1);
 max-width: 200px;
}

.flow-node__system {
 font-size: var(--qr-text-2xs);
 font-weight: 500;
 padding: var(--qr-space-px) var(--qr-space-1\.5);
 border-radius: var(--qr-radius-sm);
 background: var(--qr-bg-elevated);
 color: var(--qr-text-muted);
 white-space: nowrap;
}

/* ── Decision Branch Arms ── */

.flow-node__branches {
 display: flex;
 gap: var(--qr-space-2);
 margin-top: var(--qr-space-1);
 opacity: 0;
 transform: translateY(-4px);
 transition: opacity 300ms var(--qr-ease-out) 200ms,
 transform 300ms var(--qr-ease-out) 200ms;
}

.flow-node.flow-revealed .flow-node__branches {
 opacity: 1;
 transform: translateY(0);
}

.flow-node__branch {
 all: unset;
 cursor: pointer;
 font-size: var(--qr-text-2xs);
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 padding: var(--qr-space-0\.5) var(--qr-space-2);
 border-radius: var(--qr-radius-sm);
 transition: background var(--qr-duration-fast) var(--qr-ease-out),
 color var(--qr-duration-fast) var(--qr-ease-out);
}

.flow-node__branch--happy {
 color: var(--qr-success);
 background: color-mix(in srgb, var(--qr-success) 12%, transparent);
}

.flow-node__branch--happy:hover {
 background: rgba(90, 140, 42, 0.25);
}

.flow-node__branch--exception {
 color: var(--qr-danger);
 background: rgba(196, 64, 64, 0.12);
}

.flow-node__branch--exception:hover {
 background: rgba(196, 64, 64, 0.25);
}

/* Fork outcome button */
.flow-node__branch--fork {
 color: var(--qr-warning);
 background: rgba(196, 150, 42, 0.12);
}

.flow-node__branch--fork:hover {
 background: color-mix(in srgb, var(--qr-warning) 25%, transparent);
}

/* Exit outcome button */
.flow-node__branch--exit {
 color: var(--qr-text-dim);
 background: color-mix(in srgb, var(--qr-text) 4%, transparent);
}

.flow-node__branch--exit:hover {
 background: color-mix(in srgb, var(--qr-text) 8%, transparent);
}

/* Multi-outcome wrapping */
.flow-node__branches--multi {
 flex-wrap: wrap;
 justify-content: center;
 max-width: 200px;
}

/* Decision tree game mode — selected/dimmed outcome buttons */
.flow-node__branch--selected {
 outline: 2px solid currentColor;
 outline-offset: 1px;
 opacity: 1;
 font-weight: 600;
}

.flow-node__branch--dimmed {
 opacity: 0.25;
 pointer-events: none;
 filter: saturate(0.3);
}

/* Branch target highlight */
.flow-node--branch-target .flow-node__shape {
 box-shadow: 0 0 32px var(--node-color);
 border-width: 3px;
}

/* ── Conditional Steps ── */

.flow-node--conditional-ghost {
 opacity: 0.2 !important;
 filter: saturate(0.3);
}

.flow-node--conditional-ghost .flow-node__shape {
 border-style: dashed;
}

.flow-node--conditional-ghost .flow-node__label {
 font-style: italic;
}

.flow-node--conditional-visible {
 opacity: 1 !important;
 filter: none;
}

.flow-node--conditional-visible .flow-node__shape {
 border-style: dashed;
 box-shadow: 0 0 16px var(--node-color);
}

/* ── Branch Edges ── */

.flow-edge--branch {
 transition: opacity var(--qr-duration-base) var(--qr-ease-out);
 pointer-events: none;
}

.flow-edge--active {
 stroke-width: 2.5 !important;
 opacity: 1 !important;
 filter: drop-shadow(0 0 6px currentColor);
}

/* Ghost branches — non-default paths during present mode */
.flow-edge--ghost {
 opacity: 0.15 !important;
 stroke-dasharray: 4 8 !important;
 animation: ghost-pulse 3s var(--qr-ease-in-out) infinite;
}

@keyframes ghost-pulse {
 0%, 100% { opacity: 0.1; }
 50% { opacity: 0.2; }
}

/* Upgraded ghosts in explore mode — full visibility */
.flow-edge--ghost-upgraded {
 opacity: 0.6 !important;
 animation: none;
}

/* ── Annotations ── */

.flow-annotation {
 position: absolute;
 transform: translateY(-50%);
 width: 180px;
 padding: var(--qr-space-3) var(--qr-space-4);
 background: var(--glass-surface);
 -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
 backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
 border: 1px solid var(--glass-border);
 border-radius: var(--qr-radius-md);
 border-left: 3px solid var(--ann-color, var(--qr-text-faint));
 box-shadow: var(--glass-shadow-sm);
 pointer-events: auto;
 transition: opacity 400ms var(--qr-ease-out), transform 400ms var(--qr-ease-out);
}

.flow-annotation--right {
 transform: translateY(-50%) translateX(0);
}

.flow-annotation--left {
 transform: translateY(-50%) translateX(-100%);
}

.flow-annotation:not(.flow-revealed) {
 transform: translateY(-50%) translateX(20px);
}

.flow-annotation--left:not(.flow-revealed) {
 transform: translateY(-50%) translateX(calc(-100% - 20px));
}

.flow-annotation.flow-revealed {
 /* restore correct position */
}

.flow-annotation--right.flow-revealed {
 transform: translateY(-50%) translateX(0);
}

.flow-annotation--left.flow-revealed {
 transform: translateY(-50%) translateX(-100%);
}

.flow-annotation__type {
 font-size: var(--qr-text-2xs);
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--ann-color);
 margin-bottom: var(--qr-space-1);
}

.flow-annotation__text {
 font-size: var(--qr-text-xs);
 color: var(--qr-text-muted);
 line-height: 1.5;
 margin: 0;
}

/* Type-specific annotation overrides */
.flow-annotation--pain { border-left-color: var(--qr-danger); }
.flow-annotation--automation { border-left-color: var(--qr-success); }
.flow-annotation--decision { border-left-color: var(--qr-info); }
.flow-annotation--escalation { border-left-color: var(--qr-warning); }
.flow-annotation--risk { border-left-color: var(--qr-danger); }
.flow-annotation--insight { border-left-color: var(--qr-domain-shipping); }
.flow-annotation--competitive { border-left-color: var(--qr-warning); }

/* ── Progress ── */

.flow-progress {
 position: absolute;
 bottom: var(--qr-space-6);
 left: 50%;
 transform: translateX(-50%);
 font-size: var(--qr-text-sm);
 font-family: var(--qr-font-mono);
 color: var(--qr-text-dim);
 z-index: 5;
 background: var(--glass-surface);
 -webkit-backdrop-filter: blur(12px) saturate(1.1);
 backdrop-filter: blur(12px) saturate(1.1);
 border: 1px solid var(--glass-border);
 border-radius: 999px;
 padding: var(--qr-space-2) var(--qr-space-4);
}

.flow-progress__current {
 color: var(--qr-text);
 font-weight: 600;
}

/* ── Start Overlay ── */

.flow-start {
 position: absolute;
 inset: 0;
 z-index: 10;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(var(--glass-base), 0.7);
 -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.3);
 backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.3);
 transition: opacity 500ms var(--qr-ease-out);
}

.flow-start--exiting {
 opacity: 0;
 pointer-events: none;
}

.flow-start__content {
 text-align: center;
 max-width: 480px;
 padding: var(--qr-space-8);
}

.flow-start__brand {
 font-size: var(--qr-text-xs);
 font-weight: 600;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--qr-text-faint);
}

.flow-start__title {
 font-size: var(--qr-text-2xl);
 font-weight: 700;
 color: var(--qr-text);
 margin: var(--qr-space-4) 0;
 letter-spacing: -0.02em;
 line-height: 1.1;
}

.flow-start__meta {
 font-size: var(--qr-text-sm);
 color: var(--qr-text-muted);
 margin-bottom: var(--qr-space-8);
 line-height: 1.5;
}

.flow-start__begin {
 all: unset;
 cursor: pointer;
 display: inline-block;
 padding: var(--qr-space-3) var(--qr-space-8);
 background: var(--qr-domain-sales);
 color: var(--fwk-ink);
 font-size: var(--qr-text-base);
 font-weight: 600;
 border-radius: var(--qr-radius-md);
 transition: transform var(--qr-duration-fast) var(--qr-ease-out),
 box-shadow var(--qr-duration-fast) var(--qr-ease-out);
}

.flow-start__begin:hover {
 transform: translateY(-1px);
 box-shadow: 0 8px 24px color-mix(in srgb, var(--qr-domain-sales) 30%, transparent);
}

.flow-start__begin:focus-visible {
 outline: 2px solid var(--qr-domain-sales);
 outline-offset: 4px;
}

.flow-start__hint {
 font-size: var(--qr-text-xs);
 color: var(--qr-text-dim);
 margin-top: var(--qr-space-6);
 letter-spacing: 0.02em;
}

/* ── Legend ── */

.flow-legend {
 position: absolute;
 bottom: var(--qr-space-6);
 right: var(--qr-space-6);
 z-index: 5;
 background: var(--glass-surface);
 -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
 backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
 border: 1px solid var(--glass-border);
 border-radius: var(--qr-radius-md);
 box-shadow: var(--glass-shadow-sm);
 min-width: 140px;
 overflow: hidden;
}

.flow-legend__toggle {
 all: unset;
 cursor: pointer;
 display: block;
 width: 100%;
 padding: var(--qr-space-2) var(--qr-space-3);
 font-size: var(--qr-text-xs);
 font-weight: 600;
 color: var(--qr-text-faint);
 letter-spacing: 0.04em;
 text-transform: uppercase;
 text-align: left;
}

.flow-legend__toggle:hover { color: var(--qr-text-muted); }

.flow-legend__body {
 padding: 0 var(--qr-space-3) var(--qr-space-3);
 transition: max-height var(--qr-duration-base) var(--qr-ease-out),
 opacity var(--qr-duration-base) var(--qr-ease-out);
 max-height: 300px;
 overflow: hidden;
}

.flow-legend__body--collapsed {
 max-height: 0;
 opacity: 0;
 padding-bottom: 0;
}

.flow-legend__section { margin-bottom: var(--qr-space-2); }
.flow-legend__section:last-child { margin-bottom: 0; }

.flow-legend__section-title {
 font-size: var(--qr-text-2xs);
 font-weight: 600;
 color: var(--qr-text-dim);
 letter-spacing: 0.06em;
 text-transform: uppercase;
 margin-bottom: var(--qr-space-1);
 padding-top: var(--qr-space-1);
 border-top: 1px solid var(--glass-border);
}

.flow-legend__section:first-child .flow-legend__section-title {
 border-top: none;
 padding-top: 0;
}

.flow-legend__item {
 display: flex;
 align-items: center;
 gap: var(--qr-space-2);
 padding: var(--qr-space-px) 0;
}

/* Domain dots: stroke-only rounded rect to match node treatment */
.flow-legend__dot {
 width: 10px;
 height: 10px;
 border-radius: 3px;
 background: transparent;
 border: 2px solid var(--dot-color);
 flex-shrink: 0;
}

.flow-legend__label {
 font-size: var(--qr-text-2xs);
 color: var(--qr-text-muted);
 transition: color var(--qr-duration-fast) var(--qr-ease-out);
}

.flow-legend__item--active .flow-legend__label {
 color: var(--qr-text);
}

.flow-legend__item--active .flow-legend__lane-mark {
 opacity: 1;
 background: color-mix(in srgb, var(--qr-text) 80%, transparent);
}

/* Lane marks: monochrome vertical bar */
.flow-legend__lane-mark {
 width: 3px;
 height: 14px;
 border-radius: var(--qr-space-px);
 background: color-mix(in srgb, var(--qr-text) 35%, transparent);
 flex-shrink: 0;
 margin: 0 var(--qr-space-1) 0 var(--qr-space-px);
}

/* Node style indicators — mirrors new stroke/fill system */
.flow-legend__indicator {
 width: 10px;
 height: 10px;
 border-radius: 3px;
 flex-shrink: 0;
 margin: 0 1px;
}

.flow-legend__indicator--auto {
 width: 8px;
 height: 8px;
 background: transparent;
 border: 1.5px solid var(--qr-info);
 box-shadow: 0 0 0 1.5px var(--qr-bg-deep), 0 0 0 3px var(--qr-info);
 margin: 0 2px;
}

.flow-legend__indicator--manual {
 background: transparent;
 border: 2px solid var(--qr-text-faint);
}

.flow-legend__indicator--partial {
 background: transparent;
 border: 1.5px dashed var(--qr-text-faint);
}

.flow-legend__indicator--decision {
 width: 9px;
 height: 9px;
 border-radius: 3px;
 transform: rotate(45deg);
 background: var(--qr-info);
 border: none;
 margin: 0 1.5px;
}

/* ── Coaching ── */

.flow-coaching {
 position: absolute;
 bottom: calc(var(--qr-space-6) + 2.5rem);
 left: 50%;
 transform: translateX(-50%) translateY(8px);
 z-index: 6;
 font-size: var(--qr-text-sm);
 color: var(--qr-text-muted);
 background: var(--glass-surface-strong);
 -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
 backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
 border: 1px solid var(--glass-border);
 border-radius: 999px;
 padding: var(--qr-space-2) var(--qr-space-4);
 white-space: nowrap;
 opacity: 0;
 transition: opacity var(--qr-duration-base) var(--qr-ease-out),
 transform var(--qr-duration-base) var(--qr-ease-out);
 pointer-events: none;
}

.flow-coaching.visible {
 opacity: 1;
 transform: translateX(-50%) translateY(0);
}

.flow-coaching span {
 display: inline-block;
 animation: coaching-bounce 1.5s var(--qr-ease-in-out) infinite;
}

@keyframes coaching-bounce {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(3px); }
}

/* ── Resume Button ── */

.flow-resume {
 all: unset;
 cursor: pointer;
 position: absolute;
 top: var(--qr-space-6);
 left: 50%;
 transform: translateX(-50%) translateY(-8px);
 z-index: 6;
 font-size: var(--qr-text-sm);
 font-weight: 600;
 color: var(--qr-text);
 background: var(--glass-surface-strong);
 -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
 backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
 border: 1px solid var(--glass-border-bright);
 border-radius: 999px;
 padding: var(--qr-space-2) var(--qr-space-6);
 opacity: 0;
 transition: opacity var(--qr-duration-base) var(--qr-ease-out),
 transform var(--qr-duration-base) var(--qr-ease-out);
 pointer-events: none;
}

.flow-resume.visible {
 opacity: 1;
 transform: translateX(-50%) translateY(0);
 pointer-events: auto;
}

.flow-resume:hover {
 background: var(--glass-surface);
 border-color: rgba(252, 248, 243, 0.18);
}

.flow-progress--explore {
 opacity: 0.4;
}

/* ── Explore mode cursor ── */

.flow-viewport {
 cursor: grab;
}

/* ── Partial automation ring ── */

.flow-node--partial .flow-node__shape::after {
 content: '';
 position: absolute;
 inset: -6px;
 border-radius: 18px;
 border: 1.5px dashed var(--node-color);
 opacity: 0.6;
}

/* ── Mode transition ── */
.mode-view {
 opacity: 0;
 transition: opacity var(--qr-duration-base) var(--qr-ease-out);
}

.mode-view.active {
 opacity: 1;
}

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) {
 .detail-panel,
 .tooltip,
 .mode-tab,
 .journey-card,
 .matrix-table td,
 .score-bar__fill,
 .mode-view {
 transition: none;
 }
}

:focus-visible {
 outline: 2px solid var(--qr-domain-sales);
 outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════════
 SOURCE MODE — YAML data view
 ══════════════════════════════════════════════════════════════════════════════ */

.source-mode {
 position: absolute;
 inset: 0;
 overflow-y: auto;
 opacity: 0;
 transition: opacity 250ms var(--qr-ease-out);
 z-index: 5;
 background: var(--qr-bg-deep);
}

.source-mode.source-visible {
 opacity: 1;
}

/* ── Header ── */

.source-header {
 padding: var(--qr-space-6) var(--qr-space-6) var(--qr-space-4);
 border-bottom: 1px solid var(--qr-border);
}

.source-header__title {
 font-size: var(--qr-text-xl);
 font-weight: 300;
 letter-spacing: 0.04em;
 color: var(--qr-text);
 margin-bottom: var(--qr-space-2);
}

.source-header__meta {
 display: flex;
 flex-wrap: wrap;
 gap: var(--qr-space-2);
 margin-bottom: var(--qr-space-2);
}

.source-tag {
 font-size: var(--qr-text-2xs);
 font-weight: 600;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 padding: var(--qr-space-0\.5) var(--qr-space-2);
 border-radius: var(--qr-radius-sm);
 background: color-mix(in srgb, var(--qr-text) 6%, transparent);
 color: var(--qr-text-muted);
}

.source-header__stats {
 font-size: var(--qr-text-xs);
 color: var(--qr-text-muted);
}

/* ── Layout ── */

.source-layout {
 display: grid;
 grid-template-columns: 200px 1fr;
 min-height: calc(100% - 120px);
}

/* ── Side nav ── */

.source-nav {
 position: sticky;
 top: 0;
 align-self: start;
 padding: var(--qr-space-4) var(--qr-space-3);
 border-right: 1px solid var(--qr-border);
 display: flex;
 flex-direction: column;
 gap: var(--qr-space-0\.5);
}

.source-nav__item {
 all: unset;
 cursor: pointer;
 font-size: var(--qr-text-xs);
 padding: var(--qr-space-1\.5) var(--qr-space-3);
 border-radius: var(--qr-radius-sm);
 color: var(--qr-text-muted);
 transition: background 150ms, color 150ms;
 display: flex;
 align-items: center;
 gap: var(--qr-space-1\.5);
}

.source-nav__item:hover {
 background: color-mix(in srgb, var(--qr-text) 6%, transparent);
 color: var(--qr-text);
}

.source-nav__icon {
 font-size: var(--qr-text-2xs);
 opacity: 0.5;
 width: 14px;
 text-align: center;
}

.source-nav__count {
 margin-left: auto;
 font-size: var(--qr-text-2xs);
 opacity: 0.4;
}

/* ── Body ── */

.source-body {
 padding: var(--qr-space-4) var(--qr-space-6);
 display: flex;
 flex-direction: column;
 gap: var(--qr-space-3);
}

/* ── Sections ── */

.source-section {
 border: 1px solid var(--qr-border);
 border-radius: var(--qr-radius-sm);
 overflow: hidden;
}

.source-section__header {
 display: flex;
 align-items: center;
 gap: var(--qr-space-2);
 padding: var(--qr-space-3) var(--qr-space-4);
 cursor: pointer;
 font-size: var(--qr-text-sm);
 font-weight: 600;
 letter-spacing: 0.02em;
 color: var(--qr-text);
 background: color-mix(in srgb, var(--qr-text) 3%, transparent);
 user-select: none;
 transition: background 150ms;
}

.source-section__header:hover {
 background: color-mix(in srgb, var(--qr-text) 6%, transparent);
}

.source-section__header::after {
 content: '▾';
 margin-left: auto;
 font-size: var(--qr-text-2xs);
 opacity: 0.4;
 transition: transform 200ms;
}

.source-section__header--collapsed::after {
 transform: rotate(-90deg);
}

.source-section__icon {
 font-size: 0.75rem;
 opacity: 0.5;
}

.source-section__count {
 font-weight: 400;
 opacity: 0.4;
}

.source-section__code {
 padding: var(--qr-space-4) var(--qr-space-6);
 font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
 font-size: 0.75rem;
 line-height: 1.65;
 color: var(--qr-text-muted);
 overflow-x: auto;
 white-space: pre;
 tab-size: 2;
 background: rgba(0, 0, 0, 0.2);
 border-top: 1px solid var(--qr-border);
}

/* ── Syntax highlighting ── */

.hl-key { color: var(--qr-domain-sales); }
.hl-colon { color: var(--qr-text-muted); opacity: 0.5; }
.hl-string { color: var(--qr-success); }
.hl-number { color: var(--qr-warning); }
.hl-bool { color: var(--qr-domain-shipping); }
.hl-null { opacity: 0.35; }
.hl-dash { color: var(--qr-domain-production); opacity: 0.6; }
.hl-bracket { opacity: 0.4; }

/* ══════════════════════════════════════════════════════════════════════════════
 MOBILE RESPONSIVE — ══════════════════════════════════════════════════════════════════════════════ */

/* ── Hamburger (hidden on desktop) ── */

.hamburger { display: none; }

/* ── Harlan Blur-Wipe Keyframes (adapted from Harlan menu) ── */

@keyframes blur-wipe-open {
 0% { clip-path: circle(0% at calc(100% - 28px) 28px);
 -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); }
 20% { clip-path: circle(8% at calc(100% - 28px) 28px);
 -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); }
 45% { clip-path: circle(40% at calc(100% - 28px) 28px);
 -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
 70% { clip-path: circle(75% at calc(100% - 28px) 28px);
 -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
 100% { clip-path: circle(150% at calc(100% - 28px) 28px);
 -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); }
}

@keyframes blur-wipe-close {
 0% { clip-path: circle(150% at calc(100% - 28px) 28px);
 -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); }
 100% { clip-path: circle(0% at calc(100% - 28px) 28px);
 -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
 visibility: hidden; }
}

@keyframes drawer-item-in {
 0% { opacity: 0; transform: translateY(16px); }
 100% { opacity: 1; transform: translateY(0); }
}

/* ── Blur-Wipe Overlay ── */

.blur-wipe {
 position: fixed;
 inset: 0;
 z-index: 50;
 background: rgba(var(--glass-base), 0.3);
 clip-path: circle(0% at calc(100% - 28px) 28px);
 visibility: hidden;
 pointer-events: none;
}

.blur-wipe--open {
 visibility: visible;
 pointer-events: auto;
 animation: blur-wipe-open 0.45s linear 0.06s both;
}

.blur-wipe--closing {
 animation: blur-wipe-close 0.5s cubic-bezier(0.55, 0, 1, 0.45) both;
}

/* ── Mobile Drawer ── */

.mobile-drawer {
 position: fixed;
 inset: 0;
 z-index: 51;
 display: none;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: var(--qr-space-8);
 pointer-events: none;
}

.mobile-drawer--open {
 display: flex;
 pointer-events: auto;
}

.mobile-drawer__item {
 all: unset;
 cursor: pointer;
 font-size: var(--qr-text-2xl);
 font-weight: 700;
 color: var(--qr-text);
 letter-spacing: -0.02em;
 opacity: 0;
 animation-name: drawer-item-in;
 animation-duration: 0.5s;
 animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 animation-fill-mode: both;
 animation-delay: calc(0.28s + (var(--menu-drawer-animation-index, 1) - 1) * 0.05s);
}

.mobile-drawer__item[aria-current="true"] {
 color: var(--qr-domain-sales);
}

.mobile-drawer__close {
 all: unset;
 cursor: pointer;
 position: absolute;
 top: var(--qr-space-8);
 right: var(--qr-space-6);
 width: 44px;
 height: 44px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: var(--qr-text-2xl);
 color: var(--qr-text-faint);
 -webkit-tap-highlight-color: transparent;
}

/* ── Detail Panel Annotations (mobile) ── */

.detail-annotation {
 border-left: 3px solid var(--qr-text-faint);
 padding-left: var(--qr-space-3);
 margin-bottom: var(--qr-space-3);
}

.detail-annotation__type {
 display: block;
 font-size: var(--qr-text-2xs);
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 margin-bottom: var(--qr-space-0\.5);
}

.detail-annotation__text {
 display: block;
 font-size: var(--qr-text-base);
 color: var(--qr-text-muted);
 line-height: 1.6;
}

/* ── Annotation Pip (node indicator, mobile-only) ── */

.flow-node__ann-pip {
 display: none;
}

/* ── Mobile Flow Navigation (Google Maps–style floating pill) ── */

.mobile-nav {
 display: none;
 position: fixed;
 bottom: var(--qr-space-6);
 left: 50%;
 transform: translateX(-50%);
 align-items: center;
 gap: var(--qr-space-3);
 z-index: 15;
 background: var(--glass-surface-strong);
 -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.4);
 backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.4);
 border: 1px solid var(--glass-border-bright);
 border-radius: var(--radius-pill);
 padding: var(--qr-space-2) var(--qr-space-3);
 box-shadow: var(--glass-shadow);
}

.mobile-nav__btn {
 all: unset;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 44px;
 height: 44px;
 border-radius: var(--radius-pill);
 color: var(--qr-text);
 transition: background var(--qr-duration-fast) var(--qr-ease-out);
 -webkit-tap-highlight-color: transparent;
}

.mobile-nav__btn:active {
 background: var(--qr-bg-elevated);
}

.mobile-nav__btn--primary {
 background: var(--qr-domain-sales);
 color: var(--fwk-ink);
}

.mobile-nav__btn--primary:active {
 opacity: 0.8;
}

.mobile-nav__progress {
 font-size: var(--qr-text-xs);
 font-family: var(--qr-font-mono);
 color: var(--qr-text-muted);
 white-space: nowrap;
 min-width: 56px;
 text-align: center;
}

/* ── Step Info Bar (mobile top label) ── */

.step-info {
 display: none;
 position: fixed;
 top: 48px;
 left: var(--qr-space-2);
 right: var(--qr-space-2);
 z-index: 12;
 align-items: center;
 gap: var(--qr-space-2);
 background: var(--glass-surface-strong);
 -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.4);
 backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.4);
 border: 1px solid var(--glass-border);
 border-radius: var(--qr-radius-md);
 padding: var(--qr-space-2) var(--qr-space-3);
 opacity: 0;
 transform: translateY(-8px);
 transition: opacity var(--qr-duration-base) var(--qr-ease-out),
 transform var(--qr-duration-base) var(--qr-ease-out);
 pointer-events: none;
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
}

.step-info__domain {
 font-size: var(--qr-text-2xs);
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 flex-shrink: 0;
}

.step-info__name {
 font-size: var(--qr-text-sm);
 font-weight: 600;
 color: var(--qr-text);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

/* Background blur when drawer open */
body.menu-open .app {
 filter: blur(8px) saturate(1.1);
 transition: filter 0.9s cubic-bezier(0.7, 0, 0.84, 0);
}

/* ── Mobile (<768px) ── */

@media (max-width: 767px) {

 /* Show hamburger, hide desktop tabs */
 .hamburger {
 all: unset;
 cursor: pointer;
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 5px;
 width: 32px;
 height: 32px;
 z-index: 60;
 position: relative;
 }

 .hamburger__bar {
 display: block;
 width: 20px;
 height: 2px;
 background: var(--qr-text);
 border-radius: var(--qr-space-px);
 transition: transform var(--qr-duration-fast) var(--qr-ease-out),
 opacity var(--qr-duration-fast) var(--qr-ease-out);
 }

 body.menu-open .hamburger__bar:nth-child(1) {
 transform: translateY(7px) rotate(45deg);
 }
 body.menu-open .hamburger__bar:nth-child(2) {
 opacity: 0;
 }
 body.menu-open .hamburger__bar:nth-child(3) {
 transform: translateY(-7px) rotate(-45deg);
 }

 .mode-tabs { display: none; }

 /* Show mobile flow nav */
 .mobile-nav--visible { display: flex; }

 /* Step info bar — visible on mobile */
 .step-info { display: flex; }
 .step-info--visible {
 opacity: 1;
 transform: translateY(0);
 pointer-events: auto;
 }

 /* Hide desktop progress pill (replaced by mobile nav) */
 .flow-progress { display: none; }

 /* Coaching hidden on mobile (nav bar is self-explanatory) */
 .flow-coaching { display: none; }

 /* Hide floating annotations on mobile (overflow 390px viewport) */
 .flow-annotation { display: none !important; }

 /* Annotation pip — colored dot on nodes that have insights */
 .flow-node__ann-pip {
 display: block;
 position: absolute;
 right: -2px;
 top: 50%;
 transform: translateY(-50%);
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background: var(--pip-color);
 box-shadow: 0 0 8px var(--pip-color);
 pointer-events: none;
 animation: pip-pulse 2s var(--qr-ease-in-out) infinite;
 }

 @keyframes pip-pulse {
 0%, 100% { opacity: 0.7; transform: translateY(-50%) scale(1); }
 50% { opacity: 1; transform: translateY(-50%) scale(1.3); }
 }

 /* Toolbar compact */
 .toolbar {
 padding: var(--qr-space-2) var(--qr-space-4);
 }

 .toolbar__client {
 font-size: var(--qr-text-base);
 }

 /* Detail panel → compact card above mobile nav pill */
 .detail-panel {
 left: var(--qr-space-2);
 right: var(--qr-space-2);
 top: auto;
 bottom: 76px;
 width: auto;
 max-height: 46vh;
 border-radius: var(--qr-radius-lg);
 transform: translateY(calc(100% + 76px));
 padding: var(--qr-space-3) var(--qr-space-4) var(--qr-space-6);
 }

 .detail-panel.visible {
 transform: translateY(0);
 }

 /* Drag handle — visible on mobile */
 .detail-panel__handle {
 display: block;
 width: 32px;
 height: 4px;
 background: var(--qr-text-dim);
 border-radius: 2px;
 margin: 0 auto var(--qr-space-3);
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
 }

 /* Bigger close button on mobile */
 .detail-panel__close {
 width: 44px;
 height: 44px;
 top: var(--qr-space-1);
 right: var(--qr-space-1);
 font-size: var(--qr-text-xl);
 }

 /* Hide fabricated analytics — show only narrative on mobile */
 .detail-panel__section:has(.score-bar) { display: none; }
 .detail-panel__section:has(.detail-panel__tags) { display: none; }

 /* Start overlay — clamp sizes */
 .flow-start__title {
 font-size: clamp(1.5rem, 6vw, 2.5rem);
 }

 .flow-start__content {
 padding: var(--qr-space-4);
 max-width: 100%;
 }

 .flow-start__meta {
 margin-bottom: var(--qr-space-4);
 }

 .flow-start__hint {
 display: none;
 }

 /* Coaching tooltip — wrap text */
 .flow-coaching {
 white-space: normal;
 max-width: 80vw;
 text-align: center;
 }

 /* Tooltip — wrap on mobile */
 .tooltip {
 white-space: normal;
 max-width: 80vw;
 }

 /* Journey cards — stack vertically */
 .journey-container {
 flex-direction: column;
 align-items: stretch;
 padding: var(--qr-space-4);
 overflow-x: hidden;
 overflow-y: auto;
 scroll-snap-type: y mandatory;
 }

 .journey-card {
 flex: 0 0 auto;
 width: 100%;
 scroll-snap-align: start;
 }

 .journey-arrow {
 transform: rotate(90deg);
 flex: 0 0 auto;
 align-self: center;
 }

 /* Journey headers — fit to viewport on mobile */
 .flow-journey-header {
 left: 50%;
 right: auto;
 width: calc(100vw - var(--qr-space-4) * 2);
 transform: translateX(-50%) translateY(12px);
 }

 .flow-journey-header.flow-revealed {
 transform: translateX(-50%) translateY(0);
 }

 .flow-journey-header__title {
 font-size: var(--qr-text-base);
 }

 .flow-journey-header__sub {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 }

 /* Hide minimap on mobile */
 .minimap { display: none; }

 /* Legend — 40×40 square icon (Google Maps style) */
 .flow-legend {
 right: var(--qr-space-3);
 bottom: 80px;
 min-width: 40px;
 width: 40px;
 border-radius: var(--qr-radius-md);
 overflow: visible;
 padding: 0;
 }

 .flow-legend__toggle {
 width: 40px;
 height: 40px;
 padding: 0;
 font-size: 0;
 line-height: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 box-sizing: border-box;
 }

 .flow-legend__toggle::before {
 content: '◉';
 font-size: var(--qr-text-lg);
 color: var(--qr-text-faint);
 }

 .flow-legend__toggle[aria-expanded="true"]::before {
 color: var(--qr-text);
 }

 /* Legend body pops out as overlay when expanded */
 .flow-legend__body {
 position: absolute;
 bottom: 48px;
 right: 0;
 min-width: 160px;
 background: var(--glass-surface-strong);
 -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.4);
 backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.4);
 border: 1px solid var(--glass-border);
 border-radius: var(--qr-radius-md);
 box-shadow: var(--glass-shadow);
 padding: 0 var(--qr-space-3) var(--qr-space-3);
 }

 /* Progress compact */
 .flow-progress {
 bottom: var(--qr-space-3);
 font-size: var(--qr-text-xs);
 padding: var(--qr-space-1) var(--qr-space-3);
 }

 /* Resume — don't overlap toolbar */
 .flow-resume {
 top: var(--qr-space-3);
 }

 /* Breadcrumb compact */
 .breadcrumb {
 left: var(--qr-space-3);
 bottom: var(--qr-space-3);
 font-size: var(--qr-text-xs);
 }

 /* Matrix — tighter padding */
 .matrix-container {
 padding: var(--qr-space-3);
 }

 /* Source mode (moved from standalone query) */
 .source-layout {
 grid-template-columns: 1fr;
 }

 .source-nav {
 position: static;
 flex-direction: row;
 flex-wrap: wrap;
 border-right: none;
 border-bottom: 1px solid var(--qr-border);
 padding: var(--qr-space-3);
 }
}

/* ── Architecture Mode ── */

.architecture-mode {
 position: absolute;
 inset: 0;
 overflow-y: auto;
 opacity: 0;
 transition: opacity 250ms var(--qr-ease-out);
 z-index: 5;
 background: var(--qr-bg-deep);
 padding: var(--qr-space-6);
}

.architecture-mode.arch-visible { opacity: 1; }

.arch-empty {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 height: 60vh;
 text-align: center;
 color: var(--qr-text-dim);
}

.arch-empty__title {
 font-size: var(--qr-text-xl);
 font-weight: 600;
 margin-bottom: var(--qr-space-2);
 color: var(--qr-text-faint);
}

.arch-empty__desc {
 font-size: var(--qr-text-sm);
 max-width: 400px;
}

.arch-header {
 max-width: 900px;
 margin: 0 auto var(--qr-space-6);
}

.arch-header__title {
 font-size: var(--qr-text-xl);
 font-weight: 700;
 letter-spacing: -0.02em;
}

.arch-header__stats {
 font-size: var(--qr-text-sm);
 color: var(--qr-text-faint);
 margin-top: var(--qr-space-1);
}

.arch-flow-list {
 max-width: 900px;
 margin: 0 auto;
}

.arch-journey-section {
 margin-bottom: var(--qr-space-8);
}

.arch-journey-title {
 font-size: var(--qr-text-lg);
 font-weight: 600;
 padding-bottom: var(--qr-space-3);
 border-bottom: 1px solid var(--glass-border);
 margin-bottom: var(--qr-space-4);
 letter-spacing: -0.01em;
}

.arch-flow-card {
 background: var(--glass-surface-subtle);
 -webkit-backdrop-filter: blur(8px);
 backdrop-filter: blur(8px);
 border: 1px solid var(--glass-border);
 border-left: 3px solid var(--qr-text-dim);
 border-radius: var(--qr-radius-md);
 padding: var(--qr-space-4);
 margin-bottom: var(--qr-space-3);
 cursor: pointer;
 transition: border-color 200ms, background 200ms;
}

.arch-flow-card:hover {
 border-color: var(--qr-text-dim);
 background: var(--glass-surface);
}

.arch-flow-card__route {
 display: flex;
 align-items: center;
 gap: var(--qr-space-2);
 font-size: var(--qr-text-sm);
 font-weight: 600;
 margin-bottom: var(--qr-space-1);
}

.arch-flow-card__actor {
 color: var(--qr-text);
}

.arch-flow-card__system {
 font-weight: 700;
}

.arch-flow-card__arrow {
 color: var(--qr-text-dim);
 font-size: var(--qr-text-xs);
}

.arch-flow-card__steps {
 display: flex;
 align-items: center;
 gap: var(--qr-space-1);
 font-size: var(--qr-text-xs);
 color: var(--qr-text-faint);
 margin-bottom: var(--qr-space-2);
}

.arch-flow-card__arrow-sm {
 color: var(--qr-text-dim);
}

.arch-flow-card__endpoint {
 display: flex;
 align-items: center;
 gap: var(--qr-space-2);
 margin-bottom: var(--qr-space-2);
}

.arch-flow-card__endpoint code {
 font-family: 'SF Mono', 'Fira Code', monospace;
 font-size: var(--qr-text-xs);
 color: var(--qr-text);
 background: var(--qr-bg-elevated);
 padding: var(--qr-space-1) var(--qr-space-2);
 border-radius: var(--qr-radius-sm);
}

.arch-flow-card__auth {
 font-size: var(--qr-text-xs);
 color: var(--qr-text-dim);
 background: var(--qr-bg-card);
 padding: var(--qr-space-1) var(--qr-space-2);
 border-radius: var(--qr-radius-sm);
}

.arch-flow-card__data {
 margin-bottom: var(--qr-space-2);
}

.arch-flow-card__dto {
 font-size: var(--qr-text-xs);
 color: var(--qr-text-faint);
 font-family: 'SF Mono', 'Fira Code', monospace;
 margin-bottom: var(--qr-space-1);
}

.arch-flow-card__dto-dir {
 color: var(--qr-text-dim);
 margin-right: var(--qr-space-1);
}

.arch-flow-card__meta {
 display: flex;
 flex-wrap: wrap;
 gap: var(--qr-space-2);
 font-size: var(--qr-text-xs);
}

.arch-flow-card__classification {
 text-transform: uppercase;
 letter-spacing: 0.05em;
 font-weight: 600;
}

.arch-flow-card__pii {
 color: var(--qr-danger);
}

.arch-flow-card__reg {
 color: var(--qr-warning);
 font-weight: 600;
}

.arch-flow-card__desc {
 font-size: var(--qr-text-xs);
 color: var(--qr-text-dim);
 margin-top: var(--qr-space-2);
}

/* ── Tablet (768px–1024px) ── */

@media (max-width: 1024px) {
 .mode-tab__key { display: none; }
}

@media (min-width: 768px) and (max-width: 1024px) {
 .detail-panel {
 width: 280px;
 }

 .flow-start__title {
 font-size: clamp(2rem, 5vw, 2.5rem);
 }

 /* Source mode responsive for tablet */
 .source-layout {
 grid-template-columns: 1fr;
 }

 .source-nav {
 position: static;
 flex-direction: row;
 flex-wrap: wrap;
 border-right: none;
 border-bottom: 1px solid var(--qr-border);
 padding: var(--qr-space-3);
 }
}