/* Plotwerk-Editor — gescopte Styles, kein Tailwind-Konflikt */

.pw-font-preload {
    position: absolute;
    left: -9999px;
    top: -9999px;
    font-size: 0;
    line-height: 0;
    opacity: 0;
    pointer-events: none;
}

.pw-canvas-wrap {
    background: #f4f1ea;
    padding: 1rem;
    border: 1px solid #e0ddd0;
}

.pw-canvas-wrap canvas {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: #fff;
}

/* Container ist nur noch vertikaler Stapel für die Sektionen — das auto-fit-
   Grid lebt jetzt eine Ebene tiefer in .pw-section-grid. */
.pw-controls {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pw-section {
    border: 0;
    border-top: 1px solid #e0ddd0;
    padding: 0.6rem 0 0;
    margin: 0.7rem 0 0;
    min-width: 0; /* damit grid-Kinder nicht überlaufen */
}

.pw-section:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.pw-section legend {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    color: #666;
    padding: 0 0.5rem 0 0;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pw-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem 0.6rem;
}

/* Erste Zeile der Muster-Section: Muster (renderer-Stepper) links breiter,
   Würfel-Nr.-Stepper rechts schmäler. Eigenes 2:1-Grid statt Teilnahme am
   auto-fit-Grid, weil das Renderer-Input sonst zu schmal für längere Labels
   wird. Auf schmalen Viewports auf einspaltigen Stack zurückfallen. */
.pw-muster-head {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 0.5rem 0.6rem;
    margin-bottom: 0.5rem;
}
@media (max-width: 480px) {
    .pw-muster-head {
        grid-template-columns: 1fr;
    }
}

/* Stepper-Combobox: [◀] [Input mit datalist-Autocomplete] [▶].
   Browser-übergreifend gleiche Höhe — wir vermeiden <select> + <input
   type="number">, deren native Renderings je nach Browser unterschiedlich
   hoch sind (Safari skaliert beide unterschiedlich, weil <input type=number>
   Spinner-Buttons mit-rechnet). Mit dem Stepper kontrollieren wir Höhe
   komplett über padding+line-height der drei Flex-Items. */
.pw-stepper {
    display: flex;
    align-items: stretch;
    border: 1px solid #aaa;
    background: #fff;
}
.pw-stepper-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0.4rem 0.5rem;
    font-family: inherit;
    font-size: 0.9rem;
    background: transparent;
    line-height: 1.2;
}
/* Native number-Spinner ausblenden — wir steuern via Pfeil-Buttons.
   inputmode="numeric" liefert die richtige Mobile-Tastatur. */
.pw-stepper-input-numeric {
    text-align: right;
    -moz-appearance: textfield;
}
.pw-stepper-input-numeric::-webkit-outer-spin-button,
.pw-stepper-input-numeric::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pw-stepper-btn {
    background: #fff;
    border: 0;
    border-left: 1px solid #aaa;
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0 0.7rem;
    color: #555;
    cursor: pointer;
    flex: 0 0 auto;
}
.pw-stepper-btn:first-child {
    border-left: 0;
    border-right: 1px solid #aaa;
}
.pw-stepper-btn:hover {
    background: #F2C94C;
    color: #1a1612;
}
.pw-stepper-btn:active {
    background: #e0b73a;
}

/* Direkt sichtbare Buchstaben-Eingabe + Schriftwahl — nicht in einer Card,
   sondern als eigenständige Zeile, leicht hervorgehoben damit klar ist
   „das sind die zwei Sachen, die du jetzt sicher anfassen willst".
   Grid: schmales Buchstaben-Feld links, Schrift-Select rechts. Stapelt
   auf schmalen Viewports. */
.pw-letters-bar {
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: minmax(130px, 0.7fr) 1fr;
    gap: 0.6rem 0.8rem;
    align-items: start;
}
@media (max-width: 480px) {
    .pw-letters-bar {
        grid-template-columns: 1fr;
    }
}
.pw-letters-field input[type="text"] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.6rem 0.75rem;
    text-align: center;
}
.pw-letters-field > span,
.pw-font-field > span {
    font-size: 0.78rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}
/* Font-Select-Höhe an das prominente Buchstabenfeld angleichen, damit beide
   Felder auf gleicher Baseline enden statt asymmetrisch zu wirken. */
.pw-font-field select {
    padding: 0.7rem 0.5rem;
    font-size: 0.95rem;
}

/* Eingeklappte „Card"-Aufklappen für die zwei tieferen Ebenen.
   Klar als Knopf erkennbar: Border, Padding, Hover-State, Pfeil-Icon
   das bei [open] rotiert. Anti-Pattern des „winzigen Erweitert-Links"
   bewusst vermieden — wir verstecken Komplexität, nicht ihren Eingang. */
