/* Shared readable type for ClasiX, ControlX, IdentX and their console windows. */
@media screen{
body.readableApp{font-size:18px}
.readableApp :is(p,label,summary,td,th,.help,.notice):not(:where(#ipadDesk *)){font-size:17px!important;line-height:1.4}
.readableApp :is(button,select,input:not([type=range]),textarea):not(:where(#ipadDesk *)){font-size:17px!important}
.readableApp :is(small,.eyebrow,.consoleListPages):not(:where(#ipadDesk *)){font-size:15px!important}
.readableApp:not([data-mode=home]) :is(h2,.panel h2){font-size:30px}
.readableApp :is(h3,.panel h3){font-size:22px}
.readableApp :is(output,.value,.channelValue){font-size:17px}
.readableApp .modeCard .desc{font-size:20px;line-height:1.5}
.readableApp .modeCard :is(.number,.enter){font-size:17px}
.readableApp .home>p{font-size:20px!important}
/* The same header and navigation footprint is used on every workspace. */
html[data-interface] body.readableApp:not([data-mode=home]) header{height:64px;min-height:64px;padding:6px 12px;gap:6px}
html[data-interface] body.readableApp header :is(button,select):not(:where(#ipadDesk *)){font-size:16px!important}
html[data-interface] body.readableApp header .consoleChoice{font-size:15px}
html[data-interface] body.readableApp :is(#consoleInterface,#identxModel,#identxModel option,#openIdentx){font-size:16px!important}
html[data-interface] body.readableApp:not([data-mode=home]) .modeNav{height:48px;min-height:48px;padding:6px 12px;gap:5px}
html[data-interface] body.readableApp:not([data-mode=home]) .modeNav button{font-size:16px!important;line-height:20px;height:36px;min-height:36px;padding:7px 9px}
.readableApp :is(.consoleViewTabs,.consoleListPages) button{font-size:17px!important}
.readableApp :is(.stageLeftTools,.stageSideTools) :is(p,label,summary,output,input,select,button){font-size:18px!important;line-height:1.35}
.readableApp :is(.stageLeftTools,.stageSideTools) :is(small,.eyebrow,.stageLabel){font-size:16px!important}
.readableApp :is(.stageLeftTools,.stageSideTools) h3{font-size:20px!important}
.readableApp :is(#progBankNav,.chaseBankNavigation,.cueToolbar,.progCommandPanel){font-size:17px}
.readableApp :is(.cuePad,.liveBoardPad) strong{font-size:18px!important;line-height:22px;max-height:44px}
.readableApp :is(.cuePad,.liveBoardPad) small{font-size:14px!important;line-height:17px}
.readableApp :is(#cueTracerStatus,#midiMonitorBar,#midiMonitorBar p,.progInspectorHead,.chasePadEditor){font-size:16px!important}
.readableApp dialog :is(p,label,summary,li,button,select,input,textarea){font-size:18px!important;line-height:1.45}
.readableApp dialog h3{font-size:21px}
.readableApp :is(.patchTable,.channelSummary,.profileCards){font-size:18px}
.readableApp :is(#revoltxWorkspace,#findxWorkspace) :is(p,label,summary,input,select,button){font-size:19px!important}
/* More room in the virtual fader deck for labels and DMX values. */
html[data-interface=classic] body.readableApp.virtualConsoleOpen{--virtual-console-height:clamp(210px,25dvh,250px)}
.readableApp #virtualConsole :is(button,summary,select,input,label,output){font-size:15px!important}
.readableApp #virtualConsole :is(small,.virtualConsoleLegend,.virtualConsoleHead>small,#virtualSelectedNames){font-size:14px!important}
.readableApp #virtualConsole .virtualFaderLabel{font-size:16px!important}
.readableApp #virtualConsole .virtualFaderInfo{font-size:14px!important}
.readableApp #virtualConsole .virtualFaderScale{font-size:13px!important}
.readableApp #virtualConsole .virtualConsoleBrand{font-size:19px!important}
.readableApp .virtualFaderStrip{grid-template-rows:26px 20px minmax(35px,1fr) 26px 16px;gap:4px}
.readableApp .virtualConsoleHead{font-size:16px;min-height:30px}
.readableApp .virtualConsoleTitle strong{font-size:18px}
/* Controller catalogue: large text in a scrollable editorial ranking. */
.readableApp #surfaceGallery .surfaceHeading h2{font-size:29px}
.readableApp #surfaceGallery .surfaceHeading span{font-size:14px}
.readableApp #surfaceGallery .surfaceHeading button{font-size:17px!important}
.readableApp #surfaceGallery .surfaceFilters label{font-size:16px!important}
.readableApp #surfaceGallery .surfaceFilters :is(input,select){font-size:18px!important;min-height:38px}
.readableApp #surfaceGallery .surfaceFilters>span{font-size:15px}
.readableApp #surfaceGallery .surfaceCard{grid-template-columns:200px minmax(0,1fr) 214px;padding:10px;gap:16px}
.readableApp #surfaceGallery .surfaceCardBody{gap:5px}
.readableApp #surfaceGallery .surfaceCardTitle h3{font-size:20px;line-height:23px}
.readableApp #surfaceGallery .surfaceCardTitle>span{font-size:14px}
.readableApp #surfaceGallery .surfaceCard p.surfaceCardDescription{font-size:18px!important;line-height:21px;min-height:21px;max-height:42px}
.readableApp #surfaceGallery .surfaceCard p.surfaceCardFact{font-size:16px!important;line-height:19px;min-height:19px}
.readableApp #surfaceGallery .surfaceCardActions button{font-size:17px!important;min-height:38px}
.readableApp #surfaceGallery .surfacePager{font-size:17px}
.readableApp #surfaceGallery .surfacePager button{font-size:16px!important}
.readableApp #surfaceDetail .surfaceDetailHeader h2{font-size:30px}
.readableApp #surfaceDetail .surfaceDetailText>p{font-size:20px!important;line-height:1.5}
.readableApp #surfaceDetail .surfaceDetailText h3{font-size:20px}
.readableApp #surfaceDetail .surfaceSpecs span{font-size:16px}
.readableApp #surfaceDetail :is(li,button,.surfaceDetailFooter p){font-size:18px!important}
/* Readable surrounding controls; calibrated photographic hit areas stay intact. */
body.readableController{font-size:18px}
.readableController :is(header,.windowBar){height:72px;min-height:72px;box-sizing:border-box}
.readableController main{height:calc(100dvh - 72px)!important;box-sizing:border-box;min-height:0}
.readableController :is(header,.windowBar,.toolbar,.controlBar,.software,.photoExtras) :is(button,select,label,input){font-size:17px!important}
.readableController :is(header,.windowBar) :is(small,p){font-size:16px!important}
.readableController :is(#selection,#bankLabel,.toolbar,.controlBar){font-size:17px!important}
.readableController :is(.photoDetail,#readout,#status,footer strong){font-size:18px!important;line-height:1.4}
.readableController footer :is(p,small){font-size:16px!important;line-height:1.4}
.readableController dialog :is(p,li,label,select,button){font-size:18px!important;line-height:1.45}
.readableController .photoCaption{font-size:var(--photo-caption-size,10px)!important}
.readableController .photoDevice{--device-size:min(calc((100dvh - 255px)*1062/928),calc(100vw - 32px));width:var(--device-size)}
@media(max-width:1400px){
html[data-interface] body.readableApp header>.actions{gap:4px}
html[data-interface] body.readableApp header button{padding:6px 7px}
.readableApp :is(#consoleInterface,#identxModel){max-width:165px}
.readableApp #surfaceGallery .surfaceCard{grid-template-columns:176px minmax(0,1fr) 200px;gap:12px}
.readableApp #surfaceGallery .surfaceCardTitle>span:not(.surfaceRank){display:none}
}
@media(max-width:1050px){
html[data-interface] body.readableApp:not([data-mode=home]) header{height:auto;flex-wrap:wrap}
html[data-interface] body.readableApp:not([data-mode=home]) .modeNav{height:auto;flex-wrap:wrap}
.readableApp #surfaceGallery .surfaceFilters>span{display:none}
.readableApp #surfaceGallery .surfaceCard{grid-template-columns:138px minmax(0,1fr) 175px}
}
@media(max-width:700px){
.readableApp #surfaceGallery .surfaceCard{grid-template-columns:96px minmax(0,1fr) 138px;gap:8px;padding:8px}
.readableApp #surfaceGallery .surfaceCardTitle h3{font-size:18px}
.readableApp #surfaceGallery .surfaceCardActions button{font-size:15px!important}
.readableApp #surfaceGallery .surfaceCardFact b{display:none}
.readableApp #surfaceGallery .surfaceHeading h2{font-size:25px}
.readableController :is(header,.windowBar){height:88px;min-height:88px;flex-wrap:wrap}
.readableController main{height:calc(100dvh - 88px)!important}
}
}

/* Larger catalogue copy needs flexible rows, rather than clipped text. */
@media screen{
.readableApp #surfaceGallery .surfaceHeading h2{font-size:30px}
.readableApp #surfaceGallery .surfaceHeading p{display:block;font-size:17px!important;line-height:1.4;max-width:1000px;margin:6px 0 0;color:#c4d3dc}
.readableApp #surfaceGrid{grid-auto-rows:minmax(235px,auto);gap:12px}
.readableApp #surfaceGallery .surfaceCard{grid-template-columns:210px minmax(0,1fr) 225px;min-height:235px;padding:14px;gap:18px;overflow:visible}
.readableApp #surfaceGallery .surfaceImage{height:180px;align-self:center}
.readableApp #surfaceGallery .surfaceCardBody{overflow:visible;gap:8px}
.readableApp #surfaceGallery .surfaceCardTitle{flex-wrap:wrap;gap:8px 12px}
.readableApp #surfaceGallery .surfaceCardTitle h3{font-size:23px;line-height:1.3;white-space:normal;overflow:visible}
.readableApp #surfaceGallery .surfaceCardTitle .surfaceRank{display:inline-flex!important;align-items:center;justify-content:center;flex-shrink:0;background:#15505a;border:1px solid #52c3d4;border-radius:5px;color:#d6fbff;padding:3px 8px;font-size:17px;font-weight:700;line-height:1.3}
.readableApp #surfaceGallery .surfaceCard p.surfaceCardDescription{font-size:20px!important;line-height:1.45;min-height:0;max-height:none;display:block;overflow:visible}
.readableApp #surfaceGallery .surfaceCard p.surfaceCardAdvice{font-size:17px!important;line-height:1.45;color:#b2edf0;margin:0}
.readableApp #surfaceGallery .surfaceCard p.surfaceCardFact{font-size:18px!important;line-height:1.45;flex-wrap:wrap;gap:0 8px}
.readableApp #surfaceGallery .surfaceCardFact span{white-space:normal;overflow:visible;text-overflow:clip}
.readableApp #surfaceGallery .surfaceCardActions button{font-size:17px!important;white-space:normal;line-height:1.35;min-height:44px}
.readableApp #surfaceGallery .surfacePager{font-size:18px}
.readableApp #surfaceDetail .surfaceDetailText>p{font-size:21px!important;line-height:1.55}
.readableApp #surfaceDetail .surfaceDetailText>.surfaceDetailAdvice{font-size:18px!important;color:#8ce5ed;border-left:3px solid #38c9df;padding-left:12px}
.readableApp #surfaceDetail :is(li,button,.surfaceDetailFooter p){font-size:19px!important;line-height:1.5}
@media(max-width:1200px){.readableApp #surfaceGallery .surfaceCard{grid-template-columns:165px minmax(0,1fr) 200px;gap:13px}.readableApp #surfaceGallery .surfaceHeading p{font-size:16px!important}.readableApp #surfaceGallery .surfaceImage{height:155px}}
@media(max-width:750px){.readableApp #surfaceGallery .surfaceCard{grid-template-columns:110px minmax(0,1fr);gap:12px}.readableApp #surfaceGallery .surfaceCardActions{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}.readableApp #surfaceGallery .surfaceCardActions button{flex:1}.readableApp #surfaceGallery .surfaceCardTitle h3{font-size:21px}.readableApp #surfaceGallery .surfaceCard p.surfaceCardDescription{font-size:19px!important}.readableApp #surfaceGallery .surfaceImage{height:125px}.readableApp #surfaceGallery .surfaceFilters{flex-wrap:wrap}.readableApp #surfaceGallery .surfaceFilters label:first-child{max-width:none;flex-basis:100%}}
}

/* Wrap complete commands instead of squeezing enlarged labels into one row. */
@media screen and (min-width:1051px){
html[data-interface] body.readableApp:not([data-mode=home]):not(.separateStageScreen) header{height:96px;min-height:96px;align-items:center;flex-wrap:nowrap}
html[data-interface] body.readableApp:not([data-mode=home]):not(.separateStageScreen) header>div:first-child{flex:0 0 auto;min-width:0}
html[data-interface] body.readableApp:not([data-mode=home]):not(.separateStageScreen) header .brandTitle{flex-wrap:nowrap;gap:10px}
html[data-interface] body.readableApp:not([data-mode=home]):not(.separateStageScreen) header .officialBrandHeading .sonorizOfficialLogo{height:44px;width:auto;max-width:170px}
html[data-interface] body.readableApp:not([data-mode=home]):not(.separateStageScreen) header>.actions{flex:1 1 0;min-width:0;flex-wrap:wrap;justify-content:flex-end;align-content:center;gap:4px}
html[data-interface] body.readableApp:not([data-mode=home]):not(.separateStageScreen) header>.actions>*{flex-shrink:0;max-width:100%;white-space:nowrap}
html[data-interface] body.readableApp:not([data-mode=home]):not(.separateStageScreen) header button{height:36px;min-height:36px;line-height:20px;padding:6px 9px;white-space:nowrap}
html[data-interface] body.readableApp:not([data-mode=home]):not(.separateStageScreen) header :is(#consoleInterface,#identxModel){height:36px;min-height:36px;line-height:20px}
html[data-interface] body.readableApp:not([data-mode=home]):not(.separateStageScreen) header #interfaceSwitch{font-size:15px!important;line-height:20px;padding:2px 4px 2px 7px;gap:5px;height:40px}
html[data-interface] body.readableApp:not([data-mode=home]):not(.separateStageScreen) header .badge{font-size:13px;height:36px;line-height:22px;padding:6px 9px}
}
@media screen and (min-width:1900px){html[data-interface] body.readableApp:not([data-mode=home]):not(.separateStageScreen) header{height:64px;min-height:64px}}

/* Catalogue status stays immediately beside the clock and wraps on small screens. */
.catalogHeaderSummary{display:flex;flex-direction:column;gap:2px;font:500 16px/1.35 system-ui,sans-serif;color:#b6cbd7;text-align:left;letter-spacing:0;white-space:normal}.catalogHeaderSummary strong{font-size:17px;color:#70e0d2;font-weight:650}html[data-interface] body.readableApp:not([data-mode=home]):not(.separateStageScreen) header .brandTitle{flex-wrap:wrap}@media(max-width:650px){.catalogHeaderSummary{font-size:14px}.catalogHeaderSummary strong{font-size:15px}}
/* Give clock and catalogue one continuous row before wrapping header actions. */
body>header{flex-wrap:wrap;gap:18px}body>header>div:first-child{flex:1 1 650px;min-width:650px}body>header>.actions{flex:1 1 320px;min-width:300px}.brandTitle{flex-wrap:nowrap!important}.catalogHeaderSummary{flex:0 0 250px}@media(max-width:720px){body>header>div:first-child{min-width:0;flex-basis:100%}body>header>.actions{min-width:0;flex-basis:100%}.brandTitle{flex-wrap:wrap!important}.catalogHeaderSummary{flex:0 1 auto}}