/* faz1/flow.css · middle panel (B3). Every selector starts with an f1f- class.
 * World units: the camera group is scaled by k; --f1f-iz = 1 / k keeps strokes and small labels at a constant screen size.
 * Zoom zones (set on .f1f-world from the node's rendered width): z0 < 40 px, z0b < 90 (L0), z1 < 120, z2 < 160, z3 (L1, L2 from 200 px),
 * z4 from 240 px, z5 from 360 px (the step's description).
 * Transitions: .f1f-node and .f1f-edge opacity 150 ms; .f1f-stage background-color and color 200 ms; .f1f-zoom opacity 150 ms.
 */
.f1f-root { overflow: hidden; cursor: grab; user-select: none; touch-action: none; }
.f1f-root:active { cursor: grabbing; }
.f1f-world { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; overflow: hidden; --f1f-iz: 1; }

/* lanes and bands */
.f1f-world .f1f-lane { fill: var(--pro-panel); stroke: var(--pro-line); stroke-width: calc(var(--f1f-iz) * 1px); }
.f1f-world .f1f-lane-odd { fill: var(--pro-soft); }
.f1f-world .f1f-lane.f1-cue { fill: var(--pro-focus); }
.f1f-world .f1f-band-bg { fill: transparent; stroke: none; }
.f1f-world .f1f-band-odd .f1f-band-bg { fill: color-mix(in srgb, var(--pro-accent) 3%, transparent); }
.f1f-world .f1f-band.f1-cue .f1f-band-bg { fill: color-mix(in srgb, var(--pro-accent) 8%, transparent); stroke: var(--pro-accent); }
/* band headers have their own row above the band's first nodes (flow.js spacing) and stay at the left edge of the view */
.f1f-world .f1f-band-label { fill: var(--pro-text2); font-family: var(--f1-sans); font-weight: 650; font-size: calc(var(--f1f-iz) * 12px); dominant-baseline: central; pointer-events: none; }
.f1f-world .f1f-band-lbg { fill: var(--pro-panel); fill-opacity: .9; stroke: none; pointer-events: auto; cursor: zoom-in; }
.f1f-world .f1f-band-lbg:hover { stroke: var(--pro-accent); stroke-width: calc(var(--f1f-iz) * 1px); }
.f1f-world .f1f-band.f1-cue .f1f-band-label { fill: var(--pro-accent); }

/* edges */
.f1f-world .f1f-edge { transition: opacity 150ms; }
.f1f-world .f1f-edge-line { fill: none; stroke: var(--edge); stroke-width: calc(var(--f1f-iz) * 2px); stroke-linejoin: round; }
.f1f-world .f1f-e-alt .f1f-edge-line { stroke: var(--pro-muted); stroke-width: calc(var(--f1f-iz) * 1.4px); }
.f1f-world .f1f-e-ist .f1f-edge-line { stroke: var(--st-crit); stroke-width: calc(var(--f1f-iz) * 1.4px); stroke-dasharray: calc(var(--f1f-iz) * 4px) calc(var(--f1f-iz) * 4px); }
/* 19 Oct 2026 afternoon: a lookup (bak) into a separate module (the payment step's legal check looking at the Hukuk modülü's
   records): dashed and muted, it is not a path the invoice takes */
