/* One set of surfaces and readable states for the learning app and administration. */
:root {
 --link-color:var(--brand-primary); --secondary-text:var(--brand-secondary); --on-secondary:#171d16;
 --danger-text:#ffb4a7; --focus-ring:var(--brand-primary);
 --control-border:color-mix(in srgb,var(--brand-muted) 60%,var(--panel));
 --surface-raised:color-mix(in srgb,var(--panel) 94%,var(--brand-text));
 --surface-hover:color-mix(in srgb,var(--brand-secondary) 9%,var(--panel));
 --shadow-card:0 5px 20px #00000012,inset 0 1px 0 #ffffff05;
 --shadow-float:0 18px 50px #00000030;
 --radius:18px; --radius-control:12px; --radius-compact:8px;
 color-scheme:dark;
}
body { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body.learning-app { font-size:15px; line-height:1.65; }
body.admin-app { font-size:15px; line-height:1.65; }
:is(h1,h2,h3) { text-wrap:balance; }
:is(p,li,dd,small) { overflow-wrap:break-word; }
:is(button,a,summary,input,textarea,select):focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]), textarea {
 background:var(--bg); color:var(--text); border:1px solid var(--control-border); border-radius:12px; caret-color:var(--text);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]):focus,textarea:focus { border-color:var(--focus-ring); }
