/* Reflow the content instead of scaling or clipping it when the viewport changes. */
html,body{width:100%;min-width:0;min-height:100%}
:root{--sidebar-width:238px}
body{min-height:100vh;min-height:100dvh;overflow-wrap:anywhere}
.app-shell,#app{width:100%;min-width:0;min-height:100vh;min-height:100dvh}
.app-shell{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr)}
.main{grid-column:2;margin-left:0;width:100%;min-width:0;max-width:100%;container:workspace / inline-size}
.main>*{min-width:0;max-width:100%}
.sidebar{width:var(--sidebar-width);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.sidebar>*{flex-shrink:0}
.brand>div,.topbar>*,.page-intro>div,.study-grid>*,.study-rail>*,.stat-card>div,.note-card>*,.bank-catalog>*,.bank-row>div,.welcome-grid>*,.preview-file>div{min-width:0}
.topbar,.page-intro{flex-wrap:wrap}
.top-status{min-width:0;max-width:100%;margin-left:auto}
.page-intro>div{flex:1 1 340px}
.edition{white-space:normal;overflow-wrap:anywhere;max-width:100%}
.stats-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat-card{min-width:0}
.stat-icon{flex-shrink:0}
.stat-card small{white-space:normal}
.stat-card strong{overflow-wrap:anywhere}
.question-toolbar,.mode-label,.question-footer,.question-next-actions{flex-wrap:wrap}
.mode-label>*,.question-next-actions>*{flex-shrink:0}
.question-next-actions{max-width:100%}
.question-heading,.option-text,.explanation-text,.passage-text,.passage-rich-editor{min-width:0;overflow-wrap:anywhere}
.option-text{word-break:normal}
.question-hint,.feedback-title,.note-top,.note-card-bottom,.modal-header,.bank-review-toolbar{flex-wrap:wrap}
.feedback-title svg,.question-hint svg{flex-shrink:0}
.study-rail{min-width:0}
.study-rail h3,.progress-head,.mini-row{gap:8px;flex-wrap:wrap}
.study-rail h3 span{white-space:normal}
.question-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.solve-timer{flex-wrap:wrap}
.timer-history{min-width:0;overflow-wrap:anywhere}
.speed-overview,.time-comparison,.import-summary,.offline-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
.speed-overview>div,.time-comparison>div,.offline-summary>span,.import-summary>div{min-width:0}
.main-footer{flex-wrap:wrap}
.filter-bar,.filter-bar>*{min-width:0;max-width:100%}
.filter-bar>.tabs{flex-wrap:wrap;flex:0 1 auto}
.filter-bar>.search{flex:1 1 200px}
.filter-bar>.primary{flex:0 1 auto;white-space:normal;overflow-wrap:anywhere}
.tabs button{max-width:100%;overflow-wrap:anywhere}
.note-list>.note-card,.dashboard-grid>.dashboard-card{min-width:0;max-width:100%}
.note-top>*{min-width:0}
.note-card-bottom{gap:8px}
.dashboard-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.filter-bar>.search{min-width:0;max-width:100%}
/* The old SVG filled the complete card; both dimensions now use one quarter. */
.complete-mark{width:25%;margin:0 auto 15px;line-height:0}
.complete-mark svg{display:block;width:100%;height:auto;aspect-ratio:1;max-width:100%}
.modal-backdrop{padding:16px}
.modal{min-width:0;max-width:100%;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overscroll-behavior:contain}
.bank-manager,.bank-organization,.offline-panel,.license-panel{min-width:0;max-width:calc(100% - 24px);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.modal-header>button,.bank-close,.offline-close,.license-head>button{flex-shrink:0}
.import-form input,.import-form textarea,.import-form select,.license-panel input,.license-panel textarea{min-width:0;max-width:100%}
.bank-results .bank-row-actions{flex-wrap:wrap;max-width:100%}
.bank-row .bank-delete{margin-left:0}
.bank-tags,.bank-heading,.bank-results-heading,.offline-head,.license-head{min-width:0;overflow-wrap:anywhere}
.bank-tag{max-width:100%;overflow-wrap:anywhere}
.bank-review-toolbar>span{margin-left:0}
.welcome{width:100%;min-width:0}
.welcome-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.welcome-preview{min-width:0;transform:none}
.welcome-brand{flex-wrap:wrap}
.preview-database{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Use the actual space beside the menu, including when browser zoom changes it. */
@container workspace (max-width:980px){
  .study-grid{grid-template-columns:minmax(0,1fr)}
  .study-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .study-rail .rail-card{margin:0}
  .study-rail .encouragement{display:none}
  .footer-center{display:none}
}
@container workspace (max-width:540px){
  .study-rail{grid-template-columns:minmax(0,1fr)}
  .stats-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-card:first-child em{display:inline}
  .question-content{padding:22px 18px}
  .question-toolbar,.question-footer{padding:15px 18px}
  .speed-overview{grid-template-columns:minmax(0,1fr)}
  .time-comparison{grid-template-columns:minmax(0,1fr)}
  .note-list,.dashboard-grid{grid-template-columns:minmax(0,1fr)}
}
@container workspace (max-width:700px){
  .filter-bar{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch}
  .filter-bar>.tabs,.filter-bar>.search,.filter-bar>.primary{width:100%;margin-left:0}
  .dashboard-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:1150px){:root{--sidebar-width:204px}}

@media(max-width:900px){
  .app-shell{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;inset:auto 0 0;width:100%;height:calc(76px + env(safe-area-inset-bottom));padding:6px 7px calc(6px + env(safe-area-inset-bottom));display:flex;flex-direction:row;border:0;border-top:1px solid var(--line);background:#fffffff5;backdrop-filter:blur(15px);overflow-y:auto}
  .sidebar .brand,.sidebar .nav-label,.sidebar .sidebar-bottom{display:none}
  .sidebar nav{display:flex;width:100%;min-width:0;gap:3px}
  .sidebar .nav-item{min-width:0;flex:1 1 0;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:6px 3px;margin:0;font-size:11px;line-height:1.35;position:relative}
  .sidebar .nav-item>span:not(.badge){white-space:normal;overflow-wrap:anywhere;word-break:keep-all}
  .sidebar .nav-item svg{width:20px;height:20px}
  .sidebar .nav-item .badge{position:absolute;top:1px;left:54%;margin:0;font-size:8px;line-height:15px;padding:0 4px}
  .main{grid-column:1;margin:0;width:100%;padding:22px 20px calc(106px + env(safe-area-inset-bottom))}
  .mobile-brand{display:flex;gap:7px;align-items:center;font-size:17px;font-weight:800;letter-spacing:-.8px}
  .mobile-brand .brand-logo{width:30px;height:30px;font-size:21px;border-radius:9px}
  .mobile-brand .brand-version{font-size:11px}
  .breadcrumb{display:none}
  .topbar{gap:14px;margin-bottom:24px}
  .top-status{font-size:10px;gap:6px}
  .avatar,.top-status .status-dot{display:none}
  .offline-mini{font-size:11px;padding:6px 9px}
  #toast{left:50%;bottom:calc(92px + env(safe-area-inset-bottom));max-width:calc(100% - 32px)}
  .bank-catalog{grid-template-columns:minmax(0,1fr)}
  #bank-folder-tree{max-height:180px;overflow:auto}
}
@media(max-width:600px){
  .main{padding:18px 12px calc(106px + env(safe-area-inset-bottom))}
  .topbar{gap:10px}
  .topbar .mobile-brand{flex-basis:100%}
  .main .top-status{max-width:100%;width:100%;justify-content:flex-start;margin-left:0;font-size:10px}
  .main .top-status .offline-mini{font-size:11px}
  .sidebar .nav-item{font-size:10px}
  .page-intro>div{flex-basis:100%}
  .page-intro h1{font-size:24px}
  .page-intro p{font-size:12px}
  .question-heading{font-size:18px}
  .option-text{font-size:14px}
  .question-next-actions{gap:10px}
  .confidence-check{font-size:12px}
  .welcome-grid{grid-template-columns:minmax(0,1fr);gap:32px;margin:40px 0}
  .welcome h1{font-size:clamp(28px,7vw,39px)}
  .welcome-steps{grid-template-columns:minmax(0,1fr)}
  .welcome-brand>span{max-width:100%;margin-left:0}
  .import-summary{grid-template-columns:minmax(0,1fr)}
  .modal-backdrop{padding:12px}
  .modal{padding:18px;max-height:calc(100dvh - 24px)}
  .bank-manager,.bank-organization,.offline-panel,.license-panel{padding:20px 16px;max-height:calc(100dvh - 24px)}
  .question-meta{align-items:flex-start}
}
@media(max-height:700px) and (min-width:901px){
  .sidebar{padding-top:20px;padding-bottom:20px}
  .brand{margin-bottom:18px}
  .sidebar-note{margin-top:16px}
}

/* Keep the six learning menus and account tools within a laptop-height sidebar. */
@media(min-width:901px){
  .sidebar{padding:20px 16px 14px}
  .sidebar .brand{padding:0 9px;margin-bottom:18px}
  .sidebar .nav-label{margin:6px 0 7px}
  .sidebar .nav-item{padding:10px 12px;margin-bottom:4px}
  .sidebar .sidebar-note{margin-top:14px;padding:12px}
  .sidebar .backup-button{margin-top:6px;padding:6px 12px}
  .sidebar .license-summary{font-size:11px;line-height:1.65;margin:4px 12px 6px}
}
@media(min-width:901px) and (max-height:800px){
  .sidebar{padding-top:14px}
  .sidebar .brand{margin-bottom:12px}
  .sidebar .nav-item{padding-top:8px;padding-bottom:8px}
  .sidebar .sidebar-note{padding:9px 12px}
  .sidebar .sidebar-note strong{margin-bottom:0}
  .sidebar .sidebar-encouragement{display:none}
}
@media(min-width:901px) and (max-height:680px){
  .sidebar .sidebar-note{display:none}
}
@media(min-width:901px) and (max-height:620px){
  .sidebar .nav-label{display:none}
  .sidebar .brand{margin-bottom:8px}
  .sidebar .nav-item{padding-top:6px;padding-bottom:6px}
}

/* Keep the help and trial group near the learning menu rather than at the bottom. */
@media(min-width:901px){
  .sidebar .sidebar-bottom{margin-top:32px}
  .sidebar .sidebar-note{margin-top:0;padding:16px 13px}
  .sidebar .sidebar-note strong{margin-bottom:8px}
  .sidebar .backup-button{margin-top:12px;padding-top:8px;padding-bottom:8px}
  .sidebar .license-summary{margin-top:8px;margin-bottom:12px;line-height:1.8}
}
@media(min-width:901px) and (max-height:800px){
  .sidebar .sidebar-bottom{margin-top:16px}
  .sidebar .sidebar-note{padding:9px 12px}
  .sidebar .sidebar-note strong{margin-bottom:0}
  .sidebar .backup-button{margin-top:6px;padding-top:6px;padding-bottom:6px}
  .sidebar .license-summary{margin-top:4px;margin-bottom:6px;line-height:1.65}
}

@media(min-width:901px) and (min-height:900px){
  .sidebar{padding-bottom:calc(20dvh - 42px)}
  .sidebar .sidebar-bottom{margin-top:auto}
}