/* ══ Wiggle Animator ═══════════════════════════════════════════════════════
   The console is the rail; the canvas is the artifact — what you see under
   the trim marks is exactly what the GIF or WebM will contain. style.css
   owns the reset, the chrome, the rail, the drop zone and the switch; this
   file is the example picker and the canvas.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Examples ──────────────────────────────────────────────────────────── */

.examples-toggle {
    display: block; width: 100%;
    margin-top: 1rem; padding: 0 0 .375rem;
    font-family: var(--cond); font-size: var(--fs-body); font-weight: 600;
    color: var(--ink); text-align: left;
    background: none; border: 0; border-bottom: 1px solid var(--rule);
    cursor: pointer;
}
.examples-toggle::after {
    content: '\2013';
    float: right; color: var(--ink-soft);
}
.examples-toggle.collapsed::after { content: '+'; }

#wiggler-examples { display: block; }
#wiggler-examples.collapsed { display: none; }

.examples-group { margin-top: .75rem; }
.examples-sublabel {
    font-size: var(--fs-note); color: var(--ink-soft);
    margin-bottom: .375rem;
}
.examples-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .375rem; }
.example-btn {
    aspect-ratio: 1;
    display: grid; place-items: center;
    padding: .25rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    cursor: pointer;
    transition: border-color .12s;
}
.example-btn:hover { border-color: var(--reg); }
.example-btn svg, .example-btn img { width: 100%; height: auto; }

/* ── Stroke override ───────────────────────────────────────────────────── */

/* JS flips this to `flex`, so the hidden state has to be the CSS default. */
.stroke-options { display: none; flex-direction: column; }

/* ── The canvas ────────────────────────────────────────────────────────
   The artifact is the canvas itself: the trim marks sit on exactly the
   rectangle the export will contain, so there is nothing to interpret. The
   bed carries a floor height because the script sizes the drawing from
   mainArea.clientHeight. */
#btnStop { display: none; }

#mainArea { min-height: 32rem; }

#canvas { display: block; max-width: 100%; height: auto; }

.wig-status {
    margin-top: 1.25rem;
    font-family: var(--mono); font-size: var(--fs-fine);
    color: var(--ink-soft); text-align: center;
}