/**
 * molgod-panel.css — arkusz panelu warstwy edukacyjnej wizualizatora
 * Wersja 1.0.0 · dla molgod-panel.js 1.0.0
 *
 * =============================================================================
 * CO TO JEST I CZEGO NIE RUSZA
 * =============================================================================
 * Osobny plik, ladowany osobno. NIE modyfikuje viewer.css ani widget-upgrade.css
 * i nie zaklada, ze ktorykolwiek z nich jest zaladowany — panel maluje sie sam.
 * Gdy viewer.css jednak jest, panel dziedziczy jego zmienne (--ms-*) i wyglada
 * jak reszta widgetu; gdy go nie ma, dzialaja wartosci zapasowe w var(..., X).
 *
 * Wszystkie 36 klas emitowanych przez molgod-panel.js ma tu regule. Inwentarz
 * powstal DWIEMA metodami (grep po zrodle + wyciag z realnego renderu) —
 * grep sam by nie zobaczyl szesciu klas .mg-panel--* i czterech .mg-prov--*,
 * bo one sa sklejane z danych, nie stoja w zrodle jako literal.
 *
 * =============================================================================
 * TRZY DECYZJE, KTORE WYGLADAJA NA DZIWACTWO, A SA CELOWE
 * =============================================================================
 *
 * 1. PODWOJONA KLASA `.mg-panel.mg-panel` W REGULACH KORZENIA.
 *    viewer.css:34-38 ma reset `.molgod-widget * { margin:0; padding:0 }`
 *    o specyficznosci (0,1,0) — dokladnie tyle samo, co samo `.mg-panel`.
 *    O zwyciezcy decydowalaby wtedy KOLEJNOSC LADOWANIA arkuszy, czyli rzecz,
 *    ktorej ten plik nie kontroluje. Podwojenie klasy daje (0,2,0) i wynik
 *    przestaje zalezec od tego, kto sie zaladowal pierwszy. To samo dotyczy
 *    `.molgod-widget ul` (0,1,1) kasujacego wypunktowanie w .mg-reasons —
 *    stad wszystkie reguly potomne zaczynaja sie od `.mg-panel `.
 *
 * 2. BRAK `@media (prefers-color-scheme: dark)`. To NIE jest przeoczenie.
 *    viewer.css:836-841 mowi wprost: "15. Dark mode — WYLACZONY (v1.1).
 *    User wymaga zawsze bialego tla." Automatyczny ciemny motyw wniosly ten
 *    sam defekt z powrotem. "Dziala na ciemnym tle" jest tu zrealizowane
 *    INACZEJ: panel maluje wlasne, NIEPRZEZROCZYSTE tlo, wiec to, co jest pod
 *    nim, nie ma wplywu na czytelnosc. Ciemna skorka istnieje, ale wylacznie
 *    na zyczenie wolajacego: `.mg-panel--on-dark` (albo [data-mg-surface="dark"]).
 *
 * 3. ROZNICA KSZTALTU, NIE TYLKO KOLORU, PRZY KROPKACH PROWIENIENCJI.
 *    Zmierzone luminancje relatywne czterech kolorow z palety molgod-render.js:
 *        MEASURED  #1D9E75  Y = 0.254
 *        DERIVED   #378ADD  Y = 0.238
 *        TABULATED #BA7517  Y = 0.237
 *        UNKNOWN   #888780  Y = 0.241
 *    Rozpietosc 0.017 — w skali szarosci, w druku i przy deuteranopii te cztery
 *    kropki sa NIEODROZNIALNE. A caly sens modulu polega na tym, zeby czytelnik
 *    widzial, ze wartosc tablicowa nie jest pomiarem TEJ czasteczki. Kolor jest
 *    wiec drugim nosnikiem, nie jedynym: pelne kolo / pierscien / romb / kolo
 *    kreskowane roznia sie sylwetka niezaleznie od koloru i przezywaja
 *    forced-colors, druk i monochromatyczny ekran.
 *
 * =============================================================================
 * PANEL NIGDY NIE ROZPYCHA WIDGETU
 * =============================================================================
 * Wymog: dlugie tresci zawijaja sie albo przewijaja we WLASNYM kontenerze.
 * Realizacja: zaden element nie ma stalej szerokosci, kazde dziecko flexa ma
 * min-width:0 (bez tego flex nie pozwala zjechac ponizej rozmiaru tresci
 * i to wlasnie tak powstaje poziomy pasek), overflow-wrap:anywhere na polach
 * tekstowych, overflow-x:clip na korzeniu jako ostatnia linia obrony.
 * Zwezanie obslugiwane jest zapytaniem o kontener (@container), a nie
 * o okno — widget potrafi stac w kolumnie 1/3 na szerokim ekranie, wiec
 * @media (max-width) mierzyloby nie ten byt. Dla przegladarek bez @container
 * dzialaja klasy .ms-bp-* wyliczane przez ResizeObserver widgetu, a gdyby
 * i ich nie bylo — uklad bazowy sam sie zawija.
 */

