/* ─────────────────────────────────────────────────────────────────────
 * Skolbiblioteket — Eskilstuna
 * Design: "Anteckningsbok" — rutat papper, blyertsskisser, bokryggs-typsnitt,
 * Astrid Lindgren-palett (tegelröd, skogsgrön, soltapell-gul).
 *
 * Två målgrupper:
 *   .skol                  — elev-vy (F-9, gymnasium): lekfullt, tydligt
 *   .skol.teacher-mode     — lärar-/bibliotekarie-vy: tonad, professionell
 *
 * Allt i body.skol-namespace; rör inte app.css (delas med folkbib).
 * CSS-variabler för light/dark via [data-theme="dark"].
 * ───────────────────────────────────────────────────────────────────── */

body.skol {
    /* Astrid Lindgren-palett */
    --skol-bg:            #fbf6ea;          /* varmt papper */
    --skol-paper:         #fffdf6;          /* rent anteckningsblock */
    --skol-ink:           #1e2a1e;          /* bläck, >AAA kontrast */
    --skol-ink-soft:      #4a544a;          /* sekundär text */
    --skol-brick:         #b7371f;          /* Villa Villekulla-tegel */
    --skol-brick-dark:    #8f2916;
    --skol-forest:        #2b6340;          /* skogsgrön */
    --skol-forest-dark:   #1c4529;
    --skol-sun:           #f5c518;          /* soltapell-gul */
    --skol-sky:           #5b8fb9;          /* svensk sommar-blå */
    --skol-line:          #c9b891;          /* linjal-linje */
    --skol-grid:          #ead9b2;          /* rutat papper */
    --skol-shadow:        rgba(30, 42, 30, 0.12);

    --skol-radius:        10px;
    --skol-radius-lg:     16px;
    --skol-border:        2px solid var(--skol-ink);

    /* Typografi */
    --skol-font-body:     "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
    --skol-font-display:  "Georgia", "Iowan Old Style", "Palatino", serif;
    --skol-font-hand:     "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;

    font-family: var(--skol-font-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--skol-ink);
    /* Rutat papper-bakgrund via två gradients */
    background-color: var(--skol-bg);
    background-image:
        linear-gradient(var(--skol-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--skol-grid) 1px, transparent 1px);
    background-size: 28px 28px;
    background-attachment: fixed;
    margin: 0;
    min-height: 100vh;
}

/* Skip-link — synlig vid fokus (WCAG 2.1 AA) */
body.skol .skol-skip-link {
    position: absolute;
    left: -9999px;
    top: 0.5rem;
    background: var(--skol-sun);
    color: var(--skol-ink);
    padding: 0.6rem 1rem;
    border: var(--skol-border);
    border-radius: var(--skol-radius);
    font-weight: 700;
    z-index: 100;
    text-decoration: none;
}
body.skol .skol-skip-link:focus {
    left: 0.75rem;
    outline: 3px solid var(--skol-brick);
    outline-offset: 2px;
}

