/*
 * Canonical selected-state treatment.
 *
 * This stylesheet intentionally loads after page-level styles. It normalizes
 * selection semantics without changing component structure or behavior:
 * navigation rows get a leading marker, tabs get an underline, and compact
 * segmented controls keep a low-radius inner surface. Choice cards, statuses,
 * checkboxes, and destructive actions remain owned by their feature styles.
 */

/* Navigation rows and options */
.prototype-user-menu__item,
.app-mobile-menu__item,
.course-outline__item,
.home-scene__tablet.is-workspace .home-scene__tablet-lesson-nav-item,
.development-direction-picker__menu button,
.practice-topic-filter,
.practice-filter-menu button,
.task-custom-select__option,
.study-calendar-schedule__select-menu button,
.vocabulary-page .vn,
.vocabulary-page .vn-system,
.vocabulary-page .voc-ref-chip,
.vocabulary-page .voc-ref-subitem,
.voc-dropdown-item,
.student-notes__tree-row,
.student-notes-review-link,
.settings-profile-nav__tabs button,
.cl-code-hints__item,
.lesson-tiptap-editor__floating-menu-item,
.lesson-tiptap-editor__slash-item,
.lesson-tiptap-editor__table-menu-item,
.lesson-tiptap-editor__block-menu-item,
.lesson-tiptap-editor__language-option {
    border-radius: var(--selection-row-radius);
}

.prototype-user-menu__item.is-active:not(.prototype-user-menu__mode) {
    --selection-accent: var(--app-topbar-blue);
    --selection-surface: color-mix(in srgb, var(--app-topbar-blue) 9%, var(--app-account-menu-surface));
}

.app-mobile-menu__item.is-active {
    --selection-accent: var(--app-topbar-blue);
    --selection-surface: color-mix(in srgb, var(--app-topbar-blue) 8%, var(--app-account-menu-surface));
}

.course-outline__item--active {
    --selection-accent: var(--course-outline-item-active-accent);
    --selection-surface: color-mix(in srgb, var(--course-outline-item-active-bg) 72%, transparent);
}

.home-scene__tablet.is-workspace .home-scene__tablet-lesson-nav-item[aria-current="page"] {
    --selection-accent: var(--tablet-outline-accent);
    --selection-surface: color-mix(in srgb, var(--tablet-outline-active-bg) 72%, transparent);
}

.development-direction-picker__menu button[aria-selected="true"] {
    --selection-accent: var(--development-accent-strong);
    --selection-surface: color-mix(in srgb, var(--development-accent-soft) 58%, var(--development-panel));
}

.practice-topic-filter.is-active,
.practice-filter-menu button.is-active {
    --selection-accent: var(--primary-2, var(--site-accent));
    --selection-surface: color-mix(in srgb, var(--primary-2, var(--site-accent)) 8%, var(--panel, var(--surface-1)));
}

.task-custom-select__option[aria-selected="true"] {
    --selection-accent: var(--site-accent);
    --selection-surface: var(--site-accent-soft);
}

.task-editor-list-item.is-current {
    --selection-accent: var(--task-link);
    --selection-surface: color-mix(in srgb, var(--task-blue-soft) 58%, var(--task-paper));
}

.study-calendar-schedule__select-menu button.is-selected {
    --selection-accent: var(--calendar-accent-strong);
    --selection-surface: color-mix(in srgb, var(--calendar-accent-soft) 72%, var(--calendar-paper));
}

.vocabulary-page .vn.active,
.vocabulary-page .vn-system.active,
.vocabulary-page .voc-ref-subitem.active,
.voc-dropdown-item.active {
    --selection-accent: var(--voc-blue, var(--site-accent));
    --selection-surface: color-mix(in srgb, var(--voc-blue, var(--site-accent)) 8%, var(--voc-paper-raised, var(--surface-1)));
}

.student-notes__document-row.is-selected,
.student-notes__notebook-row.is-selected:not(.is-drop-target),
.student-notes-review-link.is-active {
    --selection-accent: var(--notes-blue);
    --selection-surface: color-mix(in srgb, var(--notes-blue) 8%, var(--notes-control-bg, var(--surface-1)));
}

.cl-code-hints__item.is-active {
    --selection-accent: var(--site-accent, var(--focus));
}

