/* Canonical HSK controls. Match AppTheme.hsk* and the extension HSK badge. */
:root {
    --crp-hsk-purple: #6d28d9;
    --crp-hsk-tint: #faf5ff;
    --crp-hsk-border: #ddd6fe;
    --crp-hsk-radius: 999px;
}
html[data-theme="dark"] {
    --crp-hsk-tint: #260f3d;
    --crp-hsk-border: #6d4e9b;
}
.crp-level-picker { margin: 0 0 28px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.crp-level-picker-label { margin: 0 0 12px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--theme-text, #111827); }
.crp-level-options { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* Compact visual pills retain a 44px tap target. */
.crp-level-options .crp-level-choice {
    box-sizing: border-box; position: relative; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 52px; min-height: 44px; padding: 0 7px;
    border: 0; border-radius: var(--crp-hsk-radius);
    background: transparent; color: var(--theme-fg-purple, var(--crp-hsk-purple));
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px; line-height: 18px; font-weight: 600;
    white-space: nowrap; cursor: pointer; box-shadow: none;
}
.crp-level-options .crp-level-choice::before {
    content: ""; position: absolute; z-index: -1; inset: 7px 0;
    border: 1px solid var(--crp-hsk-border); border-radius: var(--crp-hsk-radius);
    background: var(--crp-hsk-tint);
}
.crp-level-options .crp-level-choice[aria-pressed="true"] { color: #fff; }
.crp-level-options .crp-level-choice[aria-pressed="true"]::before {
    background: var(--crp-hsk-purple); border-color: var(--crp-hsk-purple);
}
.crp-level-choice:focus-visible { outline: 3px solid #8b5cf6; outline-offset: 3px; }
:is(.news-hsk, .hsk-reading-level-badge, .story-reader-tooltip-hsk) {
    box-sizing: border-box; display: inline-flex; align-items: center; align-self: flex-start;
    width: fit-content; padding: 4px 8px; min-height: 0; margin: 0;
    border: 1px solid var(--crp-hsk-border); border-radius: var(--crp-hsk-radius);
    background: var(--crp-hsk-tint); color: var(--theme-fg-purple, var(--crp-hsk-purple));
    font-size: 11px; line-height: 16px; font-weight: 900; text-transform: uppercase;
}
.hsk-reading-level-card[hidden] { display: none; }

.story-reader-tooltip-hsk { margin-top: 8px; }

/* Fit All and HSK 1–6 on one row on phone-sized screens. */
@media (max-width: 600px) {
    .crp-level-options .crp-level-choice {
        min-width: 44px; padding: 0 3px; font-size: 11px;
    }
}

/* Keep the same compact reading navigation on phone-sized screens. */
@media(max-width:900px){body:is([data-learning-page="read"], [data-learning-page="story-reader"], [data-learning-page="news"]) .learning-nav-column{position:static;min-width:0;margin-bottom:18px}body:is([data-learning-page="read"], [data-learning-page="story-reader"], [data-learning-page="news"]) .learning-rail{display:flex;flex-direction:row;gap:8px;overflow-x:auto;overflow-y:hidden;max-height:none;padding:8px;scrollbar-width:thin}body:is([data-learning-page="read"], [data-learning-page="story-reader"], [data-learning-page="news"]) .learning-nav-link{flex:0 0 auto;margin:0;padding:8px 12px;min-height:44px;gap:8px}body:is([data-learning-page="read"], [data-learning-page="story-reader"], [data-learning-page="news"]) .learning-nav-icon{width:28px;height:28px;min-width:28px;font-size:16px}body:is([data-learning-page="read"], [data-learning-page="story-reader"], [data-learning-page="news"]) .learning-nav-icon::before{width:28px;height:28px}body:is([data-learning-page="read"], [data-learning-page="story-reader"], [data-learning-page="news"]) .learning-nav-label{font-size:11px}body:is([data-learning-page="read"], [data-learning-page="story-reader"], [data-learning-page="news"]) .learning-page-main{gap:0}}