/* ── Header — bokrygg med "etikett" ─────────────────────────────── */
body.skol header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--skol-brick);
    color: #fff9e6;
    border-bottom: 4px solid var(--skol-ink);
    box-shadow: 0 3px 0 var(--skol-sun), 0 6px 0 var(--skol-ink);
    position: relative;
}
body.skol header::before {
    /* tejp-bit i övre vänstra hörnet */
    content: "";
    position: absolute;
    top: -8px;
    left: 3rem;
    width: 80px;
    height: 22px;
    background: rgba(245, 197, 24, 0.85);
    border: 1px dashed rgba(30, 42, 30, 0.35);
    transform: rotate(-4deg);
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
body.skol header .brand {
    font-family: var(--skol-font-display);
    font-weight: 900;
    font-size: 1.6rem;
    letter-spacing: 0.01em;
    color: #fff9e6;
    text-decoration: none;
    padding: 0.2rem 0.6rem;
    background: var(--skol-ink);
    border: 3px solid var(--skol-sun);
    border-radius: 6px;
    transform: rotate(-1.5deg);
    display: inline-block;
}
body.skol header .brand:focus-visible {
    outline: 3px solid var(--skol-sun);
    outline-offset: 3px;
}

/* Nav */
body.skol nav[aria-label="Huvudmeny"] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
body.skol nav a {
    color: #fff9e6;
    text-decoration: none;
    padding: 0.45rem 0.85rem;
    border-radius: var(--skol-radius);
    font-weight: 600;
    font-size: 1rem;
    border: 2px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
body.skol nav a:hover {
    background: rgba(255, 249, 230, 0.18);
    text-decoration: none;
}
body.skol nav a:focus-visible {
    outline: 3px solid var(--skol-sun);
    outline-offset: 2px;
}
body.skol nav a.login,
body.skol nav a.logout {
    background: var(--skol-sun);
    color: var(--skol-ink);
    border-color: var(--skol-ink);
    box-shadow: 2px 2px 0 var(--skol-ink);
}
body.skol nav a.login:hover,
body.skol nav a.logout:hover {
    background: #ffd84a;
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--skol-ink);
}

/* Theme-toggle — ingen emoji, egen SVG-knapp */
body.skol #theme-toggle {
    margin-left: 0.4rem;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 249, 230, 0.5);
    background: rgba(255, 249, 230, 0.12);
    color: #fff9e6;
    font: inherit;
    font-size: 0;            /* dölj ev. emoji från theme.js */
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.skol #theme-toggle::before {
    /* Måne + sol-ikon som SVG-pseudo, byts med data-theme */
    content: "";
    width: 1.15rem;
    height: 1.15rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 2a10 10 0 1 0 10 10A8 8 0 0 1 12 2z'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 2a10 10 0 1 0 10 10A8 8 0 0 1 12 2z'/></svg>") center/contain no-repeat;
}
body.skol #theme-toggle:hover {
    background: rgba(255, 249, 230, 0.22);
}
body.skol #theme-toggle:focus-visible {
    outline: 3px solid var(--skol-sun);
    outline-offset: 2px;
}

/* ── Main + layout ──────────────────────────────────────────────── */
body.skol main {
    max-width: 62rem;
    margin: 2rem auto;
    padding: 0 1.25rem 3rem;
}

/* Panel = anteckningsblock-sida */
body.skol .panel {
    position: relative;
    background: var(--skol-paper);
    border: 2px solid var(--skol-ink);
    border-radius: var(--skol-radius-lg);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    box-shadow: 4px 4px 0 var(--skol-ink);
    /* skrivlinjer */
    background-image:
        linear-gradient(to bottom, transparent 0, transparent 1.95rem, var(--skol-line) 1.95rem, var(--skol-line) 2rem, transparent 2rem);
    background-size: 100% 2rem;
    background-position: 0 2.25rem;
}
body.skol .panel > * { position: relative; z-index: 1; }

body.skol h1,
body.skol h2,
body.skol h3 {
    font-family: var(--skol-font-display);
    font-weight: 900;
    color: var(--skol-ink);
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin-top: 0;
}
body.skol h1 { font-size: 2.1rem; margin-bottom: 0.75rem; }
body.skol h2 {
    font-size: 1.45rem;
    margin: 1.25rem 0 0.75rem;
    padding-bottom: 0.3rem;
    border-bottom: 3px solid var(--skol-ink);
    display: inline-block;
    padding-right: 1rem;
}
body.skol h3 { font-size: 1.15rem; }

body.skol p { margin: 0.5rem 0 0.9rem; }
body.skol a {
    color: var(--skol-forest-dark);
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}
body.skol a:hover { color: var(--skol-brick); }
body.skol a:focus-visible {
    outline: 3px solid var(--skol-sun);
    outline-offset: 2px;
    border-radius: 2px;
}

body.skol .muted { color: var(--skol-ink-soft); font-style: italic; }
body.skol .error {
    background: #fff1ed;
    border: 2px solid var(--skol-brick);
    color: var(--skol-brick-dark);
    padding: 0.75rem 1rem;
    border-radius: var(--skol-radius);
    box-shadow: 3px 3px 0 var(--skol-brick-dark);
    font-weight: 600;
}

/* Flash-meddelanden */
@keyframes skolFlashFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
body.skol .flash {
    padding: 0.85rem 1.1rem;
    border-radius: var(--skol-radius);
    font-weight: 600;
    margin-bottom: 1.25rem;
    border: 2px solid var(--skol-ink);
    box-shadow: 3px 3px 0 var(--skol-ink);
    animation: skolFlashFadeIn 260ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
    body.skol .flash { animation: none; }
}
body.skol .flash.ok {
    background: #e8f5e0;
    color: var(--skol-forest-dark);
}
body.skol .flash.error {
    background: #fff1ed;
    color: var(--skol-brick-dark);
}

