/*
  Public shadcn-style primitives for static pages.
  This file is intentionally scoped to public HTML pages that import it.
*/

:root {
  color-scheme: light dark;
  --background: 0 0% 100%;
  --foreground: 222.2 47.4% 11.2%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 47.4% 11.2%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 47.4% 11.2%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 346 77% 49%;
  --destructive-foreground: 0 0% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  --success: 160 84% 39%;
  --warning: 38 92% 50%;
  --radius: 0.5rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-md: 0 24px 60px rgb(15 23 42 / 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 222.2 47.4% 11.2%;
    --card-foreground: 0 0% 98%;
    --popover: 222.2 47.4% 11.2%;
    --popover-foreground: 0 0% 98%;
    --primary: 213.1 93.9% 67.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 346 87% 68%;
    --destructive-foreground: 240 10% 3.9%;
    --border: 217.2 32.6% 22%;
    --input: 217.2 32.6% 22%;
    --ring: 213.1 93.9% 67.8%;
    --success: 158 64% 52%;
    --warning: 43 96% 56%;
    --shadow-sm: none;
    --shadow-md: none;
  }
}

body {
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  font-synthesis-weight: none;
  text-rendering: geometricPrecision;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: calc(var(--radius) - 2px);
}

.site-header {
  border-bottom: 1px solid transparent !important;
  background: hsl(var(--background) / 0.9) !important;
  backdrop-filter: blur(14px);
}

.container {
  width: min(1180px, calc(100% - 48px)) !important;
}

.site-header .nav {
  width: 100% !important;
  min-height: 80px;
  padding: 18px 28px !important;
}

.site-header .container {
  width: 100% !important;
  max-width: none !important;
}

.brand-mark {
  width: 34px !important;
  height: 34px !important;
  overflow: hidden;
  border-color: hsl(var(--border)) !important;
  border-radius: calc(var(--radius) - 2px) !important;
  background: hsl(var(--muted)) !important;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-name {
  color: hsl(var(--foreground));
  font-size: 20px !important;
  font-weight: 800;
}

.nav-links {
  gap: 28px !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.nav-link {
  border-radius: calc(var(--radius) - 2px) !important;
  padding: 7px 10px !important;
}

.nav-link:hover {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

.button {
  min-height: 42px !important;
  border-radius: calc(var(--radius) - 2px) !important;
  padding: 0 16px !important;
  border: 1px solid hsl(var(--input)) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm);
}

.button-primary {
  border-color: hsl(var(--primary)) !important;
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.button-primary:hover {
  background: hsl(var(--primary) / 0.9) !important;
}

.button-secondary {
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
}

.button-secondary:hover {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

.hero {
  grid-template-columns: 500px minmax(560px, 1fr) !important;
  gap: 54px !important;
  justify-content: center;
  padding: 58px 0 76px !important;
}

.eyebrow,
.preview-status,
.pill,
.card-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 999px !important;
  background: hsl(var(--primary) / 0.08) !important;
  color: hsl(var(--primary)) !important;
  box-shadow: var(--shadow-sm);
  font-size: 12px !important;
  font-weight: 650 !important;
}

.eyebrow {
  border-color: hsl(var(--primary) / 0.26) !important;
  padding: 7px 11px !important;
}

.hero-title {
  color: hsl(var(--foreground)) !important;
  max-width: 500px;
  font-size: 46px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
}

.hero-copy,
.section-copy,
.card p,
.step p,
.cta-panel p,
.check-list li,
.row-main span,
.metric span,
.preview-title span,
.updated,
.intro,
.doc-card p,
.doc-card li,
.card li {
  color: hsl(var(--muted-foreground)) !important;
}

.trust-row {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  gap: 14px !important;
}

.trust-row span {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.trust-row i {
  color: hsl(var(--primary));
}

.product-preview,
.card,
.setup-steps,
.safety-panel,
.cta-panel,
.doc-card,
.shell > .hero,
.shell > article.card,
.source-card {
  border: 1px solid hsl(var(--border)) !important;
  border-radius: calc(var(--radius) + 4px) !important;
  background: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
  box-shadow: var(--shadow-sm) !important;
}

.product-preview {
  overflow: hidden;
  box-shadow: var(--shadow-md) !important;
}

.product-preview::before {
  content: none;
}

.product-shell {
  align-self: center;
  width: 100%;
  max-width: 626px;
  background: hsl(var(--card)) !important;
}

.shell-topbar {
  display: flex;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  padding: 14px 16px;
}

.shell-company {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: hsl(var(--foreground));
  font-size: 14px;
  font-weight: 800;
}

.shell-logo {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted));
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  object-fit: contain;
}

.shell-date {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--primary) / 0.3);
  border-radius: 999px;
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
}

