/* ==========================================================================
   Grafici di funzioni — stile delle figure delle lezioni (js/plot.js)
   Colori delle serie per tema (pl-s0…5), fondo per aloni e pallini vuoti,
   leggenda a pastiglie. Va caricato dopo css/plot.css.
   ========================================================================== */
.pl-svg {
  --pl-bg: var(--raised, #262628);
  --pl-0: #2997ff; --pl-1: #ff453a; --pl-2: #30d158; --pl-3: #ff9f0a; --pl-4: #bf5af2; --pl-5: #64d2ff;
  overflow: visible;
}
:root[data-theme="light"] .pl-svg, :root[data-theme="light"] .pl-legend, :root[data-theme="light"] .pl-info {
  --pl-0: #0a6fd6; --pl-1: #d1352b; --pl-2: #1f9d47; --pl-3: #d47800; --pl-4: #9442c4; --pl-5: #138bb8;
}
.pl-legend, .pl-info { --pl-0: #2997ff; --pl-1: #ff453a; --pl-2: #30d158; --pl-3: #ff9f0a; --pl-4: #bf5af2; --pl-5: #64d2ff; }
.pl-s0 { color: var(--pl-0); } .pl-s1 { color: var(--pl-1); } .pl-s2 { color: var(--pl-2); }
.pl-s3 { color: var(--pl-3); } .pl-s4 { color: var(--pl-4); } .pl-s5 { color: var(--pl-5); }
.pl-svg .pl-ink { color: var(--ink); }
.pl-svg .pl-bg { fill: var(--pl-bg); }
.pl-svg .pl-halo { stroke: var(--pl-bg); }
:root[data-theme="light"] .pl-svg .pl-glow { stroke-opacity: 0.09; }
.pl-svg text { font-family: var(--font); }
.pl-svg text[font-style="italic"] { font-family: KaTeX_Math, "Times New Roman", Times, serif; }

/* leggenda: pastiglie con il segno della serie */
.pl-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pl-legend .pl-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px 4px 9px; border-radius: 999px; background: var(--fill-2); color: var(--ink); font: 500 13.5px/1.3 var(--font); letter-spacing: 0.01em; }
.pl-legend .pl-chip i { width: 14px; height: 3px; border-radius: 2px; background: currentColor; flex: none; }
.pl-legend .pl-k-ineq i { height: 10px; width: 12px; border-radius: 3px; }
.pl-legend .pl-k-eq i { background: linear-gradient(90deg, currentColor 55%, transparent 55%) 0 0 / 6px 3px repeat-x; }
.pl-info { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.pl-info p { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 500 14px/1.45 var(--font); color: var(--ink); }
.pl-info p i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; transform: translateY(-1px); }

/* nella nota: il vassoio delle figure delle lezioni */
.nb-graph { background: var(--tray, var(--raised)); border-radius: var(--r-tray, 18px); padding: 16px 16px 12px; }
.nb-graph .pl-svg { --pl-bg: var(--tray, var(--raised)); }
.nb-paper .nb-graph .pl-svg, .pl-svg.pl-print { --pl-bg: #fff; }
.nb-paper .nb-graph .pl-legend .pl-chip { background: #f1efea; color: #1d1b18; }
.nb-paper .nb-graph .pl-legend, .nb-paper .nb-graph .pl-info { --pl-0: #0a63c9; --pl-1: #c9261d; --pl-2: #1d8a3c; --pl-3: #c26c00; --pl-4: #8e3fb8; --pl-5: #167f9e; }

/* finestra del grafico: anteprima sul vassoio */
.pl-prev { background: var(--tray, var(--raised)); }
.pl-prev .pl-svg { --pl-bg: var(--tray, var(--raised)); }
.pl-opt { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.pl-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.pl-drawn { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--fill-2); font-size: 13.5px; color: var(--ink-2); }
.pl-drawn button { margin-left: auto; padding: 3px 10px; border: 1px solid var(--stroke-2); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }

/* pagine a mano: «Converti in grafico» nella barra del lazo, con la scritta */
.ink-sel-bar button.ink-sel-wide { width: auto; padding: 0 12px 0 9px; display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--font); white-space: nowrap; }
.ink-sel-bar button.ink-sel-wide svg { width: 18px; height: 18px; flex: none; }