/* "Make it yours" (/learn/start). Bootstrap variables only, so dark mode follows the theme. */
.mio { max-width: 52rem; }
.mio-privacy { display: inline-block; padding: .4rem .75rem; border-radius: .5rem; background: var(--bs-success-bg-subtle, #e6f4eb); color: var(--bs-success-text-emphasis, #125833); font-weight: 600; }
.mio-card { padding: clamp(1rem, 3vw, 1.75rem); margin-bottom: 2rem; border: 1px solid var(--bs-border-color, #ddd); border-radius: 1rem; background: var(--bs-body-bg); }
.mio-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.mio-step legend, .mio-step h2 { margin-bottom: .75rem; }
.mio-step [data-mio-focus]:focus { outline: none; }
.mio-step [data-mio-focus]:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.mio-count { font-size: .9rem; color: var(--bs-secondary-color, #61676c); }
.mio-dots { display: flex; gap: .4rem; margin-bottom: 1rem; }
.mio-dots span { flex: 1; height: .35rem; border-radius: 1rem; background: var(--bs-tertiary-bg, #e9ecef); }
.mio-dots span.is-on { background: var(--bs-success, #198754); }
.mio-options { display: grid; gap: .6rem; }
@media (min-width: 576px) { .mio-options { grid-template-columns: 1fr 1fr; } }
.mio-option, .mio-game { display: flex; gap: .65rem; align-items: flex-start; margin: 0; padding: .8rem .9rem; border: 1px solid var(--bs-border-color, #ddd); border-radius: .75rem; cursor: pointer; min-height: 44px; }
.mio-option input, .mio-game input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--bs-success, #198754); }
.mio-option:hover, .mio-game:hover { border-color: var(--bs-success, #198754); }
.mio-option:has(input:checked), .mio-game:has(input:checked) { border-color: var(--bs-success, #198754); background: var(--bs-success-bg-subtle, #e6f4eb); }
.mio-option:has(input:focus-visible), .mio-game:has(input:focus-visible) { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.mio-option-body, .mio-game-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.mio-option-body > span, .mio-game-blurb { font-size: .875rem; color: var(--bs-secondary-color, #61676c); }
.mio-games { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.mio-game { padding: .65rem .75rem; }
.mio-game-blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mio-more { margin-top: 1rem; }
.mio-more > summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; }
.mio-note { margin: .75rem 0 0; font-size: .9rem; }
.mio-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; align-items: center; margin-top: 1.25rem; }
.mio-actions .btn { min-height: 44px; }
.mio-actions-start { justify-content: flex-start; }
.mio-summary { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin-bottom: 1rem; }
.mio-summary dt { font-weight: 600; }
.mio-summary dd { margin: 0; }
@media (max-width: 575.98px) { .mio-summary { grid-template-columns: 1fr; } .mio-summary dd { margin-bottom: .4rem; } }
.mio-path { padding: .75rem 1rem; border-radius: .5rem; background: var(--bs-tertiary-bg, #f3f5f7); }
.mio-path:empty { display: none; }