.shell-layout {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  min-height: 500px;
}

.shell-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.42);
  padding: 16px;
}

.shell-nav-item {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 10px;
  border-radius: calc(var(--radius) - 2px);
  color: hsl(var(--muted-foreground));
  padding: 0 10px;
  font-size: 13px;
  font-weight: 750;
}

.shell-nav-item i {
  width: 14px;
  color: hsl(var(--muted-foreground));
  text-align: center;
}

.shell-nav-item.is-active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.shell-nav-item.is-active i {
  color: hsl(var(--primary-foreground));
}

.shell-main {
  min-width: 0;
  padding: 20px;
}

.shell-main-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.shell-main-head h2 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 20px;
  line-height: 1.3;
  font-weight: 800;
}

.shell-main-head p {
  margin: 3px 0 0;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  font-weight: 700;
}

.shell-report-button {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 0 16px;
  font-size: 13px;
  font-weight: 750;
}

.shell-board {
  overflow: hidden;
  margin-top: 16px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--background));
}

.shell-board-title {
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.42);
  color: hsl(var(--foreground));
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 800;
}

.shell-board .preview-row {
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  border: 0 !important;
  border-top: 1px solid hsl(var(--border)) !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
}

.shell-board .preview-row:first-of-type {
  border-top: 0 !important;
}

.shell-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.shell-mini-card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--background));
  padding: 14px;
}

.shell-mini-card strong,
.shell-mini-card span {
  display: block;
}

.shell-mini-card strong {
  color: hsl(var(--foreground));
  font-size: 14px;
  font-weight: 800;
}

.shell-mini-card span {
  margin-top: 4px;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  font-weight: 700;
}

.preview-topbar {
  background: hsl(var(--muted) / 0.36);
  border-bottom: 1px solid hsl(var(--border)) !important;
}

.preview-title strong,
.row-main strong,
.card h3,
.step h3,
.cta-panel h2,
.doc-card h1,
.doc-card h2,
.shell h1,
.shell h2 {
  color: hsl(var(--foreground)) !important;
}

.preview-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  padding: 8px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

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

.preview-tab {
  display: inline-flex;
  min-height: 30px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--radius) - 2px);
  color: hsl(var(--muted-foreground));
  padding: 0 10px;
  font-size: 12px;
  font-weight: 650;
}

.preview-tab.is-active {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  box-shadow: var(--shadow-sm);
}

.metric {
  border-color: hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  background: hsl(var(--background)) !important;
  min-height: 150px;
  padding: 18px !important;
}

.metric strong {
  color: hsl(var(--foreground)) !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
}

.metric small {
  display: block;
  margin-top: 12px;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  font-weight: 750;
}

.preview-row {
  border-color: hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  background: hsl(var(--background)) !important;
  transition: background .15s ease;
}

.preview-row:hover,
.card:hover {
  background: hsl(var(--accent) / 0.45) !important;
}

.avatar,
.card-icon,
.step-number {
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px) !important;
  background: hsl(var(--primary) / 0.1) !important;
  color: hsl(var(--primary)) !important;
}

.step-number {
  color: hsl(var(--primary)) !important;
}

.pill-success {
  border-color: hsl(var(--success) / 0.25) !important;
  background: hsl(var(--success) / 0.1) !important;
  color: hsl(var(--success)) !important;
}

.pill-warning {
  border-color: hsl(var(--warning) / 0.3) !important;
  background: hsl(var(--warning) / 0.12) !important;
  color: hsl(var(--warning)) !important;
}

.pill-danger {
  border-color: hsl(var(--destructive) / 0.28) !important;
  background: hsl(var(--destructive) / 0.12) !important;
  color: hsl(var(--destructive)) !important;
}

