.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.video-grid.view-focus {
  grid-template-columns: minmax(0, 3fr) minmax(180px, 1fr);
}

.video-grid.view-focus .secondary-view {
  aspect-ratio: auto;
}

.camera-label {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 9px;
  padding: 3px;
  background: #f5f5f2dd;
  font-size: 9px;
}

.feed-status { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.live-dot { width:7px; height:7px; flex:0 0 7px; background:#aaa; border-radius:50%; }
.feed-status.is-live .live-dot {
  background:#d12f27;
  box-shadow:0 0 0 0 rgba(209,47,39,.5);
  animation:live-pulse 1.45s ease-out infinite;
}
.feed-status.is-live .feed-status-text { color:#252525; }
.feed-status.is-paused .live-dot { background:#b58b42; }
@keyframes live-pulse {
  0% { box-shadow:0 0 0 0 rgba(209,47,39,.5); opacity:1; }
  65% { box-shadow:0 0 0 6px rgba(209,47,39,0); opacity:.78; }
  100% { box-shadow:0 0 0 0 rgba(209,47,39,0); opacity:1; }
}
#secondary-empty { font-size:10px; color:#888; }
#secondary-live-badge {
  position:absolute;
  z-index:2;
  left:9px;
  bottom:12px;
  padding:4px 6px;
  background:#f5f5f2dd;
  font-size:10px;
  letter-spacing:.07em;
  color:#777;
}

header { gap: 28px; }
.header-title { display: flex; flex-direction: column; gap: 5px; }
.header-title strong { font-size: 15px; font-weight: 400; letter-spacing: -.4px; }
.header-title small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.language-switch { display:flex; align-items:center; gap:5px; font-size:10px; color:var(--muted); }
.language-switch button { border:0; background:none; padding:7px 3px; color:var(--muted); }
.language-switch button.selected { color:var(--ink); box-shadow:inset 0 -1px var(--ink); }
.footer-copy { display:flex; flex-direction:column; gap:6px; max-width:720px; line-height:1.5; }
.footer-copy strong { font-size:11px; font-weight:400; letter-spacing:.06em; }
.footer-actions { display:flex; align-items:center; gap:22px; flex-shrink:0; }
.footer-actions button span { margin-left:0; }
.footer-actions button span + span { margin-left:12px; }
header .connection { margin-left: auto; padding: 0; }
header #access { margin-left: 0; }

.video-grid .video-stage,
.video-grid .secondary-view {
  aspect-ratio: 4 / 3;
  border: 0;
  min-width: 0;
}

.field-note {
  min-height: 72px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 24px;
}

.field-note .eyebrow { font-size: 9px; }
.field-note p { font-size: 15px; line-height: 1.4; margin: 0; }
.field-note > span:last-child {
  display: block;
  color: #888;
  font-size: 10px;
  line-height: 1.65;
  text-align: right;
}

@media (max-width: 1000px) {
  .field-note { gap: 16px; }
  .field-note .eyebrow { display: none; }
  .field-note p { font-size: 14px; }
  .field-note > span:last-child { font-size: 9px; }
}

@media (max-width: 760px) {
  .video-grid { grid-template-columns: 1fr; }
  .video-grid.view-focus { display: block; position: relative; }
  .video-grid.view-focus .secondary-view {
    position: absolute;
    z-index: 3;
    right: 12px;
    bottom: 12px;
    width: 34%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
  }
  .header-title { display:none; }
  header { gap:12px; }
  .language-switch { margin-left:auto; gap:2px; }
  .header-feedback { padding:9px 10px; gap:7px; font-size:9px; }
  header .connection { display: none; }
  .camera-switch { overflow-x: auto; }
  .camera-tab { flex: 0 0 auto; min-height: 52px; }
  .field-note { display: none; }
  footer { flex-direction:column; gap:12px; }
  .footer-actions { width:100%; justify-content:space-between; gap:14px; }
}

@media (prefers-reduced-motion: reduce) {
  .feed-status.is-live .live-dot { animation:none; }
}
.wordmark { white-space: nowrap; flex-shrink: 0; }
.safety-monitor{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);margin:0 0 18px;background:#fafaf8}.safety-monitor div{min-width:0;padding:9px 10px}.safety-monitor div:nth-child(even){border-left:1px solid var(--line)}.safety-monitor div:nth-child(n+3){border-top:1px solid var(--line)}.safety-monitor span,.safety-monitor strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.safety-monitor span{font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:#777}.safety-monitor strong{margin-top:4px;font-size:11px;font-weight:500}.safety-monitor .monitor-ok{color:#2f7040}.safety-monitor .monitor-standby{color:#6b5b2e}.safety-monitor .monitor-alert{color:#9b261f}
.control-mode{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin:0 0 18px}.control-mode button{border:0;background:#fff;padding:10px 6px;font:inherit;font-size:8px;letter-spacing:.06em}.control-mode button+button{border-left:1px solid var(--line)}.control-mode button.selected{background:#202020;color:#fff}.easy-steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);margin-bottom:12px}.easy-steps span{padding:8px 5px;border-right:1px solid var(--line);color:#aaa;font-size:8px}.easy-steps span:last-child{border-right:0}.easy-steps b{display:block;margin-top:3px;font-weight:400}.easy-steps .active{background:#202020;color:#fff}.easy-steps .done{background:#f1f6f1;color:#347844}.easy-instruction{min-height:70px;margin:0 0 12px;padding:12px;background:#f5f5f2;font-size:10px;line-height:1.5}.easy-instruction strong,.easy-instruction span{display:block}.easy-instruction strong{font-weight:400;margin-bottom:4px}.easy-instruction span{font-size:9px;color:#777}.easy-readout{display:flex;justify-content:space-between;margin:0 0 8px;font-size:8px;color:#777}.easy-pad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-areas:". f ." "l c r" ". b .";height:142px;border:1px solid var(--line);background:#fafaf8}.easy-pad button,.easy-height button,.easy-tools button,.easy-reset{font:inherit;color:inherit;background:#fff;border:0}.easy-pad button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.easy-pad button span{font-size:20px}.easy-pad button small,.easy-pad-center small{font-size:7px;color:#777}.easy-pad [data-axis=x][data-direction="1"]{grid-area:f}.easy-pad [data-axis=x][data-direction="-1"]{grid-area:b}.easy-pad [data-axis=y][data-direction="1"]{grid-area:l}.easy-pad [data-axis=y][data-direction="-1"]{grid-area:r}.easy-pad-center{grid-area:c;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--line);font-size:10px}.easy-pad button:hover,.easy-height button:hover,.easy-tools button:hover,.easy-reset:hover{background:#eee}.easy-pad button.pressed,.easy-height button.pressed,.easy-tools button.pressed{background:#202020;color:#fff}.easy-height,.easy-tools{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-top:0}.easy-height button,.easy-tools button{padding:10px 6px;font-size:9px}.easy-height button+button,.easy-tools button:nth-child(even){border-left:1px solid var(--line)}.easy-tools{grid-template-columns:1fr 1fr;margin-top:8px;border-top:1px solid var(--line)}.easy-tools button:nth-child(n+3){border-top:1px solid var(--line)}.easy-reset{width:100%;border:1px solid var(--line);margin-top:8px;padding:9px;font-size:8px}.easy-target{position:absolute;z-index:4;width:58px;height:58px;border:1px dashed #fff;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 1px 2px #0008)}.easy-target span:before,.easy-target span:after{content:"";position:absolute;background:#fff}.easy-target span:before{width:78px;height:1px;left:-11px;top:28px}.easy-target span:after{width:1px;height:78px;left:28px;top:-11px}.easy-target b{position:absolute;left:40px;top:-13px;background:#fff;color:#222;padding:3px 5px;font-size:8px;font-weight:400}.video-stage.easy-select{cursor:crosshair}.video-stage.easy-select:after{content:"";position:absolute;inset:0;z-index:3;border:1px solid #fff4;pointer-events:none}.easy-jog:disabled,.easy-tools .jog:disabled{opacity:.35;cursor:not-allowed}

@media(max-width:680px){.control-mode{position:sticky;top:0;z-index:8;background:#fff}.easy-pad{height:166px}.easy-height button,.easy-tools button{min-height:46px}}
.easy-orientation{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-top:0}
.easy-orientation button{font:inherit;color:inherit;background:#fff;border:0;padding:10px 6px;font-size:9px}
.easy-orientation button+button{border-left:1px solid var(--line)}
.easy-orientation button:hover{background:#eee}.easy-orientation button.pressed{background:#202020;color:#fff}
.easy-tilt:disabled{opacity:.35;cursor:not-allowed}
.easy-rotate:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:680px){.easy-orientation button{min-height:46px}}

.task-intro{margin:0 0 14px;padding:12px;background:var(--paper);font-size:10px;line-height:1.55}.task-intro strong,.task-intro span{display:block}.task-intro span{margin-top:4px;color:var(--muted);font-size:9px}.task-create,.task-name-row{display:grid;grid-template-columns:1fr auto;gap:6px}.task-name-row{grid-template-columns:1fr auto auto;margin-top:12px}.task-create input,.task-name-row input,#task-select,.task-capture input,.task-capture select,.task-point input,.task-point select,.task-run input{min-width:0;border:1px solid var(--line);background:#fff;padding:9px 8px;font:inherit;font-size:10px}.task-create button,.task-name-row button,.task-capture button,.task-point button,.task-run button{border:1px solid var(--line);background:#fff;padding:8px;font:inherit;font-size:9px}.task-create button:hover:not(:disabled),.task-name-row button:hover:not(:disabled),.task-capture button:hover:not(:disabled),.task-point button:hover:not(:disabled),.task-run button:hover:not(:disabled){background:#eee}.task-select-label{display:block;margin:15px 0 6px;font-size:9px;color:var(--muted)}#task-select{width:100%}.task-empty{font-size:10px;color:var(--muted);line-height:1.5}.task-danger{color:var(--red)}.task-subhead{display:flex;justify-content:space-between;margin:16px 0 8px;font-size:9px;color:var(--muted)}.task-point{display:grid;grid-template-columns:24px 1fr 70px;gap:6px;padding:9px 0;border-top:1px solid var(--line)}.task-point-number{grid-row:1/3;align-self:center;font-size:9px;color:var(--muted)}.task-point-name{grid-column:2}.task-point-speed{grid-column:3}.task-point label{grid-column:2/4;font-size:8px;color:var(--muted)}.task-point-hold{width:58px!important;padding:6px!important}.task-point-actions{grid-column:2/4;display:grid;grid-template-columns:31px 31px 1fr 31px 31px;gap:4px}.task-point-actions .task-point-recapture{grid-column:1/6}.task-capture{display:grid;grid-template-columns:1fr 80px;gap:6px;margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}.task-capture label{font-size:8px;color:var(--muted)}.task-capture label input{width:58px}.task-capture button{grid-column:1/3;background:var(--ink);color:#fff}.task-run{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:15px;padding-top:14px;border-top:1px solid var(--line)}.task-run label{grid-column:1/3;font-size:9px;color:var(--muted)}.task-run label input{width:64px;margin-left:7px}.task-run button{min-height:42px}.task-progress{min-height:18px;margin:12px 0 0;font-size:9px;line-height:1.5;color:var(--muted)}
.task-speed-control{grid-column:1/3!important;display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center;margin:0 0 7px;color:var(--ink)!important}.task-speed-control strong{font-size:12px;font-weight:500}.task-speed-control input[type=range]{grid-column:1/3;width:100%;height:28px;padding:0;border:0;accent-color:var(--ink)}.task-speed-control small{grid-column:1/3;display:flex;justify-content:space-between;color:var(--muted);font-size:8px}.guest-task-card{margin-top:12px;padding:16px;border:1px solid var(--line);background:var(--paper)}.guest-task-card>strong,.guest-task-card>span{display:block}.guest-task-card>strong{font-size:15px;font-weight:500}.guest-task-card>span{margin-top:4px;color:var(--muted);font-size:9px}.guest-task-card>p{margin:14px 0;font-size:10px;line-height:1.55;color:var(--muted)}.guest-task-run{width:100%;min-height:50px;border:1px solid var(--ink);background:var(--ink);color:#fff;font:inherit;font-size:11px;letter-spacing:.03em}.guest-task-run:hover:not(:disabled){background:#424242}.workspace.is-guest .control-mode button:disabled{opacity:.28}.workspace.is-guest .control-mode button[data-control-mode=tasks]{opacity:1}
.workspace.is-guest .control-inner{display:flex;flex-direction:column}.workspace.is-guest #task-controls{order:1}.workspace.is-guest .safety-monitor{order:2;margin-top:18px}.workspace.is-guest .control-mode,.workspace.is-guest #take-control,.workspace.is-guest #control-hint,.workspace.is-guest .speed-row,.workspace.is-guest #home-position,.workspace.is-guest #stop,.workspace.is-guest .stop-note{display:none}.workspace.is-guest.is-guest-running #stop{display:flex;order:3;margin-top:16px}.workspace.is-guest.is-guest-running .stop-note{display:block;order:4}

.mobile-control-dock{display:none}
.mobile-guest-task-cta{display:none}

/* Mobile focus dock: shown only while this browser owns the arm. */
@media(max-width:760px){
  .workspace.is-guest .video-stage .mobile-guest-task-cta:not([hidden]){
    position:absolute;z-index:7;left:11px;right:11px;bottom:51px;min-height:64px;
    display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;
    align-items:center;column-gap:12px;padding:10px 13px;border:1px solid rgba(255,255,255,.92);
    background:rgba(24,24,22,.94);color:#fff;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.32)
  }
  .workspace.is-guest .mobile-guest-task-cta>span{grid-column:1;font-size:8px;letter-spacing:.09em;color:#bfc5bb}
  .workspace.is-guest .mobile-guest-task-cta>strong{grid-column:1;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;letter-spacing:.01em;text-transform:uppercase}
  .workspace.is-guest .mobile-guest-task-cta>small{grid-column:1;font-size:8px;color:#d4d5cf;text-transform:uppercase}
  .workspace.is-guest .mobile-guest-task-cta>i{grid-column:2;grid-row:1/4;font-size:23px;font-style:normal}
  .workspace.is-guest .mobile-guest-task-cta.is-running{background:rgba(145,38,29,.95)}
  .workspace.is-guest .mobile-guest-task-cta:disabled{opacity:.82;cursor:not-allowed}
  .workspace.is-controlling{position:relative;display:block;overflow:hidden}
  .workspace.is-controlling .vision{position:relative;z-index:1}
  .workspace.is-controlling .controls{display:none}
  .workspace.is-controlling .mobile-control-dock{
    display:block;position:absolute;z-index:10;left:9px;right:9px;bottom:64px;
    border:1px solid rgba(255,255,255,.92);outline:1px solid rgba(0,0,0,.45);
    background:transparent;color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
    text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 1px 3px #000
  }
  .workspace.is-controlling .mobile-control-dock button,
  .workspace.is-controlling .mobile-control-dock output,
  .workspace.is-controlling .mobile-control-dock strong{color:#fff;text-shadow:inherit}
  .mobile-dock-head{height:35px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 10px;border-bottom:1px solid rgba(255,255,255,.4);font-size:9px}
  .mobile-dock-head>span{display:flex;align-items:center;gap:6px}.mobile-dock-head i{width:7px;height:7px;border-radius:50%;background:#d43b2f;box-shadow:0 0 0 3px rgba(212,59,47,.18)}
  .mobile-dock-head strong{font-size:10px;font-weight:500;letter-spacing:.03em}.mobile-dock-head output{text-align:right;font-size:9px;font-weight:500}
  .mobile-control-mode{height:32px;display:grid;grid-template-columns:1fr 1fr 1fr 68px;border-bottom:1px solid rgba(255,255,255,.4)}
  .mobile-control-mode button,.mobile-joint-strip button,.mobile-easy-strip button,.mobile-drive-row button{border:0;border-right:1px solid rgba(255,255,255,.35);background:transparent}
  .mobile-control-mode button:last-child,.mobile-joint-strip button:last-child,.mobile-easy-strip button:last-child,.mobile-drive-row button:last-child{border-right:0}
  .mobile-control-mode button{font-size:8px;letter-spacing:.06em}.mobile-control-mode button.selected{background:rgba(255,255,255,.23);font-weight:500}
  .mobile-control-alert{margin:0;padding:7px 9px;border-bottom:1px solid rgba(255,255,255,.55);background:rgba(113,45,20,.72);font-size:9px;line-height:1.4}
  .mobile-joint-strip{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid rgba(255,255,255,.4)}
  .mobile-easy-strip{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid rgba(255,255,255,.4)}
  .mobile-joint-strip[hidden],.mobile-easy-strip[hidden]{display:none!important}
  .mobile-joint-strip button,.mobile-easy-strip button{height:36px;font-size:10px}.mobile-joint-strip button.selected,.mobile-easy-strip button.selected{background:rgba(255,255,255,.24);font-weight:500}
  .mobile-drive-row{display:grid;grid-template-columns:52px 52px minmax(66px,1fr) minmax(66px,1fr) 70px;min-height:50px}
  .mobile-drive-row button{touch-action:none;user-select:none;-webkit-user-select:none}.mobile-drive-row .mobile-move{display:flex;align-items:center;justify-content:center;font-size:27px}.mobile-drive-row .mobile-move.pressed{background:rgba(255,255,255,.9);color:#111;text-shadow:none}
  .mobile-gripper,.mobile-stop,.mobile-home{font-size:8px;letter-spacing:.02em;font-weight:500;text-transform:uppercase}.mobile-stop{background:rgba(137,24,18,.5)!important}.mobile-home{width:100%;min-height:38px;border:0;border-top:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff;text-shadow:inherit}
  .workspace.is-controlling .video-grid.view-focus .secondary-view{top:12px;bottom:auto;border-color:rgba(255,255,255,.9);outline:1px solid rgba(0,0,0,.35);box-shadow:0 8px 22px rgba(0,0,0,.28)}

  /* In a single-camera focus view there is enough vertical room: keep the
     controls below the picture instead of covering the live feed. */
  .workspace.is-controlling.is-focus-view{overflow:visible}
  .workspace.is-controlling.is-focus-view .mobile-control-dock{
    position:relative;left:auto;right:auto;bottom:auto;
    border:0;border-top:1px solid var(--line);outline:0;
    background:#fff;color:var(--ink);text-shadow:none
  }
  .workspace.is-controlling.is-focus-view .mobile-control-dock button,
  .workspace.is-controlling.is-focus-view .mobile-control-dock output,
  .workspace.is-controlling.is-focus-view .mobile-control-dock strong{color:var(--ink);text-shadow:none}
  .workspace.is-controlling.is-focus-view .mobile-dock-head,
  .workspace.is-controlling.is-focus-view .mobile-control-mode,
  .workspace.is-controlling.is-focus-view .mobile-joint-strip,
  .workspace.is-controlling.is-focus-view .mobile-easy-strip{border-color:var(--line)}
  .workspace.is-controlling.is-focus-view .mobile-control-mode button,
  .workspace.is-controlling.is-focus-view .mobile-joint-strip button,
  .workspace.is-controlling.is-focus-view .mobile-easy-strip button,
  .workspace.is-controlling.is-focus-view .mobile-drive-row button{border-color:var(--line)}
  .workspace.is-controlling.is-focus-view .mobile-control-mode button.selected,
  .workspace.is-controlling.is-focus-view .mobile-joint-strip button.selected,
  .workspace.is-controlling.is-focus-view .mobile-easy-strip button.selected{background:var(--paper)}
  .workspace.is-controlling.is-focus-view .mobile-stop{background:#fff8f6!important;color:var(--red)}
  .workspace.is-controlling.is-focus-view .mobile-home{border-color:var(--line);background:#fafaf8;color:var(--ink)}
}
@media(max-width:760px){.workspace.is-controlling.is-task-control .controls{display:block}.workspace.is-controlling.is-task-control .mobile-control-dock{display:none}.workspace.is-task-control .controls{border-top:1px solid var(--line)}.task-create input,.task-name-row input,#task-select,.task-capture input,.task-capture select,.task-point input,.task-point select,.task-run input{font-size:12px}.task-create button,.task-name-row button,.task-capture button,.task-point button,.task-run button{min-height:42px;font-size:11px}.task-point{grid-template-columns:28px 1fr 90px}.task-intro,.task-empty,.task-progress{font-size:11px}}

@media(max-width:420px){.workspace.is-controlling:not(.is-focus-view) .mobile-control-dock{left:6px;right:6px;bottom:61px}.mobile-drive-row{grid-template-columns:47px 47px minmax(62px,1fr) minmax(62px,1fr) 65px}}
