/* 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; }
.sk-tip b { display: block; }
/* Breakdown rows in the hover: segment revenue, the filing's own expense lines, segment
   profit. Wider than a bare tooltip because filing labels are long ("Technology and
   infrastructure"), and the value column is right-aligned so magnitudes compare. */
.sk-tip:has(.tiprows) { max-width: 340px; }
.tiprows { list-style: none; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid #2b2f38; }
.tiprows li { display: flex; justify-content: space-between; gap: 12px; line-height: 1.55; }
.tiprows li span { color: var(--sk-ink-2); }
.tiprows li b { display: inline; font-size: 12px; white-space: nowrap;
                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; }

/* --- Grid view: category-filtered gallery of compact diagram cards --- */
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
           gap: 16px; margin: 0 0 16px; }
.sk-card { border: 1px solid var(--sk-line); border-radius: 10px; padding: 10px;
           cursor: pointer; background: #11141b; transition: background .1s; }
.sk-card:hover { background: #161922; }
.sk-card h3 { font-size: 13px; font-weight: 600; margin: 0 0 8px; color: var(--sk-ink);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-card-body.meta { font-size: 12px; padding: 20px 0; text-align: center; }
/* Cards need the full diagram to shrink to fit, unlike the single view's readable-at-full-
   size min-width — same .skwrap/svg markup (reused chartHtml()), narrower context. */
.sk-card-body .skwrap { border: none; background: none; padding: 0; overflow: visible; }
.sk-card-body svg { min-width: 0; width: 100%; height: auto; }
.sk-card-body .sk-name, .sk-card-body .sk-val { font-size: 9px; }

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

/* Nested + multi-block hover breakdowns (see sankey.js showTip). */
.tiprows li.sub { padding-left: 12px; }
.tiprows li.sub span { opacity: .75; }
.tiphead { margin: 8px 0 0; padding-top: 6px; border-top: 1px solid #2b2f38;
           font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
           color: #6b7280; }