input[type=checkbox],input[type=radio],input[type=range] { accent-color:var(--brand-secondary); }
button.nv-select-trigger { background:var(--panel); color:var(--text); border-color:var(--control-border); border-radius:12px; }
button.nv-select-trigger:hover:not(:disabled),.nv-select.is-open > button.nv-select-trigger { background:var(--surface-hover); border-color:var(--focus-ring); }
.nv-select-menu { background:var(--panel); color:var(--text); border:1px solid var(--control-border); padding:7px; border-radius:14px; box-shadow:var(--shadow-float); }
.nv-select-menu .nv-select-option { min-height:44px; color:var(--text); border-radius:9px; }
.nv-select-menu .nv-select-option[aria-selected=true] { background:var(--surface-hover); color:var(--text); }
.nv-select-menu .nv-select-option.is-active { background:var(--surface-hover) !important; color:var(--text) !important; border-color:var(--focus-ring) !important; }
.nv-select-check { color:var(--link-color); }
.btn,.a-btn { min-height:46px; border-radius:12px; font-weight:650; line-height:1.45; letter-spacing:.005em; }
.btn:not(.secondary),.a-btn.primary { background:var(--brand-primary); color:var(--on-primary); border-color:var(--brand-primary); box-shadow:0 4px 14px color-mix(in srgb,var(--brand-primary) 12%,transparent); }
.btn.secondary,.a-btn:not(.primary) { color:var(--text); background:var(--panel); border:1px solid var(--control-border); box-shadow:none; }
.btn.secondary:hover,.a-btn:not(.primary):hover { color:var(--text); background:var(--surface-hover); border-color:var(--brand-secondary); }
.btn:not(.secondary):hover,.a-btn.primary:hover { background:color-mix(in srgb,var(--brand-primary) 88%,#fff); color:var(--on-primary); }
.textlink,.eyebrow,.a-eyebrow { color:var(--link-color); }
.filters button { font-weight:550; min-height:44px; border-radius:11px; }
.filters .filter.active,.filters button[aria-pressed=true] { color:var(--on-secondary); background:var(--brand-secondary); border-color:var(--brand-secondary); }
.learning-app #main { padding-top:38px; padding-bottom:54px; }
.learning-app .page-heading { margin-bottom:30px; }
.learning-app .page-heading h1 { font-size:clamp(1.95rem,3vw,2.7rem); letter-spacing:-.045em; line-height:1.18; }
.learning-app .page-heading p { color:var(--muted); font-size:.96rem; line-height:1.75; max-width:65ch; }
.learning-app .eyebrow { font-size:.7rem; font-weight:650; letter-spacing:.12em; }
:is(.home-next,.home-subject,.library-card,.library-search,.panel,.course-card,.move-card,.stat,.event-card,.howcast-stage,.howcast-notes,.study-stage,.word-card) { box-shadow:var(--shadow-card); }
.home-next { padding:clamp(24px,3.2vw,40px); border-color:color-mix(in srgb,var(--brand-secondary) 45%,var(--panel)); border-radius:22px; }
.home-next h2 { font-size:clamp(1.55rem,2.5vw,2.2rem); line-height:1.25; }
.home-subject,.library-card { border-radius:17px; border-color:var(--line); }
.home-subject:hover,.library-card:hover { border-color:var(--brand-secondary); background:var(--surface-hover); }
.home-subject strong,.library-card strong { font-size:1rem; letter-spacing:-.01em; }
.home-subject small,.library-card small { color:var(--muted); font-size:.81rem; line-height:1.65; }
.library-icon,.home-subject-icon { border:1px solid color-mix(in srgb,var(--brand-secondary) 20%,var(--panel)); }
.learning-app #topbar { background:var(--bg); border-bottom-color:var(--line); min-height:72px; }
.top-search,.top-account { border-color:var(--line); border-radius:12px; }
#sidebar .nv-navigation { gap:7px; }
#sidebar .nv-navigation a { min-height:47px; border-radius:12px; font-weight:500; }
#sidebar .nv-navigation a.active { color:var(--text); border-color:color-mix(in srgb,var(--brand-secondary) 60%,var(--bg)); }
.context-nav { gap:8px; padding-bottom:18px; margin-bottom:28px; }
.context-nav > a,.context-more > summary { border-radius:11px; font-size:.83rem; }
.context-nav a.active,.context-nav a[aria-current] { color:var(--text); background:var(--surface-hover); border-color:var(--brand-secondary); }
.mobile-bottom-nav { box-shadow:0 10px 34px #0004,inset 0 1px 0 #ffffff05; }
.mobile-bottom-nav a.active { color:var(--link-color); }
.browse-more p,.word-card small,.media-help,.song-index,.source-note,.notice,.rhythm-footnote,.music-footnote,.recording-video-storage,.recording-empty,.study-storage,.word-selection-note { color:var(--muted); }
.word-card small { font-size:.79rem; line-height:1.65; }
.word-card { border-radius:15px; padding:20px; }
.word-card h3 { font-size:1.05rem; }
:is(.source-note,.notice,.rhythm-footnote,.music-footnote,.media-help) { font-size:.78rem; line-height:1.75; }
.event-art > span { color:var(--secondary-text); opacity:1; font-size:.64rem; letter-spacing:.1em; }
.event-kind,.tag { line-height:1.5; }
.event-card { border-radius:20px; overflow:hidden; }
.event-card-body { padding:24px; }
.event-card h2 { font-size:1.2rem; line-height:1.45; }
.event-dialog,.learning-app #lesson-dialog { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-float); }
.event-dialog dt,.event-calendar-note { color:var(--muted); }
.close-btn { background:var(--surface-raised); border:1px solid var(--control-border); color:var(--text); border-radius:12px; min-width:44px; min-height:44px; }
/* Admin is a workspace in the same material and color system. */
.admin-app a { color:var(--link-color); }
.admin-app p { color:var(--muted); }
.admin-app h1 { font-size:clamp(1.9rem,3.2vw,2.8rem); line-height:1.17; letter-spacing:-.045em; margin:10px 0 16px; }
.admin-app h2 { font-size:1.4rem; line-height:1.35; }
.admin-app h3 { line-height:1.4; }
.admin-layout { grid-template-columns:240px minmax(0,1fr); }
.admin-sidebar { padding:30px 18px 22px; border-right:1px solid var(--line); }
.admin-brand { color:var(--text) !important; font-weight:650; }
.admin-brand small,.admin-account small,.admin-sidebar-foot,.admin-sidebar-foot a,.nav-caption { color:var(--muted); }
.admin-sidebar nav { gap:6px; }
.admin-sidebar nav button { min-height:47px; padding:12px 14px; border:1px solid transparent; border-radius:12px; color:var(--muted); font-size:.87rem; font-weight:500; }
.admin-sidebar nav button:hover { background:var(--surface-hover); color:var(--text); }
.admin-sidebar nav button[aria-current] { color:var(--text); border-color:color-mix(in srgb,var(--brand-secondary) 50%,var(--panel)); background:var(--surface-hover); box-shadow:inset 3px 0 var(--brand-primary); }
.admin-topbar { min-height:84px; padding:18px 36px; border-bottom-color:var(--line); background:var(--bg); }
.admin-topbar strong { font-size:.94rem; }
.admin-actions { gap:10px; }
.admin-actions [data-save-status] { color:var(--muted); font-size:.76rem; }
#admin-main { padding:40px 36px 60px; max-width:1500px; }
.admin-intro { margin-bottom:30px; }
.admin-intro > p { color:var(--muted); font-size:.96rem; line-height:1.75; max-width:65ch; }
.admin-app .a-eyebrow { font-size:.69rem; font-weight:700; letter-spacing:.12em; }
.admin-layout .overview-cards { gap:18px; }
:is(.overview-card,.settings-card,.settings-grid > section,.content-editor,.catalog-sidebar,.features-grid article,.admin-learning-overview) { border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:var(--shadow-card); }
.admin-layout .overview-card { padding:27px; color:var(--text); }
.admin-layout .overview-card:hover { background:var(--surface-hover); border-color:var(--brand-secondary); }
.overview-card h3 { font-size:1.12rem; margin:20px 0 10px; }
.overview-card p { font-size:.86rem; line-height:1.7; min-height:46px; }
.overview-card strong { color:var(--link-color); font-size:.8rem; }
.overview-symbol { background:color-mix(in srgb,var(--brand-primary) 11%,var(--panel)); color:var(--link-color); width:46px; height:46px; border-radius:14px; border:1px solid color-mix(in srgb,var(--brand-primary) 20%,var(--panel)); }
.pill { color:var(--link-color); background:color-mix(in srgb,var(--brand-primary) 8%,var(--panel)); border-color:var(--line); font-size:.73rem; font-weight:550; }
.workflow,.workflow i,.workflow b { color:var(--muted); }
.workflow { font-size:.8rem; gap:22px; }
.workflow b { font-size:.7rem; border-color:var(--control-border); width:28px; height:28px; }
.catalog-layout { grid-template-columns:290px minmax(0,1fr); gap:24px; }
.catalog-sidebar { top:108px; }
.content-editor { padding:30px; }
.catalog-tools { padding:22px 20px 4px; border-bottom-color:var(--line); }
.admin-layout .catalog-results > button { padding:16px 18px; border:0; border-bottom:1px solid var(--line); border-radius:0; }
.admin-layout .catalog-results strong { font-size:.83rem; line-height:1.6; }
.admin-layout .catalog-results small { font-size:.75rem; line-height:1.55; color:var(--muted); }
.admin-layout .catalog-results > button[aria-pressed=true] { background:var(--surface-hover); box-shadow:inset 3px 0 var(--brand-primary); }
.catalog-results img { width:58px; height:44px; border-radius:9px; }
.editor-field { margin-bottom:22px; }
.editor-field > span,.field-title { font-size:.86rem; font-weight:600; margin-bottom:9px; }
.editor-field input,.editor-field textarea,.editor-field select { font-size:.9rem; line-height:1.65; min-height:46px; padding:12px 14px; border-color:var(--control-border); }
.editor-field textarea { min-height:110px; }
.editor-field small,.editor-hint,.toggle-row small,.preview-note,.auth-help { color:var(--muted); font-size:.79rem; line-height:1.7; }
.editor-title .a-btn { font-size:.78rem; }
.toggle-row strong { color:var(--text); font-size:.9rem; line-height:1.5; }
.switch-track { background:var(--control-border); border:1px solid var(--control-border); }
.toggle-row input:checked + .switch-track { background:var(--brand-secondary); border-color:var(--brand-secondary); }
.toggle-row input:checked + .switch-track::before { background:var(--on-secondary); }
.toggle-row input:focus-visible + .switch-track { outline-color:var(--focus-ring); }
.admin-app .a-btn { font-size:.82rem; padding:11px 17px; }
.admin-app .a-btn:not(.primary) { background:var(--panel); color:var(--text); border-color:var(--control-border); }
.admin-app .a-btn.quiet { background:transparent; border-color:transparent; }
.admin-app .a-btn.danger { color:var(--danger-text); }
.admin-app .a-btn.add { color:var(--secondary-text); border-color:var(--control-border); }
.admin-app .a-btn:disabled { opacity:1; color:var(--muted); background:var(--bg); border-color:var(--line); box-shadow:none; }
.admin-app .form-error,.admin-app [data-modal-error] { color:var(--danger-text); }
.auth-card { padding:42px; background:var(--panel); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-float); }
.auth-story { background:var(--bg); }
.auth-story p,.auth-foot,.auth-help { color:var(--muted); }
.auth-card > p { font-size:.9rem; line-height:1.75; }
.auth-back { color:var(--link-color); font-size:.84rem; }
.auth-lock { color:var(--secondary-text); }
.auth-submit { padding:14px 18px; }
.admin-app dialog { background:var(--panel); color:var(--text); border:1px solid var(--control-border); border-radius:20px; box-shadow:var(--shadow-float); }
.admin-app dialog::backdrop { background:#080d0abf; backdrop-filter:blur(6px); }
.admin-app dialog > header { padding:24px 28px; border-color:var(--line); }
.admin-app dialog .modal-body { padding:26px 28px; }
.admin-app dialog > footer { background:var(--bg); border-color:var(--line); padding:20px 28px; }
.admin-app dialog .a-btn:not(.primary) { background:var(--panel); color:var(--text); border-color:var(--control-border); }
.admin-app dialog a { color:var(--link-color); }
.admin-app dialog p { font-size:.9rem; line-height:1.75; color:var(--muted); }
.admin-app .publish-summary { border-color:var(--line); border-radius:12px; }
.admin-app .publish-summary li { border-color:var(--line); font-size:.85rem; }
.admin-app .admin-status { color:var(--text); background:var(--panel); border:1px solid var(--brand-secondary); box-shadow:var(--shadow-float); border-radius:14px; font-size:.87rem; }
.admin-app .admin-status.error { color:var(--danger-text); border-color:var(--danger-text); }
.admin-app .admin-event-warning { color:var(--text); background:color-mix(in srgb,var(--brand-primary) 6%,var(--panel)); }
.admin-app .history-row { font-size:.82rem; padding:12px 0; }
@media(max-width:1100px) {
 .auth-card { max-width:420px; padding:32px; }
 .admin-topbar { padding:18px 24px; }
 .admin-actions { flex-wrap:wrap; justify-content:flex-end; }
}
@media(max-width:960px) {
 .admin-layout { grid-template-columns:minmax(0,1fr); }
 .admin-sidebar { padding:20px 24px; border-right:0; border-bottom:1px solid var(--line); }
 .admin-sidebar nav { gap:7px; }
 .admin-sidebar nav button { padding:10px; font-size:.8rem; }
 .catalog-layout { grid-template-columns:minmax(0,1fr); }
 .catalog-sidebar { position:static; }
 #admin-main { padding:30px 24px 45px; }
 .learning-app #topbar { min-height:64px; }
 html { scroll-padding-bottom:110px; }
 [data-browse-window] > * { scroll-margin-bottom:110px; }
}
@media(max-width:640px) {
 .learning-app #main { padding:28px 18px 40px; }
 .learning-app .page-heading { margin-bottom:24px; }
 .learning-app .page-heading h1 { font-size:2rem; }
 .learning-app .page-heading p { font-size:.92rem; }
 .home-next { border-radius:20px; padding:24px 20px; }
 .home-next h2 { font-size:1.65rem; }
 .home-subject { padding:18px 16px; }
 .home-subject strong { font-size:.97rem; }
 .home-subject small { font-size:.8rem; }
 .context-nav { gap:6px; }
 .context-nav > a { font-size:.8rem; }
 .event-card-body { padding:21px; }
 .event-card h2 { font-size:1.15rem; }
 .howcast-card-copy strong { font-size:.85rem; }
 .howcast-card-copy small,.howcast-card-copy > span { font-size:.69rem; }
 .word-card { padding:18px; }
 .admin-topbar { padding:18px; gap:16px; align-items:flex-start; }
 .admin-topbar > div:first-child { min-width:0; }
 .admin-actions { gap:8px; }
 .admin-actions .a-btn { min-height:44px; padding:10px 12px; font-size:.76rem; }
 .admin-sidebar { padding:20px 18px 16px; }
 .admin-sidebar nav button { min-height:46px; font-size:.77rem; }
 #admin-main { padding:28px 18px 42px; }
 .admin-layout .overview-cards { grid-template-columns:minmax(0,1fr); gap:14px; }
 .admin-layout .overview-card { padding:22px; }
 .overview-card h3 { margin-top:0; }
 .overview-card p { min-height:0; font-size:.86rem; }
 .content-editor { padding:22px 18px; }
 .editor-title { align-items:flex-start; flex-wrap:wrap; }
 .editor-title .a-btn { white-space:normal; }
 .auth-shell { padding:0 16px 30px; }
 .auth-story { padding:22px 8px; }
 .auth-card { padding:28px 22px; max-width:440px; border-radius:20px; }
 .admin-app dialog > header,.admin-app dialog .modal-body,.admin-app dialog > footer { padding:20px; }
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { scroll-behavior:auto !important; }
}
/* Final contrast fixes for inherited captions, numbered steps and the keyboard skip link. */
.learning-app .media-section .media-help { color:var(--muted); }
.instrument-tabs { background:var(--bg); }
.instrument-tabs button > span { opacity:1; color:var(--muted); }
.instrument-tabs button[aria-pressed=true] > span { color:var(--secondary-text); }
.admin-app .admin-skip { color:var(--text); background:var(--panel); border:1px solid var(--control-border); border-radius:12px; }
.btn:not(.secondary):hover,.a-btn.primary:hover { background:var(--brand-primary); color:var(--on-primary); }

.learning-app .chapter-number { color:color-mix(in srgb,var(--muted) 80%,transparent); }