/* Okrojona pracownia PHP — styl samodzielny (nie zalezy od motywu strony).
   Ciemny edytor jak w pelnej Pracowni, jasna ramka wyniku, bo tam trafia
   HTML wygenerowany przez kod ucznia. */

.mini {
    border: 1px solid #2b3350;
    border-radius: 14px;
    overflow: hidden;
    background: #0f1424;
    color: #e8ecf7;
    font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.mini-pliki { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px 0; background: #131a2e; }

.mini-plik {
    border: 0; padding: 7px 12px; border-radius: 8px 8px 0 0;
    background: #1b2338; color: #9fb2cc;
    font: inherit; font-size: 12.5px; cursor: pointer;
}

.mini-plik.is-aktywny { background: #0f1424; color: #e8ecf7; font-weight: 700; }
.mini-plik:focus-visible { outline: 2px solid #7a6ae0; outline-offset: 2px; }

.mini-edycja { display: flex; align-items: stretch; background: #0f1424; height: 320px; overflow: hidden; }

.mini-numeracja {
    padding: 10px 8px 10px 12px; text-align: right; color: #56617e;
    height: 100%; overflow: hidden; user-select: none;
    box-sizing: border-box;
    font: 12.5px/1.55 Consolas, "Courier New", monospace;
    white-space: pre;
}

/* Kolorowa warstwa lezy POD przezroczystym textarea. Obie musza miec
   identyczna czcionke, odstepy i zawijanie — inaczej kolory rozjada sie
   z tekstem przy zawijaniu dlugich linii. */
.mini-kodowo { position: relative; flex: 1; min-width: 0; height: 100%; }

.mini-podswietlenie {
    position: absolute; inset: 0; margin: 0;
    padding: 10px 12px 10px 4px; border: 0; overflow: hidden;
    pointer-events: none; background: transparent; color: #dce6f7;
    box-sizing: border-box;
    font: 12.5px/1.55 Consolas, "Courier New", monospace;
    white-space: pre-wrap; overflow-wrap: break-word; word-break: normal;
    tab-size: 4;
}

.mini-kod {
    position: relative; display: block; width: 100%; height: 100%; margin: 0;
    padding: 10px 12px 10px 4px; border: 0; resize: none;
    background: transparent; color: transparent; caret-color: #7ad7ee;
    overflow: auto;
    box-sizing: border-box;
    /* Bez paska przewijania obie warstwy mają tę samą szerokość — inaczej
       zawijanie linii rozjeżdżało kolor i zaznaczenie. */
    scrollbar-width: none;
    font: 12.5px/1.55 Consolas, "Courier New", monospace;
    white-space: pre-wrap; overflow-wrap: break-word; word-break: normal;
    tab-size: 4;
}
.mini-kod::-webkit-scrollbar { width: 0; height: 0; }

.mini-kod::selection { background: rgba(122, 226, 238, 0.28); color: transparent; }
.mini-kod:focus-visible { outline: 2px solid #7a6ae0; outline-offset: -2px; }

/* Paleta tokenow — ta sama co w pelnej Pracowni (php-web.css). */
.mini-podswietlenie .tok-tag { color: #6b7ba8; }
.mini-podswietlenie .tok-comment { color: #6d8093; background: rgba(93, 112, 128, .14); }
.mini-podswietlenie .tok-string { color: #9fe0a4; }
.mini-podswietlenie .tok-variable { color: #ffd479; }
.mini-podswietlenie .tok-number { color: #ffa9c8; }
.mini-podswietlenie .tok-keyword { color: #c4b0ff; background: rgba(183, 156, 255, .13); }
.mini-podswietlenie .tok-builtin { color: #7ad7ee; }
.mini-podswietlenie .tok-class { color: #9fe0f5; background: rgba(122, 215, 238, .13); }
.mini-podswietlenie .tok-function { color: #8fd0ff; }
.mini-podswietlenie .tok-operator { color: #93a3c4; }
.mini-podswietlenie .tok-punctuation { color: #7d8db0; }
.mini-podswietlenie .tok-html { color: #c9d4e8; }

.mini-akcje {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 10px; background: #131a2e; border-top: 1px solid #2b3350;
}

.mini-button {
    border: 0; border-radius: 9px; padding: 9px 14px;
    background: #26304a; color: #e8ecf7;
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}

.mini-button:hover { filter: brightness(1.12); }
.mini-button:focus-visible { outline: 2px solid #7a6ae0; outline-offset: 2px; }
.mini-button--glowny { background: #2f6df0; }
.mini-button--cichy { background: transparent; border: 1px solid #3b4a6e; color: #9fb2cc; }
.mini-status { margin-left: auto; color: #9fb2cc; font-size: 12.5px; }

.mini-wynik { background: #fff; }
.mini-wynik.is-pusty .mini-podglad { height: 0; min-height: 0; }
/* Pusta strona: ramka robi sie niska, zeby komunikat „nic nie wypisano"
   byl widoczny od razu, bez przewijania. */
.mini-wynik.is-pusto .mini-podglad { min-height: 90px; }
.mini-podglad { display: block; width: 100%; min-height: 220px; border: 0; background: #fff; }

.mini-komunikat {
    padding: 12px 14px; font-size: 13px;
    background: #131a2e; color: #cfd8ea; border-top: 1px solid #2b3350;
}

.mini-komunikat[hidden] { display: none; }
.mini-komunikat.is-ok { background: #123024; color: #a7e8c4; }
.mini-komunikat.is-info { background: #16233c; color: #b9cbe8; }
.mini-komunikat.is-czesciowo { background: #2f2712; color: #f0d9a8; }
.mini-komunikat.is-blad { background: #33161b; color: #f4c3ca; }

.mini-lista { list-style: none; margin: 8px 0 0; padding: 0; }
.mini-lista li { display: flex; gap: 8px; padding: 4px 0; align-items: baseline; }
.mini-znak { font-weight: 900; }
.mini-lista li.is-ok .mini-znak { color: #4ecf8f; }
.mini-lista li.is-fail .mini-znak { color: #ff8b98; }
.mini-lista small { display: block; opacity: .78; font-size: 12px; }
.mini-podsumowanie { margin: 0; }

/* --- panele kontekstu: dane wejsciowe i baza --- */
.mini-panel { border-top: 1px solid #2b3350; background: #131a2e; }
.mini-panel > summary {
    cursor: pointer; padding: 11px 14px; font-size: 13px; font-weight: 750; color: #cfd8ea;
}
.mini-panel > summary:focus-visible { outline: 2px solid #7a6ae0; outline-offset: -2px; }
.mini-panel-opis { margin: 0 14px 8px; color: #9fb2cc; font-size: 12.5px; }
.mini-panel-opis code { color: #cfd8ea; background: #1b2338; padding: 1px 5px; border-radius: 5px; }

.mini-pola { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 0 14px 14px; }
.mini-pole { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #9fb2cc; }
.mini-pole input {
    border: 1px solid #3b4a6e; border-radius: 8px; padding: 7px 9px;
    background: #0f1424; color: #e8ecf7; font: 13px Consolas, monospace;
}
.mini-pole input:focus-visible { outline: 2px solid #7a6ae0; outline-offset: 1px; }
/* Zalacznik: trzy kontrolki w jednym polu — nazwa, kod bledu i wybor pliku.
   Wybor pliku jest szerszy, bo pokazuje nazwe wybranego pliku. */
.mini-pole--plik select {
    border: 1px solid #3b4a6e; border-radius: 8px; padding: 7px 9px;
    background: #0f1424; color: #e8ecf7; font: 12.5px Consolas, monospace;
}
.mini-pole--plik select:focus-visible { outline: 2px solid #7a6ae0; outline-offset: 1px; }
.mini-pole--plik input[type="file"] {
    border: 1px dashed #3b4a6e; border-radius: 8px; padding: 6px 8px;
    background: #0b1120; color: #9fb2cc; font: 12px Consolas, monospace;
}
.mini-pole--plik input[type="file"]::file-selector-button {
    margin-right: 8px; border: 1px solid #3b4a6e; border-radius: 6px;
    padding: 3px 8px; background: #1b2338; color: #cfd8ea; cursor: pointer;
}

.mini-tabela { width: calc(100% - 28px); margin: 0 14px 14px; border-collapse: collapse; font-size: 12.5px; }
.mini-tabela th, .mini-tabela td { padding: 6px 9px; border: 1px solid #2b3350; text-align: left; }
.mini-tabela th { background: #1b2338; color: #cfd8ea; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.mini-tabela td { color: #dbe3f2; }
.mini-tabela tbody tr:nth-child(even) { background: #16203a; }
.mini-tabela .mini-null { color: #7d8aa6; font-style: italic; }
.mini-tabela-pusto { color: #7d8aa6; font-style: italic; }
.mini-klucz {
    display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 999px;
    background: #2f6df0; color: #fff; font-size: 9px; letter-spacing: .06em;
}

/* Strona zadania: tresc + podpowiedzi + pracownia */
.mini-strona { max-width: 900px; margin: 0 auto; padding: 24px 18px 60px; }
.mini-strona h1 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 6px; }
.mini-tresc { margin: 0 0 18px; }
.mini-tresc code { padding: 1px 5px; border-radius: 5px; background: #eef1f7; font: .92em Consolas, monospace; }

.mini-podpowiedzi { display: grid; gap: 8px; margin: 18px 0; }
.mini-podpowiedz { border: 1px solid var(--line, #dce4ef); border-radius: 12px; padding: 12px 15px; }
.mini-podpowiedz summary { cursor: pointer; font-weight: 750; }
.mini-podpowiedz > div { margin-top: 8px; }

/* Wymagania zadania: co ma sie pokazac na stronie i ktore zmienne ocenia
   system. Osobny, wyrazny blok przed podpowiedziami — uczen ma wiedziec,
   do czego zmierza, zanim zacznie zgadywac. */
.mini-wymagania {
    border: 1px solid var(--line, #dce4ef);
    border-left: 4px solid #7a6ae0;
    border-radius: 12px;
    padding: 12px 15px;
    margin: 0 0 18px;
    background: #fbfbfe;
}
.mini-wymagania-etykieta {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #596579;
}
.mini-wymagania-wynik {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #eef1f7;
    color: #172033;
    font: 13.5px/1.55 Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.mini-wymagania-zmienne { margin: 0; }
.mini-wymagania-pomoc {
    margin: -6px 0 14px;
    color: #596579;
    font-size: 12.5px;
    line-height: 1.45;
}
.mini-wymagania-zmienne code {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 2px 7px;
    border-radius: 6px;
    background: #eef1f7;
    color: #2a2f45;
    font: 13px Consolas, monospace;
}
.mini-wymagania-zmienne--brak { color: #596579; font-size: 14px; }
.mini-panel-dane {
    margin: 0 14px 10px;
    color: #cfd8ea;
    font-size: 12.5px;
}
.mini-panel-dane code { color: #fff; background: #1b2338; padding: 1px 5px; border-radius: 5px; }
.mini-panel-dane em { color: #9fb2cc; font-style: normal; }

@media (max-width: 640px) {
    .mini-numeracja { display: none; }
    .mini-kod { padding-left: 12px; height: 260px; }
}

/* --- Chrome strony zadania (przeniesione z mini-zadanie.html / mini.html,
   zeby motyw ciemny mial co nadpisac) --- */
:root { --line: #dce4ef; --muted: #596579; --ink: #172033; --tlo: #f6f7fb; }

body {
    margin: 0;
    background: var(--tlo);
    color: var(--ink);
    font: 16px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.mini-strona h2 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); margin: 0 0 10px; }
.mini-pusto { max-width: 900px; margin: 0 auto; padding: 24px 18px; color: var(--muted); }
.mini-naglowek { max-width: 900px; margin: 0 auto; padding: 14px 18px 0; color: var(--muted); font: 13px/1.5 system-ui, sans-serif; }
.mini-naglowek b { color: var(--ink); }
.mini-zadanie .mini-podpowiedz summary { color: #344158; }
.mini-zadanie .mini-podpowiedz > div { color: #344158; font-size: 14px; }

/* --- Pasek nawigacji zadania: powrot, poprzednie/nastepne, motyw --- */
.mini-nav { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin: 0 0 16px; }
.mini-nav-powrot { font-size: 14px; font-weight: 750; text-decoration: none; color: #5137b8; }
.mini-nav-powrot:hover { text-decoration: underline; }
.mini-nav-akcje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.mini-nav-pozycja { color: var(--muted); font-size: 13px; }
.mini-nav-krok {
    display: inline-block; padding: 6px 11px; border-radius: 9px;
    border: 1px solid var(--line); text-decoration: none; color: inherit;
    font-size: 13px; font-weight: 700;
}
.mini-nav-krok:hover { border-color: #7a6ae0; }
.mini-nav-krok.is-wylaczony { opacity: .45; }
.mini-nav-motyw {
    width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 9px;
    background: transparent; color: inherit; cursor: pointer; font-size: 16px; line-height: 1;
}
.mini-nav-motyw:hover { border-color: #7a6ae0; }
.mini-nav-motyw:focus-visible, .mini-nav-krok:focus-visible, .mini-nav-powrot:focus-visible {
    outline: 2px solid #7a6ae0; outline-offset: 2px;
}

/* --- Motyw ciemny: dziedziczony z serwisu przez data-motyw (motyw.js) --- */
:root[data-motyw="ciemny"] { --line: #38335a; --muted: #a9a3c2; --ink: #ece9f7; --tlo: #131222; }
:root[data-motyw="ciemny"] body { background: #131222; color: var(--ink); }
:root[data-motyw="ciemny"] .mini-tresc code,
:root[data-motyw="ciemny"] .mini-wymagania-zmienne code { background: #2a2640; color: #e6e2f5; }
:root[data-motyw="ciemny"] .mini-wymagania { background: #1e1c30; border-color: var(--line); }
:root[data-motyw="ciemny"] .mini-wymagania-wynik { background: #14131f; color: #e4e2f2; }
:root[data-motyw="ciemny"] .mini-wymagania-etykieta,
:root[data-motyw="ciemny"] .mini-wymagania-pomoc,
:root[data-motyw="ciemny"] .mini-wymagania-zmienne--brak { color: var(--muted); }
:root[data-motyw="ciemny"] .mini-zadanie .mini-podpowiedz summary,
:root[data-motyw="ciemny"] .mini-zadanie .mini-podpowiedz > div { color: #c9c4de; }
:root[data-motyw="ciemny"] .mini-nav-powrot { color: #b3a4ff; }