/* The phone page, in the Home Hub's own look: dark green-black over the
   blurred meadow, cream text, gold accents, the hub's green / amber / red
   for state. Sized to fit one phone screen without scrolling. */
:root {
  --bg: #0B1108; --panel: #131B0F; --panel-2: #1B2516; --border: #2B3726;
  --ink: #EFE8D2; --ink-2: #9DA58E; --chip-ink: #EFE8D2; --accent: #E5D8AE;
  --glass: rgba(19, 27, 15, .82); --glass-line: #2B3726;
  --tile: rgba(19, 27, 15, .78); --tile-radius: 12px; --radius: 12px;
  --shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
html, body { height: 100%; background: var(--bg); }
body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--ink); }
body::before { content: ""; position: fixed; inset: -30px; z-index: -1;
               background: url(/meadow.jpg) center / cover no-repeat; filter: blur(16px) brightness(.42) saturate(.9); }
#stage { position: relative; left: 0; transform: none; width: 100%; max-width: 560px; margin: 0 auto;
         background: transparent; padding: calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));
         min-height: 100dvh; display: flex; flex-direction: column; gap: 5px; touch-action: manipulation; }
#linkdot, #toast { position: fixed; }
#toast { background: var(--panel-2); color: var(--ink); border: 1px solid var(--border); }

.p-head { display: flex; align-items: center; gap: 8px; }
.p-clock { margin-right: auto; }
.p-clock .time { font-size: 24px; font-weight: 600; line-height: 1.1; }
.p-clock .date { font-size: 12px; color: var(--ink-2); }
.p-btn { border: 1px solid var(--border); border-radius: 18px; padding: 6px 12px; background: var(--panel-2); color: var(--ink);
         font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.p-btn svg.mdi { width: 18px; height: 18px; }
.p-btn:active { transform: scale(.95); }
.p-alloff { background: rgba(210, 87, 63, .22); border-color: rgba(210, 87, 63, .55); color: #f3c2b6; }
.p-alloff.dim { background: var(--panel-2); border-color: var(--border); color: var(--ink-2); }
.p-install { background: var(--accent); color: #10190C; border-color: var(--accent); font-weight: 600; }

.p-doors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.p-doors .chip { height: 30px; padding: 0 4px; gap: 3px; font-size: 11.5px; background: var(--tile); border: 1px solid var(--border);
                 border-radius: 15px; color: var(--ink); justify-content: center; min-width: 0; }
.p-doors .chip svg.mdi { width: 15px; height: 15px; }

.p-sec { font-size: 10.5px; color: var(--ink-2); margin: 3px 4px 0; text-transform: uppercase; letter-spacing: .8px; }
.p-grid { display: grid; gap: 5px; }
.p-grid.g2 { grid-template-columns: repeat(2, 1fr); }
.p-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.p-grid.g5 { grid-template-columns: repeat(5, 1fr); }
.p-grid.g6 { grid-template-columns: repeat(6, 1fr); }
.p-grid > .tile { min-height: 0; height: 62px; padding: 5px 2px; gap: 3px; }
.p-grid.tall > .tile { height: 66px; }
.p-grid.g2 > .tile { height: 42px; padding: 4px 12px; }
.tile { --icon: 30px; color: var(--ink); }
.tile .pri { font-size: 11.5px; font-weight: 600; }
.tile .sec { font-size: 10.5px; color: var(--ink-2); }
.p-grid.tall .tile .pri { font-size: 12.5px; }
.tile.armed { background: rgba(216, 163, 62, .28); border-color: #D8A33E; }
.tile.armed .sec { color: #f0d9a8; font-weight: 600; }
.tile:active { background: rgba(229, 216, 174, .18); }
.tile.light.on .shape { box-shadow: 0 0 12px 2px rgba(var(--c), .45); }
.shape.spin svg { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flash { 0% { background: rgba(229, 216, 174, .45); box-shadow: 0 0 0 3px rgba(var(--c), .7); }
                   100% { background: var(--tile); box-shadow: 0 0 0 0 rgba(var(--c), 0); } }
.tile.dimmable::after { height: 4px; }

/* short phones: shrink a little more so nothing scrolls */
@media (max-height: 700px) {
  .p-grid > .tile { height: 54px; } .p-grid.tall > .tile { height: 58px; }
  .tile { --icon: 26px; } .p-sec { display: none; } .p-grid.g2 > .tile { height: 38px; }
}