/* Otoolia — Grapheur de fonctions (styles limités à .gf / .gf-*) */
.gf { --gf-grid: #e9e9f1; }
:root[data-theme="dark"] .gf { --gf-grid: #26263a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gf { --gf-grid: #26263a; } }
.gf-head h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: .2em; }
.gf h2 { font-size: 1.05rem; margin: 0 0 10px; }
.gf h3 { font-size: .9rem; margin: 12px 0 6px; }
.gf-main { display: grid; gap: var(--ot-space); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) { .gf-main { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); } }
.gf-main > * { min-width: 0; }
.gf-fn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "s i x" "t t t"; gap: 4px 8px; align-items: center; padding: 6px 8px; border-radius: var(--ot-radius-s); border: 1px solid transparent; margin-bottom: 6px; }
.gf-fn.is-act { border-color: var(--ot-border); background: var(--ot-surface-2); }
.gf-sw { grid-area: s; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--c); background: var(--c); cursor: pointer; padding: 0; }
.gf-sw[aria-pressed="false"] { background: transparent; }
.gf-in { grid-area: i; display: flex; align-items: center; gap: 6px; font-weight: 700; font-family: var(--ot-mono); font-size: .9rem; min-width: 0; }
.gf-in span { white-space: nowrap; }
.gf-in .ot-input { flex: 1; min-width: 0; min-height: 38px; padding: 4px 8px; font-family: var(--ot-mono); font-size: .95rem; }
.gf-x { grid-area: x; border: 0; background: none; font-size: 1.2rem; color: var(--ot-text-soft); cursor: pointer; }
.gf-tex { grid-area: t; font-size: .95rem; overflow-x: auto; min-height: 0; }
.gf-tex:empty { display: none; }
.gf-err { color: var(--ot-danger); font-size: .82rem; font-weight: 600; }
.gf-sm { min-height: 32px; padding: 4px 12px; font-size: .85rem; }
.gf-par { display: grid; grid-template-columns: auto 80px minmax(0, 1fr); gap: 4px 8px; align-items: center; margin-bottom: 6px; }
.gf-par .ot-input { min-height: 32px; padding: 2px 6px; }
.gf-par small { grid-column: 3; font-size: .7rem; color: var(--ot-text-soft); margin-top: -4px; }
.gf-tool { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 6px 0; font-size: .88rem; }
.gf-tool .ot-input { width: 76px; min-height: 32px; padding: 2px 6px; }
.gf-ck { display: inline-flex; gap: 6px; align-items: center; }
.gf-cvw { position: relative; }
.gf-cv { width: 100%; display: block; border-radius: var(--ot-radius-s); background: var(--ot-surface); border: 1px solid var(--ot-border); touch-action: none; cursor: grab; }
.gf-cv:active { cursor: grabbing; }
.gf-zoom { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; }
.gf-zoom button { width: 34px; height: 34px; padding: 0; border-radius: 8px; border: 1px solid var(--ot-border); background: var(--ot-surface); color: var(--ot-text); font-size: 1rem; cursor: pointer; }
.gf-dtex { font-size: 1rem; margin: 6px 0; overflow-x: auto; }
.gf-explain { font-size: .88rem; color: var(--ot-text-soft); background: var(--ot-surface-2); border-radius: var(--ot-radius-s); padding: 8px 12px; margin: 10px 0 0; }
.gf-pts { list-style: none; padding: 0; margin: 4px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px; font-size: .84rem; font-variant-numeric: tabular-nums; }
.gf-pts i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.gf-table { overflow-x: auto; }
.gf-table table { border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; }
.gf-table th, .gf-table td { padding: 3px 10px; border-bottom: 1px solid var(--ot-border); text-align: right; }
.gf-exp { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gf-tikz { width: 100%; min-height: 160px; font-family: var(--ot-mono); font-size: .78rem; margin-top: 8px; }
.gf-about { margin-top: calc(var(--ot-space) * 2); }
.gf-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ot-text); color: var(--ot-bg); padding: 10px 18px; border-radius: 999px; font-size: .9rem; z-index: 50; }
.gf-lab { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; font-weight: 600; color: var(--ot-text-soft); width: 100%; }
.gf-tool .gf-lab { width: auto; }
.gf-lab .ot-select { min-height: 34px; padding: 2px 6px; width: auto; max-width: 100%; }
.gf-iptxt { width: 100%; font-family: var(--ot-mono); font-size: .88rem; margin-top: 3px; }
.gf-gen { margin-top: 10px; font-size: .88rem; }
.gf-gen summary { cursor: pointer; font-weight: 600; }
.gf-gen[hidden], #gf-ipbox[hidden] { display: none; }
.gf-diag { background: color-mix(in srgb, #c2185b 14%, transparent); font-weight: 700; }
.gf-axes { margin-top: 8px; border-top: 1px solid var(--ot-border); padding-top: 8px; }
.gf-axes h3 { margin: 4px 0 8px; }
.gf-tl { min-width: 7.5em; font-size: .84rem; }
.gf-tool select.ot-select { min-height: 32px; padding: 2px 6px; width: auto; }
.gf-realinfo { font-weight: 600; font-size: .88rem; margin: 4px 0 8px; }
#gf-subbox[hidden], #gf-realbox[hidden] { display: none; }
#gf-printbox { display: none; }
@media print {
  body.gf-printing > *:not(#gf-printbox) { display: none !important; }
  body.gf-printing #gf-printbox { display: block; }
  body.gf-printing #gf-printbox svg { display: block; }
  @page { margin: 10mm; }
}