/* ── Hero — stor välkomst ───────────────────────────────────────── */
body.skol .hero,
body.skol .hero-skol {
    position: relative;
    background: var(--skol-sun);
    border: 3px solid var(--skol-ink);
    border-radius: var(--skol-radius-lg);
    padding: 2.25rem 2rem 2rem;
    margin-bottom: 2rem;
    box-shadow: 6px 6px 0 var(--skol-ink);
    overflow: hidden;
}
body.skol .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 85% 20%, var(--skol-brick) 0 14px, transparent 15px),
        radial-gradient(circle at 92% 75%, var(--skol-forest) 0 10px, transparent 11px),
        radial-gradient(circle at 78% 55%, var(--skol-sky) 0 7px, transparent 8px);
    opacity: 0.35;
    pointer-events: none;
}
body.skol .hero > * { position: relative; }
body.skol .hero h1,
body.skol .hero-skol h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--skol-ink);
    margin-bottom: 0.5rem;
}
body.skol .hero p { font-size: 1.1rem; max-width: 38rem; }

/* ── Formulär ───────────────────────────────────────────────────── */
body.skol form label {
    display: block;
    margin: 0.75rem 0 0.35rem;
    font-weight: 700;
    color: var(--skol-ink);
}
body.skol form input,
body.skol form select,
body.skol form textarea {
    font: inherit;
    font-size: 1.05rem;
    padding: 0.65rem 0.85rem;
    border: 2px solid var(--skol-ink);
    border-radius: var(--skol-radius);
    background: #fff;
    color: var(--skol-ink);
    width: 100%;
    max-width: 32rem;
    box-shadow: 2px 2px 0 var(--skol-ink);
}
body.skol form input:focus,
body.skol form select:focus,
body.skol form textarea:focus {
    outline: none;
    border-color: var(--skol-brick);
    box-shadow: 2px 2px 0 var(--skol-brick), 0 0 0 3px rgba(183, 55, 31, 0.25);
}
body.skol form input::placeholder { color: #9a8f7d; font-style: italic; }

body.skol form button,
body.skol button[type="submit"],
body.skol .bankid-btn {
    display: inline-block;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.7rem 1.4rem;
    margin-top: 0.75rem;
    background: var(--skol-forest);
    color: #fff9e6;
    border: 2px solid var(--skol-ink);
    border-radius: var(--skol-radius);
    cursor: pointer;
    text-decoration: none;
    box-shadow: 4px 4px 0 var(--skol-ink);
    transition: transform 0.08s, box-shadow 0.08s;
}
body.skol form button:hover,
body.skol button[type="submit"]:hover,
body.skol .bankid-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--skol-ink);
}
body.skol form button:active,
body.skol button[type="submit"]:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--skol-ink);
}
body.skol form button:focus-visible,
body.skol button[type="submit"]:focus-visible {
    outline: 3px solid var(--skol-sun);
    outline-offset: 3px;
}
body.skol form button.secondary {
    background: var(--skol-paper);
    color: var(--skol-ink);
    box-shadow: 3px 3px 0 var(--skol-ink);
}
body.skol form button.secondary:hover {
    background: var(--skol-sun);
}

/* "Logga in med skolkontot" — primär CTA */
body.skol .bankid-btn {
    background: var(--skol-brick);
    color: #fff9e6;
    font-size: 1.15rem;
    padding: 0.85rem 1.6rem;
}

/* ── Resultat-listor ────────────────────────────────────────────── */
body.skol .results {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}
body.skol .results li {
    padding: 0.9rem 0.75rem 0.9rem 2.25rem;
    border-bottom: 1.5px dashed var(--skol-line);
    position: relative;
}
body.skol .results li::before {
    /* blyerts-streck-punktmarkör */
    content: "";
    position: absolute;
    left: 0.4rem;
    top: 1.4rem;
    width: 1.25rem;
    height: 2px;
    background: var(--skol-ink);
    transform: rotate(-4deg);
}
body.skol .results-big li {
    padding: 1.1rem 0.75rem 1.1rem 2.5rem;
    font-size: 1.05rem;
}
body.skol .results li a { font-weight: 700; text-decoration: none; }
body.skol .results li a:hover { text-decoration: underline wavy; }
body.skol .results li strong { font-size: 1.1rem; }

