/* ─── Practice Mode Right Panel — Tab System ────────────────────────────────
   Scope  : #right-panel  (practice-mode body class active)
   Extends: existing design tokens (--p-*) and .button utilities
   Rule   : All selectors prefixed .prp-* to avoid global collisions
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Visibility utility ───────────────────────────────────────────────────── */
.prp-hidden { display: none !important; }

/* ── Problem name pill in panel header ────────────────────────────────────── */
/* Matches #lrp-problem-name in learn mode exactly — no uppercase, dark text  */
#prp-problem-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #1e293b;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: none;
  border: none;
  pointer-events: none;
  user-select: none;
}
#prp-problem-name.prp-name-hidden { display: none; }

/* Hide the description / difficulty card from the body when panel is mounted */
body.practice-mode #right-panel #practice-preset-info {
  display: none !important;
}

/* In practice mode the preset dropdown lives in the workspace action bar —
   hide the sticky-header from the panel header so the name pill is truly centred */
body.practice-mode #right-panel .panel-header #learn-sticky-header {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SYSTEM INSIGHTS PANEL  (#practice-insights-panel)
   Real-time canvas analysis — driven by InsightsEngine + problem-tab.js
   Sits below #practice-tasks-panel as a separate section in the body.
   ═══════════════════════════════════════════════════════════════════════════ */

#practice-insights-panel {
  padding: 0px 5px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
#practice-insights-panel.pip-hidden {
  display: none;
}

@keyframes pip-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pip-badge-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ── Section divider + header row ── */
#practice-insights-panel .pip-header {
  display: flex;
  align-items: center;
  gap: 7px;
  /* Exactly matches .practice-tasks-header */
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 4px 7px;
  color: #1a2635;
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-top: none;
  margin-bottom: 0;
}
#practice-insights-panel .pip-heading {
  font-size: inherit;
  font-weight: inherit;
    text-transform: uppercase;

  color: inherit;
  letter-spacing: normal;
  flex: 1 1 auto;
}
#practice-insights-panel .pip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e2e8f0;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0;
  text-transform: none;
  transition: background 0.2s, color 0.2s;
}
#practice-insights-panel .pip-badge.pip-badge--pop {
  animation: pip-badge-pop 0.35s ease forwards;
  background: #3b82f6;
  color: #fff;
}

/* ── Insight card list ── */
#practice-insights-panel .pip-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Individual insight card ── */
#practice-insights-panel .pip-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 4px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  border-left: 2px solid transparent;
  font-size: var(--fs-sm);
  line-height: 1.4;
  animation: pip-card-in 0.22s ease both;
  transition: background 0.15s;
  color: #334155;
}
#practice-insights-panel .pip-card:last-child {
  border-bottom: none;
}

/* ── Type variants ── */
#practice-insights-panel .pip-card--success      { border-left-color: #22c55e; background: transparent; }
#practice-insights-panel .pip-card--warning      { border-left-color: #f5a623; background: transparent; }
#practice-insights-panel .pip-card--optimization { border-left-color: #f5a623; background: transparent; }
#practice-insights-panel .pip-card--info         { border-left-color: transparent; color: #94a3b8; font-style: italic; }

/* ── Icon ── */
#practice-insights-panel .pip-icon {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  opacity: 0.85;
}
#practice-insights-panel .pip-card--success      .pip-icon { color: #22c55e; }
#practice-insights-panel .pip-card--warning      .pip-icon { color: #f59e0b; }
#practice-insights-panel .pip-card--optimization .pip-icon { color: #f59e0b; }
#practice-insights-panel .pip-card--info         .pip-icon { color: var(--p-dim, #aaa); }
#practice-insights-panel .pip-icon svg { width: 12px; height: 12px; display: block; }

/* ── Message text ── */
#practice-insights-panel .pip-msg { flex: 1 1 auto; min-width: 0; font-size: var(--fs-xs);}

/* ── Empty state ── */
#practice-insights-panel .pip-empty-state {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  font-size: var(--fs-xs);
  color: #94a3b8;
  font-style: normal;
}
#practice-insights-panel .pip-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px dashed #cbd5e1;
  color: #94a3b8;
  font-size: var(--fs-xs);
  font-weight: 700;
  font-style: normal;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Dark mode overrides ── */
body.theme-dark #practice-insights-panel .pip-card--success      { background: rgba(34,  197,  94, 0.11); }
body.theme-dark #practice-insights-panel .pip-card--warning      { background: rgba(239,  68,  68, 0.11); }
body.theme-dark #practice-insights-panel .pip-card--optimization { background: rgba(245, 166,  35, 0.11); }
body.theme-dark #practice-insights-panel .pip-card--info         { background: rgba(255, 255, 255, 0.04); }

/* ── When mounted: sticky header lives in .panel-header (flex row) ─────────── */
#right-panel .panel-header #learn-sticky-header {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  /* override any top/bottom margins from the panel-section styles */
}
/* hide the label ("What are you designing?") in the header — space is too tight */
#right-panel .panel-header #learn-sticky-header label[for="practice-preset-select"] {
  display: none;
}
/* Make the custom select fill the header width */
#right-panel .panel-header #learn-sticky-header .preset-custom-select {
  width: 100%;
}
/* Compact trigger height to fit the header row */
#right-panel .panel-header #learn-sticky-header .pcs-trigger {
  font-size: var(--fs-base);
  font-weight: 600;
}

