/* Hairline figures (pairs with shared/line-figure.js).

   Flattened from the hairline-figure kit's line-figure.scss. Colours come
   only from four tokens defined in shared/toolkit.css - --paper, --ink,
   --ink-soft, --rule - which switch with the site's html.dark class, so a
   figure follows the theme with no code of its own. Solids are filled with
   the paper colour, not left transparent, so what stands in front hides what
   stands behind. */

.project-figure {
    /* width: 100% matters: inside a flex column an auto-width figure shrinks
       to its content, and an SVG at width:100% of that collapses. */
    width: 100%;
    max-width: 560px;
    /* side margins only, so a page's own spacing (mb-10) still applies */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.project-figure--wide { max-width: 720px; }
.project-figure--small { max-width: 300px; }

.project-figure .project-figure__canvas,
.chart-figure .project-figure__canvas {
    outline: none;
    border-radius: 4px;
    touch-action: pan-y;
    cursor: crosshair;
}

.project-figure .project-figure__canvas:focus-visible,
.chart-figure .project-figure__canvas:focus-visible {
    box-shadow: 0 0 0 2px var(--rule);
}

.project-figure svg,
.chart-figure svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.project-figure figcaption {
    margin-top: 0.6rem;
    font-family: Newsreader, Georgia, serif;
    font-size: 1rem;
    font-style: italic;
    color: var(--ink-soft);
    min-height: 2.8em;
    line-height: 1.4;
}

/* The live caption: the readout is the figure's answer, so it is set in the
   full ink and kept readable, not in the soft line colour. */
.project-figure figcaption [id$="-readout"] {
    color: var(--ink);
}

.project-figure__note {
    display: block;
    margin-top: 0.25rem;
    font-family: 'IBM Plex Sans', sans-serif;
    font-style: normal;
    font-size: 0.78rem;
    color: rgb(var(--n-500));
}

.chart-figure .project-figure__canvas { max-width: 640px; margin: 0 auto; }
.chart-figure--wide .project-figure__canvas { max-width: 820px; }

.chart-figure .chart-figure__readout {
    display: block;
    min-height: 1.4em;
    margin-bottom: 0.35rem;
    color: var(--ink);
    font-style: normal;
}

/* ------------------------------------------------------------------ marks */
:is(.project-figure, .chart-figure) :is(.lf-solid polygon, polygon.lf-solid, circle.lf-solid,
    ellipse.lf-solid, rect.lf-solid, path.lf-solid) {
    fill: var(--paper);
    stroke: var(--ink-soft);
    stroke-width: 0.9;
    stroke-linejoin: round;
    transition: stroke 0.2s ease;
}

:is(.project-figure, .chart-figure) polygon.lf-sheet { stroke-width: 0.6; }

:is(.project-figure, .chart-figure) .lf-face * { vector-effect: non-scaling-stroke; }

:is(.project-figure, .chart-figure) .lf-face text {
    font-family: 'IBM Plex Sans', sans-serif;
    fill: var(--ink-soft);
    stroke: none;
    transition: fill 0.2s ease;
}

:is(.project-figure, .chart-figure) .is-lit .lf-face text { fill: var(--ink); }

:is(.project-figure, .chart-figure) .lf-line {
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 0.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.2s ease, opacity 0.2s ease;
}

:is(.project-figure, .chart-figure) .lf-faint { opacity: 0.55; }
:is(.project-figure, .chart-figure) .lf-strong { stroke-width: 1.2; }

:is(.project-figure, .chart-figure) :is(.lf-ghost polygon, .lf-ghost.lf-line, .lf-ghost .lf-line) {
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 0.75;
    stroke-dasharray: 1.6 1.8;
    transition: stroke 0.2s ease;
}

:is(.project-figure, .chart-figure) .lf-wall { fill: var(--paper); stroke: none; }

:is(.project-figure, .chart-figure) .lf-shade {
    fill: var(--rule);
    stroke: none;
    transition: fill 0.25s ease;
}

:is(.project-figure, .chart-figure) .lf-band {
    fill: transparent;
    stroke: none;
    transition: fill 0.25s ease;
}

:is(.project-figure, .chart-figure) .lf-dot {
    fill: var(--ink-soft);
    stroke: none;
    transition: fill 0.2s ease;
}

:is(.project-figure, .chart-figure) .is-lit .lf-dot { fill: var(--ink); }

:is(.project-figure, .chart-figure) .lf-label {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 10px;
    fill: var(--ink-soft);
}

:is(.project-figure, .chart-figure) .lf-label--head { fill: var(--ink); font-weight: 600; }

:is(.project-figure, .chart-figure) .lf-text {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 8.5px;
    fill: var(--ink-soft);
}

:is(.project-figure, .chart-figure) .lf-text--small { font-size: 6.5px; }

:is(.project-figure, .chart-figure) :is(.is-lit polygon, .is-lit.lf-line, .is-lit .lf-line,
    .is-lit.lf-solid, .is-lit .lf-solid) {
    stroke: var(--ink);
    opacity: 1;
}

:is(.project-figure, .chart-figure) :is(.lf-band.is-lit, .lf-shade.is-lit) {
    fill: var(--rule);
    stroke: var(--ink);
    stroke-width: 0.6;
}

:is(.project-figure, .chart-figure) :is(.lf-text.is-lit, .lf-label.is-lit, .is-lit .lf-text, .is-lit .lf-label) { fill: var(--ink); }

@media (prefers-reduced-motion: reduce) {
    :is(.project-figure, .chart-figure) * { transition: none !important; animation: none !important; }
}