:root {
  --surface-tint: #4361ee;
  --secondary-dim: #e76f51;
  --surface-container: #ffffff;
  --outline-variant: #d9dfeb;
  --surface-container-high: #f4f7fc;
  --tertiary-dim: #1b9c85;
  --surface: #eef3fb;
  --primary: #4361ee;
  --secondary: #d96c5f;
  --surface-container-highest: #e8eef8;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f8fbff;
  --outline: #a9b6cc;
  --on-surface-variant: #627089;
  --on-surface: #1e293b;
  --glow-primary: 0 0 32px rgba(67, 97, 238, 0.14);
  --glow-danger: 0 0 24px rgba(217, 108, 95, 0.18);
  --glow-ok: 0 0 24px rgba(27, 156, 133, 0.16);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: var(--on-surface);
  background:
    radial-gradient(circle at top left, rgba(151, 169, 255, 0.1), transparent 22%),
    radial-gradient(circle at right center, rgba(0, 239, 160, 0.06), transparent 20%),
    linear-gradient(180deg, rgba(11, 13, 18, 1) 0%, rgba(12, 14, 18, 1) 100%);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -56px;
  z-index: 20;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  transition: top 160ms ease;
}

.skip-link:focus {
  top: 16px;
}

button,
input,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-item:focus-visible {
  outline: 3px solid rgba(67, 97, 238, 0.3);
  outline-offset: 2px;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.background-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 2px 2px, rgba(151, 169, 255, 0.05) 1px, transparent 0),
    linear-gradient(rgba(17, 19, 24, 0.85) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 19, 24, 0.85) 1px, transparent 1px);
  background-size: 40px 40px, 80px 80px, 80px 80px;
}

.app-shell {
  position: relative;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 18px;
  background: rgba(17, 19, 24, 0.88);
  backdrop-filter: blur(22px);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 4;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(151, 169, 255, 0.25), rgba(62, 101, 255, 0.12));
  color: var(--primary);
  box-shadow: var(--glow-primary);
}

.brand-block h1,
.topbar h2,
.section-header h3,
.memo-panel h3,
.reflection-panel h3 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  text-wrap: balance;
}

.brand-block h1 {
  font-size: 1.2rem;
  letter-spacing: -0.04em;
}

.brand-block p {
  margin: 2px 0 0;
  color: var(--secondary);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
}

.panel-soft,
.panel {
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(23, 26, 31, 0.72);
  backdrop-filter: blur(22px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
}

.panel-soft {
  border-radius: 20px;
  padding: 18px;
}

.panel {
  border-radius: 26px;
  padding: 24px;
}

.eyebrow,
.label {
  margin: 0;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.68rem;
  font-weight: 700;
}

.case-summary h2 {
  margin: 10px 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.1rem;
  line-height: 1.2;
}

.compact-control {
  margin-top: 10px;
  margin-bottom: 12px;
}

.compact-control span {
  font-size: 0.62rem;
}

.case-subtitle {
  margin: 0 0 14px;
  color: rgba(246, 246, 252, 0.7);
  line-height: 1.55;
  font-size: 0.92rem;
}

.meter-label,
.health-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.8rem;
  color: var(--on-surface-variant);
}

.meter {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.45);
}

.meter-fill {
  height: 100%;
  border-radius: inherit;
}

.meter-hint {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--on-surface-variant, rgba(255, 255, 255, 0.55));
  line-height: 1.4;
}

.case-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
}

.case-title-row h2 {
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--on-surface-variant, rgba(255, 255, 255, 0.55));
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.icon-button:hover {
  background: rgba(62, 101, 255, 0.12);
  color: var(--primary);
}

.icon-button .material-symbols-outlined {
  font-size: 18px;
}

.meter-fill-danger {
  background: linear-gradient(90deg, rgba(255, 113, 107, 0.75), rgba(255, 113, 107, 1));
  box-shadow: var(--glow-danger);
}

.meter-fill-ok {
  background: linear-gradient(90deg, rgba(0, 239, 160, 0.6), rgba(0, 239, 160, 0.95));
  box-shadow: var(--glow-ok);
}

.primary-nav {
  display: grid;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border-radius: 999px;
  padding: 13px 16px;
  color: rgba(246, 246, 252, 0.52);
  background: transparent;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
  text-align: left;
}

.nav-item:hover,
.nav-item.is-active {
  background: rgba(23, 26, 31, 0.95);
  color: var(--primary);
  transform: translateX(4px);
}

.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 14px;
}

.health-panel p {
  margin: 12px 0 0;
  color: rgba(246, 246, 252, 0.65);
  font-size: 0.82rem;
  line-height: 1.55;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--tertiary-dim);
  box-shadow: var(--glow-ok);
}

.secondary-action,
.toolbar-button {
  min-height: 44px;
  border-radius: 999px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--on-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.secondary-action:hover,
.toolbar-button:hover {
  transform: translateY(-1px);
  border-color: rgba(151, 169, 255, 0.35);
}

.toolbar-button-primary {
  background: linear-gradient(135deg, rgba(151, 169, 255, 0.94), rgba(62, 101, 255, 0.85));
  color: #0b1021;
  font-weight: 700;
  box-shadow: var(--glow-primary);
}

.toolbar-button-danger {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #ffffff;
  font-weight: 700;
  border-color: rgba(185, 28, 28, 0.5);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.32);
}

.toolbar-button-danger:hover {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border-color: rgba(153, 27, 27, 0.7);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.44);
}

.workspace {
  min-width: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.workspace-tabs {
  display: flex;
  gap: 10px;
  align-items: center;
  overflow-x: auto;
  padding: 4px;
  border-radius: 999px;
  background: rgba(17, 19, 24, 0.64);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px);
}

.workspace-tabs::-webkit-scrollbar {
  display: none;
}

.workspace-tab,
.dock-item {
  border-radius: 999px;
  min-height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: rgba(246, 246, 252, 0.58);
  background: transparent;
  border: 1px solid transparent;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.workspace-tab:hover,
.workspace-tab.is-active,
.dock-item:hover,
.dock-item.is-active {
  color: var(--primary);
  background: rgba(151, 169, 255, 0.08);
  border-color: rgba(151, 169, 255, 0.22);
}

.network-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.visualizer-layout.is-focused .network-meta-grid {
  display: none;
}

.network-meta-card {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.network-meta-card strong {
  display: block;
  margin-bottom: 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}

.network-meta-card p {
  margin: 0;
  color: var(--on-surface-variant);
  line-height: 1.6;
  font-size: 0.88rem;
}

.topbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border-radius: 22px;
  background: rgba(17, 19, 24, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14);
  transition: padding 0.2s ease;
  flex-wrap: wrap;
}

.topbar-heading {
  flex: 0 1 auto;
  min-width: 0;
  margin-right: auto;
}

.topbar-compact-summary {
  margin: 6px 0 0 !important;
  font-size: 0.82rem;
  color: rgba(30, 40, 70, 0.6) !important;
  max-width: 100% !important;
  letter-spacing: 0.01em;
}

.topbar-collapse-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(67, 97, 238, 0.3);
  border-radius: 10px;
  background: rgba(67, 97, 238, 0.08);
  color: #4361ee;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
}

.topbar-collapse-toggle:hover {
  background: rgba(67, 97, 238, 0.18);
  border-color: rgba(67, 97, 238, 0.5);
  color: #1a2a5c;
}

.topbar.is-collapsed .topbar-side {
  display: none;
}

.topbar.is-collapsed {
  padding: 10px 14px;
}

.topbar.is-collapsed .topbar-collapse-toggle .chevron {
  display: inline-block;
  transform: rotate(-90deg);
}

.topbar h2 {
  margin: 2px 0 0;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.topbar p:last-child {
  margin: 0;
  max-width: 56ch;
  color: rgba(246, 246, 252, 0.7);
}

.topbar-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
}

.platform-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mini-control {
  display: grid;
  gap: 3px;
  padding: 5px 10px;
  border-radius: 10px;
  background: rgba(23, 26, 31, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.05);
  min-width: 120px;
}

.mini-control span {
  color: var(--on-surface-variant);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.mini-control select,
.mini-control input,
.pipeline-form input,
.pipeline-form textarea,
.pipeline-form select {
  width: 100%;
  border: 0;
  outline: 0;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--on-surface);
  padding: 10px 12px;
}

.platform-context,
.pipeline-console {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.workflow-guide {
  margin-top: 18px;
}

.workflow-card {
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.workflow-steps {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.workflow-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 0;
}

.workflow-step + .workflow-step {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.workflow-step-index {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--on-surface);
  background: rgba(255, 255, 255, 0.06);
}

.workflow-step strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.95rem;
}

.workflow-step p {
  margin: 0;
  color: rgba(246, 246, 252, 0.72);
  line-height: 1.55;
  font-size: 0.86rem;
}

.workflow-step.is-done .workflow-step-index {
  background: rgba(27, 156, 133, 0.2);
  color: var(--tertiary-dim);
}

.workflow-step.is-current .workflow-step-index {
  background: rgba(67, 97, 238, 0.2);
  color: var(--primary);
}

.workflow-step.is-current strong {
  color: var(--primary);
}

.workflow-step.is-upcoming {
  opacity: 0.8;
}

.landing-join-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 12px;
}

.landing-join-helper {
  margin: 0;
  color: rgba(246, 246, 252, 0.64);
  font-size: 0.82rem;
  line-height: 1.5;
}

.context-card,
.pipeline-card,
.document-card,
.case-card,
.settings-grid article {
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.case-card {
  padding: 11px 14px;
}

.context-card strong,
.pipeline-card strong,
.document-card strong,
.case-card strong {
  display: block;
  margin-bottom: 6px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.case-card strong {
  margin-bottom: 3px;
  font-size: 0.95rem;
}

.case-card p {
  font-size: 0.82rem;
  line-height: 1.42;
}

.case-summary {
  margin: 4px 0 2px;
}

.case-summary-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}

.case-summary.is-expanded .case-summary-text,
.case-summary-text.is-short {
  display: block;
  -webkit-line-clamp: initial;
  overflow: visible;
}

.case-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.case-summary-more,
.case-summary-open {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.case-summary-more {
  border: 1px solid rgba(42, 63, 200, 0.35);
  background: rgba(42, 63, 200, 0.08);
  color: #2a3fc8;
}

.case-summary-more:hover {
  background: rgba(42, 63, 200, 0.18);
  border-color: rgba(42, 63, 200, 0.55);
}

.case-summary-open {
  border: 1px solid rgba(29, 78, 216, 0.6);
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.28);
}

.case-summary-open:hover {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  border-color: rgba(30, 64, 175, 0.8);
  box-shadow: 0 3px 10px rgba(29, 78, 216, 0.4);
}

.case-card .card-meta {
  margin-top: 6px;
}

.case-card .card-actions {
  margin-top: 8px;
  gap: 8px;
}

.pipeline-card-highlight {
  border-color: rgba(67, 97, 238, 0.18);
  background: rgba(67, 97, 238, 0.08);
}

/* Collapsible pipeline cards — click the header to expand/collapse the body. */
.pipeline-card-collapsible {
  padding: 0;
}

.pipeline-card-collapsible .pipeline-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(67, 97, 238, 0.18), rgba(67, 97, 238, 0.08));
  border: 1px solid rgba(67, 97, 238, 0.32);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  border-radius: inherit;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}

.pipeline-card-collapsible .pipeline-card-header:hover {
  background: linear-gradient(135deg, rgba(67, 97, 238, 0.3), rgba(67, 97, 238, 0.14));
  border-color: rgba(67, 97, 238, 0.5);
  box-shadow: 0 3px 10px rgba(67, 97, 238, 0.18);
}

.pipeline-card-collapsible .pipeline-card-header:active {
  transform: translateY(1px);
}

.pipeline-card-collapsible .pipeline-card-header:focus-visible {
  outline: 2px solid rgba(67, 97, 238, 0.55);
  outline-offset: 2px;
}

.pipeline-card-collapsible .pipeline-card-header strong {
  flex: 1;
  color: #1a2a5c;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.pipeline-card-collapsible .pipeline-card-header .chevron {
  font-size: 1rem;
  color: #2a3fc8;
  transition: transform 180ms ease;
}

.pipeline-card-collapsible.is-collapsed .pipeline-card-header .chevron {
  transform: rotate(-90deg);
}

.pipeline-card-collapsible .pipeline-card-body {
  display: block;
  padding: 0 16px 14px 16px;
}

.pipeline-card-collapsible.is-collapsed .pipeline-card-body {
  display: none;
}

/* 'Add a node' is the primary student action — call it out in green so it
   reads as "do this" rather than just another accordion row. */
.pipeline-card-collapsible[data-pipeline-key="addNode"] .pipeline-card-header {
  background: linear-gradient(135deg, #22c55e, #15803d);
  border-color: rgba(21, 128, 61, 0.55);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.28);
}

.pipeline-card-collapsible[data-pipeline-key="addNode"] .pipeline-card-header:hover {
  background: linear-gradient(135deg, #16a34a, #14532d);
  border-color: rgba(20, 83, 45, 0.7);
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.42);
}

.pipeline-card-collapsible[data-pipeline-key="addNode"] .pipeline-card-header strong {
  color: #ffffff;
}

.pipeline-card-collapsible[data-pipeline-key="addNode"] .pipeline-card-header .chevron {
  color: rgba(255, 255, 255, 0.9);
}

.context-card p,
.pipeline-card p,
.document-card p,
.case-card p,
.settings-grid p,
.settings-grid li {
  margin: 0;
  color: rgba(246, 246, 252, 0.74);
  line-height: 1.6;
}

.pipeline-form {
  display: grid;
  gap: 12px;
}

.pipeline-form textarea {
  min-height: 132px;
  resize: vertical;
}

.pipeline-form-row,
.settings-grid,
.document-list,
.meta-grid {
  display: grid;
  gap: 12px;
}

.case-list {
  display: grid;
  gap: 8px;
}

.pipeline-form-row.two-up,
.settings-grid,
.meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pipeline-actions,
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.context-note {
  margin: 10px 0 0;
  color: var(--on-surface-variant);
  font-size: 0.84rem;
  line-height: 1.5;
}

