/*
 * VARI Contemporary Institute - research surfaces
 * Visual-only override for Discovery, Projects, Observatory and Comparison.
 * Business state, copy, navigation and control semantics remain owned by each page.
 */

:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) {
  --vi-paper: #f2f3ee;
  --vi-surface: #fafbf8;
  --vi-raised: #ffffff;
  --vi-ink: #17211d;
  --vi-text: #293630;
  --vi-muted: #56635d;
  --vi-faint: #64716b;
  --vi-line: #d9deda;
  --vi-line-strong: #bcc7c1;
  --vi-green: #145a50;
  --vi-green-hover: #0f493f;
  --vi-green-soft: #e1ebe6;
  --vi-warn: #9b5a23;
  --vi-warn-soft: #f5e9db;
  --vi-danger: #a1433e;
  --vi-danger-soft: #f5e6e4;
  --vi-focus: #2e776b;
  --vi-radius: 6px;
  --vi-radius-large: 10px;
  --vi-shadow: 0 18px 46px rgba(31, 51, 43, .08);
  margin: 0;
  background: var(--vi-paper);
  color: var(--vi-ink);
  font-family: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) *,
:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) *::before,
:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) *::after {
  box-sizing: border-box;
}

:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) ::selection {
  background: #bad0c7;
  color: #10221c;
}

:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) :where(button, a, input, textarea, select, summary) {
  -webkit-tap-highlight-color: transparent;
}

:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) :where(button, input, textarea, select) {
  font: inherit;
}

:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) :where(button, a, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--vi-focus) !important;
  outline-offset: 2px;
}

:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) :where(button, input, textarea, select):disabled {
  cursor: not-allowed !important;
  filter: saturate(.4);
  opacity: .48 !important;
}

:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) :where(button, a) {
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
}

:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) button:active:not(:disabled) {
  transform: translateY(1px);
}

:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) :where(input, textarea, select) {
  border: 1px solid var(--vi-line-strong);
  border-radius: var(--vi-radius);
  background: var(--vi-raised);
  color: var(--vi-ink);
}

:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) :where(input, textarea)::placeholder {
  color: #59665f;
  opacity: 1;
}

:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) :where(.eyebrow, .section-title span, .executive span) {
  color: var(--vi-green);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) :where(.loading, .empty, .empty-state, .empty-panel) {
  color: var(--vi-muted);
  background: transparent;
}

:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) :where(.error, .error-state, [role="alert"]) {
  padding: 13px 15px;
  border: 1px solid #d8b7b3;
  border-radius: var(--vi-radius);
  background: var(--vi-danger-soft);
  color: #783631;
}

:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) .loading {
  position: relative;
  min-height: 68px;
  display: grid;
  place-items: center;
  padding: 24px;
}

:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) .loading::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 12px;
  left: 18px;
  height: 2px;
  overflow: hidden;
  background: linear-gradient(90deg, transparent 0 18%, var(--vi-green) 48% 54%, transparent 84%);
  background-size: 220% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  :is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) .loading::after {
    animation: vi-loading 1.35s ease-in-out infinite;
  }
}

@keyframes vi-loading {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) *,
  :is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) *::before,
  :is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Final research composition: flatten legacy promotional blocks. */