/* ── Preset info card — anchored at top of #practice-content ───────────────
   Shown/hidden by practice.js; floats just below the dropdown header.      */
#practice-content > #practice-preset-info {
  margin: 0 0 4px;
  width: 100%;
  box-sizing: border-box;
}

/* ── Tab bar — inside #simulate-view (flex column), always visible ──────────── */
/* Remove the default section gap so the tab bar sits flush under the header */
body.practice-mode #right-panel #simulate-view {
  gap: 0;
}
/* Remove .simulation-panel's margin-top/gap so content starts flush below tab bar.
   flex:1 constrains it so #simulate-panel-actions stays visible at the bottom. */
body.practice-mode #right-panel #simulate-view .simulation-panel {
  margin-top: 0;
  gap: 0;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Make #practice-content a flex column whose children scroll independently  */
body.practice-mode #right-panel #practice-content {
  overflow: hidden;    /* clip at boundary — children scroll internally      */
  display: flex;
  flex-direction: column;
}

/* ── 75 / 25 preferred split — content-aware, responsive shrink/grow ─────────
   flex-basis: auto  → each panel starts at its natural content height
   flex-grow 3:1     → leftover space (after content) splits 75%/25%
   flex-shrink 1:1   → both yield equally when space is tight
   No max-height     → insights expands freely as tasks complete and shrink
   min-height: 0     → allows shrinking below natural size when necessary    */
body.practice-mode #right-panel #practice-tasks-panel {
  flex: 3 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
body.practice-mode #right-panel #practice-insights-panel {
  flex: 1 1 auto;
  min-height: 80px;   /* always show at least the score pills */
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 6px;
}
/* #simulation-content is the scrollable container — scroll here, NOT on #output,
   so accordion .result-block cards inside #output remain normal block elements. */
body.practice-mode #right-panel #simulation-content {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  position: relative;
}

#prp-header-tabs {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;       /* fill available width inside panel-header flex row */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
  background: transparent;
  border-bottom: none;  /* panel-header already has border-bottom */
  flex-shrink: 0;
  z-index: 1;
  height: 100%;         /* fill panel-header height */
  margin-right: 4px;    /* small gap before the > collapse button */
}
#prp-header-tabs::-webkit-scrollbar { display: none; }

/* Panel-header loses its side padding when tabs are present */
#right-panel .panel-header:has(#prp-header-tabs) {
  padding: 0;
  /* > button is position:absolute right:1rem — no padding-right needed here */
}
/* Tab bar reserves its own right gap so the last tab isn't under the > button */
#right-panel .panel-header #prp-header-tabs {
  padding-right: 2.75rem;
}
/* First tab gets a small left inset */
#right-panel .panel-header #prp-header-tabs .prp-tab:first-child {
  padding-left: 14px;
}

/* Tabs inside panel-header — fill header height, active indicator on bottom border */
#right-panel .panel-header #prp-header-tabs .prp-tab {
  padding: 0 10px;
  font-size: var(--fs-xs);
  height: 100%;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
#right-panel .panel-header #prp-header-tabs .prp-tab.active {
  color: var(--p-primary);
  border-bottom-color: var(--p-primary);
}
#right-panel .panel-header #prp-header-tabs .prp-tab + .prp-tab::before {
  top: 20%; height: 60%;
}

/* No gap above simulate-view when practice panel is active */
body.practice-mode #right-panel #simulate-view { gap: 0; }

.prp-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 6px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--p-muted);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.prp-tab:hover { color: var(--p-text); }
.prp-tab.active {
  color: var(--p-primary);
  border-bottom-color: var(--p-primary);
}
/* thin vertical separator between tabs */
.prp-tab + .prp-tab::before {
  content: '';
  position: absolute;
  left: 0; top: 22%; height: 56%;
  width: 1px;
  background: var(--p-border-soft);
}