.pw-deeper {
    margin-top: 0.7rem;
}
.pw-deeper-trigger {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    background: #fafaf7;
    border: 1px solid #aaa;
    cursor: pointer;
    list-style: none;
    transition: background 0.1s, border-color 0.1s;
}
.pw-deeper-trigger::-webkit-details-marker { display: none; }
.pw-deeper-trigger::marker { content: ''; }
.pw-deeper-trigger:hover {
    background: #f4ecd6;
    border-color: #1a1612;
}
.pw-deeper[open] .pw-deeper-trigger {
    background: #fff;
    border-color: #1a1612;
}
.pw-deeper-title {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a1612;
    flex: 0 0 auto;
    letter-spacing: 0.01em;
}
.pw-deeper-hint {
    font-size: 0.8rem;
    color: #777;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pw-deeper-arrow {
    font-size: 1.05rem;
    color: #1a1612;
    transition: transform 0.15s ease-out;
    flex: 0 0 auto;
}
.pw-deeper[open] .pw-deeper-arrow {
    transform: rotate(180deg);
}
.pw-deeper-body {
    padding: 0.9rem 0 0;
}
/* Innen-Fieldsets sollen die normale Section-Optik behalten, aber innerhalb
   eines Aufklappers den oberen Strich nur ab dem zweiten Element zeigen. */
.pw-deeper-body > .pw-section:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}
/* Effects-Block im „Selbst feilen"-Aufklapper: gleiche obere Trennlinie
   wie eine Section, damit er sich nahtlos einordnet. */
.pw-deeper-body > .pw-effects-block {
    border-top: 1px solid #e0ddd0;
    padding-top: 0.6rem;
    margin-top: 0.7rem;
}

.pw-field {
    display: flex;
    flex-direction: column;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
}

/* Browser-Default für [hidden] wird sonst von display:flex überschrieben. */
.pw-field[hidden] {
    display: none;
}

.pw-field > span {
    margin-bottom: 0.2rem;
    color: #666;
}

.pw-field input,
.pw-field select {
    padding: 0.4rem 0.45rem;
    font-size: 0.9rem;
    font-family: inherit;
    border: 1px solid #aaa;
    background: #fff;
}

.pw-field input[type="range"] {
    padding: 0;
}

/* Toolbar oberhalb der Vorschau (Actions + Vorlagen-Stepper).
   Position über dem Canvas, damit sie nicht hin- und herspringen,
   wenn Format/Ausrichtung die Canvas-Höhe ändern. */
.pw-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

/* Auf Mobile: Preview-Spalte sticky am Viewport-Top, sodass Vorschau und
   Toolbar immer sichtbar bleiben während der User unten in den Controls
   scrollt. Canvas-Höhe begrenzt, damit die Sticky-Zone nicht den ganzen
   Viewport frisst. Auf Desktop (ab 1024 px) gilt die andere Sticky-Regel
   im Split-View-Block weiter unten. */
@media (max-width: 1023px) {
    .pw-preview-col {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #fff;
        padding: 0.4rem 0;
        margin: 0 -1rem 0.5rem;
        padding-inline: 1rem;
        box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.15);
    }
    /* Toolbar enger ziehen: kleinere Gaps, Buttons mit reduziertem Padding. */
    .pw-preview-col .pw-toolbar {
        gap: 0.35rem;
        margin-bottom: 0.4rem;
    }
    .pw-preview-col .pw-actions-row {
        gap: 0.35rem;
    }
    .pw-preview-col .pw-actions-play,
    .pw-preview-col .pw-actions-save-row {
        gap: 0.3rem;
    }
    .pw-preview-col .pw-presets {
        gap: 0.35rem;
        font-size: 0.78rem;
    }
    .pw-preview-col .pw-preset-step {
        width: 2.2rem;
        padding: 0.35rem 0.5rem;
        min-height: 36px;
    }
    .pw-preview-col .pw-canvas-wrap {
        padding: 0.3rem;
        margin-bottom: 0;
    }
    .pw-preview-col .pw-canvas-wrap canvas {
        max-height: 26vh;
        width: auto;
        max-width: 100%;
        margin: 0 auto;
    }
    /* Meta-Zeile auf Mobile noch kompakter, damit Sticky-Zone schlank bleibt. */
    .pw-preview-col .pw-meta {
        font-size: 0.66rem;
        line-height: 1.35;
        margin: 0.15rem 0 0;
        word-spacing: -0.1em;
    }
    .pw-preview-col .pw-complexity-warn {
        margin: 0.25rem 0;
        font-size: 0.75rem;
    }
}

