/* Account renderer sizing bridge. Colors and face rules come from the canonical themes.css and palettes.css. */
html[data-theme=atelier] .clock-panel{width:30vw;height:30vw;flex-shrink:0;margin-left:0}
html[data-theme=atelier] #clock{font-size:8vw;letter-spacing:-.5vw}
html[data-theme=atelier][data-view=clock] .clock-panel{width:58vh;height:58vh}
html[data-theme=atelier][data-view=clock] #clock{font-size:13vh}
html[data-theme=atelier] .zone{font-family:Arial,sans-serif;font-size:9px}
html[data-theme=atelier] #date{font-size:1.7vw}
html[data-theme=meridian] #clock,html[data-theme=platform] #clock{font-size:16vw}
html[data-theme=meridian][data-view=clock] #clock,html[data-theme=platform][data-view=clock] #clock{font-size:23vw}
body.preview .main-display{min-height:0}
html[data-theme=atelier] body.preview .clock-panel{width:32vw;height:32vw}
html[data-theme=atelier][data-view=clock] body.preview .clock-panel{width:60vh;height:60vh}
html[data-theme=atelier] body.preview #date{font-size:2vw}
html[data-theme=atelier] body.preview .zone{font-size:1.3vw}
html[data-theme=atelier] body.preview .weather-panel{width:38%}
@media(max-width:600px) and (min-height:600px){html[data-theme=atelier] .clock-panel{width:72vw;height:72vw;margin:0 auto}html[data-theme=atelier] #clock{font-size:20vw}html[data-theme=atelier] #date{font-size:4vw}html[data-theme=atelier] .weather-panel{width:100%}html[data-theme=atelier][data-view=clock] .clock-panel{width:80vw;height:80vw}html[data-theme=atelier][data-view=clock] #clock{font-size:22vw}}

html[data-theme=atelier] .clock-line{justify-content:center;-webkit-justify-content:center}html[data-theme=atelier] .clock-panel .eyebrow{font-size:1.2vw;letter-spacing:.12em}html[data-theme=atelier] body.preview .clock-panel .eyebrow{font-size:1.4vw}
/* Optional Bold scale: same composition and colors, larger type and tighter spacing. */
html[data-scale=bold] #display{padding:3.5vh 4vw 2vh}
html[data-scale=bold] .hero{padding:4vh 0 3vh}
html[data-scale=bold] #clock{font-size:19vw}
html[data-scale=bold] .time-panel{width:66%}
html[data-scale=bold] #period{font-size:2.6vw;margin-left:1vw}
html[data-scale=bold] #date{font-size:2.7vw;margin-top:1.5vh}
html[data-scale=bold] .eyebrow{margin-bottom:2vh}
html[data-scale=bold] .temp{font-size:10.5vw}
html[data-scale=bold] .weather-symbol{font-size:5vw}
html[data-scale=bold] #condition{font-size:2vw}
html[data-scale=bold] .weather-detail{font-size:1.5vw}
html[data-scale=bold] #forecast{min-height:12vh}
html[data-scale=bold] .forecast-hour span{font-size:1.5vw}
html[data-scale=bold] .forecast-hour strong{font-size:3.6vw;margin-top:1.5vh}
html[data-scale=bold][data-view=clock] .time-panel{width:100%}
html[data-scale=bold][data-view=clock] #clock{font-size:29vw}
html[data-scale=bold][data-theme=keycap] #clock,html[data-scale=bold][data-theme=terminal] #clock{font-size:17vw}
html[data-scale=bold][data-theme=keycap][data-view=clock] #clock,html[data-scale=bold][data-theme=terminal][data-view=clock] #clock{font-size:25vw}
html[data-scale=bold][data-format="24"] #clock{font-size:17vw}
html[data-scale=bold][data-format="24"][data-view=clock] #clock{font-size:25vw}
html[data-scale=bold][data-theme=atelier] .clock-panel,html[data-scale=bold][data-theme=atelier] body.preview .clock-panel{width:36vw;height:36vw;margin:0}
html[data-scale=bold][data-theme=atelier] #clock{font-size:9vw}
html[data-scale=bold][data-theme=atelier] #date,html[data-scale=bold][data-theme=atelier] body.preview #date{font-size:2vw}
html[data-scale=bold][data-theme=atelier] #period{font-size:1.8vw}
html[data-scale=bold][data-theme=atelier] .clock-panel .eyebrow,html[data-scale=bold][data-theme=atelier] body.preview .clock-panel .eyebrow{font-size:1.1vw}
html[data-scale=bold][data-theme=atelier][data-view=clock] .clock-panel,html[data-scale=bold][data-theme=atelier][data-view=clock] body.preview .clock-panel{width:69vh;height:69vh;margin:0 auto}
html[data-scale=bold][data-theme=atelier][data-view=clock] #clock{font-size:17vh}
@media(max-width:600px) and (min-height:600px){html[data-scale=bold] .time-panel{width:100%}html[data-scale=bold] #clock,html[data-scale=bold][data-format="24"] #clock{font-size:25vw}html[data-scale=bold] .temp{font-size:20vw}html[data-scale=bold] #date{font-size:4.5vw}html[data-scale=bold] #condition{font-size:4.5vw}html[data-scale=bold] .weather-detail{font-size:3.5vw}html[data-scale=bold] .forecast-hour span{font-size:2.5vw}html[data-scale=bold] .forecast-hour strong{font-size:5vw}html[data-scale=bold][data-theme=atelier] .clock-panel,html[data-scale=bold][data-theme=atelier] body.preview .clock-panel{width:68vw;height:68vw;margin:0 auto}html[data-scale=bold][data-theme=atelier] #clock{font-size:18vw}html[data-scale=bold][data-theme=atelier] #date{font-size:4vw}html[data-scale=bold][data-theme=atelier][data-view=clock] .clock-panel,html[data-scale=bold][data-theme=atelier][data-view=clock] body.preview .clock-panel{width:84vw;height:84vw}html[data-scale=bold][data-theme=atelier][data-view=clock] #clock{font-size:22vw}}
/* Fuller weather is the default landscape Glance/Weather balance. No alternate layout setting. */
@media (orientation:landscape){
html[data-view=glance]:not([data-theme=atelier]) .time-panel,html[data-view=weather]:not([data-theme=atelier]) .time-panel{width:62%}
html[data-view=glance] #weather-panel,html[data-view=weather] #weather-panel{width:35%;text-align:center;padding-left:1.5vw;padding-right:1.5vw;flex-shrink:0;-webkit-flex-shrink:0}
html[data-view=glance] .temp,html[data-view=weather] .temp{font-size:9.2vw}
html[data-view=glance] .weather-symbol,html[data-view=weather] .weather-symbol{font-size:4.8vw;float:none}
html[data-view=glance] #condition,html[data-view=weather] #condition{font-size:2vw}
html[data-scale=bold][data-view=glance] .temp,html[data-scale=bold][data-view=weather] .temp{font-size:11.5vw}
html[data-scale=bold][data-view=glance] .weather-symbol,html[data-scale=bold][data-view=weather] .weather-symbol{font-size:5.6vw}
html[data-scale=bold][data-view=glance] #condition,html[data-scale=bold][data-view=weather] #condition{font-size:2.3vw}
}