/* ── Injected panes (Discuss / Submission / ARIA) ─────────────────────────── */
/* These live inside #simulate-view, sibling to .simulation-panel */
.prp-pane {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: hidden;   /* individual sections handle their own scroll */
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIMULATE TAB — empty state (shown before any simulation has been run)
   ═══════════════════════════════════════════════════════════════════════════ */
.prp-sim-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 16px;
  color: var(--p-muted);
  text-align: center;
  pointer-events: none;
}
.prp-sim-empty-icon { opacity: 0.3; }
.prp-sim-empty-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--p-text);
  margin: 0;
}
.prp-sim-empty-sub {
  font-size: var(--fs-sm);
  color: var(--p-muted);
  margin: 0;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DISCUSS TAB
   ═══════════════════════════════════════════════════════════════════════════ */
.prp-discuss {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
}

/* Toolbar: sort pills + ask button */
.prp-discuss-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 7px;
  border-bottom: 1px solid var(--p-border-soft);
  flex-shrink: 0;
  gap: 8px;
}
.prp-sort-group {
  display: flex;
  align-items: center;
  background: var(--p-surface-2);
  border: 1px solid var(--p-border);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.prp-sort-btn {
  padding: 4px 9px;
  border: none;
  background: transparent;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--p-muted);
  cursor: pointer;
  transition: all 0.12s;
}
.prp-sort-btn.active {
  background: var(--p-surface);
  color: var(--p-text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
.prp-ask-btn {
  padding: 5px 10px;
  border: 1px solid var(--p-primary);
  background: transparent;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--p-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.prp-ask-btn:hover { background: var(--p-primary); color: #fff; }

/* Thread list */
.prp-thread-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.prp-thread-item {
  padding: 10px 10px 9px;
  border-bottom: 1px solid var(--p-border-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: background 0.1s;
}
.prp-thread-item:hover { background: var(--p-surface-2); }
.prp-thread-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--p-text);
  line-height: 1.3;
  margin: 0;
}
.prp-thread-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--p-muted);
  flex-wrap: wrap;
}
.prp-thread-author { font-weight: 700; color: var(--p-text); }
.prp-thread-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.prp-vote-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.prp-vote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 9px;
  background: transparent;
  border: 1px solid var(--p-border);
  border-radius: 6px;
  font-size: var(--fs-xss);
  font-weight: 600;
  color: var(--p-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  line-height: 1;
}
.prp-vote-btn:hover { background: var(--p-surface-2); color: var(--p-text); }
.prp-upvote-btn.voted   { color: #22c55e; border-color: #22c55e; background: rgba(34,197,94,0.08); }
.prp-downvote-btn.downvoted { color: #e57373; border-color: #e57373; background: rgba(229,115,115,0.08); }
.prp-upcount, .prp-downcount { font-size: var(--fs-xs); }
.prp-view-btn {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--p-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  white-space: nowrap;
}
.prp-action-btn {
  font-size: var(--fs-xss);
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--p-border);
  background: transparent;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.prp-edit-btn { color: var(--p-muted); }
.prp-edit-btn:hover { background: var(--p-surface-2); color: var(--p-text); }
.prp-delete-btn { color: #e57373; border-color: rgba(229,115,115,0.3); }
.prp-delete-btn:hover { background: rgba(229,115,115,0.12); color: #e57373; }
.prp-discuss-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  font-size: var(--fs-sm);
  color: var(--p-muted);
}
/* Inline page-load spinner (appended while fetching next page) */
.prp-load-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  font-size: var(--fs-xs);
  color: var(--p-dim);
}
/* IntersectionObserver sentinel — invisible 1px trigger */
.prp-sentinel {
  height: 1px;
  width: 100%;
  pointer-events: none;
}
.prp-question-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--p-muted);
  margin-top: 6px;
  flex-wrap: wrap;
}

/* Thread detail */
.prp-thread-detail {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.prp-back-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid var(--p-border-soft);
  background: transparent;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--p-muted);
  cursor: pointer;
  text-align: left;
  flex-shrink: 0;
  width: 100%;
  transition: color 0.12s;
}
.prp-back-btn:hover { color: var(--p-text); }
.prp-thread-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prp-question-block {
  background: var(--p-surface-2);
  border: 1px solid var(--p-border-soft);
  border-radius: 8px;
  padding: 10px 12px;
}
.prp-question-title {
  font-size: var(--fs-base);
  font-weight: 800;
  color: var(--p-text);
  margin: 0 0 5px;
  line-height: 1.3;
}
.prp-question-body {
  font-size: var(--fs-sm);
  color: var(--p-muted);
  margin: 0;
  line-height: 1.5;
}
.prp-replies-heading {
  font-size: var(--fs-xss);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--p-muted);
  margin: 4px 0 0;
}
.prp-reply-item {
  border-left: 2px solid var(--p-border-soft);
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.prp-reply-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.prp-reply-author {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--p-text);
}
.prp-reply-time {
  font-size: var(--fs-xs);
  color: var(--p-dim);
}
.prp-reply-body {
  font-size: var(--fs-sm);
  color: var(--p-text);
  line-height: 1.45;
  margin: 0;
}
.prp-reply-footer {
  display: flex;
  gap: 4px;
  margin-top: 1px;
}

