/* Prototype 1: layout only. All palette tokens remain in styles.css. */
html { min-width: 280px; }
body { width: 100%; min-height: 100svh; height: auto; overflow: auto; align-items: flex-start; }
.board-page .app-container { height: 100vh; height: 100dvh; min-height: 490px; max-height: 900px; margin: auto; }
.app-header, .app-tabs, .app-footer { flex-shrink: 0; }
.app-header { min-width: 0; gap: 16px; }
.logo-area { flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.folder-label { font-size: 12px; opacity: .7; border-left: 1px solid var(--glass-border); padding-left: 12px; white-space: nowrap; }
.navigation-controls { min-width: 0; gap: 8px; }
.premium-select { min-width: 0; max-width: 240px; text-overflow: ellipsis; }
#header-video-btn { display: flex; gap: 7px; align-items: center; width: auto; white-space: nowrap; }
.video-btn-label { font-size: 13px; }
.app-tabs { align-items: center; flex-wrap: wrap; }
.lesson-hint { margin-left: auto; font-size: 12px; opacity: .65; }
.slate-board-container { min-height: 200px; min-width: 0; }
.slate-wooden-frame, .slate-board { min-width: 0; min-height: 0; }
.board-half { min-height: 0; min-width: 0; padding: 34px 22px 12px; }
.board-text { max-width: 100%; overflow-wrap: anywhere; font-size: clamp(1.5rem, 3.6vw, 3rem); }
.board-badge { top: 10px; }
.board-subtext:empty { display: none; }
.control-pill { max-width: 100%; flex-shrink: 0; }
.control-pill > * { flex-shrink: 0; }
.index-input { width: 72px; font-variant-numeric: tabular-nums; }
.progress-bar-wrapper { max-width: 600px; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 3px; }
.slate-curtain-de { cursor: default; }
.modal-cancel { color: inherit; }
.stats-page .stats-wrap { width: min(100%, 900px); min-width: 0; }
.stats-table { table-layout: fixed; }
.stats-table td, .stats-table th { overflow-wrap: anywhere; }
.stats-page .app-header { min-height: 50px; }
@media (max-width: 1050px) {
    .folder-label { display: none; }
    .lesson-hint { display: none; }
    .navigation-controls { flex: 1; justify-content: flex-end; }
    .premium-select { flex: 1; width: 160px; }
}
@media (max-width: 600px) and (orientation: portrait) {
    .board-page .app-container { padding: 12px; padding-bottom: max(14px, env(safe-area-inset-bottom)); min-height: 620px; }
    .app-header { flex-direction: column; align-items: stretch; height: auto; gap: 12px; margin-bottom: 10px; }
    .logo-area { justify-content: center; }
    .folder-label { display: inline; }
    .navigation-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px 38px; width: 100%; gap: 6px; }
    .premium-select { width: 100%; max-width: none; padding: 8px; font-size: 12px; height: 38px; }
    .theme-toggle-btn, #header-video-btn { width: 38px; height: 38px; padding: 0; justify-content: center; }
    .video-btn-label { display: none; }
    .stats-page .navigation-controls { display: flex; justify-content: center; }
    .tab-link { font-size: 13px; padding: 7px 10px; }
    .slate-board-container { margin-bottom: 18px; }
    .slate-wooden-frame { padding: 9px; }
    .board-half { padding: 36px 12px 18px; }
    .board-text { font-size: clamp(1.6rem, 7vw, 2.4rem); }
    .control-pill { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 70px minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)); gap: 3px; padding: 7px 6px; }
    .control-pill .pill-btn { width: 100%; height: auto; aspect-ratio: 1; min-width: 0; border-radius: 50%; }
    .fav-btn { font-size: 9px; white-space: nowrap; }
    .score-btn { font-size: 21px; }
    .nav-arrow { font-size: 19px; }
    .solar-icon { font-size: 23px; }
    .index-display-container { min-width: 0; padding: 0 3px; height: 38px; }
    .index-input { width: 100%; min-width: 0; font-size: 12px; letter-spacing: 0; }
    .app-footer { gap: 15px; }
    .stats-wrap { padding: 0 0 30px; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats-actions .theme-toggle-btn { width: auto; min-height: 38px; height: auto; }
}
@media (orientation: landscape) and (max-height: 520px) {
    .board-page .app-container { min-height: 300px; padding: 6px max(12px, env(safe-area-inset-left)) 8px max(12px, env(safe-area-inset-right)); }
    .app-header { height: 34px; gap: 12px; }
    .app-tabs { display: flex; margin-bottom: 4px; }
    .tab-link { font-size: 11px; padding: 3px 8px; }
    .premium-select { height: 30px; font-size: 12px; }
    .theme-toggle-btn { min-width: 30px; width: auto; height: 30px; padding: 4px 8px; }
    .video-btn-label { display: none; }
    .slate-board-container { min-height: 140px; margin-bottom: 8px; }
    .board-half { padding: 20px 18px 5px; }
    .board-text { font-size: clamp(1.2rem, 5.8vh, 1.9rem); }
    .board-badge { font-size: 8px; top: 5px; padding: 2px 6px; }
    .curtain-content { gap: 4px; }
    .curtain-lock-icon { font-size: 1.2rem; }
    .curtain-prompt { font-size: 13px; }
    .app-footer { gap: 5px; }
    .control-pill { padding: 3px 8px; gap: 5px; }
    .index-display-container { padding: 0 8px; }
    .index-input { width: 66px; font-size: 12px; }
    .progress-bar-wrapper { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
[hidden] { display: none !important; }
.board-status:empty { display: none; }
.board-status { font-size: 12px; text-align: center; }
.stats-status { margin: 16px 0; line-height: 1.5; font-size: 14px; }
.stats-lesson-title { margin: 22px 0 6px; font-family: 'Kalam', cursive; }
.stats-time { font-size: 13px; opacity: .7; }
.stats-actions a { display: inline-flex; align-items: center; text-decoration: none; padding: 10px 14px; }
.stats-actions .theme-toggle-btn { line-height: 1.35; }