/* Kiel diagram on the Magrini et al. 2022 explainer (figures/papers/build_magrini_figure.py).
   Marks take their colour from the [Fe/H] bin through --k: a sequential ramp from the muted grey
   of the page to its accent. The one-time build comes from site.css ("figure build"). */
@layer pages {
  .paper-fig-svg { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 12px 8px; background: var(--surface); }
  .kiel-svg { inline-size: 100%; block-size: auto; overflow: visible; }
  .kiel-svg .k-axis { fill: none; stroke: var(--ink); stroke-width: 1.2; }
  .kiel-svg .k-tick { stroke: var(--ink); stroke-width: 1; }
  .kiel-svg .k-guide { fill: none; stroke: var(--muted); stroke-width: .6; stroke-dasharray: 3 3; opacity: .7; }
  .kiel-svg .k-num, .kiel-svg .k-lab { font: 500 11px var(--mono); fill: var(--muted); }
  .kiel-svg .k-lab-tex, .kiel-svg .k-num-tex { fill: var(--muted); }
  .kiel-svg .k-note { font: 500 11px var(--mono); fill: var(--ink); }
  .kiel-svg .k-key-h { font: 600 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--muted); }
  .kiel-svg .k-err { fill: none; stroke: var(--muted); stroke-width: .7; opacity: .45; }
  .kiel-svg .fe-0 { --k: color-mix(in oklab, var(--accent) 0%, var(--muted)); }
  .kiel-svg .fe-1 { --k: color-mix(in oklab, var(--accent) 20%, var(--muted)); }
  .kiel-svg .fe-2 { --k: color-mix(in oklab, var(--accent) 40%, var(--muted)); }
  .kiel-svg .fe-3 { --k: color-mix(in oklab, var(--accent) 60%, var(--muted)); }
  .kiel-svg .fe-4 { --k: color-mix(in oklab, var(--accent) 80%, var(--muted)); }
  .kiel-svg .fe-5 { --k: color-mix(in oklab, var(--accent) 100%, var(--muted)); }
  .kiel-svg .k-pt { fill: var(--k); stroke: var(--surface); stroke-width: .6; }
  .kiel-svg .k-pt.k-thick { fill: none; stroke: var(--k); stroke-width: 1.4; }
  .kiel-svg .k-pt.k-mid { fill: none; stroke: var(--k); stroke-width: 1; }
  .kiel-svg .k-pt-dot { fill: var(--k); }
  .kiel-svg .k-none { fill: none; stroke: var(--k); stroke-width: 1.3; }
  .kiel-svg .k-star:hover .k-pt, .kiel-svg .k-star:hover .k-none { stroke: var(--ink); stroke-width: 1.6; }
  .kiel-svg .k-swatch { fill: var(--k); }
  .kiel-svg .k-key-pt { fill: color-mix(in oklab, var(--accent) 60%, var(--muted)); }
  .kiel-svg .k-sun { fill: none; stroke: var(--accent-2); stroke-width: 1.2; }
  .kiel-svg .k-sun-dot { fill: var(--accent-2); }
}
/* on a phone the diagram keeps its type size and scrolls sideways inside its panel */
@media (max-width: 760px) { .paper-fig-svg:has(.kiel-svg) { overflow-x: auto; } .kiel-svg { min-inline-size: 840px; } }