/* motion.css: the Motion screen (#/motion), live pictures of movement over
 * the plan, plus its Home tile and the motion section of the Sensors screen.
 *
 * Unmistakably not the heat map: violet-black instead of navy, magenta and
 * warm white instead of the thermal palette, and the plan sunk under a dark
 * wash (views/motion.js draws that, and everything on the plan, on the
 * canvas). The map owns the whole space between the top bar and the bottom
 * of the screen (.view-fill, with the tab bar put away); everything else
 * floats on it. Positions come from CSS variables the view sets from
 * measured heights: --mo-top (the bottom of the top controls and the
 * banner) and --mo-peek (what the drawer, the setup panel or the replay
 * panel covers). Under the top bar: the method badge and Live or Replay,
 * left-aligned (the map's north dial keeps the top right corner); with a
 * simulation on screen the amber chip is the only badge, and Live or Replay
 * moves up into the top row in the live dot's place, so Simulated is said
 * once, with one line under it. The legend sits in the drawer's peek, under
 * the picture (the map's scale bar keeps the bottom left).
 *
 * What it refuses to do: animate for someone who asked for less motion, put
 * a control under another one, or let a drag on the drawer's handle scroll
 * the page (touch-action: none there; its body scrolls on its own).
 */

.motion-view {
  --mo-top: 66px; --mo-peek: 150px;
  --mo-ground: #05010e;
  --mo-glass: rgba(14, 6, 32, .72);
  --mo-glass-hi: rgba(28, 12, 60, .88);
  --mo-edge: rgba(196, 181, 253, .18);
  --mo-violet: #a78bfa;
  --mo-magenta: #f472b6;
  --mo-hot: #fdf4ff;
  background: var(--mo-ground);
  isolation: isolate;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.mo-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; background: var(--mo-ground); }
.motion-view .mapview-canvas { cursor: grab; }
.motion-view.mo-setting .mapview-canvas { cursor: crosshair; }