/* =============================================================================
   1. Zmienne panelu
   Wlasny zestaw --mgp-*, kazdy z odwolaniem do zmiennej widgetu i twarda
   wartoscia zapasowa. Panel wyrwany z widgetu nadal wyglada jak nalezy.
   ============================================================================= */
.mg-panel {
    --mgp-bg:          var(--ms-bg,        #ffffff);
    --mgp-bg-alt:      var(--ms-bg-2,      #f5f7ff);
    --mgp-bg-head:     var(--ms-bg-3,      #eef1ff);
    --mgp-border:      var(--ms-border,    rgba(200, 210, 240, 0.7));
    --mgp-rule:        rgba(120, 140, 200, 0.20);
    --mgp-text:        var(--ms-text,      #1a1a2e);
    --mgp-text-2:      var(--ms-text-2,    #445);
    --mgp-text-3:      var(--ms-text-3,    #6b6b80);
    --mgp-accent:      var(--ms-primary,   #2255dd);
    --mgp-radius:      var(--ms-radius-sm, 8px);
    --mgp-radius-xs:   var(--ms-radius-xs, 5px);
    --mgp-shadow:      0 4px 20px rgba(60, 80, 160, 0.10), inset 0 0.5px 0 rgba(255, 255, 255, 1);
    --mgp-font:        var(--ms-font, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
    --mgp-mono:        ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* Kolory prowieniencji — te same wartosci co RND.COLORS w molgod-render.js,
       zeby panel i rysunek mowily jednym glosem. Nie zmieniaj ich w oderwaniu
       od tamtej palety. */
    --mgp-measured:    #1D9E75;
    --mgp-derived:     #378ADD;
    --mgp-tabulated:   #BA7517;
    --mgp-unknown:     #888780;

    /* Sterowane przez wolajacego: dokad panel moze urosnac, zanim zacznie
       przewijac sie WEWNATRZ siebie. */
    --mgp-max-h:       340px;
}

/* =============================================================================
   2. Korzen panelu
   ============================================================================= */
.mg-panel.mg-panel {
    box-sizing:      border-box;
    display:         block;
    width:           100%;
    max-width:       100%;
    min-width:       0;
    margin:          0;
    padding:         10px 12px 8px;

    font-family:     var(--mgp-font);
    font-size:       12.5px;
    line-height:     1.5;
    color:           var(--mgp-text);
    text-align:      left;

    /* Tlo NIEPRZEZROCZYSTE — to jest cala odpowiedz na "musi dzialac na ciemnym
       i jasnym tle". Panel nie prosi tla o wspolprace. */
    background:      var(--mgp-bg);
    border:          0.5px solid var(--mgp-border);
    border-radius:   var(--mgp-radius);
    box-shadow:      var(--mgp-shadow);

    /* Wlasny kontener przewijania. overflow-x:clip zamiast hidden — clip nie
       tworzy kontekstu przewijania w poziomie, wiec nawet blad w tresci nie
       da paska. */
    max-height:      var(--mgp-max-h);
    overflow-y:      auto;
    overflow-x:      clip;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    /* Podstawa zapytania o kontener — patrz sekcja 11. */
    container-type:  inline-size;
    container-name:  mgpanel;
}

/* Wszystko w srodku ma prawo sie zwezic ponizej rozmiaru wlasnej tresci.
   Bez tej reguly flex broni szerokosci dziecka i panel rozpycha widget. */
.mg-panel * {
    min-width:  0;
    box-sizing: border-box;
}

.mg-panel::-webkit-scrollbar               { width: 8px; }
.mg-panel::-webkit-scrollbar-track         { background: transparent; }
.mg-panel::-webkit-scrollbar-thumb         { background: var(--mgp-rule); border-radius: 4px; }
.mg-panel::-webkit-scrollbar-thumb:hover   { background: var(--mgp-text-3); }
.mg-panel { scrollbar-width: thin; scrollbar-color: var(--mgp-rule) transparent; }

/* =============================================================================
   3. Naglowek — przyklejony, zeby przy przewijaniu bylo widac CZEGO dotyczy panel
   ============================================================================= */
.mg-panel .mg-panel__head {
    position:        sticky;
    top:             -10px;                 /* rowne gornemu paddingowi korzenia */
    z-index:         2;
    margin:          -10px -12px 8px;
    padding:         8px 12px 7px;
    background:      var(--mgp-bg-head);
    border-bottom:   0.5px solid var(--mgp-border);
    border-radius:   var(--mgp-radius) var(--mgp-radius) 0 0;
    display:         flex;
    flex-wrap:       wrap;
    align-items:     baseline;
    gap:             4px 8px;
}

.mg-panel .mg-panel__title {
    margin:          0;
    font-size:       13px;
    font-weight:     700;
    line-height:     1.35;
    color:           var(--mgp-text);
    overflow-wrap:   anywhere;
    flex:            1 1 auto;
}

.mg-panel .mg-panel__sub {
    flex:            0 1 auto;
    font-size:       11.5px;
    color:           var(--mgp-text-2);
    overflow-wrap:   anywhere;
}

/* =============================================================================
   4. Sekcje
   ============================================================================= */
.mg-panel .mg-sect {
    display:         block;
    margin:          0 0 7px;
    padding:         0;
}

.mg-panel .mg-sect__h {
    margin:          9px 0 3px;
    padding:         0 0 2px;
    font-size:       9.5px;
    font-weight:     700;
    line-height:     1.4;
    text-transform:  uppercase;
    letter-spacing:  0.06em;
    color:           var(--mgp-text-3);
    border-bottom:   0.5px solid var(--mgp-rule);
    overflow-wrap:   anywhere;
}

.mg-panel .mg-sect:first-of-type .mg-sect__h { margin-top: 0; }

/* =============================================================================
   5. Wiersze klucz–wartosc
   ============================================================================= */
.mg-panel .mg-rows {
    display:         block;
    margin:          0;
    padding:         0;
}

.mg-panel .mg-row {
    display:         flex;
    flex-wrap:       wrap;                 /* zawijanie zamiast rozpychania */
    align-items:     baseline;
    justify-content: space-between;
    gap:             2px 10px;
    padding:         2px 4px;
    margin:          0 -4px;
    border-radius:   var(--mgp-radius-xs);
}

/* Delikatna zebra — czyta sie rzedami, nie kolumnami. Kolor jest tak slaby,
   ze nie konkuruje z kropkami prowieniencji. */
.mg-panel .mg-row:nth-child(odd)  { background: var(--mgp-bg-alt); }
.mg-panel .mg-row:hover           { background: rgba(34, 85, 221, 0.07); }

.mg-panel .mg-row__k {
    flex:            1 1 auto;
    margin:          0;
    padding:         0;
    color:           var(--mgp-text-3);
    font-weight:     400;
    overflow-wrap:   anywhere;
    hyphens:         auto;
}

.mg-panel .mg-row__v {
    flex:            0 1 auto;
    margin:          0;
    padding:         0;
    display:         flex;
    flex-wrap:       wrap;
    align-items:     baseline;
    justify-content: flex-end;
    gap:             0 4px;
    text-align:      right;
    color:           var(--mgp-text);
    font-weight:     600;
    overflow-wrap:   anywhere;
}

/* Komorka liczbowa: monospace + cyfry o stalej szerokosci, zeby kolumna
   wartosci ustawila sie w pion mimo roznej liczby miejsc po przecinku. */
.mg-panel .mg-row__v.mg-num {
    font-family:            var(--mgp-mono);
    font-variant-numeric:   tabular-nums;
    font-feature-settings:  "tnum" 1;
    letter-spacing:         -0.01em;
    white-space:            nowrap;        /* liczba nie lamie sie w polowie... */
}
/* ...ale gdy naprawde nie ma miejsca, wolno jej zjechac do nowej linii
   razem z jednostka, zamiast wypchnac panel. */
.mg-panel .mg-row__v.mg-num > .mg-val,
.mg-panel .mg-row__v.mg-num > .mg-unit { white-space: nowrap; }

/* =============================================================================
   6. Atomy wartosci
   ============================================================================= */
.mg-panel .mg-val {
    display:         inline;
    overflow-wrap:   anywhere;
}

.mg-panel .mg-unit {
    color:           var(--mgp-text-3);
    font-weight:     400;
    font-size:       0.9em;
    white-space:     nowrap;
}

/* Brak wiedzy powiedziany wprost — ma byc widoczny, ale nie krzykliwy. */
.mg-panel .mg-unknown {
    color:           var(--mgp-text-3);
    font-style:      italic;
    font-weight:     400;
}

/* Notacja chemiczna z danych: C, sp2-sp2, [He] 2s2 2p2. Ramka mowi
   "to jest symbol, nie zdanie" — dokladnie tak, jak zaklada modul. */
.mg-panel .mg-code {
    font-family:     var(--mgp-mono);
    font-size:       0.92em;
    padding:         0 3px;
    border-radius:   3px;
    background:      var(--mgp-bg-head);
    border:          0.5px solid var(--mgp-rule);
    color:           var(--mgp-text);
    overflow-wrap:   anywhere;
}

/* Odwolanie do atomu: symbol + indeks w dolnym rejestrze. */
.mg-panel .mg-atom {
    display:         inline-flex;
    align-items:     baseline;
    white-space:     nowrap;
}

.mg-panel .mg-atom__i {
    font-family:     var(--mgp-mono);
    font-size:       0.72em;
    line-height:     1;
    color:           var(--mgp-text-3);
    vertical-align:  sub;
    margin-left:     1px;
}

/* Lancuch atomow: wiazanie, kat, torsja. Odstep miedzy ogniwami robi gap,
   nie znak — modul celowo nie emituje separatora, zeby nie bylo literalu
   do tlumaczenia. */
.mg-panel .mg-chain {
    display:         inline-flex;
    flex-wrap:       wrap;
    align-items:     baseline;
    gap:             0 6px;
    font-weight:     600;
}

/* Delikatna kropka miedzy ogniwami lancucha — czysta dekoracja CSS,
   wiec nie wnosi tekstu do tlumaczenia ani do drzewa dostepnosci. */
.mg-panel .mg-chain .mg-atom + .mg-atom::before {
    content:         "";
    display:         inline-block;
    width:           3px;
    height:          3px;
    margin-right:    5px;
    border-radius:   50%;
    background:      var(--mgp-rule);
    vertical-align:  middle;
}

/* Pary: sasiedzi atomu, wolne pary na obu koncach wiazania. */
.mg-panel .mg-pairs {
    display:         inline-flex;
    flex-wrap:       wrap;
    justify-content: flex-end;
    gap:             3px 8px;
}

.mg-panel .mg-pair {
    display:         inline-flex;
    align-items:     baseline;
    gap:             3px;
    padding:         0 5px;
    border-radius:   10px;
    background:      var(--mgp-bg-alt);
    border:          0.5px solid var(--mgp-rule);
    white-space:     nowrap;
    font-size:       0.94em;
}

/* =============================================================================
   7. Uzasadnienia (sekcja "reasons" przy kacie)
   ============================================================================= */
.mg-panel .mg-reasons {
    margin:          2px 0 0;
    padding:         0 0 0 1.15em;
    list-style:      disc outside;         /* bije `.molgod-widget ul{list-style:none}` */
}

.mg-panel .mg-reason {
    display:         list-item;
    margin:          0 0 2px;
    padding:         0;
    color:           var(--mgp-text-2);
    line-height:     1.45;
    overflow-wrap:   anywhere;
    hyphens:         auto;
}

.mg-panel .mg-reason::marker { color: var(--mgp-text-3); }

/* =============================================================================
   8. Komunikaty (pusto / brak danych / nieobslugiwane)
   ============================================================================= */
.mg-panel .mg-notice {
    margin:          0;
    padding:         14px 4px;
    text-align:      center;
    color:           var(--mgp-text-3);
    font-style:      italic;
    overflow-wrap:   anywhere;
}

/* =============================================================================
   9. PROWIENIENCJA — sedno arkusza
   Kazdy marker rozni sie OD KAZDEGO INNEGO na trzech niezaleznych osiach:
   kolor, ksztalt (sylwetka) i wypelnienie. Odpadniecie jednej osi (druk,
   monochromatyczny ekran, forced-colors, daltonizm) nie zabiera pozostalych.
   ============================================================================= */
.mg-panel .mg-prov {
    display:         inline-block;
    flex:            0 0 auto;
    width:           9px;
    height:          9px;
    margin-left:     3px;
    vertical-align:  middle;
    box-sizing:      border-box;
    cursor:          help;
}

/* MEASURED — policzone ze wspolrzednych TEGO konformeru.
   Pelne kolo: "wartosc jest, zmierzona, kompletna". */
.mg-panel .mg-prov--measured {
    background:      var(--mgp-measured);
    border:          1px solid var(--mgp-measured);
    border-radius:   50%;
}

/* DERIVED — wyprowadzone z grafu, nie zmierzone.
   Pierscien: kolo, ale puste w srodku. */
.mg-panel .mg-prov--derived {
    background:      transparent;
    border:          2.5px solid var(--mgp-derived);
    border-radius:   50%;
}

/* TABULATED — wartosc tablicowa dla TYPU, nie pomiar tej czasteczki.
   Romb: inna sylwetka niz oba kola, rozpoznawalna nawet w skali szarosci
   i nawet gdy kolor zniknie. To jest ten marker, na ktorym najbardziej
   zalezy — pomylka "tablicowe wzieto za pomiar" jest bledem merytorycznym. */
.mg-panel .mg-prov--tabulated {
    background:      var(--mgp-tabulated);
    border:          1px solid var(--mgp-tabulated);
    border-radius:   1px;
    transform:       rotate(45deg);
    width:           8px;
    height:          8px;
}

/* UNKNOWN — prowieniencji nie znamy. Kolo kreskowane, puste, przygaszone:
   "tu czegos brakuje" ma byc widoczne, ale nie ma krzyczec glosniej
   niz realna informacja. */
.mg-panel .mg-prov--unknown {
    background:      transparent;
    border:          1.5px dashed var(--mgp-unknown);
    border-radius:   50%;
    opacity:         0.85;
}

/* =============================================================================
   10. Legenda — przyklejona do dolu, bo bez niej kropki sa szyfrem
   ============================================================================= */
.mg-panel .mg-legend {
    position:        sticky;
    bottom:          -8px;                 /* rowne dolnemu paddingowi korzenia */
    z-index:         2;
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    gap:             4px 12px;
    margin:          8px -12px -8px;
    padding:         6px 12px;
    background:      var(--mgp-bg-head);
    border-top:      0.5px solid var(--mgp-border);
    border-radius:   0 0 var(--mgp-radius) var(--mgp-radius);
    font-size:       10.5px;
    color:           var(--mgp-text-2);
}

.mg-panel .mg-legend__item {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    white-space:     nowrap;
}

/* W legendzie kropka stoi PRZED etykieta — margines z .mg-prov jest tam
   z zlej strony. */
.mg-panel .mg-legend__item .mg-prov { margin-left: 0; margin-right: 1px; }

.mg-panel .mg-legend__label { overflow-wrap: anywhere; white-space: normal; }

/* =============================================================================
   11. Waskie kontenery
   Zapytanie o KONTENER, nie o okno: widget potrafi stac w kolumnie 1/3
   na ekranie 1920px i wtedy @media (max-width) zmierzyloby nie ten byt.
   ============================================================================= */
@container mgpanel (max-width: 300px) {
    .mg-panel .mg-row       { padding: 3px 4px; }
    .mg-panel .mg-row__k    { flex: 1 1 100%; }   /* etykieta bierze cala linie */
    .mg-panel .mg-row__v    { flex: 1 1 100%; justify-content: flex-start; text-align: left; }
    .mg-panel .mg-pairs     { justify-content: flex-start; }
    .mg-panel .mg-legend    { gap: 3px 8px; font-size: 10px; }
}

@container mgpanel (max-width: 220px) {
    .mg-panel.mg-panel      { padding: 8px 9px 6px; font-size: 12px; }
    .mg-panel .mg-panel__head { margin: -8px -9px 6px; padding: 7px 9px 6px; top: -8px; }
    .mg-panel .mg-legend    { margin: 6px -9px -6px; padding: 5px 9px; }
    .mg-panel .mg-sect__h   { font-size: 9px; }
}

/* Zapasowe wejscie dla przegladarek bez @container: klasy breakpointow,
   ktore widget i tak wylicza swoim ResizeObserverem (viewer.css sekcja 16).
   Reguly sa dokladnie te same — panel nie zachowa sie inaczej dlatego,
   ze zadzialala inna droga. */
.molgod-widget.ms-bp-medium .mg-panel .mg-row__k,
.molgod-widget.ms-bp-small  .mg-panel .mg-row__k,
.molgod-widget.ms-bp-mini   .mg-panel .mg-row__k { flex: 1 1 100%; }

.molgod-widget.ms-bp-medium .mg-panel .mg-row__v,
.molgod-widget.ms-bp-small  .mg-panel .mg-row__v,
.molgod-widget.ms-bp-mini   .mg-panel .mg-row__v { flex: 1 1 100%; justify-content: flex-start; text-align: left; }

.molgod-widget.ms-bp-medium .mg-panel .mg-pairs,
.molgod-widget.ms-bp-small  .mg-panel .mg-pairs,
.molgod-widget.ms-bp-mini   .mg-panel .mg-pairs { justify-content: flex-start; }

/* =============================================================================
   12. Warianty panelu wg rodzaju zaznaczenia
   Kolory wziete z RND.COLORS (molgod-render.js): zaznaczenie #BA7517,
   pomiar #D4537E. Kreska przy naglowku mowi CO zaznaczono, zanim czytelnik
   przeczyta tytul. Reguly sa dodatkowe — panel o nieznanym rodzaju
   (mg-panel--cokolwiek) po prostu ich nie dostaje i wyglada poprawnie.
   ============================================================================= */
.mg-panel--atom    .mg-panel__head { box-shadow: inset 3px 0 0 #BA7517; }
.mg-panel--bond    .mg-panel__head { box-shadow: inset 3px 0 0 #378ADD; }
.mg-panel--measure .mg-panel__head { box-shadow: inset 3px 0 0 #D4537E; }

/* Stany bez tresci: panel ma byc niski i cichy, nie ma udawac zawartosci. */
.mg-panel--empty.mg-panel,
.mg-panel--unsupported.mg-panel {
    max-height:   none;
    background:   var(--mgp-bg-alt);
    box-shadow:   none;
}

/* =============================================================================
   13. Skorka na ciemne tlo — WYLACZNIE NA ZYCZENIE WOLAJACEGO
   Bez @media (prefers-color-scheme): viewer.css:836-841 zapisuje decyzje
   "dark mode WYLACZONY, user wymaga zawsze bialego tla". Automatyczne
   przelaczanie zlamaloby te decyzje. Kto swiadomie klada panel na ciemnej
   powierzchni, dokleja klase i bierze wyglad na siebie.
   ============================================================================= */
.mg-panel--on-dark,
[data-mg-surface="dark"] .mg-panel {
    --mgp-bg:        #171a24;
    --mgp-bg-alt:    #1e2230;
    --mgp-bg-head:   #232838;
    --mgp-border:    rgba(150, 170, 220, 0.28);
    --mgp-rule:      rgba(150, 170, 220, 0.22);
    --mgp-text:      #eef1f8;
    --mgp-text-2:    #c3c9db;
    --mgp-text-3:    #98a0b8;
    --mgp-accent:    #7aa7ff;
    --mgp-shadow:    0 4px 20px rgba(0, 0, 0, 0.45);
    /* Kropki rozjasnione — te same barwy, podniesiona jasnosc, zeby na
       ciemnym tle utrzymac kontrast. Sylwetki bez zmian. */
    --mgp-measured:  #35C795;
    --mgp-derived:   #6FB0F0;
    --mgp-tabulated: #E0A04A;
    --mgp-unknown:   #A9A79E;
}

.mg-panel--on-dark .mg-row:hover,
[data-mg-surface="dark"] .mg-panel .mg-row:hover { background: rgba(122, 167, 255, 0.12); }

/* =============================================================================
   14. Tryb wysokiego kontrastu / forced-colors
   W tym trybie systemowe kolory zastepuja nasze, a `background` bywa
   kasowany. Sylwetka zostaje — i to jest powod, dla ktorego w ogole
   jest zakodowana ksztaltem, a nie samym kolorem.
   ============================================================================= */
@media (forced-colors: active) {
    .mg-panel.mg-panel          { border: 1px solid CanvasText; box-shadow: none; }
    .mg-panel .mg-row:nth-child(odd) { background: Canvas; }
    .mg-panel .mg-prov          { forced-color-adjust: none; }
    .mg-panel .mg-prov--measured  { background: CanvasText; border-color: CanvasText; }
    .mg-panel .mg-prov--derived   { background: Canvas;     border-color: CanvasText; }
    .mg-panel .mg-prov--tabulated { background: CanvasText; border-color: CanvasText; }
    .mg-panel .mg-prov--unknown   { background: Canvas;     border-color: GrayText; border-style: dashed; }
}

/* =============================================================================
   15. Ograniczony ruch i druk
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .mg-panel .mg-row { transition: none; }
}

@media print {
    .mg-panel.mg-panel {
        max-height:  none;
        overflow:    visible;
        box-shadow:  none;
        border:      1px solid #999;
        background:  #fff;
        color:       #000;
        break-inside: avoid;
    }
    .mg-panel .mg-panel__head,
    .mg-panel .mg-legend { position: static; background: #fff; }
    /* W druku kolor bywa nieobecny — dlatego kropki maja ksztalt.
       Wymuszamy odwzorowanie tla, ale nie polegamy na nim. */
    .mg-panel .mg-prov { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* =============================================================================
 * WARSTWA KONTENERA — dodana przy wpięciu klikania (orkiestrator, 2026-09-06)
 *
 * Powyżej: wygląd panelu emitowanego przez molgod-panel.js.
 * Tutaj: opakowanie, w którym viewer.js ten panel osadza. Trzy grupy klas,
 * których moduł panelu NIE emituje i emitować nie może, bo nie wie nic o DOM:
 *   .mg-panel-wrap / .mg-panel-body / .mg-panel-close  — pływająca karta
 *   .mg-hint                                            — podpowiedź startowa
 *   .mg-sources / .mg-src-*                             — przypisy do publikacji
 *
 * Rozdział jest celowy: gdyby panel kiedyś trafił w inne miejsce (osobna
 * kolumna, modal, druk), wymienia się tę sekcję, a wygląd treści zostaje.
 * ========================================================================== */

.molgod-widget .mg-panel-wrap {
    position: absolute;
    right: 14px;
    /* Nie 50%: w prawym gornym rogu stoi miniaturka szkieletu 2D, a w dolnym
       panel GHS. Pas 104px od gory omija miniaturke, a max-height ponizej
       zostawia miejsce na GHS. */
    top: 104px;
    bottom: auto;
    width: min(340px, calc(100% - 28px));
    max-height: calc(100% - 200px);
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(148, 163, 184, 0.42);
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(15, 23, 42, 0.17), 0 2px 6px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 14;
    animation: mg-panel-in 160ms ease-out;
}

.molgod-widget .mg-panel-wrap[hidden] { display: none !important; }

@keyframes mg-panel-in {
    from { opacity: 0; transform: translateY(-50%) translateX(10px); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.molgod-widget .mg-panel-body {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 16px 16px;
    /* Przewijanie panelu nie może porwać ze sobą strony pod spodem. */
    overscroll-behavior: contain;
}

.molgod-widget .mg-panel-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background 120ms, color 120ms;
}
.molgod-widget .mg-panel-close:hover { background: rgba(148, 163, 184, 0.18); color: #0f172a; }
.molgod-widget .mg-panel-close:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }

/* --- Podpowiedź startowa -------------------------------------------------
 * Uczy przez użycie, nie instrukcją. Znika po pierwszym trafionym kliknięciu.
 * pointer-events:none jest tu warunkiem poprawności, nie kosmetyką: bez tego
 * podpowiedź przechwytywałaby kliknięcie w molekułę dokładnie w chwili, gdy
 * zachęca do kliknięcia. */
.molgod-widget .mg-hint {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    /* Byla czarna pigulka z 78% krycia - kontrastowa, ale ciezka i czytajaca sie
       jak komunikat bledu. Teraz szklana, jasna, spojna z reszta widgetu.
       Kontrast tekstu #334155 na tym tle to okolo 9:1, wiec zmiana jest
       wylacznie estetyczna, nie kosztem czytelnosci. */
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.1);
    color: #334155;
    font-size: 12px;
    font-weight: 500;
    padding: 7px 15px;
    border-radius: 999px;
    pointer-events: none;
    z-index: 12;
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    animation: mg-hint-in 420ms ease-out;
}
.molgod-widget .mg-hint[hidden] { display: none !important; }

@keyframes mg-hint-in { from { opacity: 0; } to { opacity: 1; } }

/* --- Przypisy do publikacji ---------------------------------------------
 * Projekt jest naukowy: wartość tablicowa bez drogi do publikacji jest
 * bezużyteczna, a co gorsza wygląda na pomiar. Znacznik ma ten sam bursztyn
 * co kropka prowieniencji TABULATED, żeby wzrok łączył jedno z drugim. */
.molgod-widget .mg-sources {
    margin-top: 12px;
    padding-top: 9px;
    border-top: 1px solid rgba(148, 163, 184, 0.28);
}
.molgod-widget .mg-src-list {
    margin: 0;
    padding-left: 17px;
    font-size: 11px;
    line-height: 1.42;
    color: #475569;
}
.molgod-widget .mg-src-list li { margin-bottom: 5px; overflow-wrap: break-word; }
.molgod-widget .mg-src-tag {
    display: inline-block;
    background: rgba(217, 119, 6, 0.13);
    color: #b45309;
    border-radius: 4px;
    padding: 0 5px;
    font-weight: 650;
    font-size: 0.95em;
}
.molgod-widget .mg-src-doi { color: #2563eb; text-decoration: none; }
.molgod-widget .mg-src-doi:hover { text-decoration: underline; }

/* --- Wąski ekran ---------------------------------------------------------
 * Poniżej 720px karta z boku zasłaniałaby molekułę, którą tłumaczy. Zamienia
 * się w szufladę u dołu, a podpowiedź przenosi się nad molekułę. */
@media (max-width: 720px) {
    .molgod-widget .mg-panel-wrap {
        right: 8px;
        left: 8px;
        top: auto;
        bottom: 8px;
        width: auto;
        max-height: 52%;
        transform: none;
        animation: none;
    }
    .molgod-widget .mg-hint { bottom: auto; top: 10px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .molgod-widget .mg-panel-wrap,
    .molgod-widget .mg-hint { animation: none; }
}

@media (forced-colors: active) {
    .molgod-widget .mg-panel-wrap { background: Canvas; border-color: CanvasText; }
    .molgod-widget .mg-hint       { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
    .molgod-widget .mg-src-tag    { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
}


/* --- Panel WEWNATRZ plywajacej karty ---------------------------------------
 * Arkusz wyzej stylizuje .mg-panel jako samodzielna karte z wlasnym
 * przewijaniem (--mgp-max-h). Wewnatrz .mg-panel-wrap to daje DWA zagniezdzone
 * kontenery przewijania: zewnetrzny przewija sie do konca, a wewnetrzny chowa
 * naglowek nad krawedzia. Zmierzone na zrzucie: tytul "wiazanie Cl-C" byl
 * niewidoczny mimo scrollTop = 0 na kontenerze zewnetrznym.
 *
 * Rozwiazanie: wewnatrz karty panel oddaje chrom i przewijanie kontenerowi -
 * zostaje samą trescia. Poza karta (druk, osobna kolumna, modal) zachowuje
 * pelny wyglad samodzielny, bo te reguly sa zakresowane .mg-panel-wrap. */
.molgod-widget .mg-panel-wrap .mg-panel.mg-panel {
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    container-type: normal;
}


/* --- Streszczenie: co to za wiazanie / atom --------------------------------
 * Pierwsza rzecz w panelu. Odpowiada na pytanie zadane klinieciem, zanim
 * uzytkownik zacznie czytac tabele. Kontrast i rozmiar sa tu funkcja, nie
 * ozdoba: jesli streszczenie nie wybija sie ponad wiersze, nie pelni roli. */
.molgod-widget .mg-streszcz {
    margin: 0 26px 10px 0;
    padding: 9px 11px;
    background: linear-gradient(180deg, rgba(59,130,246,0.09), rgba(59,130,246,0.04));
    border: 1px solid rgba(59,130,246,0.22);
    border-radius: 10px;
}
.molgod-widget .mg-streszcz__glowne {
    font-size: 14.5px;
    font-weight: 650;
    color: #0f172a;
    line-height: 1.28;
    overflow-wrap: break-word;
}
.molgod-widget .mg-streszcz__sym {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 1.02em;
    color: #1d4ed8;
    background: rgba(255,255,255,0.72);
    border-radius: 5px;
    padding: 0 6px;
    margin-left: 2px;
    white-space: nowrap;
}
.molgod-widget .mg-streszcz__opis {
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.42;
    color: #475569;
    overflow-wrap: break-word;
}
@media (forced-colors: active) {
    .molgod-widget .mg-streszcz     { background: Canvas; border-color: CanvasText; }
    .molgod-widget .mg-streszcz__sym { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
}


/* =============================================================================
 * TRYB PELNOEKRANOWY
 *
 * viewer.js wola el.requestFullscreen() na elemencie widgetu, a w zadnym
 * arkuszu nie bylo ani jednej reguly :fullscreen. Widget zachowywal wiec uklad
 * okienkowy (min-height:700px na scenie), przegladarka rozciagala go na ekran
 * i wszystko ponizej sceny - rzad przelacznikow, zakladki, pasek pobierania -
 * wypadalo poza widoczny obszar. Zglosil to Operator: "Maksymalizacja okna
 * OBCINA MENU na dole ze struktura tego co ma byc laczone lub wylaczone".
 *
 * Rozwiazanie: widget staje sie kolumna flex o wysokosci ekranu, scena bierze
 * cala reszte (flex:1 min-height:0 - bez min-height:0 element flex nie zejdzie
 * ponizej wysokosci swojej tresci i pasek dalej bylby wypychany), a kontrolki
 * zostaja w kadrze. Zakladki i pasek pobierania dostaja wlasne przewijanie.
 * ========================================================================== */

.molgod-widget:fullscreen,
.molgod-widget:-webkit-full-screen {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #eef2fb;
}

.molgod-widget:fullscreen .molgod-stage,
.molgod-widget:-webkit-full-screen .molgod-stage {
    flex: 1 1 auto;
    min-height: 0;          /* warunek konieczny - patrz komentarz wyzej */
    height: auto;
    position: relative;
}

/* Kontrolki NIGDY nie wypadaja z kadru.
 *
 * Pierwsza wersja dawala im position:relative i BYLA BLEDNA. Kontrolki sa
 * dzieckiem sceny (viewer.js: stage.appendChild(vc)), a scena ma
 * .molgod-stage { position:relative; overflow:hidden }. Ustawienie ich
 * w normalnym przeplywie wepchnelo je za canvas, ktory zajmuje cala wysokosc
 * sceny - i scena przyciela je wlasnym overflow. Efekt byl dokladnie taki,
 * jak zglosil Operator: w pelnym ekranie pasek przelacznikow znikal.
 *
 * position:fixed WEWNATRZ elementu pelnoekranowego odnosi sie do EKRANU, nie
 * do rodzica, wiec zaden przodek nie moze paska przyciac. To jedyne ulozenie
 * odporne na overflow rodzicow, ktorych nie kontrolujemy. */
.molgod-widget:fullscreen .molgod-controls,
.molgod-widget:-webkit-full-screen .molgod-controls {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.08);
}

/* Miejsce na przypiety pasek, zeby nie zaslanial dolu tresci. */
.molgod-widget:fullscreen,
.molgod-widget:-webkit-full-screen {
    padding-bottom: 78px;
}

/* Scena nie moze przycinac niczego, co ma byc widoczne w pelnym ekranie. */
.molgod-widget:fullscreen .molgod-stage,
.molgod-widget:-webkit-full-screen .molgod-stage {
    overflow: visible;
}

/* W pelnym ekranie zostaje WIZUALIZACJA, nie lista akordeonow.
 *
 * Operator zglosil, ze akordeony (Wlasciwosci, GHS, LD50, GC-MS, HPLC, Zrodla)
 * i pasek pobierania zabieraly dolna polowe ekranu i sciskaly molekule -
 * a po to sie wchodzi w tryb powiekszony, zeby MOLEKULA byla wieksza.
 * Te sekcje sa dostepne w widoku zwyklym, wiec ich ukrycie niczego nie zabiera:
 * przenosi tylko cala powierzchnie tam, gdzie w tym trybie jest potrzebna.
 *
 * Naglowek z nazwa i CAS zostaje - bez niego nie wiadomo, co sie oglada.
 * Panel szczegolow zostaje, bo jest czescia wizualizacji, nie strona obok. */
.molgod-widget:fullscreen .molgod-tabs-wrap,
.molgod-widget:-webkit-full-screen .molgod-tabs-wrap,
.molgod-widget:fullscreen .molgod-download-bar,
.molgod-widget:-webkit-full-screen .molgod-download-bar {
    display: none !important;
}

/* Scena bierze cala wolna wysokosc, skoro nie dzieli sie juz z akordeonami. */
.molgod-widget:fullscreen .molgod-stage,
.molgod-widget:-webkit-full-screen .molgod-stage {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

/* Canvasa NIE dotykamy.
 *
 * Pierwsza wersja wymuszala mu height:100%, zeby wypelnil scene. Skutek byl
 * gorszy niz problem: rozmiar WYSWIETLANY szedl za CSS (1598x836), a BUFOR
 * rysowania zostawal ustawiony przez JavaScript (1598x988), wiec przegladarka
 * skalowala jedno na drugie i molekula byla splaszczona o okolo 15%.
 * Zmierzone: proporcja bufora 1.617, proporcja wyswietlania 1.912.
 *
 * Rozmiarem canvasa zarzadza renderer przez ResizeObserver i to on jako jedyny
 * moze zmienic OBA wymiary spojnie. Scena ma flex:1, wiec obserwator dostaje
 * nowa wysokosc i sam ustawia bufor. */