.f1f-world .f1f-e-bak .f1f-edge-line { stroke: var(--pro-muted); stroke-width: calc(var(--f1f-iz) * 1.4px); stroke-dasharray: calc(var(--f1f-iz) * 2px) calc(var(--f1f-iz) * 4px); }
.f1f-world .f1f-edge.f1f-lit .f1f-edge-line { stroke: var(--pro-accent); stroke-width: calc(var(--f1f-iz) * 2.2px); }
.f1f-world .f1f-edge-hit { fill: none; stroke: transparent; stroke-width: calc(var(--f1f-iz) * 10px); pointer-events: stroke; }
/* edge labels sit on their line on a backing, at the first spot along the line that is clear of nodes, chips and headers */
.f1f-world .f1f-edge-label { fill: var(--pro-text2); font-family: var(--f1-sans); font-weight: 500; font-size: calc(var(--f1f-iz) * 10.5px); text-anchor: middle; dominant-baseline: central; pointer-events: none; display: none; }
.f1f-world .f1f-elbg { fill: var(--pro-panel); stroke: var(--pro-line); stroke-width: calc(var(--f1f-iz) * 1px); display: none; pointer-events: none; }
.f1f-world.f1f-L1 .f1f-edge.f1f-lit .f1f-edge-label, .f1f-world.f1f-L2 .f1f-edge-label, .f1f-world.f1f-L1 .f1f-edge.f1f-lit .f1f-elbg, .f1f-world.f1f-L2 .f1f-elbg { display: inline; }
.f1f-world .f1f-edge.f1f-label-off .f1f-edge-label, .f1f-world .f1f-edge.f1f-label-off .f1f-elbg { display: none; }
.f1f-world .f1f-edge.f1f-lit .f1f-elbg { stroke: var(--pro-accent); }
.f1f-world .f1f-edge.f1f-lit .f1f-edge-label { fill: var(--pro-accent); font-weight: 650; }
.f1f-world .f1f-edge.f1f-off { opacity: .35; }
.f1f-world .f1f-edge.f1-dim { opacity: .3; }
.f1f-world .f1f-ar-ana { fill: var(--edge); }
.f1f-world .f1f-ar-alt { fill: var(--pro-muted); }
.f1f-world .f1f-ar-ist { fill: var(--st-crit); }
.f1f-world .f1f-ar-lit { fill: var(--pro-accent); }

/* nodes */
.f1f-world .f1f-node { cursor: pointer; transition: opacity 150ms; }
.f1f-world .f1f-shape, .f1f-world .f1f-shape2 { fill: var(--pro-panel); stroke: var(--pro-line); stroke-width: calc(var(--f1f-iz) * 1.2px); }
.f1f-world .f1f-shape2 { fill: none; stroke: var(--pro-muted); }
.f1f-world .f1f-t-baslangic .f1f-shape { stroke: var(--pro-muted); }
.f1f-world .f1f-t-bitis .f1f-shape { stroke: var(--pro-muted); stroke-width: calc(var(--f1f-iz) * 1.6px); }
.f1f-world .f1f-t-destek .f1f-shape { fill: var(--pro-soft); stroke-dasharray: calc(var(--f1f-iz) * 3px) calc(var(--f1f-iz) * 3px); }
.f1f-world .f1f-exc .f1f-shape { stroke: var(--st-crit); stroke-dasharray: calc(var(--f1f-iz) * 5px) calc(var(--f1f-iz) * 3px); }
.f1f-world .f1f-node:hover .f1f-shape { stroke: var(--pro-accent); }
.f1f-world .f1f-node.f1f-done .f1f-shape { fill: color-mix(in srgb, var(--pro-green) 9%, var(--pro-panel)); stroke: color-mix(in srgb, var(--pro-green) 55%, var(--pro-line)); }
.f1f-world .f1f-node.f1-cue .f1f-shape { fill: var(--pro-focus); stroke: var(--pro-accent); stroke-width: calc(var(--f1f-iz) * 2.5px); }
.f1f-world .f1f-node.f1f-current .f1f-shape { stroke: var(--pro-accent); stroke-width: calc(var(--f1f-iz) * 3.2px); fill: var(--pro-focus); }
/* Leo 2026-10-17 night (H05o): a friction point of today's flow is a red block (a crit badge, flow-v1.js .f1f-crit); lit, it
   keeps its red and grows a thicker frame */
.f1f-world .f1f-node.f1f-crit .f1f-shape { fill: color-mix(in srgb, var(--st-crit) 12%, var(--pro-panel)); stroke: var(--st-crit); stroke-width: calc(var(--f1f-iz) * 2.4px); }
.f1f-world .f1f-node.f1f-crit.f1-cue .f1f-shape, .f1f-world .f1f-node.f1f-crit.f1f-current .f1f-shape { fill: color-mix(in srgb, var(--st-crit) 22%, var(--pro-panel)); stroke: var(--st-crit); stroke-width: calc(var(--f1f-iz) * 3.4px); }
.f1f-world .f1f-node.f1f-crit .f1f-title { color: color-mix(in srgb, var(--st-crit) 80%, var(--pro-ink)); }
.f1f-world .f1f-node.f1f-off { opacity: .35; }
.f1f-world .f1f-node.f1-dim { opacity: .4; }
.f1f-world .f1f-node.f1f-off.f1-dim { opacity: .25; }
.f1f-world .f1f-node.f1f-later-dash .f1f-shape { stroke-dasharray: calc(var(--f1f-iz) * 6px) calc(var(--f1f-iz) * 4px); stroke: var(--pro-muted); }
.f1f-world .f1f-tray { fill: none; stroke: none; pointer-events: none; }

