/* Agent Force Studio — RStack developed by Richardson Gunde */
:root {
  color-scheme: light;
  --studio-bg: #eeece5;
  --studio-surface: #fffdf8;
  --studio-raised: #f5f3ed;
  --studio-panel: rgba(255, 253, 248, 0.94);
  --studio-line: rgba(78, 86, 92, 0.18);
  --studio-line-strong: rgba(217, 135, 25, 0.42);
  --studio-text: #20242a;
  --studio-muted: #68707a;
  --studio-dim: #8a9097;
  --studio-amber: #d98719;
  --studio-amber-soft: #d7b77f;
  --studio-blue: #2867d6;
  --studio-green: #2f8f74;
  --studio-red: #c9473b;
  --studio-violet: #7254c7;
  --studio-radius: 14px;
  --studio-shadow: 0 22px 60px rgba(32, 36, 42, 0.16);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Digital Twin chrome (Move A · #432): the 2D shell follows the dark 3D world
   by re-pointing the same design tokens the chrome already consumes. Default
   look; app.js stamps data-studio-theme and toggles it to "classic". */
#studio-app[data-studio-theme="twin"] {
  color-scheme: dark;
  --studio-bg: #070b12;
  --studio-surface: #0f1420;
  --studio-raised: #141b29;
  --studio-panel: rgba(15, 20, 32, 0.94);
  --studio-line: rgba(150, 167, 182, 0.16);
  --studio-line-strong: rgba(56, 225, 214, 0.42);
  --studio-text: #e6edf2;
  --studio-muted: #9ba7b6;
  --studio-dim: #66717f;
  --studio-amber: #38e1d6;
  --studio-amber-soft: #4a5f6a;
  --studio-blue: #6ea7ff;
  --studio-green: #4ade80;
  --studio-red: #fb7185;
  --studio-violet: #8a7cff;
  --studio-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}
/* The topbar, inspector, and page background carry hardcoded light values
   (not tokens), so re-point them for the dark Digital Twin shell. */
#studio-app[data-studio-theme="twin"] .studio-topbar {
  background: rgba(9, 13, 22, 0.82);
}
#studio-app[data-studio-theme="twin"] .studio-inspector {
  background: rgba(13, 18, 29, 0.97);
}
#studio-app[data-studio-theme="twin"] {
  background: radial-gradient(circle at 52% -10%, rgba(56, 225, 214, 0.10), transparent 34rem), var(--studio-bg);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: clip;
  background:
    radial-gradient(circle at 52% -10%, rgba(217, 135, 25, 0.15), transparent 34rem),
    var(--studio-bg);
  color: var(--studio-text);
}

button,
select { font: inherit; }

button,
select,
a { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
select:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--studio-blue);
  outline-offset: 3px;
}

button { min-height: 44px; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#studio-app {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background:
    linear-gradient(rgba(32,36,42,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,36,42,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
}

.studio-topbar {
  z-index: 40;
  min-height: 76px;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.4fr) minmax(250px, 1fr);
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--studio-line);
  background: rgba(255, 253, 248, 0.92);
  backdrop-filter: blur(20px);
}

.studio-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--studio-text);
  text-decoration: none;
}

.studio-brand-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  border: 1px solid var(--studio-line-strong);
  border-radius: 11px;
  background: linear-gradient(145deg, #fff4d9, #e9e3d6);
  box-shadow: inset 0 0 24px rgba(217, 135, 25, 0.12);
}

.studio-brand strong,
.studio-brand small { display: block; }

.studio-brand strong { letter-spacing: -0.015em; }
.studio-brand small { margin-top: 2px; color: var(--studio-muted); font-size: 11px; }

.studio-scope {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr);
  gap: 4px 10px;
  align-items: center;
}

.studio-scope label,
.studio-kicker {
  color: var(--studio-amber);
  font: 700 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.studio-scope select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  max-width: 100%;
  padding: 0 36px 0 12px;
  border: 1px solid var(--studio-line);
  border-radius: 10px;
  background: var(--studio-raised);
  color: var(--studio-text);
}

.studio-scope .studio-muted { grid-column: 2; }
.studio-muted { color: var(--studio-muted); font-size: 11px; }