/* Reply composer — always pinned to bottom of thread view */
.prp-reply-compose {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.prp-reply-input {
  flex: 1;
  border: 1px solid var(--p-border);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: var(--fs-xs);
  font-family: inherit;
  color: var(--p-text);
  background: var(--p-surface-2);
  resize: none;
  min-height: 38px;
  max-height: 80px;
  transition: border-color 0.15s;
  line-height: 1.4;
}
.prp-reply-input:focus { outline: none; border-color: var(--p-primary); }
.prp-reply-post {
  padding: 9px 16px;
  border: 1px solid #3b82f6;
  background: #3b82f6;
  color: #fff;
  border-radius: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(59,130,246,0.35);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.prp-reply-post:hover {
  background: #2563eb;
  box-shadow: 0 6px 20px rgba(59,130,246,0.45);
  transform: translateY(-1px);
}
.prp-reply-post:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* When reply composer is inline in the pane (both Practice and Learn mode) */
#prp-reply-actions {
  flex-shrink: 0;
  padding: 10px 10px 14px;
  border-top: 1px solid var(--p-border);
  background: var(--p-surface);
}

/* Ask-question form */
.prp-ask-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
}
.prp-ask-form-body {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
/* Ask form footer always inline in the form (both Practice and Learn mode) */
.prp-ask-form > .prp-ask-form-footer {
  flex-shrink: 0;
  padding: 10px 10px 14px;
  border-top: 1px solid var(--p-border);
  background: var(--p-surface);
}
.prp-ask-form label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--p-text);
  margin-bottom: 4px;
  display: block;
}
.prp-ask-form input,
.prp-ask-form textarea {
  width: 100%;
  border: 1px solid var(--p-border);
  border-radius: 7px;
  padding: 9px 11px;
  font-size: var(--fs-sm);
  font-family: inherit;
  color: var(--p-text);
  background: var(--p-surface-2);
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.prp-ask-form input:focus,
.prp-ask-form textarea:focus { outline: none; border-color: var(--p-primary); }
.prp-ask-form textarea { resize: vertical; min-height: 70px; }
/* .prp-ask-form-footer is rendered inside #simulate-panel-actions */
.prp-ask-form-footer {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: stretch;
}
.prp-ask-cancel {
  flex: 0 0 25%;
  padding: 9px 16px;
  border: 1px solid var(--p-border);
  background: transparent;
  border-radius: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: inherit;
  color: var(--p-muted);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
  line-height: 1.4;
}
.prp-ask-cancel:hover { border-color: var(--p-text); color: var(--p-text); }
.prp-ask-submit {
  flex: 1;
  padding: 9px 16px;
  border: 1px solid #3b82f6;
  background: #3b82f6;
  color: #fff;
  border-radius: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
  line-height: 1.4;
}
.prp-ask-submit:hover { background: #2563eb; box-shadow: 0 6px 20px rgba(59,130,246,0.45); }

/* Inline edit (thread title/body & reply body) */
.prp-inline-edit-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 6px;
}
.prp-inline-edit-input,
.prp-inline-edit-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--p-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: var(--fs-xs);
  font-family: inherit;
  background: var(--p-surface);
  color: var(--p-text);
  resize: vertical;
  outline: none;
}
.prp-inline-edit-input:focus,
.prp-inline-edit-textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.prp-inline-edit-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.prp-inline-edit-label {
  font-size: var(--fs-xss);
  font-weight: 600;
  color: var(--p-muted);
  margin-bottom: 2px;
}

