/*
    Model — interaktywna rzecz do ogladania (na razie model atomu 3D).

    Typ "model" dziedziczy artykul.css (patrz BAZA_CSS w
    tools/materialy-zbuduj.py), wiec ramy strony — .page, .draft-bar,
    .footer, motyw — sa takie same jak w artykulach. Ten plik dodaje
    tylko to, co jest specyficzne dla modelu.

    Model wczytujemy w ramce (iframe), bo aplikacja 3D ma wlasne style
    (Tailwind z CDN) i wlasny, ciemny wyglad — wklejona bezposrednio
    przestylizowalaby cala strone.
*/

.model-tresc {
    /* Pelna szerokosc, bez siatki .layout i bez spisu tresci — model ma
       dostac cala przestrzen, jaka daje okno. */
    margin-top: 18px;
}

.model-rama {
    position: relative;
    margin: 18px 0 8px;
    padding: 0;
    border: 1px solid var(--line, #2b3a56);
    border-radius: 14px;
    /* Model zawsze ma uklad poziomy: ramka nie zweza sie ponizej 1024 px,
       tylko przewija sie w poziomie. Aplikacje przelaczaja uklad przy pewnej
       szerokosci (panel obok canvasa albo pod nim) — bez tej podlogi na
       waskim ekranie model przeskakiwal na uklad pionowy (2x wyzszy)
       i nie miescil sie w ramce. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    /* Ciemne tlo, zeby zaokraglone narozniki nie pokazywaly bieli,
       zanim wczyta sie aplikacja 3D. */
    background: #030712;
    box-shadow: var(--shadow, 0 10px 30px rgba(0, 0, 0, .25));
}

.model-rama iframe {
    display: block;
    width: 100%;

    /* Podloga szerokosci (opcjonalna, ustawia ja model u siebie):
           --model-min-szerokosc: 1024px
       Aplikacja zawsze widzi wtedy co najmniej tyle pikseli, wiec zawsze
       wlacza uklad poziomy, a ramka przewija sie w poziomie. Bez tego
       (domyslnie 0) ramka zweza sie razem z oknem — dobre dla aplikacji,
       ktora sama dopasowuje uklad, np. modelu atomu. */
    min-width: var(--model-min-szerokosc, 0);

    /* STALA PROPORCJA RAMKI — wysokosc wynika z szerokosci i nic jej nie
       zmienia. Wczesniej wysokosc byla mierzona skryptem, ale aplikacje
       przelaczaja uklad przy pewnej szerokosci, wiec ramka raz sie zwezala,
       raz rosla.

       Model nadpisuje proporcje u siebie we fragmencie:
           <div class="model-rama" style="--model-proporcja: 20 / 21">
       Wartosc zapisujemy jak w CSS aspect-ratio: szerokosc / wysokosc. */
    aspect-ratio: var(--model-proporcja, 16 / 10);
    height: auto;
    border: 0;
}

/* Lista rzeczy, ktore mozna zrobic w modelu — zwykla lista z artykul.css
   wyglada tu dobrze, tylko odstepy maja byc mniejsze niz w tekscie. */
.model-tresc ul { line-height: 1.75; }

/* Pasek informacyjny pod modelem (np. „obroc mysza, przybliz kolkiem"). */
.model-wskazowka {
    margin: 0 0 18px;
    padding: 10px 14px;
    border-left: 4px solid #38bdf8;
    border-radius: 8px;
    background: rgba(56, 189, 248, .08);
    font-size: 14px;
    line-height: 1.6;
}

/* Wzory pod modelem — siatka kart, zeby dalo sie je przejrzec jednym
   rzutem oka, bez przewijania dlugiej listy. */
.model-wzory {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 14px;
    margin: 14px 0 22px;
}

.model-wzor {
    padding: 12px 14px;
    border: 1px solid var(--line, #dde);
    border-radius: 12px;
    background: rgba(127, 127, 127, .05);
}

.model-wzor-nazwa {
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 14px;
}

.model-wzor-tresc .katex-display { margin: 8px 0; }

.model-wzor-jednostka {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted, #667);
}