/* ===== Övningssidorna, ligger i samma terminalfönster som indexsidorna (terminal.css) ===== */

/* Plats ovanför fönstret så att knappraden inte hamnar över det */
body {
    padding: 50px 0 40px;
}

/* På smala skärmar ligger knappraden överst på sidan och tar sin egen plats (style.css) */
@media (max-width: 600px) {
    body {
        padding-top: 0;
    }
}

/* Rubriker i markdown-stil, h1 är utskriften från "php ovn_xx.php" */
h1 {
    font-size: 24px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--fg);
}

h1::before { content: "# "; color: var(--link); }

h2, h3, h4 {
    margin-top: 30px;
    margin-bottom: 10px;
}

h2::before { content: "## "; color: var(--link); }
h3::before { content: "### "; color: var(--link); }
h4::before { content: "#### "; color: var(--link); }

/* Tätare textrader, så långa utskrifter (t.ex. loopar) inte blir enorma */
p {
    margin: 4px 0;
}

b, strong {
    color: var(--hover);
}

.resultat {
    display: inline-block;
    min-width: 60px;
    padding: 6px 14px;
    border: 1px solid var(--fg);
    color: var(--hover);
}

.resultat::before {
    content: "=> ";
    color: var(--link);
}

/* Bakgrunden tar färgen från temat istället för hårdkodat grönt.
   Bara i <main>, källkoden har egen stil längre ner */
.array, main pre {
    padding: 12px 16px;
    border-left: 2px solid var(--link);
    background-color: color-mix(in srgb, var(--fg) 5%, transparent);
    line-height: 1.4;
    overflow-x: auto;
}

/* ===== Formulär, i samma stil som knapparna och terminalfönstret ===== */

/* Webbläsarens egna delar (kalenderikoner, sifferpilar, listor som fälls ut)
   blir mörka i de mörka temana och ljusa i paper */
main {
    color-scheme: dark;
}

[data-theme="paper"] main {
    color-scheme: light;
}

/* Två kolumner: kryssrutor och radioknappar i den första, deras etiketter i den andra.
   Allt annat (textfält, etiketter ovanför fält, knappar) tar hela bredden */
main form,
main fieldset {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1ch;
    align-items: center;
    justify-items: start;
}

main form {
    margin: 12px 0;
}

main :is(form, fieldset) > * {
    grid-column: 1 / -1;
}

/* Etiketten ovanför fältet, i samma färg som prompten */
main label {
    display: block;
    margin-top: 10px;
    color: var(--link);
}

/* Radioknapp eller kryssruta med etiketten direkt efter, på samma rad */
main :is(form, fieldset) > :is(input[type="checkbox"], input[type="radio"]) {
    grid-column: 1;
}

main :is(form, fieldset) > :is(input[type="checkbox"], input[type="radio"]) + label {
    grid-column: 2;
    margin: 0;
    padding: 2px 0;
    color: var(--fg);
    cursor: pointer;
}

/* Etiketter runt kryssrutor och radioknappar står på samma rad som rutan */
main label:has(> input[type="checkbox"], > input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 1ch;
    margin-top: 4px;
    color: var(--fg);
    cursor: pointer;
}

/* Gruppen tar hela bredden, inte bara så bred som innehållet */
main fieldset {
    justify-self: stretch;
    margin: 12px 0;
    padding: 4px 16px 12px;
    border: 1px dashed var(--fg);
}

main legend {
    padding: 0 1ch;
    color: var(--link);
}

/* Textfält, listor och textrutor: genomskinliga med ram, som terminalfönstret.
   Fälttyper som har en egen stil längre ner räknas inte hit */
main input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]),
main select,
main textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 40ch;
    margin: 4px 0 8px;
    padding: 4px 8px;
    border: 1px solid var(--fg);
    border-radius: 0;
    background-color: transparent;
    color: var(--fg);
    caret-color: var(--hover);
    font: inherit;
}

main textarea {
    max-width: 100%;
    min-height: 6em;
    resize: vertical;
}

/* Fältet man skriver i får ljusare ram och svagt tonad bakgrund,
   istället för webbläsarens blå kant */
main input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]):focus,
main select:focus,
main textarea:focus {
    outline: none;
    border-color: var(--hover);
    background-color: color-mix(in srgb, var(--fg) 5%, transparent);
}

main ::placeholder {
    color: color-mix(in srgb, var(--fg) 50%, var(--bg));
}

/* Webbläsarens autofyll ger annars fältet ljusblå bakgrund */
main input:-webkit-autofill {
    -webkit-text-fill-color: var(--fg);
    box-shadow: 0 0 0 100px var(--bg) inset;
}

/* Felifyllda fält får streckad ram. :user-invalid gäller först när man har
   ändrat i fältet eller försökt skicka, så tomma fält är inte röda från början */
main :is(input, select, textarea):user-invalid {
    border-style: dashed;
    border-color: var(--hover);
}

