/* The phone shell. Colours are the app's own (src/shared/tokens.css). */
:root {
  color-scheme: light dark;
  --bg: light-dark(#ffffff, #1c1c1a);
  --ink: light-dark(#1a1a19, #ececea);
  --quiet: light-dark(#6b6a66, #9c9a94);
  --line: light-dark(#e6e4df, #33322e);
  --raise: light-dark(#faf9f7, #252523);
  --accent: light-dark(#b8562f, #e08a63);
  --good: light-dark(#3f7d4e, #74b184);
  --warn: light-dark(#a8621b, #d8a05e);
  --bar: calc(48px + env(safe-area-inset-top, 0px));
  font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
button { font: inherit; color: inherit; }

/* Sign in */
body.login { display: grid; place-items: center; padding: 24px 16px; min-height: 100dvh; }
.card { width: min(100%, 360px); display: grid; gap: 14px; }
.card h1 { margin: 0; font-size: 1.5rem; font-weight: 600; }
.quiet { margin: 0; color: var(--quiet); }
.error { margin: 0; color: var(--accent); }
.card label { display: grid; gap: 6px; font-size: 0.9rem; color: var(--quiet); }
.card input {
  font: inherit; font-size: 16px; /* 16px keeps iOS from zooming in */
  padding: 12px; border-radius: var(--radius, 10px); border: 1px solid var(--line);
  background: var(--raise); color: var(--ink);
}
.card input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card button {
  margin-top: 6px; padding: 13px; border: 0; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 600;
}

/* Shell */
body.shell { height: var(--app-vh, 100dvh); overflow: hidden; display: flex; flex-direction: column; }
.bar {
  flex: none; height: var(--bar); padding: env(safe-area-inset-top, 0px) 10px 0;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line); background: var(--raise);
}
.toggle {
  margin: 0 auto; display: inline-flex; padding: 3px; gap: 2px;
  border-radius: 10px; background: var(--line);
}
.toggle button {
  min-width: 84px; min-height: 34px; padding: 0 14px; border: 0; border-radius: 8px;
  background: transparent; color: var(--quiet); font-weight: 600;
}
.toggle button[aria-selected="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.15); }
.icon {
  width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent;
}
.icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
/* keeps the toggle centred when the list button is hidden */
.bar > .icon[hidden] { display: block !important; visibility: hidden; }
.dot { width: 40px; display: grid; place-items: center; }
.dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); }
.dot.on::before { background: var(--good); }

.banner { margin: 0; padding: 10px 14px; font-size: 0.9rem; background: var(--raise); border-bottom: 1px solid var(--line); }
.banner.warn { color: var(--warn); }
.stage { position: relative; flex: 1; min-height: 0; }
.view, .stage iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  visibility: hidden; background: var(--bg);
}
.view.on { visibility: visible; }
.stage.away iframe { pointer-events: none; opacity: 0.55; }
.waiting { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--quiet); }

.drawer { position: fixed; inset: 0; z-index: 10; }
.scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.35); }
.sheet {
  position: absolute; inset: 0 auto 0 0; width: min(86vw, 360px);
  display: flex; flex-direction: column; background: var(--bg);
  padding-top: env(safe-area-inset-top, 0px); box-shadow: 2px 0 16px rgb(0 0 0 / 0.25);
}
.sheet iframe { flex: 1; width: 100%; border: 0; }
.signout { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.signout button { border: 0; background: none; color: var(--quiet); padding: 6px 0; }

.overlay { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; background: var(--bg); height: var(--app-vh, 100dvh); padding-top: env(safe-area-inset-top, 0px); }
.overlay iframe { flex: 1; width: 100%; border: 0; }