/* Learning path: each unit is a collapsible card. Tap the card to reveal its lesson tree. */
.unit-card { --u-green: #16A34A; padding: 0; overflow: hidden; margin-bottom: 14px; border-width: 2px; transition: border-color .2s, box-shadow .2s, background .2s; }
html[data-theme="dark"] .unit-card { --u-green: #34D57A; }
.unit-card-head { cursor: pointer; margin: 0 !important; padding: 16px 18px !important; border-bottom: 0 !important; gap: 12px; -webkit-tap-highlight-color: transparent; user-select: none; }
.unit-card-head:hover { background: var(--accent-indigo-bg, rgba(91, 76, 240, .06)); }
.unit-card-head:focus-visible { outline: 3px solid var(--accent-gold, #E08A00); outline-offset: -3px; border-radius: 22px; }
.unit-card-text { min-width: 0; flex: 1; }
.unit-card .unit-label-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.unit-now-tag { padding: 2px 9px; border-radius: 99px; background: var(--accent-gold-bg, rgba(255, 197, 49, .2)); color: var(--accent-gold, #E08A00); font-size: 10.5px; font-weight: 800; }
.unit-mini-bar { height: 6px; margin-top: 8px; border-radius: 99px; background: var(--border-subtle, rgba(127, 127, 127, .2)); overflow: hidden; max-width: 260px; }
.unit-mini-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent-indigo, #5B4CF0); transition: width .4s; }
.unit-card-side { display: flex; align-items: center; gap: 10px; flex: none; }
.unit-chevron { color: var(--text-muted); transition: transform .25s; flex: none; }
.unit-card.open .unit-chevron { transform: rotate(180deg); }

/* Body: hidden until the card is opened */
.unit-body { display: none; padding: 4px 18px 8px; border-top: 1px solid var(--border-subtle); }
.unit-card.open .unit-body { display: block; animation: unitReveal .25s ease-out; }
@keyframes unitReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.unit-card .unit-tree-path { padding-top: 22px; }

/* Current unit */
html .unit-card.current { border-color: var(--accent-indigo, #5B4CF0) !important; box-shadow: 0 4px 0 var(--accent-indigo-border, rgba(91, 76, 240, .35)), 0 8px 22px rgba(91, 76, 240, .14) !important; }

/* Completed unit: green card with a check mark */
html .unit-card.complete { border-color: var(--u-green) !important; background: color-mix(in srgb, var(--u-green) 9%, var(--bg-surface)); box-shadow: 0 4px 0 color-mix(in srgb, var(--u-green) 45%, transparent) !important; }
.unit-card.complete .unit-card-head:hover { background: color-mix(in srgb, var(--u-green) 12%, transparent); }
.unit-card.complete .unit-icon-orb { background: var(--u-green) !important; color: #fff !important; border-color: var(--u-green) !important; font-weight: 800; }
.unit-card.complete .unit-badge-pill { background: var(--u-green); color: #fff; border: 0; }
.unit-card.complete .unit-mini-bar i { background: var(--u-green); }
.unit-card.complete .unit-body { border-top-color: color-mix(in srgb, var(--u-green) 30%, transparent); }

@media (prefers-reduced-motion: reduce) { .unit-card.open .unit-body { animation: none; } .unit-chevron, .unit-mini-bar i { transition: none; } }