/* The same surface and focus language for homepage and workspace dialogs. */
dialog,#region-dialog{border:1px solid var(--brand-ink);border-top:3px solid var(--brand-ink);border-radius:var(--brand-dialog-radius);box-shadow:var(--brand-dialog-shadow);background:var(--brand-paper);color:var(--brand-ink)}
dialog::backdrop,#region-dialog::backdrop{background:var(--brand-backdrop);backdrop-filter:blur(2px)}
.dialog-paper{border-top:0}
:is(button,a,input,textarea):focus-visible{outline:var(--brand-focus-width) solid var(--brand-gold);outline-offset:3px}
.close,.dialog-close{min-width:var(--brand-touch-target);min-height:var(--brand-touch-target)}
.local-context,.local-context button,.local-context time{font-size:var(--brand-support-size)}
#weather-detail:focus-visible{outline:var(--brand-focus-width) solid var(--brand-gold);outline-offset:5px}
#region-dialog[data-view=weather] .weather-detail{margin-top:20px}
@media(forced-colors:active){dialog,#region-dialog{border-color:CanvasText;background:Canvas;color:CanvasText;box-shadow:none}:is(button,a,input,textarea):focus-visible,#weather-detail:focus-visible{outline-color:Highlight}}

.weather-detail #weather-reading{font:400 1.5rem/1.5 var(--brand-latin);color:var(--brand-ink);margin:0 0 12px}html[lang=zh-CN] .weather-detail #weather-reading{font-family:var(--brand-display)}