/* ═══════════════════════════════════════════════════════════
   STATUS BOARD — style.css
   
   Design concept: Observatory / Telemetry Station
   A personal mission control rendered as a living instrument 
   panel. Monospace is the native voice — this is data, 
   metrics, signals. The board breathes with a single beacon 
   pulse, making everything feel alive without being loud.
   
   Typography: JetBrains Mono (data/body) + Space Grotesk (display/name)
   Color: Functional — cyan=live, amber=achievement, sage=passive, red=alert
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  /* Type scale — modular, based on 1rem = 16px */
  --fs-xs: 0.6875rem;    /* 11px — timestamps, labels */
  --fs-sm: 0.75rem;      /* 12px — secondary info */
  --fs-base: 0.8125rem;  /* 13px — body text (tight for density) */
  --fs-md: 0.9375rem;    /* 15px — emphasis */
  --fs-lg: 1.125rem;     /* 18px — panel highlights */
  --fs-xl: 1.5rem;       /* 24px — numbers */
  --fs-2xl: 2.25rem;     /* 36px — hero stat */
  --fs-3xl: 3.5rem;      /* 56px — the big number */

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* Radius */
  --radius: 6px;
  --radius-sm: 3px;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 200ms;

  /* Font stacks */
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

/* ── Dark theme (default) ── */
[data-theme="dark"] {
  --bg-root: #080c16;
  --bg-panel: #0d1220;
  --bg-panel-hover: #111828;
  --bg-inset: #0a0f1a;
  --border: #1a2236;
  --border-subtle: #141c2e;

  --text-primary: #d4dae8;
  --text-secondary: #7a869e;
  --text-tertiary: #4a5670;

  --accent-cyan: #38bdf8;      /* live / active signals */
  --accent-amber: #f59e0b;     /* streaks / achievements */
  --accent-sage: #6ee7a0;      /* passive / good state */
  --accent-alert: #f87171;     /* warnings */
  --accent-purple: #a78bfa;    /* misc accent */

  --beacon-glow: rgba(56, 189, 248, 0.3);
  --bar-fill: #38bdf8;
  --bar-bg: #1a2236;

  --quote-bg: #0f1525;
  --code-bg: #141c2e;
}

/* ── Light theme ── */
[data-theme="light"] {
  --bg-root: #f0ece4;
  --bg-panel: #faf8f4;
  --bg-panel-hover: #f5f2ec;
  --bg-inset: #ece8e0;
  --border: #d8d2c4;
  --border-subtle: #e4ded2;

  --text-primary: #1a1714;
  --text-secondary: #6b6358;
  --text-tertiary: #9a9080;

  --accent-cyan: #0284c7;
  --accent-amber: #d97706;
  --accent-sage: #16a34a;
  --accent-alert: #dc2626;
  --accent-purple: #7c3aed;

  --beacon-glow: rgba(2, 132, 199, 0.25);
  --bar-fill: #0284c7;
  --bar-bg: #d8d2c4;

  --quote-bg: #f5f2ec;
  --code-bg: #ece8e0;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-root);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul { list-style: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--code-bg); padding: 1px 4px; border-radius: var(--radius-sm); }

/* ═══════════════════════════════
   TOP BAR
   ═══════════════════════════════ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* The beacon — a single pulse that makes the board feel alive */
.topbar__beacon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px var(--beacon-glow);
  animation: beacon-pulse 3s ease-in-out infinite;
}

@keyframes beacon-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--beacon-glow); }
  50% { opacity: 0.5; box-shadow: 0 0 12px var(--beacon-glow), 0 0 24px var(--beacon-glow); }
}

.topbar__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.topbar__sep {
  color: var(--text-tertiary);
  font-weight: 300;
}

.topbar__label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.topbar__clock {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  min-width: 6ch;
}

.theme-toggle {
  color: var(--text-secondary);
  font-size: var(--fs-lg);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  line-height: 1;
}
.theme-toggle:hover {
  color: var(--text-primary);
  background: var(--bg-inset);
}

[data-theme="dark"] .theme-toggle__icon--light { display: none; }
[data-theme="light"] .theme-toggle__icon--dark { display: none; }

/* ═══════════════════════════════
   GRID — The cockpit layout
   Asymmetric, content-driven sizing.
   Vitals strip is narrow, main area flexible.
   ═══════════════════════════════ */
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 1px;
  background: var(--border);
  /* Gap is 1px border lines — the "seams" of the cockpit panels */
}

/* Panel assignments — each panel knows its place */
.panel--vitals   { grid-column: 1; grid-row: 1 / 5; }
.panel--streak   { grid-column: 2; grid-row: 1; }
.panel--github   { grid-column: 3 / 5; grid-row: 1; }
.panel--music    { grid-column: 2; grid-row: 2; }
.panel--weather  { grid-column: 3 / 5; grid-row: 2; }
.panel--books    { grid-column: 2 / 4; grid-row: 3; }
.panel--quote    { grid-column: 4; grid-row: 3 / 5; }
.panel--systems  { grid-column: 1; grid-row: 5; }
.panel--focus    { grid-column: 2; grid-row: 4; }
.panel--log      { grid-column: 3; grid-row: 4; }

