/* ═══════════════════════════════════════════════════════════════════════
   robots.css — shared robot-UI styles (discovery, pairing, drawer, deploy)
   ═══════════════════════════════════════════════════════════════════════
   Extracted verbatim from index.html's inline <style> block so both
   index.html and identity-studio.html can load ONE copy. References the
   shared :root design tokens (--text, --accent, --border, ...) defined
   identically in both pages' own stylesheets — not redefined here.

   RENAMES (collision fix — see docs/superpowers/specs/2026-09-17-shared-
   robot-ui-flow-design.md §6): the old "robot row status" class (name
   elided here so this file doesn't ship the retired selector) was defined
   3x with 3 different meanings across the two pages. Renamed on extraction:
     - drawer connectivity dot (+ .online/.offline/.reconnecting variants,
       INCLUDING the !important monochrome override) -> .robot-row-conn-dot
     - deploy-picker text badge                       -> .robot-row-status-badge
   (The override at original index.html:2472-2473 was verified by its
   section header "Robot rows — neutralize all status colors" and its
   neighbor selectors (.robot-row-rich/.robot-row-name/.robot-row-btn) plus
   the JS callsite to belong to the DRAWER DOT, not the deploy-picker
   badge as a naive line-number guess would suggest — the picker badge's
   color modifiers are the separate .robot-status-own/-other/-free classes,
   which never combine with .online/.offline.)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The one true arrow ─────────────────────────────────────────────────
   Roboto ships NO U+2192 "→". Verified two independent ways: it is absent
   from the cmap of every self-hosted woff2 in fonts/, AND it is excluded
   from the latin unicode-range (fonts.css:94 lists U+2191 and U+2193 but
   NOT U+2192), so the browser never even requests Roboto for it.

   Consequence: a literal "→" in a label always fell through to whatever
   arrow the OS happened to supply — measured at an 11px advance against
   7px for a cap "A" at the same size, with a hairline stroke beside
   600-weight text and a baseline sitting visibly low. That is the
   "arrow looks off" bug, and it rendered differently per OS, which is
   why it was hard to pin down.

   Rendering it as a mask removes the font dependency entirely: the arrow
   inherits currentColor and scales with font-size, so one class is
   correct in every button, at every weight, on every platform.

   Usage: put `.ui-arrow` on the element whose label it follows. Works in
   flex and inline-block buttons alike (flex:none stops it being squashed
   as a flex item; vertical-align handles the inline-block case). For a
   button whose label toggles, toggle the class with it — see
   RobotUI._setBtnLabel in robots.js. */
:root{
  --ui-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.75 12h13.5M12.75 6.25 19 12l-6.25 5.75'/%3E%3C/svg%3E");
  --ui-arrow-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.25 12H5.75M11.25 6.25 5 12l6.25 5.75'/%3E%3C/svg%3E");
}
.ui-arrow{
  /* The arrow is an inline-block box, not part of the text run, so a narrow
     button would break the LINE between label and arrow and strand the arrow
     on its own row (caught on the mobile onboarding modal's "SAVE &
     CONTINUE"). Keeping label+arrow on one line is the whole point of the
     affordance. */
  white-space:nowrap;
}
.ui-arrow::after{
  content:"";
  display:inline-block;
  width:1em;height:1em;
  flex:none;                  /* never squashed when the button is flex */
  margin-left:.38em;
  vertical-align:-.145em;     /* optical centre against Roboto's cap height */
  background-color:currentColor;
  -webkit-mask:var(--ui-arrow) no-repeat center/contain;
          mask:var(--ui-arrow) no-repeat center/contain;
  transition:transform .18s;
}
.ui-arrow:hover::after{transform:translateX(2px)}
/* Back / previous. Roboto has no U+2190 either (same cmap + unicode-range
   miss as U+2192), so "<- Back" had the identical fallback bug. The arrow
   precedes the label here, so it hangs off ::before. */
.ui-arrow-back{white-space:nowrap}
.ui-arrow-back::before{
  content:"";
  display:inline-block;
  width:1em;height:1em;
  flex:none;
  margin-right:.38em;
  vertical-align:-.145em;
  background-color:currentColor;
  -webkit-mask:var(--ui-arrow-back) no-repeat center/contain;
          mask:var(--ui-arrow-back) no-repeat center/contain;
  transition:transform .18s;
}
.ui-arrow-back:hover::before{transform:translateX(-2px)}
/* Standalone arrow elements (the span IS the arrow, not a suffix). */
.ui-arrow-glyph{
  display:inline-block;
  width:1em;height:1em;
  flex:none;
  vertical-align:-.145em;
  background-color:currentColor;
  -webkit-mask:var(--ui-arrow) no-repeat center/contain;
          mask:var(--ui-arrow) no-repeat center/contain;
  transition:transform .18s;
}
@media (prefers-reduced-motion:reduce){
  .ui-arrow::after,.ui-arrow-back::before,.ui-arrow-glyph{transition:none}
}

.discover-card{position:fixed;
  top:calc(var(--nav-h) + 18px);
  right:18px;
  z-index:300;
  width:380px;
  background:var(--bg-panel);
  border-radius:14px;
  border:1px solid var(--border-mid);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04) inset,
    0 18px 48px -16px rgba(0,0,0,0.18),
    0 4px 12px -4px rgba(0,0,0,0.08);
  overflow:hidden;
                                                                      
                                                                       
  opacity:0;
  transform:translateX(48px) translateY(-10px) scale(.92);
  transition:
    opacity .38s ease-out,
    transform .56s cubic-bezier(.18,.89,.32,1.16),                                 
    box-shadow .25s ease;
  pointer-events:none;
  font-family:'Roboto',sans-serif;
  will-change:transform,opacity;}
.discover-card.visible{opacity:1;
  transform:translateX(0) translateY(0) scale(1);
  pointer-events:auto;}
.discover-card.exiting{opacity:0;
  transform:translateX(28px) scale(.96);
  transition:
    opacity .22s ease-in,
    transform .26s cubic-bezier(.4,.02,1,.42);
  pointer-events:none;}