.pipeline-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.pipeline-chip {
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(151, 169, 255, 0.08);
  border: 1px solid rgba(151, 169, 255, 0.16);
  color: var(--primary);
  font-size: 0.78rem;
}

.case-card.is-selected,
.document-card.is-selected {
  border-color: rgba(151, 169, 255, 0.34);
  box-shadow: var(--glow-primary);
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.card-meta span {
  color: var(--on-surface-variant);
  font-size: 0.72rem;
}

.empty-note {
  border-radius: 16px;
  padding: 16px;
  color: var(--on-surface-variant);
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  line-height: 1.6;
}

.chip-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.metric-chip,
.badge,
.numeric-pill {
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.metric-chip {
  flex-direction: column;
  align-items: flex-start;
  background: rgba(23, 26, 31, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.05);
  min-width: 104px;
}

.metric-chip span {
  color: var(--on-surface-variant);
  font-size: 0.72rem;
}

.metric-chip strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
}

.toolbar-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.topbar-identity {
  color: var(--on-surface-variant);
  font-size: 0.86rem;
  font-weight: 600;
}

.main-content {
  min-width: 0;
}

.view {
  display: none;
}

.view.is-active {
  display: block;
}

.visualizer-layout,
.lens-layout,
.matrix-layout,
.sandbox-layout,
.report-layout {
  display: grid;
  gap: 18px;
}

/* Detailed mode: the map gets the flexible space and dominates; side panels are
   fixed professional widths (work tool, not a dense dashboard). */
.visualizer-layout {
  grid-template-columns: 244px minmax(0, 1fr) 288px;
  align-items: start;
}

.visualizer-layout.is-focused {
  grid-template-columns: 244px minmax(0, 1fr) 288px;
}

.visualizer-layout.intake-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) 288px;
}

.visualizer-layout.insight-collapsed {
  grid-template-columns: 244px minmax(0, 1fr) 0;
}

.visualizer-layout.intake-collapsed.insight-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) 0;
  gap: 0;
}

.visualizer-layout.intake-collapsed {
  column-gap: 0;
}

.visualizer-layout.insight-collapsed {
  column-gap: 0;
}

.visualizer-layout [data-collapsible-panel].is-collapsed {
  display: none;
}

/* Pin each panel to its column so collapsed (display:none) panels don't cause
   the canvas to auto-place into the now-zero-width first column. */
.visualizer-layout > .intake-panel[data-collapsible-panel="intake"] {
  grid-column: 1;
}
.visualizer-layout > .canvas-panel {
  grid-column: 2;
  min-width: 0;
}
.visualizer-layout > .insight-panel[data-collapsible-panel="insight"] {
  grid-column: 3;
}

.panel-expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(67, 97, 238, 0.45);
  border-radius: 999px;
  background: rgba(67, 97, 238, 0.18);
  color: #2a3fc8;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}

.panel-expand-toggle[data-expand-target="intake"] {
  margin-right: 12px;
}

.panel-expand-toggle[data-expand-target="insight"] {
  margin-left: 12px;
}

.panel-expand-toggle:hover {
  background: rgba(67, 97, 238, 0.28);
  box-shadow: 0 2px 6px rgba(67, 97, 238, 0.22);
}

.panel-expand-toggle:active {
  transform: translateY(1px);
}

.panel-expand-toggle .chevron {
  font-size: 12px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.panel-expand-toggle.is-panel-open[data-expand-target="intake"] .chevron {
  transform: rotate(180deg);
}

.panel-expand-toggle.is-panel-open[data-expand-target="insight"] .chevron {
  transform: rotate(180deg);
}

.canvas-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0;
}

.canvas-header-left > div {
  min-width: 0;
}

.canvas-header-left .eyebrow {
  margin: 0;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
}

.lens-layout {
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.25fr) minmax(320px, 1.05fr);
}

.matrix-layout,
.sandbox-layout,
.report-layout {
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.86fr);
}

