/* Phone/tablet layouts; pinch zoom remains enabled by the viewport meta tag. */
html{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html #lesson .p-head{flex-wrap:nowrap;gap:6px}
html #lesson .p-head .tabs{min-width:0;flex:1 1 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
html #lesson .p-head .tabs button{flex:0 0 auto;white-space:nowrap;overflow-wrap:normal}
.study-desk{margin:24px 0;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.study-controls{display:flex;align-items:end;gap:12px;flex-wrap:wrap}
.study-controls label{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:100%;font-size:13px}
.study-controls select,.study-controls input{min-width:0;max-width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}
#lesson-notes{width:100%;max-width:100%;padding:12px;resize:vertical;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;line-height:1.8}
.course-visual{margin:18px 0;padding:14px;border:1px solid var(--line);border-radius:12px;max-width:100%;background:var(--surface)}
.course-visual svg{display:block;width:100%;height:auto;max-height:300px}
.course-visual-control{display:flex;align-items:center;gap:10px;font:14px/1.6 var(--sans)}
.course-visual-control input{min-width:0;flex:1;min-height:44px;accent-color:var(--accent)}
.lesson-studio{padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);margin:18px 0;min-width:0}
.lesson-studio h3{font:700 24px/1.4 var(--sans);margin:8px 0}
.lesson-studio figure{margin:16px 0}
.lesson-studio svg{display:block;width:100%;height:auto;max-height:330px}
.lesson-studio figcaption{font:14px/1.8 var(--sans);color:var(--muted);margin-top:12px}
.lesson-studio label{display:grid;gap:10px;font:600 14px/1.6 var(--sans);margin:18px 0}
.lesson-studio input[type=range]{width:100%;min-width:0;min-height:44px;accent-color:var(--accent)}
.studio-equation{font:600 20px/1.7 var(--sans);overflow-wrap:anywhere;color:var(--accent)}
.studio-data{width:100%;border-collapse:collapse;font:14px/1.7 var(--sans)}
.studio-data :is(th,td){text-align:left;vertical-align:top;padding:8px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.studio-data th{width:65%;font-weight:500}
.lesson-studio summary{cursor:pointer;min-height:44px;font:600 14px/1.7 var(--sans)}
.studio-choices{display:flex;gap:8px;flex-wrap:wrap}
.studio-choices button{white-space:normal;min-height:44px;max-width:100%}
.lesson-studio textarea{width:100%;min-width:0;resize:vertical;padding:12px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;font:16px/1.8 var(--sans)}
@media(max-width:540px){.lesson-studio{padding:14px}.studio-choices button{width:100%}.lesson-studio h3{font-size:21px}}
.grade-rules{margin:16px 0;padding:12px;border:1px solid var(--line);border-radius:10px}
.grade-rules>summary{font:600 14px/1.6 var(--sans);cursor:pointer;color:var(--accent);display:list-item}
/* Suppress generated mobile cell labels inside collapsed reports as well. */
.practice-grades:not([open])>:not(summary),.grade-history:not([open])>:not(summary){display:none}
[inert] .grade-table td::before,.screen[aria-hidden="true"] .grade-table td::before{content:none}
.practice-grades:not([open]) .grade-table td::before,.grade-table tr[hidden] td::before{content:none}
[inert] .roadmap-course>summary::after{content:none}
@media(max-width:760px){
  .wrap,.l-main,.panel{zoom:1}
  .wrap{max-width:100%;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  button,.pill,summary{min-height:44px}
  input:not([type="range"]):not([type="color"]),textarea,select{font-size:16px!important}
  .subject-picker select,.subject-picker label,.grade-controls select{width:100%;min-width:0}
  .dashboard-nav{gap:8px}.dashboard-nav .pill{display:inline-flex;align-items:center;justify-content:center}
  .study-controls{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch}
  .study-controls label,.study-controls select,.study-controls input{width:100%;min-width:0}
  .study-desk{padding:16px}.study-desk h2{font-size:24px}
  #lesson .l-top{display:grid!important;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:10px 12px;flex-shrink:0}
  #lesson .l-top>#back{grid-column:1;grid-row:1}
  #lesson .l-label{display:block;grid-column:2;grid-row:1;min-width:0;font-size:14px;line-height:1.4;white-space:normal}
  #lesson .l-tools{grid-column:1/-1;grid-row:2;display:flex;justify-content:flex-start!important;flex-wrap:nowrap!important;overflow-x:auto;max-width:100%;min-width:0;padding:3px 1px 7px;gap:6px;scrollbar-width:thin;touch-action:pan-x}
  #lesson .l-tools>*{flex-shrink:0;min-height:44px}
  #lesson .l-top>.fps{grid-column:1/-1;justify-self:end}
  #lesson .qtext{font-size:calc(clamp(24px,6vw,34px)*var(--z,1));line-height:1.45;overflow-wrap:anywhere}
  #lesson .tp{font-size:calc(17px*var(--z,1));line-height:1.8}
  #lesson .solution-details{font-size:calc(15px*var(--z,1))}
  .math-key{min-height:44px!important}
  .math-lab-dialog{width:calc(100vw - 24px);max-width:100%;max-height:calc(100dvh - 24px);padding:16px;overscroll-behavior:contain}
  .math-lab-dialog .lab-fields{grid-template-columns:minmax(0,1fr)}
  .p-head .tabs{min-width:0;flex-wrap:nowrap!important;overflow-x:auto;flex:1 1 0!important;justify-content:flex-start}
  .p-head .tabs button{flex:0 0 auto!important;white-space:nowrap!important}
  .p-head{gap:6px;flex-wrap:nowrap!important}
  .p-body{overscroll-behavior:contain}
  .grades-header{padding-top:max(12px,env(safe-area-inset-top))}
  .grades-content{padding-bottom:max(20px,env(safe-area-inset-bottom))}
  .grade-table{min-width:0;display:block;width:100%}
  .grade-table caption{display:block;width:100%}
  .grade-table thead{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
  .grade-table tbody{display:block;padding:10px}
  .grade-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:12px;margin:0 0 14px;overflow:hidden}
  .grade-table tr[hidden]{display:none}
  .grade-table th[scope="row"]{display:block;grid-column:1/-1;min-width:0;max-width:none;background:var(--soft)}
  .grade-table td{display:block;min-width:0;overflow-wrap:anywhere}
  .grade-table td::before{content:attr(data-label);display:block;font:600 12px/1.5 var(--sans);color:var(--muted);margin-bottom:5px}
  .grade-table td:last-child{grid-column:1/-1}
  .grade-history{min-width:0;max-width:100%}.grade-table-scroll{overflow-x:clip}
  .practice-grades{padding:10px}.course-report-header{padding:16px}
  .course-letter{width:100%;min-width:0;grid-template-columns:54px minmax(0,1fr);justify-items:start;column-gap:12px;padding:12px}
  .course-letter strong{grid-column:1;grid-row:1/3;align-self:center}
  .course-letter :is(span,small){grid-column:2}
  .grade-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grade-metrics>div:first-child{display:none}
  .grade-metrics>div{padding:12px}
  .grade-metrics strong{font-size:clamp(17px,4.5vw,20px)}
}
@media(max-height:500px) and (max-width:1000px){
  .math-lab-dialog{max-height:94dvh}.grades-header{padding:8px 14px}.grades-header h1{font-size:22px}
  #lesson .l-top{padding-top:6px;padding-bottom:6px}
  html #lesson.tools>#panel{position:absolute;inset:0;width:100%;height:100%;max-height:100%;grid-column:1/-1;grid-row:1/-1;z-index:5;border-radius:0}
  html #lesson.tools>:is(.l-top,.l-main,.drawing-toggle,.drawing-layer,.fab){visibility:hidden;pointer-events:none}
  html #lesson.tools .panel-resize-handle{display:none}
}