/* ═══════════════════════════════
   PANELS — Base
   ═══════════════════════════════ */
.panel {
  background: var(--bg-panel);
  padding: var(--sp-5);
  transition: background var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
}

.panel:hover {
  background: var(--bg-panel-hover);
}

.panel__head {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-4);
  text-transform: uppercase;
}

/* ═══════════════════════════════
   VITALS — Narrow left strip
   Like a sidebar readout on an instrument panel
   ═══════════════════════════════ */
.vitals-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1;
}

.vital {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vital__label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}

.vital__value {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-primary);
}

.vital__value--accent-warm {
  color: var(--accent-sage);
}

.vital__value--accent-alert {
  color: var(--accent-alert);
}

.vital__timestamp {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: var(--sp-3);
  font-style: italic;
}

/* ═══════════════════════════════
   STREAK — The big hero number
   ═══════════════════════════════ */
.streak {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.streak__number {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1;
  color: var(--accent-amber);
  letter-spacing: -0.03em;
}

.streak__unit {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
}

.streak__detail {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: var(--sp-2);
}

.streak__bar {
  display: flex;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-4);
}

.streak__dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--bar-bg);
  transition: background var(--dur) var(--ease);
}

.streak__dot--filled {
  background: var(--accent-amber);
}

.streak__dot--today {
  background: var(--accent-amber);
  animation: today-pulse 2s ease-in-out infinite;
}

@keyframes today-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ═══════════════════════════════
   GITHUB
   ═══════════════════════════════ */
.github-stats {
  display: flex;
  gap: var(--sp-6);
}

.github-stat {
  display: flex;
  flex-direction: column;
}

.github-stat__num {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.github-stat__label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: var(--sp-1);
}

.github-graph {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-5);
  height: 80px;
}

.github-graph__bar {
  flex: 1;
  background: var(--bar-fill);
  height: var(--h);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  opacity: 0.7;
  transition: opacity var(--dur) var(--ease);
}

.github-graph__bar:hover {
  opacity: 1;
}

.github-graph__bar--today {
  opacity: 1;
  animation: today-pulse 2s ease-in-out infinite;
}

.github-graph__day {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  position: absolute;
  bottom: -20px;
}

/* ═══════════════════════════════
   NOW PLAYING
   ═══════════════════════════════ */
.music {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}

.music__vis {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
}

.music__bar {
  width: 3px;
  background: var(--accent-purple);
  border-radius: 1px;
  animation: music-eq 1.2s ease-in-out infinite;
}

.music__bar:nth-child(1) { height: 60%; animation-delay: 0s; }
.music__bar:nth-child(2) { height: 100%; animation-delay: 0.2s; }
.music__bar:nth-child(3) { height: 40%; animation-delay: 0.4s; }
.music__bar:nth-child(4) { height: 80%; animation-delay: 0.1s; }
.music__bar:nth-child(5) { height: 50%; animation-delay: 0.3s; }

@keyframes music-eq {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.3); }
}

.music__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.music__track {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
}

