/* Order Flow (static/js/flow.js). Geometry is computed in JS; this file is the look. */
.flow { position: relative; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card-sheen), var(--surface); box-shadow: var(--shadow-2); overflow: hidden; min-width: 0; }
.fl-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.fl-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: wrap; }
.fl-h { font-size: 15px; font-weight: 800; letter-spacing: -.03em; }
.fl-sub { font-size: 12px; display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fl-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); display: inline-block; }
.flow.is-live .fl-live { background: var(--bull); box-shadow: 0 0 0 0 rgba(30, 230, 154, .6); animation: pulse 2s infinite; }
.fl-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fl-ctl select.input { height: 30px; padding: 0 28px 0 10px; font-size: 12px; }
.fl-stage { position: relative; width: 100%; overflow: hidden; background: radial-gradient(70% 60% at 18% 50%, rgba(124, 124, 255, .035), transparent 70%); }
:root[data-theme="light"] .fl-stage { background: none; }
.fl-stage > canvas, .fl-stage > svg { position: absolute; left: 0; top: 0; }
.fl-bg { z-index: 0; } .fl-paths { z-index: 1; } .fl-wires { z-index: 2; pointer-events: none; } .fl-cards { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.fl-fx { z-index: 4; pointer-events: none; } .fl-hit { position: absolute; z-index: 5; cursor: crosshair; }
.fl-breadth, .fl-axis-y, .fl-axis-x, .fl-counter { z-index: 6; position: absolute; }
.fl-ladder { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.fl-pop { z-index: 9; }
.fl-msg { position: absolute; inset: 0; z-index: 8; display: none; place-items: center; }

/* breadth strip */
.fl-breadth { display: flex; align-items: center; gap: 14px; height: 50px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 80%, transparent); }
.fb-l { display: flex; flex-direction: column; gap: 1px; min-width: 96px; flex: none; cursor: help; }
.fb-l b { font-size: 14px; } .fb-t { font-size: 10px; line-height: 1.2; white-space: nowrap; }
.fb-c { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }
.fl-bsvg { display: block; max-width: 100%; cursor: crosshair; }
.fl-bsvg .z { stroke: var(--line-2); stroke-dasharray: 2 3; }
.fl-bsvg .fu { fill: var(--bull); fill-opacity: .12; } .fl-bsvg .fd { fill: var(--bear); fill-opacity: .12; }
.fl-bsvg .lu, .fl-bsvg .ld { fill: none; stroke-width: 1.6; } .fl-bsvg .lu { stroke: var(--bull); filter: drop-shadow(0 0 3px var(--bull)); } .fl-bsvg .ld { stroke: var(--bear); filter: drop-shadow(0 0 3px var(--bear)); }
.fl-bsvg .du { fill: var(--bull); } .fl-bsvg .dd { fill: var(--bear); }
.fl-bsvg .cross { stroke: var(--ink-2); stroke-width: 1; }
.fl-bsvg .bl { font: 600 8.5px/1 var(--font-mono); fill: var(--ink-3); }
.fl-counter { display: flex; flex-direction: column; align-items: center; gap: 0; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.fl-counter b { font-size: 17px; letter-spacing: -.02em; }
.fl-counter.bull { color: var(--bull); text-shadow: 0 0 18px color-mix(in srgb, var(--bull) 70%, transparent); }
.fl-counter span { white-space: nowrap; }
.fl-counter.bear { color: var(--bear); text-shadow: 0 0 18px color-mix(in srgb, var(--bear) 70%, transparent); flex-direction: row; gap: 8px; align-items: baseline; justify-content: flex-start; white-space: nowrap; }
.fl-counter.bear b { font-size: 14px; }

/* axes */
.fl-axis-y { left: 0; top: 0; width: 50px; height: 100%; pointer-events: none; }
.fl-ybar { position: absolute; left: 8px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--bull), color-mix(in srgb, var(--bull) 20%, transparent) 48%, var(--ink) 50%, color-mix(in srgb, var(--bear) 20%, transparent) 52%, var(--bear)); box-shadow: 0 0 10px -2px var(--bull); }
.fl-axis-y span { position: absolute; left: 15px; transform: translateY(-50%); font: 600 9.5px/1 var(--font-mono); color: var(--ink-3); }
.fl-axis-x { left: 0; width: 100%; height: 16px; pointer-events: none; }
.fl-axis-x span { position: absolute; transform: translateX(-50%); font: 600 9.5px/1 var(--font-mono); color: var(--ink-3); }
.fl-axis-x span.now { color: var(--ink); transform: translateX(calc(-100% - 3px)); }

