/* Shared look for every Bay Timer page: colours, top bar, and the iPhone bottom tab bar. */
:root{
  --bg:#f4f3ef; --panel:#ffffff; --ink:#1d1f22; --muted:#6b6f76; --line:#e3e1db; --field:#fbfaf8;
  --ok:#1f8a4c; --ok-bg:#e5f4ea; --warn:#b86e00; --warn-bg:#fff2dc; --alert:#c62f2f; --alert-bg:#fde8e6;
  --idle:#9aa0a8; --accent:#c8102e;
  --mono:"IBM Plex Mono",ui-monospace,monospace; --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --tabbar-h:0px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#131416; --panel:#1c1e21; --ink:#ecebe7; --muted:#9a9ea5; --line:#2c2f33; --field:#17191b;
    --ok:#4cc27e; --ok-bg:#16301f; --warn:#f0a63a; --warn-bg:#35270f; --alert:#ff6b61; --alert-bg:#3a1a18; --idle:#5d6269;
    color-scheme:dark; }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--sans);
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}

/* ---------- top bar (sits below the iPhone status bar / notch) */
header.top{display:flex;align-items:center;gap:18px;padding:12px 24px;padding-top:calc(12px + env(safe-area-inset-top));
  padding-left:calc(24px + env(safe-area-inset-left));padding-right:calc(24px + env(safe-area-inset-right));
  border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:20}
header.top .brand{font-size:17px;font-weight:600;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap}
header.top .brand .dot{width:10px;height:10px;border-radius:2px;background:var(--accent)}
header.top .topnav{display:flex;gap:4px;margin-left:8px}
header.top .topnav a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;padding:6px 10px;border-radius:6px}
header.top .topnav a:hover{color:var(--ink)}
header.top .topnav a[aria-current="page"]{color:var(--ink);background:var(--bg)}
header.top .spacer{flex:1}
header.top .clock{font:500 14px var(--mono);color:var(--muted)}
.conn{font-size:13px;color:var(--alert);display:none;white-space:nowrap}

/* ---------- bottom tab bar on phones */
nav.tabbar{display:none}
@media (max-width:700px){
  :root{--tabbar-h:56px}
  header.top{padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top))}
  header.top .topnav{display:none}
  nav.tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--panel);
    border-top:1px solid var(--line);height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom)}
  nav.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    color:var(--muted);text-decoration:none;font-size:11px;font-weight:500}
  nav.tabbar a svg{width:24px;height:24px}
  nav.tabbar a[aria-current="page"]{color:var(--accent)}
}

/* ---------- shared bits */
.btn{font:500 14px var(--sans);padding:8px 14px;border-radius:7px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.btn:disabled{opacity:.5;cursor:wait}

/* ---------- full-screen live viewer */
.viewer{position:fixed;inset:0;z-index:100;background:#000;color:#fff;display:none;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.viewer.open{display:flex}
.viewer .vbar{display:flex;align-items:center;gap:12px;padding:10px 14px}
.viewer .vbar .t{flex:1;min-width:0}
.viewer .vbar .t b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer .vbar .t span{font-size:12px;color:#aaa}
.viewer button{background:rgba(255,255,255,.12);border:none;color:#fff;border-radius:20px;padding:8px 14px;font:500 14px var(--sans);cursor:pointer}
.viewer button.on{background:#fff;color:#000}
.viewer .vclose{width:40px;height:40px;padding:0;font-size:22px;line-height:40px}
.viewer .stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;touch-action:pan-y}
.viewer .stage img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.viewer .vmsg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:#ddd;font-size:15px;pointer-events:none}
.viewer .live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.5px}
.viewer .live i{width:8px;height:8px;border-radius:50%;background:#ff3b30;animation:pulse 1.6s infinite}
.viewer .live.late i{background:#ffb020;animation:none}
@keyframes pulse{50%{opacity:.35}}
.viewer .vfoot{display:flex;align-items:center;gap:10px;padding:10px 14px}
.viewer .vbays{flex:1;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.viewer .nav{width:44px;height:44px;padding:0;font-size:22px;flex:none}
.chipb{display:inline-flex;align-items:center;gap:6px;font:500 13px var(--sans);padding:5px 10px;border-radius:16px;
  background:rgba(255,255,255,.12);color:#fff;white-space:nowrap}
.chipb b{font-family:var(--mono);font-weight:600}
.chipb.ok{background:#1f8a4c} .chipb.warn{background:#b86e00} .chipb.alert{background:#c62f2f}