/*
 * Shared color system for the standalone 1200km portfolio pages.
 * Loaded after each page's embedded styles so surface and text roles switch
 * together instead of relying on page-specific hardcoded overrides.
 */

:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07101f;
  --bg-elevated: #0b1629;
  --text: #e8eef9;
  --muted: #9bacc6;
  --line: #2a3d5c;
  --accent: #70a7ff;
  --accent-dark: #9cc2ff;
  --accent-soft: #b8d2ff;
  --panel: #0d192d;
  --panel-translucent: rgba(13, 25, 45, 0.94);
  --panel-ink: #f4f7fc;
  --panel-ink-soft: #ccd7e8;
  --panel-muted: #9bacc6;
  --chip: #142640;
  --chip-strong: #1b3152;
  --ok: #55d6a9;
  --warn: #f2bd64;
  --red: #ff7b88;
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
  --header-bg: rgba(7, 16, 31, 0.94);
  --hero-bg: rgba(7, 16, 31, 0.86);
  --footer-bg: #091426;
  --surface-hover: #152945;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fc;
  --bg-elevated: #eaf0fa;
  --text: #17233a;
  --muted: #52647e;
  --line: #c7d3e3;
  --accent: #0759d9;
  --accent-dark: #0648ad;
  --accent-soft: #174ea6;
  --panel: #ffffff;
  --panel-translucent: rgba(255, 255, 255, 0.96);
  --panel-ink: #111d33;
  --panel-ink-soft: #293a55;
  --panel-muted: #52647e;
  --chip: #e8effa;
  --chip-strong: #d9e6f8;
  --ok: #087d58;
  --warn: #8a5200;
  --red: #b42335;
  --shadow: 0 10px 28px rgba(28, 50, 84, 0.12);
  --header-bg: rgba(244, 247, 252, 0.94);
  --hero-bg: rgba(234, 240, 250, 0.88);
  --footer-bg: #eaf0fa;
  --surface-hover: #dce7f7;
}

html {
  background: var(--bg);
}

body,
[data-theme="light"] body,
[data-theme="dark"] body {
  background-color: var(--bg) !important;
  color: var(--text);
}

[data-theme="light"] body {
  background-image: none !important;
}

.site-header,
[data-theme="light"] .site-header,
[data-theme="dark"] .site-header {
  background: var(--header-bg) !important;
  border-color: var(--line) !important;
}

.hero,
.page-hero,
.profile-hero,
.cv-hero,
.cl-hero,
[data-theme="light"] .page-hero,
[data-theme="dark"] .page-hero,
[data-theme="dark"] .profile-hero,
[data-theme="dark"] .cv-hero,
[data-theme="dark"] .cl-hero {
  background: var(--hero-bg) !important;
  border-color: var(--line) !important;
  color: var(--text);
}

.brand,
.nav-links a,
.page-title,
.page-lead,
.page-eyebrow,
.eyebrow,
.lead,
.section-title,
.section-lead,
.section-note,
.category-heading,
.group-title,
.group-count,
.latest-updated {
  color: var(--text);
}

.section-note,
.section-lead,
.page-lead,
.latest-updated,
.group-count {
  color: var(--muted);
}

a {
  color: var(--accent);
}

a:hover,
.guide-title:hover {
  color: var(--accent-dark);
}

.card,
.card.featured,
.metric,
.hero-contact-card,
.path,
.latest-col,
.evidence-item,
.lab-row,
.doc-card,
.feature-card,
.job,
.job.current,
.skill-group,
.cl-card,
.contact-card {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--panel-ink-soft) !important;
  box-shadow: var(--shadow);
}