/* Vorlagen-Stepper: zwei Pfeile direkt nebeneinander, dann „Vorlage X / N · Name". */
.pw-presets {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
}

.pw-preset-nav {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex: 0 0 auto;
}

.pw-preset-step {
    background: #fff;
    border: 1px solid #aaa;
    font-family: inherit;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.3rem 0.55rem;
    line-height: 1;
    color: #555;
}

.pw-preset-step + .pw-preset-step {
    border-left: 0;
}

.pw-preset-counter {
    color: #666;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0 0.4rem;
    align-self: center;
}

.pw-preset-counter #pw-preset-index,
.pw-preset-counter #pw-preset-total {
    font-weight: 600;
    color: #1a1612;
}

.pw-preset-step:hover {
    background: #F2C94C;
}

.pw-effects-block {
    margin-top: 0.85rem;
}

.pw-effects-label {
    font-family: 'IBM Plex Mono', monospace;
    color: #666;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 0.4rem;
}

.pw-effects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.35rem;
}

.pw-effect-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #fafaf7;
    border: 1px solid #e0ddd0;
    padding: 0.25rem 0.45rem;
}

.pw-effect-btn {
    flex: 0 0 auto;
    padding: 0.55rem 0.6rem;
    background: transparent;
    border: 1px solid #aaa;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    cursor: pointer;
    color: #333;
    min-width: 76px;
    min-height: 40px;
    text-align: left;
}

.pw-effect-btn:hover {
    background: #fff;
}

.pw-effect-row.is-active .pw-effect-btn {
    background: #1a1612;
    color: #fff;
    border-color: #1a1612;
}

.pw-effect-row.is-irrelevant {
    display: none;
}

.pw-effect-amount {
    flex: 1 1 0;
    min-width: 60px;
    opacity: 0.4;
    pointer-events: none;
}

.pw-effect-row.is-active .pw-effect-amount {
    opacity: 1;
    pointer-events: auto;
}

/* Zwei Toolbar-Zeilen, jede kompakt:
   1) Spiel — Würfeln + ↶ + Vorlage-Counter + Würfel-Nr.
   2) Sicher — Speichern + Wallpaper + SVG, Speichern dominiert
   Alle Buttons gleich hoch (~36 px), schlanker Padding. */
.pw-actions-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pw-actions-play,
.pw-actions-save-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.35rem;
}

/* „Würfeln" als Haupt-Spiel-Aktion nimmt allen übrigen Platz ein. */
.pw-actions-play #pw-roll {
    flex: 1 1 6rem;
}

/* Sicher-Zeile: Speichern groß (2/3), JPG und SVG kompakt rechts daneben. */
.pw-actions-save-row #pw-save {
    flex: 2 1 8rem;
}
.pw-actions-save-row #pw-wallpaper,
.pw-actions-save-row #pw-wallpaper-svg {
    flex: 1 1 5rem;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    white-space: nowrap;
}

/* „Strong"-Variante eines pw-btn-sm: bold-Text + leicht größere Schrift,
   damit Würfeln und Speichern visuell hervorstechen, aber dieselbe Höhe
   wie die schlanken Geschwister-Buttons haben. */
.pw-btn-strong {
    font-weight: 600;
    font-size: 0.95rem;
}

/* Download-Icon im Wallpaper- und SVG-Button. Inline-SVG erbt currentColor,
   damit es auf Hover sauber mit dem Button-Text mitkippt. */
.pw-btn-icon {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
}

/* Würfel-Undo-Button: schmaler Pfeil-Knopf neben „Würfeln". Disabled-Zustand
   sieht klar inaktiv aus, damit der User merkt, ob er noch zurückkann. */
#pw-roll-back {
    flex: 0 0 auto;
    padding: 0.55rem 0.65rem;
    font-size: 1rem;
    line-height: 1;
    min-width: 2.6rem;
}
#pw-roll-back:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Kompaktere Variante des Standard-Buttons für Sekundär-Aktionen. */
.pw-btn-sm {
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
}

.pw-btn {
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.2;
}

.pw-btn-primary {
    background: #1a1612;
    color: #fff;
}

.pw-btn-accent {
    background: #F2C94C;
    color: #1a1612;
    font-weight: 600;
}

.pw-btn-ghost {
    background: #fff;
    color: #1a1612;
    border-color: #aaa;
}

