/* Role desktop pages use document flow, never a scaled or clipped stage.
   All rules are inactive on the approved home page and on phone viewports. */
@media(min-width:761px){
 html.desktop-flow.common-frame-active,html.desktop-flow.common-frame-active body{height:auto!important;min-height:100dvh!important;overflow:visible!important}
 html.desktop-flow body.student-page.has-word-card{position:static!important;inset:auto!important;width:100%;max-width:none;margin:0;padding:0}
 html.desktop-flow .site-frame{position:relative;inset:auto;min-height:100dvh;display:flex;flex-direction:column;max-width:1580px}
 html.desktop-flow .common-top{flex:none;min-height:36px}
 html.desktop-flow .site-frame>.common-header{flex:none;height:auto;min-height:92px}
 html.desktop-flow .site-frame>.common-sources{flex:none;overflow:visible}
 html.desktop-flow .site-frame>.common-footer{flex:none;min-height:38px}
 html.desktop-flow .common-content{flex:1 0 auto;height:auto;min-height:0;overflow:visible;scrollbar-gutter:auto}
 html.desktop-flow .common-content>main,html.desktop-flow .common-content .account-entry-shell,html.desktop-flow .common-content .pupil-main{height:auto;min-height:0;overflow:visible}
 html.desktop-flow .common-content #board-canvas,html.desktop-flow .common-content #role-canvas{height:auto;min-height:0;transform:none!important}
 /* Ordinary account pages grow to the tallest panel. The next row cannot
    overlap an input or a button when the browser window is short. */
 html.desktop-flow .account-entry-shell{display:flex;flex-direction:column}
 html.desktop-flow .account-entry-shell>*{flex-shrink:0}
 html.desktop-flow .account-entry-options{flex:none;min-height:0;align-items:stretch}
 html.desktop-flow .account-entry-options .entry-login-panel{height:auto;min-height:0;gap:12px}
 html.desktop-flow .account-entry-options .entry-login-panel>*{flex-shrink:0}
 html.desktop-flow .account-entry-options .entry-login-panel label{font-size:16px;line-height:1.4}
 html.desktop-flow .account-entry-options .entry-login-panel input:not([type=checkbox]){font-size:16px;min-height:48px;padding:10px}
 html.desktop-flow .account-entry-options .entry-login-panel h2{font-size:24px;line-height:1.25}
 html.desktop-flow .account-entry-options .entry-primary{font-size:16px;min-height:48px;padding:12px}
 html.desktop-flow .account-entry-options #existing-account>a,html.desktop-flow .account-entry-options .student-register-link,html.desktop-flow .account-entry-options #teacher-register-open{font-size:14px;line-height:1.4}
 html.desktop-flow #student-code-form{min-height:0;gap:12px}
 /* Pupil code entry uses the same scrolling page as the account panels. */
 html.desktop-flow .pupil-entry-desktop .common-content>.pupil-main{height:auto;min-height:0}
 html.desktop-flow .pupil-entry-desktop [data-mobile-pane=learn]{flex:none;min-height:0}
 html.desktop-flow .pupil-entry-desktop .portal-join,html.desktop-flow .pupil-entry-desktop .private-pupil-offer{height:auto;min-height:0}
 html.desktop-flow .pupil-entry-desktop .portal-join>*{flex-shrink:0}
 html.desktop-flow .pupil-entry-desktop .portal-join p,html.desktop-flow .pupil-entry-desktop .portal-join label{font-size:16px;line-height:1.5}
 html.desktop-flow .pupil-entry-desktop #lesson-code{min-height:48px;font-size:24px}
 html.desktop-flow .pupil-entry-desktop .lesson-button{font-size:16px;min-height:48px;padding:12px}
 /* An actual pupil card has room for readable controls on both faces.
    Only the word is fitted by pupil-layout.js. */
 html.desktop-flow .student-page.has-word-card .common-content .pupil-main{height:auto;width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;overflow:visible}
 html.desktop-flow .student-page.has-word-card .pupil-main>.pupil-card{flex:none;height:auto;min-height:0;max-width:none;overflow:visible;padding:0 8px 10px 0}
 html.desktop-flow .student-page.has-word-card .pupil-card .phone-preview{height:auto;overflow:visible;grid-template-columns:minmax(0,1fr);grid-template-rows:auto!important;gap:16px;container-type:inline-size}
 html.desktop-flow .student-page.has-word-card .pupil-card .phone-preview>*{grid-column:1;grid-row:auto}
 html.desktop-flow .student-page.has-word-card .pupil-card .phone-preview .word-card{height:auto;min-height:0;overflow:visible;padding:28px;container-type:normal;grid-column:1;grid-row:auto}
 html.desktop-flow .student-page.has-word-card .pupil-card #card-front,html.desktop-flow .student-page.has-word-card .pupil-card #card-back{height:auto;overflow:visible;display:block}
 html.desktop-flow .student-page.has-word-card .pupil-face-content{height:auto!important;min-height:0!important;transform:none!important}
 html.desktop-flow .student-page.has-word-card .pupil-card .phone-preview .word{height:auto;min-height:80px;padding:20px 16px;margin:8px 0 24px;font-size:clamp(28px,calc(130cqw / var(--word-letters,10)),64px);white-space:nowrap;overflow-wrap:normal;line-height:1.2}
 html.desktop-flow .student-page.has-word-card .pupil-card .phone-preview .card-eyebrow,html.desktop-flow .student-page.has-word-card .pupil-card .phone-preview .answer-label{font-size:14px;line-height:1.4}
 html.desktop-flow .student-page.has-word-card .pupil-card #demo-form{flex:none;gap:20px}
 html.desktop-flow .student-page.has-word-card .pupil-card #demo-form fieldset,html.desktop-flow .student-page.has-word-card .pupil-card #demo-form .field{font-size:16px;line-height:1.5;margin:0 0 20px}
 html.desktop-flow .student-page.has-word-card .pupil-card .phone-preview .choices span{font-size:16px;min-height:48px;padding:10px 4px}
 html.desktop-flow .student-page.has-word-card .pupil-card .phone-preview .field textarea{font-size:16px;min-height:96px;height:96px;line-height:1.5;resize:vertical}
 html.desktop-flow .student-page.has-word-card .pupil-card .phone-preview .flip-button{font-size:16px;min-height:48px;margin:0;position:static}
 html.desktop-flow .student-page.has-word-card .pupil-card #answer-definition{font-size:20px;line-height:1.5}
 html.desktop-flow .student-page.has-word-card .pupil-card #answer-example,html.desktop-flow .student-page.has-word-card .pupil-card #answer-class,html.desktop-flow .student-page.has-word-card .pupil-card #your-choice{font-size:18px;line-height:1.5}
 html.desktop-flow .student-page.has-word-card .pupil-card .source-note{font-size:14px;line-height:1.5;margin-top:20px}
 html.desktop-flow .student-page.has-word-card .pupil-card .phone-preview>.waiting-card{height:auto;min-height:240px}
 html.desktop-flow .student-page.has-word-card .pupil-card .phone-heading{min-height:60px}
 html.desktop-flow .student-page.has-word-card .pupil-card .phone-footer{min-height:48px;font-size:14px;flex-wrap:wrap;gap:12px}
 html.desktop-flow .student-page.has-word-card .pupil-card .phone-footer button{min-height:44px;font-size:16px}
 /* Bank exercise navigation stays in normal flow above the card. */
 html.desktop-flow .bank-card-focus .site-frame>.common-top{display:block!important}
 html.desktop-flow .bank-card-focus .site-frame>.common-header{display:flex!important}
 html.desktop-flow .bank-card-focus .site-frame>.common-sources{display:block!important}
 html.desktop-flow .bank-card-focus .site-frame>.common-footer{display:flex!important}
 html.desktop-flow .bank-card-focus .pupil-card .bank-card-tools{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
 html.desktop-flow .bank-card-focus .pupil-card .bank-card-tools>div{display:flex;align-items:center;gap:12px}
 /* Teacher boards retain large teaching text and a miniature pupil preview,
    but their containers no longer force everything into one screen height. */
 html.desktop-flow .common-content:has(.board-layout){overflow:visible}
 html.desktop-flow .common-content .board-layout{height:auto;align-items:stretch;--teaching-frame-height:clamp(540px,calc(100dvh - 300px),700px)}
 html.desktop-flow .common-content .board-layout>.board,html.desktop-flow .common-content .board-layout>.student-monitor{height:var(--teaching-frame-height);min-height:0}
 html.desktop-flow .common-content .teacher-start-flow{height:auto;min-height:0}
 html.desktop-flow .common-content .teacher-start-content{min-height:0;overflow:visible}
 html.desktop-flow .common-content .teacher-class-picker{height:auto;min-height:0}
 html.desktop-flow .common-content .teacher-class-list{max-height:240px;overflow:auto}
 html.desktop-flow .common-content #teacher-access{height:auto;min-height:0;overflow:visible}
}

/* Opened bank cards must grow the document, including long explanations.
   Remove the older fixed-bank wrapper's size containment and clipping. */
@media(min-width:761px){
 html.desktop-flow body.student-page.bank-card-focus .common-content{display:block;overflow:visible;height:auto}
 html.desktop-flow body.student-page.bank-card-focus .common-content .pupil-main{height:auto;max-height:none;container-type:normal;overflow:visible}
}