/**
 * Wortsuchrätsel-Generator
 *
 * Identisch gepflegt in Blocksy-Child (css/word-search.css) und im MVC
 * (tempteria-mvc/public/assets/css/tools/word-search.css).
 * Aenderungen bitte immer in beide Dateien uebertragen.
 *
 * Farbquelle: erst Blocksy-Palette, dann MVC-Variablen, dann Hex-Fallback.
 * Das Blatt selbst ist Papier: immer weiss mit dunkler Schrift, auch im
 * dunklen Modus – es soll am Bildschirm aussehen wie der Ausdruck.
 *
 * Elemente, die das Skript erzeugt, tragen keine Klassen und werden ueber
 * ihre data-wsr-Attribute gestaltet.
 */

.wsr,
[data-wsr-print-root] {
    --wsr-accent: var(--theme-palette-color-1, var(--brand-blue, #007f5f));
    --wsr-ink: var(--theme-palette-color-4, var(--ink, #192c27));
    --wsr-text: var(--theme-palette-color-3, var(--muted, #365951));
    --wsr-desk: var(--theme-palette-color-6, var(--bg-soft, #f2f7f6));
    --wsr-surface: var(--theme-palette-color-8, var(--bg, #ffffff));
    --wsr-rule: color-mix(in srgb, var(--wsr-ink) 24%, transparent);
    --wsr-paper: #ffffff;
    --wsr-paper-ink: #16211e;
    --wsr-paper-rule: #c5cfcc;
}

.wsr {
    margin: 2.5rem 0;
    color: var(--wsr-text);
    container-type: inline-size;
}

.wsr .wsr__layout {
    display: grid;
    gap: 24px;
    align-items: start;
}

/* Ab 720 px nebeneinander – so breit ist die Inhaltsspalte eines Beitrags
   mit Seitenleiste. Das Blatt bleibt damit ohne Scrollen sichtbar. */
@container (min-width: 720px) {
    .wsr .wsr__layout { grid-template-columns: 250px minmax(0, 1fr); gap: 24px; }
}
@container (min-width: 1000px) {
    .wsr .wsr__layout { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; }
}

/* ---------- Einstellungen ---------- */

.wsr .wsr__panel { display: grid; gap: 18px; }
.wsr .wsr__field { display: grid; gap: 6px; margin: 0; }

.wsr .wsr__label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--wsr-ink);
}
.wsr .wsr__label span { font-size: 13px; font-weight: 500; color: var(--wsr-text); }

.wsr .wsr__textarea,
.wsr .wsr__input,
.wsr .wsr__select {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 12px;
    font: inherit;
    font-size: 16px;
    line-height: 1.45;
    color: var(--wsr-ink);
    background: var(--wsr-surface);
    border: 1px solid var(--wsr-rule);
    border-radius: 6px;
    box-shadow: none;
}
.wsr .wsr__textarea { min-height: 13.5em; resize: vertical; }
/* Eigener Pfeil: Manche Themes nehmen Auswahlfeldern den des Browsers. */
.wsr .wsr__select {
    min-height: 44px;
    padding-right: 34px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7774' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
}

.wsr .wsr__textarea:focus-visible,
.wsr .wsr__input:focus-visible,
.wsr .wsr__select:focus-visible {
    outline: 2px solid var(--wsr-accent);
    outline-offset: 1px;
    border-color: var(--wsr-accent);
}

.wsr .wsr__themes { display: flex; flex-wrap: wrap; gap: 6px; }
.wsr [data-wsr-theme] {
    min-height: 36px;
    margin: 0;
    padding: 6px 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--wsr-ink);
    background: transparent;
    border: 1px solid var(--wsr-rule);
    border-radius: 6px;
    box-shadow: none;
    cursor: pointer;
}
.wsr [data-wsr-theme]:hover { border-color: var(--wsr-accent); color: var(--wsr-accent); }

.wsr .wsr__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.wsr .wsr__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--wsr-ink);
    cursor: pointer;
}
.wsr .wsr__check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--wsr-accent); }

.wsr .wsr__message { min-height: 1.4em; margin: 0; font-size: 14px; line-height: 1.4; color: #a12c1f; }
.wsr .wsr__message:empty { display: none; }

.wsr .wsr__privacy { margin: 0; font-size: 13px; line-height: 1.45; }

/* ---------- Knoepfe ---------- */

.wsr .wsr__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 10px 18px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--wsr-ink);
    background: var(--wsr-surface);
    border: 1px solid var(--wsr-rule);
    border-radius: 6px;
    box-shadow: none;
    cursor: pointer;
}
.wsr .wsr__button:hover { border-color: var(--wsr-accent); color: var(--wsr-accent); }
.wsr .wsr__button[aria-pressed="true"] { border-color: var(--wsr-ink); background: var(--wsr-ink); color: var(--wsr-surface); }

.wsr .wsr__button--primary { color: #fff; background: var(--wsr-accent); border-color: var(--wsr-accent); }
.wsr .wsr__button--primary:hover { color: #fff; filter: brightness(.92); }

.wsr .wsr__button:focus-visible,
.wsr [data-wsr-theme]:focus-visible { outline: 2px solid var(--wsr-accent); outline-offset: 2px; }

/* ---------- Schreibtisch und Blatt ---------- */

.wsr .wsr__desk {
    padding: clamp(12px, 3cqi, 28px);
    background: var(--wsr-desk);
    border-radius: 8px;
}

.wsr__sheet {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2.4cqi, 22px);
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(16px, 5cqi, 48px);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--wsr-paper-ink);
    background: var(--wsr-paper);
    box-shadow: 0 1px 2px rgba(22, 33, 30, .12), 0 12px 32px rgba(22, 33, 30, .1);
}

/* Auf breiter Flaeche das Seitenverhaeltnis von DIN A4, wie der Ausdruck. */
@container (min-width: 720px) {
    .wsr .wsr__sheet { aspect-ratio: 210 / 297; }
}

.wsr__sheet .wsr__sheet-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px 24px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--wsr-paper-ink);
}
.wsr__sheet .wsr__sheet-title {
    margin: 0;
    font-size: clamp(20px, 4.2cqi, 30px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--wsr-paper-ink);
    overflow-wrap: anywhere;
}
.wsr__sheet .wsr__sheet-name { display: flex; gap: 18px; margin: 0; font-size: 14px; line-height: 1.2; color: var(--wsr-paper-ink); }
.wsr__sheet .wsr__sheet-name[hidden] { display: none; }
.wsr__sheet .wsr__sheet-name span { display: inline-flex; align-items: flex-end; gap: 6px; }
.wsr__sheet .wsr__sheet-name span::after {
    content: "";
    width: 7.5em;
    border-bottom: 1px solid var(--wsr-paper-ink);
}
.wsr__sheet .wsr__sheet-name span + span::after { width: 4.5em; }