.vari-projects .project-hero {
  min-height: 250px !important; margin-top: 26px !important; padding: 42px 0 34px !important;
  border: 0 !important; border-bottom: 1px solid var(--vi-line) !important;
  border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
.vari-projects .project-hero .hero-grid { display: none !important; }
.vari-projects .project-hero h1 { max-width: 900px; font-size: clamp(42px, 4.5vw, 66px) !important; }
.vari-projects .workflow-map { border: 1px solid var(--vi-line) !important; border-radius: 0 !important; background: var(--vi-paper) !important; box-shadow: none !important; }
.vari-projects .portfolio-metrics {
  gap: 0 !important; margin: 0 0 24px !important; border-bottom: 1px solid var(--vi-line) !important;
}
.vari-projects .portfolio-metrics > * {
  min-height: 102px !important; padding: 20px !important; border: 0 !important;
  border-right: 1px solid var(--vi-line) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
}
.vari-projects .portfolio-metrics > *:last-child { border-right: 0 !important; }
.vari-projects .workspace-layout { border: 1px solid var(--vi-line) !important; border-radius: 0 !important; box-shadow: none !important; }
.vari-projects .project-sidebar, .vari-projects .project-stage { border-radius: 0 !important; box-shadow: none !important; }
.vari-projects .project-empty { min-height: 500px !important; border-radius: 0 !important; background: var(--vi-paper-muted) !important; }
.vari-projects .project-empty > span { color: var(--vi-green) !important; background: transparent !important; box-shadow: none !important; }

.vari-discovery .hero {
  min-height: 250px !important; margin: 26px auto 0 !important; padding: 42px 0 34px !important;
  border: 0 !important; border-bottom: 1px solid var(--vi-line) !important;
  border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
.vari-discovery .hero::before, .vari-discovery .hero::after { display: none !important; }
.vari-discovery .hero h1 { max-width: 820px; font-size: clamp(42px, 4.5vw, 66px) !important; }
.vari-discovery .hero .loop { border: 0 !important; border-top: 1px solid var(--vi-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.vari-discovery > main > .metrics {
  gap: 0 !important; border-bottom: 1px solid var(--vi-line) !important;
}
.vari-discovery > main > .metrics > * {
  min-height: 100px !important; padding: 20px !important; border: 0 !important;
  border-right: 1px solid var(--vi-line) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
}
.vari-discovery > main > .metrics > *:last-child { border-right: 0 !important; }

@media (max-width: 768px) {
  .vari-projects .project-hero, .vari-discovery .hero {
    min-height: auto !important; margin-top: 18px !important; padding: 30px 0 26px !important;
  }
  .vari-projects .project-hero h1, .vari-discovery .hero h1 { font-size: 39px !important; }
  .vari-projects .portfolio-metrics, .vari-discovery > main > .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .vari-projects .portfolio-metrics > *, .vari-discovery > main > .metrics > * {
    min-height: 92px !important; border-bottom: 1px solid var(--vi-line) !important;
  }
  .vari-projects .portfolio-metrics > *:nth-child(2n), .vari-discovery > main > .metrics > *:nth-child(2n) { border-right: 0 !important; }
}

/* Shared research navigation */
.vari-discovery .top,
.vari-projects .project-topbar,
.vari-observatory .obs-topbar,
.vari-comparison .compare-topbar {
  min-height: 68px;
  height: auto;
  border-bottom: 1px solid var(--vi-line);
  background: rgba(250, 251, 248, .96);
  color: var(--vi-ink);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.vari-projects .topbar-inner,
.vari-observatory .top-inner {
  width: min(1600px, calc(100% - 48px));
  gap: 28px;
}

.vari-discovery .brand,
.vari-projects .brand,
.vari-observatory .brand,
.vari-comparison .compare-brand {
  color: var(--vi-ink);
}

.vari-discovery .brand b,
.vari-projects .brand-mark,
.vari-observatory .brand > span,
.vari-comparison .compare-brand > span {
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--vi-green);
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -.05em;
}

.vari-projects .brand small,
.vari-observatory .brand small,
.vari-comparison .compare-brand small {
  color: var(--vi-muted);
  letter-spacing: .08em;
}

.vari-projects .project-topbar nav a,
.vari-observatory .obs-topbar nav a,
.vari-comparison .compare-topbar nav a {
  color: var(--vi-muted);
  font-size: 13px;
  font-weight: 600;
}

.vari-projects .project-topbar nav a:hover,
.vari-projects .project-topbar nav a.active,
.vari-observatory .obs-topbar nav a:hover,
.vari-observatory .obs-topbar nav a.active,
.vari-comparison .compare-topbar nav a:hover {
  color: var(--vi-green);
}

.vari-projects .project-topbar nav a.active::after,
.vari-observatory .obs-topbar nav a.active::after {
  right: 12px;
  left: 12px;
  bottom: 0;
  height: 2px;
  background: var(--vi-green);
}

/* Discovery: task index + evidence workspace */
.vari-discovery main {
  max-width: 1540px;
  padding: 30px 30px 72px;
}

.vari-discovery .hero {
  min-height: 0;
  padding: 42px 0 34px;
  border: 0;
  border-bottom: 1px solid var(--vi-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--vi-ink);
  box-shadow: none;
  overflow: visible;
}

.vari-discovery .hero::after { content: none; }

.vari-discovery .hero h1 {
  max-width: 820px;
  margin: 10px 0 12px;
  color: var(--vi-ink);
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.vari-discovery .hero p {
  max-width: 760px;
  margin: 0 0 22px;
  color: var(--vi-muted);
  font-size: 14px;
  line-height: 1.8;
}

.vari-discovery .primary,
.vari-observatory .primary,
.vari-projects .primary-btn,
.vari-comparison .compare-topbar button {
  border: 1px solid var(--vi-green) !important;
  border-radius: var(--vi-radius);
  background: var(--vi-green) !important;
  color: #f8fbf9 !important;
  box-shadow: none;
  font-weight: 700;
}

.vari-discovery .primary:hover,
.vari-observatory .primary:hover,
.vari-projects .primary-btn:hover,
.vari-comparison .compare-topbar button:hover {
  border-color: var(--vi-green-hover) !important;
  background: var(--vi-green-hover) !important;
}

.vari-discovery .loop {
  gap: 0;
  padding: 0 0 0 26px;
  border: 0;
  border-left: 1px solid var(--vi-line-strong);
  border-radius: 0;
  background: transparent;
}

.vari-discovery .loop b {
  padding: 8px 10px;
  border-radius: 0;
  background: transparent;
  color: var(--vi-text);
  font-size: 12px;
}

.vari-discovery .loop i { color: var(--vi-line-strong); }

.vari-discovery .metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 26px;
  border-bottom: 1px solid var(--vi-line-strong);
}

.vari-discovery .metric {
  min-width: 0;
  padding: 20px 18px 22px;
  border: 0;
  border-right: 1px solid var(--vi-line);
  border-radius: 0;
  background: transparent;
}

.vari-discovery .metric:first-child { padding-left: 0; }
.vari-discovery .metric:last-child { border-right: 0; }
.vari-discovery .metric b { font-size: 28px; font-variant-numeric: tabular-nums; }
.vari-discovery .metric span { color: var(--vi-muted); font-size: 12px; }

.vari-discovery .workspace {
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--vi-line-strong);
  border-radius: var(--vi-radius-large);
  background: var(--vi-surface);
  overflow: clip;
}

.vari-discovery .workspace > aside,
.vari-discovery .panel {
  border: 0;
  border-radius: 0;
  background: var(--vi-surface);
  box-shadow: none;
}

.vari-discovery .workspace > aside {
  border-right: 1px solid var(--vi-line-strong);
}

.vari-discovery .aside-head {
  min-height: 78px;
  padding: 17px 18px;
  align-items: center;
  border-bottom-color: var(--vi-line);
}

.vari-discovery .aside-head h2 { font-size: 18px; }
.vari-discovery .aside-head button {
  border: 1px solid var(--vi-line-strong);
  border-radius: var(--vi-radius);
  background: var(--vi-raised);
  color: var(--vi-green);
}

.vari-discovery .runs { padding: 8px; }
.vari-discovery .run {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0;
  padding: 13px 11px;
  border: 1px solid transparent;
  border-bottom-color: var(--vi-line);
  border-radius: var(--vi-radius);
}

.vari-discovery .run:hover,
.vari-discovery .run.active {
  border-color: var(--vi-line-strong);
  background: var(--vi-green-soft);
}

.vari-discovery .run-delete {
  border: 0;
  background: transparent;
  color: var(--vi-muted);
  font-size: 11px;
}

.vari-discovery .run-delete:hover { color: var(--vi-danger); }

.vari-discovery .panel {
  min-width: 0;
  min-height: 640px;
  padding: 26px 30px 40px;
}

.vari-discovery .detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 28px;
  align-items: start;
  padding-bottom: 22px;
}

.vari-discovery .detail-head h2 {
  margin: 6px 0 8px;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.vari-discovery .detail-head p { max-width: 74ch; color: var(--vi-muted); }
.vari-discovery .status {
  padding: 6px 9px;
  border: 1px solid #b8cdc4;
  border-radius: 999px;
  background: var(--vi-green-soft);
  color: var(--vi-green);
}

.vari-discovery .discovery-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vari-discovery .actions button,
.vari-discovery .discovery-actions button {
  padding: 8px 11px;
  border: 1px solid var(--vi-line-strong);
  border-radius: var(--vi-radius);
  background: var(--vi-raised);
  color: var(--vi-text);
}

.vari-discovery .discovery-actions .idea-jump {
  border-color: var(--vi-green);
  background: var(--vi-green);
  color: #fff;
}

.vari-discovery .discovery-actions .delete-action { color: var(--vi-danger); }

.vari-discovery .stages {
  gap: 0;
  margin: 20px 0 0;
  border: 1px solid var(--vi-line);
  border-width: 1px 0;
}

.vari-discovery .stage {
  position: relative;
  padding: 13px 8px;
  border-right: 1px solid var(--vi-line);
  border-radius: 0;
  background: transparent;
  color: var(--vi-muted);
}

.vari-discovery .stage:last-child { border-right: 0; }
.vari-discovery .stage.done {
  background: var(--vi-green-soft);
  color: var(--vi-green);
}

.vari-discovery .tabs {
  gap: 22px;
  overflow-x: auto;
  border-bottom-color: var(--vi-line-strong);
  scrollbar-width: thin;
}

.vari-discovery .tabs button {
  flex: 0 0 auto;
  padding: 14px 1px 11px;
  color: var(--vi-muted);
}

.vari-discovery .tabs button.active {
  border-bottom: 2px solid var(--vi-green);
  color: var(--vi-green);
}

.vari-discovery .direct-answer {
  margin: 22px 0 8px;
  padding: 20px 22px;
  border: 1px solid #b9ccc4;
  border-radius: var(--vi-radius);
  background: #edf3ef;
}

.vari-discovery .direct-answer :where(small, b, span) { display: block; }
.vari-discovery .direct-answer b { margin: 10px 0; font-size: 17px; line-height: 1.65; }
.vari-discovery .generation-mode { color: var(--vi-green); font-size: 11px; }
.vari-discovery .generation-mode.degraded { color: var(--vi-warn); }

.vari-discovery .tab { padding-top: 24px; }
.vari-discovery .cards { gap: 0; border-top: 1px solid var(--vi-line-strong); }
.vari-discovery .card {
  padding: 20px 18px;
  border: 0;
  border-bottom: 1px solid var(--vi-line);
  border-radius: 0;
  background: transparent;
}

.vari-discovery .card:nth-child(odd) { border-right: 1px solid var(--vi-line); }
.vari-discovery .card.idea { border-top: 0; }
.vari-discovery .badge,
.vari-observatory .badge {
  border-radius: 999px;
  background: #edf1ef;
  color: var(--vi-text);
}

.vari-discovery .badge.green { background: var(--vi-green-soft); color: var(--vi-green); }
.vari-discovery .badge.orange { background: var(--vi-warn-soft); color: var(--vi-warn); }
.vari-discovery .why { gap: 0; border: 1px solid var(--vi-line); }
.vari-discovery .why div {
  padding: 11px;
  border-right: 1px solid var(--vi-line);
  border-radius: 0;
  background: transparent;
}
.vari-discovery .why div:last-child { border-right: 0; }
.vari-discovery .why b { color: var(--vi-green); }
.vari-discovery .protocol { gap: 1px; border: 1px solid var(--vi-line); background: var(--vi-line); }
.vari-discovery .protocol div { border-radius: 0; background: var(--vi-raised); }
.vari-discovery .boundary,
.vari-discovery .gap {
  border: 0;
  border-left: 1px solid var(--vi-warn);
  border-radius: 0;
  background: var(--vi-warn-soft);
  color: #704218;
}

/* Projects: dense research operating system */
.vari-projects .project-shell {
  width: min(1600px, calc(100% - 48px));
  max-width: none;
  padding: 24px 0 72px;
}

.vari-projects .project-hero {
  min-height: 0;
  padding: 26px 0 28px;
  border: 0;
  border-bottom: 1px solid var(--vi-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--vi-ink);
  box-shadow: none;
}

.vari-projects .project-hero .hero-grid { display: none; }
.vari-projects .hero-copy h1 {
  max-width: 920px;
  margin: 8px 0;
  font-size: clamp(32px, 3.6vw, 54px);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.vari-projects .hero-copy p { max-width: 800px; color: var(--vi-muted); }
.vari-projects .ghost-btn,
.vari-projects .secondary-btn,
.vari-projects .panel button,
.vari-projects .tab-toolbar button {
  border: 1px solid var(--vi-line-strong);
  border-radius: var(--vi-radius);
  background: var(--vi-raised);
  color: var(--vi-text);
  box-shadow: none;
}

.vari-projects .workflow-map {
  border: 0;
  border-left: 1px solid var(--vi-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--vi-muted);
}
.vari-projects .workflow-map i { background: var(--vi-line-strong); }

.vari-projects .portfolio-metrics,
.vari-projects .project-metrics {
  gap: 0;
  border-bottom: 1px solid var(--vi-line-strong);
}

.vari-projects .portfolio-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  margin: 0 0 22px;
}

.vari-projects .portfolio-metrics article,
.vari-projects .project-metrics article {
  min-width: 0;
  padding: 15px 16px;
  border: 0;
  border-right: 1px solid var(--vi-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.vari-projects .portfolio-metrics article:first-child { padding-left: 0; }
.vari-projects .portfolio-metrics article:last-child,
.vari-projects .project-metrics article:last-child { border-right: 0; }
.vari-projects .portfolio-metrics article::before,
.vari-projects .project-metrics article::before { content: none; }
.vari-projects .portfolio-metrics b,
.vari-projects .project-metrics b { color: var(--vi-ink); font-variant-numeric: tabular-nums; }
.vari-projects .portfolio-metrics span,
.vari-projects .project-metrics span { color: var(--vi-muted); }

.vari-projects .workspace-layout {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--vi-line-strong);
  border-radius: var(--vi-radius-large);
  background: var(--vi-surface);
  overflow: clip;
}

.vari-projects .project-sidebar {
  border: 0;
  border-right: 1px solid var(--vi-line-strong);
  border-radius: 0;
  background: #f7f8f4;
  box-shadow: none;
}

.vari-projects .project-sidebar > header {
  padding: 16px;
  border-bottom: 1px solid var(--vi-line);
}
.vari-projects .project-sidebar > header h2 { font-size: 18px; }
.vari-projects .project-sidebar > header button {
  border: 1px solid var(--vi-line-strong);
  border-radius: var(--vi-radius);
  background: var(--vi-raised);
  color: var(--vi-green);
}
.vari-projects .project-filters { gap: 2px; padding: 8px; border-bottom: 1px solid var(--vi-line); }
.vari-projects .project-filters button {
  border-radius: 4px;
  color: var(--vi-muted);
}
.vari-projects .project-filters button.active { background: var(--vi-green-soft); color: var(--vi-green); }
.vari-projects .project-list { padding: 7px; }
.vari-projects .project-list > button {
  margin: 0;
  padding: 13px 11px;
  border: 1px solid transparent;
  border-bottom-color: var(--vi-line);
  border-radius: var(--vi-radius);
  background: transparent;
  box-shadow: none;
}
.vari-projects .project-list > button:hover,
.vari-projects .project-list > button.active {
  border-color: var(--vi-line-strong);
  background: var(--vi-green-soft);
  box-shadow: none;
}

.vari-projects .project-stage {
  min-width: 0;
  padding: 24px 28px 42px;
  border: 0;
  border-radius: 0;
  background: var(--vi-surface);
  box-shadow: none;
}

.vari-projects .project-empty { min-height: 560px; color: var(--vi-muted); }
.vari-projects .project-empty > span { color: var(--vi-green); }

.vari-projects .project-head {
  align-items: flex-start;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--vi-line-strong);
}
.vari-projects .project-head h2 {
  margin: 8px 0 4px;
  font-size: clamp(24px, 2.4vw, 36px);
  letter-spacing: -.025em;
}
.vari-projects .project-head p { max-width: 74ch; color: var(--vi-muted); }
.vari-projects .status-pill {
  border: 1px solid #b9ccc4;
  border-radius: 999px;
  background: var(--vi-green-soft);
  color: var(--vi-green);
}

.vari-projects .project-tabs {
  gap: 22px;
  overflow-x: auto;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--vi-line-strong);
  border-radius: 0;
  background: transparent;
  scrollbar-width: thin;
}
.vari-projects .project-tabs button {
  flex: 0 0 auto;
  padding: 14px 1px 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--vi-muted);
}
.vari-projects .project-tabs button.active {
  border-bottom-color: var(--vi-green);
  background: transparent;
  color: var(--vi-green);
  box-shadow: none;
}

.vari-projects .project-tab { padding-top: 22px; }
.vari-projects .research-command,
.vari-projects .collaboration-callout {
  padding: 20px 22px;
  border: 1px solid #b8cbc3;
  border-radius: var(--vi-radius);
  background: #eaf1ed;
  color: var(--vi-ink);
  box-shadow: none;
}
.vari-projects .research-command p,
.vari-projects .collaboration-callout p { color: var(--vi-muted); }
.vari-projects .today-actions { gap: 0; border-top: 1px solid var(--vi-line); }
.vari-projects .today-actions > * { border-radius: 0; box-shadow: none; }

.vari-projects :where(.panel, .agent-workbench, .phase3-panel, .phase4-panel, .phase56-workspace, .phase7-workspace, .phase2-candidate-panel, .phase2-graph-panel, .phase2-readiness) {
  border: 1px solid var(--vi-line);
  border-radius: var(--vi-radius);
  background: var(--vi-raised);
  box-shadow: none;
}

.vari-projects .panel::before,
.vari-projects .agent-workbench::before { content: none; }

.vari-projects .agent-workbench > div {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--vi-line);
}
.vari-projects .agent-workbench > div > button {
  min-width: 0;
  padding: 14px;
  border: 0;
  border-right: 1px solid var(--vi-line);
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.vari-projects .agent-workbench > div > button:last-child { border-right: 0; }
.vari-projects .agent-workbench > div > button:hover { background: var(--vi-green-soft); }

.vari-projects .overview-grid,
.vari-projects .phase3-lower-grid {
  gap: 12px;
}
.vari-projects .progress-ring {
  border-radius: 50%;
  background: conic-gradient(var(--vi-green) calc(var(--progress) * 1%), var(--vi-line) 0);
}
.vari-projects .progress-ring::after { background: var(--vi-raised); }
.vari-projects .progress-stages i,
.vari-projects .pipeline-row i { background: var(--vi-line); }

.vari-projects .tab-toolbar {
  align-items: flex-end;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--vi-line);
}
.vari-projects .tab-toolbar h3 { margin: 0 0 5px; font-size: 20px; }
.vari-projects .tab-toolbar p { max-width: 76ch; margin: 0; color: var(--vi-muted); }