/* Bib-meta definition-list */
body.skol .bib-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1.25rem;
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    background: var(--skol-bg);
    border-radius: var(--skol-radius);
    border-left: 4px solid var(--skol-forest);
}
body.skol .bib-meta dt { font-weight: 700; color: var(--skol-ink-soft); }
body.skol .bib-meta dd { margin: 0; color: var(--skol-ink); }

body.skol code {
    background: var(--skol-bg);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-family: "Consolas", "SF Mono", monospace;
    font-size: 0.95em;
    border: 1px solid var(--skol-line);
}

/* ── Footer ─────────────────────────────────────────────────────── */
body.skol footer {
    margin-top: 2rem;
    padding: 1.5rem 1.5rem 2rem;
    background: var(--skol-forest-dark);
    color: #fff9e6;
    border-top: 4px solid var(--skol-ink);
    text-align: center;
    font-size: 0.95rem;
}
body.skol footer p { margin: 0.3rem 0; }

/* ─────────────────────────────────────────────────────────────────
 *  LÄRAR-LÄGE — teacher-mode: sober, proffsig, dator-nära
 *  Aktiveras via body.skol.teacher-mode (satt av teacher.html).
 *  Behåller estetiken men tonar ner den playful delen.
 * ───────────────────────────────────────────────────────────────── */

body.skol.teacher-mode {
    --skol-bg:     #f2efe6;
    --skol-grid:   #e2ddd0;
    --skol-paper:  #fdfcf7;
}
body.skol.teacher-mode header {
    background: var(--skol-forest-dark);
    box-shadow: 0 3px 0 var(--skol-forest), 0 5px 0 var(--skol-ink);
}
body.skol.teacher-mode header::before {
    background: rgba(245, 197, 24, 0.9);
}
body.skol .teacher-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--skol-forest-dark);
    color: #fff9e6;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 2px solid var(--skol-ink);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 2px 2px 0 var(--skol-ink);
}
body.skol .teacher-badge::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--skol-sun);
    box-shadow: 0 0 0 2px var(--skol-forest-dark);
}

