1 files changed, 201 insertions, 7 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index fc91596..e1e152e 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -2084,6 +2084,207 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   outline: none;
 }
 
+/* The player as a remote while a television plays the film. Opaque, over
+   the local picture, which keeps running underneath only to pace the
+   download; the container is given room for it on a portrait phone, where
+   the picture alone would be a strip. */
+.video-container-remote { min-height: min(72vh, 560px); }
+
+.video-remote {
+  --remote-accent: #23b1f0;
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 32px;
+  padding: 24px 20px;
+  border-radius: 12px;
+  background:
+    radial-gradient(120% 70% at 50% 0%, rgba(35, 177, 240, 0.16) 0%, rgba(35, 177, 240, 0) 60%),
+    #0a1224;
+  color: #e2e8f0;
+  overflow: hidden;
+}
+
+.video-remote-head {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  text-align: center;
+  max-width: 100%;
+}
+
+.video-remote-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  margin-bottom: 8px;
+  border-radius: 50%;
+  background: rgba(35, 177, 240, 0.14);
+  box-shadow: 0 0 0 1px rgba(35, 177, 240, 0.35), 0 0 32px rgba(35, 177, 240, 0.25);
+  color: var(--remote-accent);
+  font-size: 30px;
+}
+
+.video-remote-label {
+  font-size: 0.75rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #94a3b8;
+}
+
+.video-remote-device {
+  font-size: 1.35rem;
+  font-weight: 600;
+  color: #f8fafc;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.video-remote-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 1.2em;
+  font-size: 0.85rem;
+  color: #94a3b8;
+}
+
+.video-remote-track { width: min(100%, 560px); }
+
+.video-remote-times {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  font-size: 0.85rem;
+  font-variant-numeric: tabular-nums;
+  color: #94a3b8;
+}
+
+/* The track is drawn by hand so the part already played is filled: `--pct`
+   is set inline from the position. */
+.video-remote-seek {
+  --pct: 0%;
+  -webkit-appearance: none;
+  appearance: none;
+  display: block;
+  width: 100%;
+  height: 28px;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.video-remote-seek:disabled { cursor: default; opacity: 0.5; }
+.video-remote-seek::-webkit-slider-runnable-track {
+  height: 6px;
+  border-radius: 3px;
+  background: linear-gradient(to right, var(--remote-accent) var(--pct), rgba(148, 163, 184, 0.25) var(--pct));
+}
+.video-remote-seek::-moz-range-track {
+  height: 6px;
+  border-radius: 3px;
+  background: linear-gradient(to right, var(--remote-accent) var(--pct), rgba(148, 163, 184, 0.25) var(--pct));
+}
+.video-remote-seek::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  margin-top: -6px;
+  border: 0;
+  border-radius: 50%;
+  background: #ffffff;
+  box-shadow: 0 0 0 4px rgba(35, 177, 240, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4);
+}
+.video-remote-seek::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border: 0;
+  border-radius: 50%;
+  background: #ffffff;
+  box-shadow: 0 0 0 4px rgba(35, 177, 240, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4);
+}
+
+.video-remote-buttons {
+  display: flex;
+  align-items: center;
+  gap: 36px;
+}
+
+.video-remote-skip,
+.video-remote-main {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: transform 0.1s ease, background-color 0.15s ease;
+}
+.video-remote-skip:active:not(:disabled),
+.video-remote-main:active:not(:disabled) { transform: scale(0.92); }
+.video-remote-skip:disabled,
+.video-remote-main:disabled { opacity: 0.35; cursor: default; }
+
+.video-remote-skip {
+  width: 56px;
+  height: 56px;
+  background: transparent;
+  color: #e2e8f0;
+  font-size: 44px;
+}
+.video-remote-skip:hover:not(:disabled) { background: rgba(148, 163, 184, 0.12); }
+.video-remote-skip .icon { stroke-width: 1.4; }
+.video-remote-skip-n {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-38%);
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  pointer-events: none;
+}
+
+.video-remote-main {
+  width: 76px;
+  height: 76px;
+  background: var(--remote-accent);
+  color: #04121f;
+  font-size: 34px;
+  box-shadow: 0 8px 24px rgba(35, 177, 240, 0.35);
+}
+.video-remote-main:hover:not(:disabled) { background: #4cc3f5; }
+.video-remote-main .icon { stroke-width: 2.6; }
+/* The triangle is a closed path: filled, it reads as play at a glance. */
+.video-remote-main.is-paused .icon path { fill: currentColor; }
+.video-remote-main.is-paused .icon { transform: translateX(2px); }
+
+.video-remote-stop {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  border-radius: 999px;
+  background: transparent;
+  color: #cbd5e1;
+  font: inherit;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+.video-remote-stop:hover { border-color: #fca5a5; color: #fecaca; }
+
 /* Where the film was picked up again. Sits over the picture rather than
    pushing it down, and clears itself once the viewer is watching. */
 .video-container { position: relative; }
@@ -3346,13 +3547,6 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
   max-width: 260px; overflow: hidden; text-overflow: ellipsis;
   white-space: nowrap;
 }
-.sdt-add-row { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
-.sdt-add-input {
-  flex: 1 1 auto; min-width: 0; padding: 5px 8px;
-  border: 1px solid var(--border); border-radius: 4px;
-  background: var(--bg-surface); color: var(--text);
-  font-family: inherit; font-size: 0.9em;
-}
 .sdt-col-toggle { width: 90px; text-align: center; }
 .sdt-col-toggle th { text-align: center; }
 .sdt-col-toggle .toggle-switch { justify-content: center; }