.vari-projects .material-filters,
.vari-projects .phase3-filterbar,
.vari-projects .phase56-generator,
.vari-projects .phase7-novelty {
  border: 1px solid var(--vi-line);
  border-radius: var(--vi-radius);
  background: #f6f8f5;
  box-shadow: none;
}

.vari-projects :where(.material-row, .evidence-row, .candidate, .artifact-card) {
  border: 0;
  border-bottom: 1px solid var(--vi-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.vari-projects :where(.material-row, .evidence-row):hover { background: #f4f7f4; }
.vari-projects .material-table,
.vari-projects .evidence-table,
.vari-projects .artifact-list {
  border: 1px solid var(--vi-line-strong);
  border-radius: var(--vi-radius);
  background: var(--vi-raised);
  overflow: hidden;
}

.vari-projects .task-board { gap: 1px; border: 1px solid var(--vi-line); background: var(--vi-line); }
.vari-projects .task-column { border: 0; border-radius: 0; background: var(--vi-surface); }
.vari-projects .task-card { border: 1px solid var(--vi-line); border-radius: var(--vi-radius); box-shadow: none; }

.vari-projects .output-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--vi-line);
  background: var(--vi-line);
}
.vari-projects .output-actions > * {
  border: 0;
  border-radius: 0;
  background: var(--vi-raised);
  box-shadow: none;
}

.vari-projects .menu-panel {
  border: 1px solid var(--vi-line-strong);
  border-radius: var(--vi-radius);
  background: var(--vi-raised);
  box-shadow: var(--vi-shadow);
}

/* Observatory: editorial evidence operations */
.vari-observatory .obs-shell {
  width: min(1540px, calc(100% - 48px));
  padding: 28px 0 72px;
}

.vari-observatory .hero {
  min-height: 0;
  padding: 36px 0 30px;
  border: 0;
  border-bottom: 1px solid var(--vi-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--vi-ink);
  box-shadow: none;
}
.vari-observatory .hero::before { content: none; }
.vari-observatory .hero h1 {
  margin: 10px 0;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.1;
  letter-spacing: -.035em;
}
.vari-observatory .hero p { max-width: 810px; color: var(--vi-muted); font-size: 14px; }
.vari-observatory .hero-flow {
  padding: 0 0 0 24px;
  border: 0;
  border-left: 1px solid var(--vi-line-strong);
  border-radius: 0;
  background: transparent;
}
.vari-observatory .hero-flow span { border-radius: 0; background: transparent; color: var(--vi-text); }
.vari-observatory .hero-flow i { color: var(--vi-line-strong); }

.vari-observatory .metrics {
  gap: 0;
  margin: 0;
  border-bottom: 1px solid var(--vi-line-strong);
}
.vari-observatory .metric {
  min-width: 0;
  padding: 18px;
  border: 0;
  border-right: 1px solid var(--vi-line);
  border-radius: 0;
  background: transparent;
}
.vari-observatory .metric::before { content: none; }
.vari-observatory .metric:first-child { padding-left: 0; }
.vari-observatory .metric:last-child { border-right: 0; }
.vari-observatory .metric b { font-variant-numeric: tabular-nums; }

.vari-observatory .module-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 22px 0 0;
  border: 1px solid var(--vi-line-strong);
  border-bottom: 0;
}
.vari-observatory .module-tabs button {
  padding: 15px 16px;
  border: 0;
  border-right: 1px solid var(--vi-line);
  border-radius: 0;
  background: #f7f8f5;
}
.vari-observatory .module-tabs button:last-child { border-right: 0; }
.vari-observatory .module-tabs button.active {
  border-color: var(--vi-green);
  background: var(--vi-green);
  color: #fff;
  box-shadow: none;
}
.vari-observatory .module-tabs button.active small { color: #d5e4de; }

.vari-observatory .module-panel {
  padding: 24px;
  border: 1px solid var(--vi-line-strong);
  border-radius: 0 0 var(--vi-radius-large) var(--vi-radius-large);
  background: var(--vi-surface);
  box-shadow: none;
}
.vari-observatory .panel-head { align-items: flex-end; padding-bottom: 18px; border-bottom: 1px solid var(--vi-line); }
.vari-observatory .panel-head h2 { color: var(--vi-ink); }
.vari-observatory .panel-head p { color: var(--vi-muted); font-size: 12px; }
.vari-observatory .panel-head button,
.vari-observatory .toolbar button,
.vari-observatory .surface button,
.vari-observatory .link-button {
  border-color: var(--vi-line-strong);
  border-radius: var(--vi-radius);
  background: var(--vi-raised);
  color: var(--vi-text);
}

.vari-observatory .toolbar {
  padding: 12px 0 16px;
  border: 0;
  border-bottom: 1px solid var(--vi-line);
  border-radius: 0;
  background: transparent;
}
.vari-observatory .toolbar input,
.vari-observatory .toolbar select { border-radius: var(--vi-radius); background: var(--vi-raised); }

.vari-observatory .split-layout,
.vari-observatory .graph-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
  gap: 0;
  border: 1px solid var(--vi-line-strong);
  border-radius: var(--vi-radius);
  overflow: clip;
}
.vari-observatory .repo-list {
  grid-template-columns: 1fr;
  gap: 0;
  border-right: 1px solid var(--vi-line-strong);
  background: var(--vi-raised);
}
.vari-observatory .repo-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  gap: 6px 14px;
  align-items: center;
  width: 100%;
  padding: 15px 16px;
  border: 0;
  border-bottom: 1px solid var(--vi-line);
  border-radius: 0;
  background: transparent;
  color: var(--vi-ink);
  text-align: left;
}
.vari-observatory .repo-row:hover,
.vari-observatory .repo-row.active { background: var(--vi-green-soft); }
.vari-observatory .repo-row b { min-width: 0; overflow-wrap: anywhere; }
.vari-observatory .repo-row small { grid-column: 2; color: var(--vi-muted); }
.vari-observatory .repo-row > strong { grid-column: 3; grid-row: 1 / 3; font-variant-numeric: tabular-nums; }
.vari-observatory .repo-grade { border-radius: 999px; background: #edf1ef; color: var(--vi-text); }

.vari-observatory .detail-panel {
  top: 84px;
  padding: 20px;
  border: 0;
  border-radius: 0;
  background: #f8f9f6;
  box-shadow: none;
}
.vari-observatory .detail-title { display: grid; grid-template-columns: 1fr auto; }
.vari-observatory .detail-title .repo-grade { grid-column: 1 / -1; justify-self: start; }
.vari-observatory .score-hero { border-radius: 0; border-bottom: 1px solid var(--vi-line); background: transparent; }
.vari-observatory .score-row i { background: var(--vi-line); }
.vari-observatory .score-row i em { background: var(--vi-green); }
.vari-observatory .evidence-grid { gap: 1px; border: 1px solid var(--vi-line); background: var(--vi-line); }
.vari-observatory .evidence-grid > * { padding: 11px; border: 0; border-radius: 0; background: var(--vi-raised); }

.vari-observatory .graph-stage {
  border-radius: 0;
  background: #172a24;
}
.vari-observatory .graph-stage::before { opacity: .22; }
.vari-observatory .graph-node { border-radius: var(--vi-radius); box-shadow: none; }

.vari-observatory .community-grid { gap: 12px; }
.vari-observatory :where(.surface, .repo-card, .change-card, .mini-card) {
  border-color: var(--vi-line);
  border-radius: var(--vi-radius);
  background: var(--vi-raised);
  box-shadow: none;
}
.vari-observatory .card-grid { gap: 0; border: 1px solid var(--vi-line); }
.vari-observatory .mini-card { border-width: 0 1px 0 0; border-radius: 0; }

/* Comparison: long-form evidence dossier */
.vari-comparison .compare-topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  padding: 0 32px;
}
.vari-comparison .compare-topbar nav { gap: 22px; }
.vari-comparison .compare-shell {
  grid-template-columns: 270px minmax(0, 1fr);
  max-width: 1720px;
  min-height: calc(100vh - 68px);
}
.vari-comparison .report-sidebar {
  position: sticky;
  top: 68px;
  align-self: start;
  height: calc(100vh - 68px);
  overflow-y: auto;
  padding: 26px 16px;
  border-right: 1px solid var(--vi-line-strong);
  background: #f5f7f3;
}
.vari-comparison .report-sidebar header { padding: 0 8px 18px; }
.vari-comparison .report-sidebar h1 { color: var(--vi-ink); font-size: 21px; }
.vari-comparison .report-sidebar p { color: var(--vi-muted); }
.vari-comparison .report-list { gap: 0; }
.vari-comparison .report-list button {
  padding: 13px 11px;
  border: 1px solid transparent;
  border-bottom-color: var(--vi-line);
  border-radius: var(--vi-radius);
  background: transparent;
}
.vari-comparison .report-list button:hover,
.vari-comparison .report-list button.active {
  border-color: var(--vi-line-strong);
  background: var(--vi-green-soft);
  box-shadow: none;
}
.vari-comparison .report-list span { color: var(--vi-green); }
.vari-comparison .report-list small { color: var(--vi-muted); }

