/* Navigation, contrast and a learning round that fits the available screen. */
:root{--muted:#536151;--control-border:#798674;--nav-fg:#425441;--nav-active-bg:#344d39;--nav-active-fg:#fffefa;--focus:#936300}
html[data-theme=dark]{--bg:#111913;--paper:#1b251f;--ink:#f0f3e9;--muted:#c1ccbb;--green:#3b6248;--line:#526451;--pale:#263b2d;--control-border:#8b9d83;--nav-fg:#d4decd;--nav-active-bg:#375d42;--nav-active-fg:#fffefa;--focus:#e9c06c}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.pill{color:var(--ink)}html[data-theme=dark] .pill{color:var(--ink)}
.nav-item{color:var(--nav-fg);font-size:14px}.nav-item.active{background:var(--nav-active-bg);color:var(--nav-active-fg)}
html[data-theme=dark] .nav-item{color:var(--nav-fg)}html[data-theme=dark] .nav-item.active{background:var(--nav-active-bg);color:var(--nav-active-fg)}
.nav-item svg{stroke-width:1.8}.eyebrow{color:var(--muted)}.chip{color:var(--ink);font-size:11px}.help,small{color:var(--muted)}
.button.secondary,.icon-button,input,select,textarea,.locale-picker summary,.study-options summary{border-color:var(--control-border)}
html[data-theme=dark] :is(input,select,textarea,.button.secondary,.icon-button,.language-filter button.active){border-color:var(--control-border)}
button:disabled{opacity:1;cursor:not-allowed}.button:disabled{background:var(--pale);color:var(--muted);border-color:var(--line)}
.theme-switcher{display:inline-flex;gap:2px;padding:2px;flex:none;border:1px solid var(--control-border);background:var(--paper);border-radius:12px}
.theme-switcher button{display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;background:transparent;color:var(--ink);border:2px solid transparent;border-radius:9px;cursor:pointer}
.theme-switcher svg{width:21px;height:21px}.theme-switcher button[aria-pressed=true]{background:var(--nav-active-bg);color:var(--nav-active-fg);border-color:var(--nav-active-bg)}
.theme-switcher button:hover{outline:1px solid var(--control-border);outline-offset:-3px}.theme-switcher button[aria-pressed=true]:hover{outline-color:var(--nav-active-fg)}
.theme-switcher button:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.public-header{display:grid;grid-template-columns:1fr auto auto auto auto;align-items:center;gap:18px;height:auto;min-height:90px;padding-block:16px}
.public-header .brand{grid-column:1;grid-row:1}.public-header nav{grid-column:2;grid-row:1;width:auto;order:0;margin:0;display:flex;gap:20px}
.public-header .locale-picker{grid-column:3;grid-row:1;margin:0;font-size:12px}.public-header .locale-picker summary{border-radius:10px;padding:9px;min-height:44px}
.public-header .public-account-link{grid-column:4;grid-row:1;padding:10px 13px;min-height:44px;gap:7px}.public-account-link svg{width:20px;height:20px;flex:none}
.public-header>.theme-switcher{grid-column:5;grid-row:1}.public-header nav a{display:inline-flex;align-items:center;min-height:44px}
.public-header .locale-picker>div{background:var(--paper);color:var(--ink)}
.auth-header{display:grid;grid-template-columns:1fr auto;gap:14px}.auth-header>.row{margin:0;flex-wrap:nowrap;gap:12px}.auth-header #auth-locale{width:150px}
.app-topbar{min-height:64px;height:auto;padding-block:8px;flex-wrap:nowrap}.top-user{gap:10px}.top-user .theme-switcher{flex:none}.header-website svg{width:20px;height:20px}
.app-topbar>.eyebrow{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.avatar{width:44px;height:44px;border:1px solid var(--control-border);color:var(--ink);min-width:44px}
.sidebar .brand{min-height:44px}.sidebar footer a{font-size:12px;color:var(--ink)}.sidebar footer p{font-size:11px;color:var(--muted)}
.language-filter{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding:3px 3px 7px;scroll-padding:6px}.language-filter button{flex:none;max-width:260px}.language-filter .chip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.public-footer{padding-bottom:20px}.operator-footer{padding-top:24px;padding-bottom:calc(24px + var(--navigation-height,0px));font-size:13px;color:var(--muted)}.operator-footer a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.preview-notice{display:block;margin-top:24px}
/* Learning: navigation above the card; grading immediately below it. */
body.is-studying .app-main{padding:10px 20px calc(var(--navigation-height,0px) + 10px)}
.active-round{display:grid;grid-template-rows:auto 44px minmax(0,1fr) 52px;gap:10px;height:calc(var(--viewport-height,100svh) - var(--header-height,64px) - var(--navigation-height,0px) - 20px);max-height:720px;min-height:0}
.active-round .study-heading{text-align:left;margin:0;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px}
.active-round .study-heading h1{font-size:21px;margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.active-round .study-heading .chip{max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.round-toolbar{display:flex;align-items:center;gap:8px;min-height:44px}.round-toolbar>.button{width:44px;min-width:44px;min-height:44px;padding:0;font-size:21px}
.round-toolbar .round-progress{margin:0;flex:1;min-width:0;gap:10px;font-size:13px;color:var(--ink)}.round-toolbar .round-progress>span{white-space:nowrap}.round-toolbar .bar{min-width:12px}
.study-options{position:relative;flex:none;z-index:12}.study-options summary{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--control-border);border-radius:10px;background:var(--paper);color:var(--ink);list-style:none;font-size:24px;cursor:pointer}.study-options summary::-webkit-details-marker{display:none}
.study-options-panel{position:absolute;right:0;top:calc(100% + 8px);width:250px;max-width:calc(100vw - 32px);padding:16px;border:1px solid var(--control-border);border-radius:12px;background:var(--paper);box-shadow:0 12px 28px #0004}.study-options-panel p{font-size:12px;color:var(--muted)}.study-options-panel .button{width:100%;color:var(--ink)}
.active-round .study-card{height:100%;min-height:0}.active-round .card-core{height:100%}.active-round .card-face{padding:18px;overflow:hidden}.active-round .card-content{display:block;overflow-y:auto;max-height:calc(100% - 70px);width:100%;min-height:0}
.active-round .card-word{font-size:clamp(22px,4vw,44px);line-height:1.3;max-height:calc(100% - 70px);min-height:0}.active-round .card-content .card-word{max-height:none;overflow:visible}.active-round .card-original{display:block;font-size:14px}
.active-round .card-face .eyebrow{font-size:10px;color:var(--muted)}.active-round .flip-hint{font-size:11px;color:var(--muted)}.active-round .study-feedback{gap:10px;min-height:52px}.active-round .study-feedback .button{height:52px;min-height:52px;font-size:15px;padding:8px;line-height:1.2}
.active-round[aria-busy=true] .study-feedback{cursor:progress}.active-round .study-feedback .button:disabled{background:var(--pale);color:var(--muted);border:1px solid var(--line)}
.card-word,.card-original{overflow-wrap:anywhere}
.button svg{width:20px;height:20px;flex:none}
.nav-item .account-short{display:none}
.sidebar{overflow-y:auto}.sidebar nav,.sidebar .side-bottom,.sidebar footer{flex-shrink:0}
@media(max-width:1000px){.public-header{gap:12px}.public-header nav{gap:12px}.top-user small{display:none}}
@media(max-width:720px){
 .public-header{grid-template-columns:minmax(0,1fr) auto 44px;gap:8px 10px;min-height:0;padding-block:12px}.public-header .brand{font-size:21px}.public-header nav{grid-column:1 / 3;grid-row:2;font-size:12px;gap:16px;width:auto;justify-content:flex-start}.public-header .locale-picker{grid-column:2;grid-row:1;margin:0;max-width:130px}.public-header .locale-picker summary{font-size:11px;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.public-header .public-account-link{grid-column:3;grid-row:1;width:44px;padding:0}.public-account-link>span{display:none}.public-header>.theme-switcher{grid-column:2 / 4;grid-row:2;justify-self:end}
 .public-header nav{grid-column:1;gap:10px}.public-header nav a{font-size:11px}.public-header .brand sup{display:none}.public-header .logo{width:26px;height:26px;font-size:20px;margin-right:6px}
 .theme-switcher{gap:0;padding:1px}.theme-switcher button{width:44px;min-width:44px;height:44px}.theme-switcher svg{width:20px;height:20px}
 .app-topbar{min-height:58px;padding:6px 14px;gap:8px}.app-topbar .mobile-brand{font-size:19px}.app-topbar .mobile-brand .logo{width:26px;height:26px;font-size:20px;margin-right:6px}.top-user{gap:0}.top-user .avatar,.header-website{display:none}
 .bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:5px 5px calc(5px + env(safe-area-inset-bottom));background:var(--paper);border-color:var(--control-border);backdrop-filter:none}.bottom-nav .nav-item{min-height:56px;padding:5px 2px;font-size:10px;gap:4px;line-height:1.25;overflow-wrap:anywhere}.bottom-nav .nav-item svg{width:20px;height:20px}.bottom-nav .nav-item.active{color:var(--nav-active-fg);background:var(--nav-active-bg)}html[data-theme=dark] .bottom-nav{background:var(--paper)}
 .bottom-nav .nav-item .account-full{display:none}.bottom-nav .nav-item .account-short{display:block}
 .auth-header{grid-template-columns:1fr}.auth-header>.row{width:100%;justify-content:space-between;flex-wrap:wrap;gap:10px}.auth-header #auth-locale{width:145px}.auth-header .button{display:none}
 body.is-studying .app-main{padding:10px 16px calc(var(--navigation-height,66px) + 10px)}.active-round{gap:8px}.active-round .study-heading h1{font-size:18px}.active-round .study-heading .chip{font-size:10px}.active-round .card-face{padding:14px}.active-round .card-word{font-size:clamp(22px,7vw,38px)}
}
@media(max-height:500px){.is-studying .study-heading .chip{display:none}.active-round .study-heading{min-height:22px}.active-round{grid-template-rows:auto 40px minmax(0,1fr) 44px;gap:5px}.active-round .study-feedback,.active-round .study-feedback .button{height:44px;min-height:44px;font-size:13px}.active-round .card-face{padding:8px}.active-round .card-word{font-size:22px;max-height:calc(100% - 40px)}.active-round .card-content{max-height:calc(100% - 40px)}.active-round .flip-hint{font-size:11px}.active-round .flip-hint span{display:none}.active-round .card-face .eyebrow{font-size:10px}}
@media(prefers-reduced-motion:reduce){.active-round .card-core{transition:none}}