@import url("fonts.css");

:root {
  --bg: #F4F6F9;
  --card-bg: #FFFFFF;
  --card-border: rgba(20, 32, 43, 0.08);
  --ink: #111927;
  --ink-soft: #4B5565;
  --ink-faint: #9AA4B2;
  --primary: #0284C7;
  --primary-dark: #0369A1;
  --primary-soft: rgba(2, 132, 199, 0.08);
  --primary-border: rgba(2, 132, 199, 0.25);
  --accent: #0D9488;
  --accent-soft: rgba(13, 148, 136, 0.08);
  --tag-bg: #E2E8F0;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  
  /* Consensus dot colors */
  --consensus-green: #10B981;
  --consensus-yellow: #F59E0B;
  --consensus-red: #EF4444;
  
  /* Wind color scale samples */
  --wind-calm: #9AE6B4;
  --wind-breeze: #68D391;
  --wind-moderate: #4FD1C5;
  --wind-strong: #63B3ED;
  --wind-gale: #F6AD55;
  --wind-storm: #FC8181;
  --wind-violet: #B794F4;
}

[data-theme="dark"] {
  --bg: #0B111E;
  --card-bg: #151E2E;
  --card-border: rgba(255, 255, 255, 0.08);
  --ink: #F1F5F9;
  --ink-soft: #94A3B8;
  --ink-faint: #64748B;
  --primary: #38BDF8;
  --primary-dark: #0284C7;
  --primary-soft: rgba(56, 189, 248, 0.12);
  --primary-border: rgba(56, 189, 248, 0.25);
  --accent: #2DD4BF;
  --accent-soft: rgba(45, 212, 191, 0.12);
  --tag-bg: #1E293B;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.5);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: inherit;
}

body {
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16px;
  transition: background 0.2s, color 0.2s;
  padding-bottom: 80px;
}

/* Top navigation header */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}

.nav-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.nav-brand-badge {
  background: var(--primary);
  color: white;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.theme-toggle-btn {
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--primary-border);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.theme-toggle-btn:hover {
  background: var(--primary);
  color: #fff;
}

.lang-selector-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-soft);
  border: 1px solid var(--primary-border);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.lang-selector-wrap:hover {
  border-color: var(--primary);
}

.lang-globe {
  font-size: 14px;
  line-height: 1;
  display: inline-block;
}

.lang-select {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  padding-right: 2px;
}

.lang-select option {
  background: var(--card-bg);
  color: var(--ink);
}

.lang-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--card-bg);
  color: var(--ink);
  border: 1px solid var(--primary);
  box-shadow: var(--shadow-md);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  z-index: 1000;
  display: none;
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Main Container Layout */
.layout {
  max-width: 1160px;
  margin: 36px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
}

/* Sticky Sidebar Navigation */
.sidebar {
  position: sticky;
  top: 76px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.sidebar-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-faint);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--card-border);
}

.toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toc-item a {
  display: block;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.toc-item a:hover {
  background: var(--primary-soft);
  color: var(--primary);
  transform: translateX(3px);
}

.toc-item.active a {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
  border-left: 3px solid var(--primary);
}

.chapter-badge {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 12px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
}

/* Content Area */
.content-card {
  min-width: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  padding: 44px 48px;
  box-shadow: var(--shadow-sm);
}

.doc-header {
  margin-bottom: 40px;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 28px;
}

.doc-breadcrumb {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.doc-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 12px;
}

.doc-lead {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Section Styling */
section {
  margin-bottom: 50px;
  scroll-margin-top: 90px;
}

h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--ink);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

h2 .section-num {
  background: var(--primary-soft);
  color: var(--primary);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
}

h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin: 28px 0 12px;
}

h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 18px 0 8px;
}

p {
  color: var(--ink-soft);
  margin-bottom: 16px;
  font-size: 15.5px;
}

ul, ol {
  margin: 0 0 18px 22px;
  color: var(--ink-soft);
}

li {
  margin-bottom: 8px;
  font-size: 15px;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

/* Highlight & Callout Boxes */
.callout {
  background: var(--primary-soft);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 18px 22px;
  margin: 24px 0;
}

.callout-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.callout p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink);
}

.callout-success {
  background: rgba(16, 185, 129, 0.08);
  border-left-color: #10B981;
}

.callout-success .callout-title {
  color: #059669;
}

.callout-warning {
  background: rgba(245, 158, 11, 0.08);
  border-left-color: #F59E0B;
}

.callout-warning .callout-title {
  color: #D97706;
}

/* Spec Grid / Cards */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 20px 0 28px;
}