.studio-status-cluster {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.studio-connection,
.studio-freshness {
  padding: 6px 9px;
  border: 1px solid var(--studio-line);
  border-radius: 999px;
  color: var(--studio-muted);
  font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}

.studio-connection::before,
.studio-freshness::before { content: "●"; margin-right: 6px; color: var(--studio-dim); }
.studio-connection[data-state="live"]::before,
.studio-freshness[data-state="fresh"]::before { color: var(--studio-green); }
.studio-connection[data-state="connecting"]::before { color: var(--studio-amber); }
.studio-connection[data-state="stale"]::before,
.studio-freshness[data-state="stale"]::before { color: var(--studio-amber); }
.studio-connection[data-state="error"]::before,
.studio-connection[data-state="disconnected"]::before { color: var(--studio-red); }

.studio-icon-button,
.studio-camera-controls button,
.studio-inspector-close {
  border: 1px solid var(--studio-line);
  border-radius: 9px;
  background: var(--studio-raised);
  color: var(--studio-text);
  cursor: pointer;
}

.studio-icon-button { padding: 8px 11px; font-size: 11px; }

.studio-workspace {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.studio-scene-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.78), transparent 46%),
    linear-gradient(145deg, #fffefb, #e9e7df);
  border-color: #d5d3cc;
}

#studio-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* The 3D canvas carries no text overlays: operational detail lives in the
   semantic view, timeline, and inspector outside the canvas. */

.studio-camera-controls {
  position: absolute;
  left: 438px;
  bottom: 18px;
  display: flex;
  gap: 8px;
}

.studio-camera-controls button { padding: 8px 13px; }

.studio-renderer-banner,
.studio-fallback {
  border: 1px solid var(--studio-line-strong);
  background: rgba(255, 249, 232, 0.96);
  color: #744a12;
  box-shadow: var(--studio-shadow);
}

.studio-renderer-banner {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  max-width: 520px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
}

.semantic-studio {
  position: absolute;
  z-index: 12;
  top: 14px;
  bottom: 14px;
  left: 14px;
  width: clamp(320px, 29vw, 410px);
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--studio-line);
  border-radius: var(--studio-radius);
  background: var(--studio-panel);
  backdrop-filter: blur(22px);
  box-shadow: var(--studio-shadow);
  scrollbar-color: var(--studio-amber-soft) transparent;
}

.semantic-heading h1 {
  margin: 4px 0 8px;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1;
  letter-spacing: -0.035em;
}

.studio-goal { margin: 0 0 18px; color: var(--studio-muted); font-size: 13px; line-height: 1.45; }

.semantic-studio section {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--studio-line);
}

.semantic-studio h2,
.studio-inspector h2,
.studio-timeline-shell h2 { margin: 0; font-size: 14px; letter-spacing: -0.01em; }

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.section-title > span { color: var(--studio-muted); font: 600 10px/1.3 ui-monospace, monospace; }

.mission-grid,
.session-list,
.studio-stack {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.mission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.studio-entity {
  width: 100%;
  padding: 11px;
  border: 1px solid var(--studio-line);
  border-radius: 11px;
  background: rgba(32, 36, 42, 0.025);
  color: var(--studio-text);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.studio-entity:hover {
  border-color: rgba(217, 135, 25, 0.5);
  background: rgba(217, 135, 25, 0.07);
  transform: translateY(-1px);
}

.studio-entity[aria-current="true"] {
  border-color: var(--studio-amber);
  background: rgba(217, 135, 25, 0.11);
  box-shadow: inset 3px 0 var(--studio-amber);
}

.mission-body,
.session-body,
.stack-item-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.mission-title,
.session-role,
.stack-title { font-size: 12px; font-weight: 730; line-height: 1.25; }
.mission-meta,
.session-meta,
.stack-meta { grid-column: 1 / -1; color: var(--studio-muted); font-size: 10px; line-height: 1.35; }

.studio-session__waiting,
.studio-orchestrator__approval {
  grid-column: 1 / -1;
  display: block;
  margin-top: 2px;
  padding: 6px 8px;
  border-inline-start: 2px solid var(--studio-violet);
  border-radius: 0 6px 6px 0;
  background: rgba(132, 95, 191, 0.07);
  color: var(--studio-text);
  font: 600 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.studio-orchestrator__approval {
  border-inline-start-color: var(--studio-amber);
  background: rgba(217, 135, 25, 0.08);
}

.studio-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--studio-muted);
  font: 700 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  white-space: nowrap;
}

.studio-state[data-state="active"],
.studio-state[data-state="starting"] { color: var(--studio-amber); }
.studio-state[data-state="completed"] { color: var(--studio-green); }
.studio-state[data-state="failed"],
.studio-state[data-state="blocked"] { color: var(--studio-red); }
.studio-state[data-state="waiting"] { color: var(--studio-violet); }
.studio-state[data-state="queued"] { color: var(--studio-blue); }

.studio-panel-empty {
  margin: 10px 0 0;
  padding: 12px;
  border: 1px dashed var(--studio-line);
  border-radius: 9px;
  color: var(--studio-muted);
  font-size: 11px;
  line-height: 1.45;
}

.semantic-lower-grid { display: grid; grid-template-columns: 1fr; }

.studio-inspector {
  position: absolute;
  z-index: 20;
  top: 14px;
  right: 14px;
  bottom: 14px;
  width: clamp(320px, 31vw, 420px);
  padding: 22px;
  overflow-y: auto;
  border: 1px solid var(--studio-line-strong);
  border-radius: var(--studio-radius);
  background: rgba(255, 253, 248, 0.98);
  box-shadow: var(--studio-shadow);
}

.studio-inspector-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  padding: 0;
  font-size: 20px;
}

