/* figures: charts (docs/images/compile_times.svg, binary_sizes_*.svg, ordered_json_scaling.svg from
   scripts/figures/charts.py) and the number literal explorer on features/types/number_handling.md */

/* series colours: categorical slots validated for CVD separation on the light and the slate surface */
.nj-charts, .nj-charts-key {
    --nj-charts-c1: #2a78d6;
    --nj-charts-c2: #eb6834;
    --nj-charts-c3: #1baf7a;
    --nj-charts-c4: #eda100;
    --nj-charts-c5: #e87ba4;
    --nj-charts-c6: #008300;
    --nj-charts-ink2: var(--md-default-fg-color--light);
    --nj-charts-grid: color-mix(in srgb, currentColor 12%, var(--md-default-bg-color));
    --nj-charts-base: color-mix(in srgb, currentColor 35%, var(--md-default-bg-color));
}
[data-md-color-scheme="slate"] :is(.nj-charts, .nj-charts-key) {
    --nj-charts-c1: #3987e5;
    --nj-charts-c2: #d95926;
    --nj-charts-c3: #199e70;
    --nj-charts-c4: #c98500;
    --nj-charts-c5: #d55181;
    --nj-charts-c6: #008300;
}
/* concepts: two compilers, two object types */
.nj-charts { --nj-charts-clang-c: var(--nj-charts-c1); --nj-charts-gcc-c: var(--nj-charts-c2);
             --nj-charts-json-c: var(--nj-charts-c1); --nj-charts-ojson-c: var(--nj-charts-c2); }

.md-typeset svg.nj-charts--compile, .md-typeset svg.nj-charts--scaling { max-width: 26rem; }
.md-typeset svg.nj-charts--sizes { max-width: 26rem; }
/* home/blog/how_3_13_0_got_faster.md (scripts/figures/perf_blog.py) */
.md-typeset svg.nj-charts--blog { max-width: 34rem; }
.md-typeset svg.nj-charts--swar { max-width: 34rem; }
.md-typeset svg.nj-charts--timeline { max-width: 22rem; }