.section-header,
.subsection-head,
.canvas-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.section-header h3,
.canvas-header h3 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge {
  align-self: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: var(--on-surface);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.badge-primary {
  color: var(--primary);
}

.badge-danger {
  color: var(--secondary);
}

.badge-ok {
  color: var(--tertiary-dim);
}

.badge-neutral {
  color: var(--on-surface-variant);
}

.detail-stack {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.detail-stack p:not(.label),
.memo-section p:not(.label),
.lens-summary-block p,
.reaction-feed p {
  margin: 0;
  line-height: 1.7;
  color: rgba(246, 246, 252, 0.78);
}

.bullet-list {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: rgba(246, 246, 252, 0.78);
}

.token-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.token-row.compact {
  justify-content: flex-end;
  margin-top: 0;
}

.token,
.token-active {
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(246, 246, 252, 0.82);
  font-size: 0.82rem;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.token-active {
  color: var(--primary);
  border-color: rgba(151, 169, 255, 0.3);
}

.canvas-panel {
  display: grid;
  gap: 16px;
}

.swarm-activity-panel {
  margin-top: 2px;
}

.visualizer-layout.is-focused .canvas-panel {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.visualizer-layout.is-focused .intake-panel {
  padding: 22px;
  position: sticky;
  top: 20px;
}

.visualizer-layout.is-focused .workflow-guide,
.visualizer-layout.is-focused .platform-context {
  display: none;
}

.intake-panel .case-card p,
.intake-panel .pipeline-card p,
.intake-panel .context-note {
  line-height: 1.65;
}

.canvas-stats {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

.mini-control-inline {
  min-width: 130px;
  padding: 3px 10px !important;
}

.mini-control-inline span {
  font-size: 0.58rem !important;
}

.mini-control-inline span {
  white-space: nowrap;
}

.graph-toggle {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--on-surface-variant);
}

.graph-toggle input {
  accent-color: var(--primary);
}

.network-stage {
  position: relative;
  min-height: clamp(460px, 64vh, 720px);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(151, 169, 255, 0.16), transparent 20%),
    radial-gradient(circle at 18% 18%, rgba(0, 239, 160, 0.08), transparent 18%),
    linear-gradient(180deg, rgba(7, 9, 14, 0.94), rgba(13, 15, 20, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.visualizer-layout.is-focused .network-stage {
  min-height: clamp(560px, 74vh, 840px);
  border-radius: 28px;
}

.network-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 2px 2px, rgba(151, 169, 255, 0.06) 1px, transparent 0);
  background-size: 36px 36px;
  opacity: 0.55;
}

.network-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.network-empty-preview {
  position: absolute;
  z-index: 2;
  inset: auto 24px 24px 24px;
  max-width: 420px;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(13, 15, 20, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.network-empty-preview strong {
  display: block;
  margin: 8px 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
}

.network-empty-preview p:not(.eyebrow) {
  margin: 0;
  color: rgba(246, 246, 252, 0.74);
  line-height: 1.6;
}

.network-empty-preview-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.preview-token {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(246, 246, 252, 0.86);
  font-size: 0.78rem;
}

.network-tooltip {
  position: absolute;
  z-index: 4;
  width: min(280px, calc(100% - 24px));
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(11, 14, 19, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
  pointer-events: none;
}

.network-tooltip[hidden] {
  display: none;
}

.network-node.is-selected .node-body,
.network-node.is-selected .node-shell {
  stroke: #ffbf47 !important;
  stroke-width: 2.8px;
}

.network-node.is-selected .node-halo {
  opacity: 1;
  stroke: #ffbf47 !important;
}

.network-tooltip-kicker {
  margin: 0 0 8px;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.64rem;
  font-weight: 800;
}

.network-tooltip strong {
  display: block;
  margin-bottom: 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.network-tooltip-body {
  margin: 0;
  color: rgba(246, 246, 252, 0.74);
  line-height: 1.55;
  font-size: 0.82rem;
}

.stage-overlay {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  max-width: min(360px, calc(100% - 32px));
  border-radius: 18px;
  background: rgba(13, 15, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

.stage-overlay strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.stage-overlay span {
  color: rgba(246, 246, 252, 0.7);
  line-height: 1.55;
  font-size: 0.84rem;
}

.stage-overlay-top {
  top: 22px;
  left: 22px;
}

.stage-overlay-bottom {
  right: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: min(460px, calc(100% - 32px));
  background: rgba(255, 255, 255, 0.92);
  padding: 10px 32px 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(67, 97, 238, 0.18);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.stage-overlay-bottom[data-collapsed="true"] {
  display: none;
}

.stage-overlay-top[data-collapsed="true"] {
  display: none;
}

.stage-note-reopen {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(13, 15, 20, 0.72);
  color: rgba(246, 246, 252, 0.9);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.24);
  backdrop-filter: blur(18px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  z-index: 5;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.stage-note-reopen[hidden] {
  display: none;
}

.stage-note-reopen:hover {
  transform: scale(1.06);
  background: rgba(20, 24, 34, 0.88);
  box-shadow: 0 6px 18px rgba(67, 97, 238, 0.28);
}

.stage-note-reopen .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

.legend-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(67, 97, 238, 0.22);
  background: rgba(255, 255, 255, 0.95);
  color: #1a2a5c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.legend-close:hover {
  background: rgba(67, 97, 238, 0.12);
  transform: scale(1.05);
}

.legend-close .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}

.legend-reopen {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(67, 97, 238, 0.26);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(6px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  cursor: pointer;
  z-index: 5;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.legend-reopen[hidden] {
  display: none;
}

.legend-reopen:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(67, 97, 238, 0.22);
}

.legend-reopen-swatch {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  display: inline-block;
}

.legend-reopen-swatch-primary {
  background: var(--primary);
  box-shadow: var(--glow-primary);
}

.legend-reopen-swatch-danger {
  background: var(--secondary);
  box-shadow: var(--glow-danger);
}

.legend-reopen-swatch-ok {
  background: var(--tertiary-dim);
  box-shadow: var(--glow-ok);
}

.legend-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  color: #1a2a5c;
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: normal;
}

.legend-item .legend-label {
  font-weight: 600;
  color: #1a2a5c;
}

.legend-item .legend-desc {
  grid-column: 2;
  font-style: normal;
  font-size: 0.7rem;
  color: #2c3a5e;
}

.legend-swatch {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  display: inline-block;
}

.legend-swatch-primary {
  background: var(--primary);
  box-shadow: var(--glow-primary);
}

.legend-swatch-danger {
  background: var(--secondary);
  box-shadow: var(--glow-danger);
}

.legend-swatch-ok {
  background: var(--tertiary-dim);
  box-shadow: var(--glow-ok);
}

.legend-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  font-family: "Space Grotesk", sans-serif;
  flex-shrink: 0;
}
.legend-badge-ai { background: #4361ee; }
.legend-badge-me { background: #1b9c85; }
.legend-badge-peer { background: #f59e0b; }
.legend-badge-brief { background: #64748b; }

/* Compact swarm-info panel inside the Swarm activity subsection */
.subsection-head-right {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.swarm-info-toggle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(151, 169, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
  color: var(--on-surface-variant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 140ms ease, color 140ms ease;
}
.swarm-info-toggle:hover,
.swarm-info-toggle[aria-expanded="true"] {
  background: rgba(67, 97, 238, 0.14);
  color: var(--primary);
}
.swarm-info-toggle .material-symbols-outlined {
  font-size: 15px;
}
.swarm-info-panel {
  margin: 8px 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(67, 97, 238, 0.06);
  border: 1px solid rgba(67, 97, 238, 0.16);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 0.72rem;
}
.swarm-info-panel[hidden] {
  display: none;
}
.swarm-info-heading {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-variant);
  margin-bottom: 6px;
}
.swarm-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.swarm-info-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
}
.swarm-info-line {
  display: inline-block;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  flex-shrink: 0;
}
.swarm-info-line-ok { background: rgba(0, 220, 160, 0.9); }
.swarm-info-line-danger {
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 113, 107, 0.9) 0,
    rgba(255, 113, 107, 0.9) 4px,
    transparent 4px,
    transparent 7px
  );
  height: 3px;
}
.swarm-info-line-neutral {
  background: repeating-linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.6) 0,
    rgba(148, 163, 184, 0.6) 2px,
    transparent 2px,
    transparent 5px
  );
  height: 2px;
}

.network-link {
  stroke: rgba(198, 205, 219, 0.22);
  stroke-linecap: round;
  transition: opacity 160ms ease, stroke 160ms ease, stroke-width 160ms ease;
}

.network-link[data-tone="danger"] {
  stroke: rgba(255, 113, 107, 0.58);
}

.network-link[data-tone="primary"] {
  stroke: rgba(151, 169, 255, 0.44);
}

.network-link[data-tone="ok"] {
  stroke: rgba(0, 239, 160, 0.48);
}

/* P1: inter-agent disagreement edges */
.network-link[data-kind="swarm-edge"] {
  stroke-linecap: round;
}
.network-link[data-kind="swarm-edge"][data-tone="danger"] {
  stroke: rgba(255, 113, 107, 0.85);
  stroke-dasharray: 5 3;
  stroke-width: 2;
}
.network-link[data-kind="swarm-edge"][data-tone="ok"] {
  stroke: rgba(0, 220, 160, 0.72);
  stroke-width: 1.8;
}
.network-link[data-kind="swarm-edge"][data-tone="neutral"] {
  stroke: rgba(148, 163, 184, 0.55);
  stroke-dasharray: 2 3;
  stroke-width: 1.1;
}

/* P2: provenance badge on major nodes */
.node-badge circle {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.2;
}
.node-badge circle[data-origin="ai"] {
  fill: #4361ee;
}
.node-badge circle[data-origin="me"] {
  fill: #1b9c85;
}
.node-badge circle[data-origin="peer"] {
  fill: #f59e0b;
}
.node-badge circle[data-origin="brief"] {
  fill: #64748b;
}
.node-badge text {
  fill: #ffffff;
  font-size: 8px;
  font-weight: 700;
  pointer-events: none;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.02em;
}

/* P3: challenge button on agent chat messages */
.chat-actions {
  margin-top: 6px;
}
.chat-challenge {
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(67, 97, 238, 0.1);
  border: 1px solid rgba(67, 97, 238, 0.28);
  color: var(--primary);
  cursor: pointer;
  transition: background 140ms ease, transform 120ms ease;
}
.chat-challenge:hover {
  background: rgba(67, 97, 238, 0.2);
  transform: translateY(-1px);
}
.chat-challenge:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.network-link.is-active {
  opacity: 0.94;
  stroke-width: 2.4px;
}

.network-link.is-faded {
  opacity: 0.15;
}

.network-node {
  cursor: pointer;
}

.network-node circle,
.network-node rect {
  transition: stroke 160ms ease, fill 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.network-node text {
  font-family: "Inter", sans-serif;
  pointer-events: none;
}

.network-node .node-shell {
  fill: rgba(255, 255, 255, 0.94);
  stroke: rgba(170, 171, 176, 0.5);
  stroke-width: 1.3px;
}

.network-node .node-body {
  fill: rgba(20, 24, 30, 0.9);
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1.5px;
}

.network-node .node-halo {
  fill: none;
  stroke: rgba(255, 221, 87, 0.86);
  stroke-width: 2.3px;
  opacity: 0;
}

.network-node .node-icon {
  font-family: "Material Symbols Outlined";
  font-size: 14px;
  fill: #f6f6fc;
  text-anchor: middle;
  dominant-baseline: central;
}

.network-node .node-label {
  fill: rgba(246, 246, 252, 0.92);
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
}

.network-node .node-meta {
  fill: rgba(170, 171, 176, 0.94);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-anchor: middle;
}

.network-node[data-tone="primary"] .node-body {
  stroke: rgba(151, 169, 255, 0.75);
  box-shadow: var(--glow-primary);
}

.network-node[data-tone="danger"] .node-body {
  stroke: rgba(255, 113, 107, 0.76);
}

.network-node[data-tone="ok"] .node-body {
  stroke: rgba(0, 239, 160, 0.7);
}

.network-node[data-type="core"] .node-body {
  fill: rgba(18, 24, 40, 0.96);
  stroke: rgba(151, 169, 255, 0.95);
  stroke-width: 2.2px;
  filter: drop-shadow(0 0 18px rgba(62, 101, 255, 0.34));
}

.network-node[data-type="signal"] .node-body {
  fill: rgba(16, 20, 28, 0.9);
}

.network-node.is-active .node-halo,
.network-node.is-hotspot .node-halo {
  opacity: 1;
}

.network-node.is-faded .node-body,
.network-node.is-faded .node-shell,
.network-node.is-faded text {
  opacity: 0.24;
}

.network-node:hover .node-body,
.network-node:hover .node-shell,
.network-node.is-active .node-body,
.network-node.is-active .node-shell {
  transform: scale(1.04);
}

.network-node.is-active .node-body {
  filter: drop-shadow(0 0 14px rgba(62, 101, 255, 0.26));
}

.composer {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.composer-hint {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--on-surface-variant, rgba(255, 255, 255, 0.6));
  line-height: 1.4;
}

.export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.export-actions[hidden] {
  display: none;
}

.composer-input {
  flex: 1;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.selected-node-related {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.related-activity-columns {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.related-activity-columns > div {
  min-width: 0;
}

.composer-input span {
  color: var(--primary);
}

.composer-input input {
  width: 100%;
  background: transparent;
  color: var(--on-surface);
  border: 0;
  outline: 0;
}

.lens-summary-block {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  margin-top: 18px;
}

.insight-panel {
  display: grid;
  gap: 18px;
  align-content: start;
}

.visualizer-layout.is-focused .insight-panel {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow: auto;
}

.lens-pill-row {
  margin-top: -4px;
  padding-bottom: 4px;
}

.subsection {
  margin-top: 18px;
}

.subsection-head h4 {
  margin: 0;
  font-size: 0.95rem;
}

.numeric-pill {
  background: rgba(151, 169, 255, 0.12);
  color: var(--primary);
  font-weight: 700;
}

.selected-node-card {
  display: grid;
  gap: 8px;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.selected-node-card strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.selected-node-card p {
  margin: 0;
  color: var(--on-surface-variant);
  line-height: 1.6;
}

.quick-note-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.quick-note-form textarea {
  min-height: 104px;
  resize: vertical;
}

.tension-list,
.evidence-list,
.conflict-card-list,
.decision-log,
.reaction-feed,
.memo-list,
.rubric-list,
.prompt-list,
.reflection-feed {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.tension-item,
.evidence-item,
.conflict-card,
.decision-item,
.feed-item,
.memo-item,
.rubric-item,
.prompt-item,
.reflection-item {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.tension-item,
.evidence-item,
.conflict-card,
.decision-item,
.feed-item,
.rubric-item,
.prompt-item,
.reflection-item {
  padding: 16px;
}

.tension-item {
  border-left: 2px solid var(--secondary);
}

.tension-item strong,
.conflict-card strong,
.memo-item strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.96rem;
}

.tension-item p,
.evidence-item p,
.conflict-card p,
.decision-item p,
.memo-item p,
.reflection-item p {
  margin: 0;
  color: rgba(246, 246, 252, 0.72);
  line-height: 1.6;
}

.conflict-card {
  border-left: 2px solid var(--secondary);
}

.conflict-card[data-level="medium"] {
  border-left-color: var(--primary);
}

.conflict-card[data-level="critical"] {
  border-left-color: var(--tertiary-dim);
}

.orbit-panel {
  display: grid;
  gap: 16px;
  align-content: start;
}

.orbit-visual {
  position: relative;
  min-height: 560px;
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at center, rgba(151, 169, 255, 0.18), transparent 22%), rgba(12, 14, 18, 0.68);
}

.orbit-ring {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(151, 169, 255, 0.14);
}

.orbit-ring-large {
  width: 420px;
  height: 420px;
  animation: spin 18s linear infinite;
}

.orbit-ring-small {
  width: 260px;
  height: 260px;
  animation: spin-reverse 12s linear infinite;
}

.orbit-core {
  width: 140px;
  height: 140px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(151, 169, 255, 0.26), rgba(62, 101, 255, 0.14));
  box-shadow: var(--glow-primary);
  z-index: 1;
}

.orbit-core span {
  font-size: 3rem;
  color: var(--primary);
}

.orbit-label {
  position: absolute;
  bottom: 42px;
  width: min(360px, calc(100% - 48px));
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(17, 19, 24, 0.84);
  text-align: center;
  color: rgba(246, 246, 252, 0.78);
}

.orbit-satellite {
  position: absolute;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--on-surface-variant);
  font-size: 0.78rem;
}

.orbit-satellite-a {
  top: 18%;
  left: 52%;
}

.orbit-satellite-b {
  left: 14%;
  top: 56%;
}

.orbit-satellite-c {
  right: 14%;
  top: 60%;
}

.chat-thread {
  min-height: 380px;
  max-height: 480px;
  overflow: auto;
  display: grid;
  gap: 12px;
  margin: 12px 0 18px;
}

.chat-message {
  padding: 16px;
  border-radius: 18px;
  line-height: 1.65;
}

.chat-message.user {
  background: rgba(255, 255, 255, 0.04);
  border-top-left-radius: 8px;
}

.chat-message.agent {
  background: rgba(151, 169, 255, 0.08);
  border-top-right-radius: 8px;
}

.chat-message small {
  display: block;
  margin-top: 8px;
  color: var(--on-surface-variant);
}

.chat-composer textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--on-surface);
  resize: vertical;
}

.chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.matrix-main {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.15fr);
  gap: 26px;
  align-items: center;
  margin-top: 12px;
}

.radar-shell {
  position: relative;
  width: min(100%, 380px);
  margin: 0 auto;
  aspect-ratio: 1;
}

#radar-chart {
  width: 100%;
  height: 100%;
}

.radar-grid {
  fill: rgba(255, 255, 255, 0.02);
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1.2;
}

.radar-grid.inner {
  fill: transparent;
}

.radar-fill {
  fill: rgba(151, 169, 255, 0.18);
  stroke: rgba(151, 169, 255, 0.95);
  stroke-width: 2;
}

.radar-dot {
  fill: var(--primary);
}

.radar-label {
  position: absolute;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--on-surface-variant);
}

.radar-label-top {
  left: 50%;
  top: 0;
  transform: translate(-50%, -70%);
}

.radar-label-right {
  right: 2%;
  top: 28%;
}

.radar-label-bottom-right {
  right: 8%;
  bottom: 8%;
}

.radar-label-bottom-left {
  left: 8%;
  bottom: 8%;
}

.radar-label-left {
  left: 0;
  top: 30%;
}

.metric-bars {
  display: grid;
  gap: 16px;
}

.metric-bar {
  display: grid;
  gap: 8px;
}

.metric-bar header {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--on-surface-variant);
}

.bar-track {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
}

.matrix-insights {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 24px;
}

.insight-card {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.insight-card strong {
  display: block;
  margin-bottom: 8px;
}

.decision-item {
  position: relative;
  padding-left: 20px;
}

.decision-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: rgba(255, 255, 255, 0.08);
}

.decision-item time {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.control-group,
.scenario-group,
.reflection-block {
  display: grid;
  gap: 16px;
}

.toggle-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
}

.toggle-row h4 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.toggle-row p {
  margin: 0;
  color: var(--on-surface-variant);
  line-height: 1.55;
}

.switch {
  position: relative;
  width: 54px;
  height: 30px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  transition: background 180ms ease;
}

.switch-slider::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  left: 3px;
  top: 3px;
  background: white;
  transition: transform 180ms ease;
}

.switch input:checked + .switch-slider {
  background: rgba(151, 169, 255, 0.85);
}

.switch input:checked + .switch-slider::before {
  transform: translateX(24px);
}

.slider-group {
  display: grid;
  gap: 8px;
}

.slider-group label {
  display: flex;
  justify-content: space-between;
  color: var(--on-surface-variant);
  font-size: 0.86rem;
}

.slider-group input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
}

.scenario-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.scenario-button {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 113, 107, 0.12);
  color: var(--secondary);
  border: 1px solid rgba(255, 113, 107, 0.14);
}

.reaction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.metric-card {
  min-height: 150px;
  display: grid;
  align-content: space-between;
  padding: 22px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.metric-card-large {
  grid-column: 1 / -1;
  min-height: 260px;
  place-items: center;
  text-align: center;
  background: radial-gradient(circle at center, rgba(151, 169, 255, 0.14), transparent 50%), rgba(255, 255, 255, 0.03);
}

.metric-card span {
  font-size: 1.4rem;
  color: var(--primary);
}

.metric-card strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 2.4rem;
  letter-spacing: -0.04em;
}

.metric-card p {
  margin: 0;
  color: var(--on-surface-variant);
}

.memo-section {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.mobile-dock {
  display: none;
}

.memo-item {
  padding: 14px 16px;
}

.rubric-item header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--on-surface-variant);
}

.prompt-item {
  color: rgba(246, 246, 252, 0.82);
}

.reflection-item strong {
  display: block;
  margin-bottom: 6px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  to {
    transform: rotate(-360deg);
  }
}

@media (max-width: 1400px) {
  .landing-hero {
    grid-template-columns: 1fr;
  }

  .landing-copy,
  .landing-visual {
    min-height: auto;
  }

  .landing-copy h2 {
    max-width: none;
    font-size: clamp(2rem, 6vw, 3.4rem);
  }

  .landing-body {
    max-width: 60ch;
  }

  .landing-visual {
    min-height: 520px;
  }

  .visualizer-layout,
  .lens-layout,
  .matrix-layout,
  .sandbox-layout,
  .report-layout {
    grid-template-columns: 1fr;
  }

  .matrix-main {
    grid-template-columns: 1fr;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-side,
  .toolbar-actions {
    justify-content: flex-start;
  }

  .platform-switcher,
  .pipeline-form-row.two-up,
  .settings-grid,
  .meta-grid {
    grid-template-columns: 1fr;
  }

  .network-meta-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .landing-shell {
    padding: 16px;
  }

  .landing-header,
  .landing-mini-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .landing-annotation-right,
  .landing-annotation-left {
    position: static;
    margin: 12px;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 14px 16px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
  }

  .workspace {
    padding: 16px;
  }

  .case-summary,
  .sidebar-footer {
    display: none;
  }

  .primary-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
  }

  .primary-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-item {
    min-width: max-content;
    transform: none;
  }

  .network-stage {
    min-height: clamp(420px, 58vh, 620px);
  }

  .workspace-tabs {
    margin-top: 4px;
  }

  .visualizer-layout > .intake-panel,
  .visualizer-layout > .insight-panel {
    order: 2;
  }

  .visualizer-layout > .canvas-panel {
    order: 1;
  }
}

@media (max-width: 720px) {
  .landing-copy h2 {
    font-size: clamp(2.2rem, 13vw, 3.4rem);
    max-width: none;
  }

  .landing-header-actions,
  .landing-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .landing-login-grid,
  .landing-login-row {
    grid-template-columns: 1fr;
  }

  .landing-visual {
    min-height: 560px;
  }

  .landing-signal-row {
    gap: 8px;
  }

  .workspace,
  .sidebar,
  .panel,
  .panel-soft {
    padding-left: 14px;
    padding-right: 14px;
  }

  .panel {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .topbar {
    padding: 16px;
  }

  .topbar p:last-child {
    max-width: none;
  }

  .composer,
  .toolbar-actions,
  .chat-actions,
  .pipeline-actions,
  .card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .canvas-stats {
    justify-content: flex-start;
  }

  .chip-strip {
    justify-content: flex-start;
  }

  .primary-nav,
  .workspace-tabs {
    display: none;
  }

  .stage-overlay {
    max-width: calc(100% - 24px);
    padding: 12px 14px;
  }

  .stage-overlay-bottom {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .network-tooltip {
    width: min(240px, calc(100% - 24px));
    padding: 12px 14px;
  }

  .network-stage {
    min-height: 420px;
    border-radius: 20px;
  }

  .reaction-grid {
    grid-template-columns: 1fr;
  }

  .matrix-insights {
    grid-template-columns: 1fr;
  }

  .related-activity-columns {
    grid-template-columns: 1fr;
  }

  .mobile-dock {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 12;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border-radius: 22px;
    background: rgba(17, 19, 24, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
  }

  .dock-item {
    min-height: 54px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    font-size: 0.72rem;
  }

  .dock-item .material-symbols-outlined {
    font-size: 1.15rem;
  }

  .workspace {
    padding-bottom: 92px;
  }
}

body {
  color: rgba(246, 246, 252, 0.92);
  background:
    radial-gradient(circle at 12% 8%, rgba(67, 97, 238, 0.16), transparent 34%),
    radial-gradient(circle at 88% 6%, rgba(27, 156, 133, 0.1), transparent 32%),
    radial-gradient(circle at 50% 120%, rgba(120, 80, 220, 0.12), transparent 45%),
    linear-gradient(180deg, #0b0d14 0%, #0d0f16 100%);
  background-attachment: fixed;
}

.is-hidden {
  display: none !important;
}

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.tour-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
}

.tour-card {
  position: fixed;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(121, 140, 171, 0.2);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
  pointer-events: auto;
}

.tour-card h3 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  text-wrap: balance;
}

.tour-card p {
  margin: 0;
  color: var(--on-surface-variant);
}

.tour-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.tour-target-active {
  position: relative;
  z-index: 41 !important;
  isolation: isolate;
  border-radius: 18px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9), 0 0 0 9999px rgba(15, 23, 42, 0.18);
}

.landing-shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: 24px;
  display: grid;
  gap: 22px;
}

.landing-header {
  position: relative;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(121, 140, 171, 0.16);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(148, 163, 184, 0.14);
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.landing-brand h1,
.landing-copy h2,
.landing-support h3,
.landing-footer-cta h3 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
}

.landing-brand-kicker,
.landing-kicker,
.landing-support-kicker,
.landing-annotation-label {
  margin: 0 0 8px;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  font-weight: 800;
}

.landing-header-actions,
.landing-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.landing-login-card {
  display: grid;
  gap: 14px;
  margin-top: 8px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(248, 251, 255, 0.92);
  border: 1px solid rgba(121, 140, 171, 0.16);
}

.landing-login-head {
  display: grid;
  gap: 6px;
}

.landing-login-head strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.02rem;
  color: var(--on-surface);
}

.landing-login-form {
  display: grid;
  gap: 12px;
}

.landing-login-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

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

.landing-login-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.landing-login-row input {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(121, 140, 171, 0.18);
  outline: 0;
  border-radius: 16px;
  background: rgba(243, 246, 251, 0.96);
  color: var(--on-surface);
  padding: 0 14px;
}

.landing-login-helper {
  margin: 0;
  color: var(--on-surface-variant);
  font-size: 0.82rem;
  line-height: 1.5;
}

.landing-auth-status {
  margin: 0;
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 600;
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(340px, 0.7fr) minmax(0, 1.3fr);
  gap: 18px;
  align-items: stretch;
}

.landing-copy,
.landing-visual {
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(121, 140, 171, 0.16);
  box-shadow: 0 24px 70px rgba(148, 163, 184, 0.16);
}

.landing-copy {
  padding: clamp(24px, 4vw, 42px);
  display: grid;
  align-content: center;
  gap: 14px;
  min-height: min(70vh, 700px);
}

.landing-copy h2 {
  font-size: clamp(2.4rem, 3.8vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.05em;
  max-width: 14ch;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.landing-body {
  margin: 0;
  max-width: 24ch;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(71, 85, 105, 0.92);
}

.landing-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.landing-signal-row span,
.landing-mini-footer span {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(67, 97, 238, 0.08);
  border: 1px solid rgba(67, 97, 238, 0.12);
  color: var(--on-surface-variant);
  font-size: 0.76rem;
}

.landing-visual {
  min-height: min(86vh, 920px);
  background:
    radial-gradient(circle at 50% 50%, rgba(67, 97, 238, 0.14), transparent 22%),
    radial-gradient(circle at 14% 22%, rgba(217, 108, 95, 0.08), transparent 18%),
    radial-gradient(circle at 82% 72%, rgba(27, 156, 133, 0.09), transparent 18%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 246, 252, 0.96));
}

.landing-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.landing-network .landing-node-group {
  cursor: grab;
}

.landing-network .landing-node-group:active {
  cursor: grabbing;
}

.landing-network .landing-link {
  fill: none;
  stroke-linecap: round;
  opacity: 0.8;
}

.landing-network .landing-link[data-tone="primary"] {
  stroke: rgba(67, 97, 238, 0.42);
}

.landing-network .landing-link[data-tone="warm"] {
  stroke: rgba(217, 108, 95, 0.5);
}

.landing-network .landing-link[data-tone="mint"] {
  stroke: rgba(27, 156, 133, 0.48);
}

.landing-network .landing-node-shell {
  fill: rgba(255, 255, 255, 0.96);
  stroke: rgba(121, 140, 171, 0.18);
  stroke-width: 1.4px;
}

.landing-network .landing-node-core {
  fill: rgba(235, 241, 255, 0.98);
  stroke: rgba(67, 97, 238, 0.94);
  stroke-width: 3px;
  filter: drop-shadow(0 0 24px rgba(67, 97, 238, 0.16));
}

.landing-network .landing-node-body[data-tone="primary"] {
  fill: rgba(233, 239, 255, 0.98);
  stroke: rgba(67, 97, 238, 0.72);
}

.landing-network .landing-node-body[data-tone="warm"] {
  fill: rgba(255, 241, 238, 0.98);
  stroke: rgba(217, 108, 95, 0.72);
}

.landing-network .landing-node-body[data-tone="mint"] {
  fill: rgba(234, 251, 247, 0.98);
  stroke: rgba(27, 156, 133, 0.7);
}

.landing-network .landing-node-body[data-tone="shell"] {
  fill: rgba(255, 255, 255, 0.98);
  stroke: rgba(121, 140, 171, 0.4);
}

.landing-network .landing-node-label {
  fill: rgba(30, 41, 59, 0.86);
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
}

.landing-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.55;
}

.landing-orb-a {
  top: 12%;
  left: 16%;
  width: 180px;
  height: 180px;
  background: rgba(67, 97, 238, 0.12);
}

.landing-orb-b {
  bottom: 14%;
  left: 36%;
  width: 140px;
  height: 140px;
  background: rgba(217, 108, 95, 0.1);
}

.landing-orb-c {
  right: 12%;
  top: 28%;
  width: 170px;
  height: 170px;
  background: rgba(27, 156, 133, 0.12);
}

.landing-annotation {
  position: absolute;
  z-index: 2;
  max-width: 230px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(121, 140, 171, 0.16);
  box-shadow: 0 14px 34px rgba(148, 163, 184, 0.14);
  backdrop-filter: blur(18px);
}

.landing-annotation-left {
  left: 24px;
  bottom: 28px;
}

.landing-annotation-right {
  right: 24px;
  top: 30px;
}

.landing-annotation strong {
  font-size: 0.95rem;
  line-height: 1.5;
}

.landing-brand div p,
.landing-mini-footer {
  color: rgba(71, 85, 105, 0.88);
}

.landing-mini-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 2px;
}