.lesson-tiptap-editor__floating-menu-item.active,
.lesson-tiptap-editor__slash-item.is-active,
.lesson-tiptap-editor__table-menu-item.active:not(.lesson-tiptap-editor__table-menu-item--danger),
.lesson-tiptap-editor__block-menu-item.active,
.lesson-tiptap-editor__language-option.is-active {
    --selection-accent: var(--lesson-editor-menu-accent, #2563eb);
    --selection-surface: color-mix(in srgb, var(--selection-accent) 8%, var(--lesson-editor-menu-surface, var(--surface-1)));
}

.prototype-user-menu__item.is-active:not(.prototype-user-menu__mode),
.app-mobile-menu__item.is-active,
.course-outline__item--active,
.home-scene__tablet.is-workspace .home-scene__tablet-lesson-nav-item[aria-current="page"],
.development-direction-picker__menu button[aria-selected="true"],
.practice-topic-filter.is-active,
.practice-filter-menu button.is-active,
.task-custom-select__option[aria-selected="true"],
.task-editor-list-item.is-current,
.study-calendar-schedule__select-menu button.is-selected,
.vocabulary-page .vn.active,
.vocabulary-page .vn-system.active,
.vocabulary-page .voc-ref-subitem.active,
.voc-dropdown-item.active,
.student-notes__document-row.is-selected,
.student-notes__notebook-row.is-selected:not(.is-drop-target),
.student-notes-review-link.is-active,
.cl-code-hints__item.is-active,
.lesson-tiptap-editor__floating-menu-item.active,
.lesson-tiptap-editor__slash-item.is-active,
.lesson-tiptap-editor__table-menu-item.active:not(.lesson-tiptap-editor__table-menu-item--danger),
.lesson-tiptap-editor__block-menu-item.active,
.lesson-tiptap-editor__language-option.is-active {
    border-color: transparent;
    background: var(--selection-surface, var(--selection-row-surface));
    box-shadow: inset var(--selection-row-indicator-width) 0 0 var(--selection-accent, var(--focus));
}

/* Items that already use a structural left rule keep that rule as the marker. */
.student-notes__outline-link.is-active {
    border-left-color: var(--notes-library-blue);
    border-radius: 0;
    background: color-mix(in srgb, var(--notes-library-blue) 7%, transparent);
    box-shadow: none;
}

/* Profile navigation already owns an outside marker; keep it and flatten the row. */
.settings-profile-nav__tabs button.is-active,
.settings-profile-nav__tabs button[aria-selected="true"] {
    border-color: transparent;
    background: color-mix(in srgb, var(--settings-accent) 7%, var(--settings-paper));
    box-shadow: none;
}

/* Lesson task navigation is compact navigation, not a set of floating pills. */
.practice-taskbtn,
.lesson-practice-overview-editor__task-btn {
    border-radius: var(--selection-control-radius);
}

.practice-taskbtn--active,
.lesson-practice-overview-editor__task-btn.is-active {
    border-color: transparent;
    background: color-mix(in srgb, var(--practice-task-accent, var(--primary-2)) 8%, var(--panel-2, var(--surface-1)));
    box-shadow: inset var(--selection-row-indicator-width) 0 0 var(--practice-task-accent, var(--primary-2));
}

/* Tabs communicate location with an edge, not a raised rounded capsule. */
.app-topnav__link,
.collection-view-tab,
.collection-category,
.ng-skill-tabs button,
.practice-difficulty-tabs button,
.practice-status-tabs button {
    position: relative;
    border-radius: var(--selection-control-radius);
}

.app-topnav__link.is-active,
.collection-view-tab.is-active,
.collection-category.is-active,
.ng-skill-tabs button.is-active,
.practice-difficulty-tabs button.is-active,
.practice-status-tabs button.is-active {
    border-color: transparent;
    background: color-mix(in srgb, var(--selection-tab-accent, var(--site-accent, var(--focus))) 6%, transparent);
    box-shadow: inset 0 calc(-1 * var(--selection-tab-indicator-size)) 0 var(--selection-tab-accent, var(--site-accent, var(--focus)));
}

.app-topnav__link.is-active {
    --selection-tab-accent: var(--app-topbar-shell-gold);
    color: var(--app-topbar-shell-ink);
}

.collection-view-tab.is-active,
.collection-category.is-active,
.ng-skill-tabs button.is-active {
    --selection-tab-accent: var(--site-accent);
}

.practice-difficulty-tabs button.is-active {
    --selection-tab-accent: var(--primary-2, var(--site-accent));
}

.practice-status-tabs button.is-active {
    --selection-tab-accent: var(--practice-primary, var(--site-accent));
}

/* Compact filters and view modes may remain button-like, but not pill-like. */
.vs-btn,
.home-subcat-pill,
.task-direction-pill,
.practice-language-pill,
.view-toggle-btn,
.word-view-btn,
.img-picker-tab,
.voc-tab,
.vocabulary-page .voc-view-btn,
.vocabulary-page .voc-status-tab,
.train-mode-pill,
.train-dir-btn,
.profile-theme-toggle__btn,
.profile-choice-toggle__btn,
.study-calendar-schedule__time-column button {
    border-radius: var(--selection-control-radius);
}

.vs-btn.active,
.home-subcat-pill.active,
.task-direction-pill.is-active,
.practice-language-pill.is-active,
.view-toggle-btn.active,
.word-view-btn.active,
.img-picker-tab.active,
.voc-tab.active,
.vocabulary-page .voc-view-btn:is(.active, .is-active),
.vocabulary-page .voc-status-tab:is(.active, .is-active),
.train-mode-pill.active,
.train-dir-btn.active,
.profile-theme-toggle__btn.is-active,
.profile-choice-toggle__btn.is-active,
.study-calendar-schedule__time-column button.is-selected {
    border-color: var(--selection-control-border);
    box-shadow: inset 0 calc(-1 * var(--selection-tab-indicator-size)) 0 var(--selection-compact-accent, var(--site-accent, var(--focus)));
}

.home-subcat-pill.active {
    --selection-compact-accent: var(--subcat-pill-active-text, var(--site-accent));
}

.task-direction-pill.is-active,
.view-toggle-btn.active,
.word-view-btn.active,
.img-picker-tab.active,
.voc-tab.active,
.vocabulary-page .voc-view-btn:is(.active, .is-active),
.vocabulary-page .voc-status-tab:is(.active, .is-active),
.train-mode-pill.active,
.train-dir-btn.active {
    --selection-compact-accent: var(--voc-blue, var(--site-accent));
}

.practice-language-pill.is-active {
    --selection-compact-accent: var(--primary-2, var(--site-accent));
}

.study-calendar-schedule__time-column button.is-selected {
    --selection-compact-accent: var(--calendar-accent-strong);
}

/* Segmented controls remain grouped, but lose the nested bubble treatment. */
.prototype-user-menu__theme-options,
.course-mode-tabs,
.development-skills__switcher,
.study-calendar__view-switch,
.shop-tabs,
.shop-period-switch,
.admin-editor-modal__source-tabs,
.lesson-sections__segmented {
    border-radius: calc(var(--selection-control-radius) + 1px);
}

.prototype-user-menu__theme-btn,
.course-mode-tabs__btn,
.development-skills__switcher button,
.study-calendar__view-switch button,
.shop-tab,
.shop-period-switch button,
.admin-editor-modal__source-tab {
    border-radius: var(--selection-control-radius);
}

.prototype-user-menu__theme-btn.is-active,
.course-mode-tabs__btn.is-active,
.development-skills__switcher button[aria-selected="true"],
.study-calendar__view-switch button.is-active,
.shop-tab[aria-selected="true"],
.shop-period-switch button.is-active,
.admin-editor-modal__source-tab.is-active,
.lesson-sections__segmented-option.is-active {
    border-color: var(--selection-control-border);
    background: var(--selection-control-surface);
    box-shadow: inset 0 calc(-1 * var(--selection-tab-indicator-size)) 0 var(--selection-control-accent, var(--focus));
}

.prototype-user-menu__theme-btn.is-active {
    --selection-control-accent: var(--app-topbar-blue);
    --selection-control-surface: color-mix(in srgb, var(--app-topbar-blue) 9%, var(--app-account-menu-surface));
}

.course-mode-tabs__btn.is-active {
    --selection-control-accent: var(--course-blue);
    --selection-control-surface: color-mix(in srgb, var(--course-blue) 7%, transparent);
}

.development-skills__switcher button[aria-selected="true"] {
    --selection-control-accent: var(--development-accent-strong);
    --selection-control-surface: color-mix(in srgb, var(--development-accent-soft) 54%, var(--development-panel));
}

.study-calendar__view-switch button.is-active {
    --selection-control-accent: var(--calendar-accent);
    --selection-control-surface: color-mix(in srgb, var(--calendar-accent-soft) 68%, var(--calendar-panel));
}

.shop-tab[aria-selected="true"],
.shop-period-switch button.is-active {
    --selection-control-accent: var(--site-accent);
    --selection-control-surface: color-mix(in srgb, var(--site-accent) 8%, var(--shop-paper));
}

.admin-editor-modal__source-tab.is-active {
    --selection-control-accent: var(--admin-modal-accent);
    --selection-control-surface: color-mix(in srgb, var(--admin-modal-accent) 7%, var(--admin-modal-source-tabs));
}

.lesson-sections__segmented-option.is-active {
    --selection-control-accent: var(--primary-2);
    --selection-control-surface: color-mix(in srgb, var(--primary-2) 7%, var(--panel-2));
}

@media (max-width: 768px) {
    .prototype-user-menu__item,
    .app-mobile-menu__item,
    .course-outline__item,
    .home-scene__tablet.is-workspace .home-scene__tablet-lesson-nav-item {
        --selection-row-indicator-width: 3px;
        border-radius: var(--selection-row-radius);
    }
}