.vari-comparison .report-stage { min-width: 0; padding: 38px clamp(24px, 5vw, 76px) 90px; }
.vari-comparison .compare-welcome { max-width: 1100px; margin: 54px auto; }
.vari-comparison .compare-welcome h1 {
  max-width: 820px;
  margin: 10px 0 14px;
  font-size: clamp(38px, 4.2vw, 64px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.vari-comparison .compare-welcome > p { color: var(--vi-muted); font-size: 14px; }
.vari-comparison .capability-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 44px;
  border: 1px solid var(--vi-line-strong);
}
.vari-comparison .capability-grid article {
  padding: 22px 18px;
  border: 0;
  border-right: 1px solid var(--vi-line);
  border-radius: 0;
  background: transparent;
}
.vari-comparison .capability-grid article:last-child { border-right: 0; }
.vari-comparison .capability-grid b { color: var(--vi-green); font-variant-numeric: tabular-nums; }
.vari-comparison .capability-grid p { color: var(--vi-muted); }

.vari-comparison .deep-report {
  max-width: 1120px;
  gap: 0;
  margin: 0 auto;
  background: var(--vi-raised);
  box-shadow: 0 24px 64px rgba(40, 54, 48, .08);
}
.vari-comparison .report-titlebar,
.vari-comparison .deep-report > section {
  padding: clamp(24px, 4vw, 48px);
  border: 0;
  border-bottom: 1px solid var(--vi-line-strong);
  border-radius: 0;
  background: var(--vi-raised);
}
.vari-comparison .report-titlebar { align-items: flex-start; }
.vari-comparison #reportTitle {
  display: block;
  width: min(760px, 62vw);
  min-height: 2.6em;
  margin-top: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--vi-ink);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.025em;
  resize: vertical;
}
.vari-comparison .report-titlebar p { color: var(--vi-muted); }
.vari-comparison .report-actions { flex-wrap: wrap; justify-content: flex-end; }
.vari-comparison .report-actions button {
  border-color: var(--vi-line-strong);
  border-radius: var(--vi-radius);
  color: var(--vi-text);
}
.vari-comparison .report-actions .danger { color: var(--vi-danger); }