.landing-support {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 4px;
}

.landing-support-card {
  padding: 22px 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(121, 140, 171, 0.18);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 46px rgba(148, 163, 184, 0.14);
  display: grid;
  gap: 10px;
  align-content: start;
}

.landing-support-card h3 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  color: #1f2937;
}

.landing-support-card p {
  margin: 0;
  color: rgba(71, 85, 105, 0.88);
  line-height: 1.6;
  font-size: 0.92rem;
}

.landing-support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.landing-support-actions .toolbar-button {
  text-decoration: none;
}

.toolbar-button-tall {
  padding: 12px 20px;
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(67, 97, 238, 0.22);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.toolbar-button-tall:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(67, 97, 238, 0.28);
}
.toolbar-button-quiet.toolbar-button-tall {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.toolbar-button-quiet.toolbar-button-tall:hover {
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}

.landing-tutorial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.tutorial-link-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  background: white;
  border: 1px solid rgba(121, 140, 171, 0.22);
  color: var(--ink, #0f172a);
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.tutorial-link-card:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, rgba(67, 97, 238, 0.08), rgba(122, 167, 255, 0.08));
  border-color: rgba(67, 97, 238, 0.5);
  box-shadow: 0 14px 28px rgba(67, 97, 238, 0.18);
  text-decoration: none;
}
.tutorial-link-role {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--primary, #4361ee);
}
.tutorial-link-label {
  grid-column: 1;
  grid-row: 2;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  letter-spacing: -0.01em;
}
.tutorial-link-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.25rem;
  color: var(--primary, #4361ee);
  transition: transform 0.18s ease;
}
.tutorial-link-card:hover .tutorial-link-arrow {
  transform: translateX(4px);
}

@media (max-width: 560px) {
  .landing-tutorial-grid {
    grid-template-columns: 1fr;
  }
}

/* Header dropdown: Guides menu in the landing topbar */
.header-guides {
  position: relative;
}

.header-guides-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.header-guides-caret {
  font-size: 0.72rem;
  opacity: 0.72;
  transition: transform 0.18s ease;
}

.header-guides.is-open .header-guides-caret {
  transform: rotate(-180deg);
}

.header-guides-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  padding: 6px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(121, 140, 171, 0.18);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 48px rgba(30, 41, 59, 0.14);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 40;
}

/* `hidden` attribute must beat the flex declaration above. */
.header-guides-menu[hidden] {
  display: none !important;
}

.header-guides-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  color: #1f2937;
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.header-guides-item:hover,
.header-guides-item:focus-visible {
  background: rgba(67, 97, 238, 0.08);
  color: #1f2937;
  text-decoration: none;
  outline: none;
}

.header-guides-item-role {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1f2937;
}

.header-guides-item-lang {
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(71, 85, 105, 0.72);
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .header-guides-menu {
    right: auto;
    left: 0;
    min-width: 200px;
  }
}

/* Hero headline typewriter */
.hero-type-h2 {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  min-height: 1.1em;
}

.hero-type-text {
  white-space: pre-wrap;
}

.hero-type-caret {
  display: inline-block;
  width: 0.08em;
  height: 0.9em;
  margin-left: 0.08em;
  background: currentColor;
  border-radius: 2px;
  transform: translateY(0.06em);
  animation: hero-type-blink 0.9s steps(2, start) infinite;
  opacity: 0.78;
}

.hero-type-caret.is-idle {
  animation: hero-type-blink 1.15s ease-in-out infinite;
}

@keyframes hero-type-blink {
  0%, 49% { opacity: 0.78; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-type-caret {
    animation: none;
    opacity: 0;
  }
}

/* Quiet footer: developer link + copyright */
.landing-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 28px;
  padding: 14px 6px 4px;
  border-top: 1px solid rgba(121, 140, 171, 0.14);
}

.landing-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.landing-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(71, 85, 105, 0.82);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s ease;
}

.landing-footer-link:hover {
  color: #1f2937;
  text-decoration: none;
}

.landing-footer-link #landing-developer-kicker {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--primary);
}

.landing-footer-sep {
  color: rgba(71, 85, 105, 0.4);
}

.landing-footer-link-subtle {
  color: rgba(71, 85, 105, 0.6);
}

.landing-copyright {
  margin: 0;
  color: rgba(71, 85, 105, 0.62);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .landing-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

.landing-footer-cta p,
.landing-brand div p {
  color: rgba(71, 85, 105, 0.88);
  line-height: 1.7;
}

@keyframes landing-drift {
  to {
    stroke-dashoffset: -140;
  }
}

.background-layer {
  background-image:
    radial-gradient(circle at 2px 2px, rgba(67, 97, 238, 0.08) 1px, transparent 0),
    linear-gradient(rgba(215, 224, 238, 0.85) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 224, 238, 0.85) 1px, transparent 1px);
}

.sidebar,
.topbar,
.workspace-tabs,
.mobile-dock,
.stage-overlay,
.network-tooltip,
.metric-chip,
.mini-control,
.orbit-core,
.chat-composer textarea,
.composer-input,
.platform-switcher .mini-control,
.panel,
.panel-soft {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(121, 140, 171, 0.18);
  box-shadow: 0 18px 50px rgba(148, 163, 184, 0.14);
}

.sidebar {
  border-right-color: rgba(121, 140, 171, 0.18);
}

.brand-block p,
.badge-danger,
.meter-fill-danger,
.legend-swatch-danger {
  color: var(--secondary);
}

.brand-mark {
  background: linear-gradient(145deg, rgba(67, 97, 238, 0.14), rgba(67, 97, 238, 0.05));
}

.nav-item,
.workspace-tab,
.dock-item {
  color: rgba(30, 41, 59, 0.6);
}

.nav-item:hover,
.nav-item.is-active,
.workspace-tab:hover,
.workspace-tab.is-active,
.dock-item:hover,
.dock-item.is-active {
  background: rgba(67, 97, 238, 0.08);
  color: var(--primary);
  border-color: rgba(67, 97, 238, 0.16);
}

.secondary-action,
.toolbar-button {
  background: rgba(255, 255, 255, 0.78);
  color: var(--on-surface);
  border-color: rgba(121, 140, 171, 0.2);
}

.secondary-action:hover,
.toolbar-button:hover {
  background: rgba(244, 247, 252, 0.95);
}

.toolbar-button-primary {
  background: linear-gradient(135deg, rgba(67, 97, 238, 0.96), rgba(87, 117, 246, 0.88));
  color: #ffffff;
}

.toolbar-button.toolbar-button-danger {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #ffffff;
  font-weight: 700;
  border-color: rgba(185, 28, 28, 0.55);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.32);
}

.toolbar-button.toolbar-button-danger:hover {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border-color: rgba(153, 27, 27, 0.7);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.44);
}

.case-subtitle,
.topbar p:last-child,
.detail-stack p:not(.label),
.memo-section p:not(.label),
.lens-summary-block p,
.reaction-feed p,
.context-card p,
.pipeline-card p,
.document-card p,
.case-card p,
.settings-grid p,
.settings-grid li,
.health-panel p,
.network-meta-card p,
.network-tooltip-body,
.stage-overlay span,
.tension-item p,
.evidence-item p,
.conflict-card p,
.decision-item p,
.memo-item p,
.reflection-item p {
  color: rgba(71, 85, 105, 0.9);
}

.eyebrow,
.label,
.meter-label,
.health-header,
.mini-control span,
.graph-toggle,
.metric-chip span,
.badge-neutral,
.network-node .node-meta,
.card-meta span {
  color: var(--on-surface-variant);
}