.nj-charts text { fill: currentColor; font-size: 13px; }
.nj-charts .nj-charts-leg { font-size: 13.5px; }
.nj-charts .nj-charts-rowlabel { font-size: 13.5px; font-weight: 500; }
.nj-charts .nj-charts-code { font-family: var(--md-code-font-family), monospace; font-size: 12.5px; }
.nj-charts .nj-charts-sub { fill: var(--nj-charts-ink2); font-weight: 400; }
.nj-charts .nj-charts-fmt { text-anchor: end; font-weight: 400; }
.nj-charts .nj-charts-best { font-weight: 700; }
.nj-charts .nj-charts-panel { font-family: var(--md-code-font-family), monospace; font-size: 14px; font-weight: 600; }
.nj-charts .nj-charts-tick { fill: var(--nj-charts-ink2); font-size: 12px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.nj-charts .nj-charts-tick--l { text-anchor: start; }
.nj-charts .nj-charts-tick--r { text-anchor: end; }
.nj-charts .nj-charts-val { font-size: 12px; font-variant-numeric: tabular-nums;
    paint-order: stroke; stroke: var(--md-default-bg-color); stroke-width: 4px; stroke-linejoin: round; }
.nj-charts .nj-charts-factor { fill: var(--nj-charts-ink2); font-size: 12px; font-weight: 600; text-anchor: middle; }
.nj-charts .nj-charts-note { fill: var(--nj-charts-ink2); font-size: 12px; }
/* heatmap cells (perf_blog_usecases_*.svg): green for the fastest, gray around twice the time, red for the slowest;
   adjacent steps checked for CVD separation on the light and the slate surface; the numbers are in every cell */
.md-typeset svg.nj-charts--heat { max-width: 49rem; }
.nj-charts--heat { --nj-heat-0: #3fa557; --nj-heat-1: #8bcc95; --nj-heat-2: #ebeae6; --nj-heat-3: #f2ae9b;
                   --nj-heat-4: #dc5a43; --nj-heat-ink: #1b1b1b; --nj-heat-ink-strong: #1b1b1b; }
[data-md-color-scheme="slate"] .nj-charts--heat { --nj-heat-0: #3a9d50; --nj-heat-1: #2c6b3a; --nj-heat-2: #33353a;
                   --nj-heat-3: #8a3f2e; --nj-heat-4: #d95b3a; --nj-heat-ink: #e8e8e6; --nj-heat-ink-strong: #141414; }
.nj-charts .nj-heat-0 { fill: var(--nj-heat-0); }
.nj-charts .nj-heat-1 { fill: var(--nj-heat-1); }
.nj-charts .nj-heat-2 { fill: var(--nj-heat-2); }
.nj-charts .nj-heat-3 { fill: var(--nj-heat-3); }
.nj-charts .nj-heat-4 { fill: var(--nj-heat-4); }
.nj-charts .nj-heat-na { fill: none; stroke: var(--nj-charts-grid); stroke-width: 1; }
.nj-charts .nj-charts-cell { fill: var(--nj-heat-ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.nj-charts :is(.nj-heat-0, .nj-heat-4) ~ .nj-charts-cell { fill: var(--nj-heat-ink-strong); }
.nj-charts .nj-charts-cell--small { font-size: 10.5px; }
.nj-charts .nj-heat-cell { cursor: default; outline: none; }
.nj-charts .nj-heat-cell:is(:hover, :focus-visible, .nj-heat-on) rect { stroke: var(--md-default-fg-color); stroke-width: 1.5; }
.nj-heat-tip { position: absolute; z-index: 5; max-width: 24rem; padding: .5rem .7rem; border-radius: 6px;
               background: var(--md-default-bg-color); color: var(--md-default-fg-color);
               box-shadow: 0 2px 10px rgba(0, 0, 0, .25); font-size: .68rem; line-height: 1.45; pointer-events: none; }
.nj-heat-tip strong { display: block; margin-bottom: .2rem; }
.nj-heat-tip[hidden] { display: none; }

.nj-charts .nj-charts-grid { stroke: var(--nj-charts-grid); stroke-width: 1; }
.nj-charts .nj-charts-zero, .nj-charts .nj-charts-axis { stroke: var(--nj-charts-base); stroke-width: 1.5; }
.nj-charts .nj-charts-ref { stroke: currentColor; stroke-width: 1.5; }
.nj-charts .nj-charts-head { fill: var(--nj-charts-base); }

.nj-charts .nj-charts-c1 { fill: var(--nj-charts-c1); }
.nj-charts .nj-charts-c2 { fill: var(--nj-charts-c2); }
.nj-charts .nj-charts-c3 { fill: var(--nj-charts-c3); }
.nj-charts .nj-charts-c4 { fill: var(--nj-charts-c4); }
.nj-charts .nj-charts-c5 { fill: var(--nj-charts-c5); }
.nj-charts .nj-charts-c6 { fill: var(--nj-charts-c6); }
.nj-charts .nj-charts-dim { fill-opacity: .45; }
.nj-charts .nj-charts-clang { fill: var(--nj-charts-clang-c); }
.nj-charts .nj-charts-gcc { fill: var(--nj-charts-gcc-c); }
.nj-charts polyline.nj-charts-json, .nj-charts line.nj-charts-json { stroke: var(--nj-charts-json-c); stroke-width: 2; fill: none; }
.nj-charts polyline.nj-charts-ojson, .nj-charts line.nj-charts-ojson { stroke: var(--nj-charts-ojson-c); stroke-width: 2; fill: none; }
.nj-charts .nj-charts-json-dot { fill: var(--nj-charts-json-c); stroke: var(--md-default-bg-color); stroke-width: 2; }
.nj-charts .nj-charts-ojson-dot { fill: var(--nj-charts-ojson-c); stroke: var(--md-default-bg-color); stroke-width: 2; }

/* single wide charts: larger text on phones, where the SVG is scaled down */
@media screen and (max-width: 44.9375em) {
    svg.nj-charts.nj-charts--compile text, svg.nj-charts.nj-charts--scaling text { font-size: 15px; }
    svg.nj-charts.nj-charts--compile .nj-charts-code { font-size: 14px; }
    svg.nj-charts:is(.nj-charts--compile, .nj-charts--scaling) :is(.nj-charts-tick, .nj-charts-val, .nj-charts-factor, .nj-charts-note) { font-size: 14px; }
}

/* small multiples: two panels per row, one on narrow screens */
.md-typeset .nj-charts-grid-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem 2rem;
    margin: 1.5rem 0 .5rem;
}
.md-typeset .nj-charts-grid-wrap > .nj-fig-wrap { margin: 0; }

/* number literal explorer */
.md-typeset .nj-charts-num-ui {
    margin: 1rem 0 .75rem;
    padding: .8rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 8px;
}
.md-typeset .nj-charts-num-ui label { display: block; font-weight: 600; font-size: .75rem; margin-bottom: .3rem; }
.md-typeset .nj-charts-num-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: .4rem .6rem;
    font-family: var(--md-code-font-family), monospace;
    font-size: .8rem;
    color: var(--md-default-fg-color);
    background: var(--md-code-bg-color);
    border: 1px solid var(--md-default-fg-color--lighter);
    border-radius: 6px;
}
.md-typeset .nj-charts-num-input:focus-visible, .md-typeset .nj-charts-num-chip:focus-visible {
    outline: 2px solid var(--md-typeset-a-color);
    outline-offset: 2px;
}
.md-typeset .nj-charts-num-ui ul.nj-charts-num-chips:not([hidden]) { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0; padding: 0; list-style: none; }
.md-typeset .nj-charts-num-ui ul.nj-charts-num-chips > li { margin: 0; padding: 0; list-style: none; }
.md-typeset .nj-charts-num-ui ul.nj-charts-num-chips > li::before, .md-typeset .nj-charts-num-ui ul.nj-charts-num-chips > li::marker { content: none; }
.md-typeset .nj-charts-num-chip {
    min-height: 44px;
    max-width: 100%;
    padding: .25rem .6rem;
    overflow-wrap: anywhere;
    font-family: var(--md-code-font-family), monospace;
    font-size: .7rem;
    color: var(--md-typeset-a-color);
    background: color-mix(in srgb, var(--md-typeset-a-color) 8%, var(--md-default-bg-color));
    border: 1px solid color-mix(in srgb, var(--md-typeset-a-color) 35%, var(--md-default-bg-color));
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}
.md-typeset .nj-charts-num-chip[aria-pressed="true"] {
    color: var(--md-default-bg-color);
    background: var(--md-typeset-a-color);
    border-color: var(--md-typeset-a-color);
}
.md-typeset .nj-charts-num-out {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .2rem .8rem;
    margin: 0;
    font-size: .75rem;
    overflow-wrap: anywhere;
}
.md-typeset .nj-charts-num-out dt { color: var(--md-default-fg-color--light); margin: 0; }
.md-typeset .nj-charts-num-out dd { margin: 0; }
.md-typeset .nj-charts-num-miss { font-size: .75rem; color: var(--md-default-fg-color--light); margin: 0; }
.md-typeset .nj-charts-num tr.nj-charts-num-hit td { background: var(--md-accent-fg-color--transparent); }

/* direct line labels replace the legend */
.nj-charts .nj-charts-name-json { fill: var(--nj-charts-json-c); font-weight: 600; }
.nj-charts .nj-charts-name-ojson { fill: var(--nj-charts-ojson-c); font-weight: 600; }

/* theme badges of home/blog/how_3_13_0_got_faster.md: the number of one of the eight themes, as a digit in a blue
   circle, in headings, text, tables and the timeline figures (nj-theme-dot); "U" and other marks are gray */
.md-typeset .nj-theme { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    min-width: 1.45em; height: 1.45em; padding: 0 .3em; border-radius: .725em; vertical-align: .08em;
    background: var(--nj-blue); color: var(--md-default-bg-color); font-size: .78em; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums; text-decoration: none; }
.md-typeset a.nj-theme:is(:hover, :focus-visible) { background: var(--nj-blue-deep); color: var(--md-default-bg-color); }
.md-typeset .nj-theme--other { background: var(--md-default-fg-color--light); }
.md-typeset h2 .nj-theme { margin-right: .35em; vertical-align: .12em; }
.md-typeset .nj-theme-list > ul { list-style: none; margin-left: 0; }
.md-typeset .nj-theme-list > ul > li { margin-left: 0; padding-left: 2em; text-indent: -2em; }
.md-typeset .nj-theme-list > ul > li > .nj-theme { margin-right: .55em; text-indent: 0; }
.nj-charts .nj-theme-dot { fill: var(--nj-blue); }
.nj-charts .nj-theme-dot--other { fill: var(--nj-charts-ink2); }
.nj-charts .nj-theme-num { fill: var(--md-default-bg-color); font-size: 11px; font-weight: 700; }