.pw-btn-chevron {
    padding: 0.75rem 0.7rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.pw-btn-chevron::before {
    content: "›";
    margin-right: 0.35rem;
    font-weight: 700;
    color: #888;
}

.pw-complexity-warn {
    margin: 0.75rem 0 0;
    padding: 0.55rem 0.8rem;
    background: #fff3d6;
    border: 1px solid #d4a017;
    border-left-width: 4px;
    color: #6b4f06;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.pw-saved {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px dashed #d8d6cc;
}

.pw-saved-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

.pw-saved-header h3 {
    margin: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1a1612;
}

.pw-btn-mini {
    padding: 0.3rem 0.7rem;
    background: #fff;
    border: 1px solid #aaa;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    cursor: pointer;
}

.pw-btn-mini:hover {
    background: #F2C94C;
}

.pw-saved-hint {
    margin: 0 0 0.7rem;
    color: #777;
    font-size: 0.8rem;
}

.pw-saved-strip {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.3rem 0 0.6rem;
}

.pw-saved-tile {
    flex: 0 0 auto;
    width: 86px;
    height: 122px; /* ~A3-Aspect 1:√2 verkleinert */
    background: #fafaf7;
    border: 1px solid #c8c4b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: border-color 0.1s, box-shadow 0.1s;
    padding: 0;
    overflow: hidden;
}

.pw-saved-tile:hover {
    border-color: #1a1612;
}

.pw-saved-tile.is-active {
    border-color: #F2C94C;
    box-shadow: 0 0 0 2px #F2C94C;
}

.pw-saved-tile.is-dark {
    background: #0a0a0a;
    color: #d8d6cc;
}

.pw-saved-tile-letters {
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
}

.pw-saved-tile-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.62rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.85);
    color: #555;
    padding: 0.1rem 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pw-saved-tile.is-dark .pw-saved-tile-label {
    background: rgba(10, 10, 10, 0.8);
    color: #aaa;
}

/* Plot-Code (Fingerprint, 12-stellig). Oben am Tile, klein, monospaced.
   Auf 86 px Tile passt der Code mit 0.55rem gerade rein. */
.pw-saved-tile-code {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.55rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.85);
    color: #777;
    padding: 0.1rem 0.2rem;
    letter-spacing: 0.02em;
    pointer-events: none;
    user-select: none;
}

.pw-saved-tile.is-dark .pw-saved-tile-code {
    background: rgba(10, 10, 10, 0.8);
    color: #999;
}

.pw-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: #999;
    margin-top: 1rem;
    text-align: center;
}

/* === Galerie === */
.pw-gallery-tile {
    aspect-ratio: 1 / 1.414;
    background: #fafaf7;
    border: 1px solid #c8c4b8;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pw-gallery-tile.is-dark {
    background: #0a0a0a;
    color: #d8d6cc;
    border-color: #2a2a2a;
}

.pw-gallery-tile-letters {
    font-size: 3rem;
    line-height: 1;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
}

/* Bild-Tiles aus der Render-Pipeline. object-fit:contain bewahrt die
   Aspect-Ratio (verschiedene Plot-Formate werden mit paper_bg gepadded —
   passiert serverseitig in sharp). */
.pw-gallery-tile-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: transparent;
}

/* Platzhalter wenn Thumb 404't (z.B. Pattern noch nicht gerendert). */
.pw-gallery-tile-placeholder {
    color: #aaa;
    font-size: 1.5rem;
}

.pw-gallery-tile-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.9);
    color: #555;
    padding: 0.25rem 0.5rem;
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
}

.pw-gallery-tile.is-dark .pw-gallery-tile-meta {
    background: rgba(10, 10, 10, 0.85);
    color: #aaa;
}

.pw-gallery-tile-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pw-gallery-tile-slot {
    flex-shrink: 0;
    color: #999;
}

.pw-gallery-tile.is-dark .pw-gallery-tile-slot {
    color: #777;
}

