/* Core role: Styles for station economy/budget charts (pie, bar, trend curves). */
    /* ECONOMY PIE CHART — slices pop on hover */
    /* Soft drop shadow under the whole ring so the donut lifts off the card.
       CSS drop-shadow is used instead of an SVG <filter> (feDropShadow renders
       inconsistently in this QtWebEngine build). */
    .pie-ring { filter: drop-shadow(0 0.4rem 0.5rem rgba(0,0,0,0.5)); }
    .pie-slice { cursor: pointer; transition: opacity var(--duration-short), filter var(--duration-short), transform var(--duration-short);
                 opacity: 0.9; }
    /* Lift the hovered slice toward the viewer along its mid-angle (--dx/--dy set
       per slice) and brighten it, reinforcing the 3D feel on interaction. */
    .pie-slice:hover { opacity: 1; filter: brightness(1.22) drop-shadow(0 0.3rem 0.4rem rgba(0,0,0,0.5));
                       transform: translate(var(--dx,0), var(--dy,0)); }
    /* Radial ware labels splayed around the pie; pointer-events off so hover
       always targets the slice beneath, not the text. */
    .pie-label { font-family: var(--font-data); font-size: 1.2rem; font-weight: 600;
                 letter-spacing: 0.04em; text-transform: uppercase; pointer-events: none;
                 user-select: none; paint-order: stroke; stroke: var(--surface-2);
                 stroke-width: 0.25rem; stroke-linejoin: round; }
    /* Cash-flow chart: transparent per-hour hit columns. Hovering a column
       shows that hour's trade breakdown and tints the band so it's clear which
       hour is selected. The marker dot beneath grows via a sibling selector. */
    .cf-col { fill: transparent; cursor: crosshair; }
    .cf-col:hover { fill: rgba(94,234,212,0.09); }
    /* Avg Price bars glide to new values on ware/direction/scrubber changes.
       The chart is mutated in place (never rebuilt) so these transitions on the
       SVG geometry properties have a prior state to animate from. */
    .avg-bars rect { transition: x 0.28s ease, y 0.28s ease, width 0.28s ease, height 0.28s ease, opacity 0.28s ease; }
    /* Hovered bar: pop to full opacity with a thin bright rim (the opacity is
       already transitioned above, so it glows in rather than flicking). */
    .avg-bars rect.avg-hot { opacity: 1 !important; stroke: rgba(255,255,255,0.85); stroke-width: 0.7; }
    /* Hourly / By-Trade toggle above the cash-flow chart. */
    .cf-toggle-btn { padding: 0.3125cqw 1.25cqw; font-family: var(--font-data); font-size: 1.406cqw; letter-spacing: 0.08em;
                     text-transform: uppercase; color: var(--text-label); background: transparent;
                     border: 1px solid var(--outline); border-radius: var(--radius-sm); cursor: pointer; user-select: none;
                     white-space: nowrap; transition: color var(--duration-short), border-color var(--duration-short); }
    .cf-toggle-btn:hover { color: var(--text-secondary); border-color: var(--text-label); }
    .cf-toggle-btn.active { color: #5eead4; border-color: #5eead4; }
    /* ── CASH FLOW SCRUBBER (X-axis zoom + pan) ── */
    /* A thin resizable track rendered below each station's chart.
       Drag the handle body to pan; drag either edge to zoom in/out.
       Burnt-orange accent (#d4540a) to visually separate it from the teal charts. */
    .cf-scrubber-track  { position:relative; height:3.125cqw; background:rgba(212,84,10,0.09);
                          border:1px solid rgba(212,84,10,0.28); border-radius: var(--radius-sm);
                          margin:0.781cqw 0 0.3125cqw; user-select:none; flex-shrink:0; }
    .cf-scrubber-handle { position:absolute; top:0; bottom:0;
                          background:rgba(212,84,10,0.22); border:1px solid rgba(212,84,10,0.55);
                          border-radius: var(--radius-sm); cursor:grab; min-width:0.625cqw; }
    .cf-scrubber-handle:active { cursor:grabbing; }
    /* Edge grip strips — wider hit zone, hover brighten, arrow + grip marks */
    .cf-scrubber-resize { position:absolute; top:0; bottom:0; width:1.875cqw; cursor:ew-resize;
                          background:rgba(212,84,10,0.38); transition:background var(--duration-short); }
    .cf-scrubber-resize:hover { background:rgba(212,84,10,0.68); }
    /* ◄ / ► arrow in upper half tells the user these edges are draggable */
    .cf-scrubber-resize[data-side="left"]::before  { content:'◄'; }
    .cf-scrubber-resize[data-side="right"]::before { content:'►'; }
    .cf-scrubber-resize::before { position:absolute; top:28%; left:50%;
                                   transform:translate(-50%,-50%);
                                   font-size:0.781cqw; line-height:1; pointer-events:none;
                                   color:rgba(25,230,200,0.85); font-family:var(--font-data); }
    /* Three lime-green vertical grip lines in lower half reinforce the drag affordance */
    .cf-scrubber-resize::after { content:''; position:absolute; top:70%; left:50%;
                                  transform:translate(-50%,-50%);
                                  width:1.5px; height:35%; border-radius:1px; pointer-events:none;
                                  background:rgba(57,255,20,0.65);
                                  box-shadow:-3px 0 0 rgba(57,255,20,0.65), 3px 0 0 rgba(57,255,20,0.65); }
    .cf-scrubber-resize[data-side="left"]  { left:0;  border-radius: var(--radius-sm) 0 0 0.2rem; }
    .cf-scrubber-resize[data-side="right"] { right:0; border-radius:0 0.2rem 0.2rem 0; }
    /* Absolute labels at the track edges — purely decorative */
    /* Ware legend chips: transition opacity so changes run on the GPU compositor
       and don't trigger a repaint of the pie chart's drop-shadow filter layer. */
    [id^="ware-chip-"] { transition: opacity 0.06s ease-out; }
    .cf-scrubber-label  { position:absolute; top:50%; transform:translateY(-50%);
                          font-family:var(--font-data); font-size:1.094cqw;
                          color:rgba(94,234,212,0.50); pointer-events:none; }

    /* ── ECONOMY ROW: budget pie (left) + cash-flow graph (right) ──────────────
       The two are locked together so they read as an even, equal-height pair and
       scale as one on resize.

       Both sides are SVG-based (viewBox + width:100%;height:auto), so each keeps
       its OWN aspect ratio intrinsically.  We make their *heights* match without
       any JS by giving each child a flex-grow proportional to its aspect ratio:
       with flex-basis:0 the widths come out in that same ratio, so width/ratio
       (= rendered height) is equal for both.
         • pie block aspect   ≈ 410/350 = 1.171  (its SVG viewBox)
         • graph block aspect ≈ 1.546             (chart 560/320=1.75 PLUS the
           header + scrubber chrome, which is sized in cqw below so the whole
           block keeps a constant aspect ratio at every width)
       max-width caps each side (in the same 1.171:1.546 ratio, so both caps bite
       at once) — the pair grows on big screens then stops.  Once capped,
       justify-content:space-between parks the pie at the left edge and the graph
       at the right edge with the slack floating between them.
       flex-grow / max-width are by-eye tuning knobs; adjust the pair together. */
    .econ-row {
      display: flex;
      flex-wrap: wrap;                 /* wrap-to-stacked on narrow windows */
      justify-content: space-between;  /* pie left, graph right */
      align-items: flex-start;         /* each child keeps its natural height */
      gap: 0.8rem;
      padding: 0.8rem;
      background: #040e18;
    }
    .econ-pie {
      flex: 1.171 1 0;                 /* grow share == pie aspect ratio */
      min-width: 24rem;
      max-width: 48rem;
    }
    /* container-type makes 1cqw = 1% of the graph's own width, so the HTML chrome
       (header toggles + scrubber, below) scales with the block instead of staying
       a fixed rem size — that's what keeps the WHOLE block's aspect ratio fixed.
       cqw values were derived from the original rem sizes at a ~64rem design width
       (1rem ≈ 1.5625cqw) so it looks the same at typical size and scales from there. */
    .econ-graph {
      flex: 1.546 1 0;                 /* grow share == graph block aspect ratio */
      min-width: 32rem;
      max-width: 63.5rem;
      display: flex;
      flex-direction: column;
      container-type: inline-size;
    }