/* Shared desktop layout refinements, using the browser's normal page scroll. */
/* Web welcome: one main connection action, with demo kept in the footer. */
body.device-locked:has(#main>.connection-empty) .carbon-workspace{display:flex;flex-direction:column}
body.device-locked:has(#main>.connection-empty) .carbon-toolbar{display:none}
body.device-locked:has(#main>.connection-empty) #device-telemetry{visibility:hidden}
body.device-locked:has(#main>.connection-empty) #main{flex:1;display:flex;flex-direction:column}
body.device-locked:has(#main>.connection-empty) .connection-empty{flex:1;min-height:280px}
.connection-empty :is(h1,.connection-copy){display:grid;grid-template-columns:minmax(0,1fr);max-width:100%}
.connection-empty :is(.connection-caption,.connection-caption-size){grid-area:1/1}
.connection-empty .connection-caption-size{visibility:hidden;pointer-events:none;user-select:none}
.connection-empty>:first-child{position:relative}
.connection-empty.is-connecting::before{display:none}
.connection-empty.is-connecting>:first-child::before{content:'';position:absolute;box-sizing:content-box;top:-40px;left:50%;margin-left:-12px;width:20px;height:20px;border:2px solid #454b50;border-top-color:#dfe3e5;border-radius:50%;animation:connection-spin .7s linear infinite;pointer-events:none}
html[data-theme=light] .connection-empty.is-connecting>:first-child::before{border-color:#bdbdbd;border-top-color:#333333}
@media(prefers-reduced-motion:reduce){.connection-empty.is-connecting>:first-child::before{animation:none}}
.connection-empty .connection-primary{margin-top:12px;min-width:160px;max-width:100%;min-height:44px;justify-content:center}
.carbon-workspace>footer .connection-footer-actions{display:flex;align-items:center;flex-wrap:wrap;gap:0 20px;min-width:0;max-width:100%;flex:0 1 auto}
.carbon-workspace>footer .connection-footer-actions[hidden]{display:none}
.carbon-workspace>footer :is(.hardware-demo-entry,.connection-help){flex:0 0 auto;white-space:nowrap;margin:0;padding:8px 0;font-size:12px;line-height:1.5;color:var(--muted);text-align:left}
.carbon-workspace>footer :is(.hardware-demo-entry,.connection-help):hover{color:var(--text)}
.carbon-workspace>footer .hardware-demo-entry[hidden]{display:none}
body.device-locked:has(#main>.connection-empty) .carbon-workspace>footer #save-status{display:none}
body.device-locked:has(#main>.connection-empty) .carbon-workspace>footer .hardware-demo-entry[hidden]{display:inline-block;visibility:hidden;pointer-events:none}
body.device-locked:has(#main>.connection-empty) .carbon-workspace>footer{margin-top:auto}
@media(max-width:700px){
 body.device-locked:has(#main>.connection-empty) .carbon-shell{display:flex;flex-direction:column}
 body.device-locked:has(#main>.connection-empty) .carbon-sidebar{flex-shrink:0}
 body.device-locked:has(#main>.connection-empty) .carbon-workspace{flex:1}
}
/* Explicit leading prevents Japanese fallback-font metrics enlarging the row. */
html[data-web-ui] .connection-badge{line-height:18px}
html[data-web-ui] :is(.firmware-diagnostics .text-button,.keyboard-note h3){line-height:1.5}
html[data-web-ui] .firmware-card .firmware-update-button{width:var(--firmware-action-width,171px);min-width:0;max-width:100%;justify-content:center}
@media(min-width:701px){html[data-web-ui] .firmware-card .firmware-component{grid-template-columns:minmax(130px,.8fr) minmax(0,2fr) var(--firmware-action-width,171px)}}
@media(max-width:380px){html[data-web-ui] .firmware-card .firmware-update-button{width:100%}}
html[data-web-ui]{overflow-anchor:none}
@media(min-width:701px){
 html[data-web-ui] .sensitivity-card .axis-heading{min-height:76px}
}
html[data-web-ui] .carbon-toolbar>.section-heading>.macro-heading-actions{
 align-self:flex-end;position:relative;
 top:calc(var(--toolbar-panel-gap) - var(--toolbar-action-gap));
}
html[data-web-ui] .macro-heading-actions .button{padding-block:8px}
html[data-web-saving-settings] .profile-picker [data-action=profiles]:disabled{opacity:1}
/* Keep complete translated SPDT headings readable on small phone screens.
   The buttons still share the timing-field column on their own heading row. */
@container performance (max-width:360px){
 html[data-web-ui] .debounce-card>.card-heading{row-gap:8px}
 html[data-web-ui] .debounce-card>.card-heading>h2{grid-column:1/-1}
 html[data-web-ui] .spdt-button-controls{grid-column:2}
}
@media(min-width:701px) and (max-width:920px){
 html[data-web-ui] .carbon-brand{justify-content:flex-start}
 html[data-web-ui] .carbon-brand>img{width:auto;height:28px}
}

/* Narrow footer: preferences stay together on the left, below the demo link. */
@media(max-width:700px){
 html[data-web-ui] .carbon-workspace>footer{flex-wrap:wrap}
 html[data-web-ui] .carbon-workspace>footer .footer-meta{flex:1 1 100%;align-items:flex-start}
 html[data-web-ui] footer :is(.mobile-language-picker,.mobile-appearance-picker){justify-content:flex-start}
 html[data-web-ui] .footer-meta .app-version{align-self:flex-end;text-align:right}
}