/* Fit the composition using real grid tracks and component dimensions, never scaling the app. */
body{height:100dvh;min-height:0!important;overflow:hidden}
#shell,#shell:has(.main-card.selected){min-height:0!important;grid-template-rows:120px minmax(0,1fr) 80px!important}
#shell>.dashboard,#shell>.dashboard:has(.main-card.selected){height:100%!important;min-height:0!important;overflow:hidden!important;margin:0;display:flex;padding:6px 24px 10px;gap:8px}
#shell>header .identity{position:absolute;top:66px!important;left:4%;margin:0!important}
#shell .material-control{top:82px!important}
#shell>footer{min-height:0!important;padding:0 4%!important}
#shell>footer .footer-actions{bottom:22px!important;transform:translateX(-50%)!important}
#shell>footer>span{top:0!important}
#shell .hud-console{flex:0 0 auto;gap:10px!important;padding:0!important}
#shell .hud-face,#shell .channels-hud .hud-face{width:var(--fit-face)!important;height:var(--fit-face)!important;aspect-ratio:1}
#shell .hud-value strong{font-size:clamp(21px,calc(var(--fit-face)*.18),32px)}
#shell .hud-label{font-size:8px;margin-top:2px}
#shell .hud-caption{font-size:7px;margin-top:4px;white-space:normal;text-align:center}
#shell:not(.window-mobile) .mobile-tabs{display:none!important}
#shell:not(.window-mobile) .dashboard-grid{flex:1 1 0!important;height:auto!important;min-height:0!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:10px!important}
#shell .dashboard-grid>.main-card{height:100%!important;min-height:0!important}
#shell .main-card .summary-open{min-height:0!important;height:100%;padding:0!important}
#shell .main-card .summary-open>.block-heading{top:39px!important;left:18px!important;right:18px!important}
#shell .main-card .summary-title{font-size:22px!important;line-height:1.1}
#shell .main-card .card-content{top:67px!important;bottom:25px!important;left:18px!important;right:18px!important;gap:4px!important}
#shell .main-card .website-count strong{font-size:28px!important;line-height:1}
#shell .main-card .website-count>span{font-size:12px!important}
#shell .main-card .website-description{font-size:10px!important;line-height:1.3}
#shell .main-card .portfolio-legend{gap:5px 14px!important;flex-wrap:wrap!important;flex-direction:row!important}
#shell .main-card .portfolio-legend>span{font-size:10px!important;line-height:1.4}
#shell.window-mobile .hud-console{grid-template-columns:repeat(2,minmax(0,1fr))}
#shell.window-mobile .mobile-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));height:auto!important;min-height:0!important;flex:0 0 auto;gap:2px;overflow:hidden!important}
#shell.window-mobile .mobile-tabs button{min-width:0!important;min-height:28px;height:28px;padding:3px!important;font-size:10px;white-space:normal}
#shell.window-mobile .dashboard-grid,#shell.window-mobile .dashboard-grid:has(.main-card.selected){display:block!important;flex:1 1 0!important;height:auto!important;min-height:0!important;overflow:visible!important}
#shell.window-mobile .dashboard-grid>.main-card{display:none!important}
#shell.window-mobile .dashboard-grid>.main-card.selected{display:block!important}
#shell.window-mobile .main-card .portfolio-legend{flex-direction:column!important}
@media(max-width:900px){
 body{padding:8px!important}
 #shell,#shell:has(.main-card.selected){height:calc(100dvh - 16px)!important;grid-template-rows:120px minmax(0,1fr) 68px!important}
 #shell>.dashboard{padding-inline:16px}
 #shell .material-control{top:80px!important;left:18px!important;right:18px!important}
 #shell>header .identity{top:63px!important}
 #shell>header .identity strong{font-size:10px}
 #shell .telemetry-label{font-size:6px}
 #shell .hud-label{font-size:6px}#shell .hud-caption{font-size:6px}
 #shell>footer>span{display:none}
 #shell>footer .footer-actions{bottom:18px!important;gap:5px}
 #shell>footer .footer-actions button{padding:5px 7px;font-size:10px;min-height:32px}
}