.pw-dialog {
    border: 1px solid #aaa;
    padding: 0;
    max-width: 480px;
    width: 90vw;
    background: #fff;
    /* Mobile: Dialog selbst scrollbar. Sonst rutscht der Submit-Button +
       Status-Banner („Wir haben dir eine Mail geschickt …") out of viewport
       und der User scrollt reflexartig den Body — bei <dialog showModal()>
       sollte das Touch-Scroll des Bodies eigentlich gelockt sein, leakt
       aber auf Mobile-Safari/Chrome trotzdem. dvh statt vh berücksichtigt
       iOS-Safaris kollabierende URL-Leiste. */
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pw-dialog form {
    padding: 1.5rem;
}

.pw-dialog h3 {
    margin: 0 0 1rem;
    font-family: 'IBM Plex Mono', monospace;
}

.pw-dialog-intro {
    margin: 0 0 1rem;
    color: #444;
    font-size: 0.95rem;
}

.pw-dialog-field {
    margin-bottom: 1rem;
}

.pw-consent {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

.pw-consent input {
    margin-top: 0.3rem;
}

.pw-consent a {
    text-decoration: underline;
}

/* Aufklapper unter dem Kurz-Consent. Details, die nicht jeder lesen muss,
   aber für die rechtlich saubere Einwilligung bereitstehen müssen. */
.pw-consent-details {
    margin: -0.75rem 0 1.25rem 1.65rem;
    font-size: 0.8rem;
    color: #555;
    line-height: 1.45;
}
.pw-consent-details summary {
    cursor: pointer;
    color: #1a1612;
    font-weight: 500;
    margin-bottom: 0.4rem;
}
.pw-consent-details p {
    margin: 0.5rem 0;
}
.pw-consent-details a {
    text-decoration: underline;
}

.pw-dialog-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.pw-honeypot {
    display: none;
}

.pw-status {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    margin: 1rem 0 0;
    color: #666;
    min-height: 1.2em;
}

.pw-status.is-error {
    color: #b84a1c;
}

/* ─── Save-Dialog Erfolgs-Zustand ──────────────────────────────────────
   Nach erfolgreichem POST setzt der Submit-Handler `.is-submitted` aufs
   Form. CSS blendet dann alles aus, was nicht mehr gebraucht wird (Intro,
   Email, Consent, Submit-Button) und hebt den Status-Text zu einem
   prominenten Callout. Der Cancel-Button wird zum primären „Schließen"
   und wandert links — Mobile-Tester hat die alte Erfolgs-Meldung
   übersehen weil sie unter dem Form-Rest lag, der Tap-Bereich vom
   gerade-noch-„Speichern"-Button wird absichtlich gemieden, damit man
   nicht reflexartig schließt. */
#pw-save-form.is-submitted .pw-dialog-intro,
#pw-save-form.is-submitted .pw-dialog-field,
#pw-save-form.is-submitted .pw-consent,
#pw-save-form.is-submitted .pw-consent-details,
#pw-save-form.is-submitted button[type="submit"] {
    display: none;
}
#pw-save-form.is-submitted h3 {
    margin-bottom: 0.75rem;
}
#pw-save-form.is-submitted .pw-status {
    /* Prominenter Callout — größer, Akzent-Border, eigene Farbfläche.
       Outfit statt Mono damit Fließtext lesbarer ist als der vorherige
       grau-monospace-Hint. */
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #1a1612;
    background: #f4efe4;
    border-left: 3px solid #1a1612;
    padding: 1rem 1.1rem;
    margin: 0 0 1.25rem;
    min-height: 0;
}
#pw-save-form.is-submitted .pw-status strong {
    font-weight: 600;
}
#pw-save-form.is-submitted .pw-dialog-actions {
    justify-content: flex-start;
}
#pw-save-form.is-submitted #pw-save-cancel {
    /* Upgrade von Ghost zu Primary — selbe Visual-Sprache wie der
       ursprüngliche Submit-Button, ohne dass er an dessen Position landet. */
    background: #1a1612;
    color: #fff;
    border-color: #1a1612;
}

/* ─── Split-View für Desktop ab 1024 px ────────────────────────────────
   Zwei Spalten, beide top-aligned. Linke Spalte (Toolbar + Canvas) ist
   sticky am Viewport-Rand, damit beim Scrollen der Controls rechts die
   Vorschau sichtbar bleibt. Mobile fällt durch Block-Flow zurück. */
@media (min-width: 1024px) {
    #plotwerk-app {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(380px, 38rem);
        column-gap: 1.5rem;
        align-items: start;
    }

    .pw-font-preload  { grid-column: 1 / -1; }

    .pw-preview-col   {
        grid-column: 1;
        position: sticky;
        top: 1rem;
    }
    .pw-canvas-wrap canvas {
        max-width: 100%;
    }
    .pw-right-column  {
        grid-column: 2;
        min-width: 0;
    }
}

/* Symbol-Picker — Material-Symbols-Modal.
   Eigenes max-width/height, weil wir ein Grid mit vielen Tiles brauchen. */
/* Symbol-Picker-Button erscheint kontextuell unter dem Font-Select, sobald
   „Material Symbols" gewählt ist. Bewusst zurückhaltend (Ghost-Stil) statt
   solid-schwarz — er ist eine Folge-Aktion zur Schriftwahl, kein primärer
   CTA, und sollte den Blick nicht aus dem Buchstaben-/Schrift-Paar ziehen. */
.pw-symbol-picker-btn {
    margin-top: 0.4rem;
    padding: 0.4rem 0.6rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    background: #fff;
    color: #1a1612;
    border: 1px solid #aaa;
    cursor: pointer;
    text-align: left;
}
.pw-symbol-picker-btn:hover {
    background: #f4ecd6;
    border-color: #1a1612;
}