/* Avstängda fält och deras etiketter */
main :disabled,
main :is(input[type="checkbox"], input[type="radio"]):disabled + label,
main label:has(> :disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Listor (<select>) ===== */

/* Reserv för webbläsare som inte kan styla listan som fälls ut, då blir den
   åtminstone i temats färger */
main option {
    background-color: var(--bg);
    color: var(--fg);
}

main optgroup {
    color: var(--link);
}

/* Lista där alla val syns på en gång (multiple eller size), valda rader inverteras.
   Bakgrunden måste vara en gradient, en vanlig färg skrivs över av webbläsaren */
main select:is([multiple], [size]:not([size="1"])) option {
    padding: 2px 8px;
}

main select:is([multiple], [size]:not([size="1"])) option:checked {
    background: linear-gradient(var(--fg), var(--fg));
    color: var(--bg);
}

/* Nyare Chrome och Edge kan styla listan som fälls ut helt. Den ser då ut som
   temalistan under [tema]: "> " vid hover och "* " framför det valda */
@supports (appearance: base-select) {
    main select:not([multiple], [size]),
    main select:not([multiple], [size])::picker(select) {
        appearance: base-select;
    }

    main select:not([multiple], [size])::picker(select) {
        padding: 0;
        border: 1px solid var(--fg);
        background-color: var(--bg);
        color: var(--fg);
    }

    main select:not([multiple], [size]):open {
        border-color: var(--hover);
    }

    main select:not([multiple], [size])::picker-icon {
        color: var(--link);
    }

    main select:not([multiple], [size]) option {
        padding: 3px 12px;
        cursor: pointer;
    }

    /* Bocken som webbläsaren sätter framför det valda, "* " används istället */
    main select:not([multiple], [size]) option::checkmark {
        display: none;
    }

    main select:not([multiple], [size]) option::before {
        content: "> ";
        opacity: 0;
    }

    main select:not([multiple], [size]) option:is(:hover, :focus-visible) {
        outline: none;
        background-color: var(--bg);
        color: var(--hover);
    }

    main select:not([multiple], [size]) option:is(:hover, :focus-visible)::before {
        opacity: 1;
    }

    main select:not([multiple], [size]) option:checked::before {
        content: "* ";
        opacity: 1;
        color: var(--link);
    }
}

/* ===== Kryssrutor och radioknappar ===== */

/* Egna kryssrutor och radioknappar, webbläsarens egna är vita och följer inte temat.
   En ram i temats färg, och en fylld punkt i mitten när den är vald */
main input[type="checkbox"],
main input[type="radio"] {
    appearance: none;
    display: grid;
    place-content: center;
    width: 1.1em;
    height: 1.1em;
    margin: 0;
    border: 1px solid var(--fg);
    background-color: transparent;
    cursor: pointer;
}

main input[type="radio"],
main input[type="radio"]::before {
    border-radius: 50%;
}

main input[type="checkbox"]::before,
main input[type="radio"]::before {
    content: "";
    width: 0.55em;
    height: 0.55em;
    background-color: var(--hover);
    visibility: hidden;
}

main input[type="checkbox"]:checked,
main input[type="radio"]:checked {
    border-color: var(--hover);
}

main input[type="checkbox"]:checked::before,
main input[type="radio"]:checked::before {
    visibility: visible;
}

/* Etiketten till det valda alternativet lyser upp, likadant vid hover */
main :is(input[type="checkbox"], input[type="radio"]):checked + label,
main :is(input[type="checkbox"], input[type="radio"]) + label:hover,
main label:has(> input:checked),
main label:has(> input[type="checkbox"], > input[type="radio"]):hover {
    color: var(--hover);
}

/* Samma fokusram på allt som inte är ett textfält eller en knapp */
main :is(input[type="checkbox"], input[type="radio"], input[type="range"], input[type="color"], input[type="file"]):focus-visible {
    outline: 1px solid var(--hover);
    outline-offset: 2px;
}

/* ===== Skjutreglage, färgväljare och filväljare ===== */

/* Skjutreglaget är en tunn ram med ett block som markören i terminalen.
   Chrome och Firefox har olika namn på delarna, därför står varje regel två gånger
   (en webbläsare hoppar över hela regeln om den inte känner igen ett namn) */
main input[type="range"] {
    appearance: none;
    display: block;
    width: 100%;
    max-width: 40ch;
    margin: 12px 0;
    background: transparent;
    cursor: pointer;
}

main input[type="range"]::-webkit-slider-runnable-track {
    box-sizing: border-box;
    height: 6px;
    border: 1px solid var(--fg);
    background: transparent;
}

main input[type="range"]::-moz-range-track {
    box-sizing: border-box;
    height: 6px;
    border: 1px solid var(--fg);
    background: transparent;
}

/* margin-top centrerar blocket på spåret: (4px innanför ramen - 16px) / 2 */
main input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 8px;
    height: 16px;
    margin-top: -6px;
    border: none;
    border-radius: 0;
    background-color: var(--fg);
}