.vari-comparison .executive {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  background: #e5eee9 !important;
  color: var(--vi-ink) !important;
}
.vari-comparison .executive p { max-width: 75ch; color: var(--vi-text); font-size: 15px; line-height: 1.85; }
.vari-comparison .executive strong { border: 1px solid #b6c9c0; border-radius: 999px; }
.vari-comparison .executive strong.high { background: #dbeae2; color: var(--vi-green); }
.vari-comparison .executive strong.medium { background: var(--vi-warn-soft); color: var(--vi-warn); }
.vari-comparison .executive strong.low { background: var(--vi-danger-soft); color: var(--vi-danger); }

.vari-comparison .section-title { margin-bottom: 22px; }
.vari-comparison .section-title h2 { margin-top: 7px; font-size: 23px; letter-spacing: -.02em; }
.vari-comparison .profile-grid { gap: 1px; border: 1px solid var(--vi-line); background: var(--vi-line); }
.vari-comparison .profile-grid article { padding: 22px; border: 0; border-radius: 0; background: var(--vi-raised); }
.vari-comparison .profile-grid header { color: var(--vi-green); }
.vari-comparison .profile-grid dl { font-size: 12px; line-height: 1.7; }

.vari-comparison .matrix-wrap { border-color: var(--vi-line-strong); border-radius: var(--vi-radius); }
.vari-comparison .matrix-wrap table { min-width: 680px; color: var(--vi-text); font-size: 11px; }
.vari-comparison .matrix-wrap th,
.vari-comparison .matrix-wrap td { border-color: var(--vi-line); padding: 12px 10px; }
.vari-comparison .matrix-wrap thead th { background: #23352e; color: #f4f7f4; }
.vari-comparison .matrix-wrap tbody th { background: #f3f5f1; }
.vari-comparison .matrix-wrap .yes { background: #edf4ef; color: var(--vi-green); }
.vari-comparison .matrix-wrap .no { background: #faf3f1; color: var(--vi-danger); }
.vari-comparison .matrix-wrap .score td { color: var(--vi-green); }

.vari-comparison .analysis-grid {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--vi-line-strong) !important;
}
.vari-comparison .analysis-grid > div {
  padding: clamp(24px, 4vw, 48px);
  border: 0;
  border-right: 1px solid var(--vi-line-strong);
  border-radius: 0;
  background: var(--vi-raised);
}
.vari-comparison .analysis-grid > div:last-child { border-right: 0; }
.vari-comparison .analysis-grid ul,
.vari-comparison .gaps ul { color: var(--vi-text); font-size: 13px; line-height: 1.85; }
.vari-comparison .decision-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--vi-line); }
.vari-comparison .decision-grid article {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--vi-line);
  border-radius: 0;
}
.vari-comparison .decision-grid b {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--vi-green);
  font-family: "IBM Plex Mono", Consolas, monospace;
}
.vari-comparison .decision-grid p { font-size: 13px; }
.vari-comparison .gaps {
  border-left: 0 !important;
  background: #faf5ef !important;
}

/* Dialogs and transient feedback */
:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) dialog {
  max-height: min(88vh, 900px);
  border: 1px solid var(--vi-line-strong);
  border-radius: var(--vi-radius-large);
  background: var(--vi-raised);
  color: var(--vi-ink);
  box-shadow: 0 30px 90px rgba(22, 36, 30, .24);
}
:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) dialog::backdrop {
  background: rgba(18, 31, 26, .58);
  backdrop-filter: blur(2px);
}
:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) dialog :where(input, textarea, select) {
  border-radius: var(--vi-radius);
}
:is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) :where(#toast, .toast) {
  border: 1px solid #42645a;
  border-radius: var(--vi-radius);
  background: #1d302a;
  color: #f5f8f6;
  box-shadow: var(--vi-shadow);
}

