/* Income-statement Sankey (/sankey). Layered on top of cash.css, which supplies the
   page shell, .meta, .cats pills and the table styles the table view reuses.

   The three flow roles below were validated against this page's surface (#0f1115) with
   the dataviz palette checker — lightness band, chroma floor, all-pairs CVD separation
   (worst deutan dE 8.5), normal-vision floor and 3:1 contrast all pass. The site's
   #16c784/#ea3943 pair fails CVD separation (dE 4.0) and sits outside the dark
   lightness band, which matters here because a Sankey is large fills, not small badges.
   Colour is never the only channel: every node is direct-labelled and a table view ships
   alongside. */
:root {
  --flow-revenue: #2f7ee0;   /* the source */
  --flow-keep:    #0f9d63;   /* gross profit, operating income, pretax, net income */
  --flow-cost:    #d9622a;   /* cost of revenue, opex, R&D, SG&A, tax, losses */
  --sk-ink:       #e6e8eb;
  --sk-ink-2:     #9aa0a6;
  --sk-ink-3:     #6b7280;
  --sk-line:      #23262d;
}

/* --- Filter row (one row, above everything it scopes) --- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; }
.filters .cats { margin: 0; }
.fl { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sk-ink-2); }
.fl input { background: #161922; color: var(--sk-ink); border: 1px solid var(--sk-line);
            border-radius: 8px; padding: 6px 11px; font: inherit; font-size: 13px;
            min-width: 220px; min-height: 34px; }
.fl input:focus { outline: 2px solid var(--flow-revenue); outline-offset: 1px; }
.viewtoggle { display: flex; gap: 8px; margin-left: auto; }
.viewtoggle .cat { font: inherit; font-size: 13px; }

/* --- Stat strip. Proportional figures (not tabular-nums) on standalone numbers. --- */
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.stat { flex: 1 1 150px; min-width: 0; border: 1px solid var(--sk-line); border-radius: 10px;
        padding: 10px 14px; background: #11141b; }
.stat .k { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
           color: var(--sk-ink-3); margin-bottom: 3px; }
.stat .v { display: block; font-size: 21px; font-weight: 650; color: var(--sk-ink); }
.stat .v.neg { color: var(--flow-cost); }

/* --- Chart --- */
.skwrap { overflow-x: auto; border: 1px solid var(--sk-line); border-radius: 10px;
          background: #0f1115; padding: 8px 0; }
.skwrap.loading { opacity: .45; }            /* hold the old render, never a skeleton flash */
.skwrap svg { display: block; margin: 0 auto; min-width: 900px; max-width: 100%; height: auto; }

.sk-link { fill-opacity: .40; stroke: none; transition: fill-opacity .12s; }
.sk-node { stroke: none; }
.sk-hit { fill: transparent; stroke: none; cursor: default; }
.sk-name { font-size: 12.5px; font-weight: 600; fill: var(--sk-ink); }
.sk-val  { font-size: 11px; fill: var(--sk-ink-2); font-variant-numeric: tabular-nums; }
.sk-c-revenue { fill: var(--flow-revenue); }
.sk-c-keep    { fill: var(--flow-keep); }
.sk-c-cost    { fill: var(--flow-cost); }

/* Emphasis on hover/focus: the touched flow keeps full strength, the rest recedes. */
svg.emph .sk-link { fill-opacity: .10; }
svg.emph .sk-node, svg.emph .sk-name, svg.emph .sk-val { opacity: .35; }
svg.emph .sk-link.on { fill-opacity: .60; }
svg.emph .sk-node.on, svg.emph .sk-name.on, svg.emph .sk-val.on { opacity: 1; }
/* Visible focus ring on the hit target (outline is unreliable on SVG shapes). */
.sk-hit:focus { outline: none; }
.sk-hit:focus-visible { fill: rgba(255,255,255,.10); stroke: #fff; stroke-width: 2; rx: 4; }

/* --- Tooltip. Enhances; never the only way to read a value (labels + table do that). --- */
.sk-tip { position: absolute; z-index: 60; display: none; pointer-events: none;
          background: #11141b; border: 1px solid #2b2f38; border-radius: 8px;
          padding: 7px 10px; font-size: 12px; color: var(--sk-ink); max-width: 260px;
          box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.sk-tip.open { display: block; }
.sk-tip b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.sk-tip span { color: var(--sk-ink-2); font-variant-numeric: tabular-nums; }

/* --- Legend (always present; identity is never colour-alone) --- */
.legend { color: var(--sk-ink-3); font-size: 11.5px; margin: 12px 0 0;
          display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
              margin-right: 6px; vertical-align: -1px; }
.legend .note { color: var(--sk-ink-2); }

/* --- Table view twin --- */
td.item { font-weight: 600; }
td.item.sub { font-weight: 400; padding-left: 30px; color: var(--sk-ink-2); }
tr.total td { border-top: 1px solid #2b2f38; }

@media (max-width: 560px) {
  .viewtoggle { margin-left: 0; }
  .fl input { min-width: 0; flex: 1; }
  .fl { flex: 1 1 100%; }
}