/* The wall tablets' look on a phone: near-black, large rounded cards, one blue accent. */
:root {
  --bg: #0B0B0C; --bg-top: #141518; --panel: #151619; --card: #1F2024; --card-pressed: #2A2B30;
  --stroke: #2C2D32; --text: #F2F2F3; --muted: #8E9097; --faint: #55575E; --accent: #3E6AE1;
  --green: #31C46C; --amber: #F0B429; --red: #E5484D; --fire: #E8642C;
  --fabric: #3A3C42; --slat: #2C2E33; --rim-top: rgba(255,255,255,.30); --rim-bottom: rgba(255,255,255,.14);
  --shadow: 0 6px 16px rgba(0,0,0,.45);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #EEF4FC; --bg-top: #F7FAFE; --panel: #FFFFFF; --card: #DBE6F8; --card-pressed: #C8D9F4;
    --stroke: #CFDBEE; --text: #0F1E3A; --muted: #5A6B8C; --faint: #9AAAC6; --accent: #2563EB;
    --green: #15A04A; --amber: #D97706; --red: #DC2626; --fire: #EA580C;
    --fabric: #A9C1E8; --slat: #8FAEDF; --rim-top: rgba(255,255,255,.95); --rim-bottom: rgba(42,74,140,.10);
    --shadow: 0 6px 16px rgba(42,74,140,.22);
    color-scheme: light;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh; min-height: 100dvh;
  background: linear-gradient(var(--bg-top), var(--bg) 40%);
  color: var(--text);
  font: 15px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-user-select: none; user-select: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- top bar and dock ---- */
.top { display: flex; align-items: center; padding: 10px 16px 6px; gap: 8px; }
.title { font-size: 26px; font-weight: 700; letter-spacing: -.3px; }
.pills { margin-left: auto; display: flex; gap: 6px; }
.pill { font-size: 11px; font-weight: 600; letter-spacing: .6px; padding: 4px 9px; border-radius: 99px; border: 1px solid currentColor; }
.pill.green { color: var(--green); } .pill.amber { color: var(--amber); } .pill.red { color: var(--red); } .pill.muted { color: var(--muted); }

main { padding: 6px 16px calc(96px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.loading, .note { color: var(--muted); text-align: center; padding: 40px 0; }

.dock {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--stroke);
}
.dock[hidden] { display: none; }
.dock button { flex: 1; max-width: 140px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 14px; color: var(--muted); font-size: 11px; font-weight: 600; }
.dock button.on { color: var(--accent); }

/* ---- cards and tiles ---- */
.card {
  background: var(--panel); border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow), inset 0 1px 0 var(--rim-top);
}
.card h2 { margin: 2px 4px 2px; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; min-width: 0; }

.tile {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 16px; text-align: left;
  background: var(--card); border-radius: 18px; box-shadow: var(--shadow), inset 0 1px 0 var(--rim-top), inset 0 -1px 0 var(--rim-bottom);
  transition: transform .12s ease, background-color .2s ease;
}
.tile:active:not(:disabled) { transform: scale(.97); background: var(--card-pressed); }
.tile.on { background: var(--tone, var(--accent)); color: #fff; }
.tile.on .sub { color: rgba(255,255,255,.85); }
.tile:disabled { opacity: .45; }
.tile.big { min-height: 84px; }
.tile .icon { position: relative; width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
.tile .icon svg { width: 26px; height: 26px; }
.tile .ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(#fff calc(var(--p) * 1turn), rgba(255,255,255,.25) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); }
.tile .text { min-width: 0; display: flex; flex-direction: column; }
.tile .label { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .sub { font-size: 13px; color: var(--muted); }
.tone-fire { --tone: var(--fire); } .tone-dim { --tone: color-mix(in srgb, var(--fire) 60%, var(--card)); } .tone-amber { --tone: var(--amber); }

/* ---- blinds ---- */
.blinds { display: flex; justify-content: space-between; gap: 6px; padding: 4px 0 0; }
.blind { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.blind .name { font-size: 12px; line-height: 1.2; color: var(--muted); text-align: center; min-height: 2.4em; display: flex; align-items: flex-end; justify-content: center; }
.track {
  position: relative; width: 100%; max-width: 58px; height: 200px; border-radius: 14px; overflow: hidden; touch-action: none;
  background: linear-gradient(#cfe3ff22, #cfe3ff08), var(--card); box-shadow: inset 0 2px 6px rgba(0,0,0,.35), inset 0 0 0 1px var(--stroke);
}
.track .fabric {
  position: absolute; left: 0; right: 0; top: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 13px, var(--slat) 13px 15px),
              linear-gradient(to right, color-mix(in srgb, var(--fabric) 86%, #000), var(--fabric), color-mix(in srgb, var(--fabric) 86%, #000));
  border-bottom: 4px solid color-mix(in srgb, var(--fabric) 70%, #000);
}
.track .marker { position: absolute; left: 6px; right: 6px; height: 2px; background: var(--amber); border-radius: 2px; }
.track.disabled { opacity: .45; }
.blind .pct { font-size: 15px; font-weight: 600; }
.blind .at { font-size: 11px; color: var(--amber); min-height: 14px; }
.blinds .split { width: 1px; background: var(--stroke); margin: 24px 2px 40px; flex: none; }

/* ---- pool ---- */
.modes { display: flex; gap: 4px; padding: 4px; background: var(--card); border-radius: 18px; box-shadow: var(--shadow), inset 0 1px 0 var(--rim-top); }
.modes button { flex: 1; height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; font-weight: 600; }
.modes button.on { background: var(--accent); color: #fff; }
.modes button:disabled { opacity: .45; }
.small { font-size: 13px; color: var(--muted); padding: 0 4px; }
.small.red { color: var(--red); }
.water { display: flex; align-items: center; gap: 10px; padding: 2px 4px; }
.water .now { flex: 1; }
.water .now b { display: block; font-size: 34px; font-weight: 300; line-height: 1.1; }
.water .now.stale b { color: var(--faint); }
.water .set { display: flex; align-items: center; gap: 8px; }
.water .set .val { width: 52px; text-align: center; }
.water .set .val b { display: block; font-size: 24px; font-weight: 600; }
.round { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--card); box-shadow: var(--shadow), inset 0 1px 0 var(--rim-top); }
.round:active:not(:disabled) { transform: scale(.94); }
.round:disabled { opacity: .4; }

/* ---- schedules ---- */
.everyday { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; color: var(--muted); margin: 4px 4px 0; }
.window { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 12px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow), inset 0 1px 0 var(--rim-top); }
.window.off { background: var(--panel); box-shadow: inset 0 0 0 1px var(--stroke); }
.window input[type=time] {
  flex: 1; min-width: 0; height: 40px; padding: 0 6px; border-radius: 12px; border: 0; text-align: center;
  background: var(--panel); color: var(--text); font-size: 16px; font-weight: 600; -webkit-appearance: none; appearance: none;
}
.window input[type=time]::-webkit-calendar-picker-indicator { display: none; }
.window.off input[type=time] { color: var(--muted); background: var(--card); }
.window .to { font-size: 13px; color: var(--muted); }
.window .x { width: 34px; height: 34px; display: grid; place-items: center; color: var(--muted); border-radius: 10px; }
.switch { position: relative; width: 50px; height: 30px; flex: none; border-radius: 99px; background: var(--stroke); transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(20px); background: #fff; }
.add { justify-content: center; min-height: 52px; color: var(--accent); font-weight: 600; }

/* ---- pairing ---- */
.pair { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.pair p { margin: 0; color: var(--muted); }
.pair ol { margin: 0; padding-left: 20px; color: var(--muted); display: grid; gap: 6px; }
.pair label { font-size: 13px; color: var(--muted); display: grid; gap: 6px; min-width: 0; }
/* Full width of the card: an input's own default width runs off a narrow phone's screen. */
.pair input { width: 100%; min-width: 0; box-sizing: border-box; height: 52px; border-radius: 14px; border: 1px solid var(--stroke); background: var(--card); color: var(--text); padding: 0 14px; font-size: 18px; -webkit-user-select: text; user-select: text; }
.pair input.code { font-size: 28px; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.primary { height: 54px; border-radius: 16px; background: var(--accent); color: #fff; font-weight: 600; font-size: 17px; }
.primary:disabled { opacity: .5; }
.share-icon { width: 18px; height: 18px; vertical-align: -3px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.error { color: var(--red); }

.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); padding: 12px 16px; border-radius: 14px;
  background: var(--red); color: #fff; font-weight: 600; box-shadow: var(--shadow); transition: opacity .3s; opacity: 0; pointer-events: none;
}
.toast.show { opacity: 1; }

/* ---- cameras and door stations ---- */
.tone-green { --tone: var(--green); } .tone-red { --tone: var(--red); }
.cam-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.cam-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.cam-note { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; color: rgba(255,255,255,.7); font-size: 13px; pointer-events: none; }
.cam-badge { position: absolute; top: 10px; left: 10px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(0,0,0,.55); color: #fff; pointer-events: none; }
.cam-badge.green { background: var(--green); } .cam-badge.amber { background: var(--amber); color: #111; }
.cam-actions { display: flex; flex-direction: column; gap: 8px; }
.cam-actions .tile { width: 100%; }
.tile.ptt { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
.cam-close { position: absolute; top: calc(env(safe-area-inset-top) + 10px); right: 10px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; }
.cam-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Full screen: the picture fills the phone (turn it sideways for more), controls along the bottom. */
.card.cam.big { position: fixed; inset: 0; z-index: 40; margin: 0; border-radius: 0; background: #000; display: flex; flex-direction: column;
  justify-content: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 12px) env(safe-area-inset-left); }
.card.cam.big h2 { display: none; }
.card.cam.big .cam-frame { flex: 1; aspect-ratio: auto; border-radius: 0; }
.card.cam.big .cam-actions { padding: 12px 12px 0; }
body.bigcam .dock, body.bigcam .top { visibility: hidden; }

/* "hidden" always wins over a display set above. */
[hidden] { display: none !important; }