/* SVG icon buttons for owner edit/delete on posts & replies */
.prp-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.prp-card-header > div:first-child { flex: 1; min-width: 0; }
.prp-owner-icons {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}
.prp-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--p-border);
  background: transparent;
  cursor: pointer;
  color: var(--p-muted);
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.prp-icon-btn:hover { background: var(--p-surface-2); color: var(--p-text); }
.prp-icon-delete { color: #e57373; border-color: rgba(229,115,115,0.3); }
.prp-icon-delete:hover { background: rgba(229,115,115,0.12); color: #e57373; border-color: rgba(229,115,115,0.5); }
.prp-reply-header-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Discuss empty */
.prp-discuss-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  color: var(--p-muted);
  text-align: center;
}
.prp-discuss-empty-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--p-text);
  margin: 0;
}
.prp-discuss-empty-sub {
  font-size: var(--fs-sm);
  color: var(--p-muted);
  margin: 0;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUBMISSION TAB
   ═══════════════════════════════════════════════════════════════════════════ */
.prp-submission {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}
.prp-submission-header {
  padding: 10px 10px 6px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--p-border-soft);
}
.prp-submission-title {
  font-size: var(--fs-xss);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--p-muted);
  margin: 0;
}
.prp-submission-table-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  /* padding: 4px 4px 12px; */
}
.prp-submission-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.prp-submission-table th {
  text-align: center;
  padding: 6px 6px 5px;
  color: var(--p-muted);
  font-weight: 800;
  font-size: var(--fs-xss);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--p-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--p-surface);
  z-index: 1;
}
.prp-submission-table td {
  padding: 7px 6px;
  border-bottom: 1px solid var(--p-border-soft);
  color: var(--p-text);
  vertical-align: middle;
  text-align: center;
}
.prp-score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: 800;
}
.prp-score-high { background: rgba(34,197,94,0.12);  color: #16a34a; }
.prp-score-mid  { background: rgba(234,179,8,0.12);   color: #b45309; }
.prp-score-low  { background: rgba(239,68,68,0.12);   color: #dc2626; }
.prp-status-passed   { color: #16a34a; font-weight: 700; }
.prp-status-accepted { color: #16a34a; font-weight: 700; }
.prp-status-review   { color: #b45309; font-weight: 700; }
.prp-status-fail     { color: #dc2626; font-weight: 700; }
.prp-submission-time    { color: var(--p-dim); font-size: var(--fs-xss); white-space: nowrap; }
.prp-submission-metric  { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.prp-submission-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  color: var(--p-muted);
  text-align: center;
}
.prp-submission-empty-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--p-text);
  margin: 0;
}
.prp-submission-empty-sub {
  font-size: var(--fs-sm);
  color: var(--p-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── Submission footer — total count ───────────────────────────────────── */
.prp-submission-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 16px;
  border-top: 1px solid var(--p-border, rgba(0,0,0,0.07));
  flex-shrink: 0;
  background: var(--p-surface, #fff);
}
.prp-sub-total-label {
  font-size: var(--fs-sm);
  color: #000000;
  font-weight: 500;
  letter-spacing: 0.01em;
}


/* ── Persistent Problem Header ─────────────────────────────────────────── */
#prp-problem-header {
  display: none; /* shown by JS only when content is available */
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  flex-shrink: 0;
}
.prp-ph-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.prp-ph-title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text, #e8e8e8);
  line-height: 1.3;
}
.prp-ph-desc {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--p-dim, #888);
  line-height: 1.5;
}
.prp-difficulty-badge {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.prp-diff-easy   { background: rgba(34,197,94,0.15);  color: #22c55e; }
.prp-diff-medium { background: rgba(245,166,35,0.15); color: #f5a623; }
.prp-diff-hard   { background: rgba(239,68,68,0.15);  color: #ef4444; }

/* ═══════════════════════════════════════════════════════════════════════════
   LEARN MODE RIGHT PANEL (LearnPanel)
   Reuses .prp-* tab tokens; adds lrp-* scoped styles for learn-only content.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Force-hide utility used by LearnPanel to hide the old Simulate/FAQ toggle */
.lrp-force-hidden { display: none !important; }

/* When tab bar is in the panel-header, remove side padding so tabs go edge-to-edge */
#right-panel .panel-header:has(#lrp-header-tabs) {
  padding: 0;
  /* > button is position:absolute right:1rem — no padding-right needed here */
}
/* Tab bar reserves its own right gap so the last tab isn't under the > button */
#right-panel .panel-header #lrp-header-tabs {
  padding-right: 2.75rem;
}
/* First tab gets a small left inset */
#right-panel .panel-header #lrp-header-tabs .prp-tab:first-child {
  padding-left: 14px;
}

/* Tab bar — same visual style as practice, separate id to avoid conflicts */
#lrp-header-tabs {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;       /* fill available width inside panel-header flex row */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
  background: transparent;
  border-bottom: none;  /* panel-header already has border-bottom */
  flex-shrink: 0;
  z-index: 1;
  height: 100%;         /* fill panel-header height */
}
#lrp-header-tabs::-webkit-scrollbar { display: none; }

/* Tabs inside panel-header — active indicator on bottom of the header border */
#right-panel .panel-header #lrp-header-tabs .prp-tab {
  padding: 0 10px;
  font-size: var(--fs-xs);
  height: 100%;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
#right-panel .panel-header #lrp-header-tabs .prp-tab.active {
  color: var(--p-primary);
  border-bottom-color: var(--p-primary);
}
#right-panel .panel-header #lrp-header-tabs .prp-tab + .prp-tab::before {
  top: 20%; height: 60%;
}

/* Ensure #simulate-view has no gap when learn panel is active */
body.learn-mode-active #right-panel #simulate-view { gap: 0; }

/* ── Empty state (no preset selected) ── */
.lrp-empty-state {
  padding: 28px 16px;
  text-align: center;
  color: var(--p-muted, #94a3b8);
}
.lrp-empty-title {
  margin: 0 0 6px;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--p-dim, #888);
}
.lrp-empty-sub {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.55;
}

/* ── Problem pane — scrollable ── */
#lrp-pane-problem {
  overflow-y: auto;
}

.lrp-problem {
  padding: 6px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lrp-problem-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  overflow-x: auto; /* make the header horizontally scrollable if content overflows */
  overflow-y: hidden; /* prevent vertical overflow */
}
.lrp-problem-title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--p-text, #1e293b);
  flex: 1 1 0;
  min-width: 0;
}
.lrp-problem-desc {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--p-dim, #555);
  line-height: 1.6;
}

/* ── Requirements sections ── */
.lrp-req-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lrp-req-heading {
  margin: 0;
  font-size: var(--fs-xss);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--p-primary, #3b82f6);
}
.lrp-req-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lrp-req-list li {
  font-size: var(--fs-sm);
  color: var(--p-text, #1e293b);
  line-height: 1.45;
}

/* ── Simulate pane — scrollable output + sticky button footer ── */
#lrp-pane-simulate {
  display: flex;
  flex-direction: column;
  overflow: hidden;          /* inner #simulation-content scrolls, not the pane */
}
#lrp-pane-simulate #simulation-content {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: block !important;
  position: relative;
}
/* ── Discuss pane — form + pinned footer ── */
#lrp-pane-discuss {
  display: flex;
  flex-direction: column;
  overflow: hidden;          /* form-body scrolls; footer stays pinned */
}
.lrp-sim-footer {
  flex-shrink: 0;
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem 0.6rem;
  background: var(--p-surface, #fff);
}
.lrp-sim-footer .button {
  flex: 1;
  padding: 0.8rem 1.4rem;
  font-size: var(--fs-base);
  border-radius: 12px;
}

/* ─── Architecture Health Bar ────────────────────────────────────────────── */
#practice-insights-panel .pip-health-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 5px;
  background: transparent;
}

