@import url("/visual-lab-21.css");

.vl22-platform {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
  gap: 18px;
  align-items: start;
}

.vl22-platform-copy,
.vl22-platform-board,
.vl22-core-workflow article {
  border: 1px solid var(--vl21-line);
  border-radius: var(--vl21-radius-xl);
  background: linear-gradient(180deg, color-mix(in srgb, var(--vl21-panel) 96%, transparent) 0%, color-mix(in srgb, var(--vl21-panel-soft) 98%, transparent) 100%);
  box-shadow: var(--vl21-shadow);
}

.vl22-platform-copy {
  padding: 26px;
}

.vl22-platform-copy h1 {
  margin: 8px 0 4px;
  font-family: "NVIDIA Sans", "NVIDIA Sans Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: normal;
}

.vl22-platform-subtitle {
  max-width: 58ch;
  margin: 16px 0 0;
  color: color-mix(in srgb, var(--vl21-ink) 82%, var(--vl21-ink-soft));
  font-size: 1.02rem;
  line-height: 1.72;
}

.vl22-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.vl22-filter-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.35rem 0.68rem;
  border: 1px solid var(--vl21-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--vl21-panel) 72%, transparent);
  color: var(--vl21-ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vl22-filter-pill.is-active {
  color: var(--vl21-accent);
  border-color: color-mix(in srgb, var(--vl21-accent) 30%, transparent);
  background: color-mix(in srgb, var(--vl21-accent) 12%, transparent);
}

.vl22-filter-pill:hover {
  border-color: color-mix(in srgb, var(--vl21-accent) 26%, transparent);
  color: var(--vl21-ink);
  transform: translateY(-1px);
}

.vl22-filter-note {
  margin: 16px 0 0;
  color: var(--vl21-ink-soft);
  font-size: 0.84rem;
  line-height: 1.6;
}

.vl22-filter-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 12px;
}

.vl22-filter-clear {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.38rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--vl21-accent) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--vl21-panel) 72%, transparent);
  color: var(--vl21-ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.vl22-filter-clear:hover {
  color: var(--vl21-ink);
  border-color: var(--vl21-accent);
  transform: translateY(-1px);
}

.vl22-proof-grid,
.vl22-core-workflow {
  display: grid;
  gap: 14px;
}

.vl22-proof-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
}

.vl22-proof-grid article,
.vl22-board-stack article,
.vl22-core-workflow article {
  padding: 18px;
}

.vl22-proof-grid article {
  border: 1px solid var(--vl21-line);
  border-radius: var(--vl21-radius-lg);
  background: color-mix(in srgb, var(--vl21-panel) 76%, transparent);
}

.vl22-proof-grid p,
.vl22-board-stack p,
.vl22-core-workflow p {
  margin: 10px 0 0;
  color: var(--vl21-ink-soft);
  line-height: 1.68;
}

.vl22-platform-board {
  padding: 20px;
}

.vl22-board-head strong {
  display: block;
  margin-top: 8px;
  font-size: 1.06rem;
  max-width: 22ch;
}

.vl22-board-stack {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.vl22-board-stack article {
  border: 1px solid color-mix(in srgb, var(--vl21-line) 72%, transparent);
  border-radius: var(--vl21-radius-lg);
  background: color-mix(in srgb, var(--vl21-panel) 64%, transparent);
}

.vl22-board-stack strong {
  display: block;
  color: var(--vl21-ink);
  font-size: 0.95rem;
  font-weight: 700;
}

.vl22-board-stack p {
  margin-top: 6px;
}

.vl22-core-workflow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vl22-core-workflow article strong {
  display: block;
  margin-top: 8px;
  font-size: 1rem;
}

.vl21-shell {
  grid-template-columns: 290px minmax(0, 1fr);
  transition: grid-template-columns 180ms ease;
}

.vl21-shell.is-filters-collapsed {
  grid-template-columns: 64px minmax(0, 1fr);
}

.vl21-shell.is-filters-collapsed .vl21-catalog {
  width: 100%;
}

.vl21-catalog {
  min-width: 0;
}

.vl21-card-grid {
  --text-strong: #ffffff;
  --text-soft: #8693ab;
  --text-muted: #a9b5cc;
  --panel-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
  --panel-border: #344056;
  --input-focus: #ffbf75;
  --chip-background: #122234;
  --chip-border: #2d4668;
  --card-background: #20293b;
  --card-border: #344056;
  --card-border-hover: #495770;
  --score-background: linear-gradient(180deg, #2b3345 0%, #21293a 100%);
  --score-text: #f5c98a;
  --score-high-background: #0f2c1d;
  --score-high-text: #8cf3c3;
  --score-mid-background: #2a2418;
  --score-mid-text: #f7c98d;
  --pill-background: #263145;
  --pill-text: #edf3ff;
  --pill-good-text: #e7f2b5;
  --pill-good-background: #324028;
  --pill-ok-text: #f3dbb4;
  --pill-ok-background: #3d311f;
  --pill-low-text: #ffe0bc;
  --pill-low-background: #42301b;
  --type-product-border: #1e5f47;
  --type-product-text: #8cf3c3;
  --type-product-background: #10281d;
  --type-service-border: #72552d;
  --type-service-text: #ffd7a4;
  --type-service-background: #2d2113;
  --type-content-border: #425a8d;
  --type-content-text: #b8cfff;
  --type-content-background: #17253b;
  --detail-background: #1b2334;
  --detail-border: #344056;
  --detail-heading: #edf3ff;
  --detail-text: #aeb9d1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

body[data-theme="light"] .vl21-card-grid {
  --text-strong: #1a1209;
  --text-soft: #8b7d70;
  --text-muted: #72665a;
  --panel-shadow: 0 16px 32px rgba(45, 31, 18, 0.08);
  --panel-border: #ddd7d0;
  --input-focus: #c86718;
  --chip-background: #f8efe2;
  --chip-border: #ead6ba;
  --card-background: #ffffff;
  --card-border: #ddd7d0;
  --card-border-hover: #d0c9c1;
  --score-background: #fff1de;
  --score-text: #5b340d;
  --score-high-background: #e9f7ef;
  --score-high-text: #1f7a52;
  --score-mid-background: #fff4d7;
  --score-mid-text: #8d5f00;
  --pill-background: #ede7de;
  --pill-text: #4b3d30;
  --pill-good-text: #1f7a52;
  --pill-good-background: #e9f7ef;
  --pill-ok-text: #8d5f00;
  --pill-ok-background: #fff4d7;
  --pill-low-text: #a54f0d;
  --pill-low-background: #fff1de;
  --type-product-border: #7bc6a8;
  --type-product-text: #1f7a52;
  --type-product-background: #e9f7ef;
  --type-service-border: #e0b987;
  --type-service-text: #7a4d26;
  --type-service-background: #fff1de;
  --type-content-border: #d6d0c9;
  --type-content-text: #6b5d4f;
  --type-content-background: #f2eee8;
  --detail-background: #f2eee8;
  --detail-border: #ddd7d0;
  --detail-heading: #3d2c1c;
  --detail-text: #72665a;
}

.vl21-shell.is-filters-collapsed .vl21-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vl21-card-grid .opp-score {
  border: 1px solid #4a566f;
}

@media (max-width: 1180px) {
  .vl22-platform,
  .vl22-proof-grid,
  .vl22-core-workflow {
    grid-template-columns: 1fr;
  }

  .vl21-card-grid,
  .vl21-shell.is-filters-collapsed .vl21-card-grid {
    grid-template-columns: 1fr;
  }
}