.pill-info {
  border-color: hsl(var(--primary) / 0.22) !important;
  background: hsl(var(--primary) / 0.12) !important;
  color: hsl(var(--primary)) !important;
}

.section {
  border-top: 1px solid hsl(var(--border)) !important;
  padding: 58px 0 !important;
}

.section:nth-of-type(even) {
  background: hsl(var(--muted) / 0.22);
}

.section-kicker,
.kicker,
.doc-kicker {
  color: hsl(var(--primary)) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.section-title {
  color: hsl(var(--foreground)) !important;
  font-size: clamp(1.55rem, 3vw, 2.1rem) !important;
  line-height: 1.16 !important;
}

.grid-4,
.grid-3,
.grid {
  gap: 14px !important;
}

.card {
  padding: 18px !important;
}

.card-icon {
  width: 34px !important;
  height: 34px !important;
  margin-bottom: 16px !important;
}

.setup-steps {
  overflow: hidden;
}

.step {
  border-color: hsl(var(--border)) !important;
  background: hsl(var(--card));
}

.safety-panel {
  gap: 28px !important;
  padding: 28px !important;
}

.check-list {
  gap: 8px !important;
}

.check-list li {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--background));
  padding: 10px 12px;
}

.check-list i {
  color: hsl(var(--success)) !important;
}

.cta-panel {
  background: hsl(var(--primary) / 0.08) !important;
}

.site-footer {
  border-top: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground)) !important;
}

.footer-links a:hover,
.links a:hover,
.doc-nav a:hover,
.shell > .nav a:hover {
  color: hsl(var(--foreground)) !important;
}

.doc-shell,
.shell {
  width: min(920px, calc(100% - 48px)) !important;
}

.shell {
  padding-top: 28px !important;
}

.shell:has(.grid) {
  width: min(1040px, calc(100% - 48px)) !important;
}

.doc-nav,
.shell > .nav {
  flex-wrap: wrap !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: 13px !important;
}

.doc-nav a,
.shell > .nav a,
.links a,
.footer-links a {
  border-radius: calc(var(--radius) - 2px);
}

.doc-nav a,
.shell > .nav a {
  min-height: 36px !important;
  padding: 0 10px !important;
}

.doc-nav a:hover,
.shell > .nav a:hover {
  background: hsl(var(--accent)) !important;
}

.doc-card,
.shell > article.card,
.shell > .hero {
  padding: 0 !important;
  overflow: hidden;
}

.doc-kicker,
.kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--muted) / 0.44);
  padding: 4px 9px;
}

.doc-card > .doc-kicker,
.doc-card > h1,
.doc-card > .updated,
.doc-card > .notice,
.doc-card > section,
.doc-card > .footer-links,
.shell > article.card > .kicker,
.shell > article.card > h1,
.shell > article.card > .updated,
.shell > article.card > .notice,
.shell > article.card > section,
.shell > article.card > .links,
.shell > .hero > .kicker,
.shell > .hero > h1,
.shell > .hero > .intro,
.shell > .hero > .notice {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

.doc-card > .doc-kicker,
.shell > article.card > .kicker,
.shell > .hero > .kicker {
  margin-top: 32px !important;
}

.doc-card > h1,
.shell h1 {
  margin-top: 10px !important;
  font-size: clamp(1.7rem, 4vw, 2.35rem) !important;
  line-height: 1.12 !important;
}

.notice {
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  background: hsl(var(--muted) / 0.52) !important;
  color: hsl(var(--muted-foreground)) !important;
}

.doc-card section,
.shell > article.card section {
  margin-top: 26px !important;
  border-top: 1px solid hsl(var(--border));
  padding-top: 22px;
}

.doc-card h2,
.shell > article.card h2,
.shell .card h2 {
  font-size: 18px !important;
  line-height: 1.28 !important;
}

.doc-card p,
.doc-card li,
.shell > article.card p,
.shell > article.card li,
.shell .card p,
.shell .card li {
  font-size: 15px !important;
  line-height: 1.72 !important;
}

.doc-card ul,
.shell > article.card ul,
.shell .card ul {
  padding-left: 20px !important;
}

.doc-card li::marker,
.shell > article.card li::marker,
.shell .card li::marker {
  color: hsl(var(--primary));
}

.footer-links,
.links {
  border-top: 1px solid hsl(var(--border));
  padding-top: 18px;
  padding-bottom: 24px;
  color: hsl(var(--muted-foreground)) !important;
}

.shell > article.card > .links {
  margin-bottom: 0;
}

.shell .hero {
  background: hsl(var(--card)) !important;
}

.shell .grid .card {
  min-height: 100%;
}

.shell .grid {
  gap: 16px !important;
}

.source-list a {
  color: hsl(var(--primary)) !important;
  text-decoration: none;
}

.source-list a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 1160px) {
  .hero {
    grid-template-columns: 1fr !important;
    padding-top: 44px !important;
  }

  .product-shell {
    justify-self: center;
  }
}