.studio-inspector h2 { margin: 5px 48px 18px 0; font-size: 24px; }

.studio-facts { margin: 0; }
.studio-fact { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--studio-line); }
.studio-fact dt { color: var(--studio-muted); font-size: 11px; }
.studio-fact dd { margin: 0; overflow-wrap: anywhere; font: 600 11px/1.45 ui-monospace, monospace; }
.studio-capabilities { padding-left: 18px; color: var(--studio-muted); font-size: 12px; }
.studio-inspector-summary { color: var(--studio-text); line-height: 1.55; }

/* Room inspector + follow action (Move C · #434) */
.studio-room-facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.studio-room-facts li {
  padding: 8px 10px;
  border: 1px solid var(--studio-line);
  border-radius: 10px;
  background: var(--studio-raised);
  color: var(--studio-text);
  font-size: 0.92rem;
  line-height: 1.45;
}
.studio-follow { margin-top: 12px; }

.studio-timeline-shell {
  z-index: 35;
  min-height: 138px;
  max-height: 210px;
  padding: 12px 18px 14px;
  overflow: hidden;
  border-top: 1px solid var(--studio-line);
  background: rgba(255, 253, 248, 0.96);
}

.studio-timeline {
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0 0 8px;
  overflow-x: auto;
  list-style: none;
  scrollbar-color: var(--studio-amber-soft) transparent;
}

.timeline-item {
  flex: 0 0 238px;
  min-height: 78px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  border: 1px solid var(--studio-line);
  border-radius: 9px;
  background: var(--studio-surface);
}

.timeline-time,
.timeline-source { color: var(--studio-dim); font: 600 9px/1.3 ui-monospace, monospace; }
.timeline-type { font-size: 10px; color: var(--studio-amber); text-align: right; }
.timeline-summary { grid-column: 1 / -1; color: var(--studio-muted); font-size: 11px; }
.timeline-source { grid-column: 1 / -1; }

.studio-fallback {
  position: fixed;
  z-index: 60;
  right: 18px;
  bottom: 18px;
  max-width: 24rem;
  padding: 14px 16px;
  border-radius: 12px;
}

.studio-fallback h2 { margin: 0 0 4px; font-size: 14px; }
.studio-fallback p { margin: 0; color: #6f6250; font-size: 11px; line-height: 1.45; }
.studio-noscript { margin: 20px; color: var(--studio-text); }

#studio-app[data-renderer="semantic"] .studio-scene-shell,
#studio-app[data-renderer="semantic-only"] .studio-scene-shell { display: none; }

#studio-app[data-renderer="semantic"] .semantic-studio,
#studio-app[data-renderer="semantic-only"] .semantic-studio {
  position: relative;
  inset: auto;
  width: min(900px, calc(100% - 28px));
  margin: 14px auto;
  min-height: calc(100% - 28px);
}

