/* ============================================================
   Studio-mock base — defines the real ThreatExploit Studio theme
   tokens (cyan terminal) scoped to .smk, a scoped reset so the
   page's blue theme can't leak in, and the fixed 1912x888 design
   canvas that StudioMock scales to fit the showcase window.
   The per-screen CSS files (studio/training/chat) reference these
   tokens via var(...) exactly as the real legacy-studio.css does.
   ============================================================ */

.smk {
  /* Backgrounds */
  --bg-primary: #0a0a0a;
  --bg-secondary: #0f0f0f;
  --bg-tertiary: #161616;
  --bg-panel: #0c0c0c;
  --border-color: #252525;
  --border-highlight: #333333;
  /* Text */
  --text-primary: #00d4ff;
  --text-secondary: #00d4ff;
  --text-dim: #008bb5;
  --text-muted: #666666;
  --text-white: #e0e0e0;
  /* Accents */
  --accent-red: #ff4757;
  --accent-red-dim: #cc2936;
  --accent-yellow: #ffcc00;
  --accent-orange: #ff9500;
  --accent-blue: #00aaff;
  --accent-cyan: #00d4ff;
  --accent-secondary: #22d3ee;
  --accent-purple: #a855f7;
  /* Status */
  --status-success: #22c55e;
  --status-warning: #f59e0b;
  --status-error: #ff4757;
  --status-info: #00aaff;
  /* Severity */
  --severity-critical: #ff4757;
  --severity-high: #ff9500;
  --severity-medium: #ffcc00;
  --severity-low: #00aaff;
  --severity-none: #666666;
  /* Type (fixed px at the 1912px design width; the whole canvas is scaled down) */
  --font-mono: 'JetBrains Mono', 'Share Tech Mono', 'Courier New', monospace;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 14px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --border-radius: 2px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;

  font-family: var(--font-mono);
  color: var(--text-white);
  background: var(--bg-primary);
  width: 100%;
  height: 100%;
  font-size: var(--font-size-base);
  line-height: 1.45;
}

/* Scoped reset so the marketing template's global element styles don't bleed in */
.smk, .smk *, .smk *::before, .smk *::after { box-sizing: border-box; }
.smk h1, .smk h2, .smk h3, .smk h4, .smk h5, .smk h6, .smk p, .smk ul, .smk ol, .smk li, .smk figure, .smk table { margin: 0; padding: 0; }
.smk ul, .smk ol { list-style: none; }
.smk button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
.smk a { color: inherit; text-decoration: none; }
.smk img { max-width: 100%; height: auto; }
.smk input, .smk textarea { font: inherit; color: inherit; }

/* Fixed design canvas, scaled to fit by StudioMock (transform set inline) */
.smk-fit { position: absolute; inset: 0; overflow: hidden; background: #0a0a0a; }
.smk-canvas { position: absolute; top: 0; left: 0; width: 1912px; height: 888px; transform-origin: top left; }
/* Overlay layer so a modal (training) sits ON TOP of the studio, not stacked below it */
.smk-overlay { position: absolute; inset: 0; z-index: 20; }

/* Scrollbars — match the real Studio (thin, dark) instead of the OS default */
.smk, .smk * { scrollbar-width: thin; scrollbar-color: var(--border-highlight) transparent; }
.smk ::-webkit-scrollbar { width: 6px; height: 6px; }
.smk ::-webkit-scrollbar-track { background: var(--bg-secondary); }
.smk ::-webkit-scrollbar-thumb { background: var(--border-highlight); border-radius: 2px; }
.smk ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ---- Live console (pentest progress streamed before the dashboard) ---- */
.smk .console-run { padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 13px; line-height: 1.5; height: 100%; overflow: hidden; text-align: left; align-items: flex-start; }
.smk .console-run-line { color: var(--text-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(4px); animation: smkLogIn 0.3s ease forwards; animation-delay: calc(var(--i) * 0.34s); }
.smk .console-run-time { color: var(--text-dim); }
.smk .console-run-line.log-cyan { color: var(--accent-cyan); }
.smk .console-run-line.log-dim { color: var(--text-muted); }
.smk .console-run-line.log-status { color: #9aa1b1; }
.smk .console-run-line .log-prog { color: var(--accent-orange); font-weight: 700; }
.smk .console-run-line .log-done { color: var(--status-success); font-weight: 700; }
@keyframes smkLogIn { to { opacity: 1; transform: none; } }

/* ---- In-progress states for the live phase ---- */
.smk .detail-value.status-inprogress { color: var(--accent-orange); }
.smk .pentest-item.status-in_progress .pentest-status-dot { background: var(--accent-orange); }
.smk .pentest-item.status-in_progress .pentest-meta { color: var(--accent-orange); }
.smk .stage-segment.active { background: var(--accent-secondary); animation: smkSegPulse 1s ease-in-out infinite; }
.smk .stages-labels span.active { color: var(--accent-secondary); }
@keyframes smkSegPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

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