.meter,
.bar-track,
.composer-input,
.mini-control select,
.mini-control input,
.pipeline-form input,
.pipeline-form textarea,
.pipeline-form select,
.chat-composer textarea {
  background: rgba(243, 246, 251, 0.96);
  border-color: rgba(121, 140, 171, 0.18);
}

.token,
.token-active,
.pipeline-chip,
.badge,
.numeric-pill {
  background: rgba(67, 97, 238, 0.08);
  border-color: rgba(67, 97, 238, 0.14);
  color: var(--on-surface);
}

.badge-primary,
.numeric-pill,
.pipeline-chip,
.token-active {
  color: var(--primary);
}

.badge-ok {
  color: var(--tertiary-dim);
}

.context-card,
.pipeline-card,
.document-card,
.case-card,
.settings-grid article,
.lens-summary-block,
.tension-item,
.evidence-item,
.conflict-card,
.decision-item,
.feed-item,
.memo-item,
.rubric-item,
.prompt-item,
.reflection-item,
.network-meta-card {
  background: rgba(248, 251, 255, 0.92);
  border-color: rgba(121, 140, 171, 0.16);
}

.empty-note {
  background: rgba(248, 251, 255, 0.9);
  border-color: rgba(121, 140, 171, 0.22);
  color: var(--on-surface-variant);
}

.network-stage {
  background:
    radial-gradient(circle at 50% 48%, rgba(67, 97, 238, 0.14), transparent 22%),
    radial-gradient(circle at 18% 18%, rgba(27, 156, 133, 0.08), transparent 16%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 246, 252, 0.96));
  border-color: rgba(121, 140, 171, 0.16);
}

.network-stage::before {
  background-image: radial-gradient(circle at 2px 2px, rgba(67, 97, 238, 0.08) 1px, transparent 0);
}

.stage-overlay,
.network-tooltip {
  background: rgba(255, 255, 255, 0.92);
}

.network-link {
  stroke: rgba(148, 163, 184, 0.34);
}

.network-link[data-tone="danger"] {
  stroke: rgba(217, 108, 95, 0.6);
}

.network-link[data-tone="primary"] {
  stroke: rgba(67, 97, 238, 0.42);
}

.network-link[data-tone="ok"] {
  stroke: rgba(27, 156, 133, 0.42);
}

.network-node .node-body {
  fill: rgba(255, 255, 255, 0.96);
  stroke: rgba(121, 140, 171, 0.28);
}

.network-node .node-shell {
  fill: rgba(255, 255, 255, 0.98);
}

.network-node .node-icon,
.network-node .node-label {
  fill: var(--on-surface);
}

.network-node[data-type="core"] .node-body {
  fill: rgba(238, 243, 251, 0.98);
}

.radar-grid {
  fill: rgba(67, 97, 238, 0.03);
  stroke: rgba(121, 140, 171, 0.32);
}

.radar-fill {
  fill: rgba(67, 97, 238, 0.14);
  stroke: rgba(67, 97, 238, 0.56);
}

.radar-dot {
  fill: var(--primary);
}

.orbit-visual,
.reaction-panel,
.decision-panel,
.chat-panel {
  background: rgba(255, 255, 255, 0.84);
}

.mobile-dock {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(121, 140, 171, 0.18);
  box-shadow: 0 16px 38px rgba(148, 163, 184, 0.18);
}

.prompt-item .prompt-text {
  display: block;
  margin-bottom: 8px;
}

.prompt-item .reflection-response {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid rgba(121, 140, 171, 0.28);
  padding: 8px 10px;
  font: inherit;
  color: inherit;
  background: rgba(255, 255, 255, 0.6);
}

.prompt-item .reflection-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.prompt-item .reflection-status {
  font-size: 0.8rem;
  color: rgba(80, 90, 110, 0.75);
}

.prompt-item .reflection-submit {
  align-self: flex-end;
}

.cohort-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.cohort-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px 0;
}

.cohort-filter-button {
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cohort-filter-button:hover {
  background: rgba(255, 255, 255, 0.06);
}

.cohort-filter-button.is-active {
  background: rgba(120, 180, 255, 0.25);
  border-color: rgba(120, 180, 255, 0.6);
  color: #ffffff;
}

.cohort-panel {
  width: 100%;
  overflow-x: auto;
  font-size: 0.88rem;
}

.cohort-panel table {
  border-collapse: collapse;
  width: 100%;
}

.cohort-panel th,
.cohort-panel td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(121, 140, 171, 0.16);
  white-space: nowrap;
}

.cohort-panel th {
  font-weight: 600;
  color: rgba(60, 70, 90, 0.85);
  background: rgba(246, 248, 251, 0.8);
}

.cohort-panel .check {
  color: #1f9d55;
  font-weight: 700;
}

.cohort-panel .dash {
  color: rgba(120, 130, 150, 0.5);
}

.cohort-panel .muted {
  color: rgba(120, 130, 150, 0.8);
  font-style: italic;
}

.cohort-panel .cohort-row {
  cursor: pointer;
}

.cohort-panel .cohort-row:hover {
  background: rgba(59, 130, 246, 0.06);
}

.cohort-panel .cohort-name-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--primary, #2563eb);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.cohort-panel .cohort-name-button:hover {
  text-decoration: underline;
}

.cohort-drilldown {
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(121, 140, 171, 0.18);
  background: rgba(248, 250, 253, 0.85);
}

.cohort-drilldown .drilldown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.cohort-drilldown .drilldown-header h4 {
  margin: 0;
  font-size: 1rem;
  flex: 1;
}

.cohort-drilldown .drilldown-count {
  font-size: 0.8rem;
}

.cohort-drilldown .drilldown-section {
  margin-top: 12px;
}

.cohort-drilldown .drilldown-section .label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(80, 90, 110, 0.75);
  margin-bottom: 6px;
}

.drilldown-reflections {
  display: grid;
  gap: 8px;
}

.drilldown-reflection {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(59, 130, 246, 0.18);
}

.drilldown-reflection header {
  font-size: 0.78rem;
  color: rgba(60, 70, 90, 0.78);
  margin-bottom: 4px;
}

.drilldown-reflection p {
  margin: 4px 0 0;
}

.drilldown-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
}

.drilldown-item {
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(121, 140, 171, 0.12);
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 10px;
  font-size: 0.86rem;
}

.drilldown-item.is-highlight {
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(239, 246, 255, 0.9);
}

.drilldown-item .drilldown-stamp {
  color: rgba(90, 100, 120, 0.8);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  align-self: center;
}

.drilldown-item .drilldown-label {
  font-weight: 600;
}

.drilldown-item .drilldown-body,
.drilldown-item .drilldown-sub {
  grid-column: 1 / -1;
  margin: 2px 0 0;
}

.drilldown-item .drilldown-sub {
  font-size: 0.78rem;
}

.view-intro {
  position: relative;
  margin: 0 0 16px 0;
  padding: 14px 42px 14px 16px;
  background: linear-gradient(135deg, rgba(67, 97, 238, 0.08), rgba(120, 180, 255, 0.06));
  border: 1px solid rgba(67, 97, 238, 0.25);
  border-left: 3px solid #4361ee;
  border-radius: 10px;
  font-size: 0.88rem;
  line-height: 1.55;
}

.view-intro.is-hidden {
  display: none;
}

.view-intro-title {
  margin: 0 0 4px 0;
  font-weight: 600;
  font-size: 0.92rem;
  color: #1a2a5c;
}

.view-intro-body {
  margin: 0;
  color: #2c3a5e;
}

.view-intro-body em {
  font-style: italic;
  color: #4361ee;
}

.concept-help {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(67, 97, 238, 0.06);
  border: 1px solid rgba(67, 97, 238, 0.18);
  border-radius: 8px;
}

.concept-help-title {
  margin: 0 0 4px 0;
  font-weight: 600;
  font-size: 0.85rem;
  color: #1a2a5c;
}

.concept-help-body {
  margin: 0 0 8px 0;
  font-size: 0.82rem;
  color: #2c3a5e;
  line-height: 1.5;
}

.concept-help-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 0.8rem;
  color: #2c3a5e;
}

.concept-help-list li {
  display: flex;
  gap: 6px;
  align-items: baseline;
  line-height: 1.45;
}

.concept-help-list strong {
  color: #4361ee;
  font-weight: 600;
  min-width: 78px;
}

.student-onboarding {
  position: relative;
  margin: 0 0 12px 0;
  padding: 12px 36px 12px 14px;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 159, 67, 0.08));
  border: 1px solid rgba(255, 159, 67, 0.28);
  border-left: 3px solid #ff9f43;
  border-radius: 10px;
  font-size: 0.85rem;
}

.student-onboarding-title {
  margin: 0 0 6px 0;
  font-weight: 600;
  color: #7a4f00;
  font-size: 0.88rem;
}

.student-onboarding-list {
  margin: 0;
  padding-left: 1.15rem;
  color: #3a2e00;
  line-height: 1.55;
}

.student-onboarding-list li {
  margin-bottom: 3px;
}

.student-onboarding .view-intro-close {
  color: #7a4f00;
}

.student-onboarding-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.section-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.panel-collapse-toggle {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(67, 97, 238, 0.4);
  border-radius: 6px;
  background: rgba(67, 97, 238, 0.14);
  color: #2a3fc8;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.panel-collapse-toggle:hover {
  background: rgba(67, 97, 238, 0.18);
}

.panel-collapse-toggle .chevron {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  transition: transform 0.2s ease;
}

[data-collapsible-panel].is-collapsed > :not(.section-header) {
  display: none !important;
}

[data-collapsible-panel].is-collapsed {
  padding-bottom: 8px;
}

[data-collapsible-panel].is-collapsed .panel-collapse-toggle .chevron {
  transform: rotate(-90deg);
}

.visualizer-layout:has([data-collapsible-panel="intake"].is-collapsed):has([data-collapsible-panel="insight"].is-collapsed) .canvas-panel {
  /* both side panels collapsed — let the network stretch */
}
.visualizer-layout [data-collapsible-panel].is-collapsed {
  flex: 0 0 auto;
  min-width: 0;
}

.view-intro-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #4361ee;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s;
}

.view-intro-close:hover {
  opacity: 1;
  background: rgba(67, 97, 238, 0.1);
}

