/* Observatory Design Tokens */

@font-face {
  font-family: 'Chip Display Variable';
  src: url('./Chip_Display_Variable-Regular.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Chip Text Variable';
  src: url('./Chip_Text_Variable-Regular.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Chip Mono';
  src: url('./Chip_Mono-Regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  /* Palette — HSL triplets */
  --day: 0 0% 100%;
  --night: 0 0% 6%;

  /* Husk — greyscale */
  --husk-200: 0 0% 98%;
  --husk-300: 0 0% 96%;
  --husk-400: 0 0% 91%;
  --husk-500: 0 0% 81%;
  --husk-600: 320 2% 64%;
  --husk-700: 312 2% 47%;
  --husk-900: 330 2% 24%;

  /* Accent families */
  --hardy-500: 89 85% 46%;      /* green good */
  --persimmon-500: 13 90% 54%;  /* red bad */
  --banginapalli-400: 48 100% 51%; /* yellow warn */
  --shuiguo-500: 198 94% 57%;   /* blue info */
  --jabuticaba-400: 259 94% 44%;/* violet */

  /* Semantic aliases */
  --bg-layer-00: var(--day);
  --bg-outline-00: var(--husk-200);
  --border-outline-00: var(--husk-400);
  --text-color-primary: var(--husk-900);
  --text-color-secondary: var(--husk-700);
  --text-color-tertiary: var(--husk-600);
  --text-color-muted: var(--husk-500);

  /* Spacing — phi-based */
  --g: 1rem;
  --sp-xs: calc(var(--g) * 0.5);
  --sp-sm: calc(var(--g) * 0.7);
  --sp-base: var(--g);
  --sp-lg: calc(var(--g) * 1.41);
  --sp-xl: calc(var(--g) * 2);
  --sp-2xl: calc(var(--g) * 2.83);
  --sp-3xl: calc(var(--g) * 4);

  /* Typography */
  --font-text: 'Chip Text Variable', -apple-system, system-ui, sans-serif;
  --font-display: 'Chip Display Variable', -apple-system, system-ui, sans-serif;
  --font-mono: 'Chip Mono', 'SF Mono', monospace;
  --font-small: 'Roboto Mono', 'SF Mono', monospace;

  /* Geometry */
  --radius: 16px;
}

/* Google Fonts for fallback */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600&display=swap');

/* Reset & base */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-text);
  font-variation-settings: 'wght' 440;
  font-size: 14px;
  line-height: 1.5;
  color: hsl(var(--text-color-primary));
  background: hsl(var(--bg-layer-00));
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: normal;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, select {
  font-family: inherit;
}

[hidden] {
  display: none !important;
}

/* Access gate */
#access-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--sp-xl);
}

.gate-card {
  background: hsl(var(--bg-layer-00));
  border: 1px solid hsl(var(--border-outline-00));
  border-radius: var(--radius);
  padding: var(--sp-2xl);
  max-width: 400px;
  width: 100%;
}

.gate-card h1 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 32px;
  font-variation-settings: 'wght' 700;
  margin-bottom: var(--sp-base);
}

.gate-card p {
  margin: 0 0 var(--sp-base);
  color: hsl(var(--text-color-secondary));
}

.gate-card input {
  width: 100%;
  padding: var(--sp-sm) var(--sp-base);
  border: 1px solid hsl(var(--border-outline-00));
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: var(--sp-base);
}

.gate-card input:focus {
  outline: none;
  border-color: hsl(var(--text-color-secondary));
}

.gate-card button {
  width: 100%;
  padding: var(--sp-sm) var(--sp-base);
  background: hsl(var(--night));
  color: hsl(var(--day));
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-variation-settings: 'wght' 540;
}

.gate-card button:hover {
  background: hsl(330 2% 18%);
}

.gate-card .error {
  color: hsl(var(--persimmon-500));
  font-size: 13px;
  margin-top: var(--sp-base);
}

/* Main app */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Topbar */
.topbar {
  padding: var(--sp-xl) var(--sp-2xl);
  border-bottom: 1px solid hsl(var(--border-outline-00));
}

.topbar h1 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 32px;
  font-variation-settings: 'wght' 700;
  margin-bottom: var(--sp-lg);
}

.controls {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-lg);
  flex-wrap: wrap;
}

.controls label {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  color: hsl(var(--text-color-secondary));
}

.controls select {
  padding: 4px 8px;
  border: 1px solid hsl(var(--border-outline-00));
  border-radius: 6px;
  font-size: 13px;
  background: hsl(var(--bg-layer-00));
  color: hsl(var(--text-color-primary));
  margin-left: var(--sp-xs);
}

.controls select:focus {
  outline: none;
  border-color: hsl(var(--text-color-secondary));
}

.controls input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.muted {
  font-size: 12px;
  color: hsl(var(--text-color-muted));
}

/* Tab bar */
#tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.tab {
  padding: var(--sp-xs) var(--sp-base);
  font-size: 14px;
  line-height: 20px;
  font-variation-settings: 'wght' 480;
  color: hsl(var(--text-color-secondary));
  border: none;
  border-radius: 20px;
  background: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tab:hover {
  color: hsl(var(--text-color-primary));
  background: hsla(0, 0%, 6%, 0.04);
}

