/* @leeeo/charts - theme-aware via CSS custom properties. Reads host tokens (--ink, --muted, --surface, --line) when defined (@leeeo/theme apps use html[data-theme="light|dark"]); otherwise falls back to built-in light/dark values. Series palette v2 (0.6.0): blue first, orange second, then teal, rose, violet, green, ochre, slate. Chosen for distance under protan/deutan/tritan simulation and at least 3.3:1 against light surfaces / 3.5:1 against dark ones. Hosts may set --chart-1 .. --chart-8 to replace a series colour; the site accent (--accent) is no longer used for series 1. */ .lc { --lc-ink: var(--ink, #1c2a24); --lc-muted: var(--muted, #5b6862); --lc-surface: var(--surface, #ffffff); --lc-grid: var(--line, #dde3df); --lc-s1: var(--chart-1, #3c4dba); --lc-s2: var(--chart-2, #dd5f1d); --lc-s3: var(--chart-3, #2b93a1); --lc-s4: var(--chart-4, #943351); --lc-s5: var(--chart-5, #4e2175); --lc-s6: var(--chart-6, #275e08); --lc-s7: var(--chart-7, #92865a); --lc-s8: var(--chart-8, #647587); /* large translucent fills (sankey bands, areas) */ --lc-band-opacity: 0.22; --lc-area-opacity: 0.14; margin: 0; color: var(--lc-ink); font-family: var(--font, system-ui, "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif); max-width: 100%; min-width: 0; } [data-theme="dark"] .lc, .lc[data-theme="dark"] { --lc-ink: var(--ink, #e8efe9); --lc-muted: var(--muted, #a8b7ae); --lc-surface: var(--surface, #1d2924); --lc-grid: var(--line, #34433b); --lc-s1: var(--chart-1, #72aaf2); --lc-s2: var(--chart-2, #feab73); --lc-s3: var(--chart-3, #5cecf0); --lc-s4: var(--chart-4, #df5e7a); --lc-s5: var(--chart-5, #9966ce); --lc-s6: var(--chart-6, #bcf7bc); --lc-s7: var(--chart-7, #fedb62); --lc-s8: var(--chart-8, #8193b3); --lc-band-opacity: 0.3; --lc-area-opacity: 0.18; --lc-up-base: #e68a98; --lc-down-base: #7db3e6; --lc-gup-base: #72c7c7; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .lc { --lc-ink: var(--ink, #e8efe9); --lc-muted: var(--muted, #a8b7ae); --lc-surface: var(--surface, #1d2924); --lc-grid: var(--line, #34433b); --lc-s1: var(--chart-1, #72aaf2); --lc-s2: var(--chart-2, #feab73); --lc-s3: var(--chart-3, #5cecf0); --lc-s4: var(--chart-4, #df5e7a); --lc-s5: var(--chart-5, #9966ce); --lc-s6: var(--chart-6, #bcf7bc); --lc-s7: var(--chart-7, #fedb62); --lc-s8: var(--chart-8, #8193b3); --lc-band-opacity: 0.3; --lc-area-opacity: 0.18; --lc-up-base: #e68a98; --lc-down-base: #7db3e6; --lc-gup-base: #72c7c7; } } /* Rise / fall colours for the stock charts, kept at their 0.5 values (independent of the series palette). Default Korean convention: up red, down blue. Hosts may set --chart-up / --chart-down, or switch to the global convention (up green, down red) with data-chart-convention="global" on any ancestor or the spec option convention: "global". */ .lc { --lc-up-base: #b04a5a; --lc-down-base: #2f6fa8; --lc-gup-base: #3d8f8f; --lc-flat: var(--lc-s8); --lc-up: var(--chart-up, var(--lc-up-base)); --lc-down: var(--chart-down, var(--lc-down-base)); } .lc.lc-conv-global, [data-chart-convention="global"] .lc { --lc-up: var(--chart-up, var(--lc-gup-base)); --lc-down: var(--chart-down, var(--lc-up-base)); } /* Semantic tones (sankey `tone`): revenue blue (series 1), profit teal (3), cost orange (2, always hatched), neutral slate (8). Hosts may set --chart-revenue / --chart-profit / --chart-cost / --chart-neutral. */ .lc { --lc-tone-revenue: var(--chart-revenue, var(--lc-s1)); --lc-tone-profit: var(--chart-profit, var(--lc-s3)); --lc-tone-cost: var(--chart-cost, var(--lc-s2)); --lc-tone-neutral: var(--chart-neutral, var(--lc-s8)); } .lc-tone-revenue{--c:var(--lc-tone-revenue)} .lc-tone-profit{--c:var(--lc-tone-profit)} .lc-tone-cost{--c:var(--lc-tone-cost)} .lc-tone-neutral{--c:var(--lc-tone-neutral)} .lc-c1{--c:var(--lc-s1)} .lc-c2{--c:var(--lc-s2)} .lc-c3{--c:var(--lc-s3)} .lc-c4{--c:var(--lc-s4)} .lc-c5{--c:var(--lc-s5)} .lc-c6{--c:var(--lc-s6)} .lc-c7{--c:var(--lc-s7)} .lc-c8{--c:var(--lc-s8)} .lc-cap { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin-bottom: 6px; } .lc-title { font-weight: 650; font-size: 0.9375rem; overflow-wrap: anywhere; } .lc-unit { color: var(--lc-muted); font-size: 0.75rem; } .lc-note { flex-basis: 100%; color: var(--lc-muted); font-size: 0.75rem; overflow-wrap: anywhere; } .lc-svg { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; } .lc-t-sparkline { display: inline-block; vertical-align: middle; } .lc-t-sparkline .lc-svg { width: auto; } .lc-grid { stroke: var(--lc-grid); stroke-width: 1; } .lc-axis { stroke: var(--lc-muted); stroke-width: 1; } .lc-tick, .lc-axis-title, .lc-psub { fill: var(--lc-muted); font-size: 12px; } .lc-t-multiples .lc-tick { font-size: 10.5px; } .lc-psub { font-size: 10.5px; } .lc-psub-q { fill: var(--lc-ink); font-weight: 650; } .lc-ptitle { fill: var(--lc-ink); font-size: 13px; font-weight: 650; } .lc-empty { fill: var(--lc-muted); font-size: 13px; } .lc-center { fill: var(--lc-ink); font-weight: 700; } .lc-center-sub { fill: var(--lc-muted); font-size: 11px; } /* Value / end labels (0.8.0): name line in ink, value line bold and tinted by the mark's colour (mixed with ink so small text keeps contrast); a surface halo keeps them legible over grid lines and fills. Same recipe as the sankey labels. */ .lc-lbls { pointer-events: none; transition: opacity 0.15s ease; } .lc-end, .lc-val { font-size: 11px; fill: var(--lc-ink); paint-order: stroke; stroke: var(--lc-surface); stroke-width: 3px; stroke-linejoin: round; } .lc-lbl-v, .lc-val { font-weight: 700; } .lc-lbl-v, .lc-val:not(.lc-val-in, .lc-val-sum) { fill: color-mix(in oklab, var(--c, var(--lc-ink)) 68%, var(--lc-ink)); } .lc-val-in { font-weight: 650; } .lc-val-sum { fill: var(--lc-ink); } .lc-lead { fill: none; stroke: var(--lc-muted); stroke-width: 1; } .lc-panel-empty { fill: none; stroke: var(--lc-grid); stroke-dasharray: 4 3; } /* While a value box is open the label layer steps back so the box reads cleanly. */ /* Ring centre: the total by default; the hovered / focused slice's name, value and share instead (rules below). */ .lc-center-alt { display: none; } /* The ring centre already shows the hovered slice, so the donut hides its value box (the aria-label keeps the text). */ .lc-t-donut .lc-pt-slice .lc-tip { display: none; } .lc-center-v { fill: color-mix(in oklab, var(--c, var(--lc-ink)) 68%, var(--lc-ink)); } .lc-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .lc-area { fill: var(--c); fill-opacity: var(--lc-area-opacity); stroke: none; } .lc-t-sparkline .lc-area { fill-opacity: 0.12; } .lc-bar, .lc-slice { fill: var(--c); } .lc-slice { stroke: var(--lc-surface); stroke-width: 2; } .lc-dot { fill: var(--c); stroke: var(--lc-surface); stroke-width: 1.5; opacity: 0; } .lc-dot-vis { opacity: 1; } .lc-hit { fill: transparent; } .lc-pt { outline: none; cursor: default; } .lc-pt:hover .lc-dot, .lc-pt:focus .lc-dot { opacity: 1; } .lc-pt:focus .lc-bar, .lc-pt:focus .lc-slice, .lc-pt:hover .lc-bar, .lc-pt:hover .lc-slice { stroke: var(--lc-ink); stroke-width: 2; } .lc-pt:focus .lc-dot { stroke: var(--lc-ink); stroke-width: 2; } .lc-pt:focus-visible .lc-hit { stroke: var(--lc-ink); stroke-width: 1.5; stroke-dasharray: 3 2; } .lc-tip { display: none; pointer-events: none; } .lc-pt:hover .lc-tip, .lc-pt:focus .lc-tip { display: block; } .lc-tip rect { fill: var(--lc-ink); } .lc-tip text { fill: var(--lc-surface); font-size: 12px; } .lc-tip-v { font-weight: 700; } .lc-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; padding: 0; font-size: 0.75rem; } .lc-legend li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; } .lc-ln { overflow-wrap: anywhere; } .lc-lv { color: var(--lc-muted); } .lc-q { color: var(--lc-muted); border: 1px solid var(--lc-grid); border-radius: 4px; padding: 0 5px; font-size: 0.6875rem; } .lc-sw { flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--c); } .lc-data { margin-top: 8px; font-size: 0.75rem; } .lc-data summary { cursor: pointer; color: var(--lc-muted); padding: 4px 0; min-height: 24px; } .lc-data summary:focus-visible { outline: 2px solid var(--lc-s1); outline-offset: 2px; } .lc-scroll { overflow-x: auto; max-width: 100%; } .lc table { border-collapse: collapse; margin-top: 6px; } .lc caption { text-align: left; color: var(--lc-muted); padding-bottom: 4px; } .lc th, .lc td { border-bottom: 1px solid var(--lc-grid); padding: 3px 10px 3px 0; text-align: left; font-weight: 400; white-space: nowrap; } .lc thead th { font-weight: 650; } .lc td { font-variant-numeric: tabular-nums; } .lc-na { color: var(--lc-muted); font-style: italic; } .lc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Hover / focus highlight (0.8.0), CSS only: the hovered mark's series stays and the other series fade; the label layer steps back except the labels of that series. Keyboard focus behaves the same. Rules exist for series and slices 0..11 (MAX_SERIES). Multiples are excluded: panels share series positions. */ :is(.lc-t-line, .lc-t-area, .lc-t-bar) :is(.lc-line, .lc-area, .lc-dot-vis, .lc-bar), :is(.lc-t-donut, .lc-t-pie) .lc-slice, .lc .lc-lbls > * { transition: opacity 0.15s ease; } :is(.lc-t-line, .lc-t-area, .lc-t-bar) .lc-svg:has(.lc-pt:hover, .lc-pt:focus) :is(.lc-line, .lc-area, .lc-dot-vis, .lc-bar) { opacity: 0.25; } .lc .lc-svg:has(.lc-pt:hover, .lc-pt:focus) .lc-lbls > * { opacity: 0.3; } :is(.lc-t-donut, .lc-t-pie) .lc-svg:has(.lc-pt-slice:hover, .lc-pt-slice:focus) .lc-slice { opacity: 0.3; } :is(.lc-t-donut, .lc-t-pie) .lc-svg .lc-pt-slice:is(:hover, :focus) > .lc-slice { opacity: 1; } .lc-t-donut .lc-svg:has(.lc-pt-slice:hover, .lc-pt-slice:focus) .lc-center-main { display: none; } :is(.lc-t-line, .lc-t-area, .lc-t-bar) .lc-svg:has(.lc-pt:hover > [data-s="0"], .lc-pt:focus > [data-s="0"]) :is(:is(.lc-line, .lc-area, .lc-dot-vis, .lc-bar)[data-s="0"], .lc-lbls > [data-s="0"]) { opacity: 1; } :is(.lc-t-donut, .lc-t-pie) .lc-svg:has(.lc-pt-slice:hover > [data-i="0"], .lc-pt-slice:focus > [data-i="0"]) .lc-lbls > [data-i="0"] { opacity: 1; } .lc-t-donut .lc-svg:has(.lc-pt-slice:hover > [data-i="0"], .lc-pt-slice:focus > [data-i="0"]) .lc-center-alt[data-i="0"] { display: block; } :is(.lc-t-line, .lc-t-area, .lc-t-bar) .lc-svg:has(.lc-pt:hover > [data-s="1"], .lc-pt:focus > [data-s="1"]) :is(:is(.lc-line, .lc-area, .lc-dot-vis, .lc-bar)[data-s="1"], .lc-lbls > [data-s="1"]) { opacity: 1; } :is(.lc-t-donut, .lc-t-pie) .lc-svg:has(.lc-pt-slice:hover > [data-i="1"], .lc-pt-slice:focus > [data-i="1"]) .lc-lbls > [data-i="1"] { opacity: 1; } .lc-t-donut .lc-svg:has(.lc-pt-slice:hover > [data-i="1"], .lc-pt-slice:focus > [data-i="1"]) .lc-center-alt[data-i="1"] { display: block; } :is(.lc-t-line, .lc-t-area, .lc-t-bar) .lc-svg:has(.lc-pt:hover > [data-s="2"], .lc-pt:focus > [data-s="2"]) :is(:is(.lc-line, .lc-area, .lc-dot-vis, .lc-bar)[data-s="2"], .lc-lbls > [data-s="2"]) { opacity: 1; } :is(.lc-t-donut, .lc-t-pie) .lc-svg:has(.lc-pt-slice:hover > [data-i="2"], .lc-pt-slice:focus > [data-i="2"]) .lc-lbls > [data-i="2"] { opacity: 1; } .lc-t-donut .lc-svg:has(.lc-pt-slice:hover > [data-i="2"], .lc-pt-slice:focus > [data-i="2"]) .lc-center-alt[data-i="2"] { display: block; } :is(.lc-t-line, .lc-t-area, .lc-t-bar) .lc-svg:has(.lc-pt:hover > [data-s="3"], .lc-pt:focus > [data-s="3"]) :is(:is(.lc-line, .lc-area, .lc-dot-vis, .lc-bar)[data-s="3"], .lc-lbls > [data-s="3"]) { opacity: 1; } :is(.lc-t-donut, .lc-t-pie) .lc-svg:has(.lc-pt-slice:hover > [data-i="3"], .lc-pt-slice:focus > [data-i="3"]) .lc-lbls > [data-i="3"] { opacity: 1; } .lc-t-donut .lc-svg:has(.lc-pt-slice:hover > [data-i="3"], .lc-pt-slice:focus > [data-i="3"]) .lc-center-alt[data-i="3"] { display: block; } :is(.lc-t-line, .lc-t-area, .lc-t-bar) .lc-svg:has(.lc-pt:hover > [data-s="4"], .lc-pt:focus > [data-s="4"]) :is(:is(.lc-line, .lc-area, .lc-dot-vis, .lc-bar)[data-s="4"], .lc-lbls > [data-s="4"]) { opacity: 1; } :is(.lc-t-donut, .lc-t-pie) .lc-svg:has(.lc-pt-slice:hover > [data-i="4"], .lc-pt-slice:focus > [data-i="4"]) .lc-lbls > [data-i="4"] { opacity: 1; } .lc-t-donut .lc-svg:has(.lc-pt-slice:hover > [data-i="4"], .lc-pt-slice:focus > [data-i="4"]) .lc-center-alt[data-i="4"] { display: block; } :is(.lc-t-line, .lc-t-area, .lc-t-bar) .lc-svg:has(.lc-pt:hover > [data-s="5"], .lc-pt:focus > [data-s="5"]) :is(:is(.lc-line, .lc-area, .lc-dot-vis, .lc-bar)[data-s="5"], .lc-lbls > [data-s="5"]) { opacity: 1; } :is(.lc-t-donut, .lc-t-pie) .lc-svg:has(.lc-pt-slice:hover > [data-i="5"], .lc-pt-slice:focus > [data-i="5"]) .lc-lbls > [data-i="5"] { opacity: 1; } .lc-t-donut .lc-svg:has(.lc-pt-slice:hover > [data-i="5"], .lc-pt-slice:focus > [data-i="5"]) .lc-center-alt[data-i="5"] { display: block; } :is(.lc-t-line, .lc-t-area, .lc-t-bar) .lc-svg:has(.lc-pt:hover > [data-s="6"], .lc-pt:focus > [data-s="6"]) :is(:is(.lc-line, .lc-area, .lc-dot-vis, .lc-bar)[data-s="6"], .lc-lbls > [data-s="6"]) { opacity: 1; } :is(.lc-t-donut, .lc-t-pie) .lc-svg:has(.lc-pt-slice:hover > [data-i="6"], .lc-pt-slice:focus > [data-i="6"]) .lc-lbls > [data-i="6"] { opacity: 1; } .lc-t-donut .lc-svg:has(.lc-pt-slice:hover > [data-i="6"], .lc-pt-slice:focus > [data-i="6"]) .lc-center-alt[data-i="6"] { display: block; } :is(.lc-t-line, .lc-t-area, .lc-t-bar) .lc-svg:has(.lc-pt:hover > [data-s="7"], .lc-pt:focus > [data-s="7"]) :is(:is(.lc-line, .lc-area, .lc-dot-vis, .lc-bar)[data-s="7"], .lc-lbls > [data-s="7"]) { opacity: 1; } :is(.lc-t-donut, .lc-t-pie) .lc-svg:has(.lc-pt-slice:hover > [data-i="7"], .lc-pt-slice:focus > [data-i="7"]) .lc-lbls > [data-i="7"] { opacity: 1; } .lc-t-donut .lc-svg:has(.lc-pt-slice:hover > [data-i="7"], .lc-pt-slice:focus > [data-i="7"]) .lc-center-alt[data-i="7"] { display: block; } :is(.lc-t-line, .lc-t-area, .lc-t-bar) .lc-svg:has(.lc-pt:hover > [data-s="8"], .lc-pt:focus > [data-s="8"]) :is(:is(.lc-line, .lc-area, .lc-dot-vis, .lc-bar)[data-s="8"], .lc-lbls > [data-s="8"]) { opacity: 1; } :is(.lc-t-donut, .lc-t-pie) .lc-svg:has(.lc-pt-slice:hover > [data-i="8"], .lc-pt-slice:focus > [data-i="8"]) .lc-lbls > [data-i="8"] { opacity: 1; } .lc-t-donut .lc-svg:has(.lc-pt-slice:hover > [data-i="8"], .lc-pt-slice:focus > [data-i="8"]) .lc-center-alt[data-i="8"] { display: block; } :is(.lc-t-line, .lc-t-area, .lc-t-bar) .lc-svg:has(.lc-pt:hover > [data-s="9"], .lc-pt:focus > [data-s="9"]) :is(:is(.lc-line, .lc-area, .lc-dot-vis, .lc-bar)[data-s="9"], .lc-lbls > [data-s="9"]) { opacity: 1; } :is(.lc-t-donut, .lc-t-pie) .lc-svg:has(.lc-pt-slice:hover > [data-i="9"], .lc-pt-slice:focus > [data-i="9"]) .lc-lbls > [data-i="9"] { opacity: 1; } .lc-t-donut .lc-svg:has(.lc-pt-slice:hover > [data-i="9"], .lc-pt-slice:focus > [data-i="9"]) .lc-center-alt[data-i="9"] { display: block; } :is(.lc-t-line, .lc-t-area, .lc-t-bar) .lc-svg:has(.lc-pt:hover > [data-s="10"], .lc-pt:focus > [data-s="10"]) :is(:is(.lc-line, .lc-area, .lc-dot-vis, .lc-bar)[data-s="10"], .lc-lbls > [data-s="10"]) { opacity: 1; } :is(.lc-t-donut, .lc-t-pie) .lc-svg:has(.lc-pt-slice:hover > [data-i="10"], .lc-pt-slice:focus > [data-i="10"]) .lc-lbls > [data-i="10"] { opacity: 1; } .lc-t-donut .lc-svg:has(.lc-pt-slice:hover > [data-i="10"], .lc-pt-slice:focus > [data-i="10"]) .lc-center-alt[data-i="10"] { display: block; } :is(.lc-t-line, .lc-t-area, .lc-t-bar) .lc-svg:has(.lc-pt:hover > [data-s="11"], .lc-pt:focus > [data-s="11"]) :is(:is(.lc-line, .lc-area, .lc-dot-vis, .lc-bar)[data-s="11"], .lc-lbls > [data-s="11"]) { opacity: 1; } :is(.lc-t-donut, .lc-t-pie) .lc-svg:has(.lc-pt-slice:hover > [data-i="11"], .lc-pt-slice:focus > [data-i="11"]) .lc-lbls > [data-i="11"] { opacity: 1; } .lc-t-donut .lc-svg:has(.lc-pt-slice:hover > [data-i="11"], .lc-pt-slice:focus > [data-i="11"]) .lc-center-alt[data-i="11"] { display: block; } @media (prefers-reduced-motion: no-preference) { .lc-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lc-draw 0.8s ease-out forwards; } .lc-bar, .lc-slice, .lc-area { animation: lc-fade 0.5s ease-out both; } } @keyframes lc-draw { to { stroke-dashoffset: 0; } } @keyframes lc-fade { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .lc * { animation: none !important; transition: none !important; } } /* beeswarm.css */ .lc-swarm-dot { fill: var(--c); fill-opacity: 0.85; stroke: var(--lc-surface); stroke-width: 0.75; } .lc-swarm-over { fill-opacity: 1; stroke: var(--lc-ink); stroke-width: 1.25; } .lc-swarm-sep { stroke: var(--lc-grid); stroke-width: 1; stroke-dasharray: 2 3; } .lc-swarm-label { fill: var(--lc-ink); font-size: 12px; } .lc-swarm-na { fill: var(--lc-muted); font-size: 11px; font-style: italic; } .lc-swarm-thr { stroke: var(--lc-ink); stroke-width: 1.5; stroke-dasharray: 5 3; } .lc-swarm-thr-label { fill: var(--lc-ink); font-size: 12px; font-weight: 650; } .lc-pt:hover .lc-swarm-dot, .lc-pt:focus .lc-swarm-dot { stroke: var(--lc-ink); stroke-width: 2; fill-opacity: 1; } /* box.css */ .lc-box { fill: var(--c); fill-opacity: 0.28; stroke: var(--c); stroke-width: 1.5; } .lc-box-whisker { stroke: var(--c); stroke-width: 1.5; } .lc-box-median { stroke: var(--lc-ink); stroke-width: 2; } .lc-outlier { fill: var(--lc-surface); stroke: var(--c); stroke-width: 1.5; } .lc-box-na { fill: var(--lc-muted); font-size: 11px; font-style: italic; } .lc-pt:hover .lc-box, .lc-pt:focus .lc-box { fill-opacity: 0.45; stroke: var(--lc-ink); } .lc-pt:hover .lc-outlier, .lc-pt:focus .lc-outlier { stroke: var(--lc-ink); stroke-width: 2; } /* bubble.css */ .lc-t-bubble .lc-point { fill-opacity: 0.55; stroke: var(--c); stroke-width: 1; } .lc-t-bubble .lc-pt:hover .lc-point, .lc-t-bubble .lc-pt:focus .lc-point { fill-opacity: 0.8; stroke: var(--lc-ink); stroke-width: 2; } .lc-size-legend { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; margin: 8px 0 0; font-size: 0.75rem; } .lc-size-item { display: inline-flex; align-items: center; gap: 4px; } .lc-size-svg { display: block; flex: none; } .lc-size-sw { fill: none; stroke: var(--lc-muted); stroke-width: 1; } /* bullet.css */ .lc-bullet-bg, .lc-bullet-range { fill: var(--lc-muted); } .lc-bullet-bg { fill-opacity: 0.08; } .lc-br-0 { fill-opacity: 0.34; } .lc-br-1 { fill-opacity: 0.26; } .lc-br-2 { fill-opacity: 0.19; } .lc-br-3 { fill-opacity: 0.14; } .lc-br-4 { fill-opacity: 0.11; } .lc-bullet { fill: var(--c); } .lc-pt:hover .lc-bullet, .lc-pt:focus .lc-bullet { stroke: var(--lc-ink); stroke-width: 1.5; } .lc-bullet-target { stroke: var(--lc-ink); stroke-width: 3; } .lc-bullet-lbl { fill: var(--lc-ink); font-size: 12px; } .lc-bullet-na { fill: var(--lc-muted); font-size: 11px; font-style: italic; } .lc-pt-bullet:focus-visible .lc-bullet-lbl { text-decoration: underline; } /* bump.css */ .lc-bump-line { fill: none; stroke: var(--c); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; opacity: 0.85; } .lc-bump-dot { fill: var(--c); stroke: var(--lc-surface); stroke-width: 1.5; } .lc-bump-label { fill: var(--lc-ink); font-size: 12px; } .lc-pt:hover .lc-bump-dot, .lc-pt:focus .lc-bump-dot { stroke: var(--lc-ink); stroke-width: 2; } /* Hover / focus: the pointed series (line, dots, end label; data-s = series index) stays, the rest fade. Rules exist for the first 12 series (MAX_SERIES). */ .lc-t-bump :is(.lc-bump-line, .lc-pt-bump, .lc-bump-label) { transition: opacity 0.15s ease; } .lc-t-bump .lc-svg:has(.lc-pt:hover, .lc-pt:focus) :is(.lc-bump-line, .lc-pt-bump, .lc-bump-label) { opacity: 0.25; } .lc-t-bump .lc-svg:has(.lc-pt[data-s="0"]:hover, .lc-pt[data-s="0"]:focus) :is(.lc-bump-line, .lc-pt-bump, .lc-bump-label)[data-s="0"] { opacity: 1; } .lc-t-bump .lc-svg:has(.lc-pt[data-s="1"]:hover, .lc-pt[data-s="1"]:focus) :is(.lc-bump-line, .lc-pt-bump, .lc-bump-label)[data-s="1"] { opacity: 1; } .lc-t-bump .lc-svg:has(.lc-pt[data-s="2"]:hover, .lc-pt[data-s="2"]:focus) :is(.lc-bump-line, .lc-pt-bump, .lc-bump-label)[data-s="2"] { opacity: 1; } .lc-t-bump .lc-svg:has(.lc-pt[data-s="3"]:hover, .lc-pt[data-s="3"]:focus) :is(.lc-bump-line, .lc-pt-bump, .lc-bump-label)[data-s="3"] { opacity: 1; } .lc-t-bump .lc-svg:has(.lc-pt[data-s="4"]:hover, .lc-pt[data-s="4"]:focus) :is(.lc-bump-line, .lc-pt-bump, .lc-bump-label)[data-s="4"] { opacity: 1; } .lc-t-bump .lc-svg:has(.lc-pt[data-s="5"]:hover, .lc-pt[data-s="5"]:focus) :is(.lc-bump-line, .lc-pt-bump, .lc-bump-label)[data-s="5"] { opacity: 1; } .lc-t-bump .lc-svg:has(.lc-pt[data-s="6"]:hover, .lc-pt[data-s="6"]:focus) :is(.lc-bump-line, .lc-pt-bump, .lc-bump-label)[data-s="6"] { opacity: 1; } .lc-t-bump .lc-svg:has(.lc-pt[data-s="7"]:hover, .lc-pt[data-s="7"]:focus) :is(.lc-bump-line, .lc-pt-bump, .lc-bump-label)[data-s="7"] { opacity: 1; } .lc-t-bump .lc-svg:has(.lc-pt[data-s="8"]:hover, .lc-pt[data-s="8"]:focus) :is(.lc-bump-line, .lc-pt-bump, .lc-bump-label)[data-s="8"] { opacity: 1; } .lc-t-bump .lc-svg:has(.lc-pt[data-s="9"]:hover, .lc-pt[data-s="9"]:focus) :is(.lc-bump-line, .lc-pt-bump, .lc-bump-label)[data-s="9"] { opacity: 1; } .lc-t-bump .lc-svg:has(.lc-pt[data-s="10"]:hover, .lc-pt[data-s="10"]:focus) :is(.lc-bump-line, .lc-pt-bump, .lc-bump-label)[data-s="10"] { opacity: 1; } .lc-t-bump .lc-svg:has(.lc-pt[data-s="11"]:hover, .lc-pt[data-s="11"]:focus) :is(.lc-bump-line, .lc-pt-bump, .lc-bump-label)[data-s="11"] { opacity: 1; } /* calendar.css */ .lc-day { fill: var(--c); } .lc-cal-0 { fill-opacity: 0.12; } .lc-cal-1 { fill-opacity: 0.25; } .lc-cal-2 { fill-opacity: 0.39; } .lc-cal-3 { fill-opacity: 0.53; } .lc-cal-4 { fill-opacity: 0.67; } .lc-cal-5 { fill-opacity: 0.83; } .lc-cal-6 { fill-opacity: 1; } .lc-sw.lc-cal-0 { opacity: 0.12; } .lc-sw.lc-cal-1 { opacity: 0.25; } .lc-sw.lc-cal-2 { opacity: 0.39; } .lc-sw.lc-cal-3 { opacity: 0.53; } .lc-sw.lc-cal-4 { opacity: 0.67; } .lc-sw.lc-cal-5 { opacity: 0.83; } .lc-sw.lc-cal-6 { opacity: 1; } .lc-day-na { fill: var(--lc-surface); stroke: var(--lc-muted); stroke-width: 1; stroke-dasharray: 2 2; stroke-opacity: 0.7; } .lc-t-calendar .lc-sw.lc-sw-na { background: var(--lc-surface); border: 1px dashed var(--lc-muted); box-sizing: border-box; } .lc-pt:hover .lc-day, .lc-pt:focus .lc-day, .lc-pt:hover .lc-day-na, .lc-pt:focus .lc-day-na { stroke: var(--lc-ink); stroke-width: 1.5; stroke-dasharray: none; } /* candlestick.css */ .lc-candle-up { --c: var(--lc-up); } .lc-candle-down { --c: var(--lc-down); } .lc-candle { fill: var(--c); stroke: var(--c); stroke-width: 1; } .lc-candle-wick { stroke: var(--c); stroke-width: 1.25; } .lc-cs-x { font-size: 11px; } .lc-cs-ma { fill: none; stroke: var(--c); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; } .lc-pt:hover .lc-candle, .lc-pt:focus .lc-candle { stroke: var(--lc-ink); stroke-width: 2; } /* Hover / focus: the hovered day's candle and volume bar stay, the other days fade; indicator lines are untouched. */ .lc-t-candlestick :is(.lc-candle, .lc-candle-wick, .lc-fin-vol) { transition: opacity 0.15s ease; } .lc-t-candlestick .lc-svg:has(.lc-pt-candle:is(:hover, :focus)) .lc-pt-candle:not(:hover, :focus) :is(.lc-candle, .lc-candle-wick, .lc-fin-vol) { opacity: 0.4; } /* chord.css */ .lc-ribbon { fill: var(--c); fill-opacity: 0.55; stroke: var(--c); stroke-opacity: 0.8; stroke-width: 0.5; } .lc-carc { fill: var(--c); stroke: var(--lc-surface); stroke-width: 1; } .lc-clabel { fill: var(--lc-ink); font-size: 12px; pointer-events: none; } /* Second label line: the group total, bold and tinted by the group colour (mixed with ink for contrast). */ .lc-clabel-val { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; fill: var(--lc-ink); fill: color-mix(in oklab, var(--c, var(--lc-ink)) 68%, var(--lc-ink)); } .lc-pt:hover .lc-ribbon, .lc-pt:focus .lc-ribbon { fill-opacity: 0.9; stroke: var(--lc-ink); stroke-width: 1.5; } .lc-pt:hover .lc-carc, .lc-pt:focus .lc-carc { stroke: var(--lc-ink); stroke-width: 2; } /* Hover / focus: a hovered ribbon stays and the other ribbons fade; a hovered arc keeps the ribbons that start or end at it (data-s / data-t are the ribbon's group indices; rules exist for the first 40 groups). Labels fade while a value box is open. */ .lc-t-chord :is(.lc-ribbon, .lc-carc, .lc-clabels) { transition: opacity 0.15s ease; } .lc-t-chord .lc-svg:has(.lc-pt-ribbon:is(:hover, :focus)) .lc-ribbon { opacity: 0.12; } .lc-t-chord .lc-svg .lc-pt-ribbon:is(:hover, :focus) .lc-ribbon { opacity: 1; } .lc-t-chord .lc-svg:has(.lc-pt:is(:hover, :focus)) .lc-clabels { opacity: 0.3; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="0"]) .lc-ribbon:not([data-s="0"], [data-t="0"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="0"]) .lc-carc:not([data-i="0"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="1"]) .lc-ribbon:not([data-s="1"], [data-t="1"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="1"]) .lc-carc:not([data-i="1"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="2"]) .lc-ribbon:not([data-s="2"], [data-t="2"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="2"]) .lc-carc:not([data-i="2"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="3"]) .lc-ribbon:not([data-s="3"], [data-t="3"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="3"]) .lc-carc:not([data-i="3"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="4"]) .lc-ribbon:not([data-s="4"], [data-t="4"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="4"]) .lc-carc:not([data-i="4"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="5"]) .lc-ribbon:not([data-s="5"], [data-t="5"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="5"]) .lc-carc:not([data-i="5"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="6"]) .lc-ribbon:not([data-s="6"], [data-t="6"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="6"]) .lc-carc:not([data-i="6"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="7"]) .lc-ribbon:not([data-s="7"], [data-t="7"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="7"]) .lc-carc:not([data-i="7"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="8"]) .lc-ribbon:not([data-s="8"], [data-t="8"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="8"]) .lc-carc:not([data-i="8"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="9"]) .lc-ribbon:not([data-s="9"], [data-t="9"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="9"]) .lc-carc:not([data-i="9"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="10"]) .lc-ribbon:not([data-s="10"], [data-t="10"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="10"]) .lc-carc:not([data-i="10"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="11"]) .lc-ribbon:not([data-s="11"], [data-t="11"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="11"]) .lc-carc:not([data-i="11"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="12"]) .lc-ribbon:not([data-s="12"], [data-t="12"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="12"]) .lc-carc:not([data-i="12"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="13"]) .lc-ribbon:not([data-s="13"], [data-t="13"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="13"]) .lc-carc:not([data-i="13"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="14"]) .lc-ribbon:not([data-s="14"], [data-t="14"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="14"]) .lc-carc:not([data-i="14"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="15"]) .lc-ribbon:not([data-s="15"], [data-t="15"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="15"]) .lc-carc:not([data-i="15"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="16"]) .lc-ribbon:not([data-s="16"], [data-t="16"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="16"]) .lc-carc:not([data-i="16"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="17"]) .lc-ribbon:not([data-s="17"], [data-t="17"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="17"]) .lc-carc:not([data-i="17"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="18"]) .lc-ribbon:not([data-s="18"], [data-t="18"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="18"]) .lc-carc:not([data-i="18"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="19"]) .lc-ribbon:not([data-s="19"], [data-t="19"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="19"]) .lc-carc:not([data-i="19"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="20"]) .lc-ribbon:not([data-s="20"], [data-t="20"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="20"]) .lc-carc:not([data-i="20"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="21"]) .lc-ribbon:not([data-s="21"], [data-t="21"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="21"]) .lc-carc:not([data-i="21"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="22"]) .lc-ribbon:not([data-s="22"], [data-t="22"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="22"]) .lc-carc:not([data-i="22"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="23"]) .lc-ribbon:not([data-s="23"], [data-t="23"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="23"]) .lc-carc:not([data-i="23"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="24"]) .lc-ribbon:not([data-s="24"], [data-t="24"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="24"]) .lc-carc:not([data-i="24"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="25"]) .lc-ribbon:not([data-s="25"], [data-t="25"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="25"]) .lc-carc:not([data-i="25"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="26"]) .lc-ribbon:not([data-s="26"], [data-t="26"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="26"]) .lc-carc:not([data-i="26"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="27"]) .lc-ribbon:not([data-s="27"], [data-t="27"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="27"]) .lc-carc:not([data-i="27"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="28"]) .lc-ribbon:not([data-s="28"], [data-t="28"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="28"]) .lc-carc:not([data-i="28"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="29"]) .lc-ribbon:not([data-s="29"], [data-t="29"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="29"]) .lc-carc:not([data-i="29"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="30"]) .lc-ribbon:not([data-s="30"], [data-t="30"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="30"]) .lc-carc:not([data-i="30"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="31"]) .lc-ribbon:not([data-s="31"], [data-t="31"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="31"]) .lc-carc:not([data-i="31"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="32"]) .lc-ribbon:not([data-s="32"], [data-t="32"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="32"]) .lc-carc:not([data-i="32"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="33"]) .lc-ribbon:not([data-s="33"], [data-t="33"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="33"]) .lc-carc:not([data-i="33"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="34"]) .lc-ribbon:not([data-s="34"], [data-t="34"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="34"]) .lc-carc:not([data-i="34"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="35"]) .lc-ribbon:not([data-s="35"], [data-t="35"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="35"]) .lc-carc:not([data-i="35"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="36"]) .lc-ribbon:not([data-s="36"], [data-t="36"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="36"]) .lc-carc:not([data-i="36"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="37"]) .lc-ribbon:not([data-s="37"], [data-t="37"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="37"]) .lc-carc:not([data-i="37"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="38"]) .lc-ribbon:not([data-s="38"], [data-t="38"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="38"]) .lc-carc:not([data-i="38"]) { opacity: 0.45; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="39"]) .lc-ribbon:not([data-s="39"], [data-t="39"]) { opacity: 0.12; } .lc-t-chord .lc-svg:has(.lc-pt-carc:is(:hover, :focus) > .lc-carc[data-i="39"]) .lc-carc:not([data-i="39"]) { opacity: 0.45; } /* cmp.css */ /* Shared label and hover rules for the comparison, distribution and time types (see cmp.ts). Not a chart type. */ /* Name line: ink with a surface halo so it stays readable over marks and grid lines. */ .lc-cm-lbl { fill: var(--lc-ink); font-size: 12px; pointer-events: none; paint-order: stroke; stroke: var(--lc-surface); stroke-width: 3px; stroke-linejoin: round; } /* Value line: bold, tinted by the mark colour mixed with ink so small text keeps contrast on both themes. */ .lc-cm-val { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; fill: var(--lc-ink); fill: color-mix(in oklab, var(--c, var(--lc-ink)) 68%, var(--lc-ink)); } .lc-cm-muted { fill: var(--lc-muted); font-size: 11px; } /* Small ink value for narrow columns (phone widths). */ .lc-cm-sm { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } .lc-cm-lead { fill: none; stroke: var(--lc-muted); stroke-width: 1; pointer-events: none; } /* Label layer above the marks: fades while a value box is open so the box reads cleanly. */ .lc-cm-lbls { transition: opacity 0.15s ease; } :is(.lc-t-waffle, .lc-t-segmented, .lc-t-funnel, .lc-t-gauge, .lc-t-bullet, .lc-t-slope, .lc-t-bump, .lc-t-stream, .lc-t-scatter, .lc-t-bubble, .lc-t-box, .lc-t-histogram, .lc-t-heatmap, .lc-t-calendar, .lc-t-lollipop, .lc-t-dumbbell, .lc-t-waterfall, .lc-t-pareto, .lc-t-marimekko, .lc-t-radar, .lc-t-parallel, .lc-t-ridgeline, .lc-t-beeswarm, .lc-t-combo, .lc-t-timeline) .lc-svg:has(.lc-pt:hover, .lc-pt:focus) .lc-cm-lbls { opacity: 0.3; } /* Types whose marks are independent items: the hovered or focused item stays and the rest fade. */ :is(.lc-t-waffle, .lc-t-segmented, .lc-t-funnel, .lc-t-bullet, .lc-t-slope, .lc-t-box, .lc-t-histogram, .lc-t-lollipop, .lc-t-dumbbell, .lc-t-waterfall, .lc-t-pareto, .lc-t-marimekko, .lc-t-parallel, .lc-t-ridgeline, .lc-t-timeline) .lc-pt { transition: opacity 0.15s ease; } :is(.lc-t-waffle, .lc-t-segmented, .lc-t-funnel, .lc-t-bullet, .lc-t-slope, .lc-t-box, .lc-t-histogram, .lc-t-lollipop, .lc-t-dumbbell, .lc-t-waterfall, .lc-t-pareto, .lc-t-marimekko, .lc-t-parallel, .lc-t-ridgeline, .lc-t-timeline) .lc-svg:has(.lc-pt:hover, .lc-pt:focus) .lc-pt:not(:hover, :focus) { opacity: 0.3; } /* combo.css */ .lc-combo-line { pointer-events: none; } .lc-combo-line.lc-combo-r { stroke-dasharray: 6 3; } .lc-combo-dot { opacity: 1; } .lc-combo-dot.lc-combo-r { fill: var(--lc-surface); stroke: var(--c); stroke-width: 2; } .lc-combo-neg { fill-opacity: 0.6; stroke: var(--c); stroke-width: 1; } /* dumbbell.css */ .lc-dumbbell-line { stroke: var(--lc-muted); stroke-width: 3; stroke-linecap: round; opacity: 0.55; } .lc-dumbbell { fill: var(--c); stroke: var(--lc-surface); stroke-width: 1.5; } /* Value labels use the shared bold tinted style (cmp.css: .lc-cm-lbl.lc-cm-val). */ .lc-pt:hover .lc-dumbbell-line, .lc-pt:focus .lc-dumbbell-line { opacity: 1; } .lc-pt:hover .lc-dumbbell, .lc-pt:focus .lc-dumbbell { stroke: var(--lc-ink); stroke-width: 2; } /* fin.css */ /* shared by the stock charts (src/charts/fin.ts) */ .lc-fin-up { --c: var(--lc-up); } .lc-fin-down { --c: var(--lc-down); } .lc-fin-flat { --c: var(--lc-flat); } .lc-fin-vol { fill: var(--c); fill-opacity: 0.5; } .lc-pt:hover .lc-fin-vol, .lc-pt:focus .lc-fin-vol { fill-opacity: 0.85; } .lc-fin-vt { font-size: 10.5px; } .lc-fin-ema { stroke-dasharray: 5 3; } .lc-fin-bollinger { stroke-width: 1.25; stroke-dasharray: 2 2; } .lc-fin-band { fill: var(--c); fill-opacity: 0.1; stroke: none; pointer-events: none; } .lc-fin-band-edge { fill: none; stroke: var(--c); stroke-width: 1; stroke-opacity: 0.7; pointer-events: none; } /* Crosshair of a day: hidden until its value box opens (hover or keyboard focus). */ .lc-fin-cross { stroke: var(--lc-ink); stroke-opacity: 0.45; stroke-width: 1; stroke-dasharray: 3 3; display: none; pointer-events: none; } .lc-pt:hover .lc-fin-cross, .lc-pt:focus .lc-fin-cross { display: block; } /* Last value tag: dotted guide to the right edge and the value in bold, tinted by the rise / fall colour (or the series colour) mixed with ink so it keeps contrast; a surface halo keeps it readable over marks. */ .lc-fin-last { pointer-events: none; } .lc-fin-last-line { stroke: var(--c); stroke-width: 1; stroke-dasharray: 2 3; stroke-opacity: 0.8; } .lc-fin-last-val { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; fill: var(--lc-ink); fill: color-mix(in oklab, var(--c, var(--lc-ink)) 68%, var(--lc-ink)); paint-order: stroke; stroke: var(--lc-surface); stroke-width: 3px; stroke-linejoin: round; } /* funnel.css */ .lc-funnel { fill: var(--c); } .lc-pt:hover .lc-funnel, .lc-pt:focus .lc-funnel { stroke: var(--lc-ink); stroke-width: 2; } .lc-funnel-lbl { fill: var(--lc-ink); font-size: 12px; } /* .lc-funnel-val (0.7 and earlier, right-aligned column) is replaced by the bold value after each bar (cmp.css). */ .lc-funnel-conv { fill: var(--lc-muted); font-size: 11px; } .lc-funnel-na { fill: var(--lc-muted); font-size: 12px; font-style: italic; } /* gauge.css */ .lc-gauge-track { fill: var(--lc-grid); } .lc-gauge-band { fill: var(--lc-muted); } .lc-gb-0 { fill-opacity: 0.32; } .lc-gb-1 { fill-opacity: 0.22; } .lc-gb-2 { fill-opacity: 0.14; } .lc-gb-3 { fill-opacity: 0.08; } .lc-gb-col { fill: var(--c); fill-opacity: 0.35; } .lc-gauge { fill: var(--c); } .lc-pt:hover .lc-gauge, .lc-pt:focus .lc-gauge { stroke: var(--lc-ink); stroke-width: 1.5; } .lc-gauge-target { stroke: var(--lc-ink); stroke-width: 3; stroke-linecap: round; } /* Big value tinted by the arc colour (mixed with ink so it keeps contrast on both themes). */ .lc-gauge-val { font-variant-numeric: tabular-nums; fill: var(--lc-ink); fill: color-mix(in oklab, var(--c, var(--lc-ink)) 68%, var(--lc-ink)); } .lc-gauge-lbl { font-size: 12px; } .lc-gauge-tgt { font-variant-numeric: tabular-nums; } /* heatmap.css */ .lc-hcell { fill: var(--c); } .lc-heat-0 { fill-opacity: 0.12; } .lc-heat-1 { fill-opacity: 0.25; } .lc-heat-2 { fill-opacity: 0.39; } .lc-heat-3 { fill-opacity: 0.53; } .lc-heat-4 { fill-opacity: 0.67; } .lc-heat-5 { fill-opacity: 0.83; } .lc-heat-6 { fill-opacity: 1; } .lc-sw.lc-heat-0 { opacity: 0.12; } .lc-sw.lc-heat-1 { opacity: 0.25; } .lc-sw.lc-heat-2 { opacity: 0.39; } .lc-sw.lc-heat-3 { opacity: 0.53; } .lc-sw.lc-heat-4 { opacity: 0.67; } .lc-sw.lc-heat-5 { opacity: 0.83; } .lc-sw.lc-heat-6 { opacity: 1; } .lc-hcell-na { fill: var(--lc-surface); stroke: var(--lc-muted); stroke-width: 1; stroke-dasharray: 3 2; } .lc-hcell-x { stroke: var(--lc-muted); stroke-width: 1; opacity: 0.6; } .lc-sw.lc-sw-na { background: var(--lc-surface); border: 1px dashed var(--lc-muted); box-sizing: border-box; } .lc-scale { gap: 4px 8px; } .lc-hval { fill: var(--lc-ink); font-size: 11px; pointer-events: none; } .lc-hval-on { fill: var(--lc-surface); } .lc-pt:hover .lc-hcell, .lc-pt:focus .lc-hcell, .lc-pt:hover .lc-hcell-na, .lc-pt:focus .lc-hcell-na { stroke: var(--lc-ink); stroke-width: 2; stroke-dasharray: none; } /* Hover / focus: the pointed cell's row and column stay, the other cells fade (crosshair). Rules exist for the first 20 rows and 20 columns; beyond that only the cell outline marks the spot. */ .lc-t-heatmap .lc-pt-hcell { transition: opacity 0.15s ease; } .lc-t-heatmap .lc-svg:has(.lc-pt-hcell:hover, .lc-pt-hcell:focus) .lc-pt-hcell { opacity: 0.35; } .lc-t-heatmap .lc-svg:has([data-r="0"]:hover, .lc-pt-hcell:focus > [data-r="0"]) .lc-pt-hcell:has([data-r="0"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="0"]:hover, .lc-pt-hcell:focus > [data-c="0"]) .lc-pt-hcell:has([data-c="0"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="1"]:hover, .lc-pt-hcell:focus > [data-r="1"]) .lc-pt-hcell:has([data-r="1"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="1"]:hover, .lc-pt-hcell:focus > [data-c="1"]) .lc-pt-hcell:has([data-c="1"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="2"]:hover, .lc-pt-hcell:focus > [data-r="2"]) .lc-pt-hcell:has([data-r="2"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="2"]:hover, .lc-pt-hcell:focus > [data-c="2"]) .lc-pt-hcell:has([data-c="2"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="3"]:hover, .lc-pt-hcell:focus > [data-r="3"]) .lc-pt-hcell:has([data-r="3"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="3"]:hover, .lc-pt-hcell:focus > [data-c="3"]) .lc-pt-hcell:has([data-c="3"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="4"]:hover, .lc-pt-hcell:focus > [data-r="4"]) .lc-pt-hcell:has([data-r="4"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="4"]:hover, .lc-pt-hcell:focus > [data-c="4"]) .lc-pt-hcell:has([data-c="4"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="5"]:hover, .lc-pt-hcell:focus > [data-r="5"]) .lc-pt-hcell:has([data-r="5"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="5"]:hover, .lc-pt-hcell:focus > [data-c="5"]) .lc-pt-hcell:has([data-c="5"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="6"]:hover, .lc-pt-hcell:focus > [data-r="6"]) .lc-pt-hcell:has([data-r="6"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="6"]:hover, .lc-pt-hcell:focus > [data-c="6"]) .lc-pt-hcell:has([data-c="6"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="7"]:hover, .lc-pt-hcell:focus > [data-r="7"]) .lc-pt-hcell:has([data-r="7"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="7"]:hover, .lc-pt-hcell:focus > [data-c="7"]) .lc-pt-hcell:has([data-c="7"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="8"]:hover, .lc-pt-hcell:focus > [data-r="8"]) .lc-pt-hcell:has([data-r="8"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="8"]:hover, .lc-pt-hcell:focus > [data-c="8"]) .lc-pt-hcell:has([data-c="8"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="9"]:hover, .lc-pt-hcell:focus > [data-r="9"]) .lc-pt-hcell:has([data-r="9"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="9"]:hover, .lc-pt-hcell:focus > [data-c="9"]) .lc-pt-hcell:has([data-c="9"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="10"]:hover, .lc-pt-hcell:focus > [data-r="10"]) .lc-pt-hcell:has([data-r="10"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="10"]:hover, .lc-pt-hcell:focus > [data-c="10"]) .lc-pt-hcell:has([data-c="10"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="11"]:hover, .lc-pt-hcell:focus > [data-r="11"]) .lc-pt-hcell:has([data-r="11"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="11"]:hover, .lc-pt-hcell:focus > [data-c="11"]) .lc-pt-hcell:has([data-c="11"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="12"]:hover, .lc-pt-hcell:focus > [data-r="12"]) .lc-pt-hcell:has([data-r="12"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="12"]:hover, .lc-pt-hcell:focus > [data-c="12"]) .lc-pt-hcell:has([data-c="12"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="13"]:hover, .lc-pt-hcell:focus > [data-r="13"]) .lc-pt-hcell:has([data-r="13"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="13"]:hover, .lc-pt-hcell:focus > [data-c="13"]) .lc-pt-hcell:has([data-c="13"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="14"]:hover, .lc-pt-hcell:focus > [data-r="14"]) .lc-pt-hcell:has([data-r="14"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="14"]:hover, .lc-pt-hcell:focus > [data-c="14"]) .lc-pt-hcell:has([data-c="14"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="15"]:hover, .lc-pt-hcell:focus > [data-r="15"]) .lc-pt-hcell:has([data-r="15"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="15"]:hover, .lc-pt-hcell:focus > [data-c="15"]) .lc-pt-hcell:has([data-c="15"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="16"]:hover, .lc-pt-hcell:focus > [data-r="16"]) .lc-pt-hcell:has([data-r="16"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="16"]:hover, .lc-pt-hcell:focus > [data-c="16"]) .lc-pt-hcell:has([data-c="16"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="17"]:hover, .lc-pt-hcell:focus > [data-r="17"]) .lc-pt-hcell:has([data-r="17"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="17"]:hover, .lc-pt-hcell:focus > [data-c="17"]) .lc-pt-hcell:has([data-c="17"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="18"]:hover, .lc-pt-hcell:focus > [data-r="18"]) .lc-pt-hcell:has([data-r="18"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="18"]:hover, .lc-pt-hcell:focus > [data-c="18"]) .lc-pt-hcell:has([data-c="18"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-r="19"]:hover, .lc-pt-hcell:focus > [data-r="19"]) .lc-pt-hcell:has([data-r="19"]) { opacity: 1; } .lc-t-heatmap .lc-svg:has([data-c="19"]:hover, .lc-pt-hcell:focus > [data-c="19"]) .lc-pt-hcell:has([data-c="19"]) { opacity: 1; } /* histogram.css */ .lc-bin { fill: var(--c); } .lc-pt:hover .lc-bin, .lc-pt:focus .lc-bin { stroke: var(--lc-ink); stroke-width: 2; } /* lollipop.css */ .lc-lollipop-stem { stroke: var(--c); stroke-width: 2; stroke-linecap: round; } .lc-lollipop { fill: var(--c); stroke: var(--lc-surface); stroke-width: 1.5; } /* Value labels use the shared bold tinted style (cmp.css: .lc-cm-lbl.lc-cm-val). */ .lc-missing-note { font-size: 12px; } .lc-pt:hover .lc-lollipop, .lc-pt:focus .lc-lollipop { stroke: var(--lc-ink); stroke-width: 2; } .lc-pt:hover .lc-lollipop-stem, .lc-pt:focus .lc-lollipop-stem { stroke-width: 3; } /* map.css */ .lc-region { fill: var(--c); stroke: var(--lc-surface); stroke-width: 1; } .lc-map-0 { fill-opacity: 0.12; } .lc-map-1 { fill-opacity: 0.25; } .lc-map-2 { fill-opacity: 0.39; } .lc-map-3 { fill-opacity: 0.53; } .lc-map-4 { fill-opacity: 0.67; } .lc-map-5 { fill-opacity: 0.83; } .lc-map-6 { fill-opacity: 1; } .lc-sw.lc-map-0 { opacity: 0.12; } .lc-sw.lc-map-1 { opacity: 0.25; } .lc-sw.lc-map-2 { opacity: 0.39; } .lc-sw.lc-map-3 { opacity: 0.53; } .lc-sw.lc-map-4 { opacity: 0.67; } .lc-sw.lc-map-5 { opacity: 0.83; } .lc-sw.lc-map-6 { opacity: 1; } .lc-region-na { stroke: var(--lc-muted); stroke-width: 1; } .lc-map-nabg { fill: var(--lc-surface); } .lc-map-hatch { stroke: var(--lc-muted); opacity: 0.7; } .lc-sw.lc-sw-mapna { background: repeating-linear-gradient(45deg, var(--lc-muted) 0 1px, var(--lc-surface) 1px 3px); border: 1px solid var(--lc-muted); box-sizing: border-box; } .lc-map-legend { gap: 4px 8px; } .lc-maplabel { fill: var(--lc-ink); font-size: 11px; paint-order: stroke; stroke: var(--lc-surface); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; } /* Second label line (showValues): bold, tinted by the map hue mixed with ink so it keeps contrast on pale classes. */ .lc-maplabel-val { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; fill: var(--lc-ink); fill: color-mix(in oklab, var(--c, var(--lc-ink)) 68%, var(--lc-ink)); } .lc-pt:hover .lc-region, .lc-pt:focus .lc-region, .lc-pt:hover .lc-region-na, .lc-pt:focus .lc-region-na { stroke: var(--lc-ink); stroke-width: 2; } .lc-src { margin: 6px 0 0; color: var(--lc-muted); font-size: 0.6875rem; overflow-wrap: anywhere; } /* Hover / focus: the hovered province stays, the others fade; labels fade while the value box is open. */ .lc-t-map :is(.lc-region, .lc-region-na, .lc-maplabels) { transition: opacity 0.15s ease; } .lc-t-map .lc-svg:has(.lc-pt:is(:hover, :focus)) .lc-pt:not(:hover, :focus) :is(.lc-region, .lc-region-na) { opacity: 0.45; } .lc-t-map .lc-svg:has(.lc-pt:is(:hover, :focus)) .lc-maplabels { opacity: 0.3; } /* marimekko.css */ .lc-mekko { fill: var(--c); stroke: var(--lc-surface); stroke-width: 1.5; } .lc-mekko-lbl { fill: var(--lc-surface); font-size: 12px; font-weight: 600; pointer-events: none; } .lc-pt:hover .lc-mekko, .lc-pt:focus .lc-mekko { stroke: var(--lc-ink); stroke-width: 2; } /* marketmap.css */ .lc-mm { stroke: var(--lc-surface); stroke-width: 1; } .lc-mm-u2 { fill: var(--lc-up); } .lc-mm-u1 { fill: var(--lc-up); fill-opacity: 0.55; } .lc-mm-d2 { fill: var(--lc-down); } .lc-mm-d1 { fill: var(--lc-down); fill-opacity: 0.55; } .lc-mm-0 { fill: var(--lc-grid); } .lc-mm-na { fill: var(--lc-surface); stroke: var(--lc-grid); stroke-dasharray: 3 2; } .lc-mm-sw.lc-mm-u2 { background: var(--lc-up); } .lc-mm-sw.lc-mm-u1 { background: var(--lc-up); opacity: 0.55; } .lc-mm-sw.lc-mm-d2 { background: var(--lc-down); } .lc-mm-sw.lc-mm-d1 { background: var(--lc-down); opacity: 0.55; } .lc-mm-sw.lc-mm-0 { background: var(--lc-grid); } .lc-mm-sw.lc-mm-na { background: transparent; border: 1px dashed var(--lc-muted); } .lc-pt:hover .lc-mm, .lc-pt:focus .lc-mm { stroke: var(--lc-ink); stroke-width: 2; } .lc-mm-lbl, .lc-mm-val, .lc-mm-glbl { font-size: 11px; pointer-events: none; } .lc-mm-lbl { font-weight: 600; } .lc-mm-val { font-weight: 700; font-variant-numeric: tabular-nums; } .lc-mm-tstrong { fill: var(--lc-surface); } .lc-mm-tsoft { fill: var(--lc-ink); } .lc-mm-tna { fill: var(--lc-muted); } .lc-mm-head { fill: var(--lc-surface); stroke: none; } .lc-mm-glbl { fill: var(--lc-ink); font-weight: 650; } /* Hover / focus: the hovered cell's sector stays (its siblings slightly dimmed), other sectors fade; cell labels fade while the value box is open. */ .lc-t-marketmap .lc-mm, .lc-t-marketmap .lc-mm-labels { transition: opacity 0.15s ease; } .lc-t-marketmap .lc-svg:has(.lc-pt:is(:hover, :focus)) .lc-mm-g:not(:has(.lc-pt:is(:hover, :focus))) .lc-mm { opacity: 0.35; } .lc-t-marketmap .lc-svg:has(.lc-pt:is(:hover, :focus)) .lc-mm-g:has(.lc-pt:is(:hover, :focus)) .lc-pt:not(:hover, :focus) .lc-mm { opacity: 0.7; } .lc-t-marketmap .lc-svg:has(.lc-pt:is(:hover, :focus)) .lc-mm-labels { opacity: 0.35; } /* network.css */ .lc-nlink { fill: none; stroke: var(--c); stroke-opacity: 0.5; stroke-linecap: round; } .lc-nlink-na { fill: none; stroke: var(--lc-muted); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.8; } .lc-narrow { fill: var(--c); fill-opacity: 0.75; } .lc-nnode { fill: var(--c); stroke: var(--lc-surface); stroke-width: 1.5; } .lc-nlabel { fill: var(--lc-ink); font-size: 12px; pointer-events: none; } /* Second label line: the weighted total, bold and tinted by the node colour (mixed with ink for contrast). */ .lc-nlabel-val { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; fill: var(--lc-ink); fill: color-mix(in oklab, var(--c, var(--lc-ink)) 68%, var(--lc-ink)); } .lc-pt:hover .lc-nlink, .lc-pt:focus .lc-nlink { stroke-opacity: 1; } .lc-pt:hover .lc-narrow, .lc-pt:focus .lc-narrow { fill-opacity: 1; } .lc-pt:hover .lc-nlink-na, .lc-pt:focus .lc-nlink-na { stroke: var(--lc-ink); stroke-width: 2; } .lc-pt:hover .lc-nnode, .lc-pt:focus .lc-nnode { stroke: var(--lc-ink); stroke-width: 2; } /* Hover / focus: a hovered link stays and the other links fade; a hovered node keeps the links that touch it (data-s / data-t are the link's end node indices; rules exist for the first 40 nodes). Labels fade while a value box is open. */ .lc-t-network :is(.lc-nlink, .lc-nlink-na, .lc-narrow, .lc-nnode, .lc-nlabels) { transition: opacity 0.15s ease; } .lc-t-network .lc-svg:has(.lc-pt-nlink:is(:hover, :focus)) :is(.lc-nlink, .lc-nlink-na, .lc-narrow) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nlink:is(:hover, :focus)) .lc-nnode { opacity: 0.5; } .lc-t-network .lc-svg .lc-pt-nlink:is(:hover, :focus) :is(.lc-nlink, .lc-nlink-na, .lc-narrow) { opacity: 1; } .lc-t-network .lc-svg:has(.lc-pt:is(:hover, :focus)) .lc-nlabels { opacity: 0.3; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="0"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="0"], [data-t="0"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="0"]) .lc-nnode:not([data-i="0"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="1"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="1"], [data-t="1"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="1"]) .lc-nnode:not([data-i="1"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="2"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="2"], [data-t="2"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="2"]) .lc-nnode:not([data-i="2"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="3"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="3"], [data-t="3"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="3"]) .lc-nnode:not([data-i="3"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="4"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="4"], [data-t="4"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="4"]) .lc-nnode:not([data-i="4"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="5"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="5"], [data-t="5"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="5"]) .lc-nnode:not([data-i="5"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="6"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="6"], [data-t="6"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="6"]) .lc-nnode:not([data-i="6"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="7"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="7"], [data-t="7"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="7"]) .lc-nnode:not([data-i="7"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="8"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="8"], [data-t="8"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="8"]) .lc-nnode:not([data-i="8"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="9"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="9"], [data-t="9"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="9"]) .lc-nnode:not([data-i="9"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="10"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="10"], [data-t="10"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="10"]) .lc-nnode:not([data-i="10"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="11"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="11"], [data-t="11"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="11"]) .lc-nnode:not([data-i="11"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="12"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="12"], [data-t="12"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="12"]) .lc-nnode:not([data-i="12"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="13"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="13"], [data-t="13"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="13"]) .lc-nnode:not([data-i="13"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="14"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="14"], [data-t="14"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="14"]) .lc-nnode:not([data-i="14"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="15"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="15"], [data-t="15"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="15"]) .lc-nnode:not([data-i="15"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="16"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="16"], [data-t="16"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="16"]) .lc-nnode:not([data-i="16"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="17"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="17"], [data-t="17"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="17"]) .lc-nnode:not([data-i="17"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="18"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="18"], [data-t="18"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="18"]) .lc-nnode:not([data-i="18"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="19"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="19"], [data-t="19"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="19"]) .lc-nnode:not([data-i="19"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="20"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="20"], [data-t="20"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="20"]) .lc-nnode:not([data-i="20"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="21"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="21"], [data-t="21"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="21"]) .lc-nnode:not([data-i="21"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="22"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="22"], [data-t="22"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="22"]) .lc-nnode:not([data-i="22"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="23"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="23"], [data-t="23"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="23"]) .lc-nnode:not([data-i="23"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="24"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="24"], [data-t="24"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="24"]) .lc-nnode:not([data-i="24"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="25"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="25"], [data-t="25"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="25"]) .lc-nnode:not([data-i="25"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="26"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="26"], [data-t="26"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="26"]) .lc-nnode:not([data-i="26"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="27"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="27"], [data-t="27"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="27"]) .lc-nnode:not([data-i="27"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="28"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="28"], [data-t="28"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="28"]) .lc-nnode:not([data-i="28"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="29"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="29"], [data-t="29"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="29"]) .lc-nnode:not([data-i="29"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="30"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="30"], [data-t="30"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="30"]) .lc-nnode:not([data-i="30"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="31"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="31"], [data-t="31"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="31"]) .lc-nnode:not([data-i="31"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="32"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="32"], [data-t="32"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="32"]) .lc-nnode:not([data-i="32"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="33"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="33"], [data-t="33"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="33"]) .lc-nnode:not([data-i="33"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="34"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="34"], [data-t="34"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="34"]) .lc-nnode:not([data-i="34"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="35"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="35"], [data-t="35"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="35"]) .lc-nnode:not([data-i="35"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="36"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="36"], [data-t="36"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="36"]) .lc-nnode:not([data-i="36"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="37"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="37"], [data-t="37"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="37"]) .lc-nnode:not([data-i="37"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="38"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="38"], [data-t="38"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="38"]) .lc-nnode:not([data-i="38"]) { opacity: 0.5; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="39"]) :is(.lc-nlink, .lc-nlink-na, .lc-narrow):not([data-s="39"], [data-t="39"]) { opacity: 0.15; } .lc-t-network .lc-svg:has(.lc-pt-nnode:is(:hover, :focus) > .lc-nnode[data-i="39"]) .lc-nnode:not([data-i="39"]) { opacity: 0.5; } /* ohlc.css */ .lc-ohlc { fill: none; stroke: var(--c); stroke-width: 1.75; stroke-linecap: butt; } .lc-pt:hover .lc-ohlc, .lc-pt:focus .lc-ohlc { stroke-width: 2.75; } /* Hover / focus: the hovered day's bar and volume bar stay, the other days fade. */ .lc-t-ohlc :is(.lc-ohlc, .lc-fin-vol) { transition: opacity 0.15s ease; } .lc-t-ohlc .lc-svg:has(.lc-pt-candle:is(:hover, :focus)) .lc-pt-candle:not(:hover, :focus) :is(.lc-ohlc, .lc-fin-vol) { opacity: 0.4; } /* parallel.css */ .lc-par-head { fill: var(--lc-ink); font-size: 12px; font-weight: 650; } /* Item name after the last axis the line reaches, tinted like the line (ink-mixed). */ .lc-par-name { font-weight: 650; fill: var(--lc-ink); fill: color-mix(in oklab, var(--c, var(--lc-ink)) 68%, var(--lc-ink)); } .lc-par-tick { font-size: 11px; } /* Narrow slots (phone widths): smaller min / max values so they fit the axis slot. */ .lc-par-tick-sm { font-size: 10px; } .lc-par-na { fill: var(--lc-muted); font-size: 11px; font-style: italic; } .lc-par-line { fill: none; stroke: var(--c); stroke-width: 1.75; stroke-opacity: 0.8; stroke-linejoin: round; stroke-linecap: round; } .lc-par-dot { fill: var(--c); stroke: var(--lc-surface); stroke-width: 1; } .lc-pt:hover .lc-par-line, .lc-pt:focus .lc-par-line { stroke-width: 3.5; stroke-opacity: 1; } .lc-pt:hover .lc-par-dot, .lc-pt:focus .lc-par-dot { stroke: var(--lc-ink); stroke-width: 1.5; } /* pareto.css */ .lc-pareto-bar { fill: var(--c); } .lc-pareto-tail { fill-opacity: 0.55; } .lc-pareto-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .lc-pareto-dot { fill: var(--c); stroke: var(--lc-surface); stroke-width: 1.5; } .lc-pareto-guide { stroke: var(--lc-muted); stroke-width: 1; stroke-dasharray: 4 3; } .lc-pareto-guide-lbl { fill: var(--lc-muted); font-size: 11px; } /* Value written inside a bar: surface colour, no halo. */ .lc-pareto-in.lc-cm-val { fill: var(--lc-surface); stroke: none; } .lc-pt:hover .lc-pareto-dot, .lc-pt:focus .lc-pareto-dot { stroke: var(--lc-ink); stroke-width: 2; } .lc-pt-pareto:hover .lc-hit, .lc-pt-pareto:focus .lc-hit { fill: var(--lc-grid); fill-opacity: 0.35; } /* price.css */ .lc-price-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; } .lc-price-area { fill-opacity: 0.14; pointer-events: none; } .lc-pt-price:focus-visible .lc-hit, .lc-pt-vb:focus-visible .lc-hit { stroke: var(--lc-ink); stroke-width: 1.5; stroke-dasharray: 3 2; } /* radar.css */ .lc-radar-ring { fill: none; } /* Ring values get the surface halo so they stay readable where a series outline crosses them. */ .lc-radar-tick { font-size: 10.5px; paint-order: stroke; stroke: var(--lc-surface); stroke-width: 3px; stroke-linejoin: round; } .lc-radar-axis { fill: var(--lc-ink); font-size: 12px; } .lc-radar-area { fill: var(--c); fill-opacity: 0.16; stroke: none; } .lc-radar-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .lc-radar-dot { fill: var(--c); stroke: var(--lc-surface); stroke-width: 1.5; } .lc-pt:hover .lc-radar-dot, .lc-pt:focus .lc-radar-dot { stroke: var(--lc-ink); stroke-width: 2; } /* Hover / focus: the pointed series (area, outline, dots; data-s = series index) stays, the rest fade. Rules exist for the first 12 series (MAX_SERIES). */ .lc-t-radar :is(.lc-radar-s, .lc-pt-radar) { transition: opacity 0.15s ease; } .lc-t-radar .lc-svg:has(.lc-pt:hover, .lc-pt:focus) :is(.lc-radar-s, .lc-pt-radar) { opacity: 0.2; } .lc-t-radar .lc-svg:has(.lc-pt[data-s="0"]:hover, .lc-pt[data-s="0"]:focus) :is(.lc-radar-s, .lc-pt-radar)[data-s="0"] { opacity: 1; } .lc-t-radar .lc-svg:has(.lc-pt[data-s="1"]:hover, .lc-pt[data-s="1"]:focus) :is(.lc-radar-s, .lc-pt-radar)[data-s="1"] { opacity: 1; } .lc-t-radar .lc-svg:has(.lc-pt[data-s="2"]:hover, .lc-pt[data-s="2"]:focus) :is(.lc-radar-s, .lc-pt-radar)[data-s="2"] { opacity: 1; } .lc-t-radar .lc-svg:has(.lc-pt[data-s="3"]:hover, .lc-pt[data-s="3"]:focus) :is(.lc-radar-s, .lc-pt-radar)[data-s="3"] { opacity: 1; } .lc-t-radar .lc-svg:has(.lc-pt[data-s="4"]:hover, .lc-pt[data-s="4"]:focus) :is(.lc-radar-s, .lc-pt-radar)[data-s="4"] { opacity: 1; } .lc-t-radar .lc-svg:has(.lc-pt[data-s="5"]:hover, .lc-pt[data-s="5"]:focus) :is(.lc-radar-s, .lc-pt-radar)[data-s="5"] { opacity: 1; } .lc-t-radar .lc-svg:has(.lc-pt[data-s="6"]:hover, .lc-pt[data-s="6"]:focus) :is(.lc-radar-s, .lc-pt-radar)[data-s="6"] { opacity: 1; } .lc-t-radar .lc-svg:has(.lc-pt[data-s="7"]:hover, .lc-pt[data-s="7"]:focus) :is(.lc-radar-s, .lc-pt-radar)[data-s="7"] { opacity: 1; } .lc-t-radar .lc-svg:has(.lc-pt[data-s="8"]:hover, .lc-pt[data-s="8"]:focus) :is(.lc-radar-s, .lc-pt-radar)[data-s="8"] { opacity: 1; } .lc-t-radar .lc-svg:has(.lc-pt[data-s="9"]:hover, .lc-pt[data-s="9"]:focus) :is(.lc-radar-s, .lc-pt-radar)[data-s="9"] { opacity: 1; } .lc-t-radar .lc-svg:has(.lc-pt[data-s="10"]:hover, .lc-pt[data-s="10"]:focus) :is(.lc-radar-s, .lc-pt-radar)[data-s="10"] { opacity: 1; } .lc-t-radar .lc-svg:has(.lc-pt[data-s="11"]:hover, .lc-pt[data-s="11"]:focus) :is(.lc-radar-s, .lc-pt-radar)[data-s="11"] { opacity: 1; } /* range52.css */ .lc-r52-name { fill: var(--lc-ink); font-size: 12px; font-weight: 600; } .lc-r52-track { fill: var(--lc-grid); } .lc-r52-fill { fill: var(--lc-s1); fill-opacity: 0.35; } .lc-r52-cur { fill: var(--lc-ink); } /* Current value: bold, tinted by the fill colour mixed with ink. */ .lc-r52-curlbl { fill: var(--lc-ink); fill: color-mix(in oklab, var(--lc-s1) 68%, var(--lc-ink)); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .lc-r52-na { fill: var(--lc-muted); font-style: italic; font-weight: 400; } .lc-r52-end { font-size: 11px; } .lc-pt-r52:focus-visible .lc-hit { stroke: var(--lc-ink); stroke-width: 1.5; stroke-dasharray: 3 2; } /* Hover / focus: the hovered row stays, the other rows fade. */ .lc-t-range52 .lc-pt-r52 { transition: opacity 0.15s ease; } .lc-t-range52 .lc-svg:has(.lc-pt-r52:is(:hover, :focus)) .lc-pt-r52:not(:hover, :focus) { opacity: 0.4; } .lc-t-range52 .lc-pt-r52:is(:hover, :focus) .lc-r52-fill { fill-opacity: 0.6; } /* ridgeline.css */ .lc-ridge { fill: var(--c); fill-opacity: 0.55; stroke: var(--c); stroke-width: 1.5; stroke-linejoin: round; } .lc-ridge-base { stroke: var(--lc-grid); stroke-width: 1; } .lc-ridge-med { stroke: var(--lc-ink); stroke-width: 1.5; stroke-dasharray: 3 2; } .lc-ridge-label { fill: var(--lc-ink); font-size: 12px; } .lc-ridge-na { fill: var(--lc-muted); font-size: 11px; font-style: italic; } .lc-pt:hover .lc-ridge, .lc-pt:focus .lc-ridge { fill-opacity: 0.8; stroke: var(--lc-ink); } /* sankey.css */ .lc-link { fill: var(--c); fill-opacity: var(--lc-band-opacity, 0.22); stroke: none; } .lc-pt:hover .lc-link, .lc-pt:focus .lc-link { fill-opacity: 0.6; stroke: var(--lc-ink); stroke-width: 1; } .lc-node { fill: var(--c); } .lc-pt:hover .lc-node, .lc-pt:focus .lc-node { stroke: var(--lc-ink); stroke-width: 2; } .lc-node-lbl { fill: var(--lc-ink); font-size: 12px; pointer-events: none; paint-order: stroke; stroke: var(--lc-surface); stroke-width: 3px; stroke-linejoin: round; } /* Second label line: the value, bold and tinted by the node's meaning (mixed with ink so small text keeps contrast). */ .lc-node-val { font-size: 13px; font-weight: 700; fill: var(--lc-ink); fill: color-mix(in oklab, var(--c, var(--lc-ink)) 68%, var(--lc-ink)); } .lc-sk-lead { fill: none; stroke: var(--lc-muted); stroke-width: 1; pointer-events: none; } /* Hatch overlay for cost / loss marks (tone "cost"): pale stripes in the surface colour over the tone fill. */ .lc-sk-hatch { pointer-events: none; } .lc-sk-hatch-line { stroke: var(--lc-surface); stroke-width: 2; stroke-opacity: 0.75; } .lc-sk-legend .lc-sw { width: 16px; height: 12px; } .lc-sk-sw-hatch { background-image: repeating-linear-gradient(45deg, transparent 0 3px, var(--lc-surface) 3px 5px); } /* Hover / focus: a hovered band stays and the rest fade; a hovered node keeps its own bands (data-s / data-t are the band's source and target node indices). Node rules exist for the first 40 nodes; beyond that nothing fades. */ .lc-t-sankey .lc-link, .lc-t-sankey .lc-sk-hatch { transition: opacity 0.15s ease, fill-opacity 0.15s ease; } .lc-t-sankey .lc-svg:has(.lc-link:hover, .lc-pt-link:focus) :is(.lc-link, .lc-sk-hatch) { opacity: 0.2; } .lc-t-sankey .lc-svg .lc-pt-link:is(:hover, :focus) :is(.lc-link, .lc-sk-hatch) { opacity: 1; } /* Node labels sit above the marks; while a tooltip is open they fade so the tooltip reads cleanly. */ .lc-t-sankey .lc-node-lbls { transition: opacity 0.15s ease; } .lc-t-sankey .lc-svg:has(.lc-pt:hover, .lc-pt:focus) .lc-node-lbls { opacity: 0.3; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="0"]:hover, .lc-pt-node:focus > .lc-node[data-i="0"]) :is(.lc-link, .lc-sk-hatch):not([data-s="0"], [data-t="0"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="0"]:hover, .lc-pt-node:focus > .lc-node[data-i="0"]) .lc-link:is([data-s="0"], [data-t="0"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="1"]:hover, .lc-pt-node:focus > .lc-node[data-i="1"]) :is(.lc-link, .lc-sk-hatch):not([data-s="1"], [data-t="1"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="1"]:hover, .lc-pt-node:focus > .lc-node[data-i="1"]) .lc-link:is([data-s="1"], [data-t="1"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="2"]:hover, .lc-pt-node:focus > .lc-node[data-i="2"]) :is(.lc-link, .lc-sk-hatch):not([data-s="2"], [data-t="2"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="2"]:hover, .lc-pt-node:focus > .lc-node[data-i="2"]) .lc-link:is([data-s="2"], [data-t="2"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="3"]:hover, .lc-pt-node:focus > .lc-node[data-i="3"]) :is(.lc-link, .lc-sk-hatch):not([data-s="3"], [data-t="3"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="3"]:hover, .lc-pt-node:focus > .lc-node[data-i="3"]) .lc-link:is([data-s="3"], [data-t="3"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="4"]:hover, .lc-pt-node:focus > .lc-node[data-i="4"]) :is(.lc-link, .lc-sk-hatch):not([data-s="4"], [data-t="4"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="4"]:hover, .lc-pt-node:focus > .lc-node[data-i="4"]) .lc-link:is([data-s="4"], [data-t="4"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="5"]:hover, .lc-pt-node:focus > .lc-node[data-i="5"]) :is(.lc-link, .lc-sk-hatch):not([data-s="5"], [data-t="5"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="5"]:hover, .lc-pt-node:focus > .lc-node[data-i="5"]) .lc-link:is([data-s="5"], [data-t="5"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="6"]:hover, .lc-pt-node:focus > .lc-node[data-i="6"]) :is(.lc-link, .lc-sk-hatch):not([data-s="6"], [data-t="6"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="6"]:hover, .lc-pt-node:focus > .lc-node[data-i="6"]) .lc-link:is([data-s="6"], [data-t="6"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="7"]:hover, .lc-pt-node:focus > .lc-node[data-i="7"]) :is(.lc-link, .lc-sk-hatch):not([data-s="7"], [data-t="7"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="7"]:hover, .lc-pt-node:focus > .lc-node[data-i="7"]) .lc-link:is([data-s="7"], [data-t="7"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="8"]:hover, .lc-pt-node:focus > .lc-node[data-i="8"]) :is(.lc-link, .lc-sk-hatch):not([data-s="8"], [data-t="8"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="8"]:hover, .lc-pt-node:focus > .lc-node[data-i="8"]) .lc-link:is([data-s="8"], [data-t="8"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="9"]:hover, .lc-pt-node:focus > .lc-node[data-i="9"]) :is(.lc-link, .lc-sk-hatch):not([data-s="9"], [data-t="9"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="9"]:hover, .lc-pt-node:focus > .lc-node[data-i="9"]) .lc-link:is([data-s="9"], [data-t="9"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="10"]:hover, .lc-pt-node:focus > .lc-node[data-i="10"]) :is(.lc-link, .lc-sk-hatch):not([data-s="10"], [data-t="10"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="10"]:hover, .lc-pt-node:focus > .lc-node[data-i="10"]) .lc-link:is([data-s="10"], [data-t="10"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="11"]:hover, .lc-pt-node:focus > .lc-node[data-i="11"]) :is(.lc-link, .lc-sk-hatch):not([data-s="11"], [data-t="11"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="11"]:hover, .lc-pt-node:focus > .lc-node[data-i="11"]) .lc-link:is([data-s="11"], [data-t="11"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="12"]:hover, .lc-pt-node:focus > .lc-node[data-i="12"]) :is(.lc-link, .lc-sk-hatch):not([data-s="12"], [data-t="12"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="12"]:hover, .lc-pt-node:focus > .lc-node[data-i="12"]) .lc-link:is([data-s="12"], [data-t="12"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="13"]:hover, .lc-pt-node:focus > .lc-node[data-i="13"]) :is(.lc-link, .lc-sk-hatch):not([data-s="13"], [data-t="13"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="13"]:hover, .lc-pt-node:focus > .lc-node[data-i="13"]) .lc-link:is([data-s="13"], [data-t="13"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="14"]:hover, .lc-pt-node:focus > .lc-node[data-i="14"]) :is(.lc-link, .lc-sk-hatch):not([data-s="14"], [data-t="14"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="14"]:hover, .lc-pt-node:focus > .lc-node[data-i="14"]) .lc-link:is([data-s="14"], [data-t="14"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="15"]:hover, .lc-pt-node:focus > .lc-node[data-i="15"]) :is(.lc-link, .lc-sk-hatch):not([data-s="15"], [data-t="15"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="15"]:hover, .lc-pt-node:focus > .lc-node[data-i="15"]) .lc-link:is([data-s="15"], [data-t="15"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="16"]:hover, .lc-pt-node:focus > .lc-node[data-i="16"]) :is(.lc-link, .lc-sk-hatch):not([data-s="16"], [data-t="16"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="16"]:hover, .lc-pt-node:focus > .lc-node[data-i="16"]) .lc-link:is([data-s="16"], [data-t="16"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="17"]:hover, .lc-pt-node:focus > .lc-node[data-i="17"]) :is(.lc-link, .lc-sk-hatch):not([data-s="17"], [data-t="17"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="17"]:hover, .lc-pt-node:focus > .lc-node[data-i="17"]) .lc-link:is([data-s="17"], [data-t="17"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="18"]:hover, .lc-pt-node:focus > .lc-node[data-i="18"]) :is(.lc-link, .lc-sk-hatch):not([data-s="18"], [data-t="18"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="18"]:hover, .lc-pt-node:focus > .lc-node[data-i="18"]) .lc-link:is([data-s="18"], [data-t="18"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="19"]:hover, .lc-pt-node:focus > .lc-node[data-i="19"]) :is(.lc-link, .lc-sk-hatch):not([data-s="19"], [data-t="19"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="19"]:hover, .lc-pt-node:focus > .lc-node[data-i="19"]) .lc-link:is([data-s="19"], [data-t="19"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="20"]:hover, .lc-pt-node:focus > .lc-node[data-i="20"]) :is(.lc-link, .lc-sk-hatch):not([data-s="20"], [data-t="20"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="20"]:hover, .lc-pt-node:focus > .lc-node[data-i="20"]) .lc-link:is([data-s="20"], [data-t="20"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="21"]:hover, .lc-pt-node:focus > .lc-node[data-i="21"]) :is(.lc-link, .lc-sk-hatch):not([data-s="21"], [data-t="21"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="21"]:hover, .lc-pt-node:focus > .lc-node[data-i="21"]) .lc-link:is([data-s="21"], [data-t="21"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="22"]:hover, .lc-pt-node:focus > .lc-node[data-i="22"]) :is(.lc-link, .lc-sk-hatch):not([data-s="22"], [data-t="22"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="22"]:hover, .lc-pt-node:focus > .lc-node[data-i="22"]) .lc-link:is([data-s="22"], [data-t="22"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="23"]:hover, .lc-pt-node:focus > .lc-node[data-i="23"]) :is(.lc-link, .lc-sk-hatch):not([data-s="23"], [data-t="23"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="23"]:hover, .lc-pt-node:focus > .lc-node[data-i="23"]) .lc-link:is([data-s="23"], [data-t="23"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="24"]:hover, .lc-pt-node:focus > .lc-node[data-i="24"]) :is(.lc-link, .lc-sk-hatch):not([data-s="24"], [data-t="24"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="24"]:hover, .lc-pt-node:focus > .lc-node[data-i="24"]) .lc-link:is([data-s="24"], [data-t="24"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="25"]:hover, .lc-pt-node:focus > .lc-node[data-i="25"]) :is(.lc-link, .lc-sk-hatch):not([data-s="25"], [data-t="25"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="25"]:hover, .lc-pt-node:focus > .lc-node[data-i="25"]) .lc-link:is([data-s="25"], [data-t="25"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="26"]:hover, .lc-pt-node:focus > .lc-node[data-i="26"]) :is(.lc-link, .lc-sk-hatch):not([data-s="26"], [data-t="26"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="26"]:hover, .lc-pt-node:focus > .lc-node[data-i="26"]) .lc-link:is([data-s="26"], [data-t="26"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="27"]:hover, .lc-pt-node:focus > .lc-node[data-i="27"]) :is(.lc-link, .lc-sk-hatch):not([data-s="27"], [data-t="27"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="27"]:hover, .lc-pt-node:focus > .lc-node[data-i="27"]) .lc-link:is([data-s="27"], [data-t="27"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="28"]:hover, .lc-pt-node:focus > .lc-node[data-i="28"]) :is(.lc-link, .lc-sk-hatch):not([data-s="28"], [data-t="28"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="28"]:hover, .lc-pt-node:focus > .lc-node[data-i="28"]) .lc-link:is([data-s="28"], [data-t="28"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="29"]:hover, .lc-pt-node:focus > .lc-node[data-i="29"]) :is(.lc-link, .lc-sk-hatch):not([data-s="29"], [data-t="29"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="29"]:hover, .lc-pt-node:focus > .lc-node[data-i="29"]) .lc-link:is([data-s="29"], [data-t="29"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="30"]:hover, .lc-pt-node:focus > .lc-node[data-i="30"]) :is(.lc-link, .lc-sk-hatch):not([data-s="30"], [data-t="30"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="30"]:hover, .lc-pt-node:focus > .lc-node[data-i="30"]) .lc-link:is([data-s="30"], [data-t="30"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="31"]:hover, .lc-pt-node:focus > .lc-node[data-i="31"]) :is(.lc-link, .lc-sk-hatch):not([data-s="31"], [data-t="31"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="31"]:hover, .lc-pt-node:focus > .lc-node[data-i="31"]) .lc-link:is([data-s="31"], [data-t="31"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="32"]:hover, .lc-pt-node:focus > .lc-node[data-i="32"]) :is(.lc-link, .lc-sk-hatch):not([data-s="32"], [data-t="32"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="32"]:hover, .lc-pt-node:focus > .lc-node[data-i="32"]) .lc-link:is([data-s="32"], [data-t="32"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="33"]:hover, .lc-pt-node:focus > .lc-node[data-i="33"]) :is(.lc-link, .lc-sk-hatch):not([data-s="33"], [data-t="33"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="33"]:hover, .lc-pt-node:focus > .lc-node[data-i="33"]) .lc-link:is([data-s="33"], [data-t="33"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="34"]:hover, .lc-pt-node:focus > .lc-node[data-i="34"]) :is(.lc-link, .lc-sk-hatch):not([data-s="34"], [data-t="34"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="34"]:hover, .lc-pt-node:focus > .lc-node[data-i="34"]) .lc-link:is([data-s="34"], [data-t="34"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="35"]:hover, .lc-pt-node:focus > .lc-node[data-i="35"]) :is(.lc-link, .lc-sk-hatch):not([data-s="35"], [data-t="35"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="35"]:hover, .lc-pt-node:focus > .lc-node[data-i="35"]) .lc-link:is([data-s="35"], [data-t="35"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="36"]:hover, .lc-pt-node:focus > .lc-node[data-i="36"]) :is(.lc-link, .lc-sk-hatch):not([data-s="36"], [data-t="36"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="36"]:hover, .lc-pt-node:focus > .lc-node[data-i="36"]) .lc-link:is([data-s="36"], [data-t="36"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="37"]:hover, .lc-pt-node:focus > .lc-node[data-i="37"]) :is(.lc-link, .lc-sk-hatch):not([data-s="37"], [data-t="37"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="37"]:hover, .lc-pt-node:focus > .lc-node[data-i="37"]) .lc-link:is([data-s="37"], [data-t="37"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="38"]:hover, .lc-pt-node:focus > .lc-node[data-i="38"]) :is(.lc-link, .lc-sk-hatch):not([data-s="38"], [data-t="38"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="38"]:hover, .lc-pt-node:focus > .lc-node[data-i="38"]) .lc-link:is([data-s="38"], [data-t="38"]) { fill-opacity: 0.5; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="39"]:hover, .lc-pt-node:focus > .lc-node[data-i="39"]) :is(.lc-link, .lc-sk-hatch):not([data-s="39"], [data-t="39"]) { opacity: 0.2; } .lc-t-sankey .lc-svg:has(.lc-node[data-i="39"]:hover, .lc-pt-node:focus > .lc-node[data-i="39"]) .lc-link:is([data-s="39"], [data-t="39"]) { fill-opacity: 0.5; } /* scatter.css */ .lc-point { fill: var(--c); fill-opacity: 0.8; stroke: var(--lc-surface); stroke-width: 1; } .lc-pt:hover .lc-point, .lc-pt:focus .lc-point { fill-opacity: 1; stroke: var(--lc-ink); stroke-width: 2; } /* Hover / focus (scatter and bubble): the pointed series (data-s = series index) stays, the rest fade. Rules exist for the first 12 series (MAX_SERIES). */ :is(.lc-t-scatter, .lc-t-bubble) .lc-pt-point { transition: opacity 0.15s ease; } :is(.lc-t-scatter, .lc-t-bubble) .lc-svg:has(.lc-pt:hover, .lc-pt:focus) :is(.lc-pt-point) { opacity: 0.25; } :is(.lc-t-scatter, .lc-t-bubble) .lc-svg:has(.lc-pt[data-s="0"]:hover, .lc-pt[data-s="0"]:focus) .lc-pt-point[data-s="0"] { opacity: 1; } :is(.lc-t-scatter, .lc-t-bubble) .lc-svg:has(.lc-pt[data-s="1"]:hover, .lc-pt[data-s="1"]:focus) .lc-pt-point[data-s="1"] { opacity: 1; } :is(.lc-t-scatter, .lc-t-bubble) .lc-svg:has(.lc-pt[data-s="2"]:hover, .lc-pt[data-s="2"]:focus) .lc-pt-point[data-s="2"] { opacity: 1; } :is(.lc-t-scatter, .lc-t-bubble) .lc-svg:has(.lc-pt[data-s="3"]:hover, .lc-pt[data-s="3"]:focus) .lc-pt-point[data-s="3"] { opacity: 1; } :is(.lc-t-scatter, .lc-t-bubble) .lc-svg:has(.lc-pt[data-s="4"]:hover, .lc-pt[data-s="4"]:focus) .lc-pt-point[data-s="4"] { opacity: 1; } :is(.lc-t-scatter, .lc-t-bubble) .lc-svg:has(.lc-pt[data-s="5"]:hover, .lc-pt[data-s="5"]:focus) .lc-pt-point[data-s="5"] { opacity: 1; } :is(.lc-t-scatter, .lc-t-bubble) .lc-svg:has(.lc-pt[data-s="6"]:hover, .lc-pt[data-s="6"]:focus) .lc-pt-point[data-s="6"] { opacity: 1; } :is(.lc-t-scatter, .lc-t-bubble) .lc-svg:has(.lc-pt[data-s="7"]:hover, .lc-pt[data-s="7"]:focus) .lc-pt-point[data-s="7"] { opacity: 1; } :is(.lc-t-scatter, .lc-t-bubble) .lc-svg:has(.lc-pt[data-s="8"]:hover, .lc-pt[data-s="8"]:focus) .lc-pt-point[data-s="8"] { opacity: 1; } :is(.lc-t-scatter, .lc-t-bubble) .lc-svg:has(.lc-pt[data-s="9"]:hover, .lc-pt[data-s="9"]:focus) .lc-pt-point[data-s="9"] { opacity: 1; } :is(.lc-t-scatter, .lc-t-bubble) .lc-svg:has(.lc-pt[data-s="10"]:hover, .lc-pt[data-s="10"]:focus) .lc-pt-point[data-s="10"] { opacity: 1; } :is(.lc-t-scatter, .lc-t-bubble) .lc-svg:has(.lc-pt[data-s="11"]:hover, .lc-pt[data-s="11"]:focus) .lc-pt-point[data-s="11"] { opacity: 1; } /* segmented.css */ .lc-seg { fill: var(--c); stroke: var(--lc-surface); stroke-width: 1.5; } .lc-pt:hover .lc-seg, .lc-pt:focus .lc-seg { stroke: var(--lc-ink); stroke-width: 2; } /* .lc-seg-lbl / .lc-seg-pct (0.7 and earlier) are replaced by the shared name + bold share label (cmp.css). */ /* skyline.css */ /* The silhouette is one filled path per run; the per-day columns on top are transparent until hovered or focused. */ .lc-sky-fill { fill: var(--c); fill-opacity: 0.8; stroke: none; } .lc-sky { fill: var(--c); fill-opacity: 0; shape-rendering: crispEdges; } .lc-pt:hover .lc-sky, .lc-pt:focus .lc-sky { fill-opacity: 1; stroke: var(--lc-ink); stroke-width: 1; } .lc-sky-edge { fill: none; stroke: var(--lc-ink); stroke-opacity: 0.55; stroke-width: 1; stroke-linejoin: miter; pointer-events: none; } /* Columns narrower than 1.5px: a thin, faint edge so the fill stays visible. */ .lc-sky-dense .lc-sky-edge { stroke-width: 0.5; stroke-opacity: 0.35; } .lc-sky-na { fill: var(--lc-muted); fill-opacity: 0.12; } .lc-sky-naline { stroke: var(--lc-muted); stroke-width: 1.5; stroke-dasharray: 2 3; } /* Peak marker: dot on the highest day, value in bold tinted by the series colour, date in muted below. */ .lc-sky-peak { pointer-events: none; } .lc-sky-peak-dot { fill: var(--c); stroke: var(--lc-surface); stroke-width: 1.5; } .lc-sky-peak-val { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; fill: var(--lc-ink); fill: color-mix(in oklab, var(--c, var(--lc-ink)) 68%, var(--lc-ink)); paint-order: stroke; stroke: var(--lc-surface); stroke-width: 3px; stroke-linejoin: round; } .lc-sky-peak-date { font-size: 11px; font-weight: 400; fill: var(--lc-muted); } /* slope.css */ .lc-slope-line { stroke: var(--c); stroke-width: 2; stroke-linecap: round; } .lc-slope-dot { fill: var(--c); stroke: var(--lc-surface); stroke-width: 1.5; } /* Side labels: name in ink with the surface halo, value bold and tinted (cmp.css). */ .lc-slope-label { font-size: 12px; } .lc-slope-head { fill: var(--lc-ink); font-weight: 650; } .lc-pt:hover .lc-slope-line, .lc-pt:focus .lc-slope-line { stroke-width: 3.5; } .lc-pt:hover .lc-slope-dot, .lc-pt:focus .lc-slope-dot { stroke: var(--lc-ink); stroke-width: 2; } /* stream.css */ .lc-stream { fill: var(--c); fill-opacity: 0.85; stroke: var(--lc-surface); stroke-width: 0.75; } @media (prefers-reduced-motion: no-preference) { .lc-stream { animation: lc-fade 0.5s ease-out both; } } /* Layer name written inside the layer at its thickest point (ink with a surface halo; only when the layer is tall enough there). */ .lc-stream-lbl { fill: var(--lc-ink); font-size: 12px; font-weight: 650; pointer-events: none; paint-order: stroke; stroke: var(--lc-surface); stroke-width: 3px; stroke-linejoin: round; } /* Hover / focus: the pointed layer (band, its name, its dots; data-s = layer index) stays, the rest fade. Rules exist for the first 12 layers (MAX_SERIES). */ .lc-t-stream :is(.lc-stream, .lc-stream-lbl, .lc-pt-dot) { transition: opacity 0.15s ease; } .lc-t-stream .lc-svg:has(.lc-stream:hover, .lc-pt:hover, .lc-pt:focus) :is(.lc-stream, .lc-stream-lbl, .lc-pt-dot) { opacity: 0.25; } .lc-t-stream .lc-svg:has(.lc-stream[data-s="0"]:hover, .lc-pt[data-s="0"]:hover, .lc-pt[data-s="0"]:focus) :is(.lc-stream, .lc-stream-lbl, .lc-pt-dot)[data-s="0"] { opacity: 1; } .lc-t-stream .lc-svg:has(.lc-stream[data-s="1"]:hover, .lc-pt[data-s="1"]:hover, .lc-pt[data-s="1"]:focus) :is(.lc-stream, .lc-stream-lbl, .lc-pt-dot)[data-s="1"] { opacity: 1; } .lc-t-stream .lc-svg:has(.lc-stream[data-s="2"]:hover, .lc-pt[data-s="2"]:hover, .lc-pt[data-s="2"]:focus) :is(.lc-stream, .lc-stream-lbl, .lc-pt-dot)[data-s="2"] { opacity: 1; } .lc-t-stream .lc-svg:has(.lc-stream[data-s="3"]:hover, .lc-pt[data-s="3"]:hover, .lc-pt[data-s="3"]:focus) :is(.lc-stream, .lc-stream-lbl, .lc-pt-dot)[data-s="3"] { opacity: 1; } .lc-t-stream .lc-svg:has(.lc-stream[data-s="4"]:hover, .lc-pt[data-s="4"]:hover, .lc-pt[data-s="4"]:focus) :is(.lc-stream, .lc-stream-lbl, .lc-pt-dot)[data-s="4"] { opacity: 1; } .lc-t-stream .lc-svg:has(.lc-stream[data-s="5"]:hover, .lc-pt[data-s="5"]:hover, .lc-pt[data-s="5"]:focus) :is(.lc-stream, .lc-stream-lbl, .lc-pt-dot)[data-s="5"] { opacity: 1; } .lc-t-stream .lc-svg:has(.lc-stream[data-s="6"]:hover, .lc-pt[data-s="6"]:hover, .lc-pt[data-s="6"]:focus) :is(.lc-stream, .lc-stream-lbl, .lc-pt-dot)[data-s="6"] { opacity: 1; } .lc-t-stream .lc-svg:has(.lc-stream[data-s="7"]:hover, .lc-pt[data-s="7"]:hover, .lc-pt[data-s="7"]:focus) :is(.lc-stream, .lc-stream-lbl, .lc-pt-dot)[data-s="7"] { opacity: 1; } .lc-t-stream .lc-svg:has(.lc-stream[data-s="8"]:hover, .lc-pt[data-s="8"]:hover, .lc-pt[data-s="8"]:focus) :is(.lc-stream, .lc-stream-lbl, .lc-pt-dot)[data-s="8"] { opacity: 1; } .lc-t-stream .lc-svg:has(.lc-stream[data-s="9"]:hover, .lc-pt[data-s="9"]:hover, .lc-pt[data-s="9"]:focus) :is(.lc-stream, .lc-stream-lbl, .lc-pt-dot)[data-s="9"] { opacity: 1; } .lc-t-stream .lc-svg:has(.lc-stream[data-s="10"]:hover, .lc-pt[data-s="10"]:hover, .lc-pt[data-s="10"]:focus) :is(.lc-stream, .lc-stream-lbl, .lc-pt-dot)[data-s="10"] { opacity: 1; } .lc-t-stream .lc-svg:has(.lc-stream[data-s="11"]:hover, .lc-pt[data-s="11"]:hover, .lc-pt[data-s="11"]:focus) :is(.lc-stream, .lc-stream-lbl, .lc-pt-dot)[data-s="11"] { opacity: 1; } /* sunburst.css */ .lc-sb { fill: var(--c); stroke: var(--lc-surface); stroke-width: 1.5; } .lc-sb-d2 { fill-opacity: 0.78; } .lc-sb-d3 { fill-opacity: 0.58; } .lc-pt:hover .lc-sb, .lc-pt:focus .lc-sb { stroke: var(--lc-ink); stroke-width: 2; fill-opacity: 1; } /* Curved labels along the ring: name, then the bold value tinted by the branch colour (mixed with ink for contrast). */ .lc-sb-lbl { fill: var(--lc-ink); font-size: 11px; font-weight: 600; pointer-events: none; paint-order: stroke; stroke: var(--lc-surface); stroke-width: 2.5px; stroke-linejoin: round; stroke-opacity: 0.6; } .lc-sb-val { font-size: 13px; font-weight: 700; pointer-events: none; font-variant-numeric: tabular-nums; fill: var(--lc-ink); fill: color-mix(in oklab, var(--c, var(--lc-ink)) 68%, var(--lc-ink)); paint-order: stroke; stroke: var(--lc-surface); stroke-width: 2.5px; stroke-linejoin: round; stroke-opacity: 0.6; } /* Outside labels (leaves whose arc is too short): name in ink, value below, leader to the arc. */ .lc-sb-out { fill: var(--lc-ink); font-size: 11px; font-weight: 600; pointer-events: none; } .lc-sb-lead { fill: none; stroke: var(--lc-muted); stroke-width: 1; pointer-events: none; } .lc-sb-cl { fill: var(--lc-muted); font-size: 12px; } .lc-sb-ct { fill: var(--lc-ink); font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; } /* Hover / focus: the hovered arc and its whole branch (data-b = top-level index, rules for the first 24) stay, the rest fade; labels fade while the value box is open. */ .lc-t-sunburst .lc-sb, .lc-t-sunburst .lc-sb-labels { transition: opacity 0.15s ease; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus)) .lc-sb { opacity: 0.3; } .lc-t-sunburst .lc-svg .lc-pt:is(:hover, :focus) > .lc-sb { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus)) .lc-sb-labels { opacity: 0.35; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="0"]) .lc-sb[data-b="0"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="1"]) .lc-sb[data-b="1"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="2"]) .lc-sb[data-b="2"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="3"]) .lc-sb[data-b="3"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="4"]) .lc-sb[data-b="4"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="5"]) .lc-sb[data-b="5"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="6"]) .lc-sb[data-b="6"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="7"]) .lc-sb[data-b="7"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="8"]) .lc-sb[data-b="8"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="9"]) .lc-sb[data-b="9"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="10"]) .lc-sb[data-b="10"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="11"]) .lc-sb[data-b="11"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="12"]) .lc-sb[data-b="12"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="13"]) .lc-sb[data-b="13"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="14"]) .lc-sb[data-b="14"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="15"]) .lc-sb[data-b="15"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="16"]) .lc-sb[data-b="16"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="17"]) .lc-sb[data-b="17"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="18"]) .lc-sb[data-b="18"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="19"]) .lc-sb[data-b="19"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="20"]) .lc-sb[data-b="20"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="21"]) .lc-sb[data-b="21"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="22"]) .lc-sb[data-b="22"] { opacity: 1; } .lc-t-sunburst .lc-svg:has(.lc-pt:is(:hover, :focus) > .lc-sb[data-b="23"]) .lc-sb[data-b="23"] { opacity: 1; } /* surprise.css */ .lc-sp-beat { --c: var(--lc-up); } .lc-sp-miss { --c: var(--lc-down); } .lc-sp-meet, .lc-sp-unknown { --c: var(--lc-flat); } .lc-sp-bar { fill: var(--c); } .lc-sp-unknown.lc-sp-bar { fill-opacity: 0.45; stroke: var(--c); stroke-width: 1; stroke-dasharray: 3 2; } .lc-sp-est { stroke: var(--lc-ink); stroke-width: 2.5; stroke-linecap: round; } /* Surprise label: bold, tinted by its state (rise colour for a beat, fall colour for a miss) mixed with ink. */ .lc-sp-lbl { font-size: 10.5px; font-weight: 700; fill: var(--lc-ink); paint-order: stroke; stroke: var(--lc-surface); stroke-width: 3px; stroke-linejoin: round; } .lc-sp-sm { font-size: 9px; } .lc-sp-t-beat { fill: color-mix(in oklab, var(--lc-up) 68%, var(--lc-ink)); } .lc-sp-t-miss { fill: color-mix(in oklab, var(--lc-down) 68%, var(--lc-ink)); } .lc-sp-t-unknown { fill: var(--lc-muted); font-weight: 400; } .lc-sp-sw.lc-sp-unknown { opacity: 0.6; } .lc-sp-sw-est { flex: none; width: 12px; height: 3px; border-radius: 1px; background: var(--lc-ink); } .lc-pt-sp:focus .lc-sp-bar, .lc-pt-sp:hover .lc-sp-bar { stroke: var(--lc-ink); stroke-width: 2; } /* Hover / focus: the hovered period stays, the other periods (bar, estimate tick, label) fade. */ .lc-t-surprise :is(.lc-sp-bar, .lc-sp-est, .lc-sp-lbl) { transition: opacity 0.15s ease; } .lc-t-surprise .lc-svg:has(.lc-pt-sp:is(:hover, :focus)) .lc-pt-sp:not(:hover, :focus) :is(.lc-sp-bar, .lc-sp-est, .lc-sp-lbl) { opacity: 0.35; } /* timeline.css */ .lc-tl { fill: var(--c); } .lc-tl-q { fill-opacity: 0.55; stroke: var(--c); stroke-width: 1.5; stroke-dasharray: 3 2; } .lc-pt:hover .lc-tl, .lc-pt:focus .lc-tl { stroke: var(--lc-ink); stroke-width: 2; } .lc-tl-lbl { fill: var(--lc-surface); font-size: 11px; font-weight: 600; pointer-events: none; } /* Label on a tentative (translucent) bar: ink with the surface halo, so it reads on both themes. */ .lc-tl-lbl-q { fill: var(--lc-ink); paint-order: stroke; stroke: var(--lc-surface); stroke-width: 3px; stroke-linejoin: round; } /* Label written beside a bar that is too short for it. */ .lc-tl-out { font-size: 11px; font-weight: 600; } .lc-tl-lane { fill: var(--lc-ink); font-size: 12px; } .lc-tl-sep { stroke: var(--lc-grid); stroke-width: 1; } .lc-tl-msline { stroke: var(--lc-ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; } .lc-ms { fill: var(--lc-ink); stroke: var(--lc-surface); stroke-width: 1; } .lc-pt:hover .lc-ms, .lc-pt:focus .lc-ms { stroke: var(--lc-ink); stroke-width: 2; } .lc-tl-mslbl { fill: var(--lc-ink); font-size: 11px; } /* Bar labels fade with the rest while a value box is open (the hovered bar's own name is in the box). */ .lc-t-timeline .lc-tl-labels { transition: opacity 0.15s ease; } .lc-t-timeline .lc-svg:has(.lc-pt:hover, .lc-pt:focus) .lc-tl-labels { opacity: 0.3; } /* tree.css */ .lc-tree-link { fill: none; stroke: var(--lc-muted); stroke-opacity: 0.55; stroke-width: 1.5; } .lc-node { fill: var(--c); stroke: var(--lc-surface); stroke-width: 1.5; } .lc-node-leaf { fill: var(--lc-surface); stroke: var(--c); stroke-width: 2; } .lc-node-na { fill: var(--lc-surface); stroke: var(--lc-muted); stroke-width: 1.5; stroke-dasharray: 2 2; } .lc-pt:hover .lc-node, .lc-pt:focus .lc-node { stroke: var(--lc-ink); stroke-width: 2.5; } .lc-tree-lbl { fill: var(--lc-ink); font-size: 11px; paint-order: stroke; stroke: var(--lc-surface); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; } .lc-tree-in { font-weight: 600; } /* Value after (or under) the name: bold, tinted by the branch colour mixed with ink so small text keeps contrast. */ .lc-tree-val { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; fill: var(--lc-ink); fill: color-mix(in oklab, var(--c, var(--lc-ink)) 68%, var(--lc-ink)); } /* Hover / focus: subtrees are nested groups, so the hovered node's ancestors (groups that contain it) and its descendants stay while every other branch fades; labels fade while the value box is open. */ .lc-t-tree :is(.lc-tree-link, .lc-node, .lc-tree-labels) { transition: opacity 0.15s ease; } .lc-t-tree .lc-svg:has(.lc-pt:is(:hover, :focus)) .lc-tree-sub:not(:has(.lc-pt:is(:hover, :focus))) > :is(.lc-tree-link, .lc-pt > .lc-node) { opacity: 0.25; } .lc-t-tree .lc-svg:has(.lc-pt:is(:hover, :focus)) .lc-tree-sub:has(> .lc-pt:is(:hover, :focus)) .lc-tree-sub > :is(.lc-tree-link, .lc-pt > .lc-node) { opacity: 1; } .lc-t-tree .lc-svg:has(.lc-pt:is(:hover, :focus)) .lc-tree-labels { opacity: 0.35; } /* treemap.css */ .lc-tm { fill: var(--c); stroke: var(--lc-surface); stroke-width: 1; } .lc-pt:hover .lc-tm, .lc-pt:focus .lc-tm { stroke: var(--lc-ink); stroke-width: 2; } .lc-tm-group { fill: none; stroke: var(--lc-surface); stroke-width: 3; pointer-events: none; } .lc-tm-lbl, .lc-tm-val { fill: var(--lc-surface); font-size: 11px; pointer-events: none; } .lc-tm-lbl { font-weight: 600; } .lc-tm-val { font-weight: 700; font-variant-numeric: tabular-nums; } /* Group header strip: name in ink, total in muted, on the surface colour so it reads as a caption, not a cell. */ .lc-tm-head { fill: var(--lc-surface); stroke: none; pointer-events: none; } .lc-tm-glbl { fill: var(--lc-ink); font-size: 11px; font-weight: 650; pointer-events: none; } .lc-tm-gval { fill: var(--lc-muted); font-weight: 400; font-variant-numeric: tabular-nums; } /* Hover / focus: the hovered cell's group stays (its siblings slightly dimmed), other groups fade; cell labels fade while the value box is open so it reads cleanly. */ .lc-t-treemap .lc-tm, .lc-t-treemap .lc-tm-labels { transition: opacity 0.15s ease; } .lc-t-treemap .lc-svg:has(.lc-pt:is(:hover, :focus)) .lc-tm-g:not(:has(.lc-pt:is(:hover, :focus))) .lc-tm { opacity: 0.35; } .lc-t-treemap .lc-svg:has(.lc-pt:is(:hover, :focus)) .lc-tm-g:has(.lc-pt:is(:hover, :focus)) .lc-pt:not(:hover, :focus) .lc-tm { opacity: 0.7; } .lc-t-treemap .lc-svg:has(.lc-pt:is(:hover, :focus)) .lc-tm-labels { opacity: 0.35; } /* valuation.css */ .lc-vb-fill { stroke: none; pointer-events: none; } .lc-vb-f0 { fill: var(--lc-s4); fill-opacity: 0.08; } .lc-vb-f1 { fill: var(--lc-s4); fill-opacity: 0.16; } .lc-vb-line { fill: none; stroke: var(--lc-s4); stroke-width: 1; stroke-opacity: 0.8; pointer-events: none; } .lc-vb-lbl { font-size: 11px; } .lc-vb-price { stroke-width: 2.25; } .lc-vb-sw { background: var(--lc-s4); opacity: 0.5; } /* waffle.css */ .lc-cell { fill: var(--c); } .lc-pt:hover .lc-cell, .lc-pt:focus .lc-cell { stroke: var(--lc-ink); stroke-width: 1.5; } /* waterfall.css */ .lc-wf { fill: var(--c); } .lc-wf-subtotal { fill-opacity: 0.75; } .lc-wf-link { stroke: var(--lc-muted); stroke-width: 1; stroke-dasharray: 3 2; } /* Value labels use the shared bold tinted style (cmp.css: .lc-cm-lbl.lc-cm-val). */ .lc-pt:hover .lc-wf, .lc-pt:focus .lc-wf { stroke: var(--lc-ink); stroke-width: 2; }