@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@700&display=swap');   /* page titles */
/* InControl in app mode - loaded through pwa.config.php 'css', rules scoped under html.app.
   Control is app-only ('mode' => 'always'): phones get one column; wider screens keep the app look,
   with the content in a centred column (1200px at most) and the cards in a grid. */
html.app main.control { padding:4px 16px 30px; max-width:1200px; margin:0 auto; box-sizing:border-box; }
html.app #devices .d-card { border-radius:22px; }
/* Everything centred: chip rows, headings, title. A row is centred by an empty spacer at each end with an auto margin:
   a row too wide still scrolls from its first chip, and hidden chips (homes with none of a tab's devices) can't
   throw it off-centre as auto margins on the first / last chip did. */
html.app #devices .d-chips::before, html.app #devices .d-chips::after { content:""; flex:none; margin:auto; }
html.app #devices .d-area h3, html.app .pwa-large-title, .ctl-home-title { text-align:center; }
/* Page titles (Homes, Rooms...): Outfit in solid white, a soft stroke in the background's light tint drawn
   behind the letters, a drop shadow and a glow in the background's colour */
html.app .pwa-large-title, .ctl-title, .ctl-home-title {
	font:700 44px/1.15 "Outfit", system-ui, sans-serif; letter-spacing:.04em; margin:10px 0 18px; color:#fff;
	-webkit-text-stroke:1px color-mix(in srgb, var(--ctl-tint) 80%, white); paint-order:stroke fill;
	text-shadow:0 4px 14px rgba(0,0,0,.5);   /* browsers without color-mix() keep at least the drop shadow */
	text-shadow:0 4px 14px rgba(0,0,0,.5), 0 0 30px color-mix(in srgb, var(--ctl-accent) 70%, transparent);
	-webkit-font-smoothing:antialiased;
}
/* Safari: the stroke blurred the letters' edges, so it's left out there - crisp white with the same shadow and glow.
   paint-order goes back to normal too: Safari draws the text-shadow with whatever paints first, and with the
   (now empty) stroke first the shadow and glow disappeared. Only Safari knows the -apple-system-body font. */
@supports (font:-apple-system-body) {
	html.app .pwa-large-title, .ctl-title, .ctl-home-title { -webkit-text-stroke:0; paint-order:normal; }
}
@media (max-width:699px) { html.app .pwa-large-title, .ctl-home-title { font-size:36px; } }
/* No top bar: the template's bar is hidden and the page starts under the status bar */
html.app .pwa-bar { display:none; }
html.app:root { --pwa-bar-h:0px; background:var(--pwa-bg) var(--ctl-bgr, none) no-repeat center top / 100% 100% fixed; }   /* the picture behind the scrollbar (css/site.css) */

@media (max-width:699px) {
	html.app body:not(.ctl-compact) #devices .d-grid { grid-template-columns:minmax(0, 1fr); gap:12px; }
	html.app body.ctl-compact #devices .d-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
}
@media (min-width:700px) {
	html.app main.control { padding:8px 28px 40px; }
	/* cards 300-400px wide, rows centred - a short last row too */
	html.app #devices .d-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
	html.app #devices .d-grid > * { flex:1 1 300px; max-width:400px; min-width:0; }
}
/* Desktop: three cards to a row, all the same width - a short last row stays centred */
@media (min-width:900px) {
	html.app #devices .d-grid > * { flex:0 0 calc((100% - 32px) / 3); max-width:none; }
}