/* ==========================================================================
   Ion optics workbench: presets.css
   Preset gallery (panels/presets.js) and coach marks (panels/guide.js).
   Every color comes from the site tokens (assets/css/site.css), so both
   follow the light and dark themes; electrode colors in the thumbnails
   come from the project.
   ========================================================================== */

/* ── Gallery dialog ─────────────────────────────────────────────────────── */
.io-gallery { width: min(1040px, calc(100vw - 32px)); }
.io-gallery .io-dialog-body { max-height: calc(100vh - 200px); padding-bottom: 1rem; }
.io-gallery-welcome { font-size: 0.95rem; color: var(--text); margin: 0 0 0.4rem; }
.io-gallery-intro { font-size: 0.84rem; color: var(--muted); margin: 0 0 0.75rem; }
.io-gallery-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.85rem; }
.io-gallery-chip { cursor: pointer; color: var(--text-2); }
.io-gallery-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.io-gallery-chip[aria-pressed="true"]:hover { color: var(--on-accent); }

.io-gallery-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr));
}
.io-gallery-item { display: flex; min-width: 0; }
.io-preset-card {
    display: flex; flex-direction: column; gap: 0.45rem; width: 100%; min-width: 0;
    font: inherit; text-align: left; color: var(--text); cursor: pointer;
    padding: 0.55rem 0.6rem 0.7rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.io-preset-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.io-preset-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.io-preset-current { border-color: var(--accent); background: var(--accent-soft); }
.io-preset-thumb {
    display: block; aspect-ratio: 2 / 1; width: 100%; overflow: hidden;
    background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.io-preset-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; }
.io-preset-title { font-weight: 650; font-size: 0.95rem; line-height: 1.3; }
.io-preset-badge { flex-shrink: 0; font-size: 0.68rem; }
.io-preset-desc { display: block; font-size: 0.8rem; line-height: 1.45; color: var(--text-2); }
.io-preset-meta { color: var(--muted); }
.io-preset-try { color: var(--text-2); }
.io-preset-try b { color: var(--text); font-weight: 600; }

.io-gallery-foot { justify-content: space-between; align-items: center; }
.io-gallery-tour { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--text-2); cursor: pointer; margin-right: auto; }
.io-gallery-tour input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ── Thumbnails (SVG from geometry outlines) ────────────────────────────── */
.io-thumb-svg { display: block; width: 100%; height: 100%; }
.io-thumb-frame { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
.io-thumb-axis { stroke: var(--muted); stroke-width: 0.8; stroke-dasharray: 6 3 1 3; }
.io-thumb-el { fill-opacity: 0.78; stroke-width: 0.8; stroke-linejoin: round; }
.io-thumb-void { fill: var(--surface); stroke: none; }
.io-thumb-line { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.io-thumb-mesh { stroke-dasharray: 3 2; }
.io-thumb-magnet { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 0.8; stroke-dasharray: 4 2; }
.io-thumb-plane { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 2; }
.io-thumb-detector { stroke: var(--text-2); stroke-dasharray: none; stroke-width: 1.4; }
.io-thumb-source { fill: var(--c5); stroke: var(--surface); stroke-width: 0.8; }
.io-thumb-source-line { stroke: var(--c5); stroke-width: 1.4; stroke-linecap: round; }

/* ── Coach marks ────────────────────────────────────────────────────────── */
/* above the sticky site header (z-index 100), so a card placed near the top is not hidden under it */
.io-coach {
    position: fixed; z-index: 110; left: 0; top: 0;
    width: min(330px, calc(100vw - 16px)); padding: 0.75rem 0.85rem 0.7rem;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border-strong); border-top: 3px solid var(--accent); border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.io-coach:focus { outline: none; }
.io-coach-top { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.74rem; color: var(--muted); margin-bottom: 0.25rem; }
.io-coach-name { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.io-coach-title { font-size: 1rem; margin: 0 0 0.3rem; }
.io-coach-text { font-size: 0.86rem; line-height: 1.5; color: var(--text-2); margin: 0 0 0.7rem; }
.io-coach-actions { display: flex; align-items: center; gap: 0.4rem; }
.io-coach-spacer { flex: 1 1 auto; }
.io-coach-end { padding-left: 0.4rem; padding-right: 0.4rem; }
.io-coach-arrow {
    position: absolute; width: 12px; height: 12px; background: var(--surface);
    border: 1px solid var(--border-strong); transform: rotate(45deg);
}
.io-coach[data-place="right"] .io-coach-arrow { left: -7px; margin-top: -6px; border-top-color: transparent; border-right-color: transparent; }
.io-coach[data-place="left"] .io-coach-arrow { right: -7px; left: auto; margin-top: -6px; border-bottom-color: transparent; border-left-color: transparent; }
.io-coach[data-place="bottom"] .io-coach-arrow { top: -9px; margin-left: -6px; border-right-color: transparent; border-bottom-color: transparent; background: var(--accent); border-color: var(--accent); }
.io-coach[data-place="top"] .io-coach-arrow { bottom: -7px; top: auto; margin-left: -6px; border-top-color: transparent; border-left-color: transparent; }
.io-coach-floating .io-coach-arrow, .io-coach[data-place="center"] .io-coach-arrow { display: none; }
.io-coach-ring {
    position: fixed; z-index: 109; pointer-events: none;
    border: 2px solid var(--accent); border-radius: 8px;
    box-shadow: 0 0 0 4px var(--accent-soft);
}
@media (prefers-reduced-motion: no-preference) {
    .io-coach-ring { animation: io-coach-pulse 1.6s ease-in-out infinite; }
}
@keyframes io-coach-pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--accent-soft); }
    50% { box-shadow: 0 0 0 9px var(--accent-soft); }
}

/* ── Phones and narrow windows ──────────────────────────────────────────── */
@media (max-width: 759.98px) {
    .io-gallery { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
    .io-gallery .io-dialog-body { max-height: calc(100dvh - 180px); }
    .io-gallery-grid { grid-template-columns: 1fr; gap: 0.55rem; }
    .io-preset-card {
        display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "thumb head" "thumb desc";
        column-gap: 0.65rem; row-gap: 0.2rem; align-items: start;
    }
    .io-preset-thumb { grid-area: thumb; width: 96px; }
    .io-preset-head { grid-area: head; min-width: 0; }
    .io-preset-desc { grid-area: desc; min-width: 0; }
    .io-gallery-foot { flex-direction: column; align-items: stretch; }
    .io-gallery-foot .btn { min-height: 40px; }
    .io-coach-actions .btn { min-height: 40px; }
}