main input[type="range"]::-moz-range-thumb {
    width: 8px;
    height: 16px;
    border: none;
    border-radius: 0;
    background-color: var(--fg);
}

/* Firefox kan fylla spåret fram till blocket */
main input[type="range"]::-moz-range-progress {
    height: 6px;
    background-color: var(--link);
}

main input[type="range"]:is(:hover, :focus-visible)::-webkit-slider-thumb {
    background-color: var(--hover);
}

main input[type="range"]:is(:hover, :focus-visible)::-moz-range-thumb {
    background-color: var(--hover);
}

/* Färgväljaren: bara färgrutan inuti en ram, utan webbläsarens grå knapp */
main input[type="color"] {
    display: block;
    width: 4em;
    height: 2em;
    margin: 4px 0 8px;
    padding: 2px;
    border: 1px solid var(--fg);
    border-radius: 0;
    background-color: transparent;
    cursor: pointer;
}

main input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

main input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 0;
}

main input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 0;
}

/* Filväljaren: texten med filnamnet, knappen får samma stil som de andra knapparna */
main input[type="file"] {
    display: block;
    max-width: 100%;
    margin: 4px 0 8px;
    color: var(--fg);
    font: inherit;
    cursor: pointer;
}

/* ===== Förlopp och mätare (<progress>, <meter>) ===== */

main progress,
main meter {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 40ch;
    height: 1em;
    margin: 4px 0 8px;
}

main progress {
    appearance: none;
    border: 1px solid var(--fg);
    background: transparent;
}

main progress::-webkit-progress-bar {
    background: transparent;
}

main progress::-webkit-progress-value {
    background-color: var(--link);
}

main progress::-moz-progress-bar {
    background-color: var(--link);
}

main meter::-webkit-meter-bar {
    box-sizing: border-box;
    height: 1em;
    border: 1px solid var(--fg);
    border-radius: 0;
    background: transparent;
}

main meter::-webkit-meter-optimum-value {
    background: var(--link);
}

/* Sämre värden (utanför low/high) får hover-färgen */
main meter::-webkit-meter-suboptimum-value,
main meter::-webkit-meter-even-less-good-value {
    background: var(--hover);
}

main meter::-moz-meter-bar {
    background: var(--link);
}

/* <output> visar ett uträknat värde, i samma stil som .resultat */
main output {
    color: var(--hover);
}

main output::before {
    content: "=> ";
    color: var(--link);
}

/* ===== Knappar ===== */

/* Knappar ser ut som [cd ..] och [tema], med inverterade färger vid hover */
main button,
main input[type="submit"],
main input[type="button"],
main input[type="reset"],
main input[type="file"]::file-selector-button {
    margin-top: 8px;
    padding: 4px 10px;
    border: 1px solid var(--fg);
    border-radius: 0;
    background-color: var(--bg);
    color: var(--fg);
    font: inherit;
    cursor: pointer;
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Knappen i filväljaren står på samma rad som filnamnet */
main input[type="file"]::file-selector-button {
    margin: 0 1ch 0 0;
}

main button:hover,
main button:focus-visible,
main input[type="submit"]:hover,
main input[type="submit"]:focus-visible,
main input[type="button"]:hover,
main input[type="button"]:focus-visible,
main input[type="reset"]:hover,
main input[type="reset"]:focus-visible,
main input[type="file"]:hover::file-selector-button {
    outline: none;
    background-color: var(--fg);
    color: var(--bg);
}

/* ===== Källkoden som visas med [cat source] (kallkod.php) ===== */

/* Nedtonad färg för radnummer, kommentarer och HTML:en runt PHP-koden */
.kallkod {
    --dim: color-mix(in srgb, var(--fg) 60%, var(--bg));
    margin-bottom: 20px;
}

/* Radnummer till vänster om koden, som "cat -n" */
.kod {
    display: flex;
    overflow: auto;
}

.kod pre {
    margin: 0;
    line-height: 1.4;
}

/* Står kvar när koden rullas i sidled, och följer inte med när man kopierar koden */
.radnummer {
    position: sticky;
    left: 0;
    padding-right: 2ch;
    background-color: var(--bg);
    color: var(--dim);
    text-align: right;
    user-select: none;
}

/* Bredvid resultatet när det får plats, annars ovanför det */
@media (min-width: 1000px) {
    body:has(> .kallkod:not([hidden])) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 700px));
        justify-content: center;
        align-items: start;
        column-gap: 20px;
    }

    body:has(> .kallkod:not([hidden])) > .terminal {
        margin: 0;
    }

    /* Står kvar när man rullar, så koden syns bredvid även långa resultat.
       58px är avståndet till toppen innan man rullat (bodyns marginal + padding).
       Med border-box räknas ramen in, så hela fönstret får plats på skärmen
       och koden rullar inuti det */
    .kallkod:not([hidden]) {
        box-sizing: border-box;
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 58px;
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 78px);
    }

    .kallkod .kod {
        min-height: 0;
    }
}