/* Interaktive Patterntestarea mit Formular, Canvas-Output und Share-Dialog. */
/* Hauptpanel der Patterntestarea innerhalb von Willys Works. */
.testarea-panel {
    margin-top: 1.5rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.18);
    box-shadow: var(--shadow);
}

/* Zweispaltiges Formularraster fuer Zahlenfelder und Steuerelemente. */
.testarea-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
    align-items: end;
}

/* Standardbeschriftungen fuer Inputs und Gruppen. */
.testarea-form label,
.testarea-group-label {
    display: block;
    margin-bottom: -0.2rem;
    color: var(--text-soft);
}

/* Diese Bereiche laufen immer ueber die volle Formularbreite. */
.testarea-formula-panel,
.testarea-color-mode-group,
.testarea-color-group,
.testarea-generated-colors,
.testarea-palette-preview,
.testarea-actions {
    grid-column: 1 / -1;
}

/* Kleine Statuszeile fuer den aktuell aktiven Formelnamen. */
.testarea-formula-active {
    margin: 0 0 0.45rem;
}

/* Der freie Formeleditor soll bewusst monospace lesbar bleiben. */
.testarea-formula-panel textarea {
    min-height: 4.8rem;
    resize: vertical;
    font-family: "Lucida Console", "Courier New", monospace;
}

/* Kurzbeschreibung der erlaubten Variablen und Hilfsfunktionen. */
.testarea-formula-hint {
    margin-top: 0.45rem;
    color: var(--text-soft);
    font-size: 0.9rem;
}

/* Umschalter fuer feste Farben oder Generator-Modus. */
.testarea-color-mode-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.8rem;
    margin-top: 0.55rem;
}

.testarea-color-mode-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0;
}

.testarea-color-mode-option input {
    width: auto;
    margin: 0;
}

/* Mehrspaltige Checkbox-Gruppe fuer die Farbpalette. */
.testarea-color-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.8rem;
    margin-top: 0.55rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    background: rgba(5, 10, 8, 0.82);
}

.testarea-color-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.testarea-color-option input {
    width: auto;
    margin: 0;
}

/* Einfaches Zahlenfeld fuer die Menge der Zufallsfarben. */
.testarea-generated-colors input {
    max-width: 12rem;
}

/* Kompakte Vorschau der beim letzten Rendern verwendeten Palette. */
.testarea-palette-preview {
    padding: 0.8rem;
    border: 1px solid var(--line);
    background: rgba(5, 10, 8, 0.82);
}

.testarea-palette-summary {
    margin: 0 0 0.6rem;
    color: var(--text-soft);
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
}

.testarea-palette-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22px, 1fr));
    gap: 0.35rem;
}

.testarea-palette-swatch {
    display: block;
    min-height: 1.6rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Primaere Aktionsleiste fuer Rendern und optionales Teilen. */
.testarea-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
}

.testarea-submit-button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

/* Kleiner Inline-Spinner fuer laufende Canvas-Renderings. */
.testarea-submit-spinner {
    display: none;
    width: 1em;
    height: 1em;
    border: 0.14em solid rgba(245, 255, 135, 0.24);
    border-top-color: var(--heading);
    border-radius: 50%;
    animation: testarea-spin 0.72s linear infinite;
}

.testarea-form.is-loading .testarea-submit-spinner {
    display: inline-block;
}

/* Rotationsanimation des Render-Spinners. */
@keyframes testarea-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Gastsperre fuer den Share-Button. */
.testarea-share-trigger-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.testarea-share-disabled-hint {
    display: inline-flex;
}

/* Ergebnisbereich unterhalb des Formulars. */
.testarea-result {
    margin-top: 1.25rem;
}

/* Meta-Zeile ueber dem Canvas: Rastergroesse, Pixelmass und aktives Preset. */
.testarea-output-meta {
    margin-bottom: 0.55rem;
    color: var(--text-soft);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Scrollbarer Canvas-Container fuer groessere Render-Ausgaben. */
.testarea-output {
    width: fit-content;
    max-width: 100%;
    padding: 0.8rem;
    overflow: auto;
    border: 1px solid var(--line);
    background: rgba(5, 10, 8, 0.88);
}

.testarea-output canvas {
    display: block;
    image-rendering: pixelated;
}

/* Fehlermeldungen aus der Formelauswertung oder Canvas-Initialisierung. */
.testarea-error {
    min-height: 1.35rem;
    margin-top: 0.7rem;
    color: var(--error);
}

/* Modal-Grundzustand fuer den Share-Dialog. */
.testarea-share-modal[hidden] {
    display: none;
}

.testarea-share-modal {
    position: fixed;
    inset: 0;
    z-index: 30;
}

/* Halbtransparenter Overlay-Hintergrund. */
.testarea-share-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.68);
}

/* Eigentliches Dialogfenster fuer den Blogpost-Entwurf. */
.testarea-share-window {
    position: relative;
    z-index: 1;
    width: min(760px, calc(100% - 32px));
    max-height: calc(100vh - 48px);
    margin: 24px auto;
    padding: 1.25rem 1.35rem;
    overflow: auto;
    border: 1px solid var(--line-strong);
    background: var(--panel-strong);
    box-shadow:
        0 0 0 1px rgba(245, 255, 135, 0.1),
        0 0 24px rgba(143, 255, 208, 0.14),
        var(--shadow);
}

.testarea-share-close {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    min-width: 2.4rem;
    padding: 0.45rem 0.6rem;
}

.testarea-share-author {
    margin-bottom: 1rem;
    color: var(--text-soft);
}

/* Eingabebereich des Share-Dialogs. */
.testarea-share-form label {
    display: block;
    margin: 0.8rem 0 0.25rem;
}

/* Vorschaukasten fuer das erzeugte Canvas-Bild. */
.testarea-share-preview {
    margin-top: 1rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.18);
}

.testarea-share-preview-label {
    margin-bottom: 0.55rem;
    color: var(--text-soft);
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
}

.testarea-share-preview img {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--line);
    image-rendering: pixelated;
}

/* Rueckmeldungen nach dem Share-Request. */
.testarea-share-feedback {
    min-height: 1.35rem;
    margin-top: 0.85rem;
    color: var(--text-soft);
}

.testarea-share-feedback.is-error {
    color: var(--error);
}

.testarea-share-feedback.is-success {
    color: var(--success);
}

/* Mobile Vereinfachung:
   Auf schmalen Screens werden Formular und Farbgruppe einspaltig. */
@media (max-width: 640px) {
    .testarea-form,
    .testarea-color-mode-options,
    .testarea-color-options {
        grid-template-columns: 1fr;
    }
}