/* Proffs-tabell för lärar-vy */
body.skol table.items {
    width: 100%;
    border-collapse: collapse;
    background: var(--skol-paper);
    border: 2px solid var(--skol-ink);
    border-radius: var(--skol-radius);
    overflow: hidden;
    margin: 1rem 0;
    box-shadow: 3px 3px 0 var(--skol-ink);
    font-size: 0.98rem;
}
body.skol table.items thead {
    background: var(--skol-forest-dark);
    color: #fff9e6;
}
body.skol table.items th,
body.skol table.items td {
    text-align: left;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--skol-line);
}
body.skol table.items th {
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
body.skol table.items tbody tr:nth-child(even) { background: var(--skol-bg); }
body.skol table.items tbody tr:hover { background: #fff6d8; }
body.skol table.items tbody tr:last-child td { border-bottom: none; }
body.skol .overdue {
    display: inline-block;
    background: var(--skol-brick);
    color: #fff9e6;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Student-dashboard kort-grid */
body.skol .student-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 0.25rem;
    font-size: 1rem;
    color: var(--skol-ink-soft);
}
body.skol .student-meta .pill {
    background: var(--skol-sun);
    color: var(--skol-ink);
    padding: 0.15rem 0.7rem;
    border: 2px solid var(--skol-ink);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
}
body.skol .student-meta .pill.forest {
    background: var(--skol-forest);
    color: #fff9e6;
}
body.skol .student-meta .pill.sky {
    background: var(--skol-sky);
    color: #fff9e6;
}

/* Sök-input i hero/search */
body.skol .hero form input,
body.skol .hero-skol form input {
    max-width: 100%;
    background: #fff;
}

/* ── Responsivt ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    body.skol header { padding: 0.85rem 1rem; gap: 0.6rem; }
    body.skol header::before { left: 1.25rem; width: 55px; }
    body.skol header .brand { font-size: 1.25rem; }
    body.skol nav[aria-label="Huvudmeny"] {
        margin-left: 0;
        width: 100%;
        gap: 0.25rem;
    }
    body.skol nav a { font-size: 0.95rem; padding: 0.4rem 0.6rem; }
    body.skol main { margin: 1rem auto; padding: 0 0.85rem 2rem; }
    body.skol .panel { padding: 1.15rem 1.1rem 1.15rem 1.4rem; }
    body.skol .panel::before { left: 2rem; }
    body.skol .results li,
    body.skol .results-big li { padding-left: 2rem; }
    body.skol .hero { padding: 1.5rem 1.25rem; }
    body.skol h1 { font-size: 1.65rem; }
    body.skol h2 { font-size: 1.2rem; }
    body.skol table.items { font-size: 0.9rem; }
    body.skol table.items th, body.skol table.items td { padding: 0.5rem 0.55rem; }
}

@media (max-width: 480px) {
    body.skol { font-size: 16px; background-size: 22px 22px; }
    body.skol .panel { border-width: 2px; box-shadow: 3px 3px 0 var(--skol-ink); }
    body.skol .hero { border-width: 2px; box-shadow: 4px 4px 0 var(--skol-ink); }
    /* Tabell → stackad på small screens */
    body.skol table.items thead { display: none; }
    body.skol table.items,
    body.skol table.items tbody,
    body.skol table.items tr,
    body.skol table.items td { display: block; width: 100%; }
    body.skol table.items tr {
        border-bottom: 2px solid var(--skol-ink);
        padding: 0.5rem 0.25rem;
    }
    body.skol table.items td {
        padding: 0.3rem 0.5rem;
        border-bottom: none;
    }
    body.skol table.items td::before {
        content: attr(data-label) ": ";
        font-weight: 700;
        color: var(--skol-ink-soft);
        margin-right: 0.4rem;
    }
}

/* Reduced motion — respekt för WCAG */
@media (prefers-reduced-motion: reduce) {
    body.skol * {
        transition: none !important;
        animation: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
 *  Barn-startsida — stort sök, kategori-chips, bokgrid
 * ───────────────────────────────────────────────────────────────── */

/* Stort sökfält i hero */
body.skol .skol-search-big {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.25rem;
    max-width: 34rem;
}
body.skol .skol-search-big input[type="search"] {
    flex: 1;
    font-size: 1.2rem;
    padding: 0.9rem 1.1rem;
    min-height: 3rem;
    max-width: none;
}
body.skol .skol-search-big button {
    font-size: 1.15rem;
    padding: 0.9rem 1.6rem;
    margin-top: 0;
    white-space: nowrap;
}
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Kategori-chips */
body.skol .skol-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 2rem;
}
body.skol .skol-chips .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.15rem;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: var(--skol-font-body);
    color: var(--skol-ink);
    background: var(--skol-paper);
    border: 2px solid var(--skol-ink);
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 3px 3px 0 var(--skol-ink);
    transition: transform 0.1s, box-shadow 0.1s;
}
body.skol .skol-chips .chip:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--skol-ink);
    text-decoration: none;
}
body.skol .skol-chips .chip:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--skol-ink);
}
body.skol .skol-chips .chip-sun    { background: var(--skol-sun); }
body.skol .skol-chips .chip-brick  { background: var(--skol-brick); color: #fff9e6; }
body.skol .skol-chips .chip-forest { background: var(--skol-forest); color: #fff9e6; }
body.skol .skol-chips .chip-sky    { background: #3a6b8a; color: #fff9e6; }  /* WCAG AA */
body.skol .skol-chips .chip-paper  { background: var(--skol-paper); }
body.skol .skol-chips .chip span[aria-hidden] { font-size: 1.3rem; line-height: 1; }

/* Bokomslags-grid */
body.skol .skol-grid {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 1.25rem;
}
@media (max-width: 768px) {
    body.skol .skol-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1rem; }
}
body.skol .skol-grid__item { margin: 0; }
body.skol .skol-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--skol-ink);
    transition: transform 0.1s;
}
body.skol .skol-card:hover { transform: translateY(-2px); text-decoration: none; }
body.skol .skol-card__cover {
    aspect-ratio: 2 / 3;
    background: var(--skol-bg);
    border: 2px solid var(--skol-ink);
    border-radius: var(--skol-radius);
    box-shadow: 3px 3px 0 var(--skol-ink);
    overflow: hidden;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.skol .skol-card__cover img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
body.skol .skol-card__cover .cover-placeholder {
    width: 100% !important; height: 100% !important; border-radius: 0 !important;
    box-shadow: none !important;
}
body.skol .skol-card__title {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
    margin-bottom: 0.15rem;
}
body.skol .skol-card__author {
    font-size: 0.9rem;
    color: var(--skol-ink-soft);
    font-style: italic;
}

/* Senaste nytt */
body.skol .skol-news {
    margin-top: 2rem;
    padding: 0.5rem 0 0;
    border-top: 2px dashed var(--skol-line);
}
body.skol .skol-news h2 {
    font-size: 1.15rem;
    border-bottom: none;
    margin-bottom: 0.5rem;
    color: var(--skol-ink-soft);
}
body.skol .skol-news ul { list-style: none; padding: 0; margin: 0; }
body.skol .skol-news li {
    padding: 0.5rem 0;
    border-bottom: 1px dotted var(--skol-line);
    display: flex;
    gap: 1rem;
    align-items: baseline;
    font-size: 0.98rem;
}
body.skol .skol-news li:last-child { border-bottom: none; }
body.skol .skol-news time {
    color: var(--skol-ink-soft);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
    min-width: 5rem;
}


/* ─────────────────────────────────────────────────────────────────
 *  Dark mode — skolbiblioteket på kvällskvarten
 * ───────────────────────────────────────────────────────────────── */
[data-theme="dark"] body.skol {
    --skol-bg:          #1a1d18;
    --skol-paper:       #242821;
    --skol-ink:         #f0e9d2;
    --skol-ink-soft:    #c5b99a;
    --skol-brick:       #e85a3e;
    --skol-brick-dark:  #b04226;
    --skol-forest:      #5fa878;
    --skol-forest-dark: #2b6340;
    --skol-sun:         #f5c518;
    --skol-sky:         #7fb0d6;
    --skol-line:        #4a4838;
    --skol-grid:        #2a2c24;
    --skol-shadow:      rgba(0, 0, 0, 0.5);
    color: var(--skol-ink);
}
[data-theme="dark"] body.skol header {
    background: #4a1408;
    color: var(--skol-ink);
    box-shadow: 0 3px 0 var(--skol-sun), 0 6px 0 #000;
}
[data-theme="dark"] body.skol header .brand {
    background: #0d0f0c;
    color: var(--skol-sun);
    border-color: var(--skol-sun);
}
[data-theme="dark"] body.skol .panel {
    background: var(--skol-paper);
    box-shadow: 4px 4px 0 #000;
}
[data-theme="dark"] body.skol .panel::before {
    background: var(--skol-brick);
    opacity: 0.45;
}
[data-theme="dark"] body.skol form input,
[data-theme="dark"] body.skol form select,
[data-theme="dark"] body.skol form textarea {
    background: #1a1d18;
    color: var(--skol-ink);
    box-shadow: 2px 2px 0 #000;
}
[data-theme="dark"] body.skol form button,
[data-theme="dark"] body.skol button[type="submit"] {
    box-shadow: 4px 4px 0 #000;
}
[data-theme="dark"] body.skol .hero {
    background: #5a4200;
    box-shadow: 6px 6px 0 #000;
}
[data-theme="dark"] body.skol .hero h1 { color: var(--skol-ink); }
[data-theme="dark"] body.skol code,
[data-theme="dark"] body.skol .bib-meta {
    background: #1a1d18;
    border-color: var(--skol-line);
}
[data-theme="dark"] body.skol table.items { box-shadow: 3px 3px 0 #000; }
[data-theme="dark"] body.skol table.items tbody tr:nth-child(even) {
    background: #1e211a;
}
[data-theme="dark"] body.skol table.items tbody tr:hover { background: #3a3520; }
[data-theme="dark"] body.skol .error {
    background: #3a1410;
    color: #ffb8a5;
}
[data-theme="dark"] body.skol .flash.ok {
    background: #1b3a22;
    color: #b8e0bf;
}
[data-theme="dark"] body.skol footer {
    background: #0d0f0c;
    color: var(--skol-ink-soft);
}
[data-theme="dark"] body.skol.teacher-mode header {
    background: #1a3226;
}