#practice-insights-panel .pip-health-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 4px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  min-width: 0;
}

#practice-insights-panel .phm-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1e293b;
  white-space: nowrap;
}

#practice-insights-panel .phm-value {
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  color: #1e293b;
}

/* strength levels */
#practice-insights-panel .pip-health-metric.arch-strong  { border-color: #bbf7d0; background: #f0fdf4; }
#practice-insights-panel .pip-health-metric.arch-strong  .phm-value { color: #15803d; }
#practice-insights-panel .pip-health-metric.arch-moderate { border-color: #fde68a; background: #fefce8; }
#practice-insights-panel .pip-health-metric.arch-moderate .phm-value { color: #92400e; }
#practice-insights-panel .pip-health-metric.arch-weak    { border-color: #fecaca; background: #fff1f2; }
#practice-insights-panel .pip-health-metric.arch-weak    .phm-value { color: #b91c1c; }

/* ─── Component Intelligence (inspector) ───────────────────────────────── */
.insp-intel-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 10px 12px;
  margin-top: 2px;
  border-top: 1px solid #f1f5f9;
  background: #fafbff;
  border-radius: 0 0 10px 10px;
}

.insp-role-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  width: fit-content;
}

.insp-intel-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.insp-intel-label {
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
}

.insp-intel-body {
  font-size: var(--fs-xs);
  color: #475569;
  line-height: 1.45;
}

