/* chair-inversion: lesson widget (usually shown inside a study-guide iframe) */

body {
    margin: 0;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: #fff;
    color: #333;
}

.inversion-widget {
    max-width: 420px;
    margin: 0 auto;
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.widget-title {
    font-size: 1rem;
    font-weight: 650;
    color: #4f42b5;
    margin: 4px 0 0;
}

/* In embed mode the surrounding guide provides all framing text. */
html.embed-mode .widget-title { display: none; }

.panel {
    position: relative;
    border-radius: 8px;
}

#ring-svg {
    display: block;
    width: 370px;
    max-width: 100%;
    height: auto;
}

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

.legend {
    display: flex;
    gap: 16px;
    justify-content: center;
    font-size: 0.78rem;
    color: #555;
}

.legend-item { display: inline-flex; align-items: center; gap: 5px; }

.swatch {
    display: inline-block;
    width: 14px;
    height: 3px;
    border-radius: 2px;
}
.swatch.set-ax { background: #d55e00; }
.swatch.set-eq { background: #0072b2; }
.swatch.hl { background: #ffd200; height: 7px; }

.scrub-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 370px;
    padding: 2px 4px;
    border-radius: 8px;
}

.scrub-label {
    font-size: 0.72rem;
    color: #777;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

#scrub {
    flex: 1;
    accent-color: #4f42b5;
    cursor: grab;
}
#scrub:active { cursor: grabbing; }

/* Conformation name + energy, shown as a title above the structure. */
.readout {
    margin: 0;
    min-height: 1.4em;
    font-size: 0.95rem;
    font-weight: 650;
    color: #4f42b5;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

#ring-svg {
    cursor: grab;
    touch-action: none;   /* horizontal drag scrubs the flip; don't pan the page */
}
#ring-svg.grabbing { cursor: grabbing; }

/* Pulsing "drag me" ring around the CH3 badge until the first interaction. */
.hint-ring {
    animation: chair-hint 1.6s ease-in-out infinite;
}
@keyframes chair-hint {
    0%, 100% { opacity: 0.15; }
    50%      { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
    .hint-ring { animation: none; opacity: 0.5; }
}

/* Spotlight glow driven by lessonSpot messages (static — no animation). */
.lesson-glow {
    box-shadow: 0 0 0 2px rgba(97, 84, 204, 0.45), 0 0 14px rgba(97, 84, 204, 0.35);
}