#shell .clock-hud .refresh-readout time{font-size:clamp(10px,calc(var(--fit-face)*.105),18px)}
@media(max-width:900px) and (max-height:740px){
 #shell,#shell:has(.main-card.selected){grid-template-rows:110px minmax(0,1fr) 60px!important}
 #shell .main-card .card-content{top:62px!important;bottom:24px!important}
 #shell .main-card .summary-title{font-size:19px!important}
 #shell .main-card .website-count strong{font-size:24px!important}
}
#shell .clock-hud .refresh-readout time{font-size:clamp(6.5px,calc(var(--fit-face)*.078),14px)}
#shell .clock-hud .clock-city,#shell .clock-hud .refresh-label{font-size:clamp(3px,calc(var(--fit-face)*.033),6px);letter-spacing:.2px}
/* Header-only refinement; accessible slider name and value stay available. */
#shell .material-control>span,#shell .material-control>output{display:none}
#shell .material-control{display:block!important;width:180px;left:50%!important;right:auto!important;transform:translateX(-50%);top:86px!important;margin:0}
#shell .material-control input{width:180px!important;background:linear-gradient(#43dce5,#43dce5) center/calc(100% - 12px) 1px no-repeat}
#shell>header .identity{left:50%!important;top:55px!important;transform:translateX(-50%);text-align:center;white-space:nowrap}
#shell>header .identity>div>span{display:none}
#shell>header .identity strong{font-size:13px;letter-spacing:2px}
#shell .shell-brand{left:calc(8% + 10.5px * var(--card-scale));top:calc(26px * var(--card-scale));transform:translate(-50%,-50%);font-size:20px;line-height:1;letter-spacing:3px;text-align:center}
@media(max-width:900px){
 #shell>header .identity{top:62px!important}
 #shell>header .identity strong{font-size:11px}
 #shell .material-control{top:79px!important;width:150px}
 #shell .material-control input{width:150px!important}
 #shell .shell-brand{font-size:17px;letter-spacing:2px}
}
#shell>header .identity>div>span{display:block;font-size:7px;margin-top:3px}
@media(max-width:900px){#shell>header .identity{top:50px!important}}

/* Explicit desktop preview does not switch to the mobile composition. */
#shell:not(.window-mobile) .hud-console{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
#shell:not(.window-mobile) .mobile-tabs{display:none!important}
#shell:not(.window-mobile) .dashboard-grid{display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.85fr)!important;grid-template-areas:'sites sites attention' 'work releases sources'!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;flex:1 1 0!important;height:auto!important;min-height:0!important;gap:10px!important}
#shell:not(.window-mobile) .dashboard-grid>.main-card{display:block!important;height:100%!important;min-height:0!important}
#shell:not(.window-mobile) .main-card .portfolio-legend{flex-direction:row!important;flex-wrap:wrap!important}
#shell>footer .footer-actions{bottom:38px!important}
#shell>header .identity{top:calc(26px * var(--card-scale) - 10px)!important}
#shell>header .identity strong{line-height:20px!important}
#shell .shell-brand{top:calc(26px * var(--card-scale) - 10px)!important;line-height:20px!important;transform:translateX(-50%)}
#shell.window-mobile .mobile-tabs{gap:5px;overflow:visible!important;padding:3px}
#shell.window-mobile .mobile-tabs button{border:1px solid #8cd5de30;border-radius:5px;background:linear-gradient(180deg,#a8eef00b,#2c7d8912);box-shadow:inset 0 0 6px #8fdfdf0c;color:#abc7cd}
#shell.window-mobile .mobile-tabs button[aria-selected=true]{border-color:#a7eff16b;color:#e0f7f8;background:linear-gradient(180deg,#a8eef018,#2c7d8926);box-shadow:inset 0 0 8px #8fdfdf22,0 0 5px #75d4dd18}
@media(max-width:900px){#shell>footer .footer-actions{bottom:32px!important}}
@media(max-height:800px){
 #shell:not(.window-mobile),#shell:not(.window-mobile):has(.main-card.selected){grid-template-rows:100px minmax(0,1fr) 72px!important}
 #shell:not(.window-mobile) .material-control{top:65px!important}
 #shell:not(.window-mobile) .main-card .card-content{top:61px!important;bottom:23px!important;gap:3px!important}
 #shell:not(.window-mobile) .main-card .website-count strong{font-size:24px!important}
 #shell:not(.window-mobile) .main-card .summary-title{font-size:20px!important}
}
/* Keep the aligned labels inside the glass, below its upper shoulder. */
#shell>header .identity,#shell .shell-brand{top:calc(44px * var(--card-scale))!important}
#shell>header .identity>div>span{display:none!important}
/* Narrower footer controls with clear space above the lower bevel. */
#shell>footer .footer-actions{bottom:48px!important;gap:6px!important}
#shell>footer .footer-actions button{min-height:30px!important;height:30px;padding:4px 10px!important;font-size:10px!important}
#shell>footer .footer-actions button[data-open="editor"]{width:120px!important}
@media(max-width:900px){
 #shell>footer .footer-actions{bottom:40px!important;gap:5px!important}
 #shell>footer .footer-actions button{padding:4px 8px!important}
 #shell>footer .footer-actions button[data-open="editor"]{width:110px!important}
}
#shell .material-control{top:calc(44px * var(--card-scale) + 22px)!important}
#shell .material-control input{height:20px!important;min-height:20px!important}
/* Main-card text inset: move text down 5 mm without moving card geometry. */
#shell .main-card .summary-title{position:relative;top:5mm}
#shell .main-card .card-content{top:calc(67px + 5mm)!important}
@media(max-width:900px) and (max-height:740px){
 #shell .main-card .card-content{top:calc(62px + 5mm)!important}
}
@media(max-height:800px){
 #shell:not(.window-mobile) .main-card .card-content{top:calc(61px + 5mm)!important}
}

/* Hero is confined to the existing profile tab, independent of baseplate density. */
#shell .shell-brand,#shell>header .head-actions{display:none!important}
#shell .hero-login-tab{position:absolute;z-index:13;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:#070706;opacity:1;overflow:hidden;cursor:pointer;box-shadow:none}
#shell .hero-login-tab img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:1;filter:none}
#shell .hero-login-tab:hover{background:#070706;box-shadow:inset 0 0 10px #dfc18522}
#shell .hero-login-tab:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #d7f5fa,inset 0 0 14px #b4e8f366}
#shell:not(.window-mobile) .material-control{top:calc(44px * var(--card-scale) + 22px)!important}