/* ===== Home dashboard (slide-4 direction: clean entry → routes into the map) ===== */
.home-view { display: none; }
.home-view.is-active { display: block; }
.home-wrap {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 4px 2px 32px;
}
.home-head { display: flex; align-items: center; justify-content: space-between; }
.home-brand { display: flex; align-items: center; gap: 14px; }
.home-brand-mark {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(67,97,238,0.9), rgba(67,97,238,0.6));
  color: #fff;
  font-size: 26px;
}
.home-brand-title { margin: 0; font-size: 1.15rem; color: #fff; letter-spacing: -0.01em; }
.home-brand-sub { margin: 2px 0 0; font-size: 0.82rem; color: rgba(246,246,252,0.55); }

.home-continue {
  border-radius: 22px;
  padding: 26px 28px;
  background: linear-gradient(135deg, rgba(67,97,238,0.22), rgba(23,26,31,0.72));
  border: 1px solid rgba(67,97,238,0.32);
}
.home-greeting { margin: 0 0 14px; font-size: 0.92rem; color: rgba(132,160,255,0.95); font-weight: 600; }
.home-continue-eyebrow {
  margin: 0; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(246,246,252,0.5);
}
.home-continue-title { margin: 6px 0 4px; font-size: 1.6rem; color: #fff; letter-spacing: -0.02em; }
.home-continue-sub { margin: 0; font-size: 0.9rem; color: rgba(246,246,252,0.66); }
.home-continue-empty { margin-top: 8px; }
.home-task-framing {
  margin: 14px 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(246, 246, 252, 0.82);
  max-width: 62ch;
}
.home-continue-cta {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.95rem; padding: 11px 22px;
}
.home-continue-cta .material-symbols-outlined { font-size: 20px; }

.home-section-eyebrow {
  margin: 0 0 12px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(246,246,252,0.5);
}
/* The tasks eyebrow sits on the light page (not inside a dark panel) — needs dark ink. */
.home-tasks > .home-section-eyebrow { color: var(--on-surface-variant); }
.home-task-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.home-task-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px;
  border-radius: 18px;
  background: rgba(23,26,31,0.72);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.home-task-card:hover { transform: translateY(-2px); border-color: rgba(67,97,238,0.4); }
.home-task-card.is-disabled { opacity: 0.5; }
.home-task-icon {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(67,97,238,0.16);
  color: rgba(150,175,255,0.95);
  font-size: 22px;
}
.home-task-title { margin: 6px 0 0; font-size: 1.02rem; color: #fff; }
.home-task-body { margin: 0; font-size: 0.85rem; line-height: 1.5; color: rgba(246,246,252,0.62); flex: 1; }
.home-task-open {
  margin-top: 6px;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  color: rgba(132,160,255,0.95); font-size: 0.88rem; font-weight: 600;
  padding: 0;
}
.home-task-open .material-symbols-outlined { font-size: 18px; }
.home-task-open:disabled { color: rgba(246,246,252,0.4); cursor: default; }

.home-bottom {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
}
.home-recent, .home-advanced { border-radius: 18px; padding: 20px; }
.home-recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.home-recent-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid rgba(67,97,238,0.55);
}
.home-recent-item strong { font-size: 0.9rem; color: #fff; font-weight: 500; }
.home-recent-item span { font-size: 0.76rem; color: rgba(246,246,252,0.5); }
.home-recent-empty { font-size: 0.86rem; color: rgba(246,246,252,0.5); }
.home-advanced-body { margin: 0 0 14px; font-size: 0.84rem; line-height: 1.5; color: rgba(246,246,252,0.58); }
.home-adv-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.home-adv-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(246,246,252,0.82); font-size: 0.86rem; font-weight: 500;
  transition: border-color 0.16s ease;
}
.home-adv-item:hover { border-color: rgba(67,97,238,0.45); }
.home-adv-item .material-symbols-outlined { font-size: 18px; color: rgba(150,175,255,0.9); }
.home-adv-item:disabled { opacity: 0.45; cursor: default; }

@media (max-width: 860px) {
  .home-task-grid { grid-template-columns: 1fr; }
  .home-bottom { grid-template-columns: 1fr; }
}

/* ===== 간단히 / 자세히 (simple / detailed) map density (slide-5 direction) ===== */
.density-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.density-option {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  color: rgba(246, 246, 252, 0.6);
  transition: background 0.15s ease, color 0.15s ease;
}
.density-option:hover { color: rgba(246, 246, 252, 0.92); }
.density-option.is-active { background: rgba(67, 97, 238, 0.92); color: #fff; }

/* In simple mode, tuck away the dense "process" panels — keep map, lenses,
   selected node, annotate, and the question composer. */
.density-simple [data-density="advanced"] { display: none !important; }

/* ===== You ↔ Team comparison layer (personal vs cohort overlay) ===== */
.compare-summary {
  margin-bottom: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(23, 26, 31, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.compare-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.compare-summary-title { font-size: 0.92rem; font-weight: 600; color: #fff; }
.compare-summary-counts { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.compare-chip {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.compare-chip-shared { background: rgba(27, 156, 133, 0.18); color: #5fe3c4; border-color: rgba(27, 156, 133, 0.35); }
.compare-chip-mine   { background: rgba(67, 97, 238, 0.18);  color: #9ab2ff; border-color: rgba(67, 97, 238, 0.35); }
.compare-chip-team   { background: rgba(231, 111, 81, 0.18); color: #ffb59e; border-color: rgba(231, 111, 81, 0.38); }
.compare-summary-prompt {
  margin: 10px 0 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: rgba(246, 246, 252, 0.66);
}

/* ============================================================
   DARK THEME (cohesive) — matches the approved PPTX mockups.
   Appended last to override the earlier light-theme block.
   ============================================================ */
.background-layer { background-image: none; }

/* Surfaces → frosted dark glass */
.sidebar,
.topbar,
.workspace-tabs,
.mobile-dock,
.metric-chip,
.panel,
.panel-soft,
.context-card,
.pipeline-card,
.document-card,
.case-card,
.settings-grid article,
.lens-summary-block,
.tension-item,
.evidence-item,
.conflict-card,
.decision-item,
.feed-item,
.memo-item,
.rubric-item,
.prompt-item,
.reflection-item,
.network-meta-card {
  background: rgba(21, 24, 32, 0.72);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
}
.sidebar { border-right-color: rgba(255, 255, 255, 0.06); }

/* Inputs / selects / controls */
.mini-control,
.platform-switcher .mini-control,
.mini-control select,
.mini-control input,
.pipeline-form input,
.pipeline-form textarea,
.pipeline-form select,
.chat-composer textarea,
.composer-input,
.meter,
.bar-track,
.orbit-core {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f3f5fb;
}
.mini-control select option { color: #0d0f16; }

/* Text → light */
.case-subtitle,
.topbar p:last-child,
.detail-stack p:not(.label),
.memo-section p:not(.label),
.lens-summary-block p,
.reaction-feed p,
.context-card p,
.pipeline-card p,
.document-card p,
.case-card p,
.settings-grid p,
.settings-grid li,
.health-panel p,
.network-meta-card p,
.network-tooltip-body,
.stage-overlay span,
.tension-item p,
.evidence-item p,
.conflict-card p,
.decision-item p,
.memo-item p,
.reflection-item p {
  color: rgba(246, 246, 252, 0.62);
}
.eyebrow,
.label,
.meter-label,
.health-header,
.mini-control span,
.graph-toggle,
.metric-chip span,
.network-node .node-meta,
.card-meta span {
  color: rgba(246, 246, 252, 0.5);
}
.case-summary h2,
.brand-block h1,
.section-header h3,
.subsection-head h4 { color: #fff; }

/* Nav */
.nav-item,
.workspace-tab,
.dock-item { color: rgba(246, 246, 252, 0.6); }
.nav-item:hover,
.nav-item.is-active,
.workspace-tab:hover,
.workspace-tab.is-active,
.dock-item:hover,
.dock-item.is-active {
  background: rgba(67, 97, 238, 0.18);
  color: #cdd8ff;
  border-color: rgba(67, 97, 238, 0.3);
}

/* Buttons (primary/danger keep their gradients) */
.secondary-action,
.toolbar-button {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(246, 246, 252, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}
.secondary-action:hover,
.toolbar-button:hover { background: rgba(255, 255, 255, 0.12); }

/* Tokens / badges / pills */
.token,
.pipeline-chip,
.badge,
.numeric-pill {
  background: rgba(67, 97, 238, 0.16);
  border-color: rgba(67, 97, 238, 0.28);
  color: rgba(206, 216, 255, 0.95);
}

/* The map canvas → dark */
.network-stage {
  background:
    radial-gradient(circle at 50% 45%, rgba(67, 97, 238, 0.16), transparent 26%),
    radial-gradient(circle at 16% 16%, rgba(27, 156, 133, 0.1), transparent 20%),
    linear-gradient(180deg, rgba(16, 18, 26, 0.96), rgba(12, 14, 20, 0.98));
  border-color: rgba(255, 255, 255, 0.07);
}
.network-stage::before {
  background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
}
.stage-overlay,
.network-tooltip { background: rgba(21, 24, 32, 0.86); }
.empty-note {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(246, 246, 252, 0.55);
}
.network-link { stroke: rgba(180, 195, 220, 0.28); }

/* Simple-mode map proportions: slim side rails, dominant map (the workspace). */
.density-simple .visualizer-layout,
.density-simple .visualizer-layout.is-focused {
  grid-template-columns: minmax(230px, 264px) minmax(0, 1.9fr) minmax(250px, 290px);
}
.density-simple .intake-panel { padding-top: 18px; }
/* Give the map real presence in simple mode. */
.density-simple .network-stage { min-height: 560px; }

/* ============================================================
   Professional pass — button system + proportions (overhaul)
   ============================================================ */
:root { --r-sm: 9px; --r-md: 12px; --r-lg: 16px; }

/* Buttons: modern rounded-rect, tighter, clear hierarchy */
.toolbar-button,
.secondary-action {
  min-height: 34px;
  border-radius: var(--r-sm);
  padding: 0 13px;
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(246, 246, 252, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.toolbar-button:hover,
.secondary-action:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
}
.toolbar-button-quiet {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(246, 246, 252, 0.58);
}
.toolbar-button-quiet:hover { background: rgba(255, 255, 255, 0.06); color: rgba(246, 246, 252, 0.9); }

.toolbar-button-primary {
  background: #4361ee;
  color: #fff;
  font-weight: 600;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.toolbar-button-primary:hover { background: #5571f6; border-color: transparent; }

/* Sign out: quiet, not a loud red block */
.toolbar-button.toolbar-button-danger {
  background: transparent;
  color: rgba(246, 246, 252, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
  font-weight: 600;
  box-shadow: none;
}
.toolbar-button.toolbar-button-danger:hover {
  background: rgba(231, 111, 81, 0.12);
  color: #ffb59e;
  border-color: rgba(231, 111, 81, 0.4);
}

/* Card header (add-node) refined */
.pipeline-card-collapsible .pipeline-card-header {
  border-radius: var(--r-md);
  box-shadow: none;
  font-weight: 600;
  background: rgba(67, 97, 238, 0.14);
  border-color: rgba(67, 97, 238, 0.26);
}
.pipeline-card-collapsible .pipeline-card-header:hover { background: rgba(67, 97, 238, 0.22); }

/* Selects / inputs / pills — consistent radius + height */
.mini-control,
.mini-control select,
.mini-control input,
.composer-input,
.chat-composer textarea,
.density-toggle { border-radius: var(--r-sm); }
.mini-control { min-height: 34px; }

/* Lens / token pills — refined */
.token, .token-active, .badge, .numeric-pill, .pipeline-chip { border-radius: 8px; font-weight: 600; }

/* Panels: slightly tighter radius for a pro, less-bubbly feel */
.panel { border-radius: var(--r-lg); }
.panel-soft { border-radius: var(--r-md); }

/* Spacing / proportions */
.toolbar-actions { gap: 8px; align-items: center; }
.topbar { gap: 14px; }
.visualizer-layout, .lens-layout, .matrix-layout, .sandbox-layout, .report-layout { gap: 16px; }
.section-header { margin-bottom: 14px; }

/* Primary form submit buttons consistent */
.pipeline-form button[type="submit"],
.quick-note-form button[type="submit"],
#visualizer-form button[type="submit"] { border-radius: var(--r-sm); min-height: 36px; }

/* Add-node header → primary indigo (single accent, not a loud green) */
.pipeline-card-collapsible[data-pipeline-key="addNode"] .pipeline-card-header {
  background: #4361ee;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.pipeline-card-collapsible[data-pipeline-key="addNode"] .pipeline-card-header:hover {
  background: #5571f6;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(67, 97, 238, 0.3);
}

/* Simple mode: the lone open add-node card needs no collapse chevron */
.density-simple [data-pipeline-key="addNode"] .pipeline-card-header .chevron { display: none; }
.density-simple [data-pipeline-key="addNode"] .pipeline-card-header { cursor: default; }

/* Single density toggle button (간단히/자세히) */
.density-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 12px; border-radius: var(--r-sm, 9px);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(246, 246, 252, 0.82);
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.density-toggle-btn:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.16); }
.density-toggle-btn .material-symbols-outlined { font-size: 17px; color: rgba(150, 175, 255, 0.9); }

/* Collapsible question composer */
.composer-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 0 14px; border-radius: var(--r-sm, 9px);
  background: rgba(67, 97, 238, 0.14);
  border: 1px solid rgba(67, 97, 238, 0.28);
  color: #cdd8ff; font-size: 0.83rem; font-weight: 600; cursor: pointer;
  transition: background 150ms ease;
}
.composer-toggle:hover { background: rgba(67, 97, 238, 0.22); }
.composer-toggle .material-symbols-outlined { font-size: 18px; }
.canvas-panel:not(.composer-open) #visualizer-form { display: none; }
.canvas-panel.composer-open #composer-toggle { display: none; }

/* Honour the hidden attribute on the annotate form (its display:flex overrode it) */
.quick-note-form[hidden] { display: none !important; }

/* ============================================================
   Minimal icon-dock mode (간단히) — undergrad-friendly:
   map fills the screen; panels fold in as drawers from icons.
   ============================================================ */
.map-dock { display: none; }
.density-simple .map-dock {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
}
.map-dock-btn {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(18, 21, 29, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(246, 246, 252, 0.82);
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 120ms ease;
}
.map-dock-btn:hover { transform: translateY(-1px); }
.map-dock-btn.is-active { background: #4361ee; color: #fff; border-color: transparent; }
.map-dock-btn .material-symbols-outlined { font-size: 24px; }

/* Map fills the layout; the two panels become off-canvas drawers */
.density-simple .visualizer-layout,
.density-simple .visualizer-layout.is-focused {
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}
.density-simple .intake-panel,
.density-simple .insight-panel {
  position: absolute;
  top: 0; bottom: 0;
  width: min(360px, 84vw);
  z-index: 28;
  overflow-y: auto;
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.density-simple .intake-panel { left: 0; transform: translateX(-115%); opacity: 0; }
.density-simple .insight-panel { right: 0; transform: translateX(115%); opacity: 0; }
.density-simple .intake-panel.is-open,
.density-simple .insight-panel.is-open { transform: translateX(0); opacity: 1; }
/* Close affordance inside an open drawer */
.drawer-close {
  display: none;
  position: sticky; top: 0; margin-left: auto;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(246,246,252,0.7); cursor: pointer; align-items: center; justify-content: center;
}
.density-simple .drawer-close { display: inline-flex; }

/* Off-canvas drawers must not extend the page scroll width */
.density-simple .visualizer-layout { overflow-x: clip; }

/* ============================================================
   Dark-theme contrast fixes (WCAG AA) — raise muted text alphas
   ============================================================ */
.case-subtitle,
.topbar p:last-child,
.detail-stack p:not(.label),
.lens-summary-block p,
.reaction-feed p,
.context-card p,
.pipeline-card p,
.document-card p,
.case-card p,
.settings-grid p,
.settings-grid li,
.health-panel p,
.network-meta-card p,
.network-tooltip-body,
.stage-overlay span,
.tension-item p,
.evidence-item p,
.conflict-card p,
.decision-item p,
.memo-item p,
.reflection-item p,
#selected-node-copy,
.selected-node-card p,
.home-task-body,
.home-advanced-body,
.home-continue-sub {
  color: rgba(246, 246, 252, 0.8);
}
.eyebrow,
.label,
.meter-label,
.meter-hint,
.health-header,
.mini-control span,
.graph-toggle,
.metric-chip span,
.network-node .node-meta,
.card-meta span,
.home-section-eyebrow,
.home-recent-item span,
.composer-hint,
.home-recent-empty {
  color: rgba(246, 246, 252, 0.7);
}
.topbar-identity { color: rgba(246, 246, 252, 0.76); }
/* Active lens pill: solid accent so the selected lens reads clearly */
.token-active {
  background: #4361ee;
  color: #fff;
  border-color: transparent;
}
.home-task-framing { color: rgba(246, 246, 252, 0.9); }
.icon-button { color: rgba(246, 246, 252, 0.66); }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-item:focus-visible,
.dock-item:focus-visible,
.workspace-tab:focus-visible,
.token:focus-visible,
.token-active:focus-visible,
.map-dock-btn:focus-visible,
.drawer-close:focus-visible,
.case-summary-more:focus-visible,
.case-summary-open:focus-visible {
  outline: 3px solid rgba(151, 169, 255, 0.95);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(67, 97, 238, 0.26);
}

.toolbar-button:focus-visible,
.secondary-action:focus-visible {
  border-color: rgba(151, 169, 255, 0.9);
}

.toolbar-button:hover,
.secondary-action:hover {
  color: #f8faff;
}

.toolbar-button-quiet,
.toolbar-button.toolbar-button-danger {
  color: rgba(246, 246, 252, 0.72);
}

.toolbar-button-quiet:hover,
.toolbar-button.toolbar-button-danger:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #f8faff;
  border-color: rgba(151, 169, 255, 0.34);
}

.toolbar-button-primary:hover {
  background: #5571f6;
  color: #ffffff;
}

.nav-item:hover,
.nav-item.is-active,
.nav-item:focus-visible,
.workspace-tab:hover,
.workspace-tab.is-active,
.workspace-tab:focus-visible,
.dock-item:hover,
.dock-item.is-active,
.dock-item:focus-visible {
  color: #dbe4ff;
}

.token:hover,
.token:focus-visible {
  background: rgba(67, 97, 238, 0.24);
  border-color: rgba(151, 169, 255, 0.46);
  color: #f8faff;
}

.map-dock-btn:hover,
.map-dock-btn:focus-visible {
  background: rgba(28, 33, 47, 0.96);
  border-color: rgba(151, 169, 255, 0.42);
  color: #f8faff;
}

.map-dock-btn.is-active:hover,
.map-dock-btn.is-active:focus-visible {
  background: #4361ee;
  color: #ffffff;
}

.drawer-close:hover,
.drawer-close:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(151, 169, 255, 0.4);
  color: #ffffff;
}

.topbar {
  align-items: center;
}

.topbar-side {
  min-width: 0;
  flex: 0 1 auto;
  justify-content: flex-end;
}

/* Desktop: keep the context bar a single slim horizontal row so the map stays
   map-forward. (A prior flex:1 1 420px basis made .topbar-side balloon to ~420px
   tall, pushing the network below the fold.) Narrow widths still stack via the
   max-width:900px block below. */
@media (min-width: 901px) {
  .topbar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  .topbar-side {
    flex: 0 1 auto;
    min-width: 0;
  }
}

.toolbar-actions {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.topbar-identity {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  max-width: min(28ch, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.density-simple .intake-panel,
.density-simple .insight-panel {
  max-width: calc(100% - 18px);
}

@media (max-width: 900px) {
  .topbar {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px 10px;
    padding: 10px 12px;
  }

  .topbar-heading {
    flex: 1 1 180px;
    margin-right: 0;
  }

  .topbar h2 {
    font-size: 1rem;
  }

  .topbar p:last-child {
    display: none;
  }

  .topbar-collapse-toggle {
    order: 2;
  }

  .topbar-side {
    order: 3;
    flex: 1 1 100%;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
  }

  .platform-switcher {
    flex: 1 1 100%;
    min-width: 0;
  }

  .toolbar-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .toolbar-actions .toolbar-button {
    min-height: 32px;
    padding-inline: 10px;
  }
}

@media (max-width: 640px) {
  .landing-header-actions,
  .landing-actions,
  .toolbar-actions,
  .composer,
  .chat-actions,
  .pipeline-actions,
  .card-actions {
    flex-direction: row;
    align-items: center;
  }

  .landing-header-actions {
    justify-content: flex-start;
  }

  .header-guides-menu {
    width: min(280px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
  }

  .topbar {
    padding: 8px 10px;
    border-radius: 16px;
  }

  .topbar-side {
    gap: 7px;
  }

  .toolbar-actions {
    gap: 6px;
  }

  .topbar-identity {
    order: -1;
    flex: 1 1 100%;
    min-height: 22px;
    font-size: 0.78rem;
  }

  .density-simple .map-dock {
    left: 8px;
    top: 12px;
    transform: none;
  }

  .map-dock-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .density-simple .intake-panel,
  .density-simple .insight-panel {
    width: min(340px, calc(100vw - 58px));
    max-width: calc(100vw - 58px);
    border-radius: 14px;
  }

  .density-simple .intake-panel {
    left: 50px;
  }

  .density-simple .insight-panel {
    left: 50px;
    right: auto;
  }

  .density-simple .insight-panel {
    transform: translateX(115%);
  }

  .density-simple .intake-panel.is-open,
  .density-simple .insight-panel.is-open {
    transform: translateX(0);
  }

  .density-simple .visualizer-layout,
  .density-simple .visualizer-layout.is-focused {
    overflow-x: clip;
  }
}

@media (max-width: 420px) {
  .landing-shell {
    padding-inline: 14px;
  }

  .landing-header {
    gap: 12px;
  }

  .landing-header-actions .toolbar-button {
    min-height: 32px;
    padding-inline: 10px;
  }

  .topbar-heading {
    flex-basis: calc(100% - 44px);
  }

  .topbar-side {
    flex-basis: 100%;
  }

  .toolbar-actions .toolbar-button {
    font-size: 0.76rem;
    padding-inline: 8px;
  }

  .density-simple .network-stage {
    min-height: clamp(430px, 68vh, 620px);
  }
}

/* Dark-theme contrast: detailed-mode elements that kept light-theme dark text */
.concept-help-title,
.view-intro-title,
.student-onboarding-title,
.pipeline-card-collapsible .pipeline-card-header strong {
  color: #fff;
}
.concept-help-body,
.concept-help-list span,
.view-intro-body,
.student-onboarding-list li,
.legend-label {
  color: rgba(246, 246, 252, 0.82);
}
.concept-help-list strong { color: rgba(206, 216, 255, 0.95); }
.legend-desc { color: rgba(246, 246, 252, 0.66); }
.pipeline-card-collapsible .pipeline-card-header .chevron { color: rgba(246, 246, 252, 0.7); }
/* Close / icon-toggle buttons inside overlays */
.legend-close,
.stage-note-close,
.view-intro-close,
.swarm-info-toggle,
.legend-reopen,
.stage-note-reopen { color: rgba(246, 246, 252, 0.72); }
.legend-close .material-symbols-outlined,
.stage-note-close .material-symbols-outlined,
.view-intro-close,
.swarm-info-toggle .material-symbols-outlined { color: inherit; }
.concept-help { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }

/* Higher-specificity overrides for legend / overlay close / panel-expand toggles */
.legend-item .legend-label { color: rgba(246, 246, 252, 0.86); }
.legend-item .legend-desc { color: rgba(246, 246, 252, 0.66); }
.stage-overlay .legend-close,
.stage-overlay .legend-close .material-symbols-outlined,
.stage-overlay .stage-note-close,
.stage-overlay .stage-note-close .material-symbols-outlined,
.legend-reopen .material-symbols-outlined,
.swarm-info-toggle .material-symbols-outlined { color: rgba(246, 246, 252, 0.74); }
.panel-expand-toggle,
.panel-expand-toggle span,
#panel-expand-intake-label,
#panel-expand-insight-label { color: rgba(246, 246, 252, 0.78); }

/* Overlay close × icons (id-based, beats light-theme specifics) */
#legend-close,
#stage-note-close,
#swarm-info-toggle { background: rgba(255, 255, 255, 0.08); border-color: rgba(255,255,255,0.12); }
#legend-close .material-symbols-outlined,
#stage-note-close .material-symbols-outlined,
#swarm-info-toggle .material-symbols-outlined { color: rgba(246, 246, 252, 0.82); }

/* Matrix / report / perspectives metric + label contrast (>=4.5) */
.metric-bar header span,
.metric-bar header strong,
.metric-bar span,
.metric-bar strong,
.radar-label,
.bar-label,
.reaction-feed strong { color: rgba(246, 246, 252, 0.82); }
.orbit-satellite { color: rgba(246, 246, 252, 0.82); }
.chat-message,
.chat-message strong,
.chat-message .chat-meta { color: rgba(246, 246, 252, 0.85); }

/* Report rubric, orbit satellites, chat labels — contrast */
.rubric-item,
.rubric-item strong,
.rubric-item span,
.rubric-item .label { color: rgba(246, 246, 252, 0.82); }
.orbit-satellite,
.orbit-satellite-a,
.orbit-satellite-b,
.orbit-satellite-c {
  background: rgba(67, 97, 238, 0.22);
  color: rgba(246, 246, 252, 0.92);
  border-color: rgba(67, 97, 238, 0.4);
}
.chat-message span,
.chat-message strong,
.chat-message b { color: rgba(246, 246, 252, 0.9); }

/* Orbit satellites: opaque dark chips (avoid compositing over light ancestor) */
.orbit-satellite,
.orbit-satellite-a,
.orbit-satellite-b,
.orbit-satellite-c {
  background: #20283f;
  color: #e9ecf6;
  border: 1px solid rgba(120, 150, 255, 0.35);
}
/* Chat bubbles read on dark */
.chat-message,
.chat-message * { color: rgba(246, 246, 252, 0.9); }

/* Chat author <small> label */
.chat-message small,
.chat-thread small { color: rgba(246, 246, 252, 0.78); }

/* ============================================================
   Simple mode: the network map is a full-width, fluid background, and the
   intake / insight panels become off-canvas slide-in drawers.

   Two earlier simple-mode designs collided: a cramped 3-column grid (which
   was what actually rendered) and an intended drawer mode that never engaged
   because `.visualizer-layout.is-focused .intake-panel { position: sticky }`
   (specificity 0,3,0) outranked `.density-simple .intake-panel` (0,2,0). So
   "simple" mode was really showing all three full panels at once — that is
   why it still felt complex. Here we (a) drop the layout to a plain block so
   the canvas fills the full width and scales with the browser (app.js's
   resize handler re-fits the D3 viewBox), and (b) re-assert the drawer
   positioning with selectors specific enough (0,4,0) to beat is-focused. */
.density-simple .visualizer-layout,
.density-simple .visualizer-layout.is-focused {
  display: block !important;
  position: relative;
}
.density-simple .visualizer-layout .canvas-panel,
.density-simple .visualizer-layout.is-focused .canvas-panel {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 6px;
}
.density-simple .network-stage { width: 100%; }

/* Off-canvas drawers — must outrank `.visualizer-layout.is-focused .*-panel` */
.density-simple .visualizer-layout .intake-panel,
.density-simple .visualizer-layout.is-focused .intake-panel,
.density-simple .visualizer-layout .insight-panel,
.density-simple .visualizer-layout.is-focused .insight-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(360px, 84vw);
  max-height: none;
  z-index: 28;
  overflow-y: auto;
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.density-simple .visualizer-layout .intake-panel,
.density-simple .visualizer-layout.is-focused .intake-panel {
  left: 0;
  right: auto;
  transform: translateX(-115%);
  opacity: 0;
}
.density-simple .visualizer-layout .insight-panel,
.density-simple .visualizer-layout.is-focused .insight-panel {
  right: 0;
  left: auto;
  transform: translateX(115%);
  opacity: 0;
}
.density-simple .visualizer-layout .intake-panel.is-open,
.density-simple .visualizer-layout.is-focused .intake-panel.is-open,
.density-simple .visualizer-layout .insight-panel.is-open,
.density-simple .visualizer-layout.is-focused .insight-panel.is-open {
  transform: translateX(0);
  opacity: 1;
}

/* ============================================================
   Network map SVG text was rendering in #1e293b (the light-theme
   --on-surface token) on the dark map background — contrast ~1.31, i.e.
   black-on-black, the node names were invisible. The earlier dark-theme
   passes fixed CSS `color` but SVG glyphs use `fill`, which was left dark
   (and the runtime <style> that was meant to set it light never injects).
   Force light fill on all network node text. Labels/meta sit BELOW the
   nodes on the dark stage and the icon is centered in the dark node body,
   so light is correct in every case. */
.network-node .node-label,
.network-stage .node-label,
svg text.node-label {
  fill: rgba(246, 246, 252, 0.96) !important;
}
.network-node .node-icon,
.network-stage .node-icon,
svg text.node-icon {
  fill: #f6f6fc !important;
}
.network-node .node-meta,
.network-stage .node-meta,
svg text.node-meta {
  fill: rgba(202, 208, 224, 0.92) !important;
}
/* Landing-page network labels share the same risk. */
.landing-network text,
.landing-node-label {
  fill: rgba(246, 246, 252, 0.92);
}

/* ============================================================
   Floating lens bar — the 4 stakeholder lenses (교사·학생·IT·행정) float over
   the top of the map so "switch perspective" (the core DTS move) is always one
   click away, even with the map full-width and the insight panel as a drawer. */
.map-lens-bar {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 16;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(14, 17, 26, 0.74);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(151, 169, 255, 0.20);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.map-lens-bar-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(206, 216, 255, 0.9);
  padding-left: 2px;
  flex-shrink: 0;
}
.map-lens-bar .lens-pill-row {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* On a narrow map the bar stays centered and wraps without overflowing. */
@media (max-width: 640px) {
  .map-lens-bar { gap: 6px; padding: 5px 8px; }
  .map-lens-bar-label { display: none; }
}

/* Sidebar declutter: when there is only one case the picker just echoes the
   title, so hide it in simple mode (kept in detailed and whenever >1 case). */
.density-simple .case-summary #sidebar-case-control.single-case {
  display: none;
}

/* (C) Redundant section kickers: an .eyebrow immediately followed by a heading
   is a decorative label above the real title (e.g. "시스템 구조 / 제안 네트워크").
   Hide just those in simple mode; standalone labels (e.g. "내 질문", which are
   followed by content, not a heading) are kept. Scoped to main content so the
   topbar/tour/sidebar are untouched. */
.density-simple .main-content .eyebrow:has(+ h2, + h3, + h4) {
  display: none;
}

/* (F) Compress vertical rhythm in simple mode so the secondary views (관점·상충
   관계·리포트) scroll less. Intrinsic content is untouched; only the gaps shrink. */
.density-simple .main-content .section-header { margin-bottom: 10px; }
.density-simple .main-content .subsection { margin-top: 12px; }
.density-simple .main-content .lens-summary-block { margin-bottom: 10px; }

/* ============================================================
   LIGHT (주간) THEME — toggled by the topbar/landing button (was EN/KO).
   Dark is the default; html.theme-light flips the major surfaces to light.
   The app's dark look is itself an override layer over light :root tokens, so
   this is an inverse override layer. Verified with the contrast audit so no
   text drops below WCAG AA in either theme.
   ============================================================ */
.theme-light body {
  color: #1e293b;
  background:
    radial-gradient(circle at 12% 8%, rgba(67, 97, 238, 0.10), transparent 34%),
    radial-gradient(circle at 88% 6%, rgba(27, 156, 133, 0.07), transparent 32%),
    radial-gradient(circle at 50% 120%, rgba(120, 80, 220, 0.06), transparent 45%),
    linear-gradient(180deg, #f4f7fe 0%, #eaf0fb 100%);
}

/* Surfaces → light glass */
.theme-light .sidebar,
.theme-light .topbar,
.theme-light .panel,
.theme-light .panel-soft,
.theme-light .context-card,
.theme-light .case-card,
.theme-light .pipeline-card,
.theme-light .document-card,
.theme-light .settings-grid article,
.theme-light .lens-summary-block,
.theme-light .tension-item,
.theme-light .selected-node-card,
.theme-light .selected-node-related,
.theme-light .home-card,
.theme-light .compare-summary,
.theme-light .network-meta-card,
.theme-light .health-panel,
.theme-light .map-lens-bar,
.theme-light .stage-overlay,
.theme-light .network-tooltip,
.theme-light .conflict-card,
.theme-light .reason-card,
.theme-light .insight-card,
.theme-light .metric-bar,
.theme-light .reflection-block,
.theme-light .memo-section,
.theme-light .evidence-item,
.theme-light .prompt-item,
.theme-light .rubric-item,
.theme-light .decision-item,
.theme-light .timeline-item,
.theme-light .reaction-feed,
.theme-light .network-meta-grid > * {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(20, 30, 60, 0.12);
  color: #1e293b;
  box-shadow: 0 12px 32px rgba(20, 30, 70, 0.08);
}

/* Text → dark (default body text + headings + muted) */
.theme-light h1, .theme-light h2, .theme-light h3, .theme-light h4,
.theme-light p, .theme-light li, .theme-light strong, .theme-light span,
.theme-light label,
.theme-light .case-subtitle,
.theme-light .meter-hint,
.theme-light .section-header h3,
.theme-light .topbar p:last-child,
.theme-light .chat-message,
.theme-light .chat-message *,
.theme-light .chat-message small,
.theme-light .lens-summary-block p,
.theme-light .concept-help-body,
.theme-light .concept-help-list span,
.theme-light .view-intro-body,
.theme-light .legend-label,
.theme-light .legend-desc,
.theme-light .home-greeting,
.theme-light .topbar-identity {
  color: #1f2a44;
}
.theme-light .eyebrow,
.theme-light .meter-hint,
.theme-light .legend-desc,
.theme-light .card-meta span,
.theme-light .context-note { color: #5a6781; }
.theme-light .concept-help-title,
.theme-light .view-intro-title,
.theme-light .student-onboarding-title { color: #0f1830; }

/* Nav */
.theme-light .nav-item { color: #46546f; }
.theme-light .nav-item:hover,
.theme-light .nav-item.is-active { color: #1a2a5c; background: rgba(67, 97, 238, 0.10); }

/* Inputs / selects / textareas → light fields */
.theme-light input,
.theme-light select,
.theme-light textarea,
.theme-light .composer-input,
.theme-light .chat-composer textarea,
.theme-light .mini-control select {
  background: #ffffff;
  color: #1f2a44;
  border-color: rgba(20, 30, 60, 0.18);
}
.theme-light input::placeholder,
.theme-light textarea::placeholder { color: #8a96ad; }

/* Tokens / pills → light; active keeps the indigo accent */
.theme-light .token {
  background: rgba(67, 97, 238, 0.08);
  border-color: rgba(67, 97, 238, 0.22);
  color: #2a3a6b;
}
.theme-light .token:hover { background: rgba(67, 97, 238, 0.16); color: #1a2a5c; }
.theme-light .token-active { background: #4361ee; color: #ffffff; border-color: transparent; }

/* Quiet/danger toolbar buttons readable on light */
.theme-light .toolbar-button-quiet,
.theme-light .toolbar-button.toolbar-button-danger { color: #46546f; }
.theme-light .toolbar-button-quiet:hover,
.theme-light .toolbar-button.toolbar-button-danger:hover {
  background: rgba(20, 30, 60, 0.06); color: #1a2a5c; border-color: rgba(67, 97, 238, 0.3);
}
.theme-light .toolbar-button-primary { background: #4361ee; color: #fff; }

/* Map: light stage; node labels/meta go dark (icon stays light on dark node body) */
.theme-light .network-stage { background: rgba(248, 250, 255, 0.6); }
.theme-light .node-label,
.theme-light svg text.node-label { fill: #1f2a44 !important; }
.theme-light .node-meta,
.theme-light svg text.node-meta { fill: #5a6781 !important; }
/* node-icon stays light — it sits on the dark node body */

/* Map dock + drawer close on light */
.theme-light .map-dock-btn {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(20, 30, 60, 0.14);
  color: #2a3a6b;
}
.theme-light .map-dock-btn.is-active { background: #4361ee; color: #fff; }

/* Meters / progress tracks */
.theme-light .meter { background: rgba(20, 30, 60, 0.08); }

/* Brand subtitle + kicker */
.theme-light .brand-block p,
.theme-light .landing-brand p { color: #5a6781; }

/* Score explainer (collapsed by default — concise, not "too much info"). */
.score-info {
  margin: 0 0 12px;
  border: 1px solid rgba(151, 169, 255, 0.18);
  border-radius: 12px;
  background: rgba(67, 97, 238, 0.06);
}
.score-info-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(206, 216, 255, 0.92);
  user-select: none;
}
.score-info-summary::-webkit-details-marker { display: none; }
.score-info-summary .material-symbols-outlined { font-size: 18px; color: #97a9ff; }
.score-info[open] .score-info-summary { color: #f6f6fc; }
.score-info-summary:hover { color: #f6f6fc; }
.score-info-body {
  margin: 0;
  padding: 0 12px 12px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(246, 246, 252, 0.82);
}
.score-info-body strong { color: #cfe0ff; }
.score-info-body em { font-style: normal; color: #9fe7c8; }
/* light theme */
.theme-light .score-info { background: rgba(67, 97, 238, 0.07); border-color: rgba(67, 97, 238, 0.22); }
.theme-light .score-info-summary { color: #2a3a6b; }
.theme-light .score-info[open] .score-info-summary,
.theme-light .score-info-summary:hover { color: #1a2a5c; }
.theme-light .score-info-body { color: #46546f; }
.theme-light .score-info-body strong { color: #2a3a6b; }
.theme-light .score-info-body em { color: #1b9c85; }

/* --- light theme: audit-driven contrast fixes --- */
/* Muted copy, empty states, summaries → readable. */
.theme-light .empty-note,
.theme-light #selected-node-copy,
.theme-light #report-summary,
.theme-light .selected-node-card p,
.theme-light .reflection-block p,
.theme-light .memo-section p { color: #46546f; }

/* Matrix radar + metric-bar labels/values. */
.theme-light .radar-label,
.theme-light .metric-bar header strong,
.theme-light .metric-bar header span,
.theme-light .metric-bars span,
.theme-light .metric-bars strong,
.theme-light .metric-chip { color: #1f2a44; }

/* Generic + secondary buttons + home advanced cards → dark text. */
.theme-light .toolbar-button,
.theme-light .secondary-action,
.theme-light .home-adv-item { color: #2a3a6b; }

/* Standalone accent icons read on white. */
.theme-light .home-adv-item .material-symbols-outlined,
.theme-light .density-toggle-btn .material-symbols-outlined,
.theme-light .map-lens-bar .material-symbols-outlined,
.theme-light .panel-expand-toggle .material-symbols-outlined { color: #4361ee; }

/* All map SVG text except the node-icon (which sits on the dark node body). */
.theme-light .network-stage svg text:not(.node-icon) { fill: #1f2a44 !important; }

/* IMPORTANT: keep white text/icons on accent (indigo) surfaces — must come last
   so it wins over the generic dark-text rules above. */
.theme-light .toolbar-button-primary,
.theme-light .toolbar-button-primary *,
.theme-light .token-active,
.theme-light .token-active *,
.theme-light .home-continue-cta,
.theme-light .home-continue-cta *,
.theme-light .nav-item.is-active,
.theme-light .map-dock-btn.is-active,
.theme-light .map-dock-btn.is-active * { color: #ffffff; }

/* ============================================================
   Professional detailed (자세히) mode — map-dominant, calmer panels, less prose.
   Goal: a focused work tool, not a dense dashboard. (Simple mode already uses the
   full-width map + drawers; these refine the 3-panel detailed layout.)
   ============================================================ */
/* Drop the onboarding prose entirely (intro paragraph, "how to read" sub-block,
   and the step-by-step workflow guide). It was the bulk of the "too much" feeling;
   the cleaner UI + the 튜토리얼 보기 button + the score explainer cover guidance. */
.view-intro { display: none; }
.concept-help { display: none; }
.workflow-guide { display: none; }
.student-onboarding { display: none; }

/* Quiet, professional section kickers (small-caps, muted) instead of loud labels. */
.insight-panel .eyebrow,
.canvas-panel .eyebrow,
.intake-panel .eyebrow,
.card-column .eyebrow,
.orbit-panel .eyebrow,
.reflection-panel .eyebrow {
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 2px;
  /* no opacity dimming — it dropped these kickers below WCAG AA. Use color. */
  color: rgba(196, 208, 248, 0.82);
}
.theme-light .insight-panel .eyebrow,
.theme-light .canvas-panel .eyebrow,
.theme-light .intake-panel .eyebrow,
.theme-light .card-column .eyebrow,
.theme-light .orbit-panel .eyebrow,
.theme-light .reflection-panel .eyebrow { color: #50607a; }
.insight-panel .section-header h3,
.insight-panel .subsection-head { font-size: 0.92rem; }

/* Section icons: a small leading glyph makes the panels scannable (professional). */
.section-header h3 .material-symbols-outlined,
.subsection-head .material-symbols-outlined,
.section-icon {
  font-size: 17px;
  color: #97a9ff;
  flex-shrink: 0;
}
/* Keep [icon][title] grouped on the left; push trailing badge/pill to the right. */
.subsection-head { justify-content: flex-start; gap: 7px; }
.subsection-head > .badge,
.subsection-head > .numeric-pill { margin-left: auto; }
.subsection-head .section-icon { margin-right: 1px; }
.theme-light .section-icon,
.theme-light .section-header h3 .material-symbols-outlined,
.theme-light .subsection-head .material-symbols-outlined { color: #4361ee; }

/* Give the dense insight panel a calm rhythm: hairline dividers between blocks. */
.insight-panel .subsection {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(128, 142, 178, 0.18);
}
.insight-panel .subsection:first-of-type { border-top: none; padding-top: 0; margin-top: 12px; }

/* Calmer on-map overlays (they float over the now-larger map). */
.stage-overlay { font-size: 0.78rem; opacity: 0.94; max-width: 230px; }
.stage-overlay .legend-desc { font-size: 0.72rem; }

/* Tighter intake panel so case tools don't crowd the map. */
.intake-panel .section-header h3 { font-size: 0.96rem; }
.intake-panel { padding: 16px; }

/* Light theme — detailed-only surfaces/controls the simple-mode audit didn't reach. */
.theme-light .pipeline-console,
.theme-light .pipeline-card,
.theme-light .pipeline-card-collapsible,
.theme-light .swarm-activity-panel,
.theme-light .ai-additions,
.theme-light .workflow-guide {
  background: rgba(255, 255, 255, 0.94);
  color: #1f2a44;
  border-color: rgba(20, 30, 60, 0.12);
}
.theme-light .intake-panel strong,
.theme-light .pipeline-console strong,
.theme-light .pipeline-console h4 { color: #1f2a44; }
.theme-light .case-summary-open,
.theme-light .case-summary-more,
.theme-light .panel-expand-toggle,
.theme-light .panel-expand-toggle *,
.theme-light .legend-close,
.theme-light .stage-note-close,
.theme-light .stage-note-reopen,
.theme-light .swarm-info-toggle,
.theme-light .drawer-close,
.theme-light .legend-reopen { color: #2a3a6b; }
.theme-light .score-info-summary .material-symbols-outlined { color: #4361ee; }
.theme-light .score-info-body em { color: #15795f; }
/* panel-collapse chips + overlay close glyphs were dark-on-dark in light theme */
.theme-light .panel-expand-toggle {
  background: #e9eefb !important;
  border-color: rgba(20, 30, 60, 0.16) !important;
}
.theme-light .panel-expand-toggle,
.theme-light .panel-expand-toggle *,
.theme-light .stage-overlay .material-symbols-outlined,
.theme-light .legend-close .material-symbols-outlined,
.theme-light .stage-note-close .material-symbols-outlined,
.theme-light .drawer-close .material-symbols-outlined,
.theme-light .view-intro-close { color: #2a3a6b !important; }

/* Home "더 깊이" advanced cards: legible label + icon in both themes. */
.home-adv-item { color: rgba(246, 246, 252, 0.92); background: rgba(255, 255, 255, 0.06); }
.home-adv-item .material-symbols-outlined { color: #c4ccff; }
.theme-light .home-adv-item { color: #2a3a6b; background: rgba(20, 30, 60, 0.05); }
.theme-light .home-adv-item .material-symbols-outlined { color: #34459c; }

/* swarm info toggle glyph (the ⓘ on the map footer) in light theme */
.theme-light .swarm-info-toggle .material-symbols-outlined { color: #2a3a6b !important; }

/* ============================================================
   Score number chips — hover/focus to see what the 0–100 number means
   (scale + direction). Used inside the stakeholder concern cards.
   ============================================================ */
.score-chip {
  position: relative;
  font-weight: 700;
  color: #97a9ff;
  border-bottom: 1px dotted currentColor;
  cursor: help;
  outline: none;
}
.theme-light .score-chip { color: #3551d4; }
.score-chip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 230px;
  padding: 8px 11px;
  border-radius: 9px;
  background: #11141e;
  color: #f6f6fc;
  border: 1px solid rgba(151, 169, 255, 0.35);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease;
  z-index: 60;
  pointer-events: none;
}
/* little arrow */
.score-chip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: #11141e;
  border-left: 1px solid rgba(151, 169, 255, 0.35);
  border-top: 1px solid rgba(151, 169, 255, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease;
  z-index: 61;
  pointer-events: none;
}
.score-chip:hover::after,
.score-chip:focus::after,
.score-chip:hover::before,
.score-chip:focus::before { opacity: 1; visibility: visible; }
/* don't let the bubble get clipped by the card */
.conflict-card { overflow: visible; }