1 files changed, 115 insertions, 4 deletions
diff --git a/static/deck.css b/static/deck.css
index 2484e1b..f0a9fdc 100644
--- a/static/deck.css
+++ b/static/deck.css
@@ -447,11 +447,122 @@ select {
 .chan input[type=range] { flex: 1; min-width: 60px; accent-color: var(--udt-accent); }
 .chan-pct { flex: none; min-width: 40px; text-align: right; font-size: 0.857rem; }
 
-.deck-offline {
-  flex: 1;
+/* What a panel shows while the thing it watches is off (static/offline.js). */
+.offline {
+  height: 100%;
+  min-height: 140px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-height: 120px;
-  color: var(--udt-subtext0);
+  gap: 4px;
+  padding: 16px;
+  text-align: center;
+}
+.off-icon {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 6px;
+  filter: grayscale(1);
+  opacity: .45;
+}
+.off-title { font-size: 1.143rem; font-weight: 600; color: var(--udt-subtext1, var(--udt-text)); }
+.off-detail { max-width: 32ch; font-size: 0.857rem; color: var(--udt-overlay0); }
+.off-poll {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+  font-size: 0.714rem;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  color: var(--udt-overlay0);
+}
+.off-poll i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--udt-overlay0);
+  animation: off-pulse 2s ease-in-out infinite;
+}
+@keyframes off-pulse { 50% { opacity: .2; } }
+@media (prefers-reduced-motion: reduce) { .off-poll i { animation: none; } }
+
+/* The K1C tab. */
+.k1c { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px; }
+.k1c-on { display: flex; flex-direction: column; gap: 14px; }
+.k1c-on[hidden], .k1c-off[hidden] { display: none; }
+.k1c-head { display: flex; align-items: center; gap: 12px; }
+.k1c-state {
+  flex: none;
+  padding: 4px 12px;
+  border-radius: 999px;
+  background: var(--udt-surface1);
+  font-weight: 600;
+}
+.k1c-state.good { background: var(--udt-green); color: var(--udt-crust); }
+.k1c-state.warn { background: var(--udt-yellow); color: var(--udt-crust); }
+.k1c-state.bad { background: var(--udt-red); color: var(--udt-crust); }
+.k1c-file { flex: 1; min-width: 0; font-size: 1.143rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.k1c-alert {
+  padding: 10px 14px;
+  border-radius: 12px;
+  border: 1px solid var(--udt-red);
+  color: var(--udt-red);
 }
+.k1c-job { display: flex; align-items: center; gap: 16px; }
+.k1c-thumb {
+  flex: none;
+  width: 120px;
+  height: 120px;
+  object-fit: contain;
+  padding: 6px;
+  border-radius: 14px;
+  background: var(--udt-surface0);
+  border: 1px solid var(--udt-surface1);
+}
+.k1c-thumb[hidden] { display: none; }
+.k1c-progress { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
+.k1c-progress[hidden] { display: none; }
+.k1c-pct { font-size: 2.571rem; font-weight: 600; line-height: 1; }
+.k1c-progress .gbar { height: 10px; border-radius: 5px; }
+.k1c-times { font-size: 0.857rem; color: var(--udt-subtext0); }
+.k1c-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
+@media (max-width: 900px) { .k1c-body { grid-template-columns: 1fr; } }
+.k1c-tiles { grid-template-columns: 1fr 1fr; }
+.k1c-cam { width: 100%; border-radius: 12px; background: var(--udt-crust); }
+
+/* Press and hold: the fill grows across the button over --hold. */
+.estop {
+  flex: none;
+  position: relative;
+  overflow: hidden;
+  min-width: 150px;
+  min-height: 64px;
+  padding: 0 18px;
+  border: 2px solid var(--udt-red);
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--udt-red) 22%, transparent);
+  color: var(--udt-text);
+  font: inherit;
+  font-weight: 700;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  touch-action: none;
+  cursor: pointer;
+}
+.estop::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--udt-red);
+  transform: scaleX(0);
+  transform-origin: left;
+}
+.estop.holding::before { transform: scaleX(1); transition: transform var(--hold, 800ms) linear; }
+.estop.sent { background: var(--udt-red); color: var(--udt-crust); }
+.estop > span { position: relative; }
+.estop-label { font-size: 1.071rem; text-transform: uppercase; letter-spacing: .04em; }
+.estop-hint { font-size: 0.714rem; font-weight: 400; opacity: .7; }