.guide-list,
.article-list {
  min-width: 0;
  background: var(--panel) !important;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.guide-grid,
.article-grid {
  align-items: start;
}

.guide-item,
.article-row {
  min-width: 0;
  padding: 14px 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.guide-list .guide-item:last-child,
.article-list .article-row:last-child {
  border-bottom: 0 !important;
}

.cv-section {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px;
  padding: 22px 24px 24px;
  color: var(--panel-ink-soft) !important;
  box-shadow: var(--shadow);
  overflow: visible;
}

.cv-section-title {
  margin-top: 0 !important;
}

.job-block {
  background: transparent !important;
  box-shadow: none !important;
}

.po-job {
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  .guide-grid,
  .article-grid {
    gap: 16px !important;
  }

  .guide-list,
  .article-list {
    border-radius: 8px;
  }

  .cv-section {
    padding: 18px 16px 20px;
    border-radius: 8px;
  }
}

@media print {
  .cv-section,
  .job-block,
  .po-job {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

.card.featured {
  background-image: linear-gradient(180deg, var(--panel), var(--bg-elevated)) !important;
}

[style*="background:#eef4ff"],
[style*="background: #eef4ff"] {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--panel-ink-soft) !important;
  box-shadow: var(--shadow);
}

[style*="background:#eef4ff"] p,
[style*="background: #eef4ff"] p {
  color: var(--panel-ink-soft) !important;
}

[style*="background:#eef4ff"] p:first-child,
[style*="background: #eef4ff"] p:first-child {
  color: var(--panel-ink) !important;
}

[style*="background:#eef4ff"] a,
[style*="background: #eef4ff"] a {
  color: var(--accent-dark) !important;
}

.card h2,
.card h3,
.card strong,
.metric strong,
.hero-contact-card h2,
.article-row h3,
.path h3,
.latest-list a,
.evidence-caption strong,
.guide-title,
.lab-name,
.doc-card-title,
.feature-card-title,
.job-title,
.job-title-text,
.job-employer,
.cv-section-title,
.skill-label,
.po-title,
.cl-card h2,
.cl-card h3 {
  color: var(--panel-ink) !important;
}

.doc-card .doc-card-title,
.doc-card .doc-card-title a {
  color: var(--panel-ink) !important;
}

.card p,
.hero-contact-card p,
.article-row p,
.guide-desc,
.lab-desc,
.doc-card-desc,
.feature-card-desc,
.job-desc,
.job-bullets,
.cv-section p,
.cv-section li,
.po-bullets,
.cl-para {
  color: var(--panel-ink-soft) !important;
}

.doc-card .doc-card-desc,
.doc-card p.doc-card-desc {
  color: var(--panel-ink-soft) !important;
}

.metric span,
.article-meta,
.path-intro,
.path ol,
.latest-date,
.evidence-caption,
.lab-meta,
.job-meta,
.job-dates,
.duration,
.doc-card-eyebrow {
  color: var(--panel-muted) !important;
}

.doc-card .doc-card-eyebrow,
.doc-card p.doc-card-eyebrow {
  color: var(--accent-dark) !important;
}

.card.featured .artifact,
.artifact,
code,
pre {
  background: var(--chip) !important;
  border-color: var(--accent) !important;
  color: var(--panel-muted) !important;
}

.card.featured .artifact em,
.artifact em {
  color: var(--accent-soft) !important;
}

.button,
[data-theme="dark"] .button:not(.primary):not(.theme-btn) {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--panel-ink) !important;
}

.button:hover,
[data-theme="dark"] .button:not(.primary):not(.theme-btn):hover {
  background: var(--surface-hover) !important;
  border-color: var(--accent) !important;
  color: var(--accent-dark) !important;
}

.button.primary,
.demo-cta {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .button.primary,
[data-theme="dark"] .demo-cta {
  color: #07101f !important;
}

.button.primary:hover,
.demo-cta:hover {
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
}

.chip,
.guide-tag,
.job-badge,
.lab-badges span {
  background: var(--chip) !important;
  border-color: var(--line) !important;
  color: var(--accent-dark) !important;
}

.chip.cti,
.chip.detection,
.chip.ai,
.chip.lab,
.chip.tool,
.chip.malware {
  background: var(--chip-strong) !important;
}

.chip.maturity {
  background: var(--accent) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .chip.maturity {
  color: #07101f !important;
}

.chip.green,
.guide-tag.green,
.open-to-work {
  background: color-mix(in srgb, var(--ok) 16%, var(--panel)) !important;
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line)) !important;
  color: var(--ok) !important;
}

.chip.green,
[data-theme="dark"] .chip.green,
[data-theme="light"] .chip.green {
  background: color-mix(in srgb, var(--ok) 16%, var(--panel)) !important;
  color: var(--ok) !important;
}

.chip.orange,
.guide-tag.orange,
.chip.offensive {
  background: color-mix(in srgb, var(--warn) 16%, var(--panel)) !important;
  color: var(--warn) !important;
}

.chip.orange,
.guide-tag.orange,
[data-theme="dark"] .chip.orange,
[data-theme="dark"] .guide-tag.orange,
[data-theme="light"] .chip.orange,
[data-theme="light"] .guide-tag.orange {
  background: color-mix(in srgb, var(--warn) 16%, var(--panel)) !important;
  color: var(--warn) !important;
}

.chip.red,
.guide-tag.red {
  background: color-mix(in srgb, var(--red) 14%, var(--panel)) !important;
  color: var(--red) !important;
}

.chip.red,
.guide-tag.red,
[data-theme="dark"] .chip.red,
[data-theme="dark"] .guide-tag.red,
[data-theme="light"] .chip.red,
[data-theme="light"] .guide-tag.red {
  background: color-mix(in srgb, var(--red) 14%, var(--panel)) !important;
  color: var(--red) !important;
}

.chip.purple,
.guide-tag.purple,
.chip.article {
  background: color-mix(in srgb, #9b7cff 15%, var(--panel)) !important;
  color: color-mix(in srgb, #9b7cff 76%, var(--panel-ink)) !important;
}

.chip.purple,
.guide-tag.purple,
[data-theme="dark"] .chip.purple,
[data-theme="dark"] .guide-tag.purple,
[data-theme="light"] .chip.purple,
[data-theme="light"] .guide-tag.purple {
  background: color-mix(in srgb, #9b7cff 15%, var(--panel)) !important;
  color: color-mix(in srgb, #9b7cff 76%, var(--panel-ink)) !important;
}

[data-theme="light"] .chip.orange,
[data-theme="light"] .guide-tag.orange,
[data-theme="light"] .chip.offensive {
  color: #6b3f00 !important;
}

[data-theme="light"] .chip.red,
[data-theme="light"] .guide-tag.red {
  color: #941f32 !important;
}

[data-theme="light"] .chip.purple,
[data-theme="light"] .guide-tag.purple,
[data-theme="light"] .chip.article {
  color: #57389d !important;
}

.eco-link,
[data-theme="dark"] .eco-link,
[data-theme="light"] .eco-link {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--accent-dark) !important;
}

.eco-link:hover {
  background: var(--surface-hover) !important;
  border-color: var(--accent) !important;
}

.ecosystem-bar {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--line);
}

.ecosystem-bar-text h3 {
  color: var(--panel-ink) !important;
}

.ecosystem-bar-text p {
  color: var(--panel-muted) !important;
}

.yes {
  color: var(--ok) !important;
}

.no {
  color: var(--red) !important;
}

table,
th,
td {
  border-color: var(--line) !important;
}

th,
[data-theme="dark"] th {
  background: var(--bg-elevated) !important;
  color: var(--panel-ink) !important;
}

td {
  color: var(--panel-ink-soft);
}

.compare-table {
  display: block;
  width: 100% !important;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.page-sidenav {
  background: var(--header-bg) !important;
  border-color: var(--line) !important;
}

.group-header {
  border-color: var(--line) !important;
  margin-bottom: 12px !important;
}

.group-header .group-title {
  color: var(--text) !important;
}

.group-header .group-count {
  color: var(--muted) !important;
}

.lab-row,
.repo-row {
  border: 1px solid var(--line) !important;
  border-radius: 10px;
  margin-bottom: 12px;
}

.lab-row,
.repo-row {
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) !important;
  width: 100%;
  max-width: 100%;
  padding: 18px 20px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.lab-group,
.repo-group {
  overflow: visible;
}

.lab-group .lab-row:last-child,
.repo-group .repo-row:last-child {
  margin-bottom: 0;
}

.lab-row *,
.repo-row *,
.lab-row > *,
.repo-row > *,
.article-row > *,
.guide-item > *,
.lab-meta,
.lab-body,
.repo-meta,
.repo-body,
.article-body,
.guide-desc {
  min-width: 0;
  max-width: 100%;
}

.lab-desc,
.repo-desc,
.article-desc,
.guide-desc {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

.lab-body,
.repo-body {
  padding-right: 8px;
}

.lab-desc,
.repo-desc {
  max-width: 78ch !important;
}

.lab-row .lab-name,
.repo-row .repo-name,
.article-row .article-title {
  color: var(--text) !important;
  overflow-wrap: anywhere;
}

.lab-row .lab-desc,
.lab-row .lab-body p,
.repo-row .repo-desc,
.repo-row .repo-meta {
  color: var(--muted) !important;
  max-width: none !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

.lab-links,
.repo-links,
.article-links,
.doc-card-links,
.links,
.ecosystem-links {
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
}

.lab-links a,
.repo-links a,
.article-links a,
.doc-card-links a,
.links a,
.eco-link {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 760px) {
  .lab-row,
  .repo-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
    padding: 16px !important;
    border-radius: 8px;
  }

  .lab-meta,
  .repo-meta {
    padding-right: 0 !important;
  }

  .lab-body,
  .repo-body {
    padding-right: 0;
  }
}

.sidenav-brand,
.sidenav-scroll a {
  color: var(--muted);
}

.sidenav-group,
[data-theme="light"] .sidenav-group,
[data-theme="dark"] .sidenav-group {
  color: var(--muted) !important;
}

.cv-headline,
.cv-contact-line,
.cv-contact-line span,
.cv-contact-line a {
  color: var(--muted) !important;
}

.sidenav-scroll a:hover,
.sidenav-scroll a.active {
  background: var(--chip) !important;
  color: var(--accent-dark) !important;
}

footer,
.footer,
[data-theme="light"] footer,
[data-theme="light"] .footer,
[data-theme="dark"] footer,
[data-theme="dark"] .footer {
  background: var(--footer-bg) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

.theme-btn {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--panel-ink) !important;
}

.theme-btn:hover {
  background: var(--surface-hover) !important;
  border-color: var(--accent) !important;
  color: var(--accent-dark) !important;
}

.site-header .nav,
.site-ecosystem-inner,
.shared-footer-inner,
.shared-footer-bottom {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

.site-header .nav-links a.active,
.site-header .nav-links a[aria-current="page"] {
  color: var(--accent-dark) !important;
  font-weight: 700;
}

.site-header .nav-links .nav-flagship {
  color: var(--accent-dark) !important;
  font-weight: 700;
}

.site-ecosystem-gateway {
  padding: 64px 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--line);
  color: var(--text);
}

.site-ecosystem-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.site-ecosystem-eyebrow {
  margin: 0 0 6px;
  color: var(--accent-dark) !important;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-ecosystem-heading h2 {
  margin: 0;
  color: var(--text) !important;
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.site-ecosystem-heading p:not(.site-ecosystem-eyebrow) {
  max-width: 72ch;
  margin: 8px 0 0;
  color: var(--muted) !important;
}

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

.site-ecosystem-card {
  min-width: 0;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.site-ecosystem-card > span {
  color: var(--accent-dark);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-ecosystem-card h3 {
  margin: 6px 0 8px;
  color: var(--panel-ink) !important;
}

.site-ecosystem-card p {
  margin: 0;
  color: var(--panel-ink-soft) !important;
  font-size: 0.88rem;
}

.site-ecosystem-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 14px;
  font-size: 0.82rem;
  font-weight: 700;
}

footer,
.footer {
  padding: 40px 0 18px !important;
}

.shared-footer-inner {
  display: grid;
  grid-template-columns: minmax(240px, 1.7fr) repeat(3, minmax(130px, 1fr));
  gap: 32px;
}

.shared-footer-brand a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text) !important;
}

.shared-footer-brand img {
  border-radius: 10px;
}

.shared-footer-brand p {
  max-width: 44ch;
  margin: 12px 0 0;
  color: var(--muted) !important;
  font-size: 0.86rem;
}

.shared-footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.shared-footer-column strong {
  margin-bottom: 4px;
  color: var(--text);
  font-size: 0.82rem;
}

.shared-footer-column a,
.shared-footer-bottom a {
  color: var(--muted) !important;
  font-size: 0.82rem;
}

.shared-footer-column a:hover,
.shared-footer-bottom a:hover {
  color: var(--accent-dark) !important;
}

.shared-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
}

@media (max-width: 920px) {
  .site-ecosystem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 640px) {
  .site-ecosystem-gateway {
    padding: 42px 0;
  }

  .site-ecosystem-heading,
  .shared-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-ecosystem-grid,
  .shared-footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  .site-ecosystem-gateway {
    display: none !important;
  }
}

::selection {
  background: var(--accent);
  color: #ffffff;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}