/* Tablet */
@media (max-width: 1100px) {
  .vari-projects .topbar-inner,
  .vari-observatory .top-inner { width: calc(100% - 28px); }

  .vari-projects .project-topbar nav,
  .vari-observatory .obs-topbar nav { justify-content: flex-start; overflow-x: auto; }

  .vari-discovery .hero,
  .vari-projects .project-hero,
  .vari-observatory .hero { align-items: flex-start; flex-direction: column; }

  .vari-discovery .loop,
  .vari-projects .workflow-map,
  .vari-observatory .hero-flow {
    width: 100%;
    padding: 14px 0 0;
    border-top: 1px solid var(--vi-line);
    border-left: 0;
    overflow-x: auto;
  }

  .vari-projects .portfolio-metrics { grid-template-columns: repeat(3, 1fr) !important; }
  .vari-projects .portfolio-metrics article:nth-child(3) { border-right: 0; }
  .vari-projects .agent-workbench > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vari-projects .agent-workbench > div > button:nth-child(2n) { border-right: 0; }
  .vari-projects .agent-workbench > div > button { border-bottom: 1px solid var(--vi-line); }
  .vari-projects .output-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .vari-observatory .metrics { grid-template-columns: repeat(3, 1fr); }
  .vari-observatory .metric:nth-child(3) { border-right: 0; }
  .vari-observatory .split-layout,
  .vari-observatory .graph-layout { grid-template-columns: 1fr; }
  .vari-observatory .repo-list { border-right: 0; border-bottom: 1px solid var(--vi-line-strong); }
  .vari-observatory .detail-panel { position: static; max-height: none; }

  .vari-comparison .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .vari-comparison .capability-grid article:nth-child(2) { border-right: 0; }
  .vari-comparison .capability-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--vi-line); }
  .vari-comparison .report-titlebar { gap: 18px; flex-direction: column; }
  .vari-comparison #reportTitle { width: 100%; }
}