.discover-card.visible:hover{transform:translateX(0) translateY(-2px) scale(1.005);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04) inset,
    0 22px 60px -14px rgba(0,0,0,0.22),
    0 6px 16px -4px rgba(0,0,0,0.10);}
.discover-card-image{display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 24px 12px;
                                                                  
                                                                    
                                                                  
                                                                 
                                                             
                                                                 
                                                                
                                                
  background:var(--bg-panel);}
.discover-card-image img{width:160px;
  height:auto;
  max-height:180px;
  object-fit:contain;
  display:block;
  pointer-events:none;
  user-select:none;}
.discover-card-body{padding:20px 24px 20px;position:relative;text-align:center}
.discover-card-title{font-size:20px;font-weight:700;letter-spacing:-.012em;
  color:var(--text);line-height:1.2;
  margin-bottom:4px;}
.discover-card-sub{font-size:13px;font-weight:400;color:var(--text-2);
  line-height:1.45;
  margin-bottom:18px;}
.discover-card-close{position:absolute;top:12px;right:12px;
  width:28px;height:28px;border-radius:8px;
  background:rgba(255,255,255,0.85);
  backdrop-filter:saturate(120%) blur(4px);
  border:1px solid var(--border);
  color:var(--text-2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s;
  z-index:3;}
.discover-card-close:hover{background:rgba(255,255,255,1);
  border-color:var(--border-mid);
  color:var(--text);
  transform:rotate(90deg);
  box-shadow:0 2px 6px -2px rgba(0,0,0,0.12);}
.discover-card-close:active{transform:rotate(90deg) scale(.92);}
.discover-card-close svg{display:block}
.discover-card-cta{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;
  padding:12px 16px;
  background:var(--accent);
  color:#FFFFFF;
  border:none;border-radius:8px;cursor:pointer;
  font-family:'Roboto',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;
  transition:background .18s,transform .12s,box-shadow .18s;
  box-shadow:0 2px 6px -2px rgba(0,0,0,0.20);
  position:relative;}
.discover-card-cta:hover{background:#1A1A1A;
  transform:translateY(-1px);
  box-shadow:0 4px 10px -3px rgba(0,0,0,0.28);}
.discover-card-cta:active{transform:translateY(1px);
  box-shadow:0 2px 0 rgba(11,40,38,0.18),0 3px 8px -4px rgba(11,40,38,0.32);}
.discover-card-cta:disabled{opacity:.62;cursor:wait;transform:none;
  box-shadow:0 2px 4px -1px rgba(0,0,0,0.20);}
/* Mask-rendered (see .ui-arrow above) — Roboto has no U+2192, so the
   font-family/weight declared here never reached the glyph. */
.discover-card-cta-arrow{font-size:14px;width:1em;height:1em;
  display:inline-block;flex:none;vertical-align:-.145em;
  background-color:currentColor;
  -webkit-mask:var(--ui-arrow) no-repeat center/contain;
          mask:var(--ui-arrow) no-repeat center/contain;
  transition:transform .2s ease;}
.discover-card-cta:hover .discover-card-cta-arrow{transform:translateX(3px)}
.discover-card-more{display:none;align-items:center;justify-content:space-between;
  margin-top:10px;padding:9px 12px;border-radius:8px;
  background:transparent;
  border:1px solid var(--border);
  cursor:pointer;
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:11.5px;font-weight:500;letter-spacing:0;
  color:var(--text-2);text-transform:none;
  transition:background .15s,border-color .15s,color .15s;}
.discover-card-more:hover{background:rgba(0,0,0,0.03);
  border-color:var(--border-mid);
  color:var(--text);}
.discover-card-more.visible{display:flex}
.discover-card-more-count{font-weight:600;color:var(--text);}
.discover-card-more-arrow{font-size:11px;color:var(--text-3);
  transition:transform .18s;}
.discover-card-more:hover .discover-card-more-arrow{color:var(--text)}
.discover-card.more-expanded .discover-card-more-arrow{transform:rotate(180deg)}
.discover-card-list{display:none;margin-top:10px;
  border:1px solid var(--border);border-radius:10px;
  overflow:hidden;background:#FFFFFF;}
.discover-card.more-expanded .discover-card-list{display:block}
.discover-card-listrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;
                                                                       
                                                                       
                                                                    
  text-align:left;}
.discover-card-listrow + .discover-card-listrow{border-top:1px solid var(--border)}
.discover-card-listrow-img{flex-shrink:0;width:40px;height:40px;border-radius:8px;
  background:linear-gradient(180deg,#F4F6F7 0%,#ECF0F1 100%);
  object-fit:contain;padding:3px;}
.discover-card-listrow-info{display:flex;flex-direction:column;min-width:0;flex:1}
.discover-card-listrow-name{font-size:13px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.005em;}
.discover-card-listrow-model{font-size:11px;font-weight:500;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;
  letter-spacing:.005em;}
.discover-card-listrow-btn{flex-shrink:0;min-height:30px;padding:6px 12px;border-radius:7px;
  background:var(--accent);border:1px solid var(--accent);color:#fff;
  font-family:'Roboto',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:background .18s,transform .12s,box-shadow .18s;
  box-shadow:0 1px 3px -1px rgba(0,0,0,0.18);
  display:inline-flex;align-items:center;gap:8px;}
.discover-card-listrow-btn:hover{background:#1A1A1A;border-color:#1A1A1A;
  transform:translateY(-1px);
  box-shadow:0 3px 7px -2px rgba(0,0,0,0.22);}
.discover-card-listrow-btn:active{transform:translateY(1px)}
/* Mask-rendered (see .ui-arrow above) — Roboto has no U+2192. */
.discover-card-listrow-btn-arrow{font-size:11px;width:1em;height:1em;
  display:inline-block;flex:none;vertical-align:-.145em;
  background-color:currentColor;
  -webkit-mask:var(--ui-arrow) no-repeat center/contain;
          mask:var(--ui-arrow) no-repeat center/contain;
  transition:transform .18s;}
.discover-card-listrow-btn:hover .discover-card-listrow-btn-arrow{transform:translateX(2px)}
.discover-card{display:none}
.cloud-mode .discover-card{display:block}
/* Phone: bottom sheet instead of floating top-right (index.html:359) */
@media (max-width:560px){
  .discover-card{
    left:12px;right:12px;width:auto;
    top:auto;bottom:calc(12px + env(safe-area-inset-bottom));
  }
}
.robots-nav-btn{display:none;align-items:center;gap:6px;
  padding:6px 12px;border-radius:6px;border:1px solid var(--border-mid);
  background:transparent;cursor:pointer;
  font-family:'Roboto',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.06em;color:var(--text-2);text-transform:uppercase;
  transition:border-color .15s,color .15s,background .15s;}
.cloud-mode .robots-nav-btn{display:inline-flex}
.robots-nav-btn:hover{border-color:rgba(0,0,0,.25);color:var(--text);background:rgba(0,0,0,.02)}
.robot-row-owner-pill.rk-neutral{background:transparent;border-color:var(--border-mid);color:var(--text-3)}
.robot-row-owner-pill.rk-warn{background:rgba(230,126,34,.08);border-color:rgba(230,126,34,.25);color:#A1561E}
.robot-row-owner-pill.rk-err{background:rgba(192,57,43,.07);border-color:rgba(192,57,43,.3);color:var(--danger)}
.robots-nav-btn-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 6px rgba(10,10,10,.6);}
.robots-nav-btn-dot.warn{background:#E67E22;box-shadow:0 0 6px rgba(230,126,34,.7)}
.robots-nav-btn-count{margin-left:2px;padding:1px 7px;border-radius:9px;background:var(--accent);
  color:#fff;font-size:10px;font-weight:700;letter-spacing:0;line-height:1.5;}
.robots-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.28);
  z-index:400;display:none;
  opacity:0;transition:opacity .25s;}
.robots-drawer-overlay.open{display:block;opacity:1}
.robots-drawer{position:fixed;top:0;right:0;height:100vh;width:420px;max-width:96vw;
  background:#FAFAFB;border-left:1px solid var(--border);
  z-index:401;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.25,.85,.3,1);
  box-shadow:-16px 0 40px -8px rgba(11,40,38,0.18);}
.robots-drawer.open{transform:translateX(0)}
.robots-drawer-header{flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px 14px;
  border-bottom:1px solid var(--border);background:#FFFFFF;}
.robots-drawer-title{font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:10px;font-weight:500;letter-spacing:.22em;
  color:var(--text-3);text-transform:uppercase;margin-bottom:3px;}
.robots-drawer-heading{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text);}
.robots-drawer-close{width:30px;height:30px;border-radius:7px;border:1px solid transparent;
  background:transparent;color:var(--text-3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;font-weight:300;
  transition:background .15s,border-color .15s,color .15s,transform .15s;}
.robots-drawer-close:hover{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08);color:var(--text);transform:rotate(90deg)}
.robots-drawer-body{flex:1;overflow-y:auto;padding:14px 16px 32px;}
.robots-drawer-section{margin-bottom:18px}
.robots-drawer-section-label{font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:9px;font-weight:600;letter-spacing:.22em;
  color:var(--text-3);text-transform:uppercase;
  padding:0 6px 7px;}
.robots-drawer-affirmation{display:flex;align-items:flex-start;gap:7px;
  margin:6px 6px 0;padding:8px 11px;
  background:rgba(11,40,38,0.025);border-radius:8px;
  font-size:11.5px;line-height:1.45;color:var(--text-3);
  font-style:italic;}
.robots-drawer-affirmation svg{flex-shrink:0;margin-top:2px;color:var(--text-3);opacity:.7;}
.robot-row-rich{background:#FFFFFF;border:1px solid rgba(11,40,38,0.07);border-radius:11px;
  padding:13px 14px;margin-bottom:8px;
  box-shadow:0 1px 0 rgba(11,40,38,0.03);
  transition:box-shadow .15s,border-color .15s;}
.robot-row-rich:hover{border-color:rgba(11,40,38,0.14);box-shadow:0 2px 6px rgba(11,40,38,0.06)}
.robot-row-rich.is-mine{border-left:3px solid var(--accent);padding-left:11px}
.robot-row-rich.is-taken{border-left:3px solid #E67E22;padding-left:11px}
.robot-row-rich.is-offline{opacity:.65}
.robot-row-rich.is-reconnecting{opacity:.92}
.robot-row-top{display:flex;align-items:center;gap:10px}
.robot-row-conn-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--text-3);}
.robot-row-conn-dot.online{background:#A3A3A3;box-shadow:0 0 6px rgba(163,163,163,.6)}
.robot-row-conn-dot.offline{background:#C5C5CC}
.robot-row-conn-dot.reconnecting{background:#E0A030;box-shadow:0 0 0 0 rgba(224,160,48,.55);animation:robotRowReconnect 1.4s ease-out infinite}
/* Grace-window state keyframes (orphan-fix C3, 2026-09-17) — was defined
   only in index.html even though this rule (and robots.js's markup) is
   shared; robots.css had zero @keyframes before this move. */
@keyframes robotRowReconnect{
  0%  {box-shadow:0 0 0 0   rgba(224,160,48,.55)}
  70% {box-shadow:0 0 0 5px rgba(224,160,48,0)}
  100%{box-shadow:0 0 0 0   rgba(224,160,48,0)}
}
/* Activity timeline — single semantic row per event with icon, label,
   and time. Same grammar as GitHub Issue timeline / Linear activity.
   "deploy" rows are typed differently (green check) than ownership
   events (teal lock / amber arrow) so the eye can scan by type.
   Moved here (orphan-fix I4, 2026-09-17) — styles DOM emitted by
   robots.js:939 on both pages. */
.hh-timeline{display:flex;flex-direction:column}
.hh-row{
  display:flex;align-items:center;gap:9px;
  padding:7px 10px;border-radius:6px;
  font-size:11.5px;line-height:1.4;color:var(--text-2);
}
.hh-row + .hh-row{border-top:1px solid rgba(11,40,38,0.04)}
.hh-icon{
  width:18px;height:18px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:5px;background:rgba(255,255,255,.7);
  border:1px solid rgba(11,40,38,0.06);
}
.hh-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hh-label b{font-weight:700;color:var(--text)}
.hh-who{
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:10.5px;
  color:var(--text-3);background:rgba(0,0,0,.04);
  padding:1px 5px;border-radius:3px;letter-spacing:.02em;
}
.hh-when{
  flex-shrink:0;font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:10px;color:var(--text-3);letter-spacing:.02em;
}
.robot-row-name-wrap{flex:1;min-width:0}
.robot-row-name{font-size:14px;font-weight:600;letter-spacing:-.005em;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  cursor:pointer;}
.robot-row-name:hover{color:var(--accent)}
.robot-row-id{font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:10px;color:var(--text-3);margin-top:2px;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.robot-row-deploy{font-size:11px;color:var(--text-2);margin-top:9px;line-height:1.45;
  display:flex;align-items:center;gap:6px;}
.robot-row-deploy-empty{color:var(--text-3);font-style:italic}
.robot-row-deploy-persona{font-weight:600;color:var(--text)}
.robot-row-deploy-when{color:var(--text-3)}
.robot-row-owner-pill{display:inline-flex;align-items:center;gap:5px;
  margin-top:9px;padding:3px 8px;border-radius:5px;
  background:rgba(230,126,34,.08);border:1px solid rgba(230,126,34,.25);
  font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:10px;font-weight:500;letter-spacing:.04em;color:#A1561E;}
.robot-row-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.robot-row-btn{padding:6px 12px;border-radius:6px;border:1px solid var(--border-mid);
  background:#FFFFFF;color:var(--text-2);cursor:pointer;
  font-family:'Roboto',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.04em;
  transition:border-color .15s,color .15s,background .15s;}
.robot-row-btn:hover{border-color:rgba(0,0,0,.25);color:var(--text);background:rgba(0,0,0,.02)}
.robot-row-btn.primary{border-color:#262626;background:#262626;color:#FFFFFF;}
.robot-row-btn.primary:hover{background:#171717;color:#fff}
.robot-row-btn.warn{border-color:#E67E22;background:#FFF;color:#A1561E;}
.robot-row-btn.warn:hover{background:#FFF4EB;border-color:#D87513}
.robot-row-btn.danger:hover{border-color:#C0392B;color:#C0392B;background:#FFF}
.robot-row-history{margin-top:10px;padding:8px 4px 4px;border-radius:8px;
  background:linear-gradient(180deg,#F8FAFA 0%,#F3F6F6 100%);
  border:1px solid rgba(11,40,38,0.06);
  display:none;}
.robot-row-history.open{display:block}
.robots-drawer-empty{padding:32px 16px;text-align:center;color:var(--text-3);font-size:12px;line-height:1.6;}
.nickname-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:800;
  display:none;align-items:center;justify-content:center;padding:24px;
  opacity:0;transition:opacity .2s;}
.nickname-modal-overlay.open{display:flex;opacity:1}
.nickname-modal{background:#FFFFFF;border-radius:14px;width:440px;max-width:100%;
  max-height:calc(100vh - 48px);display:flex;flex-direction:column;
  border:1px solid rgba(11,40,38,0.08);
  box-shadow:0 24px 60px -16px rgba(11,40,38,0.4);
  overflow:hidden;
  transform:scale(.96);transition:transform .25s cubic-bezier(.2,.85,.3,1);}
.nickname-modal-overlay.open .nickname-modal{transform:scale(1)}
.nickname-modal-strip{flex-shrink:0;height:4px;
  background:linear-gradient(90deg,#A3A3A3 0%,#262626 100%);}
.nickname-modal-body{padding:24px 28px 8px;
  overflow-y:auto;
  flex:1 1 auto;min-height:0;}
.nickname-modal-eyebrow{font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:9.5px;font-weight:500;letter-spacing:.22em;
  color:var(--accent);text-transform:uppercase;margin-bottom:8px;}
.nickname-modal-title{font-size:19px;font-weight:700;letter-spacing:-.012em;color:var(--text);
  line-height:1.22;}
.nickname-modal-sub{font-size:12.5px;color:var(--text-3);margin-top:8px;line-height:1.5;}
.nickname-modal-meta{margin-top:16px;padding:10px 12px;border-radius:8px;
  background:#F6F8F8;border:1px solid rgba(11,40,38,0.05);
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:11.5px;
  color:var(--text-2);
  display:flex;gap:10px;align-items:baseline;
  overflow:hidden;}
.nickname-modal-meta + .nickname-modal-meta{margin-top:6px}
.nickname-modal-meta-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nickname-modal-meta-label{color:var(--text-3);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;flex-shrink:0;min-width:50px}
.nickname-modal-label{font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:9.5px;font-weight:500;letter-spacing:.22em;
  color:var(--text-3);text-transform:uppercase;
  margin:20px 0 8px;}
.nickname-modal-detected-chip{display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:8px;
  background:var(--bg-card);border:1px solid var(--border);
  font-size:13.5px;font-weight:600;color:var(--text);
  letter-spacing:-.005em;}
.nickname-modal-detected-chip::after{content:"detected";
  font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:9px;font-weight:500;letter-spacing:.16em;
  color:var(--success);text-transform:uppercase;
  margin-left:4px;}
.nickname-modal-input{width:100%;padding:11px 13px;border-radius:8px;
  border:1px solid var(--border-mid);background:#FFFFFF;color:var(--text);
  font-family:'Roboto',sans-serif;font-size:14px;font-weight:500;
  transition:border-color .15s,box-shadow .15s;}
.nickname-modal-input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(10,10,10,0.14);}
.nickname-modal-select{appearance:none;-webkit-appearance:none;
  padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%238A8A9A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;}
.nickname-modal-error{color:var(--danger);font-size:11.5px;margin-top:8px;line-height:1.45;
  display:none;padding:8px 10px;background:rgba(192,57,43,.06);
  border:1px solid rgba(192,57,43,.18);border-radius:6px;}
.nickname-modal-error.visible{display:block}
.nickname-modal-actions{display:flex;gap:8px;justify-content:flex-end;
  padding:16px 28px 24px;
  border-top:1px solid rgba(11,40,38,0.05);
  margin-top:16px;
  flex-shrink:0;background:#FFFFFF;}
.nickname-modal-btn{height:38px;padding:0 18px;border-radius:8px;border:none;cursor:pointer;
  font-family:'Roboto',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  transition:background .15s,transform .12s,box-shadow .15s,border-color .15s,color .15s;
  display:inline-flex;align-items:center;justify-content:center;}
.nickname-modal-btn.secondary{background:transparent;color:var(--text-2);
  border:1px solid var(--border-mid);}
.nickname-modal-btn.secondary:hover{border-color:rgba(0,0,0,.25);color:var(--text)}
.nickname-modal-btn.primary{background:#262626;color:#FFFFFF;
  box-shadow:0 3px 0 rgba(11,40,38,0.18);}
.nickname-modal-btn.primary:hover{background:#171717;transform:translateY(-1px);box-shadow:0 4px 0 rgba(11,40,38,0.18)}
.nickname-modal-btn.primary:disabled{opacity:.6;cursor:wait;transform:none;background:#262626}
.takeover-modal-strip{background:linear-gradient(90deg,#E67E22 0%,#A1561E 100%);}
.takeover-modal-header{display:flex;gap:12px;align-items:flex-start}
.takeover-modal-warning-icon{width:32px;height:32px;border-radius:8px;
  background:rgba(230,126,34,.10);border:1px solid rgba(230,126,34,.28);
  display:inline-flex;align-items:center;justify-content:center;
  color:#A1561E;flex-shrink:0;margin-top:2px;}
.ownership-banner{position:fixed;top:calc(var(--nav-h) + 18px);left:50%;transform:translate(-50%,-20px);
  z-index:310;
  background:#FFF;border:1px solid rgba(230,126,34,.5);border-radius:10px;
  padding:11px 16px;
  box-shadow:0 8px 28px -8px rgba(230,126,34,.35);
  display:none;align-items:center;gap:12px;
  font-size:13px;color:var(--text);
  opacity:0;transition:opacity .25s,transform .35s cubic-bezier(.2,.85,.3,1);
  max-width:520px;}
.ownership-banner.visible{display:flex;opacity:1;transform:translate(-50%,0)}
.ownership-banner-icon{flex-shrink:0;color:#E67E22}
.ownership-banner-text{flex:1;line-height:1.45}
.ownership-banner-text b{font-weight:700;color:var(--text)}
.ownership-banner-text .who{font-family:'Roboto Mono',ui-monospace,monospace;font-size:11px;
  background:rgba(230,126,34,.10);padding:2px 6px;border-radius:4px;color:#A1561E;}
.ownership-banner-close{width:22px;height:22px;border-radius:5px;background:transparent;border:none;
  color:var(--text-3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;}
.ownership-banner-close:hover{color:var(--text);background:rgba(0,0,0,.04)}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,8px);
  background:#262626;color:#FFFFFF;
  padding:11px 22px;border-radius:9px;
  font-family:'Roboto',sans-serif;font-size:12px;font-weight:600;letter-spacing:.05em;
  box-shadow:0 8px 24px -6px rgba(11,40,38,.4);
                                                                  
                                                          
  z-index:1000;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .3s cubic-bezier(.2,.85,.3,1);}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.cloud-mode #dm-picker .deploy-actions{display:none !important}
/* Hide the legacy LAN-IP deploy form in cloud mode. The cloud path
   (claim → cloud-deploy via WSS) is the only correct way to reach a
   robot from developer.ff.com, so removing the IP form prevents users
   from typing an IP and hitting the self-signed-cert wall. Moved here
   (orphan-fix C1, 2026-09-17) — #new-robot-section/#known-robots-section
   are emitted by robots.js and .cloud-mode is applied on BOTH pages, so
   the rule belongs in the shared stylesheet, not just index.html. */
.cloud-mode #new-robot-section,
.cloud-mode #known-robots-section{display:none !important}
/* P0-4 (design review, 2026-09-17): in cloud mode the two siblings above
   are always hidden, so #claimed-robots-section is unconditionally the
   only section rendered — its "Your Robots" label then reads as a
   section label over the only section (DESIGN_SYSTEM.md §5 row 6). The
   modal title + sub already say what the list is. Non-cloud mode still
   shows the label normally when a sibling section is visible. */
.cloud-mode #claimed-robots-section .deploy-section-label{display:none}
.deploy-modal-overlay{display:none;position:fixed;inset:0;z-index:650;
  background:rgba(0,0,0,.38);backdrop-filter:blur(5px);
  align-items:center;justify-content:center;padding:24px;}
.deploy-modal-overlay.open{display:flex}
.deploy-modal{background:var(--bg-panel);border:1px solid var(--border-mid);
  border-radius:16px;width:100%;max-width:560px;
                                                                       
                                                                
                                                                      
                                                                   
                                                            
  max-height:calc(100vh - 48px);
  box-shadow:0 28px 72px rgba(0,0,0,.2);
  overflow:hidden;
  display:flex;flex-direction:column;}
.dmstate.active{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.deploy-modal-header{flex-shrink:0}
.deploy-modal-body{flex:1 1 auto;min-height:0;
  overflow-y:auto;overflow-x:hidden;}
.deploy-modal-header{padding:24px 24px 0;display:flex;align-items:flex-start;justify-content:space-between;}
.deploy-modal-title{font-size:18px;font-weight:700;letter-spacing:-.012em;color:var(--text);line-height:1.2}
.deploy-modal-sub{font-size:12.5px;font-weight:400;color:var(--text-3);margin-top:5px;line-height:1.45}
.deploy-modal-body{padding:20px 24px 24px}
.dmstate{display:none}
.dmstate.active{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.deploy-section-label{font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--text-3);margin-bottom:6px;}
.deploy-actions{display:flex;gap:8px;margin-top:18px}
.deploy-steps{list-style:none;padding:8px 0;margin-bottom:4px}
.deploy-step{display:flex;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--border);
  font-size:12px;font-weight:500;color:var(--text-3);
  transition:color .2s;}
.deploy-step:last-child{border-bottom:none}
.deploy-step.done{color:var(--text-2)}
.deploy-step.active{color:var(--text)}
/* Deploy-progress step icons (orphan-fix C3, 2026-09-17) — style DOM
   emitted by robots.js (~1883, ~2362). The spin keyframe is renamed
   robotStepSpin (not the bare "spin" index.html:924 owns) to avoid a
   cross-file same-name @keyframes collision now that both files load
   on the same page. */
.step-icon{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.step-spinner{
  width:14px;height:14px;border-radius:50%;
  border:2px solid var(--bg-elev);border-top-color:var(--accent);
  animation:robotStepSpin .8s linear infinite;
}
@keyframes robotStepSpin{to{transform:rotate(360deg)}}
.step-check{color:#27AE60}
.step-failed{color:var(--danger)}
.step-idle{width:6px;height:6px;border-radius:50%;background:var(--border-mid);margin:auto}
/* M1 — 'unconfirmed': the step happened (or was asked for) and nothing confirmed the outcome.
   A hollow ring, NOT a tick and not amber: amber means "we know something is off", and
   "we could not confirm" is its own grey (same rule as .di-sub.is-unknown in
   identity-studio.html). See docs/DEPLOY_HONESTY_BENCHMARK.md. */
.step-unconfirmed{width:10px;height:10px;border-radius:50%;
  border:1.6px solid var(--border-mid);background:transparent;margin:auto}
.deploy-step.unconfirmed{color:var(--text-3)}
/* 'degraded': we DID assess it and it did not happen. Amber (the existing --warn token),
   never the grey ring — grey says "we don't know", and saying that about a restart we watched
   fail is the same conflation one level down. Not --danger red either: the step did not
   complete, it did not blow up. --warn has an inline fallback because index.html's :root does
   not define it while identity-studio.html does, and robots.css loads on both.
   Design review 2026-09-22, P1-3. */
.step-degraded{width:10px;height:2px;border-radius:1px;background:var(--warn,#906D2B);margin:auto}
.deploy-step.degraded{color:var(--warn,#906D2B)}
.deploy-step.failed{color:var(--danger)}
.deploy-success-wrap{text-align:center;padding:12px 0 4px}
.deploy-success-icon{width:52px;height:52px;border-radius:50%;
  background:rgba(39,174,96,.1);border:1px solid rgba(39,174,96,.25);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.deploy-success-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:5px}
.deploy-success-sub{font-size:12px;font-weight:400;color:var(--text-3);line-height:1.6}
/* M1 — the third terminal pane: applied, not confirmed loaded. `--warn` carries an inline
   fallback because index.html's :root does not define it (identity-studio.html does) and
   robots.css is loaded by BOTH pages. */
.deploy-unconfirmed-icon{width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.deploy-unconfirmed-icon.is-degraded{color:var(--warn,#906D2B);
  background:rgba(144,109,43,.1);border:1px solid rgba(144,109,43,.25);}
.deploy-unconfirmed-icon.is-unknown{color:var(--text-3);
  background:var(--bg-card);border:1px solid var(--border-mid);}
/* One icon node, two glyphs — see the markup note in robots.js (design review P1-5). */
.deploy-unconfirmed-icon .dui-degraded,
.deploy-unconfirmed-icon .dui-unknown{display:none}
.deploy-unconfirmed-icon.is-degraded .dui-degraded{display:block}
.deploy-unconfirmed-icon.is-unknown  .dui-unknown{display:block}
.deploy-unconfirmed-msg{margin-top:16px;padding:12px;border-radius:var(--r);
  background:var(--bg-card);border:1px solid var(--border);
  font-size:12px;line-height:1.55;color:var(--text-2);text-align:left;
  /* DEFERRED (design review 2026-09-22, P2-2): with overlay scrollbars a message longer than
     this cap is silently clipped. Removing the cap risks a very long robot message pushing the
     Close button off-screen, which is worse; a proper fix is a fade mask + a taller modal body
     and is its own task. */
  max-height:170px;overflow-y:auto;overflow-wrap:anywhere;}
.deploy-unconfirmed-msg .duc-note{color:var(--text);font-weight:500}
.deploy-unconfirmed-msg .duc-note + .duc-rest{margin-top:8px;color:var(--text-3)}
.deploy-error-wrap{text-align:center;padding:8px 0 4px}
.deploy-error-msg{font-size:12px;color:var(--danger);line-height:1.55;margin-bottom:14px}
.deploy-form-label{font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--text-3);margin-bottom:6px;display:block;}
.deploy-form-select{width:100%;padding:10px 12px;font-family:'Roboto',sans-serif;font-size:13px;
  color:var(--text);background:var(--bg-card);
  border:1.5px solid var(--border-mid);border-radius:7px;outline:none;
  transition:border-color .15s;appearance:none;cursor:pointer;margin-bottom:10px;}
.deploy-form-select:focus{border-color:var(--accent)}
.robot-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.robot-row{display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  border:1px solid rgba(11,40,38,0.08);border-radius:12px;
  background:var(--bg-panel);cursor:pointer;
  transition:border-color .18s,background .18s,box-shadow .18s,transform .12s;}
.robot-row:hover{border-color:rgba(10,10,10,.35);background:#FAFCFC;
  box-shadow:0 4px 14px -6px rgba(11,40,38,0.10);}
.robot-row:active{transform:translateY(1px)}
.robot-row.selected{border-color:var(--accent);background:var(--accent-dim)}
.robot-row-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.robot-row-dot.active{background:#27AE60;box-shadow:0 0 0 3px rgba(39,174,96,.16)}
.robot-row-dot.conflict{background:#E67E22;box-shadow:0 0 0 3px rgba(230,126,34,.18)}
.robot-row-dot.fresh{background:#A3A3A3;box-shadow:0 0 0 3px rgba(163,163,163,.18)}
.robot-row.is-offline{opacity:.55}
.robot-row.is-offline{cursor:default}
.robot-row-cta.cta-offline{background:#E5E5E5;color:#737373;box-shadow:none;cursor:default}
.robot-row-info{flex:1;min-width:0}
.robot-row-name{font-size:14px;font-weight:600;letter-spacing:-.005em;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.robot-row-ip{font-size:11.5px;font-weight:400;color:var(--text-3);
  margin-top:4px;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.robot-row-status-badge{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 7px;border-radius:3px;flex-shrink:0;white-space:nowrap}
/* Badge color variants (index.html:1773-1775) — used only by the
   deploy-picker's known-robots row template (renderRobotPicker). */
.robot-status-own{color:var(--accent);background:var(--accent-dim)}
.robot-status-other{color:#C07000;background:rgba(230,126,34,.1)}
.robot-status-free{color:var(--text-3);background:var(--bg-elev)}
.robot-row-cta{flex-shrink:0;
  display:inline-flex;align-items:center;gap:6px;
  height:36px;padding:0 16px;border-radius:8px;border:none;
  font-family:'Roboto',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.05em;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .12s;}
.robot-row-cta.cta-deploy{background:#262626;color:#FFFFFF;
  box-shadow:0 2px 0 rgba(11,40,38,0.18);}
.robot-row:hover .robot-row-cta.cta-deploy{background:#171717;box-shadow:0 3px 0 rgba(11,40,38,0.22)}
.robot-row-cta.cta-claim{background:var(--accent);color:#FFFFFF;
  box-shadow:0 2px 0 rgba(10,10,10,.30);}
.robot-row:hover .robot-row-cta.cta-claim{filter:brightness(1.08);box-shadow:0 3px 0 rgba(10,10,10,.36)}
.robot-row-cta.cta-takeover{background:#FFFFFF;color:#A1561E;
  border:1px solid #E67E22;
  box-shadow:0 2px 0 rgba(230,126,34,.20);}
.robot-row:hover .robot-row-cta.cta-takeover{background:#FFF4EB;box-shadow:0 3px 0 rgba(230,126,34,.26)}
/* Mask-rendered (see .ui-arrow above) — neither Roboto nor Roboto Mono
   carries U+2192, so the old font-family/weight here never applied. */
.robot-row-cta-arrow{font-size:14px;width:1em;height:1em;
  display:inline-block;flex:none;vertical-align:-.145em;
  background-color:currentColor;
  -webkit-mask:var(--ui-arrow) no-repeat center/contain;
          mask:var(--ui-arrow) no-repeat center/contain;
  transition:transform .18s;}
.robot-row:hover .robot-row-cta-arrow{transform:translateX(3px)}
.robot-row-remove{flex-shrink:0;width:20px;height:20px;border-radius:4px;border:none;background:transparent;color:var(--text-3);font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;opacity:0;transition:opacity .15s,background .15s,color .15s}
.robot-row:hover .robot-row-remove{opacity:1}
.robot-row-remove:hover{background:rgba(192,16,16,.1);color:#C01010}
.robot-conflict-warn{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:7px;background:rgba(230,126,34,.08);border:1px solid rgba(230,126,34,.25);font-size:11px;font-weight:500;color:#8B4500;line-height:1.5;margin-bottom:10px}
.new-robot-section{border-top:1px solid var(--border);padding-top:12px;margin-top:4px}
.new-robot-label{font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.robot-form-row{display:flex;gap:8px;margin-bottom:8px}
.robot-form-row .deploy-form-select{margin-bottom:0}
.robot-form-row .key-input{margin-bottom:0;letter-spacing:0}
/* #deploy-overlay prefix keeps this override winning over the new
   #deploy-overlay .key-input base rule appended below (both loaded from
   this same stylesheet) — without it, the higher-specificity ID-scoped
   base rule would clobber this override's letter-spacing on BOTH pages
   (deploy modal is injected into both), diverging from index.html's own
   pre-extraction cascade. Same declarations, just re-scoped so the
   existing override still wins the specificity fight. */
#deploy-overlay .robot-form-row .key-input{margin-bottom:0;letter-spacing:0}
/* Mobile / tablet (14a3aaa — moved from the ≤380px block, which is
   narrower than any mainstream phone: iPhone 12-15 = 390px, Pro Max =
   430px, Pixel = 412px, so these rules never applied on a real phone). */
@media (max-width: 767px){
  .deploy-modal-overlay{padding:14px}
  .deploy-modal{max-height:92dvh}
  .deploy-modal-body{padding:16px 16px 20px}
  .robots-drawer{width:100%;max-width:100%}
}
.discover-card-title{letter-spacing:-.01em}
.discover-card:hover{border-color:#0A0A0A !important}
.discover-card{background:linear-gradient(180deg, #FFFFFF 0%, #FCFCFC 100%) !important;
  border-color:#E8E8E8 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03), 0 16px 40px rgba(0,0,0,.02) !important;
  transition:transform .15s, box-shadow .15s, border-color .15s !important;}
.discover-card:hover{transform:translateY(-1px) !important;
  box-shadow:0 2px 4px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05), 0 24px 60px rgba(0,0,0,.04) !important;}
.discover-card{border-color:#E0E0E0 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.10) !important;}
.discover-card.visible:hover{box-shadow:0 1px 0 rgba(0,0,0,.06) inset, 0 16px 40px rgba(0,0,0,.14) !important;}
.discover-card-row-value.dim{color:#525252 !important}
.discover-card-more:hover .discover-card-more-arrow{color:#0A0A0A !important}
.robots-nav-btn:hover{border-color:#0A0A0A !important; color:#0A0A0A !important; background:#FAFAFA !important;}
.robots-nav-btn-dot{background:#0A0A0A !important}
.robots-nav-btn-dot.warn{background:#737373 !important; box-shadow:none !important}
.robot-row-rich.is-mine{border-left-color:#0A0A0A !important;}
.robot-row-rich:hover{border-color:#0A0A0A !important; box-shadow:0 2px 6px rgba(0,0,0,.06) !important}
.robot-row-conn-dot.online{background:#0A0A0A !important; box-shadow:none !important}
.robot-row-conn-dot.offline{background:#A3A3A3 !important; box-shadow:none !important}
.robot-row-name:hover{color:#0A0A0A !important}
.robot-row-btn:hover{border-color:#0A0A0A !important; color:#0A0A0A !important; background:#FAFAFA !important;}
.robot-row-btn.primary, .robot-row-btn.primary:hover{background:#0A0A0A !important; color:#FFFFFF !important; border-color:#0A0A0A !important;}
.robot-row-btn.warn, .robot-row-btn.warn:hover{background:#FAFAFA !important; border-color:#A3A3A3 !important; color:#525252 !important;}
.robot-row-btn.danger:hover{border-color:#DC2626 !important; color:#DC2626 !important; background:#FFFFFF !important;}
.robot-row.selected{border-color:#0A0A0A !important; background:#F5F5F5 !important}
.robot-row-dot.active{background:#0A0A0A !important; box-shadow:0 0 0 3px rgba(0,0,0,.10) !important}
.robot-row-dot.conflict{background:#737373 !important; box-shadow:0 0 0 3px rgba(0,0,0,.06) !important}
.robot-row-dot.fresh{background:#525252 !important; box-shadow:0 0 0 3px rgba(0,0,0,.06) !important}
.robot-row:hover .robot-row-cta.cta-deploy{background:#0A0A0A !important; box-shadow:0 3px 0 rgba(0,0,0,.18) !important; color:#FFFFFF !important}
.robot-row:hover .robot-row-cta.cta-takeover{background:#FAFAFA !important; box-shadow:0 3px 0 rgba(0,0,0,.10) !important; color:#0A0A0A !important}
.robot-row-cta{color:#FFFFFF !important}
.robot-row-cta.cta-deploy{background:#0A0A0A !important}
.robot-row-cta.cta-takeover{background:#525252 !important}
.robots-drawer-title{color:#737373 !important}
.robots-drawer{background:#FFFFFF !important; border-left-color:#E0E0E0 !important}
.robots-drawer-close:hover{background:#F5F5F5 !important; border-color:#E0E0E0 !important; color:#0A0A0A !important;}
.robots-nav-btn-dot{background:#0A0A0A !important;
  box-shadow:0 0 0 2px #FFFFFF, 0 0 6px rgba(0,0,0,.18) !important;}
.robots-nav-btn-dot.warn{background:#737373 !important; box-shadow:none !important}
.robots-nav-btn-count{background:#0A0A0A !important; color:#FFFFFF !important;
  font-family:'Roboto Mono', ui-monospace, monospace !important;
  font-weight:600 !important;}

/* ═══════════════════════════════════════════════════════════════════════
   Modal-chrome classes left behind in index.html on extraction.
   The extraction treated .btn-generate / .btn-back / .modal-close /
   .key-input as "shared non-robot classes" and left their base rules in
   index.html's own <style> block. Wrong: the deploy modal (ROBOT_UI_HTML
   in robots.js, #deploy-overlay) uses all four, and identity-studio.html
   never defined them itself — so in the studio the deploy modal's
   Cancel/Deploy/× rendered as unstyled browser-default buttons.

   Declarations below are copied BYTE-IDENTICAL from index.html (verified
   line-for-line against index.html:1180-1185, 1419-1433, 1873-1881) and
   scoped to #deploy-overlay so they can only ever apply inside the robot
   deploy modal — never clobbering unrelated buttons/inputs on either
   page. Because identical declarations produce identical rendering
   regardless of selector specificity, this scoping wins the cascade on
   index.html too (deploy modal is the only place these classes appear)
   without changing a single pixel there.
   ═══════════════════════════════════════════════════════════════════════ */
#deploy-overlay .modal-close{
  background:none;border:none;cursor:pointer;padding:4px;
  color:var(--text-3);border-radius:6px;line-height:1;
  transition:color .15s,background .15s;flex-shrink:0;margin-top:-2px;
}
#deploy-overlay .modal-close:hover{color:var(--text);background:var(--bg-card)}
#deploy-overlay .btn-back{
  font-family:'Roboto',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.8px;text-transform:uppercase;padding:9px 16px;
  cursor:pointer;border:1px solid var(--border-mid);border-radius:6px;
  background:transparent;color:var(--text-3);transition:all .15s;
}
#deploy-overlay .btn-back:hover{color:var(--text-2);border-color:rgba(0,0,0,.2)}
#deploy-overlay .btn-generate{
  flex:1;font-family:'Roboto',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;padding:11px 20px;
  cursor:pointer;background:var(--accent);border:none;border-radius:6px;
  color:#fff;transition:filter .15s;
}
#deploy-overlay .btn-generate:hover{filter:brightness(1.08)}
#deploy-overlay .btn-generate:disabled{opacity:.5;cursor:not-allowed;filter:none}
/* key input row (orphan-fix I4, 2026-09-17) — wraps the key-input emitted
   at robots.js:2329; also used by index.html's own API-key onboard modal. */
.key-input-wrap{position:relative;margin-bottom:12px}
#deploy-overlay .key-input{
  width:100%;padding:11px 56px 11px 14px;
  font-family:'Roboto',sans-serif;font-size:13px;font-weight:400;
  color:var(--text);background:var(--bg-card);
  border:1.5px solid var(--border-mid);border-radius:8px;outline:none;
  transition:border-color .15s;letter-spacing:.3px;
}
#deploy-overlay .key-input:focus{border-color:var(--accent)}
#deploy-overlay .key-input::placeholder{color:var(--text-3);letter-spacing:0}

/* Operator recovery status on the unconfirmed-deploy pane. Three states, and the colour tracks
   REQUIRED ACTION, not epistemic state (DESIGN_SYSTEM.md §7): grey asks nothing of you, amber
   asks you to act. Fallbacks on every token — robots.css is shared with index.html, where
   --success is NOT defined; a bare var(--success) there falls through to near-black and an
   affirmation renders as ordinary text. Design review 2026-09-22, P1-5. */
.duc-restart-status{margin-top:14px;font-size:13px;line-height:1.5;text-align:center}
.duc-restart-status.is-working{color:var(--text-2,#5A5A66)}
.duc-restart-status.is-ok{color:var(--success,#1E8449)}
.duc-restart-status.is-warn{color:var(--warn,#906D2B)}
.duc-restart-status.is-unknown{color:var(--text-3,#6E6E7A)}