@media (max-width: 680px) {
  .container {
    width: min(100% - 40px, 1180px) !important;
  }

  .site-header {
    position: relative !important;
  }

  .site-header .nav {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: auto;
    padding: 14px 20px !important;
  }

  .nav-actions {
    width: auto !important;
  }

  .nav-actions .button-secondary {
    display: none !important;
  }

  .nav-actions .button-primary {
    flex: 0 0 auto !important;
  }

  .hero {
    gap: 28px !important;
    padding: 22px 0 44px !important;
  }

  .hero-title {
    font-size: 34px !important;
    line-height: 1.44 !important;
  }

  .hero-copy {
    font-size: 16px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
  }

  .hero-actions {
    flex-wrap: nowrap !important;
    width: fit-content !important;
  }

  .hero-actions .button {
    width: auto !important;
  }

  .trust-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .product-shell {
    max-width: none;
  }

  .shell-layout {
    display: block;
    min-height: 0;
  }

  .shell-sidebar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    border-right: 0;
    border-bottom: 1px solid hsl(var(--border));
    padding: 10px;
  }

  .shell-nav-item {
    min-height: 34px;
    justify-content: center;
    gap: 6px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 750;
  }

  .shell-nav-item:nth-child(n + 4) {
    display: none;
  }

  .shell-nav-item i {
    width: 12px;
    font-size: 11px;
  }

  .shell-main {
    padding: 14px 12px 14px;
  }

  .shell-main-head {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
  }

  .shell-main-head h2 {
    font-size: 18px;
    line-height: 1.35;
  }

  .shell-main-head p {
    font-size: 11px;
  }

  .shell-report-button {
    min-height: 34px;
    padding: 0 10px;
    font-size: 11px;
  }

  .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .shell-mini-grid {
    grid-template-columns: 1fr !important;
  }

  .metric {
    min-height: 78px;
    padding: 10px !important;
  }

  .metric strong {
    font-size: 24px !important;
  }

  .metric span,
  .metric small {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  .metric small {
    margin-top: 8px;
  }

  .shell-board {
    margin-top: 12px;
  }

  .shell-board-title {
    padding: 9px 12px;
    font-size: 12px;
  }

  .shell-board .preview-row {
    min-height: 0;
    padding: 10px 12px !important;
  }

  .shell-board .preview-row {
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }

  .shell-board .preview-row .pill {
    grid-column: 2;
    width: fit-content;
  }

  .shell-mini-grid {
    gap: 8px;
    margin-top: 12px;
  }

  .shell-mini-card {
    padding: 10px 12px;
  }

  .section {
    padding: 46px 0 !important;
  }

  .section-title {
    font-size: 28px !important;
  }

  .safety-panel {
    gap: 18px !important;
    padding: 18px !important;
  }

  .doc-shell,
  .shell,
  .shell:has(.grid) {
    width: min(100% - 40px, 1040px) !important;
  }

  .doc-card > .doc-kicker,
  .doc-card > h1,
  .doc-card > .updated,
  .doc-card > .notice,
  .doc-card > section,
  .doc-card > .footer-links,
  .shell > article.card > .kicker,
  .shell > article.card > h1,
  .shell > article.card > .updated,
  .shell > article.card > .notice,
  .shell > article.card > section,
  .shell > article.card > .links,
  .shell > .hero > .kicker,
  .shell > .hero > h1,
  .shell > .hero > .intro,
  .shell > .hero > .notice {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  .doc-card > .doc-kicker,
  .shell > article.card > .kicker,
  .shell > .hero > .kicker {
    margin-top: 20px !important;
  }
}