.insp-pairings {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.insp-pairing-chip {
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

.insp-why-matters {
  padding: 8px 10px;
  border-radius: 8px;
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.insp-why-matters .insp-intel-label {
  color: #b45309;
}

.insp-why-matters .insp-intel-body {
  color: #78350f;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 5 — INTELLIGENT SIMULATION TAB
   Scope: #prp-sim-root  (inside .prp-pane[data-tab=simulate])
   ═══════════════════════════════════════════════════════════════════════════ */

.prp-sim-root {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 20px;
  overflow-y: auto;
  height: 100%;
}

/* ── Scenario selector bar ─────────────────────────────────────────────── */
.sim-scenario-bar {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
  padding: 5px 0px;
  min-height: 65px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
  position: sticky;
  top: 0;
  z-index: 4;
  overflow-x: auto;
  scrollbar-width: none;
}
.sim-scenario-bar::-webkit-scrollbar { display: none; }

.sim-scenario-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 18px;
  min-height: 58px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 100ms ease;
  font-family: inherit;
  flex: 0 0 auto;
  white-space: nowrap;
}
.sim-scenario-btn:hover {
  background: #f0f4ff;
  border-color: #c7d4ff;
}
.sim-scenario-btn.active {
  background: #eff6ff;
  border-color: #3b82f6;
}
.sim-scenario-btn:active { transform: scale(0.96); }

/* Per-scenario idle tints */
.sim-scenario-btn[data-sc="normal"]  .ssb-icon { color: #3b82f6; }
.sim-scenario-btn[data-sc="spike"]   .ssb-icon { color: #f59e0b; }
.sim-scenario-btn[data-sc="failure"] .ssb-icon { color: #ef4444; }
.sim-scenario-btn[data-sc="global"]  .ssb-icon { color: #8b5cf6; }
.sim-scenario-btn[data-sc="async"]   .ssb-icon { color: #14b8a6; }

/* Per-scenario hover — same bg/border as active */
.sim-scenario-btn[data-sc="normal"]:hover  { background: #eff6ff; border-color: #3b82f6; }
.sim-scenario-btn[data-sc="spike"]:hover   { background: #fffbeb; border-color: #f59e0b; }
.sim-scenario-btn[data-sc="failure"]:hover { background: #fff1f2; border-color: #ef4444; }
.sim-scenario-btn[data-sc="global"]:hover  { background: #f5f3ff; border-color: #8b5cf6; }
.sim-scenario-btn[data-sc="async"]:hover   { background: #f0fdfa; border-color: #14b8a6; }

/* Per-scenario active color-coding */
.sim-scenario-btn[data-sc="normal"].active  { background: #eff6ff; border-color: #3b82f6; }
.sim-scenario-btn[data-sc="normal"].active .ssb-icon  { color: #2563eb; }
.sim-scenario-btn[data-sc="normal"].active .ssb-label { color: #1d4ed8; }

.sim-scenario-btn[data-sc="spike"].active   { background: #fffbeb; border-color: #f59e0b; }
.sim-scenario-btn[data-sc="spike"].active .ssb-icon   { color: #d97706; }
.sim-scenario-btn[data-sc="spike"].active .ssb-label  { color: #b45309; }

.sim-scenario-btn[data-sc="failure"].active { background: #fff1f2; border-color: #ef4444; }
.sim-scenario-btn[data-sc="failure"].active .ssb-icon { color: #dc2626; }
.sim-scenario-btn[data-sc="failure"].active .ssb-label { color: #991b1b; }

.sim-scenario-btn[data-sc="global"].active  { background: #f5f3ff; border-color: #8b5cf6; }
.sim-scenario-btn[data-sc="global"].active .ssb-icon  { color: #7c3aed; }
.sim-scenario-btn[data-sc="global"].active .ssb-label { color: #6d28d9; }

.sim-scenario-btn[data-sc="async"].active   { background: #f0fdfa; border-color: #14b8a6; }
.sim-scenario-btn[data-sc="async"].active .ssb-icon   { color: #0d9488; }
.sim-scenario-btn[data-sc="async"].active .ssb-label  { color: #0f766e; }

.ssb-icon {
  font-size: var(--fs-lg);
  line-height: 1;
}
/* icon color handled per-scenario via data-sc rules above */

.ssb-label {
  font-size: var(--fs-xss);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #64748b;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}
/* label color handled per-scenario via data-sc rules above */

/* ── Section wrapper ───────────────────────────────────────────────────── */
.sim-section {
  padding: 14px 14px 4px;
}

.sim-section-hd {
  display: flex;
  align-items: baseline;
  font-size: var(--fs-xss);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 10px;
}

/* ── Production Risks section — amber-tinted wrapper, distinct from red event cards ── */
.sim-section--risks {
  margin: 4px 14px 0;
  padding: 12px 12px 12px;
  background:transparent;
  border: 1px solid #f87171;
  border-radius: 8px;
}
.sim-section-hd-risks {
  display: flex;
  align-items: baseline;
  font-size: var(--fs-xss);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #b45309;
  margin-bottom: 10px;
}

/* ── Live event cards ──────────────────────────────────────────────────── */
.sim-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sim-event {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.sim-event--critical {
  background: #fff1f2;
  border-color: #fecdd3;
}
.sim-event--warn {
  background: #fffbeb;
  border-color: #fde68a;
}
.sim-event--info {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.sim-event--good {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.sim-ev-icon {
  font-size: var(--fs-sm);
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1;
}
.sim-event--critical .sim-ev-icon { color: #dc2626; }
.sim-event--warn     .sim-ev-icon { color: #d97706; }
.sim-event--info     .sim-ev-icon { color: #64748b; }
.sim-event--good     .sim-ev-icon { color: #16a34a; }

.sim-ev-body { flex: 1; min-width: 0; }

.sim-ev-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
  margin-bottom: 2px;
}
.sim-event--critical .sim-ev-title { color: #991b1b; }
.sim-event--warn     .sim-ev-title { color: #92400e; }
.sim-event--good     .sim-ev-title { color: #166534; }

.sim-ev-desc {
  font-size: var(--fs-xss);
  color: #475569;
  line-height: 1.45;
}

/* ── Challenge card ────────────────────────────────────────────────────── */
.sim-challenge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #6366f1;
  border-radius: 8px;
}

.sim-challenge-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: #6366f1;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1;
  margin-top: 1px;
}

.sim-challenge-q {
  font-size: var(--fs-xs);
  color: #1e293b;
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
}

/* ── Teaching insight ──────────────────────────────────────────────────── */
.sim-insight {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.ins--fails    { border-left: 3px solid #ef4444; background: #fff8f8; }
.ins--works    { border-left: 3px solid #22c55e; background: #f8fdf8; }
.ins--tradeoff { border-left: 3px solid #f59e0b; background: #fffcf0; }
.ins--scaling  { border-left: 3px solid #3b82f6; background: #f8fbff; }

.ins-tag {
  font-size: var(--fs-xss);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: 0.7;
}
.ins--fails    .ins-tag { color: #dc2626; }
.ins--works    .ins-tag { color: #16a34a; }
.ins--tradeoff .ins-tag { color: #b45309; }
.ins--scaling  .ins-tag { color: #1d4ed8; }

.ins-head {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
  line-height: 1.3;
}

.ins-body {
  font-size: var(--fs-xss);
  color: #475569;
  line-height: 1.5;
}

/* ── Architecture Confidence ───────────────────────────────────────────── */
.sim-confidence {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.conf-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.conf-dim-label {
  font-size: var(--fs-xss);
  font-weight: 600;
  color: #475569;
  flex: 0 0 90px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.conf-dots {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.conf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  transition: background 200ms ease, border-color 200ms ease;
}
.conf-dot--on { background: #64748b; border-color: #475569; }

.conf-val-label {
  font-size: var(--fs-xss);
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: 1;
  text-align: right;
}
.conf-strong   { color: #16a34a; }
.conf-moderate { color: #d97706; }
.conf-weak     { color: #dc2626; }

/* Dot colours by level */
.conf-strong   .conf-dot--on { background: #22c55e; border-color: #16a34a; }
.conf-moderate .conf-dot--on { background: #f59e0b; border-color: #d97706; }
.conf-weak     .conf-dot--on { background: #f87171; border-color: #ef4444; }

/* Target the dots inside the correct row via sibling relationship */
.conf-row:has(.conf-strong)   .conf-dot--on { background: #22c55e; border-color: #16a34a; }
.conf-row:has(.conf-moderate) .conf-dot--on { background: #f59e0b; border-color: #d97706; }
.conf-row:has(.conf-weak)     .conf-dot--on { background: #f87171; border-color: #ef4444; }

/* ── Empty state ───────────────────────────────────────────────────────── */
.sim-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
}

.sim-empty-icon {
  color: #cbd5e1;
  margin-bottom: 4px;
}

.sim-empty-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #475569;
  margin: 0;
}

.sim-empty-sub {
  font-size: var(--fs-xss);
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
  max-width: 240px;
}

/* ── Real score badge in confidence header ────────────────────────────────── */
.conf-real-score {
  margin-left: auto;
  font-size: var(--fs-subhead);
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: -0.02em;
}
.conf-real-score-max {
  font-size: var(--fs-micro);
  font-weight: 500;
  color: #64748b;
  margin-left: 1px;
}

/* ── Algorithm result divider ─────────────────────────────────────────────── */
.sim-algo-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 4px;
  padding: 0 2px;
}
.sim-algo-divider::before,
.sim-algo-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(148, 163, 184, 0.2);
}
.sim-algo-divider-label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  white-space: nowrap;
}

/* ── "Run Simulation" hint when no result yet ──────────────────────────────── */
.sim-algo-hint {
  margin: 16px 0 4px;
  padding: 10px 14px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px dashed rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  font-size: var(--fs-xss);
  color: #94a3b8;
  line-height: 1.5;
}
.sim-algo-hint-icon {
  color: #38bdf8;
  margin-right: 5px;
  font-size: var(--fs-micro);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 5 — CANVAS SIM OVERLAY CLASSES
   Applied by SimOverlay.js to .node elements on the canvas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Critical stress — node is under failure/overload pressure */
.node.sim-stress--critical {
  outline: 2px solid rgba(239, 68, 68, 0.65) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.10),
              0 4px 16px rgba(239, 68, 68, 0.18) !important;
}

/* Warn stress — node is a bottleneck risk */
.node.sim-stress--warn {
  outline: 2px solid rgba(245, 158, 11, 0.60) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.10),
              0 4px 12px rgba(245, 158, 11, 0.14) !important;
}

/* Subtle pulsing warning indicator */
.node.sim-pulse {
  animation: sim-node-pulse 2.4s ease-in-out infinite;
}

@keyframes sim-node-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
  50%       { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.18); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   OLD SIMULATION OUTPUT — restyled to match new Phase 5 panel
   Scoped to #simulation-content so it never affects other views.
   ═══════════════════════════════════════════════════════════════════════════ */

#simulation-content #output {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Result-section (summary counts) — hide it, redundant with new panel */
#simulation-content .result-section {
  display: none;
}

/* Accordion blocks — match sim-event card style */
#simulation-content .result-block,
#simulation-content .result-block-blackbox {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: none;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 140ms ease;
}
#simulation-content .result-block:hover,
#simulation-content .result-block-blackbox:hover {
  box-shadow: none;
  border-color: #cbd5e1;
}

/* Headers — match .sim-section-hd style */
#simulation-content .result-block-header,
#simulation-content .result-block-blackbox-header {
  padding: 9px 12px;
  background: transparent;
  border-radius: 8px;
  gap: 6px;
}
#simulation-content .result-block-header:hover,
#simulation-content .result-block-blackbox-header:hover {
  background: rgba(241, 245, 249, 0.6);
}
#simulation-content .result-block-header h5,
#simulation-content .result-block-blackbox-header h5 {
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0;
  gap: 0;
}
/* Remove the coloured dot ::before injected by base style.css */
#simulation-content .result-block h5::before,
#simulation-content .result-block-blackbox h5::before {
  display: none;
}

/* Content area */
#simulation-content .result-block-content,
#simulation-content .result-block-blackbox-content {
  padding: 0 12px 10px;
  font-size: var(--fs-xss);
  color: #475569;
  line-height: 1.5;
}

/* Lists inside blocks */
#simulation-content .result-block-content ul,
#simulation-content .result-block-blackbox-content ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#simulation-content .result-block-content li,
#simulation-content .result-block-blackbox-content li {
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 6px;
  font-size: var(--fs-xss);
  color: #475569;
  line-height: 1.45;
}
#simulation-content .result-block-content li strong,
#simulation-content .result-block-blackbox-content li strong {
  display: block;
  font-size: var(--fs-xss);
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2px;
}

/* Violation / smell detail lines */
#simulation-content .violation-detail {
  font-size: var(--fs-micro);
  color: #64748b;
  margin-top: 3px;
  line-height: 1.45;
}
#simulation-content .violation-detail strong {
  display: inline;
  font-size: inherit;
  color: #475569;
}

/* Severity badge pill */
#simulation-content .violation-severity {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
  margin-left: 5px;
  vertical-align: middle;
}

/* Toggle arrow */
#simulation-content .result-block-toggle {
  color: #94a3b8;
  font-size: var(--fs-micro);
}

/* Chip tags (missing component examples) */
#simulation-content .missing-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
#simulation-content .chip {
  display: inline-block;
  padding: 2px 7px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: #1d4ed8;
}