.pw-symbol-dialog {
    max-width: 720px;
    width: 92vw;
    /* Fixe Höhe statt max-height: sonst sized sich der dialog nach Content
       und wirkt halbleer/scrollt unauffällig — User übersieht Kategorien
       unterhalb des Folds. 85vh garantiert großzügige Picker-Fläche. */
    height: 85vh;
    padding: 1.25rem;
    /* display nur bei [open], sonst überschreiben wir den Browser-Default
       `dialog:not([open]) { display: none }` und das Modal wäre immer sichtbar. */
    flex-direction: column;
    gap: 0.75rem;
}
.pw-symbol-dialog[open] {
    display: flex;
}
.pw-symbol-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pw-symbol-dialog-head h3 {
    margin: 0;
    font-family: 'IBM Plex Mono', monospace;
}
#pw-symbol-search {
    padding: 0.5rem 0.7rem;
    font: inherit;
    border: 1px solid #aaa;
    background: #fff;
}
.pw-symbol-grid {
    flex: 1 1 0;
    /* min-height:0 ist nötig, sonst expandiert das Grid auf seine
       Content-Mindesthöhe und ignoriert overflow-y. Klassischer
       Flex-Scroll-Container-Trick. */
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 0.4rem;
    align-content: start;
    padding: 0.25rem;
    background: #fafafa;
    border: 1px solid #eee;
}
.pw-symbol-grid h4 {
    grid-column: 1 / -1;
    margin: 0.6rem 0 0.1rem;
    font: 0.75rem/1 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #777;
}
.pw-symbol-grid h4:first-child { margin-top: 0.2rem; }
.pw-symbol-tile {
    background: #fff;
    border: 1px solid #ddd;
    padding: 0.4rem 0.2rem 0.2rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    transition: background 80ms, border-color 80ms;
}
.pw-symbol-tile:hover {
    background: #FACC15;
    border-color: #000;
}
.pw-symbol-tile .pw-symbol-glyph {
    font-family: 'Material Symbols Outlined';
    font-size: 1.8rem;
    line-height: 1;
    color: #000;
    font-feature-settings: 'liga';
}
.pw-symbol-tile .pw-symbol-name {
    font: 0.6rem/1.1 'IBM Plex Mono', monospace;
    color: #666;
    text-align: center;
    word-break: break-word;
    max-width: 100%;
}
.pw-symbol-hint {
    margin: 0;
    font: 0.75rem/1.3 system-ui, sans-serif;
    color: #666;
}
.pw-symbol-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #888;
    padding: 1.5rem 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
}

/* ─── Intro-Sektion (oberhalb Editor) ─────────────────────────────────────── */

.pw-intro-hero {
    margin-bottom: 3rem;
}

.pw-intro-lede {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #2a2520;
    max-width: 42rem;
    margin: 0 0 1rem;
}

.pw-intro-skip {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    color: #666;
    margin: 0;
}

.pw-intro-skip a {
    color: #1a1612;
    border-bottom: 1px solid #1a1612;
    text-decoration: none;
}

.pw-intro-skip a:hover {
    background: #F2C94C;
}

.pw-intro-block {
    max-width: 42rem;
    margin: 0 0 2.5rem;
}

.pw-intro-block h2 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1612;
    margin: 0 0 0.9rem;
    padding-top: 0.5rem;
    border-top: 2px solid #1a1612;
}

.pw-intro-block p {
    font-size: 1rem;
    line-height: 1.65;
    color: #2a2520;
    margin: 0 0 0.9rem;
}

.pw-intro-block strong {
    font-weight: 600;
}

.pw-intro-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.pw-intro-list li {
    padding-left: 1.4rem;
    position: relative;
    line-height: 1.6;
    margin: 0.3rem 0;
}

.pw-intro-list li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: #F2C94C;
}

.pw-intro-steps {
    list-style: none;
    counter-reset: pw-steps;
    padding: 0;
    margin: 0 0 1rem;
}

.pw-intro-steps li {
    counter-increment: pw-steps;
    padding-left: 2.5rem;
    position: relative;
    margin: 0.8rem 0;
    line-height: 1.6;
}

.pw-intro-steps li::before {
    content: counter(pw-steps);
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1612;
    background: #F2C94C;
    width: 1.8rem;
    height: 1.8rem;
    line-height: 1.8rem;
    text-align: center;
}

.pw-intro-aside {
    margin-top: 1.2rem;
    padding: 0.8rem 1rem;
    background: #fafaf7;
    border-left: 3px solid #c8c4b8;
    font-size: 0.9rem;
    color: #4a4540;
}

