/* Guided-lesson engine styles (shared, paired with lesson-engine.js).
   The one-step-at-a-time guided bar, its deep-tier (purple) variant, and the
   gen-chem/advanced level toggle. Lifted out of mo-theory/mo-theory.css so
   study-guide decks and other embedded widgets reuse the same look. Topic
   pages that use the engine link this alongside their own layout stylesheet. */

/* Guided step bar: docked under the deck, one step at a time; steps slide
   left as they complete. Auto steps advance from deck state; observation
   steps use the Got-it button. The original .try-this list is kept hidden
   behind the show-all toggle (and is the no-JS fallback). */
.guided-bar {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    border-left: 4px solid #22a06b;
    background: #f2faf6;
    padding: 0.55rem 0.9rem;
    margin: 0.4rem 0 1rem;
    border-radius: 0 8px 8px 0;
    min-height: 3.2rem;
}
.guided-bar.finished { border-left-color: #b9e6cf; background: #f6fbf8; }
.guided-dots { display: flex; flex-direction: column; gap: 4px; flex: none; }
.guided-dot {
    width: 9px; height: 9px; border-radius: 50%;
    border: 1.5px solid #22a06b; background: transparent;
    transition: background 0.25s;
}
.guided-dot.current { background: #d6f5e3; }
.guided-dot.done { background: #22a06b; }
.guided-viewport { overflow: hidden; flex: 1 1 auto; }
.guided-track {
    display: flex;
    transition: transform 0.35s ease;
}
.guided-step {
    flex: 0 0 100%;
    min-width: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    opacity: 0.95;
}
.guided-step.satisfied { color: #1a7a50; }
.guided-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.guided-next {
    font: inherit; font-size: 0.85rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid #b7c4bd; border-radius: 6px;
    background: #f4f6f5; color: #9aa8a0;
    cursor: not-allowed;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.guided-next.ready {
    border-color: #22a06b; background: #fff; color: #1a7a50;
    cursor: pointer;
    animation: guided-pop 0.3s ease;
}
.guided-next.ready:hover { background: #22a06b; color: #fff; }
@keyframes guided-pop {
    0% { transform: scale(0.92); }
    60% { transform: scale(1.06); }
    100% { transform: scale(1); }
}
.guided-back {
    font: inherit; font-size: 0.72rem;
    padding: 0.1rem 0.4rem;
    border: none; background: none;
    color: #7d9789; cursor: pointer;
}
.guided-back:hover { color: #1a7a50; text-decoration: underline; }
.guided-back:disabled { color: #c3cdc7; cursor: default; text-decoration: none; }
.guided-show-all { font-size: 0.72rem; color: #8aa; }
.guided-hidden { display: none; }

/* guided bar in deep mode goes purple */
.guided-bar.deeper-mode { border-left-color: #6153cc; background: #f5f3fc; }
.guided-bar.deeper-mode .guided-dot { border-color: #6153cc; }
.guided-bar.deeper-mode .guided-dot.current { background: #e2ddfa; }
.guided-bar.deeper-mode .guided-dot.done { background: #6153cc; }
.guided-bar.deeper-mode .guided-next.ready {
    border-color: #6153cc; color: #4f42b5;
}
.guided-bar.deeper-mode .guided-next.ready:hover { background: #6153cc; color: #fff; }
.guided-next.deeper.ready { border-color: #6153cc; color: #4f42b5; }
.guided-next.deeper.ready:hover { background: #6153cc; color: #fff; }

/* Gen-chem vs advanced level toggle (injected by the engine). Gen-chem hides
   the "Going deeper" tiers and any [data-level="advanced"] content. */
.level-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    margin: 0 0 1rem;
    font-size: 0.82rem;
}
.level-toggle-label { color: #8a8397; margin-right: 2px; }
.level-toggle button {
    border: 1px solid #d5d0e0;
    background: #f6f4fb;
    color: #6153cc;
    padding: 3px 12px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    line-height: 1.4;
}
.level-toggle button.on {
    background: #6153cc;
    color: #fff;
    border-color: #6153cc;
    cursor: default;
}
.level-toggle button:not(.on):hover { background: #ece8f7; }

.level-genchem [data-deeper],
.level-genchem [data-level="advanced"] { display: none !important; }