.tab[aria-selected="true"] {
  color: hsl(var(--day));
  background: hsl(var(--night));
  font-variation-settings: 'wght' 540;
}

/* Tab content */
#tab-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-xl);
  width: 100%;
}

/* Cards */
.card {
  width: 100%;
  box-sizing: border-box;
  background: hsl(var(--bg-layer-00));
  border: 1px solid hsl(var(--border-outline-00));
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: var(--sp-lg);
}

/* Card titles (h3) — global h-margin is 0, so add breathing room below the
   title before the card content. Applies to every card across all tabs. */
.card > h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-variation-settings: 'wght' 600;
  margin-bottom: var(--sp-sm);
}

/* When a muted subhead follows the title, tighten the gap to the title and
   keep margin before the content below it. */
.card > h3 + .muted {
  margin-top: calc(-1 * var(--sp-xs));
  margin-bottom: var(--sp-sm);
}

.card-title {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 20px;
  font-variation-settings: 'wght' 660;
  margin-bottom: var(--sp-sm);
}

.card-desc {
  font-size: 13px;
  color: hsl(var(--text-color-tertiary));
  margin-bottom: var(--sp-sm);
}

/* KPI row */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
}

.kpi {
  background: hsl(var(--bg-layer-00));
  border: 1px solid hsl(var(--border-outline-00));
  border-radius: var(--radius);
  padding: var(--sp-lg) var(--sp-xl);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpi-label {
  font-family: var(--font-small);
  font-size: 11px;
  font-variation-settings: 'wght' 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--text-color-tertiary));
}

.kpi-value {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 44px;
  font-variation-settings: 'wght' 700;
  font-variant-numeric: tabular-nums;
}

.kpi-trend {
  font-family: var(--font-small);
  font-size: 11px;
  color: hsl(var(--text-color-tertiary));
}

.kpi-trend-note {
  color: hsl(var(--text-color-muted));
}

.trend-up {
  color: hsl(var(--hardy-500));
}

.trend-down {
  color: hsl(var(--persimmon-500));
}

/* Charts — LOAD-BEARING WIDTH */
.chart {
  display: block;
  width: 100%;
  height: 220px;
}

/* Data tables */
.data-table {
  border-collapse: collapse;
  width: 100%;
}

.data-table th,
.data-table td {
  padding: 0 16px;
  text-align: left;
  font-size: 13px;
}

/* Cells carry their own full-contrast colour so they never inherit a faint
   container colour (e.g. a `.muted` wrapper). WCAG-AA on white. */
.data-table td {
  color: hsl(var(--text-color-primary));
}

/* Errors drill-down: clickable aggregate rows + nested instance table. */
.errors-table .err-row { cursor: pointer; }
.errors-table .err-row:hover { background: hsla(0, 0%, 6%, 0.03); }
.errors-table .caret {
  font-family: var(--font-small);
  color: hsl(var(--text-color-tertiary));
  font-size: 11px;
}
.err-detail-row > td {
  padding: var(--sp-sm) 16px var(--sp-base) 32px;
  background: hsl(var(--husk-200));
}
.err-detail-row .data-table { background: hsl(var(--bg-layer-00)); }

.data-table thead th {
  height: 44px;
  font-family: var(--font-small);
  font-size: 11px;
  font-variation-settings: 'wght' 660;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--text-color-secondary));
  border-bottom: 1px solid hsl(var(--border-outline-00));
}

.data-table th.num,
.data-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.data-table tbody tr {
  height: 44px;
  border-bottom: 1px solid hsl(var(--husk-400));
}

.data-table tbody tr:hover {
  background: hsla(0, 0%, 6%, 0.02);
}

/* Bar rows */
.bar-row {
  display: grid;
  grid-template-columns: 1fr 160px 64px 52px;
  gap: var(--sp-sm);
  align-items: center;
  margin-bottom: var(--sp-sm);
}

.bar-row-name {
  font-size: 12px;
  font-variation-settings: 'wght' 480;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-row-track {
  height: 8px;
  border-radius: 4px;
  background: hsl(var(--husk-300));
  overflow: hidden;
}

.bar-row-track > div {
  height: 100%;
}

.bar-row-count,
.bar-row-share {
  font-family: var(--font-small);
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--text-color-tertiary));
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-small);
  font-size: 10px;
  font-variation-settings: 'wght' 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge.good {
  background: hsla(89, 85%, 46%, 0.15);
  color: hsl(89, 89%, 22%);
}

.badge.warn {
  background: hsla(48, 100%, 51%, 0.2);
  color: hsl(55, 100%, 25%);
}

.badge.bad {
  background: hsla(13, 90%, 54%, 0.15);
  color: hsl(13, 90%, 38%);
}

/* Responsive */
@media (max-width: 800px) {
  .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  #tab-content {
    padding: var(--sp-base);
  }

  .topbar {
    padding: var(--sp-base);
  }
}