.pw-intro-video {
    margin: 0 0 1.2rem;
    background: #1a1612;
    /* Aspect-Ratio kommt vom Video selbst; max-height verhindert
       überlange Vertikal-Videos auf engen Spalten. */
}

.pw-intro-video video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 60vh;
    background: #1a1612;
}

/* Grid: Hero bleibt voll-breit (außerhalb Grid). Ab >= 1024 px wird die
   Erklär-Aside als sticky Side-Column rechts neben Output/HowTo/Rounds
   eingerückt. Auf Mobile fällt alles in den Block-Flow zurück. */
.pw-intro-grid {
    display: block;
}

@media (min-width: 1024px) {
    .pw-intro-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 22rem);
        column-gap: 3rem;
        align-items: start;
    }
    .pw-intro-grid > .pw-intro-block {
        max-width: none;
    }
    .pw-intro-grid > :not(.pw-intro-explainer) {
        grid-column: 1;
        max-width: 38rem;
    }
    .pw-intro-grid > .pw-intro-explainer {
        grid-column: 2;
        grid-row: 1 / span 99;
        position: sticky;
        top: 1rem;
        margin-bottom: 0;
        background: #fafaf7;
        border: 1px solid #e0ddd0;
        padding: 1.2rem 1.3rem;
    }
    .pw-intro-grid > .pw-intro-explainer h2 {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        font-size: 1.1rem;
    }
    .pw-intro-grid > .pw-intro-explainer p {
        font-size: 0.92rem;
        line-height: 1.55;
    }
}

.pw-intro-cta {
    margin: 1.5rem 0 0;
}

.pw-intro-cta .pw-btn {
    display: inline-block;
    text-decoration: none;
}

.pw-intro-rounds-table {
    border-collapse: collapse;
    margin: 1rem 0 1.2rem;
    width: 100%;
    max-width: 28rem;
    font-size: 0.95rem;
}

.pw-intro-rounds-table th,
.pw-intro-rounds-table td {
    padding: 0.5rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid #e0ddd0;
}

.pw-intro-rounds-table th {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1a1612;
    background: #fafaf7;
}

.pw-intro-rounds-table td:first-child {
    width: 2rem;
    text-align: center;
    padding: 0.5rem 0.3rem;
}
.pw-intro-rounds-table td:nth-child(2) {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    width: 4rem;
}

/* JS-gesteuerte Markierung der laufenden/abgeschlossenen Runden in der
   Plot-Runden-Tabelle. Mark-Spalte zeigt ▶ für aktuell, ✓ für vorbei. */
.pw-intro-rounds-table .pw-rounds-mark {
    color: #888;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    line-height: 1;
}
.pw-intro-rounds-table tr.is-current {
    background: #fef4cf;
}
.pw-intro-rounds-table tr.is-current td {
    border-bottom-color: #1a1612;
}
.pw-intro-rounds-table tr.is-current .pw-rounds-mark {
    color: #1a1612;
    font-weight: 700;
}
.pw-intro-rounds-table tr.is-past {
    color: #888;
}
.pw-intro-rounds-table tr.is-past .pw-rounds-mark {
    color: #1a1612;
}

/* ─── Hintergrund-Sektion (unterhalb Galerie) ────────────────────────────── */

.pw-hintergrund {
    max-width: 42rem;
}

.pw-detail {
    border-bottom: 1px solid #e0ddd0;
    padding: 0.2rem 0;
}

.pw-detail summary {
    cursor: pointer;
    padding: 0.8rem 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1612;
    list-style: none;
    position: relative;
    padding-right: 2rem;
}

.pw-detail summary::-webkit-details-marker {
    display: none;
}

.pw-detail summary::after {
    content: "+";
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #888;
}

.pw-detail[open] summary::after {
    content: "−";
}

.pw-detail summary:hover {
    color: #000;
}

.pw-detail-body {
    padding: 0 0 1rem;
    color: #2a2520;
    font-size: 0.95rem;
    line-height: 1.65;
}

.pw-detail-body p {
    margin: 0 0 0.7rem;
}

.pw-detail-body code {
    font-family: 'IBM Plex Mono', monospace;
    background: #fafaf7;
    padding: 0.1rem 0.35rem;
    font-size: 0.88rem;
    border: 1px solid #e0ddd0;
}

/* Version inline in der Meta-Zeile — gleiche Schriftgröße wie der Rest,
   nur Farbe als visueller Unterton. */
.pw-meta-version {
    color: #999;
}

/* ─── Plot-Runden-Banner oberhalb des Editors ────────────────────────────── */

.pw-countdown {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem 1rem;
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid #1a1612;
    background: #fafaf7;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9rem;
    color: #1a1612;
}

