/* /flow - the live money-flow map. Shares the dashboard theme: every colour
   here is a token from styles.css. The four signal colours mean whichever scheme
   the viewer picked (the Colours switch): DIRECTION (--on money going in, --off
   going out) or RISK (the Money Flow grid's own: --on helps risk-on, --off
   risk-off). --mixed and --dead read the same in both. */
.flow-page { max-width: 1240px; }
.flow-panel { padding: 22px 22px 16px; }
.flow-head { display: flex; gap: 18px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.flow-head > div:first-child { flex: 1 1 420px; min-width: 0; }
/* "Featured indicator, by TradeMade" (Jason, 2026-09-23): a lit badge in the
   accent, the same glow language as the dashboard's Money Flow Visualizer button */
.flow-brand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.flow-brand .eyebrow { margin: 0; }
.flow-feat { font: 600 .74rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text);
  padding: 3px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.flow-made { padding: 10px 12px; border-radius: 10px; border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); }
.flow-summary { font-size: clamp(1.15rem, 2.2vw, 1.6rem) !important; margin: 0 0 6px !important; text-wrap: balance; }
.flow-sub { color: var(--muted); margin: 0 !important; font-size: 1.02rem; }
.flow-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.flow-ctl-row { display: flex; gap: 8px; align-items: stretch; }
/* The ? is a full-size button on purpose: Jason asked for it to be easy to find. */
.flow-help-open { font: 700 1rem var(--display); height: auto; }
.flow-help-body h3 { margin: 16px 0 6px !important; }
.flow-help-body ul.plain li + li { margin-top: 6px; }
.flow-help-body .c-on { color: var(--on); } .flow-help-body .c-off { color: var(--off); } .flow-help-body .c-mixed { color: var(--mixed); }
/* the colour key in the ? pop-up: a swatch in front of each rule */
.flow-help-body .colour-key { list-style: none; padding-left: 0; }
.flow-help-body .colour-key li { padding-left: 22px; position: relative; }
.flow-help-body .colour-key .dot { position: absolute; left: 2px; top: .45em; width: 11px; height: 11px; border-radius: 50%; }
/* the one point Jason asked to make prominent: this map's colours are not the grid's */
.flow-callout { margin: 14px 0 6px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); }
.flow-callout p { margin: 0 !important; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.seg button { font: 500 .92rem var(--font); color: var(--muted); background: transparent; border: 0; padding: 8px 14px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button[aria-pressed="true"] { color: var(--text); background: var(--panel2); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.flow-status { font: .86rem var(--mono); color: var(--muted); letter-spacing: .04em; }
.flow-status.live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--on); margin-right: 6px; vertical-align: 1px; animation: flowpulse 2s ease-in-out infinite; }
@keyframes flowpulse { 50% { opacity: .35; } }

/* The map is a window onto space: rounded, framed, and lit faintly in the
   theme's accent the way the dashboard's glowing controls are. */
.flow-stage { position: relative; margin-top: 14px; width: 100%; border-radius: 14px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); background: #04050d;
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset, 0 0 42px color-mix(in srgb, var(--accent) 14%, transparent); }
#flow-canvas { display: block; width: 100%; height: 100%; }

.flow-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: .92rem; color: var(--muted); align-items: center; }
.flow-key .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.dot.on { background: var(--on); } .dot.off { background: var(--off); } .dot.mixed { background: var(--mixed); } .dot.dead { background: var(--dead); }
.flow-key .key-note { flex-basis: 100%; }
/* one key per colour scheme; only the active one shows. display:contents keeps its
   swatches in the key's own flex row, so [hidden] needs its own rule to win. */
.flow-key .key-set { display: contents; }
.flow-key .key-set[hidden] { display: none; }
.seg-label { align-self: center; font: 500 .74rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.flow-table-note { margin-bottom: 10px !important; font-size: .96rem; }
.flow-table-wrap { overflow-x: auto; }
.flow-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.flow-table th { text-align: left; font: 500 .78rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  padding: 6px 10px 8px; border-bottom: 1px solid var(--border); }
.flow-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.flow-table tr:last-child td { border-bottom: 0; }
.flow-table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow-table .asset { font-weight: 600; white-space: nowrap; }
.flow-table .dir { white-space: nowrap; }
.flow-table .dir.in { color: var(--on); } .flow-table .dir.out { color: var(--off); }
.flow-table .dir.flat, .flow-table .dir.closed { color: var(--muted); }
/* inside its normal range: keeps its direction colour, faded, so the list matches the dim trickle on the map */
.flow-table .dir.small { opacity: .62; }
.flow-table .c-on { color: var(--on); } .flow-table .c-off { color: var(--off); } .flow-table .c-mixed { color: var(--mixed); } .flow-table .c-dead { color: var(--dead); }
.bar { position: relative; width: 120px; max-width: 28vw; height: 8px; border-radius: 4px; background: var(--panel2); overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }
.bar.on > i { background: var(--on); } .bar.off > i { background: var(--off); } .bar.mixed > i { background: var(--mixed); } .bar.dead > i { background: var(--dead); }

@media (max-width: 640px) {
  .flow-panel { padding: 16px 12px 12px; }
  .flow-controls { align-items: stretch; width: 100%; }
  .flow-ctl-row { width: 100%; } .seg { flex: 1; } .seg button { flex: 1; }
  .flow-table th:nth-child(4), .flow-table td:nth-child(4) { display: none; }   /* the bar; Move and Activity carry it */
  /* the flow words wrap on a phone, or the table needed 470px in a 309px box and
     pushed the Activity column off-screen */
  .flow-table .dir, .flow-table .asset { white-space: normal; }
  .flow-table td, .flow-table th { padding-left: 5px; padding-right: 5px; }
  .flow-table { font-size: .92rem; }
  .flow-table th { white-space: normal; letter-spacing: .06em; }
}