/* Generated by build_value_chain.mjs. */
.value-chain { --air:var(--site-line); --liquid:var(--site-cool); --cols:repeat(7,minmax(0,1fr)); font-family:var(--site-sans); }
.value-chain .intro { padding:0 0 8px; max-width:860px; }
.value-chain h1 { font:500 clamp(40px,5vw,68px)/1.06 var(--site-display); letter-spacing:-.04em; }
.value-chain .lead { font-size:clamp(18px,2vw,22px); line-height:1.5; margin-top:18px; max-width:62ch; color:var(--site-ink); }
.value-chain h2 { font:500 28px/1.2 var(--site-display); letter-spacing:-.02em; }
.value-chain h3 { font:600 15px/1.3 var(--site-sans); color:var(--site-muted); margin:26px 0 6px; }
.lens { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:30px 0 8px; }
.lens-q { width:100%; font:500 20px/1.3 var(--site-display); letter-spacing:-.015em; }
.lens button { border:1px solid var(--site-line); background:var(--site-surface); border-radius:3px; padding:7px 14px; font:inherit; font-size:14px; cursor:pointer; color:var(--site-ink); }
.lens button[aria-checked="true"] { background:var(--site-ink); color:var(--site-paper); border-color:var(--site-ink); }
.lens-fact { width:100%; font-size:14px; color:var(--site-muted); margin:4px 0 0; }
.lens-fact .basis { font-style:italic; }
.lens-fact a { color:var(--liquid); margin-left:4px; }
.route-map { position:relative; display:grid; grid-template-columns:var(--cols); grid-template-rows:auto 120px 120px 64px; margin:18px 0 0; }
.map-columns { grid-column:1 / -1; grid-row:1; display:grid; grid-template-columns:var(--cols); list-style:none; padding:0; margin:0 0 4px; border-bottom:1px solid var(--site-rule); }
.map-columns li { grid-column:var(--col); font-size:13px; color:var(--site-muted); padding:0 6px 8px 0; }
.demand { grid-column:1; grid-row:2 / 4; align-self:center; padding-right:18px; font-size:13px; color:var(--site-muted); margin-top:-6px; }
.demand strong { display:block; font:500 22px/1.2 var(--site-display); letter-spacing:-.015em; color:var(--site-ink); margin-bottom:6px; }
.demand i { font-style:normal; }
.line { grid-column:2 / 8; align-self:center; height:8px; border-radius:4px; position:relative; }
.line-air { grid-row:2; background:var(--air); } .line-liquid { grid-row:3; background:var(--liquid); }
.fork { grid-column:2; grid-row:2 / 4; justify-self:start; width:8px; margin:60px 0; background:linear-gradient(var(--air) 50%, var(--liquid) 50%); border-radius:4px 0 0 4px; }
.branch { grid-column:2; grid-row:3 / 5; justify-self:center; width:4px; margin:60px 0 26px; background:var(--liquid); opacity:.55; }
.line-label { position:absolute; right:calc(100% + 14px); top:50%; transform:translateY(-50%); font-size:13px; font-weight:600; color:var(--air); white-space:nowrap; }
.line-liquid .line-label { color:var(--liquid); }
.warm { position:absolute; left:46%; right:calc(25% + 26px); bottom:16px; font-size:13px; line-height:1.3; color:var(--liquid); }
@media (max-width: 1100px) { .line-label { right:auto; left:20px; top:auto; bottom:calc(100% + 12px); transform:none; } }
.row-air, .row-liquid, .row-shared { display:contents; }
.station { grid-column:var(--col); position:relative; z-index:1; background:none; border:0; padding:0; font:inherit; cursor:pointer; color:var(--site-ink); display:flex; align-items:center; justify-content:center; }
.row-air .station { grid-row:2; } .row-liquid .station { grid-row:3; } .row-shared .station { grid-row:2 / 4; }
.row-liquid .station[data-station="immersion"] { grid-row:4; }
.dot { width:28px; height:28px; border-radius:50%; background:var(--site-paper); border:5px solid var(--air); transition:transform .15s; }
.station-liquid .dot { border-color:var(--liquid); }
.station-both .dot { width:32px; height:150px; border-radius:16px; border-color:var(--site-ink); }
.station-name { position:absolute; left:50%; transform:translateX(-50%); width:max-content; max-width:11.5em; text-align:center; font-size:14px; line-height:1.25; text-wrap:balance; }
.row-air .station-name { bottom:calc(50% + 22px); }
.row-liquid .station-name { top:calc(50% + 22px); background:var(--site-paper); padding:0 4px; }
.row-liquid .station[data-station="immersion"] .station-name { top:auto; left:calc(50% + 24px); transform:none; text-align:left; }
.row-shared .station-name { top:calc(50% + 84px); }
.station:hover .dot, .station:focus-visible .dot { transform:scale(1.12); }
.station[aria-pressed="true"] .dot, .station.covered .dot { background:var(--site-accent); border-color:var(--site-accent); }
.station[aria-pressed="true"] .station-name { font-weight:600; }
.value-chain .dim { opacity:.22; }
.station:focus-visible, .company:focus-visible, .lens button:focus-visible { outline:2px solid var(--site-accent); outline-offset:3px; border-radius:6px; }
.detail { margin:30px 0 10px; padding:14px 0; border-top:1px solid var(--site-rule); border-bottom:1px solid var(--site-rule); max-width:72ch; }
.map-key { margin:20px 0 0; font-size:15px; color:var(--site-muted); max-width:72ch; }
.detail h2 { margin-bottom:8px; } .detail p { margin:6px 0; } .detail .buyer, .detail .count { color:var(--site-muted); font-size:15px; }
.detail .hint { color:var(--site-muted); }
.detail .how { color:var(--liquid); font-size:15px; }
.companies { margin-top:36px; }
.companies .note { color:var(--site-muted); max-width:72ch; margin:8px 0 14px; font-size:15px; }
.track-head, .company { display:grid; grid-template-columns:var(--cols); gap:0; align-items:center; }
.track-head > span:first-child, .company-name { grid-column:1; padding-right:12px; }
.track-head .track, .company .track { grid-column:2 / -1; }
.across-tags { grid-column:2 / -1; font-size:12px; color:var(--site-muted); margin-top:2px; }
.track { position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); min-height:28px; align-items:center; justify-items:center; }
.track-head .track span { grid-column:calc(var(--col) - 1); font-size:12px; color:var(--site-muted); line-height:1.2; text-align:center; padding:0 4px; }
.track-head { position:sticky; top:0; background:var(--site-paper); z-index:2; padding:8px 0; border-bottom:1px solid var(--site-rule); }
.company { width:100%; background:none; border:0; border-bottom:1px solid var(--site-rule); padding:9px 0; font:inherit; text-align:left; cursor:pointer; color:var(--site-ink); }
.company-name strong { display:block; font-weight:600; font-size:15px; } .company-name small { color:var(--site-muted); font-size:12px; }
.company .track .cell { grid-column:calc(var(--col) - 1); grid-row:1; width:14px; height:14px; border-radius:50%; position:relative; z-index:1; }
.company .track .cell.sourced, .legend .cell.sourced { background:var(--site-ink); }
.company .track .cell.preliminary, .legend .cell.preliminary { background:var(--site-paper); border:2px solid var(--site-ink); }
.company .track .cell.partial, .legend .cell.partial { background:linear-gradient(90deg, var(--site-ink) 50%, var(--site-paper) 50%); border:2px solid var(--site-ink); }
.legend { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--site-muted); margin:6px 0 0; }
.legend .cell { display:inline-block; width:12px; height:12px; border-radius:50%; } .legend .cell + span { margin-right:14px; }
.detail ul { margin:8px 0 0; padding-left:18px; font-size:15px; } .detail li { margin:4px 0; } .detail li a { color:var(--liquid); margin-left:4px; }
.company .span { position:absolute; top:50%; height:3px; margin-top:-1.5px; background:var(--site-ink); opacity:.55; }
.company .covers { display:none; }
.company[aria-pressed="true"] { background:var(--site-surface); }
.company[aria-pressed="true"] .cell.sourced, .company[aria-pressed="true"] .span { background:var(--site-accent); }
.company[aria-pressed="true"] .cell.preliminary, .company[aria-pressed="true"] .cell.partial { border-color:var(--site-accent); }
.company[aria-pressed="true"] .cell.partial { background:linear-gradient(90deg, var(--site-accent) 50%, var(--site-paper) 50%); }
.company:hover { background:var(--site-surface); }
.method { margin:40px 0 20px; max-width:72ch; } .method p { color:var(--site-muted); font-size:15px; margin:10px 0; } .method a { color:var(--liquid); }
@media (max-width: 900px) {
  .route-map { grid-template-columns:1fr; grid-template-rows:none; gap:0; }
  .map-columns, .line, .fork, .branch, .track-head { display:none; }
  .station-name { position:static; transform:none; width:auto; }
  .demand { grid-column:1; grid-row:auto; margin-bottom:14px; }
  .row-air, .row-liquid, .row-shared { display:block; }
  .route-map .station { grid-row:auto !important; transform:none !important; flex-direction:row; justify-content:flex-start; text-align:left; width:100%; padding:8px 0 8px 14px; border-left:6px solid var(--air); }
  .row-liquid .station { border-left-color:var(--liquid); }
  .row-shared .station { border-left:6px double var(--site-ink); }
  .row-air .station .station-name { order:0; }
  .station-name { max-width:none; font-size:15px; }
  .station-both .dot { width:22px; height:22px; border-radius:50%; }
  .row-air::before, .row-liquid::before, .row-shared::before { display:block; font-size:12px; font-weight:600; margin:12px 0 4px; }
  .company { grid-template-columns:1fr; gap:4px; }
  .company .track { display:none; } .company .covers { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:13px; color:var(--site-muted); }
  .cover::before { content:""; display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:0; border:1.5px solid var(--site-ink); }
  .cover.sourced::before { background:var(--site-ink); }
  .across-tags { grid-column:1; }
}
@media (prefers-reduced-motion: reduce) { .dot { transition:none; } }