/* sector ladder (flow.js stacks positive rows from the top, negative from the bottom) */
.fl-row { position: absolute; pointer-events: none; display: grid; grid-template-columns: 74px 28px 40px; align-items: center; gap: 5px; height: 16px; padding: 0 5px; border-radius: 5px; font-size: 10px; background: color-mix(in srgb, var(--bg) 46%, transparent); border: 1px solid transparent; transition: background var(--fast), border-color var(--fast); }
:root[data-theme="light"] .fl-row { background: color-mix(in srgb, var(--bg) 64%, transparent); }
.fl-row .nm { pointer-events: auto; cursor: pointer; color: var(--ink-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 3px; }
.fl-row .nm:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }
.fl-row.more { grid-template-columns: 74px auto; background: none; }
.fl-row.more .nm { cursor: help; color: var(--ink-3); font-weight: 700; }
.fl-row.more b { font-size: 9.5px; opacity: .8; }
.fl-row b { font-size: 10px; text-align: right; }
.fl-row .mb { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--line-2); }
.fl-row .mb .u { background: var(--bull); } .fl-row .mb .d { background: var(--bear); margin-left: auto; }
.fl-row:hover, .fl-row.on { background: color-mix(in srgb, var(--sky) 14%, var(--surface)); border-color: color-mix(in srgb, var(--sky) 45%, transparent); }
.fl-row:hover .nm, .fl-row.on .nm { color: var(--ink); }

/* wires */
.fl-wires .w .wl { fill: none; stroke-width: 1; stroke-opacity: .32; }
.fl-wires .w.bull .wl { stroke: var(--bull); } .fl-wires .w.bear .wl { stroke: var(--bear); }
.fl-wires .w.spine .wl { stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.4; }
.fl-wires .w .wh { fill: none; stroke: transparent; stroke-width: 11; pointer-events: stroke; cursor: pointer; }
.fl-wires .w.off .wl { stroke-opacity: .05; } .fl-wires .w.off .wh { pointer-events: none; }
.fl-wires .spine-node { fill: var(--ink); filter: drop-shadow(0 0 6px var(--ink)); }

/* cards */
.flc { position: absolute; pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 7px 9px; border-radius: 10px; min-width: 0; overflow: hidden;
  border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 50%), var(--surface-2);
  transition: opacity var(--fast), border-color var(--fast), box-shadow var(--fast), transform var(--fast); }