.pw-countdown.is-pre {
    background: #f4f1ea;
    border-color: #c8c4b8;
    color: #4a4540;
}

.pw-countdown.is-urgent {
    background: #fff7e0;
    border-color: #F2C94C;
    border-width: 2px;
}

.pw-countdown.is-closed {
    background: #f0efe9;
    border-color: #aaa;
    color: #555;
}

.pw-countdown-slot strong,
.pw-countdown-rest strong {
    color: #1a1612;
}

.pw-countdown.is-urgent .pw-countdown-rest strong {
    color: #8a6500;
}

/* ─── Stale-Banner über Canvas (Muster aus abgeschlossener Runde) ───────── */

.pw-stale {
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.6rem;
    background: #fff7e0;
    border: 1px solid #F2C94C;
    border-left-width: 3px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #4a4540;
}

.pw-stale strong {
    color: #1a1612;
}

/* ─── Confirm-Banner (DOI Bestätigung via Mail-Link) ────────────────────── */
/* Wird oben in #plotwerk-app per JS injiziert wenn ?confirm=<token> in URL.
   Pending-State zeigt Text + Plotten-bestätigen-Button; nach POST oder bei
   used/expired nur Text. */

.pw-confirm-banner {
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: #F2C94C;
    border: 2px solid #1a1612;
    border-left-width: 6px;
    font-size: 1rem;
    line-height: 1.45;
    color: #1a1612;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    font-weight: 500;
    box-shadow: 0 2px 0 rgba(26, 22, 18, 0.15);
}

.pw-confirm-banner.is-error {
    background: #fdecea;
    border-color: #d64545;
    font-weight: 400;
}

.pw-confirm-banner-text {
    flex: 1 1 18ch;
}

.pw-confirm-banner-btn {
    flex: 0 0 auto;
    background: #1a1612;
    color: #fff;
    font-weight: 700;
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
}

.pw-confirm-banner-btn:hover:not(:disabled) {
    background: #000;
}

/* ─── Saved-Strip: Slot-Gruppen ──────────────────────────────────────────── */

.pw-saved-slot-group {
    margin-bottom: 1rem;
}

.pw-saved-slot-group:last-child {
    margin-bottom: 0;
}

.pw-saved-slot-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.6rem;
    margin-bottom: 0.35rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #1a1612;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pw-saved-slot-title {
    color: #1a1612;
    font-weight: 700;
}

.pw-saved-slot-status {
    color: #555;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 0.82rem;
}

.pw-saved-slot-group.is-past {
    opacity: 0.72;
}
.pw-saved-slot-group.is-past .pw-saved-slot-header {
    border-bottom-color: #ccc;
}
.pw-saved-slot-group.is-past .pw-saved-slot-status {
    color: #888;
}

.pw-saved-strip-row {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 0.3rem 0 0.6rem;
    scrollbar-width: thin;
}

/* ─── Tile-Wrapper mit Stern-Zeile ──────────────────────────────────────── */

.pw-saved-tile-wrap {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 92px;
}

/* Tile bleibt 86 px, Wrap ist etwas breiter, damit der zweizeilige Stern-Text
   („zum Plotten markiert/markieren") nicht zu eng wirkt. */
.pw-saved-tile-wrap .pw-saved-tile {
    width: 100%;
}

/* Stern als eigene volle Zeile unter dem Tile — kein Overlay mehr, damit das
   Variant-Label im Tile lesbar bleibt und das Tap-Target groß genug für
   Touch ist (~44 px hoch inkl. Padding). */
.pw-saved-tile-star {
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.5rem 0.4rem;
    border: 1px solid #aaa;
    background: #fafaf7;
    color: #666;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    line-height: 1.1;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
    min-height: 44px;
}

.pw-saved-tile-star-icon {
    font-size: 1rem;
    line-height: 1;
}

.pw-saved-tile-star-text {
    flex: 1 1 auto;
    text-align: left;
    /* zweizeilig erlaubt: „zum Plotten\nmarkiert/markieren" passt nicht
       einzeilig in die 92 px Tile-Breite. */
    white-space: normal;
    word-break: keep-all;
    hyphens: none;
}

.pw-saved-tile-star:hover {
    color: #1a1612;
    border-color: #1a1612;
}

.pw-saved-tile-star.is-active {
    background: #F2C94C;
    color: #1a1612;
    border-color: #1a1612;
    font-weight: 600;
}

.pw-saved-slot-group.is-past .pw-saved-tile-star {
    cursor: default;
    opacity: 0.6;
}

.pw-saved-slot-group.is-past .pw-saved-tile-star:hover {
    color: #666;
    border-color: #aaa;
}