#studio-app[data-renderer="semantic"] .studio-camera-controls,
#studio-app[data-renderer="semantic-only"] .studio-camera-controls { display: none; }

/* Immersive default: while the 3D office is live on desktop, the company
   floor IS the page. The complete semantic tree and lifecycle timeline stay
   one click away on the Semantic view toggle and remain the canonical
   accessibility surface; the click-open inspector stays available. */
#studio-app[data-renderer="three"] .semantic-studio,
#studio-app[data-renderer="three"] .studio-timeline-shell { display: none; }

#studio-app[data-renderer="three"] .studio-camera-controls { left: 18px; }

#studio-app[data-motion="reduced"] *,
#studio-app[data-motion="reduced"] *::before,
#studio-app[data-motion="reduced"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

@media (max-width: 1000px) {
  .studio-topbar { grid-template-columns: 1fr 1.5fr; }
  .studio-status-cluster { grid-column: 1 / -1; justify-content: flex-start; }
  .semantic-studio { width: min(390px, calc(100% - 28px)); }
  .studio-camera-controls { left: 420px; }
  .studio-inspector { width: min(420px, calc(100% - 28px)); }
}

@media (max-width: 600px) {
  html,
  body { overflow-y: auto; }

  #studio-app {
    display: block;
    min-height: 100dvh;
    background-size: 24px 24px;
  }

  .studio-topbar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .studio-topbar > *,
  .studio-brand > span { min-width: 0; }

  .studio-brand small { overflow-wrap: anywhere; }

  .studio-scope { grid-template-columns: 1fr; }
  .studio-scope .studio-muted { grid-column: 1; }
  .studio-status-cluster { grid-column: 1; justify-content: flex-start; }
  .studio-workspace { overflow: visible; }

  .studio-scene-shell {
    position: relative;
    inset: auto;
    /* Move C (#434): a real cinematic window instead of a 220px sliver — the
       Cinema director curates the framing, so the small screen gets a watchable
       stage while the semantic Studio stays primary below. */
    height: min(52dvh, 430px);
    border-bottom: 1px solid var(--studio-line);
  }

  #studio-app[data-renderer="semantic"] .studio-scene-shell,
  #studio-app[data-renderer="semantic-only"] .studio-scene-shell { display: none; }

  .studio-camera-controls {
    left: 10px;
    right: 10px;
    bottom: 10px;
    justify-content: space-between;
  }

  /* Mobile stays semantic-first even while the small canvas renders. */
  #studio-app[data-renderer="three"] .semantic-studio { display: block; }
  #studio-app[data-renderer="three"] .studio-timeline-shell { display: block; }

  .semantic-studio,
  #studio-app[data-renderer="three"] .semantic-studio,
  #studio-app[data-renderer="semantic"] .semantic-studio,
  #studio-app[data-renderer="semantic-only"] .semantic-studio {
    position: relative;
    inset: auto;
    width: auto;
    min-height: auto;
    margin: 0;
    padding: 16px 12px 24px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: rgba(255, 253, 248, 0.98);
    box-shadow: none;
  }

  .mission-grid { grid-template-columns: 1fr; }
  .studio-entity { min-height: 58px; }

  .studio-inspector {
    position: fixed;
    z-index: 80;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 82dvh;
    border-radius: 18px 18px 0 0;
    padding: 22px 16px calc(22px + env(safe-area-inset-bottom));
  }

  .studio-timeline-shell {
    max-height: none;
    padding: 14px 12px calc(16px + env(safe-area-inset-bottom));
  }

  .studio-timeline { display: grid; overflow: visible; }
  .timeline-item { min-height: 72px; }

  .studio-fallback {
    position: static;
    inset: auto;
    max-width: none;
    margin: 0 12px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Digital Twin — the mobile semantic sheet re-hardcodes a light background in
   the 600px block above; keep the dark shell cohesive below the cinema window.
   (Move C · #434) */
@media (max-width: 600px) {
  #studio-app[data-studio-theme="twin"] .semantic-studio,
  #studio-app[data-studio-theme="twin"][data-renderer="three"] .semantic-studio,
  #studio-app[data-studio-theme="twin"][data-renderer="semantic"] .semantic-studio,
  #studio-app[data-studio-theme="twin"][data-renderer="semantic-only"] .semantic-studio {
    background: var(--studio-bg);
  }
}