.f1f-world .f1f-fo, .f1f-world .f1f-fo2, .f1f-world .f1f-sum-fo { overflow: visible; pointer-events: none; }
.f1f-world .f1f-html { width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 5px 30px 5px 14px; overflow: hidden; color: var(--pro-ink); font-family: var(--f1-sans); }
.f1f-world .f1f-title { font-weight: 550; line-height: 1.12; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.f1f-world .f1f-glyph { color: var(--pro-text2); margin-right: .3em; font-weight: 400; }
.f1f-world .f1f-glyph svg { width: .78em; height: .78em; vertical-align: -.05em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.f1f-world .f1f-glyph svg .f1f-gfill { fill: currentColor; stroke: none; }
.f1f-world .f1f-sub { font-size: 11.5px; line-height: 1.2; color: var(--pro-text2); overflow: hidden; display: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* the step's plain-language description (flow-descriptions.js): only close up (z5), where it replaces the sub line */
.f1f-world .f1f-desc { display: none; color: var(--pro-text2); font-weight: 400; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow-wrap: anywhere; }
.f1f-world .f1f-node.f1-cue .f1f-title, .f1f-world .f1f-node.f1f-current .f1f-title { color: var(--pro-accent); }
.f1f-world .f1f-chips { display: none; flex-wrap: wrap; gap: 2px 3px; font: 500 8.5px/1.25 var(--f1-sans); color: var(--pro-text2); }
.f1f-world .f1f-chip { border: .5px solid var(--pro-line); background: var(--pro-panel); border-radius: 3px; padding: 0 3px; white-space: nowrap; }
.f1f-world .f1f-chip-io { border-style: dashed; }
.f1f-world .f1f-chip.f1f-chip-off { display: none; }
.f1f-world .f1f-chip-batch { color: var(--pro-accent); border-color: var(--pro-accent); }
.f1f-world .f1f-id { fill: var(--pro-ink); font-weight: 650; font-family: var(--f1-sans); text-anchor: middle; dominant-baseline: central; display: none; pointer-events: none; }
.f1f-world .f1f-node.f1-cue .f1f-id, .f1f-world .f1f-node.f1f-current .f1f-id { fill: var(--pro-accent); }
.f1f-world .f1f-tick { display: none; }
.f1f-world .f1f-tick circle { fill: var(--pro-green); }
.f1f-world .f1f-tick path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.f1f-world .f1f-node.f1f-done .f1f-tick { display: inline; }

/* pills: mode tag (tags mode), "Sonra" tag, badges */
.f1f-world .f1f-tag, .f1f-world .f1f-badge { display: none; pointer-events: none; }
.f1f-world .f1f-node.f1f-has-tag .f1f-tag, .f1f-world .f1f-node.f1f-has-badge .f1f-badge { display: inline; }
/* the "Sonra" tag of a later-only node is part of its title line, so it can never cover the title */
.f1f-world .f1f-later { display: none; font-size: .62em; font-weight: 650; line-height: 1.25; color: var(--pro-text2); border: 1px dashed var(--pro-muted); border-radius: 6px; padding: 0 .4em; margin-right: .35em; vertical-align: .12em; }
.f1f-world .f1f-node.f1f-later-dash .f1f-later { display: inline-block; }
.f1f-world .f1f-tag-bg { fill: var(--pro-panel); stroke: var(--k-depend); stroke-width: calc(var(--f1f-iz) * 1px); }
.f1f-world .f1f-tag-text { fill: var(--k-depend); font-family: var(--f1-sans); font-weight: 650; dominant-baseline: central; }
.f1f-world .f1f-node[data-tagmode="bugun"] .f1f-tag-bg { stroke: var(--edge-branch); }
.f1f-world .f1f-node[data-tagmode="bugun"] .f1f-tag .f1f-tag-text { fill: color-mix(in srgb, var(--edge-branch) 60%, var(--pro-ink)); }
.f1f-world .f1f-node[data-tagmode="faz1"] .f1f-tag-bg { stroke: var(--pro-accent); }
.f1f-world .f1f-node[data-tagmode="faz1"] .f1f-tag .f1f-tag-text { fill: var(--pro-accent); }
.f1f-world .f1f-badge-bg { fill: var(--pro-accent); }
.f1f-world .f1f-badge[data-tone="warn"] .f1f-badge-bg { fill: var(--st-warn); }
.f1f-world .f1f-badge[data-tone="crit"] .f1f-badge-bg { fill: var(--st-crit); }
.f1f-world .f1f-badge[data-tone="ok"] .f1f-badge-bg { fill: var(--st-ok); }
.f1f-world .f1f-badge[data-tone="wait"] .f1f-badge-bg, .f1f-world .f1f-badge[data-tone="muted"] .f1f-badge-bg { fill: var(--st-wait); }
.f1f-world .f1f-badge-text { fill: #fff; font-family: var(--f1-sans); font-weight: 700; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.f1f-world .f1f-badge[data-tone="warn"] .f1f-badge-text { fill: #202630; }

/* zoom zones */
.f1f-world .f1f-tag-text, .f1f-world .f1f-badge-text { font-size: 13px; }
.f1f-world.f1f-z0 .f1f-tag-text, .f1f-world.f1f-z0 .f1f-badge-text { font-size: 80px; }
.f1f-world.f1f-z0 .f1f-tag, .f1f-world.f1f-z0 .f1f-badge { display: none !important; }
.f1f-world.f1f-z0b .f1f-tag-text, .f1f-world.f1f-z0b .f1f-badge-text { font-size: 30px; }
.f1f-world.f1f-z1 .f1f-tag-text, .f1f-world.f1f-z1 .f1f-badge-text { font-size: 22px; }
.f1f-world.f1f-z2 .f1f-tag-text, .f1f-world.f1f-z2 .f1f-badge-text { font-size: 17px; }
.f1f-world.f1f-z3 .f1f-tag-text, .f1f-world.f1f-z3 .f1f-badge-text { font-size: 11px; }
.f1f-world.f1f-z4 .f1f-tag-text, .f1f-world.f1f-z4 .f1f-badge-text, .f1f-world.f1f-z5 .f1f-tag-text, .f1f-world.f1f-z5 .f1f-badge-text { font-size: 8px; }
.f1f-world.f1f-z0 .f1f-fo, .f1f-world.f1f-z0b .f1f-fo { display: none; }
.f1f-world.f1f-z0b .f1f-id { display: inline; }
.f1f-world.f1f-z0 .f1f-node.f1f-done .f1f-tick, .f1f-world.f1f-z0b .f1f-node.f1f-done .f1f-tick { display: none; }
.f1f-world.f1f-z1 .f1f-title { font-size: 26px; -webkit-line-clamp: 1; }
.f1f-world.f1f-z2 .f1f-title { font-size: 20px; }
.f1f-world.f1f-z3 .f1f-title { font-size: 16px; }
.f1f-world.f1f-z3 .f1f-sub { -webkit-line-clamp: 1; }
.f1f-world.f1f-z4 .f1f-title { font-size: 12.5px; }
.f1f-world.f1f-z4 .f1f-sub { font-size: 9.5px; }
.f1f-world.f1f-z4 .f1f-chips { font-size: 7px; }
.f1f-world.f1f-z4 .f1f-html { padding: 4px 26px 4px 12px; }
.f1f-world.f1f-z1 .f1f-glyph, .f1f-world.f1f-z2 .f1f-glyph { display: none; }
.f1f-world.f1f-L2 .f1f-sub { display: -webkit-box; }
.f1f-world.f1f-L2 .f1f-title { -webkit-line-clamp: 2; }
.f1f-world.f1f-L2 .f1f-chips { display: flex; }
/* z5 (node 360 px and wider): title at most two lines, then the description in up to four lines; both fit the 64-unit box
   (3 + 2 x 9 x 1.12 + 1.5 + 4 x 6.2 x 1.28 + 3 = 59.4) */
.f1f-world.f1f-z5 .f1f-html { padding: 3px 24px 3px 11px; gap: 1.5px; justify-content: flex-start; }
.f1f-world.f1f-z5 .f1f-title { font-size: 9px; -webkit-line-clamp: 2; }
.f1f-world.f1f-z5.f1f-L2 .f1f-sub { display: none; }
.f1f-world.f1f-z5 .f1f-desc { display: -webkit-box; font-size: 6.2px; line-height: 1.28; }
.f1f-world.f1f-z5 .f1f-chips { font-size: 5px; }

/* collapsed module summaries */
.f1f-world .f1f-summary { cursor: pointer; }
.f1f-world .f1f-summary-bg { fill: var(--pro-soft); stroke: var(--pro-muted); stroke-width: calc(var(--f1f-iz) * 1.2px); stroke-dasharray: calc(var(--f1f-iz) * 6px) calc(var(--f1f-iz) * 4px); }
.f1f-world .f1f-summary.f1-cue .f1f-summary-bg { stroke: var(--pro-accent); fill: var(--pro-focus); }
.f1f-world .f1f-sum-html { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 16px; box-sizing: border-box; color: var(--pro-text2); font: 600 18px/1.15 var(--f1-sans); overflow: hidden; }
.f1f-world.f1f-z0 .f1f-sum-html, .f1f-world.f1f-z0b .f1f-sum-html { font-size: 44px; }
.f1f-world.f1f-z1 .f1f-sum-html { font-size: 28px; }
/* a folded module: its stages side by side as numbered boxes (Leo 2026-10-14 evening) */
.f1f-world .f1f-sum-html.f1f-sum-stages { display: flex; align-items: stretch; justify-content: stretch; gap: 0.5em; padding: 0.35em 0.5em; }
.f1f-world .f1f-sum-st { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 0.4em; padding: 0 0.55em; border-radius: 0.5em; background: var(--pro-panel); border: 1px solid var(--pro-line); color: var(--pro-ink); font-size: 1.02em; font-weight: 600; line-height: 1.1; text-align: left; overflow: hidden; }
.f1f-world .f1f-sum-st b { flex: none; width: 1.45em; height: 1.45em; border-radius: 50%; display: grid; place-items: center; background: var(--pro-soft); color: var(--pro-text2); font-size: 0.85em; }
.f1f-world .f1f-sum-st span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.4; }   /* one line; the full name is the chip title */
.f1f-world .f1f-summary.f1-cue .f1f-sum-st { border-color: color-mix(in srgb, var(--pro-accent) 45%, var(--pro-line)); }

.f1f-world.f1f-z0 .f1f-edge-line { stroke-width: calc(var(--f1f-iz) * 1px); }
.f1f-world.f1f-z0 .f1f-e-ist .f1f-edge-line, .f1f-world.f1f-z0 .f1f-e-alt .f1f-edge-line, .f1f-world.f1f-z0 .f1f-e-bak .f1f-edge-line { stroke-width: calc(var(--f1f-iz) * .8px); opacity: .7; }
.f1f-world.f1f-z0 .f1f-edge.f1f-lit .f1f-edge-line { stroke-width: calc(var(--f1f-iz) * 2px); opacity: 1; }

/* far zoom: lit and current nodes are filled and keep a constant-size outline of their own rectangle; tagged nodes take
   their tag colour. Leo 2026-10-17 (H25c, node:A170): no extra circle ring around a node, only its rectangle lights. */
.f1f-world .f1f-halo { display: none !important; }
.f1f-world.f1f-z0 .f1f-node.f1-cue .f1f-shape, .f1f-world.f1f-z0 .f1f-node.f1f-current .f1f-shape,
.f1f-world.f1f-z0b .f1f-node.f1f-current .f1f-shape { stroke: var(--pro-accent); stroke-width: calc(var(--f1f-iz) * 3px); }
.f1f-world.f1f-z0 .f1f-node.f1-cue .f1f-shape, .f1f-world.f1f-z0 .f1f-node.f1f-current .f1f-shape { fill: var(--pro-accent); }
.f1f-world.f1f-z0 .f1f-node[data-tagmode="sonra"]:not(.f1-cue) .f1f-shape, .f1f-world.f1f-z0 .f1f-node[data-tagmode="all"]:not(.f1-cue) .f1f-shape { fill: color-mix(in srgb, var(--k-depend) 30%, var(--pro-panel)); }
.f1f-world.f1f-z0 .f1f-node[data-tagmode="faz1"]:not(.f1-cue) .f1f-shape { fill: color-mix(in srgb, var(--pro-accent) 25%, var(--pro-panel)); }
.f1f-world.f1f-z0 .f1f-node[data-tagmode="bugun"]:not(.f1-cue) .f1f-shape { fill: color-mix(in srgb, var(--edge-branch) 35%, var(--pro-panel)); }

/* transient walk token */
.f1f-world .f1f-walk { fill: var(--pro-accent); stroke: var(--pro-panel); stroke-width: calc(var(--f1f-iz) * 2px); r: calc(var(--f1f-iz) * 6px); }

/* pinned lane header */
.f1f-lanes { position: absolute; left: 0; top: 0; right: 0; height: 30px; background: color-mix(in srgb, var(--pro-panel) 94%, transparent); border-bottom: 1px solid var(--pro-line); overflow: hidden; z-index: 2; pointer-events: none; }
.f1f-lanehead { position: absolute; left: 0; top: 0; height: 30px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; font-size: 12px; color: var(--pro-text2); white-space: nowrap; overflow: hidden; border-right: 1px solid var(--pro-line); pointer-events: auto; }
.f1f-lanehead b { font-weight: 650; color: var(--pro-ink); overflow: hidden; text-overflow: ellipsis; }
.f1f-lanehead .f1f-lane-id { display: none; font-family: var(--f1-mono); font-size: 11px; }
/* each header shows what fits its lane: the name, the lane id (or its first letter), or nothing (flow.js fitLaneHeads) */
.f1f-lanehead[data-fit="id"] b, .f1f-lanehead[data-fit="none"] b { display: none; }
.f1f-lanehead[data-fit="id"] .f1f-lane-id { display: inline; }
.f1f-lanehead[data-fit="id"], .f1f-lanehead[data-fit="none"] { padding: 0; }
.f1f-lanehead.f1-cue { background: var(--pro-focus); }
.f1f-lanehead.f1-cue b { color: var(--pro-accent); }

/* rollout band (SPEC S42) */
.f1f-rollout { position: absolute; left: 14px; right: 14px; top: 40px; height: 76px; z-index: 2; display: flex; gap: 10px; }
.f1f-stage { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--pro-line); background: var(--pro-panel); box-shadow: var(--f1-shadow); font-size: 12px; color: var(--pro-text2); cursor: pointer; transition: background-color 200ms, color 200ms; }
.f1f-stage-head { display: flex; align-items: center; gap: 6px; color: var(--pro-ink); font-size: 13.5px; margin-bottom: 3px; }
.f1f-stage-sub { line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.f1f-stage.f1f-tone-next { border-style: solid; }
.f1f-stage.f1f-tone-later { border-style: dashed; background: var(--pro-soft); opacity: .78; }
.f1f-stage.f1f-stage-lit { background: var(--pro-accent); border-color: var(--pro-accent); color: rgba(255,255,255,.88); }
.f1f-stage.f1f-stage-lit .f1f-stage-head { color: #fff; }
.f1f-stage.f1-cue { outline: 2px solid var(--pro-accent); outline-offset: 2px; }
.f1f-lock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; display: block; }
:root[data-film-theme="dark"] .f1f-stage.f1f-stage-lit { color: rgba(16,19,24,.8); }
:root[data-film-theme="dark"] .f1f-stage.f1f-stage-lit .f1f-stage-head { color: #101318; }

/* zoom buttons (bottom left of the panel; shown while the pointer is over the panel or a button has focus) */
.f1f-zoom { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: flex; flex-direction: column; gap: 4px; opacity: 0; transition: opacity 150ms; }
.f1f-root:hover .f1f-zoom, .f1f-zoom:focus-within { opacity: 1; }
.f1f-zoom button { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--pro-line); background: var(--pro-panel); color: var(--pro-ink); box-shadow: var(--f1-shadow); cursor: pointer; }
.f1f-zoom button:hover { border-color: var(--pro-accent); color: var(--pro-accent); }
.f1f-zoom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* layer switch in the panel header */
.f1f-layers button { min-width: 52px; }
.f1f-world.f1f-z0 .f1f-sum-st, .f1f-world.f1f-z0b .f1f-sum-st { font-size: 0.78em; }   /* zoomed far out the module text is large; stage names stay inside their boxes */
/* a folded module's stage box the story names (stage:<id> in flow.highlight, Leo 2026-10-16 H04o) */
.f1f-sum-st.f1-cue { outline: 2.5px solid var(--pro-accent); outline-offset: 1px; background: var(--pro-focus); color: var(--pro-accent); }
/* the summary (every module folded; Leo 2026-10-16 H03a, 17 Oct H06o, 17 Oct evening H04o): one continuous diagram, the
   modules as cards in one column or one row (flow-v1.js vlayout), never split. A card is the module band (its rect, round,
   with the title in its own row) and the stages inside it as boxes of one height, styled like the steps of the detailed
   flow; the arrows between cards are flow arrows. The support module (Destek) is dashed and has no arrow. */
.f1f-world.f1f-vsum .f1f-lanebg { display: none; }
.f1f-lanes.f1f-vsum { visibility: hidden; }
.f1f-world.f1f-vsum .f1f-band .f1f-band-bg { fill: color-mix(in srgb, var(--pro-accent) 4%, var(--pro-panel)); stroke: var(--pro-line); stroke-width: calc(var(--f1f-iz) * 1.2px); }
.f1f-world.f1f-vsum .f1f-band.f1f-band-support .f1f-band-bg { fill: var(--pro-soft); stroke: var(--pro-muted); stroke-dasharray: calc(var(--f1f-iz) * 6px) calc(var(--f1f-iz) * 4px); }
.f1f-world.f1f-vsum .f1f-band.f1-cue .f1f-band-bg { fill: color-mix(in srgb, var(--pro-accent) 9%, var(--pro-panel)); stroke: var(--pro-accent); stroke-width: calc(var(--f1f-iz) * 2px); }
.f1f-world.f1f-vsum .f1f-band-label { fill: var(--pro-ink); }
.f1f-world.f1f-vsum .f1f-band.f1f-band-support .f1f-band-label { fill: var(--pro-text2); }
.f1f-world.f1f-vsum .f1f-band.f1-cue .f1f-band-label { fill: var(--pro-accent); }
.f1f-world.f1f-vsum .f1f-band-lbg { fill-opacity: 0; }
.f1f-world.f1f-vsum .f1f-summary-bg { display: none; }
.f1f-world.f1f-vsum .f1f-sum-html.f1f-sum-stages { flex-direction: column; justify-content: flex-start; gap: 4px; padding: 0; }
.f1f-world.f1f-vsum .f1f-sum-st { flex: none; height: var(--f1f-sum-sh, 31px); box-sizing: border-box; font-size: 19px; gap: 8px; padding: 0 10px; border-radius: 9px; }
.f1f-world.f1f-vsum .f1f-sum-st span { white-space: normal; text-overflow: clip; line-height: 1.18; padding: 2px 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.f1f-world.f1f-vsum .f1f-summary.f1f-sum-support .f1f-sum-st { color: var(--pro-text2); background: color-mix(in srgb, var(--pro-panel) 70%, var(--pro-soft)); }
.f1f-world .f1f-sum-arrow { fill: none; stroke: var(--edge); stroke-width: calc(var(--f1f-iz) * 2px); stroke-linecap: round; stroke-linejoin: round; }
/* Leo 2026-10-18 (H03d): a module's summary beside its card (frame.flow.ozet; flow-v1.js ozRoom, ozPlace). World units like
   the card (the font size is set per label); muted, the lit module's label in the accent colour and bold. */
.f1f-world .f1f-oz { pointer-events: none; }
.f1f-world .f1f-oz-t { fill: var(--pro-text2); font-family: var(--f1-sans); font-weight: 500; }
.f1f-world .f1f-oz.f1-cue .f1f-oz-t { fill: var(--pro-accent); font-weight: 650; }
/* beside the whole detailed flow: a thin bracket along the module's rows (constant screen width) */
.f1f-world .f1f-oz-br { fill: none; stroke: var(--pro-muted); stroke-width: calc(var(--f1f-iz) * 1.4px); stroke-linejoin: round; }
.f1f-world .f1f-oz.f1-cue .f1f-oz-br { stroke: var(--pro-accent); stroke-width: calc(var(--f1f-iz) * 2px); }
/* (the small map "Akışın tamamı" and the Adımlar card are one card since 17 Oct evening: #f1-nav in faz1/faz1.css) */