.wsr__sheet .wsr__task { margin: 0; font-size: 15px; line-height: 1.45; color: var(--wsr-paper-ink); }

.wsr__sheet [data-wsr-grid] {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    container-type: inline-size;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
.wsr__sheet[data-wsr-empty] [data-wsr-grid],
.wsr__sheet[data-wsr-empty] .wsr__list { display: none; }

.wsr__sheet [data-wsr-cells] {
    display: grid;
    grid-template-columns: repeat(var(--wsr-n, 12), minmax(0, 1fr));
    border-top: 1px solid var(--wsr-paper-rule);
    border-left: 1px solid var(--wsr-paper-rule);
}
.wsr__sheet [data-wsr-cell] {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    font-size: calc(100cqi / var(--wsr-n, 12) * .56);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--wsr-paper-ink);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--wsr-paper-rule);
    border-bottom: 1px solid var(--wsr-paper-rule);
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
}
.wsr__sheet [data-wsr-cell]:hover { background: transparent; color: var(--wsr-paper-ink); }
.wsr__sheet [data-wsr-cell]:focus-visible { outline: 2px solid var(--wsr-accent); outline-offset: -2px; }
.wsr__sheet [data-wsr-cell][data-wsr-anchor] { background: color-mix(in srgb, var(--wsr-accent) 22%, transparent); }

