/* app.css — Plotter Garden toy-scoped styles. Self-sufficient: re-declares the
   four draw classes under .garden, the tool rail, species chips, responsive
   plate, the single border-beam primary button (with Firefox @supports
   fallback), reduced-motion, touch-action, toast, and light-theme flips. */
.garden { display: flex; flex-direction: column; gap: 1rem; }
.garden .pen   { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.garden .ink   { fill: currentColor; stroke: none; }
.garden .field { fill: var(--field, rgba(139,92,246,.16)); stroke: none; }
.garden .frame { fill: none; stroke: var(--grid, rgba(148,163,184,.3)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.garden .stamp { font: 600 11px var(--font-mono); letter-spacing: .08em; fill: currentColor; fill-opacity: .55; }

.garden__plate {
    display: block; width: 100%; height: auto;
    background-color: #0f172a;        /* fallback before JS paints the in-SVG paper */
    border-radius: var(--r-input);
    touch-action: none; cursor: crosshair;
    color: var(--accent);             /* per-palette ink set by JS (svg.style.color) */
}
.garden__live { margin: 0; font: 600 .8rem var(--font-mono); color: var(--text-muted); }

.garden__rail { display: flex; flex-wrap: wrap; gap: .5rem; }
.garden__btn {
    display: inline-flex; align-items: center; gap: .35rem;
    min-height: 44px; padding: .4rem .8rem;
    background: var(--surface-2); color: var(--text-main);
    border: 1px solid var(--border); border-radius: var(--r-pill);
    font: inherit; cursor: pointer;
}
.garden__btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.garden__btn span { font-size: .85rem; }

/* The SINGLE primary button carries the lone border-beam (one motion per view). */
@property --garden-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.garden__btn--primary { position: relative; color: #fff; background: color-mix(in srgb, var(--accent) 90%, #000); border: none; }
@supports (background: paint(something)) {
    .garden__btn--primary::before {
        content: ''; position: absolute; inset: -2px; border-radius: var(--r-pill); z-index: -1;
        background: conic-gradient(from var(--garden-angle), transparent 60%, var(--accent), transparent);
        animation: garden-beam 4s linear infinite;
    }
}
@keyframes garden-beam { to { --garden-angle: 360deg; } }
/* Firefox / no-@property: static accent border, CTA fully usable. */
@supports not (background: conic-gradient(from 0deg, red, red)) {
    .garden__btn--primary { outline: 2px solid var(--accent); outline-offset: 2px; }
}

.garden__species { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; -webkit-overflow-scrolling: touch; }
.garden__chip {
    flex: 0 0 auto; min-height: 38px; padding: .35rem .7rem;
    background: transparent; border: 1px solid var(--border); border-radius: var(--r-pill);
    color: var(--text-muted); font: 600 .8rem var(--font-mono); text-transform: capitalize; cursor: pointer; white-space: nowrap;
}
/* Active chip: darken the accent so #fff text clears WCAG AA (4.5:1) at .8rem,
   matching the primary button's treatment (#fff on raw #8b5cf6 is only ~4.2:1). */
.garden__chip.is-active { color: #fff; background: color-mix(in srgb, var(--accent) 88%, #000); border-color: color-mix(in srgb, var(--accent) 88%, #000); }

/* Row labels (Paleta / Espécie) */
.garden__ctrl-label { align-self: center; font: 600 .7rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-right: .25rem; }

/* Palette swatches — ink dot on its own paper, so each reads as a real scheme */
.garden__palette { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.garden__swatch {
    width: 30px; height: 30px; flex: 0 0 auto; padding: 0; border-radius: 50%; cursor: pointer;
    background: radial-gradient(circle at 50% 40%, var(--sw) 0 50%, var(--swp) 52%);
    border: 1px solid var(--border); transition: transform .15s var(--ease-std), box-shadow .15s var(--ease-std);
}
.garden__swatch:hover { transform: scale(1.12); }
.garden__swatch.is-active { border-color: var(--sw); box-shadow: 0 0 0 2px var(--sw); }

/* Style cycles — paper / symmetry / density (one tap advances the option) */
.garden__styles { display: flex; flex-wrap: wrap; gap: .45rem; }
.garden__cycle {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: .35rem .75rem;
    background: transparent; border: 1px solid var(--border); border-radius: var(--r-pill);
    color: var(--text-main); font: inherit; cursor: pointer;
}
.garden__cycle:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.garden__cycle i { color: var(--accent); }
.garden__cycle b { font: 600 .68rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.garden__cycle span { font-size: .85rem; }

/* Wind — a subtle, deterministic, ambient sway. Never under reduced motion
   (html.plot-anim is only added when motion is allowed). Pivots at the base. */
.garden__plant { transform-box: fill-box; transform-origin: bottom center; }
html.plot-anim .garden__plant {
    animation: garden-sway var(--sway-dur, 5s) var(--ease-std) var(--sway-delay, 0s) infinite alternate;
}
@keyframes garden-sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }

.garden__reduced { margin: 0; font-size: .85rem; color: var(--text-muted); }
.garden-nojs { display: block; width: 100%; height: auto; border-radius: var(--r-input); }
.garden-nojs__note { color: var(--text-muted); font-size: .9rem; }

.garden-intro { max-width: 1100px; margin: clamp(1.6rem, 5vw, 3rem) auto 0; padding: 0 1.2rem; }
.garden-intro__title { font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.8rem, 5vw, 3rem); margin: 0 0 .5rem; }
.garden-intro__lead { color: var(--text-muted); max-width: 60ch; margin: 0; }

.garden-toast {
    position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%) translateY(1rem);
    background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border);
    border-radius: var(--r-pill); padding: .6rem 1.1rem; box-shadow: var(--shadow-soft);
    font-size: .9rem; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-std), transform .25s var(--ease-std); z-index: 200;
}
.garden-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Wider plate on the toy page (generative art wants room). */
.interactive { max-width: min(100%, 1100px); }

@media (max-width: 560px) {
    .garden__rail { position: sticky; bottom: 0; background: var(--bg-card); padding: .5rem; margin: 0 -1rem -1rem; border-top: 1px solid var(--border); }
}
@media (prefers-reduced-motion: reduce) {
    .garden__btn--primary::before { animation: none; }
}