/* Glass dashboard: art is inline SVG traced from mockups/dashboard-mobile-glass-1.svg and
   mockups/dashboard-desktop-glass-b.svg. Everything is positioned in design pixels and scaled with --u. */
:root { --ink: #0f3d22; --vh: 100vh; }
@supports (height: 100dvh) { :root { --vh: 100dvh; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #6b9f4a; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: var(--vh); color: #fff; overflow-x: hidden;
  font-family: Inter, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- background (same gradient and blurs as the mockups) ---------- */
.bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: none; pointer-events: none; }
.bg-m { display: block; }

/* ---------- stage ---------- */
.page {
  height: var(--vh); overflow: hidden; display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.stage { position: relative; flex: none; overflow: hidden; display: none; user-select: none; -webkit-user-select: none; }
.canvas { position: absolute; left: 0; top: 0; }

/* phone / tablet: always fit both width and height (minus safe areas), whichever is tighter */
.stage-m {
  --u: min(calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right)) / 430), calc((var(--vh) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 888), 1.6px);
  display: block; width: calc(430 * var(--u)); height: calc(888 * var(--u));
}
.stage-m .canvas { top: calc(-44 * var(--u)); width: calc(430 * var(--u)); height: calc(932 * var(--u)); } /* the mockup's fake status bar is the phone's real one */

/* desktop: fit the whole 1440 x 840 board inside the window */
.stage-d { --u: min(calc(100vw / 1440), calc(var(--vh) / 840)); width: calc(1440 * var(--u)); height: calc(840 * var(--u)); }
.stage-d .canvas { width: calc(1440 * var(--u)); height: calc(840 * var(--u)); }
@media (min-width: 900px) and (pointer: fine), (min-width: 1100px), (orientation: landscape) and (min-width: 800px) and (min-height: 560px) {
  .stage-m, .bg-m { display: none; }
  .stage-d { display: block; }
  .bg-d { display: block; }
}

.el {
  position: absolute; margin: 0; padding: 0;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
}
.el > svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.el text { font-family: inherit; user-select: none; -webkit-user-select: none; }
.panel, .ov, .wheel, .head, .static { pointer-events: none; }
.head > svg, .wheel > svg { overflow: visible; }

/* ---------- glass bubble buttons ---------- */
.b {
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: 28%;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .12s, filter .12s;
}
.b > svg { overflow: visible; }
@media (hover: hover) { .b:not(:disabled):hover { filter: brightness(1.06); transform: translateY(-1px); } }
.b:not(:disabled):active { transform: translateY(1px) scale(.97); }
.b:disabled { cursor: not-allowed; }
.b:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.conn { border-radius: 30%; }

.preset .k-dark { display: none; }
.preset.is-active .k-dark { display: inline; }
.preset.is-active .k-pale { display: none; }
.play .ico-pause { display: none; }
.play.running .ico-pause { display: inline; }
.play.running .ico-play { display: none; }

/* ---------- header status dot ---------- */
.sdot { fill: #fff; fill-opacity: .55; }
.head.on .sdot { fill: #c9f27a; fill-opacity: 1; }
.head.on .halo { fill-opacity: .3; }

/* ---------- gauge ---------- */
.wheel .num { pointer-events: auto; cursor: pointer; font-variant-numeric: tabular-nums; }
.w-knob, .w-ksh { transition: none; }
.speed-input {
  z-index: 4; text-align: center; font-family: inherit; font-weight: 700; line-height: 1; color: var(--ink);
  font-size: calc(var(--fs) * var(--u) * .8);
  background: rgba(255,255,255,.7); border: calc(3 * var(--u)) solid #2f8a3f; border-radius: calc(28 * var(--u)); outline: 0;
}

/* ---------- messages ---------- */
.err {
  position: fixed; z-index: 20; left: 12px; right: 12px; top: calc(env(safe-area-inset-top) + 10px); margin: 0 auto; max-width: 640px;
  padding: 12px 18px; border-radius: 20px; font-size: 14px; line-height: 1.4; color: #fff;
  background: rgba(120,20,20,.62); border: 1.5px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.log {
  position: fixed; z-index: 10; left: calc(env(safe-area-inset-left) + 12px); bottom: calc(env(safe-area-inset-bottom) + 12px);
  max-width: min(520px, calc(100vw - 24px)); padding: 6px 14px; border-radius: 18px;
  background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.log summary { cursor: pointer; font-size: 13px; color: #fff; }
.log pre { margin: 8px 0 0; max-height: 192px; overflow: auto; white-space: pre-wrap; font-size: 12px; color: #fff; }