/* ============================================================================
   rodzina.css — wspólny STYL całej rodziny MYSZ-MATH (ten sam plik w każdym
   projekcie: static/rodzina/rodzina.css).

   ŹRÓDŁO: MATH\_rodzina\rodzina.css — edytuj tylko tam, potem
   `python _rodzina\sync.py` (kopiuje do wszystkich projektów).

   Styl wybiera się w „Ustawienia strony → Styl”; rodzina.js ustawia
   <html data-style="cartoon | klasyczny | elegancki">.
   ============================================================================ */

@import url("fonts/fonts.css");

/* ── Zmienne stylu ─────────────────────────────────────────────────────────
   --rz-font       font całej strony (napisy, przyciski, tablica)
   --rz-font-math  font „ozdobny” do liczb / nagłówków (logo, wyniki)       */
:root,
html[data-style="cartoon"] {
  --rz-font: "Fredoka", "Nunito", "Segoe UI", sans-serif;
  --rz-font-math: "Lilita One", "Fredoka", sans-serif;
  --rz-radius: 14px;
  --rz-radius-lg: 20px;
  --rz-border-w: 2px;
  --rz-icon: 24px;
}
html[data-style="klasyczny"] {
  --rz-font: Arial, Helvetica, sans-serif;
  --rz-font-math: Arial, Helvetica, sans-serif;
  --rz-radius: 5px;
  --rz-radius-lg: 8px;
  --rz-border-w: 1px;
  --rz-icon: 21px;
}
html[data-style="elegancki"] {
  --rz-font: "STIX Two Text", "Cambria", "Times New Roman", serif;
  --rz-font-math: "STIX Two Text", "Cambria Math", "Times New Roman", serif;
  --rz-radius: 2px;
  --rz-radius-lg: 3px;
  --rz-border-w: 1px;
  --rz-icon: 22px;
}

/* ── Font: cała strona w foncie stylu ──────────────────────────────────────
   Wyjątki: wzory MathJax / KaTeX (mają własne fonty), rysunki SVG (niżej)
   oraz wszystko z klasą .rz-keep-font.                                      */
html[data-style] body,
html[data-style] body *:not(svg):not(svg *):not(mjx-container):not(mjx-container *):not(.katex):not(.katex *):not(.rz-keep-font):not(.rz-keep-font *) {
  font-family: var(--rz-font) !important;
}

/* Napisy na rysunkach SVG: klasyczny i elegancki podmieniają font; cartoon
   zostawia fonty projektu (rysunki są od początku „cartoon”). */
html[data-style="klasyczny"] body svg:not(.rz-svg) text,
html[data-style="elegancki"] body svg:not(.rz-svg) text {
  font-family: var(--rz-font) !important;
}

/* Grubość napisów interfejsu: cartoon grubo, klasyczny zwyczajnie,
   elegancki lekko. */
html[data-style="klasyczny"] :is(.toggle-label, .custom-select__text, .custom-select__option, .s-val) { font-weight: 400; }
html[data-style="klasyczny"] :is(.s-label, .btn-tooltip-bar, .s-section-label, .settings-title, .btn-apply, .btn-reset, h1) { font-weight: 700; }
html[data-style="elegancki"] :is(.toggle-label, .custom-select__text, .custom-select__option, .s-val) { font-weight: 400; }
html[data-style="elegancki"] :is(.s-label, .btn-tooltip-bar, .s-section-label, .settings-title, .btn-apply, .btn-reset, h1) { font-weight: 600; }
html[data-style="elegancki"] :is(.toggle-label, .custom-select__text, .custom-select__option) { font-size: 0.9em; }

/* ── Kształt: zaokrąglenia i ramki zależne od stylu ────────────────────── */
html[data-style] :is(.icon-btn, .btn-apply, .btn-reset, .eq-tool-btn, .num-input, .custom-select__btn,
                     .custom-select__dropdown, .btn-tooltip-bar, .settings-close, #load-btn, #eq-input, #expr-input) {
  border-radius: var(--rz-radius);
}
html[data-style] :is(.card, .settings-panel) { border-radius: var(--rz-radius-lg); }
html[data-style] .icon-btn { border-width: var(--rz-border-w); }
html[data-style="cartoon"] .icon-btn:not(:disabled) { box-shadow: 0 3px 0 var(--border); }
html[data-style="cartoon"] .icon-btn:not(:disabled):active { box-shadow: none; transform: translateY(2px); }

/* Napis / ikona na tle w kolorze akcentu: zawsze ciemny (akcenty rodziny są
   jasne — biały napis byłby nieczytelny). */
#load-btn, .btn-apply, .icon-btn.active, .settings-close:hover { color: #000; }

/* ── Ikony przycisków (SVG z static/rodzina/ikony.js) ──────────────────────
   Stara zawartość przycisku (emoji / wbudowany SVG) zostaje w DOM — logika
   projektu nadal ją podmienia — ale jest ukryta; widać tylko .rz-ico.     */
.icon-btn.rz-on { font-size: 0 !important; }
.icon-btn.rz-on > :not(.rz-ico) { display: none !important; }
.rz-ico { display: flex; align-items: center; justify-content: center; pointer-events: none; }
.icon-btn .rz-ico svg {
  width: var(--rz-icon);
  height: var(--rz-icon);
  /* kształty bez własnego koloru biorą kolor przycisku (currentColor);
     grafiki z własnymi kolorami zostają kolorowe */
  fill: currentColor;
  stroke: none;
  stroke-width: 1;
  overflow: visible;
}

/* ── Logo po lewej stronie paska (klik → mysz-math.pl) ────────────────── */
.rz-logo {
  position: absolute;
  left: 16px;
  top: 10px;
  height: 44px;
  display: flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  transition: color .15s, transform .15s;
}
.rz-logo svg { display: block; height: 40px; width: auto; overflow: visible; }
.rz-logo:hover { color: var(--accent); transform: scale(1.04); }
.rz-logo.rz-small svg { height: 24px; }
.rz-logo.rz-hidden { display: none; }

/* ── Kolorowa kropka w listach „Paleta kolorów” / „Motyw” ────────────────
   Pozycje list mają w nazwie <span class="rz-dot" style="background:…">:
   paleta — kolor akcentu, motyw — kolor tła strony w tym motywie.
   Obwódka, żeby kropka ciemna / czarna była widoczna na ciemnym tle.     */
.rz-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: -1px;
  box-shadow: 0 0 0 1.5px rgba(128, 128, 128, .65);
  flex-shrink: 0;
}