/* Compact tablet and mobile */
@media (max-width: 768px) {
  :is(.vari-discovery, .vari-projects, .vari-observatory, .vari-comparison) { font-size: 13px; }

  .vari-discovery .top,
  .vari-projects .project-topbar,
  .vari-observatory .obs-topbar,
  .vari-comparison .compare-topbar { min-height: 60px; }

  .vari-discovery main,
  .vari-projects .project-shell,
  .vari-observatory .obs-shell {
    width: auto;
    max-width: none;
    padding: 18px 14px 56px;
  }

  .vari-discovery .top { padding: 0 14px; }
  .vari-discovery .brand { min-width: 0; }
  .vari-discovery .brand span { display: none; }
  .vari-discovery .top nav { min-width: 0; overflow-x: auto; }

  .vari-projects .topbar-inner,
  .vari-observatory .top-inner { width: calc(100% - 24px); gap: 14px; }
  .vari-projects .brand small,
  .vari-observatory .brand small { display: none; }
  .vari-projects .project-topbar nav,
  .vari-observatory .obs-topbar nav { order: 3; flex-basis: 100%; height: 38px; }
  .vari-projects .topbar-inner,
  .vari-observatory .top-inner { flex-wrap: wrap; padding-top: 8px; }
  .vari-projects .project-topbar,
  .vari-observatory .obs-topbar { position: relative; }
  .vari-projects .project-topbar nav a,
  .vari-observatory .obs-topbar nav a { flex: 0 0 auto; padding: 0 10px; }
  .vari-projects #createProjectTop { margin-left: auto; }

  .vari-discovery .hero,
  .vari-projects .project-hero,
  .vari-observatory .hero { padding: 24px 0; }

  .vari-discovery .metrics,
  .vari-observatory .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vari-discovery .metric,
  .vari-observatory .metric { padding: 14px 10px; border-bottom: 1px solid var(--vi-line); }
  .vari-discovery .metric:nth-child(2n),
  .vari-observatory .metric:nth-child(2n) { border-right: 0; }

  .vari-discovery .workspace,
  .vari-projects .workspace-layout { grid-template-columns: 1fr; overflow: visible; }
  .vari-discovery .workspace > aside,
  .vari-projects .project-sidebar {
    max-height: 320px;
    overflow: auto;
    border-right: 0;
    border-bottom: 1px solid var(--vi-line-strong);
  }
  .vari-discovery .panel,
  .vari-projects .project-stage { padding: 20px 16px 32px; }
  .vari-discovery .detail-head,
  .vari-projects .project-head { grid-template-columns: 1fr; flex-direction: column; }
  .vari-discovery .stages { grid-template-columns: repeat(5, minmax(108px, 1fr)); overflow-x: auto; }
  .vari-discovery .cards,
  .vari-discovery .protocol { grid-template-columns: 1fr; }
  .vari-discovery .card:nth-child(odd) { border-right: 0; }
  .vari-discovery .why { grid-template-columns: 1fr; }
  .vari-discovery .why div { border-right: 0; border-bottom: 1px solid var(--vi-line); }

  .vari-projects .portfolio-metrics { grid-template-columns: repeat(2, 1fr) !important; }
  .vari-projects .portfolio-metrics article:nth-child(3) { border-right: 1px solid var(--vi-line); }
  .vari-projects .portfolio-metrics article:nth-child(2n) { border-right: 0; }
  .vari-projects .portfolio-metrics article { border-bottom: 1px solid var(--vi-line); }
  .vari-projects .project-metrics { grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .vari-projects .project-metrics article { border-bottom: 1px solid var(--vi-line); }
  .vari-projects .project-metrics article:nth-child(3n) { border-right: 0; }
  .vari-projects .tab-toolbar { align-items: flex-start; flex-direction: column; }
  .vari-projects .tab-toolbar > div:last-child { display: flex; gap: 6px; flex-wrap: wrap; }
  .vari-projects .overview-grid,
  .vari-projects .overview-grid.lower,
  .vari-projects .phase3-lower-grid { grid-template-columns: 1fr; }
  .vari-projects .agent-workbench > div,
  .vari-projects .output-actions { grid-template-columns: 1fr; }
  .vari-projects .agent-workbench > div > button { border-right: 0; }
  .vari-projects .task-board { grid-template-columns: 1fr; }
  .vari-projects .material-row,
  .vari-projects .evidence-row { grid-template-columns: 1fr; }

  .vari-observatory .module-tabs { display: flex; overflow-x: auto; }
  .vari-observatory .module-tabs button { flex: 0 0 210px; }
  .vari-observatory .module-panel { padding: 18px 14px; }
  .vari-observatory .panel-head { align-items: flex-start; flex-direction: column; }
  .vari-observatory .head-actions { flex-wrap: wrap; }
  .vari-observatory .toolbar { align-items: stretch; flex-direction: column; }
  .vari-observatory .repo-row { grid-template-columns: 78px minmax(0, 1fr); }
  .vari-observatory .repo-row > strong { grid-column: 2; grid-row: 3; justify-self: start; }
  .vari-observatory .community-grid,
  .vari-observatory .card-grid { grid-template-columns: 1fr; }

  .vari-comparison .compare-topbar { position: relative; padding: 10px 14px; flex-wrap: wrap; gap: 10px; }
  .vari-comparison .compare-topbar nav { width: 100%; gap: 14px; overflow-x: auto; }
  .vari-comparison .compare-topbar nav > * { flex: 0 0 auto; }
  .vari-comparison .compare-shell { grid-template-columns: 1fr; }
  .vari-comparison .report-sidebar {
    position: static;
    height: auto;
    max-height: 300px;
    border-right: 0;
    border-bottom: 1px solid var(--vi-line-strong);
  }
  .vari-comparison .report-list { grid-template-columns: 1fr 1fr; }
  .vari-comparison .report-stage { padding: 28px 14px 60px; }
  .vari-comparison .compare-welcome { margin: 20px auto; }
  .vari-comparison .analysis-grid,
  .vari-comparison .profile-grid,
  .vari-comparison .executive { grid-template-columns: 1fr; }
  .vari-comparison .analysis-grid > div { border-right: 0; border-bottom: 1px solid var(--vi-line); }
  .vari-comparison .analysis-grid > div:last-child { border-bottom: 0; }
  .vari-comparison .report-titlebar,
  .vari-comparison .deep-report > section,
  .vari-comparison .analysis-grid > div { padding: 24px 18px; }
}

@media (max-width: 430px) {
  .vari-discovery .hero h1,
  .vari-projects .hero-copy h1,
  .vari-observatory .hero h1,
  .vari-comparison .compare-welcome h1 { font-size: 32px; }

  .vari-discovery .metrics,
  .vari-observatory .metrics,
  .vari-projects .portfolio-metrics,
  .vari-projects .project-metrics { grid-template-columns: 1fr !important; }
  .vari-discovery .metric,
  .vari-observatory .metric,
  .vari-projects .portfolio-metrics article,
  .vari-projects .project-metrics article { border-right: 0 !important; }

  .vari-projects #createProjectTop { padding: 8px 10px; font-size: 11px; }
  .vari-projects .project-head-actions,
  .vari-projects .research-command > div:last-child,
  .vari-projects .collaboration-callout > div:last-child { display: flex; width: 100%; flex-wrap: wrap; }

  .vari-observatory .evidence-grid { grid-template-columns: 1fr; }
  .vari-observatory .graph-stage { min-height: 480px; }

  .vari-comparison .compare-brand small { display: none; }
  .vari-comparison .report-list { grid-template-columns: 1fr; }
  .vari-comparison .capability-grid { grid-template-columns: 1fr; }
  .vari-comparison .capability-grid article { border-right: 0; border-bottom: 1px solid var(--vi-line); }
  .vari-comparison .report-actions { justify-content: flex-start; }
}

/* Authoritative close: vari-light.css uses body-qualified !important rules. */
body.vari-projects .project-hero,
body.vari-discovery .hero {
  min-height: 0 !important;
  margin-top: 26px !important;
  padding: 42px 0 34px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--vi-line-strong) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.vari-projects .project-hero .hero-grid,
body.vari-discovery .hero::before,
body.vari-discovery .hero::after { display: none !important; }

body.vari-projects .workflow-map,
body.vari-discovery .hero .loop {
  border: 0 !important;
  border-top: 1px solid var(--vi-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.vari-projects .portfolio-metrics,
body.vari-discovery .metrics {
  gap: 0 !important;
  border-bottom: 1px solid var(--vi-line-strong) !important;
}

body.vari-projects .portfolio-metrics > *,
body.vari-discovery .metrics > * {
  min-height: 102px !important;
  padding: 20px !important;
  border: 0 !important;
  border-right: 1px solid var(--vi-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.vari-projects .portfolio-metrics > *:last-child,
body.vari-discovery .metrics > *:last-child { border-right: 0 !important; }

body.vari-projects .workspace-layout,
body.vari-projects .project-sidebar,
body.vari-projects .project-stage,
body.vari-discovery .workspace,
body.vari-discovery .workspace > aside,
body.vari-discovery .workspace > .panel {
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body.vari-projects header.project-topbar .brand > .brand-mark,
html body.vari-observatory header.obs-topbar .brand > span,
html body.vari-comparison header.compare-topbar .compare-brand > span {
  width: 76px !important;
  min-width: 76px !important;
  height: 34px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

html body.vari-projects header.project-topbar .brand > .brand-mark::after,
html body.vari-observatory header.obs-topbar .brand > span::after,
html body.vari-comparison header.compare-topbar .compare-brand > span::after {
  content: "VARI" !important;
  display: block !important;
  color: var(--vi-green) !important;
  background: none !important;
  font: 900 27px/1 var(--vi-font) !important;
  letter-spacing: -.045em !important;
  text-shadow: none !important;
}

@media (max-width: 768px) {
  body.vari-projects .project-hero,
  body.vari-discovery .hero {
    margin-top: 18px !important;
    padding: 30px 0 26px !important;
  }

  body.vari-projects .portfolio-metrics,
  body.vari-discovery .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  body.vari-projects .portfolio-metrics > *:nth-child(2n),
  body.vari-discovery .metrics > *:nth-child(2n) { border-right: 0 !important; }
}