.card-box {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.card-box:hover {
  border-color: var(--primary-border);
  box-shadow: var(--shadow-md);
}

.card-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.grid-2 .card-box-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.badge-primary { background: var(--primary-soft); color: var(--primary); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-gray { background: var(--tag-bg); color: var(--ink-soft); }
.badge-gold { background: rgba(245, 158, 11, 0.15); color: #B45309; }

/* Model Tables */
.table-container {
  overflow-x: auto;
  margin: 22px 0 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-sm);
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13.5px;
  background: var(--card-bg);
}

thead th {
  background: var(--tag-bg);
  color: var(--ink);
  font-weight: 700;
  padding: 12px 14px;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}

tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--card-border);
  color: var(--ink-soft);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover td {
  background: var(--primary-soft);
}

td.model-name {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

td.center, th.center {
  text-align: center;
}

/* Consensus Pill and Dot Visuals */
.consensus-dot-sample {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.dot-green { background-color: var(--consensus-green); box-shadow: 0 0 6px rgba(16, 185, 129, 0.5); }
.dot-yellow { background-color: var(--consensus-yellow); box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); }
.dot-red { background-color: var(--consensus-red); box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }

/* Formula Box */
.formula-box {
  background: var(--tag-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 18px 24px;
  margin: 18px 0;
  font-family: var(--font-mono);
  font-size: 14.5px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 16px;
}

.formula-chunk {
  text-align: center;
}

.formula-math {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
}

.formula-caption {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* Param Item Cards */
.param-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}

.param-item {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}

.param-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

.param-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.param-units {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  background: var(--tag-bg);
  padding: 2px 8px;
  border-radius: 4px;
}

.param-desc {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
}

.param-note {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
}

/* Footer Navigation */
.doc-footer-nav {
  margin-top: 50px;
  padding-top: 28px;
  border-top: 1px solid var(--card-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.15s ease;
}

.footer-btn-primary {
  background: var(--primary);
  color: #fff;
}

.footer-btn-primary:hover {
  background: var(--primary-dark);
}

.footer-btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--card-border);
}

.footer-btn-outline:hover {
  background: var(--tag-bg);
}

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sidebar {
    display: none;
  }
  .content-card {
    padding: 28px 20px;
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* --- Phone portrait -------------------------------------------------------
   Below ~600px the header row could not hold brand + language picker + theme
   button, so the controls were pushed off-screen; several grids also kept two
   columns and made the page wider than the viewport. */
@media (max-width: 600px) {
  .nav-container { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; }
  .nav-brand { font-size: 15px; gap: 8px; min-width: 0; }
  .nav-actions { gap: 8px; margin-left: auto; }
  .lang-selector-wrap { min-width: 0; padding: 4px 8px; }
  .lang-select { min-width: 0; max-width: 42vw; font-size: 12px; }
  .theme-toggle-btn { padding: 6px 10px; font-size: 12px; }

  .layout { margin: 20px auto; padding: 0 14px; gap: 20px; }
  .content-card, .main-content { padding: 22px 16px; }
  .chapter-hero { padding-bottom: 20px; margin-bottom: 26px; }
  .chapter-title { font-size: 24px; }

  .grid-2, .dual-box { grid-template-columns: 1fr; }
  /* An auto-fit track still claims its min width inside a narrower column. */
  .callout-list, .component-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  }
  .doc-footer-nav { flex-direction: column; }

  table, .comparison-table { font-size: 12.5px; }
  th, td, .comparison-table th, .comparison-table td { padding: 8px 10px; }
  code, pre { overflow-wrap: anywhere; }
  /* Long compound words (de, el, fi, hu...) must be allowed to break. */
  body { overflow-wrap: break-word; }
  /* A flex heading cannot wrap its own text, so the long titles of some
     languages widened the page. Lay them out as normal text instead, with the
     number badge kept inline, and let a very long word break. */
  h1, h2, h3, h4, .section-title, .chapter-title {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  h2 .section-num, .section-title .section-number {
    margin-right: 10px;
    vertical-align: -6px;
  }
  h2, .section-title { font-size: 21px; }
  h3 { font-size: 18px; }
  /* A nowrap badge is wider than a small phone; let it break instead. */
  .badge { white-space: normal; }
  /* These tables have no scroll wrapper of their own, so let them scroll. */
  .compact-table, .comparison-table { display: block; overflow-x: auto; }
  .compact-table th, .compact-table td,
  .comparison-table th, .comparison-table td { padding: 7px 9px; font-size: 12px; }
}

@media (max-width: 430px) {
  /* The badge alone still links home; the word beside it costs too much room. */
  .nav-brand > span:not(.nav-brand-badge) { display: none; }
  .theme-toggle-btn { padding: 6px 9px; }
  .lang-select { max-width: 55vw; }
  /* Leave the theme label to screen readers - the icon carries it visually. */
  #themeLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}