/* Release-over-release performance charts: performance.html, the home
   page's performance section and the press page. tools/build_perf.py
   writes the markup from _perf.json.

   One series per chart, so each card is a small multiple and every
   chart shares one y-axis, 0 to the top of the data, with 100% marking
   1.12.0. Marks live in an SVG stretched to the plot box with strokes
   that do not scale. Points, axis labels and the tooltip are HTML
   placed by percentage, so text keeps its size at every card width. */

.perf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
    gap: 1.25rem;
    align-items: start;
}
.perf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .perf-grid-3 { grid-template-columns: minmax(0, 1fr); max-width: 34rem; } }

.perf-card {
    min-width: 0;
    padding: 1.15rem 1.25rem 0.9rem;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
}
.perf-title {
    min-height: 2.6em;
    font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; line-height: 1.3;
    letter-spacing: -0.01em; color: var(--text-hi); text-wrap: pretty;
}
.perf-title code { font-family: var(--font-mono); font-size: 0.86em; font-weight: 400; color: var(--text); }
.perf-now { margin-top: 0.45rem; font-size: 0.8rem; color: var(--text-muted); }
.perf-now b {
    margin-right: 0.3rem;
    font-family: var(--font-display); font-weight: 700; font-size: 1.6rem;
    letter-spacing: -0.02em; color: var(--text-hi);
}

/* The plot box. Its left margin holds the y labels and its bottom
   margin the release labels. pan-y keeps a vertical swipe scrolling
   the page while a sideways drag moves between releases. */
.perf-plot {
    position: relative;
    height: 7.5rem;
    margin: 1.1rem 1.1rem 2.2rem 2.75rem;
    touch-action: pan-y;
    outline: none;
}
.perf-plot:focus-visible { box-shadow: 0 0 0 1px var(--panel), 0 0 0 3px var(--telemetry); border-radius: 2px; }
.perf-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.perf-plot line { stroke: var(--hairline); stroke-width: 1; }
.perf-plot line.base { stroke: var(--text-dim); stroke-opacity: 0.55; }
.perf-plot polyline { fill: none; stroke: var(--ember-deep); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.perf-tick, .perf-rel {
    position: absolute;
    font-family: var(--font-mono); font-size: 0.62rem; line-height: 1;
    white-space: nowrap; pointer-events: none;
}
.perf-tick { right: calc(100% + 0.8rem); transform: translateY(-50%); color: var(--text-dim); }
.perf-tick.base { color: var(--text-muted); }
.perf-rel { top: calc(100% + 0.7rem); transform: translateX(-50%); color: var(--text-muted); }
.perf-pt {
    position: absolute; z-index: 2;
    width: 10px; height: 10px; margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--ember-deep);
    box-shadow: 0 0 0 2px var(--panel);
    pointer-events: none;
}
.perf-pt.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--text-hi); }
.perf-xhair {
    position: absolute; z-index: 1; top: 0; bottom: 0;
    width: 1px; margin-left: -0.5px;
    background: var(--text-dim);
    pointer-events: none;
}
.perf-tip {
    position: absolute; z-index: 3;
    width: max-content; max-width: 15.5rem;
    padding: 0.55rem 0.75rem;
    background: var(--bg-raise);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.9);
    font-size: 0.74rem; line-height: 1.45; color: var(--text-muted);
    pointer-events: none;
}
.perf-tip span { display: block; }
.perf-tip .perf-tip-r { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--text-dim); }
.perf-tip .perf-tip-v { color: var(--text-hi); font-weight: 600; }
.perf-plot [hidden] { display: none; }

/* The table twin: every value a chart draws, as published. */
.perf-values { border-top: 1px solid var(--hairline); }
.perf-values summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.7rem 0 0.2rem;
    font-size: 0.78rem; color: var(--text-muted);
    transition: color 0.3s var(--ease);
}
.perf-values summary::-webkit-details-marker { display: none; }
.perf-values summary:hover, .perf-values[open] summary { color: var(--text-hi); }
.perf-values summary::after {
    content: ""; flex: none; width: 8px; height: 8px;
    border-right: 1.5px solid var(--text-dim); border-bottom: 1.5px solid var(--text-dim);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.4s var(--ease), border-color 0.3s var(--ease);
}
.perf-values[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--ember); }
.perf-values summary:focus-visible { outline: 2px solid var(--telemetry); outline-offset: 2px; }
.perf-values table {
    width: 100%; margin-top: 0.6rem;
    border-collapse: collapse;
    font-size: 0.74rem; line-height: 1.35;
    font-variant-numeric: tabular-nums;
}
.perf-values th, .perf-values td { padding: 0.4rem 0 0.4rem 0.5rem; border-bottom: 1px solid var(--hairline); vertical-align: top; text-align: right; }
.perf-values th:first-child, .perf-values td:first-child { padding-left: 0; text-align: left; }
.perf-values th { font-weight: 500; color: var(--text-dim); }
.perf-values td { color: var(--text); }
.perf-values td span { display: block; color: var(--text-dim); }
.perf-values td a { color: var(--text); border-bottom: 1px solid var(--border); transition: color 0.2s, border-color 0.2s; }
.perf-values td a:hover { color: var(--text-hi); border-bottom-color: var(--ember); }
.perf-values p { margin: 0.55rem 0 0.35rem; font-size: 0.72rem; line-height: 1.5; color: var(--text-dim); }

/* performance.html: how the numbers are made, above the charts. */
.perf-method { max-width: 64ch; color: var(--text-muted); font-size: 0.95rem; }
.perf-method + .perf-method, .perf-steps + .perf-method { margin-top: 1rem; }
.perf-steps { list-style: none; max-width: 64ch; margin-top: 1rem; border-top: 1px solid var(--hairline); }
.perf-steps li { padding: 0.75rem 0; border-bottom: 1px solid var(--hairline); color: var(--text-muted); font-size: 0.9rem; }
.perf-steps a, .perf-method a { color: var(--text-hi); border-bottom: 1px solid var(--ember); }

/* The home page section and the press page section. */
.perf-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.perf-head .lede { margin-top: 1.4rem; }
.perf-head .lede a { color: var(--text-hi); border-bottom: 1px solid var(--telemetry); }
/* The resources section above already ends in a section pad. */
.perf-section { padding-block: 0 var(--pad-section); }
.perf-section .perf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.perf-intro { max-width: 62ch; margin: -2rem 0 2.5rem; color: var(--text-muted); font-size: 0.95rem; }
.perf-download { margin-top: 2rem; }
@media (max-width: 1100px) { .perf-section .perf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .perf-section { padding-block: 0 5rem; } .perf-intro { margin-top: -1rem; } }
@media (max-width: 640px) { .perf-section .perf-grid { grid-template-columns: minmax(0, 1fr); } }