/*
 * Müller-Brockmann Base Design System
 * Swiss International Style for CloudNC web surfaces
 * 
 * RULES:
 * - Every page imports this file
 * - Never redefine these tokens in page-specific styles
 * - Never hardcode hex colors — use var(--token)
 * - Never add font-family declarations — this file handles it
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ═══ TOKENS ═══ */
:root {
  /* Grid */
  --col: 72px;
  --gutter: 24px;
  --unit: 8px;
  --sidebar-width: 220px;
  --content-max: 960px;

  /* Color palette (8 colors, no more) */
  --accent: #E63946;      /* CloudNC red — highlights, key data, active states */
  --black: #0A0A0A;       /* Primary text */
  --gray-900: #1A1A1A;    /* Headings, strong text */
  --gray-600: #6B6B6B;    /* Secondary text, descriptions */
  --gray-400: #A0A0A0;    /* Tertiary text, inactive nav */
  --gray-200: #E5E5E5;    /* Borders, dividers */
  --gray-100: #F2F2F2;    /* Subtle backgrounds */
  --white: #FFFFFF;        /* Page background */
}

/* ═══ RESET ═══ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ═══ BASE ═══ */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--black);
  background: var(--white);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* ═══ GRID SYSTEM ═══ */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

/* ═══ SIDEBAR ═══ */
/* CRITICAL: overflow-y:auto is required. Without it, nav items beyond viewport height
   are invisible and unreachable. Do not remove. — 2026-03-30 */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--gray-200);
  padding: calc(var(--unit) * 4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--unit) * 2);
}

.sidebar__logo {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
}

.sidebar__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  margin-top: calc(var(--unit) * 2);
  margin-bottom: calc(var(--unit) * 1);
}

.sidebar__nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--unit) * 0.5);
}

.sidebar__nav a {
  display: block;
  padding: calc(var(--unit) * 1) calc(var(--unit) * 2);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 0.15s ease;
}

.sidebar__nav a:hover {
  color: var(--black);
}

.sidebar__nav a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}

/* ═══ MAIN CONTENT ═══ */
.main {
  padding: calc(var(--unit) * 8) calc(var(--unit) * 6);
  max-width: var(--content-max);
  margin: 0 auto;
}

/* ═══ TYPOGRAPHY ═══ */
.t-title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--gray-900);
  margin-bottom: calc(var(--unit) * 2);
}

.t-section {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gray-900);
  margin-bottom: calc(var(--unit) * 3);
}

.t-body {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--black);
}

.t-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
}

.t-accent {
  color: var(--accent);
}

/* ═══ SECTION MARKERS ═══ */
.section-marker {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  margin-bottom: calc(var(--unit) * 2);
}

/* ═══ HORIZONTAL RULES ═══ */
hr {
  border: none;
  border-top: 1px solid var(--gray-200);
  margin: calc(var(--unit) * 5) 0;
}

hr.heavy {
  border-top: 2px solid var(--black);
}

/* ═══ STAT CARDS ═══ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  margin: calc(var(--unit) * 4) 0;
}

.stat-card {
  border-top: 2px solid var(--black);
  padding: calc(var(--unit) * 3) 0;
}

.stat-card__value {
  font-size: 42px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}

.stat-card__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-600);
  margin-top: calc(var(--unit) * 1);
}

/* ═══ DATA TABLES ═══ */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: calc(var(--unit) * 4) 0;
  font-size: 14px;
}

.data-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  text-align: left;
  padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
  border-bottom: 2px solid var(--black);
}

.data-table td {
  padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
  border-bottom: 1px solid var(--gray-200);
  vertical-align: top;
}

.data-table td:first-child {
  font-weight: 600;
}

.data-table .val {
  font-weight: 700;
  color: var(--accent);
}

/* ═══ CASE STUDY CARDS ═══ */
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gutter);
  margin: calc(var(--unit) * 4) 0;
}

.case-card {
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--accent);
  padding: calc(var(--unit) * 3);
}

.case-card__title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: calc(var(--unit) * 1);
}

.case-card__meta {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: calc(var(--unit) * 2);
}

.case-card__quote {
  font-size: 13px;
  font-style: italic;
  color: var(--gray-600);
  border-left: 2px solid var(--accent);
  padding-left: calc(var(--unit) * 2);
  margin: calc(var(--unit) * 2) 0;
}

.case-card__metric {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
}

.case-card__metric-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-600);
}

/* ═══ HIGHLIGHT BOX ═══ */
.highlight {
  background: var(--gray-100);
  border-left: 3px solid var(--accent);
  padding: calc(var(--unit) * 3);
  margin: calc(var(--unit) * 4) 0;
  font-size: 13px;
  line-height: 1.6;
}

/* ═══ DATA SOURCE TAGS ═══ */
.tam-tag { display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 3px; vertical-align: middle; }
.tag-gov { background: #E8F5E9; color: #2E7D32; }
.tag-ind { background: #E3F2FD; color: #1565C0; }
.tag-model { background: #FFF3E0; color: #E65100; }

/* ═══ CAPTIONS ═══ */
figcaption, .t-caption { font-size: 12px; line-height: 1.5; color: var(--gray-500); }

/* ═══ ANALYST NOTES ═══ */
.analyst-note {
  background: #fafbfc;
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: calc(var(--unit) * 3) calc(var(--unit) * 4);
  margin: calc(var(--unit) * 4) 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray-800);
}
.analyst-note__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: calc(var(--unit) * 1.5);
}

/* ═══ INDEX CARDS ═══ */
.idx-cards { display: flex; flex-direction: column; gap: 1px; margin-bottom: calc(var(--unit) * 5); }
.idx-card { display: flex; align-items: flex-start; padding: calc(var(--unit) * 2) calc(var(--unit) * 2.5); border-left: 3px solid var(--accent); background: var(--gray-100); text-decoration: none; color: inherit; transition: background 0.15s; }
.idx-card:hover { background: var(--gray-200); }
.idx-card-body { flex: 1; }
.idx-card-title { font-size: 14px; font-weight: 700; color: var(--gray-900); margin-bottom: calc(var(--unit) * 0.5); }
.idx-card-summary { font-size: 13px; color: var(--gray-600); line-height: 1.5; }

/* ═══ PAGE FOOTER ═══ */
.page-footer { margin-top: calc(var(--unit) * 8); padding-top: calc(var(--unit) * 3); border-top: 1px solid var(--gray-200); font-size: 11px; color: var(--gray-400); }
.page-footer a { color: var(--gray-600); }

/* ═══ RESPONSIVE ═══ */

/* Tablet: sidebar collapses at 900px for better content breathing room */
@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--gray-200);
    padding: calc(var(--unit) * 2) calc(var(--unit) * 3);
  }

  .sidebar__nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
  }

  .sidebar__nav a {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: calc(var(--unit) * 1);
    font-size: 12px;
  }

  .sidebar__nav a.active {
    border-left: none;
    border-bottom-color: var(--accent);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .main {
    padding: calc(var(--unit) * 4) calc(var(--unit) * 3);
  }

  .t-title {
    font-size: 28px;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .stat-card__value {
    font-size: 32px;
  }

  .case-grid {
    grid-template-columns: 1fr;
  }

  .idx-card { padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2); }

  .data-table {
    font-size: 13px;
  }

  .data-table th,
  .data-table td {
    padding: calc(var(--unit) * 1) calc(var(--unit) * 1);
  }
}