.wsr__sheet [data-wsr-marks] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.wsr__sheet [data-wsr-mark] { stroke-width: .72; stroke-linecap: round; fill: none; }
.wsr__sheet [data-wsr-mark="found"] { stroke: var(--wsr-accent); stroke-opacity: .3; }
.wsr__sheet [data-wsr-mark="select"] { stroke: var(--wsr-paper-ink); stroke-opacity: .16; }
.wsr__sheet [data-wsr-mark="solution"] { display: none; stroke: var(--wsr-paper-ink); stroke-opacity: .17; }
.wsr__sheet[data-wsr-solved] [data-wsr-mark="solution"] { display: inline; }

.wsr__sheet .wsr__list {
    margin: 0;
    padding: 0;
    list-style: none;
    column-width: 8.5em;
    column-gap: 20px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.75;
    letter-spacing: .04em;
    color: var(--wsr-paper-ink);
}
.wsr__sheet .wsr__list li { margin: 0; padding: 0; break-inside: avoid; list-style: none; }
.wsr__sheet .wsr__list li::before { content: none; }
.wsr__sheet .wsr__list li[data-wsr-found] { text-decoration: line-through; opacity: .45; }

.wsr__sheet .wsr__credit { margin: auto 0 0; padding-top: 8px; font-size: 11px; line-height: 1.3; color: #6b7774; }

/* ---------- Leiste unter dem Blatt ---------- */

.wsr .wsr__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 760px;
    margin: 16px auto 0;
}
.wsr .wsr__progress { margin: 0 0 0 auto; font-size: 15px; font-weight: 700; color: var(--wsr-ink); }
.wsr .wsr__howto { max-width: 760px; margin: 10px auto 0; font-size: 13px; line-height: 1.45; }

@media (prefers-reduced-motion: no-preference) {
    .wsr .wsr__button, .wsr [data-wsr-theme] { transition: border-color .15s, color .15s, background-color .15s; }
}

/* ---------- Druck ---------- */

[data-wsr-print-root] { display: none; }

@media print {
    @page { size: A4; margin: 16mm; }

    html[data-wsr-printing] body > *:not([data-wsr-print-root]) { display: none !important; }
    html[data-wsr-printing],
    html[data-wsr-printing] body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
    html[data-wsr-printing] [data-wsr-print-root] { display: block; }

    [data-wsr-print-root] .wsr__sheet {
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 0;
        gap: 7mm;
        aspect-ratio: auto;
        box-shadow: none;
        --wsr-paper-ink: #000;
        --wsr-paper-rule: #8c8c8c;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    [data-wsr-print-root] .wsr__sheet-title { font-size: 20pt; }
    [data-wsr-print-root] .wsr__sheet-name,
    [data-wsr-print-root] .wsr__task { font-size: 11pt; }
    [data-wsr-print-root] [data-wsr-grid] { max-width: 150mm; }
    [data-wsr-print-root] .wsr__list { font-size: 11pt; column-width: 38mm; }
    [data-wsr-print-root] .wsr__credit { margin-top: 6mm; font-size: 8pt; }

    /* Was beim Spielen markiert wurde, gehoert nicht aufs Arbeitsblatt. */
    [data-wsr-print-root] [data-wsr-mark="found"],
    [data-wsr-print-root] [data-wsr-mark="select"],
    [data-wsr-print-root] [data-wsr-mark="solution"] { display: none; }
    [data-wsr-print-root] [data-wsr-cell][data-wsr-anchor] { background: transparent; }
    [data-wsr-print-root] .wsr__list li[data-wsr-found] { text-decoration: none; opacity: 1; }

    [data-wsr-print-root="solution"] [data-wsr-mark="solution"] { display: inline; stroke: #000; stroke-opacity: .22; }
}

@media print {
    [data-wsr-print-root="solution"] .wsr__sheet-title::after { content: " – Lösung"; }
}