/* ── Glass ────────────────────────────────────────────────────────────── */
.mo-chip, .mo-round, .mo-drawer, .mo-setup, .mo-replay, .mo-state-card, .mo-banner, .mo-badge, .mo-live-seg {
  background: var(--mo-glass);
  -webkit-backdrop-filter: saturate(150%) blur(16px); backdrop-filter: saturate(150%) blur(16px);
  border: 1px solid var(--mo-edge);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* ── Top controls ─────────────────────────────────────────────────────── */
.mo-top {
  position: absolute; z-index: 5; top: 10px;
  left: calc(var(--safe-l) + 12px); right: calc(var(--safe-r) + 12px);
  display: flex; align-items: center; gap: 8px; pointer-events: none;
}
.mo-top > * { pointer-events: auto; }
.mo-top > .grow { pointer-events: none; }
.mo-round {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  transition: transform 120ms var(--ease), background 200ms;
}
.mo-round:active { transform: scale(.9); background: var(--mo-glass-hi); }
.mo-round .ico { width: 20px; height: 20px; }
.mo-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px; border-radius: 999px;
  font: 700 13px/1 var(--head); color: var(--ink); white-space: nowrap; min-width: 0;
  transition: transform 120ms var(--ease), background 200ms;
}
button.mo-chip:active { transform: scale(.95); background: var(--mo-glass-hi); }
.mo-chip .ico-xs { color: var(--ink-3); }
.mo-chip-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mo-heard { color: var(--ink-3); font-weight: 600; }
.mo-heard::before { content: '\00b7'; margin: 0 6px 0 2px; color: var(--ink-3); }
.mo-dot { width: 9px; height: 9px; border-radius: 3px; transform: rotate(45deg); background: var(--ink-3); flex: none; }
.mo-mode[data-mode="ring"] .mo-dot { background: var(--mo-magenta); box-shadow: 0 0 10px rgba(244, 114, 182, .9); }
.mo-mode:is([data-mode="listener"], [data-mode="phone"]) .mo-dot { background: var(--mo-violet); box-shadow: 0 0 10px rgba(167, 139, 250, .9); }
.mo-mode[data-mode="sim"] { color: #fde68a; border-color: rgba(251, 191, 36, .45); }
.mo-mode[data-mode="sim"] .mo-dot { background: var(--warn); box-shadow: 0 0 10px rgba(251, 191, 36, .8); }

.mo-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); flex: none; }
.mo-live-dot[data-state="live"] { background: #f0abfc; box-shadow: 0 0 0 0 rgba(240, 171, 252, .7); animation: moPing 1.6s var(--ease) infinite; }
.mo-live-dot[data-state="late"] { background: var(--warn); }
.mo-live-dot[data-state="stale"] { background: var(--bad); }
@keyframes moPing { 0% { box-shadow: 0 0 0 0 rgba(240, 171, 252, .7); } 70% { box-shadow: 0 0 0 9px rgba(240, 171, 252, 0); } 100% { box-shadow: 0 0 0 0 rgba(240, 171, 252, 0); } }

.mo-banner {
  position: absolute; z-index: 4; top: 62px;
  left: calc(var(--safe-l) + 12px); right: calc(var(--safe-r) + 12px);
  margin: 0; padding: 8px 12px; border-radius: 12px;
  font-size: calc(12.5 * var(--fs)); line-height: 1.4; color: var(--ink-2);
}
.mo-banner.mo-banner-sim { color: #fde68a; border-color: rgba(251, 191, 36, .4); background: rgba(40, 24, 4, .7); }

.mo-fit { position: absolute; z-index: 4; right: calc(var(--safe-r) + 12px); bottom: calc(var(--mo-peek) + 12px); }
/* It glides only with the drawer (layout() toggles both): when the drawer jumps, it jumps too, never left under the handle. */
.mo-fit.settle { transition: bottom 260ms var(--ease); }

/* ── Over the map: which method is speaking, Live or Replay ──────────── */
.mo-tools {
  position: absolute; z-index: 4; top: calc(var(--mo-top) + 6px);
  left: calc(var(--safe-l) + 12px); right: calc(var(--safe-r) + 12px);
  display: flex; align-items: center; gap: 8px; pointer-events: none;
}
.mo-tools > * { pointer-events: auto; }
.mo-live-seg { flex: none; width: 150px; border-radius: 16px; }
.mo-live-seg .seg-opt { min-height: 36px; }
/* A simulation: Live and Replay in the top row, where the live dot stood
   (views/motion.js layout, 375 px and up). The amber chip never gives way
   there: it is the one place that says Simulated, so the switch narrows. */
.mo-top > .mo-live-seg { flex: 0 1 140px; width: auto; min-width: 124px; }
.motion-view.mo-sim .mo-mode { flex: none; }
.mo-badge {
  display: inline-flex; align-items: center; gap: 7px; height: 44px; min-width: 0; padding: 0 12px 0 13px; border-radius: 999px;
  font: 700 12.5px/1 var(--head); color: #ede9fe; white-space: nowrap;
  transition: transform 120ms var(--ease), background 200ms;
}
.mo-badge:active { transform: scale(.96); background: var(--mo-glass-hi); }
.mo-badge-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mo-badge .ico-xs { color: var(--ink-3); flex: none; }
.mo-badge-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--mo-violet); }
.mo-badge[data-key^="ring"] .mo-badge-dot { background: var(--mo-magenta); }
.mo-badge[data-key="sim"] { color: #fde68a; border-color: rgba(251, 191, 36, .5); background: rgba(40, 24, 4, .78); }
.mo-badge[data-key="sim"] .mo-badge-dot { background: var(--warn); }

/* ── The legend, under the picture (the drawer's peek, the replay panel) ── */
.mo-legend { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; font-size: calc(11.5 * var(--fs)); line-height: 1.4; color: var(--ink-3); }
.mo-replay .mo-legend { margin: 0; }
.mo-ramp { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px 6px; }
.mo-ramp-bar { width: 40px; height: 6px; border-radius: 3px; flex: none; }
.mo-ramp-start { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #ede9fe; background: #0a041a; flex: none; margin-left: 6px; }
.mo-ramp-end { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85); margin-left: 6px; }

/* ── The card when there is nothing to show ───────────────────────────── */
.mo-state {
  position: absolute; z-index: 4; left: 0; right: 0; top: var(--mo-top); bottom: var(--mo-peek);
  display: flex; align-items: center; justify-content: center; padding: 12px calc(var(--safe-r) + 16px) 12px calc(var(--safe-l) + 16px);
  overflow-y: auto; pointer-events: none;
}
.mo-state-card { background: rgba(14, 6, 32, .94); pointer-events: auto; width: min(400px, 100%); border-radius: var(--radius); padding: 20px 18px 18px; text-align: center; animation: rise 320ms var(--ease) both; }
.mo-state-icon {
  width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 40% 35%, #f0abfc, #9333ea 55%, #3b0764); box-shadow: 0 0 30px -6px rgba(217, 70, 239, .8);
}
.mo-state-icon .ico { width: 24px; height: 24px; }
.mo-state-title { margin: 0 0 6px; font: 800 calc(19 * var(--fs))/1.25 var(--head); }
.mo-state-body { margin: 0 0 16px; color: var(--ink-2); font-size: calc(14 * var(--fs)); line-height: 1.5; }

/* ── The drawer ───────────────────────────────────────────────────────── */
.mo-drawer {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0;
  border-radius: 24px 24px 0 0; border-bottom: none;
  display: flex; flex-direction: column; will-change: transform;
  padding-bottom: var(--safe-b);
}
.mo-drawer.settle { transition: transform 300ms var(--ease); }
.mo-handle { flex: none; padding: 6px calc(var(--safe-r) + 16px) 4px calc(var(--safe-l) + 16px); touch-action: none; }
.mo-grab { display: block; width: 38px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .22); margin: 2px auto 6px; }
.mo-peek { display: block; width: 100%; text-align: left; color: inherit; padding: 0 0 10px; min-height: 44px; }
.mo-peek:focus-visible { outline: 2px solid var(--mo-violet); outline-offset: 2px; border-radius: 12px; }
.mo-peek-head { display: block; }
.mo-summary {
  display: block; margin: 0; font: 800 calc(18 * var(--fs))/1.3 var(--head); letter-spacing: -.01em; color: var(--mo-hot);
  text-shadow: 0 0 22px rgba(217, 70, 239, .35);
}
.mo-summary > .mo-tag { margin: -3px 8px 0 0; text-shadow: none; }
.mo-tag {
  display: inline-block; vertical-align: middle; margin: 0 0 6px; padding: 3px 8px; border-radius: 999px;
  font: 800 10.5px/1.2 var(--head); letter-spacing: .06em; text-transform: uppercase;
  color: #1c1305; background: var(--warn);
}
.mo-tag-sm { margin: 0 6px 0 0; padding: 2px 6px; font-size: 9.5px; }
/* The last 30 seconds, Now at the right edge, and the link that last saw motion. */
.mo-strip { display: block; margin-top: 4px; }
.mo-strip-canvas { display: block; width: 100%; height: 34px; }
/* No recent frame: the strip says no data where there was none, dimmed. */
.mo-strip.stale { opacity: .55; }
/* The strip's name and its percentage over it, as a meter reads: what is measured, then how much. */
.mo-strip-head { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.mo-strip-name { flex: 1; min-width: 0; font-size: calc(12.5 * var(--fs)); line-height: 1.35; font-weight: 700; color: var(--ink-2); }
.mo-strip-foot { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.mo-strip-cap { flex: 1; min-width: 0; font-size: calc(12.5 * var(--fs)); line-height: 1.35; color: var(--ink-2); }
.mo-level { flex: none; min-width: 40px; text-align: right; font: 700 13px/1 var(--mono); color: var(--ink-2); }
/* Only beside someone standing still and a high strip: why it stays high. */
.mo-strip-note { display: block; margin-top: 3px; font-size: calc(12.5 * var(--fs)); line-height: 1.35; color: var(--ink); }

.mo-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 4px calc(var(--safe-r) + 16px) 18px calc(var(--safe-l) + 16px);
  display: flex; flex-direction: column; gap: 12px;
}
.mo-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mo-controls.mo-controls-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mo-controls .btn { padding-left: 8px; padding-right: 8px; }
.mo-paths .chip { min-height: 44px; padding: 0 16px; }
.mo-paths .chip.on { background: rgba(217, 70, 239, .2); border-color: rgba(240, 171, 252, .65); color: #fdf4ff; }
.mo-calnote { margin: -4px 0 0; color: var(--ink-3); }
.mo-field { display: flex; flex-direction: column; gap: 6px; }
.mo-field-label { font: 700 12px/1.2 var(--head); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.mo-sec { margin: 6px 0 0; font: 800 calc(15 * var(--fs))/1.2 var(--head); }
.mo-sec-first { margin-top: 2px; }
.mo-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mo-ev { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); align-items: baseline; }
.mo-ev:first-child { border-top: none; }
.mo-ev-time { font: 600 12px/1.4 var(--mono); color: var(--ink-3); white-space: nowrap; }
.mo-ev-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mo-ev-text { font-size: calc(14 * var(--fs)); line-height: 1.45; color: var(--ink); }
.mo-ev-through-door .mo-ev-text, .mo-ev-entered .mo-ev-text { color: #fbcfe8; }
.mo-ev-left .mo-ev-text, .mo-ev-quiet .mo-ev-text { color: var(--ink-2); }
/* Person, Pet, Not real: small to look at, 44 px to the thumb (btn-sm's hit area). */
.mo-ev-fb { display: flex; flex-wrap: wrap; gap: 6px; }
.mo-fb { min-height: 30px; padding: 0 11px; border: 1px solid var(--line-2); font-size: calc(12.5 * var(--fs)); }
.mo-fb[aria-pressed="true"] { background: rgba(217, 70, 239, .22); border-color: rgba(240, 171, 252, .7); color: #fdf4ff; }
.mo-ev-flag {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  font: 700 calc(11 * var(--fs))/1.4 var(--head); color: #fde68a; background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .35);
}
.mo-ev-flag .ico-xs { width: 12px; height: 12px; }
.mo-ev-marked .mo-ev-text { color: var(--ink-2); }
.mo-honest { color: var(--ink-3); margin: 4px 0 0; }

/* ── Replay: the plan as it was, a strip per room, one scrubber ───────── */
.mo-replay {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0;
  border-radius: 24px 24px 0 0; border-bottom: none;
  padding: 12px calc(var(--safe-r) + 16px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 16px);
  display: flex; flex-direction: column; gap: 8px; max-height: 56%; overflow-y: auto;
  animation: rise 260ms var(--ease) both;
}
.mo-rp-head { display: flex; align-items: center; gap: 8px; }
.mo-rp-when { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mo-rp-time { font: 800 calc(17 * var(--fs))/1.2 var(--head); color: var(--mo-hot); white-space: nowrap; }
.mo-rp-ago { font-size: calc(12 * var(--fs)); line-height: 1.2; color: var(--ink-3); }
.mo-rp-play, .mo-rp-save { flex: none; }
.mo-rp-say { margin: 0; font-size: calc(13.5 * var(--fs)); line-height: 1.4; color: var(--ink); }
.mo-rp-track { position: relative; min-width: 0; }
.mo-rp-ends { position: relative; height: 16px; }
.mo-rp-end-time { position: absolute; top: 0; font: 600 10.5px/16px var(--mono); color: var(--ink-3); }
.mo-rp-from { left: 0; }
.mo-rp-to { right: 0; }
/* The strip sits exactly over the slider's travel: inset by half the 22 px thumb on each side. */
.mo-rp-strip { display: block; width: calc(100% - 22px); margin: 0 11px; height: 40px; }
.mo-rp-range { display: block; width: 100%; height: 40px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; accent-color: #f0abfc; }
.mo-rp-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: rgba(196, 181, 253, .22); }
.mo-rp-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fdf4ff; border: 3px solid #c026d3; box-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.mo-rp-range::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(196, 181, 253, .22); }
.mo-rp-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fdf4ff; border: 3px solid #c026d3; }
.mo-rp-thumb {
  position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 700 11px/16px var(--mono); color: #fdf4ff; padding: 0 6px; border-radius: 6px; background: rgba(192, 38, 211, .35);
}

/* ── History: bars by the hour, kept on this phone ────────────────────── */
.mo-hist-chart { position: relative; height: 150px; border-radius: 12px; touch-action: none; cursor: pointer; }
.mo-hist-chart:focus-visible { outline: 2px solid var(--mo-violet); outline-offset: 4px; }
.mo-hist-canvas { display: block; width: 100%; height: 100%; }
.mo-hist-detail { margin: 0; min-height: 4.2em; font-size: calc(14 * var(--fs)); line-height: 1.45; color: var(--ink); }
.mo-hist-key { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: calc(12.5 * var(--fs)); color: var(--ink-2); }
.mo-hist-key > span { display: inline-flex; align-items: center; gap: 6px; }
.mo-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.mo-swatch-moving { background: #ec4899; }
.mo-swatch-quiet { background: rgba(148, 163, 184, .62); }
.mo-swatch-off { border: 1px dashed rgba(148, 163, 184, .6); }
/* An older version's count: striped as its bars are (stripeUnsplit), told apart from Movement seen and from No movement seen. */
.mo-swatch-unsplit { background: repeating-linear-gradient(135deg, rgba(196, 181, 253, .5) 0 1.5px, transparent 1.5px 4px), rgba(148, 163, 184, .3); }

/* ── Save picture: the figure itself, shown as the canvas it is ───────── */
.mo-figure { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: #07041a; }
.mo-figure-note { margin: 0; color: var(--ink-3); }

/* ── Setup ────────────────────────────────────────────────────────────── */
.mo-setup {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0;
  border-radius: 24px 24px 0 0; border-bottom: none;
  padding: 14px calc(var(--safe-r) + 16px) calc(var(--safe-b) + 14px) calc(var(--safe-l) + 16px);
  display: flex; flex-direction: column; gap: 10px; max-height: 52%; overflow-y: auto;
  animation: rise 260ms var(--ease) both;
}
.mo-setup-head { display: flex; align-items: center; gap: 10px; }
.mo-setup-title { margin: 0; font: 800 calc(17 * var(--fs))/1.2 var(--head); }
.mo-setup-head .seg { flex: 1; min-width: 0; }
.mo-chips { display: flex; gap: 8px; padding: 2px 2px 4px; margin: -2px -2px -4px; }
.mo-node-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 12px;
  font: 700 14px/1 var(--mono); color: var(--ink); background: rgba(255, 255, 255, .05); border: 1px solid var(--mo-edge);
  transition: transform 120ms var(--ease), background 200ms, border-color 200ms;
}
.mo-node-chip:active { transform: scale(.95); }
.mo-node-chip.placed { color: #ede9fe; border-color: rgba(167, 139, 250, .55); }
.mo-node-chip.placed .ico { color: var(--mo-violet); }
.mo-node-chip.quiet { color: var(--ink-3); border-style: dashed; }
.mo-node-chip.armed { color: #fff; background: linear-gradient(180deg, rgba(217, 70, 239, .55), rgba(126, 34, 206, .5)); border-color: #f0abfc; box-shadow: 0 0 18px -4px rgba(217, 70, 239, .9); }
.mo-setup-hint { margin: 0; color: var(--ink-2); line-height: 1.45; }
/* Whose ring the placed boards are, and the way to hand them to another hub. */
.mo-owner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mo-owner-text { margin: 0; flex: 1 1 160px; color: var(--ink-3); }

/* ── The consent sheet ────────────────────────────────────────────────── */
.mo-consent-p { margin: 0; color: var(--ink-2); font-size: calc(14.5 * var(--fs)); line-height: 1.5; }
.mo-consent-p b { color: var(--ink); }
.mo-consent-rule .h3 .ico { color: #f472b6; }
.mo-consent-sec { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--line); }
.mo-consent-sec .h3 { margin: 0 0 4px; }
.mo-consent-sec p { margin: 0; color: var(--ink-2); font-size: calc(14 * var(--fs)); line-height: 1.5; }
.mo-consent-rule { border-color: rgba(244, 114, 182, .4); background: rgba(244, 114, 182, .07); }
.mo-consent-rule p { color: var(--ink); }
.mo-cal { align-items: center; text-align: center; }
.mo-cal-ring { display: grid; place-items: center; padding: 6px 0; }
.mo-cal .ring-value { stroke: #f0abfc; }
.mo-sources .li-trail .btn { white-space: nowrap; }
.mo-sources .li-sub { white-space: normal; overflow: visible; line-height: 1.4; }
.mo-sources .li-title { white-space: normal; }
.mo-sl { margin: 10px 0 2px; }

/* ── The camera trace view ────────────────────────────────────────────── */
.mo-cam { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; background: #000; animation: fadeIn 200ms var(--ease) both; }
.mo-cam-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px calc(var(--safe-r) + 12px) 8px calc(var(--safe-l) + 12px); }
.mo-cam-title .ico-sm { color: #f0abfc; }
.mo-cam-view { position: relative; flex: 1; min-height: 160px; overflow: hidden; touch-action: none; }
.mo-cam-video, .mo-cam-trace, .mo-cam-ink { position: absolute; inset: 0; width: 100%; height: 100%; }
.mo-cam-video { object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .22; transition: opacity 300ms var(--ease); pointer-events: none; }
/* Black: the picture all but gone, still on screen (a browser may stop a video nobody can see). */
.mo-cam[data-preview="black"] .mo-cam-video { opacity: .02; }
.mo-cam-trace { pointer-events: none; }
.mo-cam-ink { touch-action: none; }
.mo-cam.drawing .mo-cam-ink { cursor: crosshair; }
.mo-cam-panel {
  flex: none; max-height: 46%; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px calc(var(--safe-r) + 16px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 16px);
  display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(180deg, rgba(12, 4, 28, .96), rgba(5, 1, 14, .98)); border-top: 1px solid var(--mo-edge);
}
.mo-cam-summary { font-size: calc(18 * var(--fs)); }
.mo-cam-reason { margin: 0; }
.mo-cam-hint { margin: -6px 0 0; color: var(--ink-3); }
.mo-cam-actions .btn { flex: 1; }

/* ── Home: the Motion tile ────────────────────────────────────────────── */
.quick-tile.q-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 76px; background: linear-gradient(120deg, rgba(88, 28, 135, .28), rgba(255, 255, 255, .03) 60%); border-color: rgba(196, 181, 253, .2); }
.quick-icon.q-motion { background: radial-gradient(circle at 40% 35%, #f0abfc, #a21caf 55%, #3b0764); box-shadow: 0 10px 24px -12px rgba(217, 70, 239, .95); }
.quick-tile:nth-child(5) { animation-delay: 160ms; }

/* ── Sensors: what to buy, the motion guides, the setup string ────────── */
/* A deep link (#/sensors?guide=motion) lands on the heading, not under the top bar. */
#sensors-motion, #sensors-setup { scroll-margin-top: calc(var(--chrome-top) + 12px); }
.buy-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.buy-item { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--line); }
.buy-title { margin: 0 0 4px; font: 700 calc(14.5 * var(--fs))/1.35 var(--head); }
.buy-body { margin: 0; color: var(--ink-2); font-size: calc(13.5 * var(--fs)); line-height: 1.5; }
.setup-string { display: block; padding: 12px; border-radius: var(--radius-xs); background: rgba(0, 0, 0, .3); border: 1px dashed rgba(196, 181, 253, .45); font: 600 calc(12.5 * var(--fs))/1.45 var(--mono); word-break: break-all; color: #ede9fe; -webkit-user-select: all; user-select: all; }
.setup-string.empty { color: var(--ink-3); border-color: var(--line-2); -webkit-user-select: none; user-select: none; }
.md-doc h3 { margin: 16px 0 6px; font: 800 calc(16 * var(--fs))/1.3 var(--head); }
.md-doc h4 { margin: 12px 0 4px; font: 700 calc(14.5 * var(--fs))/1.3 var(--head); }
.md-doc p, .md-doc li { color: var(--ink-2); font-size: calc(14 * var(--fs)); line-height: 1.55; }
.md-doc p { margin: 0 0 10px; }
.md-doc ul, .md-doc ol { margin: 0 0 10px; padding-left: 20px; }
.md-doc li { margin: 4px 0; }
.md-doc strong { color: var(--ink); }
.md-doc code { font: 600 .92em var(--mono); color: #e9d5ff; background: rgba(167, 139, 250, .12); padding: 1px 5px; border-radius: 5px; }

@media (min-width: 900px) {
  .mo-drawer, .mo-setup, .mo-replay { left: auto; width: 420px; right: calc(var(--safe-r) + 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .mo-drawer.settle, .mo-fit.settle { transition: none; }
  .mo-live-dot[data-state="live"] { animation: none; }
  .mo-state-card, .mo-setup, .mo-replay, .mo-cam { animation: none; }
  .mo-cam-video { transition: none; }
}