.flc.bull { border-color: color-mix(in srgb, var(--bull) 30%, var(--line-2)); background: radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--bull) 11%, transparent), transparent 62%), var(--surface-2); }
.flc.bear { border-color: color-mix(in srgb, var(--bear) 30%, var(--line-2)); background: radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--bear) 11%, transparent), transparent 62%), var(--surface-2); }
.flc .sym { font: 700 12px/1.1 var(--font-mono); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.flc .pct { font-size: 11px; font-weight: 600; white-space: nowrap; }
.flc .rk { font-size: 9.5px; color: var(--ink-3); }
.flc .sbar { display: block; height: 3px; border-radius: 2px; background: var(--line-2); overflow: hidden; margin-top: auto; flex: none; }
.flc .sbar b { display: block; height: 100%; border-radius: 2px; }
.flc.bull .sbar b { background: var(--bull); box-shadow: 0 0 6px var(--bull); } .flc.bear .sbar b { background: var(--bear); box-shadow: 0 0 6px var(--bear); }
.flc.compact { justify-content: center; gap: 3px; padding: 4px 8px; }
.flc.compact .fc-r1 { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.flc.compact .fc-r1 .sym { font-size: 11.5px; }
.flc.compact .fc-r2 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.flc.compact .fc-r2 .pct { font-size: 10.5px; }
.flc.compact .fc-r2 .sbar { flex: 1 1 auto; margin: 0; }
.flc.compact.short { gap: 2px; padding: 2px 8px; } .flc.compact.short .fc-r1, .flc.compact.short .fc-r2 { line-height: 1.1; }
.flc .fc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.flc .fc-top .tag, .flc .fc-id .tag { padding: 3px 5px; font-size: 8.5px; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.flc .fc-top .rk { flex: none; }
.flc.medium.narrow .fc-top .sym { font-size: 11.5px; }
.flc.medium.narrow .fc-id { align-items: center; }
.flc .fc-id { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; }
.flc .fc-ch { flex: 1 1 auto; min-height: 0; display: flex; }
.flc .fc-ch svg, .flc .fc-prof svg { width: 100%; height: 100%; display: block; }
.flc.profile .fc-top { justify-content: flex-start; } .flc.profile .fc-top .sym { font-size: 11.5px; }
.flc.profile .fc-sub { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.flc.profile .fc-sub .pct { font-size: 10.5px; }
.flc.profile .fc-foot .kicker { font-size: 8px; letter-spacing: .1em; }
.flc.profile .fc-prof { flex: 1 1 auto; min-height: 0; display: flex; }
.flc .fc-foot { display: flex; justify-content: space-between; gap: 6px; font-size: 9.5px; color: var(--ink-3); }
.fl-prof .poc { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 3 2; }
.fl-prof .ltpl { stroke: var(--ink); stroke-width: 1; stroke-opacity: .6; }
.fl-mini .lv, .fl-candles .lv { stroke-width: 1; stroke-dasharray: 3 3; }
.fl-mini .lv.res, .fl-candles .lv.res { stroke: var(--amber); stroke-opacity: .7; } .fl-mini .lv.sup, .fl-candles .lv.sup { stroke: var(--sky); stroke-opacity: .7; }
.fl-mini text, .fl-candles text { font: 700 8.5px/1 var(--font-mono); }
.fl-mini .ll.res, .fl-candles .ll.res { fill: var(--amber); } .fl-mini .ll.sup, .fl-candles .ll.sup { fill: var(--sky); }
.fl-mini .zl, .fl-candles .zl { fill: var(--ink-2); }
.fl-empty { font-size: 10px; color: var(--ink-3); margin: auto; }
/* "+n more" chip: the ranks the grid has no room for (opens the board below) */
.flc.more { flex-direction: row; align-items: center; gap: 6px; padding: 0 8px; border-style: dashed; white-space: nowrap; }
.flc.more b { font-size: 10.5px; font-weight: 700; }
.flc.more .rk { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.flc.more i { margin-left: auto; font-style: normal; color: var(--ink-3); }
.fl-noboard { position: absolute; display: grid; place-items: center; pointer-events: none; }

/* featured: the header spans the card; the badge, LTP and day % sit beside the mini chart (flow.js: big / small / tight) */
.flc.feat { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(min-content, 1fr) auto auto; grid-template-areas: "id id" "px ch" "stats stats" "meter meter"; gap: 6px 12px; padding: 10px 12px 9px; border-radius: 14px; }
.flc.feat.small { gap: 4px 10px; padding: 7px 10px 7px; }
.flc.feat.nometer { grid-template-rows: auto minmax(min-content, 1fr) auto; grid-template-areas: "id id" "px ch" "stats stats"; }
.flc.feat.tight { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "id" "px" "stats"; align-content: space-between; gap: 3px; padding: 6px 10px; }
.flc.feat.bull { border-color: color-mix(in srgb, var(--bull) 42%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bull) 10%, transparent), 0 20px 50px -30px color-mix(in srgb, var(--bull) 55%, transparent); background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--bull) 17%, transparent), transparent 60%), var(--surface); }
.flc.feat.bear { border-color: color-mix(in srgb, var(--bear) 42%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bear) 10%, transparent), 0 20px 50px -30px color-mix(in srgb, var(--bear) 55%, transparent); background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--bear) 17%, transparent), transparent 60%), var(--surface); }
.ff-id { grid-area: id; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ff-id .sym-ico, .ff-id .fl-ring { flex: none; }
.ff-nm { display: flex; flex-direction: column; min-width: 0; flex: 1 1 0; }
.ff-oi { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; max-width: 48%; flex: 0 1 auto; }
.ff-oi .tag { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 8.5px; padding: 3px 5px; }
.ff-oi .fl-oi { line-height: 1.2; padding: 0 3px; }
.ff-nm b { font: 800 14px/1.1 var(--font-ui); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-nm small { font-size: 10.5px; line-height: 1.25; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-nm small .rk { color: var(--ink-2); font-weight: 700; }
.flc.feat.small .ff-nm b { font-size: 12.5px; } .flc.feat.small .ff-nm small { font-size: 9.5px; }
.ff-px { grid-area: px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-width: 0; }
.ff-q { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; line-height: 1.15; }
.ff-q b { font-size: 15px; } .flc.feat.small .ff-q b { font-size: 12.5px; }
.ff-q .pct { font-size: 11.5px; } .flc.feat.small .ff-q .pct { font-size: 10.5px; }
.flc.feat.tight .ff-px { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
.flc.feat.tight .ff-px .fl-oi { margin-left: auto; }
.ff-ch { grid-area: ch; position: relative; min-height: 0; min-width: 0; border-radius: 9px; background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--line); overflow: hidden; }
.ff-ch svg { position: absolute; left: 3px; top: 3px; display: block; }
.fl-oi { font-size: 9.5px; color: var(--ink-2); background: color-mix(in srgb, var(--surface) 70%, transparent); border-radius: 4px; padding: 1px 3px; white-space: nowrap; }
.ff-stats { grid-area: stats; display: flex; justify-content: space-between; gap: 2px 10px; min-width: 0; }
.ff-stats .stat { gap: 0; min-width: 0; flex: 0 1 auto; }
.ff-stats .stat > span { font-size: 8.5px; letter-spacing: .1em; line-height: 1.2; }
.ff-stats .stat b { font-size: 11px; line-height: 1.25; }
.flc.feat.small .ff-stats .stat b { font-size: 10.5px; }
.flc.feat.tight .ff-stats .stat b { line-height: 1.15; }
.flc.feat .meter { grid-area: meter; height: 3px; margin-top: 1px; }
.flc.feat .meter > i { height: 9px; }
.fl-ring .trk { fill: none; stroke: var(--line-2); stroke-width: 3; }
.fl-ring .val { fill: none; stroke-width: 3; stroke-linecap: round; }
.fl-ring.bull .val { stroke: var(--bull); filter: drop-shadow(0 0 3px var(--bull)); } .fl-ring.bear .val { stroke: var(--bear); filter: drop-shadow(0 0 3px var(--bear)); }
.fl-ring text { font: 700 10px/1 var(--font-mono); fill: var(--ink); }

/* hover + filters */
.fl-cards.has-hl .flc:not(.hl) { opacity: .32; }
.flc.hl { z-index: 2; transform: translateY(-1px); }
.flc.hl.bull { border-color: var(--bull); box-shadow: 0 0 0 1px var(--bull), 0 0 26px -6px var(--bull); }
.flc.hl.bear { border-color: var(--bear); box-shadow: 0 0 0 1px var(--bear), 0 0 26px -6px var(--bear); }
.flc.off { opacity: .14; pointer-events: none; }
.flc.enter { animation: enter .45s var(--ease); }
.flc:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; z-index: 3; }
.flow.replaying .fl-cards, .flow.replaying .fl-wires { opacity: .25; transition: opacity .3s; }

/* popover */
.fl-pop { position: absolute; left: 0; top: 0; width: 350px; max-width: calc(100% - 12px); display: none; pointer-events: none; padding: 12px; border-radius: 14px; background: var(--glass); backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--line-2); box-shadow: var(--shadow-pop); font-size: 11.5px; transition: transform 60ms linear; }
.fl-pop.on { display: block; }
.fl-pop.mini { width: auto; max-width: min(300px, calc(100% - 12px)); padding: 9px 11px; }
.fl-pop.touch .fp-foot { pointer-events: auto; cursor: pointer; text-decoration: underline; padding: 6px 0 2px; }
.fp-list { display: grid; grid-template-columns: repeat(2, auto); gap: 2px 14px; margin: 2px 0; font-size: 10.5px; }
.fp-mini { display: flex; flex-direction: column; gap: 3px; } .fp-mini b { font-size: 12.5px; }
.fp-h { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.fp-id { display: flex; flex-direction: column; min-width: 0; flex: 1; } .fp-id b { font-size: 14px; font-weight: 800; letter-spacing: -.02em; } .fp-id small { color: var(--ink-3); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-px { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; } .fp-px b { font-size: 17px; } .fp-px .bias-chips { margin-left: auto; }
.fp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fp-grid > div { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.fp-grid > div.w2 { grid-column: 1 / -1; }
.fp-grid span { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; white-space: nowrap; flex: none; }
.fp-grid b { font: 600 11px/1.3 var(--font-mono); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-grid b small { color: var(--ink-3); font-weight: 500; }
.fp-grid b.bull { color: var(--bull); } .fp-grid b.bear { color: var(--bear); } .fp-grid b.sky { color: var(--sky); } .fp-grid b.amber { color: var(--amber); }
.fp-rule { display: flex; gap: 10px; padding: 7px 0; font-size: 11.5px; color: var(--ink); }
.fp-rule span { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; flex: none; }
.fp-chart { height: 118px; border-radius: 9px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 60%, transparent); padding: 2px; }
.fp-chart svg { width: 100%; height: 100%; display: block; }
.fp-foot { margin-top: 7px; font-size: 10.5px; color: var(--brand); text-align: right; }

/* stacked (narrow) mode */
.fl-stack { display: none; }
.flow[data-mode="stack"] .fl-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; padding: 14px; border-top: 1px solid var(--line); }
.flow[data-mode="stack"] .fl-stack .fs-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.flow[data-mode="stack"] .fl-stack .flc { position: relative; }
.flow[data-mode="stack"] .fl-stack .flc.feat { min-height: 164px; }
.flow[data-mode="stack"] .fl-stack .flc.feat.small { min-height: 140px; }
.flow[data-mode="stack"] .fl-stack .ff-stats { flex-wrap: wrap; }
.flow[data-mode="stack"] .fl-stack .flc.medium { min-height: 84px; }
.flow[data-mode="stack"] .fl-stack .flc.compact { min-height: 40px; }
.flow[data-mode="stack"] .fl-breadth .fb-c { display: none; }
@media (max-width: 760px) { .fl-bar { padding: 10px 12px; } .fl-h { font-size: 14px; } .fl-ctl { width: 100%; } .fl-ctl select.input { flex: 1 1 132px; min-width: 0; } }