/* Comfortable controls shared across the existing themes. */
#mobile-menu{display:none}
.repeat-preview{color:var(--muted);font-size:13px;line-height:1.5;padding:10px 12px;border-left:3px solid var(--gold);background:var(--paper);grid-column:1/-1}
#appointment-search,#appointment-status-filter{min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}
@media(max-width:760px){
 .tabbar{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible!important}
 nav.tabbar button{min-width:0!important;max-width:none!important;width:100%!important}
 .tabbar:not(.expanded) [data-screen]:not([data-screen="today"]):not([data-screen="planner"]):not([data-screen="students"]):not([data-screen="appointments"]){display:none}
 .tabbar #mobile-menu{display:block;font-size:12px;min-height:60px}
 .tabbar.expanded{grid-template-columns:repeat(4,minmax(0,1fr));max-height:70dvh;overflow-y:auto!important;box-shadow:0 -10px 40px #0002}
}
[hidden]{display:none!important}
.screen,.page-header>div,.field-grid>*,.dialog-grid>*,.appointment-schedule-layout>*{min-width:0}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
button{touch-action:manipulation}
form[aria-busy="true"] button[type="submit"]{opacity:.65;pointer-events:none}
.student-detail a{display:block;overflow-wrap:anywhere;margin-top:6px}
.roster-filters{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin:16px 0}
.roster-filters label{font-size:13px;font-weight:700}
.roster-filters input,.roster-filters select{width:100%;min-height:44px;margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}
.getting-started{margin:20px 0;padding:22px;border-left:5px solid var(--gold)}
.getting-started summary{font-weight:800;font-size:18px;cursor:pointer}
.getting-started p{color:var(--muted);line-height:1.6}
.getting-started-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
.getting-started-steps button{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);padding:14px}
.getting-started-steps span{color:var(--forest);font-size:20px}
.weekday-choices label{min-height:44px;display:flex;align-items:center;gap:8px}
dialog{max-height:90dvh;overflow:auto;overscroll-behavior:contain}
.dialog-actions{gap:12px;flex-wrap:wrap}
.page-header{gap:18px;flex-wrap:wrap}
.planner-controls,.planner-secondary-actions,.appointment-toolbar{gap:12px;flex-wrap:wrap}
@media(max-width:760px){
  main{padding-bottom:calc(130px + env(safe-area-inset-bottom))}
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important;max-width:100%;min-width:0}
  input[type=date],input[type=time]{width:100%;max-width:100%;box-sizing:border-box}
  button,.toolbar-button,.text-button{min-height:44px}
  .tabbar{gap:4px;scrollbar-width:thin;scroll-snap-type:x proximity}
  .tabbar button{flex:0 0 86px!important;min-width:86px!important;max-width:86px;padding:7px 3px;white-space:normal;line-height:1.25;scroll-snap-align:center}
  .tabbar button span{margin-left:auto;margin-right:auto}
  .page-header .primary-button{width:auto;height:auto;min-height:44px;padding:12px 16px;font-size:14px;white-space:normal;overflow:visible}
  .page-header .primary-button::first-letter{font-size:inherit}
  .page-header{align-items:flex-start}
  .page-header h1{font-size:clamp(28px,7vw,36px)}
  .planner-secondary-actions{flex-wrap:wrap;overflow:visible}
  .planner-secondary-actions button{flex:1 1 140px;white-space:normal}
  .planner-toolbar .planbook-controls{order:0}
  .dialog-grid,.lesson-editor-layout,.roster-filters{grid-template-columns:1fr!important}
  .dialog-grid>*{grid-column:auto!important}
  dialog{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px);max-height:92dvh}
  .dialog-actions button{flex:1 1 120px}
  .getting-started-steps{grid-template-columns:1fr}
  .toast{max-width:calc(100vw - 24px);bottom:calc(108px + env(safe-area-inset-bottom));white-space:normal}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{.getting-started,.roster-filters,.tabbar{display:none!important}}