.music__artist {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.music__time {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}

/* ═══════════════════════════════
   WEATHER
   ═══════════════════════════════ */
.weather {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1;
}

.weather__primary {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.weather__temp {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.weather__cond {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.weather__secondary {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.weather__detail {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

.weather__aqi-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--accent-amber);
  border: 1px solid var(--accent-amber);
  border-radius: var(--radius-sm);
  padding: 0 4px;
  line-height: 1.4;
  font-weight: 500;
}

.weather__forecast {
  display: flex;
  gap: var(--sp-5);
  margin-top: auto;
}

.weather__day {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.weather__day-name {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

.weather__day-temp {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-primary);
}

/* ═══════════════════════════════
   BOOKS
   ═══════════════════════════════ */
.books-count {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.books-count__num {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.books-count__target {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

.books-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.book {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
}

.book__status {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent-cyan);
  letter-spacing: 0.06em;
}

.book__status--done {
  color: var(--accent-sage);
}

.book__title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book__author {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

.book--current {
  grid-template-columns: auto 1fr auto;
}

.book__progress {
  grid-column: 1 / -1;
  height: 3px;
  background: var(--bar-bg);
  border-radius: 2px;
  overflow: hidden;
}

.book__progress-fill {
  height: 100%;
  width: var(--progress);
  background: var(--accent-cyan);
  border-radius: 2px;
  transition: width 0.6s var(--ease);
}

/* ═══════════════════════════════
   QUOTE
   ═══════════════════════════════ */
.panel--quote {
  background: var(--quote-bg);
  justify-content: center;
}

.quote {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.quote__text {
  font-size: var(--fs-base);
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.7;
  transition: opacity 0.4s var(--ease);
}

.quote__attr {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: var(--sp-3);
  transition: opacity 0.4s var(--ease);
}

.quote__cycle {
  display: flex;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-4);
}

.quote__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-tertiary);
  opacity: 0.3;
  transition: opacity var(--dur) var(--ease);
}

.quote__dot--active {
  opacity: 1;
  background: var(--accent-cyan);
}

/* ═══════════════════════════════
   SYSTEMS
   ═══════════════════════════════ */
.systems-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}

.system {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-2);
  align-items: center;
}

.system__indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.system__indicator--up {
  background: var(--accent-sage);
  box-shadow: 0 0 4px var(--accent-sage);
}

.system__indicator--warn {
  background: var(--accent-amber);
  box-shadow: 0 0 4px var(--accent-amber);
  animation: today-pulse 2s ease-in-out infinite;
}

.system__indicator--down {
  background: var(--accent-alert);
  box-shadow: 0 0 4px var(--accent-alert);
}

.system__name {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.system__uptime {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════
   FOCUS
   ═══════════════════════════════ */
.focus {
  display: flex;
  gap: var(--sp-5);
}

.focus__stat {
  display: flex;
  flex-direction: column;
}

.focus__num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.focus__label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: var(--sp-1);
}

.focus__blocks {
  display: flex;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-4);
}

.focus__block {
  width: 28px;
  height: 8px;
  border-radius: var(--radius-sm);
  background: var(--bar-bg);
}

.focus__block--done {
  background: var(--accent-sage);
}

/* ═══════════════════════════════
   ACTIVITY LOG
   ═══════════════════════════════ */
.log-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.log-entry {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
}

.log-entry__time {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 4ch;
}

.log-entry__text {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

.log-entry__text em {
  font-style: italic;
  color: var(--text-primary);
}

/* ═══════════════════════════════
   BOTTOM BAR
   ═══════════════════════════════ */
.bottombar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) var(--sp-6);
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
}

.bottombar__status {
  color: var(--accent-sage);
  font-weight: 500;
}

/* ═══════════════════════════════
   REDUCED MOTION
   Respect user preference: kill animations,
   keep the design intact.
   ═══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .topbar__beacon {
    box-shadow: 0 0 6px var(--beacon-glow);
    opacity: 1;
  }

  .quote__text,
  .quote__attr {
    transition: none;
  }
}

/* ═══════════════════════════════
   RESPONSIVE
   The cockpit reorganizes at smaller viewports.
   ═══════════════════════════════ */

/* Tablet — 2 columns, vitals goes horizontal */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }

  .panel--vitals   { grid-column: 1 / -1; grid-row: auto; }
  .panel--streak   { grid-column: 1; grid-row: auto; }
  .panel--github   { grid-column: 2; grid-row: auto; }
  .panel--music    { grid-column: 1; grid-row: auto; }
  .panel--weather  { grid-column: 2; grid-row: auto; }
  .panel--books    { grid-column: 1 / -1; grid-row: auto; }
  .panel--quote    { grid-column: 1 / -1; grid-row: auto; }
  .panel--systems  { grid-column: 1; grid-row: auto; }
  .panel--focus    { grid-column: 2; grid-row: auto; }
  .panel--log      { grid-column: 1 / -1; grid-row: auto; }

  /* Vitals goes horizontal in tablet */
  .vitals-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-6);
  }

  .vital {
    min-width: 100px;
  }
}

/* Mobile — single column, everything stacks */
@media (max-width: 640px) {
  .topbar {
    padding: var(--sp-3) var(--sp-4);
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .topbar__label {
    display: none;
  }

  .topbar__sep {
    display: none;
  }

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

  .panel--vitals,
  .panel--streak,
  .panel--github,
  .panel--music,
  .panel--weather,
  .panel--books,
  .panel--quote,
  .panel--systems,
  .panel--focus,
  .panel--log {
    grid-column: 1;
    grid-row: auto;
  }

  .panel {
    padding: var(--sp-4);
  }

  .streak__number {
    font-size: var(--fs-2xl);
  }

  .github-stats {
    gap: var(--sp-4);
  }

  .github-stat__num {
    font-size: var(--fs-xl);
  }

  .weather__forecast {
    gap: var(--sp-3);
  }

  .vitals-list {
    flex-direction: column;
    gap: var(--sp-3);
  }

  .bottombar {
    padding: var(--sp-3) var(--sp-4);
    flex-direction: column;
    gap: var(--sp-1);
    text-align: center;
  }
}

/* ═══════════════════════════════
   SUBTLE ENTRANCE ANIMATIONS
   Panels fade in on load — just once.
   ═══════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .panel {
    animation: panel-enter 0.5s var(--ease) both;
  }

  .panel--vitals   { animation-delay: 0.0s; }
  .panel--streak   { animation-delay: 0.05s; }
  .panel--github   { animation-delay: 0.1s; }
  .panel--music    { animation-delay: 0.15s; }
  .panel--weather  { animation-delay: 0.2s; }
  .panel--books    { animation-delay: 0.25s; }
  .panel--quote    { animation-delay: 0.3s; }
  .panel--systems  { animation-delay: 0.35s; }
  .panel--focus    { animation-delay: 0.4s; }
  .panel--log      { animation-delay: 0.45s; }

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